Merge pull request #484 from ghiscoding/feat/highlight-filled-filters

feat(styling): increase highlight of filters that are filled w/values
ghiscoding · Sep 14, 2021 · 7f3eb81 · 7f3eb81
2 parents d08e3d5 + 8f93534
commit 7f3eb81
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 0 deletions.
diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -94,6 +94,10 @@ $icon-group-font-weight:                                normal !default;
 $icon-group-height:                                     auto !default;
 $icon-group-vertical-align:                             bottom !default;
 $icon-group-width:                                      15px !default;
+$filled-filter-color:                                   $primary-color-dark !default;
+$filled-filter-border:                                  1px solid #{$primary-color} !default;
+$filled-filter-box-shadow:                              inset 0 0 0 1px #{lighten($primary-color, 30%)} !default;
+$filled-filter-font-weight:                             bold !default;
 $draggable-group-drop-border-top:                       0px !default;
 $draggable-group-drop-width:                            100% !default;
 $draggable-group-drop-radius:                           0px !default;

diff --git a/packages/common/src/styles/slick-filters.scss b/packages/common/src/styles/slick-filters.scss
@@ -0,0 +1,30 @@
+$filled-filter-color:                                 $form-control-focus-border-color !default;
+$filled-filter-border:                                $form-control-border !default;
+$filled-filter-box-shadow:                            $form-control-focus-border-color !default;
+$filled-filter-font-weight:                           400 !default;
+
+.slick-headerrow {
+  input.search-filter.filled,
+    .search-filter.filled input,
+    .search-filter.filled input.flatpickr-input,
+    .search-filter.filled .input-group-addon.slider-value,
+    .search-filter.filled .input-group-addon select {
+      color: var(--filled-filter-color, $filled-filter-color);
+      font-weight: var(--filled-filter-font-weight, $filled-filter-font-weight);
+      border: var(--filled-filter-border, $filled-filter-border);
+      box-shadow: var(--filled-filter-box-shadow, $filled-filter-box-shadow);
+    }
+    .search-filter.filled .input-group-addon select {
+      border-right: 0px;
+    }
+    .search-filter.filled {
+      .ms-choice {
+        box-shadow: var(--filled-filter-box-shadow, $filled-filter-box-shadow);
+        border: var(--filled-filter-border, $filled-filter-border);
+        span {
+          font-weight: var(--filled-filter-font-weight, $filled-filter-font-weight);
+          color: var(--filled-filter-color, $filled-filter-color);
+        }
+      }
+    }
+}
diff --git a/packages/common/src/styles/slick-without-bootstrap-min-styling.scss b/packages/common/src/styles/slick-without-bootstrap-min-styling.scss
@@ -1,5 +1,6 @@
 @import './variables';
 
+$form-control-border: 1px solid #ccc !default;
 $form-control-focus-border-color: lighten($primary-color, 10%) !default;
 $form-control-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3) !default;
 

diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -24,6 +24,7 @@
 @import './slick-component';
 @import './slickgrid-examples';
 @import './slick-bootstrap';
+@import './slick-filters';
 @import './ui-autocomplete';
 @import './material-svg-icons';
 @import './material-svg-utilities';

diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip