fix(styling): add ms-select placeholder bg-color to fix Bootstrap 5

- Bootstrap 5 seems to add a grey background-color that is unwanted, we can fix this by adding our own bg-color
ghiscoding · Sep 6, 2021 · 5d6454e · 5d6454e
1 parent 57e42e5
commit 5d6454e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -809,6 +809,8 @@ $multiselect-ok-button-font-weight:                   600 !default;
 $multiselect-label-margin-bottom:                     6px !default;
 $multiselect-label-line-height:                       18px !default;
 $multiselect-unchecked-opacity:                       0.6 !default;
+$multiselect-placeholder-bg-color:                    transparent !default;
+$multiselect-placeholder-color:                       #707070 !default;
 $multiselect-placeholder-font-family:                 $filter-placeholder-font-family !default;
 $multiselect-ok-button-bg-color:                      #fff !default;
 $multiselect-ok-button-bg-hover-color:                darken($row-mouse-hover-color, 3%) !default;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -572,9 +572,10 @@
     font-family: var(--slick-multiselect-input-filter-font-family, $multiselect-input-filter-font-family);
   }
   .placeholder {
+    background-color: var(--slick-multiselect-placeholder-bg-color, $multiselect-placeholder-bg-color);
+    color: var(--slick-multiselect-placeholder-color, $multiselect-placeholder-color) !important;
     font-family: var(--slick-multiselect-placeholder-font-family, $multiselect-placeholder-font-family);
     font-size: var(--slick-header-font-size, $header-font-size);
-    color: var(--slick-editor-placeholder-color, $editor-placeholder-color) !important;
   }
 }
 .ms-filter.search-filter {