chore: improve some more Slider styling to use primary color (#835)

ghiscoding · Dec 6, 2022 · 76e9719 · 76e9719
1 parent 0db8b7e
commit 76e9719
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -175,7 +175,6 @@ $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-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
@@ -692,8 +692,9 @@ $slick-slider-filter-thumb-cursor:                          grab !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-bg-color:                 #fff !default;
 $slick-slider-filter-thumb-active-border:                   2px solid #{$slick-slider-filter-thumb-active-color} !default; // #c9dbcb
+$slick-slider-filter-thumb-active-box-shadow:               0 0 0 2px rgba(lighten($slick-primary-color, 3%), .15) !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;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -1112,10 +1112,12 @@ 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: var(--slick-slider-filter-thumb-active-border, $slick-slider-filter-thumb-active-border);
+      box-shadow: var(--slick-slider-filter-thumb-active-box-shadow, $slick-slider-filter-thumb-active-box-shadow);
     }
     &:active::-moz-range-thumb {
       background-color: var(--slick-slider-filter-thumb-active-bg-color, $slick-slider-filter-thumb-active-bg-color);
       border: var(--slick-slider-filter-thumb-active-border, $slick-slider-filter-thumb-active-border);
+      box-shadow: var(--slick-slider-filter-thumb-active-box-shadow, $slick-slider-filter-thumb-active-box-shadow);
     }
   }
 }