From 9c93e7a093dce6fa060f07aff5bcc3a4cb945018 Mon Sep 17 00:00:00 2001 From: Ghislain B Date: Fri, 2 Dec 2022 23:33:46 -0500 Subject: [PATCH] chore(styling): improve Slider editor/filter css styling (#832) --- packages/common/src/styles/_variables-theme-material.scss | 1 + .../common/src/styles/_variables-theme-salesforce.scss | 2 +- packages/common/src/styles/_variables.scss | 8 +++++--- packages/common/src/styles/slick-plugins.scss | 4 ++-- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 1b1270e10..8556f879d 100644 --- a/packages/common/src/styles/_variables-theme-material.scss +++ b/packages/common/src/styles/_variables-theme-material.scss @@ -110,6 +110,7 @@ $slick-autocomplete-loading-icon-margin: 2px 0 0 -26px !defau $slick-autocomplete-loading-icon-line-height: 0px !default; $slick-autocomplete-loading-icon-vertical-align: sub !default; $slick-compound-filter-operator-select-border: 1px solid #{lighten($slick-primary-color, 10%)} !default; +$slick-compound-filter-text-color: darken($slick-primary-color, 20%) !default; $slick-multiselect-icon-arrow-font-size: 16px !default; $slick-multiselect-icon-color: $slick-primary-color !default; $slick-multiselect-icon-font-size: 10px !default; diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss index e9d695779..c89774a0a 100644 --- a/packages/common/src/styles/_variables-theme-salesforce.scss +++ b/packages/common/src/styles/_variables-theme-salesforce.scss @@ -175,7 +175,7 @@ $slick-editor-modal-title-font-weight: var(--lwc-fontWeig $slick-editor-modal-title-line-height: var(--lwc-lineHeightHeading, 1.25) !default; $slick-editor-modal-title-text-align: center !default; $slick-large-editor-button-border-radius: 3px !default; -$slick-slider-filter-thumb-color: #6cb6ff !default; +$slick-slider-filter-thumb-active-bg-color: lighten($slick-primary-color, 57%) !default; $slick-slider-filter-runnable-track-bgcolor: #ECEBEA !default; $slick-row-selected-color: #ECEBEA !default; $slick-row-highlight-background-color: lighten($slick-highlight-color, 50%) !default; diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss index c7ec6134f..d5cf101c3 100644 --- a/packages/common/src/styles/_variables.scss +++ b/packages/common/src/styles/_variables.scss @@ -689,12 +689,14 @@ $slick-slider-filter-focus-box-shadow: $slick-input-focus-b $slick-slider-filter-height: $slick-header-input-height !default; $slick-slider-filter-thumb-border-radius: 50% !default; $slick-slider-filter-thumb-cursor: grab !default; -$slick-slider-filter-thumb-color: rgb(201, 219, 203) !default; -$slick-slider-filter-thumb-active-bg-color: #fff !default; +$slick-slider-filter-thumb-border: 2px solid rgba($slick-primary-color, .68) !default; +$slick-slider-filter-thumb-color: lighten($slick-primary-color, 75%) !default; // #c9dbcb +$slick-slider-filter-thumb-active-color: rgba($slick-primary-color, .88) !default; // #c9dbcb +$slick-slider-filter-thumb-active-bg-color: lighten($slick-primary-color, 68%) !default; +$slick-slider-filter-thumb-active-border: 2px solid #{$slick-slider-filter-thumb-active-color} !default; // #c9dbcb $slick-slider-filter-thumb-size: 14px !default; $slick-slider-filter-thumb-height: calc(#{$slick-slider-filter-thumb-size} - 4px) !default; $slick-slider-filter-thumb-width: $slick-slider-filter-thumb-height !default; -$slick-slider-filter-thumb-border: 2px solid darken($slick-slider-filter-thumb-color, 15%) !default; $slick-slider-filter-number-padding: 4px 8px !default; $slick-slider-filter-number-font-size: calc(#{$slick-font-size-base-value} - 1px) !default; diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss index 22797a764..2726197ab 100644 --- a/packages/common/src/styles/slick-plugins.scss +++ b/packages/common/src/styles/slick-plugins.scss @@ -1111,11 +1111,11 @@ input.flatpickr.form-control { } &:active::-webkit-slider-thumb { background-color: var(--slick-slider-filter-thumb-active-bg-color, $slick-slider-filter-thumb-active-bg-color); - border: 2px solid var(--slick-slider-filter-thumb-color, $slick-slider-filter-thumb-color); + border: var(--slick-slider-filter-thumb-active-border, $slick-slider-filter-thumb-active-border); } &:active::-moz-range-thumb { background-color: var(--slick-slider-filter-thumb-active-bg-color, $slick-slider-filter-thumb-active-bg-color); - border: 2px solid var(--slick-slider-filter-thumb-color, $slick-slider-filter-thumb-color); + border: var(--slick-slider-filter-thumb-active-border, $slick-slider-filter-thumb-active-border); } } }