chore(styling): improve Slider editor/filter css styling (#832)

ghiscoding · Dec 3, 2022 · 9c93e7a · 9c93e7a
1 parent c083111
commit 9c93e7a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
     }
   }
 }