fix(styling): properly align flexbox ms-select icon+text vertically (#…

…1397) * fix(styling): properly align flexbox ms-select icon+text vertically * chore: change material ms-select font size & improve alignment - also fix ms-select color that were showing as blue instead of the expected green theme color
ghiscoding · Feb 16, 2024 · e744d02 · e744d02
1 parent a30d590
commit e744d02
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -190,8 +190,8 @@ export default class Example07 {
           enableRenderHtml: true,
           collection: [
             { value: '', label: '' },
-            { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check mdi-v-align-middle"></i> ` },
-            { value: false, label: 'False', labelPrefix: `<i class="mdi mdi-close mdi-v-align-middle"></i> ` }
+            { value: true, label: 'True', labelSuffix: `<i class="mdi mdi-check mdi-v-align-middle mdi-16px"></i> ` },
+            { value: false, label: 'False', labelSuffix: `<i class="mdi mdi-close mdi-v-align-middle mdi-16px"></i> ` }
           ],
           model: Filters.singleSelect
         },
@@ -205,8 +205,8 @@ export default class Example07 {
           enableRenderHtml: true,
           collectionAsync: new Promise<any>(resolve => setTimeout(() => {
             resolve([
-              { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check mdi-v-align-middle"></i> ` },
-              { value: false, label: 'False', labelPrefix: `<i class="mdi mdi-close mdi-v-align-middle"></i> ` }
+              { value: true, label: 'True', labelSuffix: `<i class="mdi mdi-check mdi-v-align-middle mdi-16px"></i> ` },
+              { value: false, label: 'False', labelSuffix: `<i class="mdi mdi-close mdi-v-align-middle mdi-16px"></i> ` }
             ]);
           }, 250)),
         },

diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -66,6 +66,8 @@
     --slick-header-resizable-hover-border-right: 2px solid #83d9a0;
     --slick-slider-filter-filled-track-color: #9ac49c;
 
+    --ms-ok-button-text-color: #009530;
+    --ms-select-all-text-color: #007c28;
     --slick-multiselect-icon-border: none;
     --slick-multiselect-icon-radio-border: none;
     --slick-multiselect-ok-button-text-color: #009530;
@@ -109,4 +111,3 @@
     }
   }
 }
-
diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -114,7 +114,7 @@ $slick-compound-filter-operator-select-border:              1px solid #{lighten(
 $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;
+$slick-multiselect-icon-font-size:                          14px !default;
 $slick-multiselect-icon-height:                             15px !default;
 $slick-multiselect-icon-width:                              15px !default;
 $slick-multiselect-icon-margin:                             0px 4px 0 0 !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -782,7 +782,7 @@ $slick-multiselect-select-all-padding:                      4px 6px !default;
 $slick-multiselect-select-all-text-color:                   darken($slick-primary-color, 5%) !default;
 $slick-multiselect-select-all-text-hover-color:             transparent !default;
 
-// override some multiple-select SASS variables
+// override some multiple-select SASS variables with our variables
 $ms-choice-border:                                          $slick-multiselect-input-filter-border;
 $ms-drop-list-padding:                                      $slick-multiselect-dropdown-list-padding;
 $ms-drop-list-item-align-items:                             center;
@@ -797,6 +797,7 @@ $ms-ok-button-text-hover-color:                             $slick-multiselect-o
 $ms-select-all-label-hover-border:                          $slick-multiselect-select-all-label-hover-border;
 $ms-select-all-label-padding:                               $slick-multiselect-select-all-padding;
 $ms-select-all-label-span-padding:                          $slick-multiselect-select-all-label-padding;
+$ms-select-all-line-height:                                 $slick-multiselect-select-all-line-height;
 $ms-select-all-text-color:                                  $slick-multiselect-select-all-text-color;
 
 /* pagination variables */

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -713,12 +713,15 @@ li.hidden {
   label {
     span {
       cursor: pointer;
+      display: inline-flex;
       margin-left: var(--slick-multiselect-checkbox-margin-left, $slick-multiselect-checkbox-margin-left);
       position: relative;
       top: 1px;
     }
   }
   .ms-select-all {
+    display: flex;
+    align-items: center;
     border-bottom: var(--slick-multiselect-select-all-border-bottom, $slick-multiselect-select-all-border-bottom);
     padding: var(--slick-multiselect-select-all-padding, $slick-multiselect-select-all-padding);
     line-height: var(--slick-multiselect-select-all-line-height, $slick-multiselect-select-all-line-height);
@@ -727,7 +730,7 @@ li.hidden {
     }
 
     label {
-      display: inline-block;
+      display: inline-flex;
       font-weight: normal;
       padding: var(--slick-multiselect-select-all-label-padding, $slick-multiselect-select-all-label-padding);
       border: var(--slick-multiselect-select-all-label-border, $slick-multiselect-select-all-label-border);