From 305eb90c75e6a4aa076c62b5364b904dc5c6518e Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Sun, 13 Dec 2020 19:20:55 -0500 Subject: [PATCH] fix(stylings): composite editor styling fixes for BS4 (#195) * fix(stylings): composite editor styling fixes for BS4 * refactor: tweak composite editor slider value * refactor(stylings): fix pagination icons alignment with BS4 --- .../common/src/styles/_variables-theme-material.scss | 1 + .../src/styles/_variables-theme-salesforce.scss | 3 +++ packages/common/src/styles/_variables.scss | 11 +++++++---- packages/common/src/styles/slick-component.scss | 6 ++++++ packages/common/src/styles/slick-editors.scss | 10 ++++++++++ 5 files changed, 27 insertions(+), 4 deletions(-) diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 31e2f2c17..3e9636c48 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -138,6 +138,7 @@ $detail-view-icon-expand-color: $primary-color !default; $detail-view-icon-collapse: url('data:image/svg+xml,') !default; $detail-view-icon-expand: url('data:image/svg+xml,') !default; $pagination-icon-color: $primary-color !default; +$pagination-icon-height: $icon-width !default; $pagination-icon-seek-first: url('data:image/svg+xml,') !default; $pagination-icon-seek-end: url('data:image/svg+xml,') !default; $pagination-icon-seek-next: url('data:image/svg+xml,') !default; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index 55de9a484..db67e4a61 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -158,6 +158,7 @@ $date-editor-clear-button-icon-vertical-align: initial !default; $date-editor-clear-button-icon-height: 14px !default; $date-editor-clear-button-icon-width: 14px !default; $editor-focus-box-shadow: 0 0 3px $primary-color !default; +$editor-modal-input-editor-height: 28px !default; $editor-modal-container-radius: var(--lwc-borderRadiusMedium, 0.25rem) !default; $editor-modal-close-btn-outside-color: #ffffff !default; $editor-modal-close-btn-outside-font-size: 36px !default; @@ -165,6 +166,7 @@ $editor-modal-close-btn-outside-right: -7px !default; $editor-modal-close-btn-outside-top: -32px !default; $editor-modal-footer-btn-height: 28px; $editor-modal-header-border-bottom: var(--lwc-borderWidthThick, 2px) solid var(--lwc-colorBorder, rgb(221, 219, 218)) !default; +$editor-modal-slider-editor-value-min-height: calc(#{$editor-modal-input-editor-height - 2px}) !default; $editor-modal-title-font-size: var(--lwc-fontSize7, 1.25rem) !default; $editor-modal-title-font-weight: var(--lwc-fontWeightLight, 300) !default; $editor-modal-title-line-height: var(--lwc-lineHeightHeading, 1.25) !default; @@ -181,6 +183,7 @@ $detail-view-icon-expand-color: $primary-color !default; $detail-view-icon-collapse: url('data:image/svg+xml,') !default; $detail-view-icon-expand: url('data:image/svg+xml,') !default; $pagination-icon-color: $primary-color !default; +$pagination-icon-height: $icon-width !default; $pagination-icon-seek-first: url('data:image/svg+xml,') !default; $pagination-icon-seek-end: url('data:image/svg+xml,') !default; $pagination-icon-seek-next: url('data:image/svg+xml,') !default; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index b56071310..32d04f90d 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -573,6 +573,7 @@ $editor-modal-close-btn-padding: 0px !default; $editor-modal-close-btn-width: 20px !default; $editor-modal-close-btn-right: 10px !default; $editor-modal-close-btn-top: 10px !default; +$editor-modal-close-btn-border-radius: 0 4px 4px 0 !default; $editor-modal-close-btn-outside-color: #dddddd !default; $editor-modal-close-btn-outside-color-hover: darken($editor-modal-close-btn-outside-color, 10%) !default; $editor-modal-close-btn-outside-font-size: 30px !default; @@ -633,6 +634,7 @@ $editor-modal-large-editor-footer-line-height: 12px !default; $editor-modal-large-editor-count-color: $large-editor-count-color !default; $editor-modal-large-editor-count-font-size: 10px !default; $editor-modal-large-editor-count-margin: 0 !default; +$editor-modal-slider-editor-value-min-height: $editor-modal-input-editor-height !default; $editor-modal-title-font-color: #333333 !default; $editor-modal-title-font-size: 20px !default; $editor-modal-title-font-weight: 500 !default; @@ -803,14 +805,15 @@ $pagination-count-margin-left: 2px !default; $pagination-font-size: calc(#{$font-size-base} - 1px) !default; $pagination-icon-color: $primary-color !default; $pagination-icon-font-size: calc(#{$icon-font-size} - 1px) !default; +$pagination-icon-height: initial !default; $pagination-icon-seek-first: "\f100" !default; $pagination-icon-seek-end: "\f101" !default; $pagination-icon-seek-next: "\f105" !default; $pagination-icon-seek-prev: "\f104" !default; -$pagination-icon-seek-first-width: inherit !default; -$pagination-icon-seek-end-width: inherit !default; -$pagination-icon-seek-next-width: inherit !default; -$pagination-icon-seek-prev-width: inherit !default; +$pagination-icon-seek-first-width: initial !default; +$pagination-icon-seek-end-width: initial !default; +$pagination-icon-seek-next-width: initial !default; +$pagination-icon-seek-prev-width: initial !default; $pagination-icon-seek-text-stroke: 0.4px !default; $pagination-button-border: 1px solid #acacac !default; $pagination-border-top: 0 none !default; diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss index 6d57e16c8..0f8761321 100644 --- a/packages/common/src/styles/slick-component.scss +++ b/packages/common/src/styles/slick-component.scss @@ -115,6 +115,8 @@ display: inline-flex; .page-link { + display: flex; + align-items: center; font-size: $pagination-icon-font-size; border: $pagination-button-border; height: $pagination-button-height; @@ -152,6 +154,7 @@ &:before { content: $pagination-icon-seek-first; display: block; + height: $pagination-icon-height; width: $pagination-icon-seek-first-width; } } @@ -159,6 +162,7 @@ &:before { content: $pagination-icon-seek-prev; display: block; + height: $pagination-icon-height; width: $pagination-icon-seek-prev-width; } } @@ -166,6 +170,7 @@ &:before { content: $pagination-icon-seek-next; display: block; + height: $pagination-icon-height; width: $pagination-icon-seek-next-width; } } @@ -173,6 +178,7 @@ &:before { content: $pagination-icon-seek-end; display: block; + height: $pagination-icon-height; width: $pagination-icon-seek-end-width; } } diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss index 8ac892520..a5a83f66e 100644 --- a/packages/common/src/styles/slick-editors.scss +++ b/packages/common/src/styles/slick-editors.scss @@ -396,8 +396,11 @@ .flatpickr.input-group { .input-group-btn { + min-width: 28px; .btn { + margin: 0; height: $editor-modal-input-editor-height; + border-radius: $editor-modal-close-btn-border-radius; } } } @@ -410,6 +413,13 @@ } .slider-value { min-width: 28px; + .input-group-text { + min-height: $editor-modal-slider-editor-value-min-height; + min-width: 28px; + display: flex; + justify-content: center; + align-items: center; + } } &.modified {