fix(stylings): re-align the svg icons & single/multiple-select icon+t…

…ext (#194) - add sass utilities for material icon vertical alignment
ghiscoding · Dec 11, 2020 · b730be7 · b730be7
1 parent 0e4d30c
commit b730be7
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 5 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/icons.html b/examples/webpack-demo-vanilla-bundle/src/examples/icons.html
@@ -31,7 +31,7 @@ <h4 class="title is-4 section-title">
   <div class="slick-col-medium-2"><span class="icon mdi mdi-coffee mdi-22px mdi-rotate-180"></span> mdi-rotate-180</div>
   <div class="slick-col-medium-2"><span class="icon mdi mdi-coffee mdi-22px mdi-rotate-220"></span> mdi-rotate-220</div>
   <div class="slick-col-medium-2"><span class="icon mdi mdi-coffee mdi-22px mdi-flip-h"></span> mdi-flip-h</div>
-  <div class="slick-col-medium-2"><span class="icon mdi mdi-coffee mdi-22px mdi-flip-v"></span> mdi-flip-v</div>
+  <div class="slick-col-medium-2"><span class="icon mdi mdi-coffee mdi-22px mdi-flip-h"></span> mdi-flip-h</div>
 </div>
 
 <h4 class="title is-4 section-title">
@@ -99,6 +99,38 @@ <h5 class="title is-5 section-title">
   </div>
 </div>
 
+<h5 class="title is-5 section-title">
+  Icons Alignments
+  <span class=" subtitle has-text-grey-dark">(padding from 0px up to 30px)</span>
+</h5>
+<div class="icons-alignments section-container">
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-bottom"></span>
+    mdi-v-align-bottom
+  </div>
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-middle"></span>
+    mdi-v-align-middle
+  </div>
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-sub"></span> mdi-v-align-sub
+  </div>
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-super"></span> mdi-v-align-super
+  </div>
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-text-bottom"></span>
+    mdi-v-align-text-bottom
+  </div>
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-text-top"></span>
+    mdi-v-align-text-top
+  </div>
+  <div class="slick-col-medium-2">
+    <span class="button-style mdi mdi-alert-outline margin-auto padding-2px mdi-v-align-top"></span> mdi-v-align-top
+  </div>
+</div>
+
 <hr>
 
 <h4 class="title is-4 section-title">

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -130,7 +130,7 @@ $multiselect-icon-checked-color:                $highlight-color !default;
 $multiselect-icon-border:                       1px solid #d6d4d4 !default;
 $multiselect-icon-height:                       15px !default;
 $multiselect-icon-width:                        15px !default;
-$multiselect-icon-margin:                       0px 4px 2px 0 !default;
+$multiselect-icon-margin:                       0px 4px 0 0 !default;
 $multiselect-icon-border-radius:                0.125rem !default;
 $multiselect-icon-unchecked-color:              $bare-color !default;
 $multiselect-icon-radio-color:                  $highlight-color !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -762,6 +762,7 @@ $multiselect-icon-border:                             none !default;
 $multiselect-icon-border-radius:                      none !default;
 $multiselect-icon-height:                             $icon-font-size !default;
 $multiselect-icon-margin:                             0 !default;
+$multiselect-icon-vertical-align:                     middle !default;
 $multiselect-icon-width:                              20px !default;
 $multiselect-icon-unchecked:                          "\f096" !default;
 $multiselect-icon-unchecked-color:                    $multiselect-icon-color !default;

diff --git a/packages/common/src/styles/material-svg-utilities.scss b/packages/common/src/styles/material-svg-utilities.scss
@@ -14,6 +14,28 @@ $icon-width-max-size: 50;
 }
 
 .mdi {
+  &.mdi-v-align-bottom:before {
+    vertical-align: bottom;
+  }
+  &.mdi-v-align-middle:before {
+    vertical-align: middle;
+  }
+  &.mdi-v-align-sub:before {
+    vertical-align: sub;
+  }
+  &.mdi-v-align-super:before {
+    vertical-align: super;
+  }
+  &.mdi-v-align-text-bottom:before {
+    vertical-align: text-bottom;
+  }
+  &.mdi-v-align-text-top:before {
+    vertical-align: text-top;
+  }
+  &.mdi-v-align-top:before {
+    vertical-align: top;
+  }
+
   &.mdi-flip-h {
     transform: scaleX(-1);
   }

diff --git a/packages/common/src/styles/sass-utilities.scss b/packages/common/src/styles/sass-utilities.scss
@@ -1,4 +1,4 @@
-$svg-icon-vertical-align: text-top !default;
+$svg-icon-vertical-align: bottom !default;
 
 @function encodecolor($string) {
 	@if type-of($string) == 'color' {

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -60,7 +60,8 @@
 
   .slick-cell-menu-item {
     cursor: pointer;
-    display: block;
+    display: flex;
+    align-items: center;
     border: $cell-menu-item-border;
     border-radius: $cell-menu-item-border-radius;
     font-size: $cell-menu-item-font-size;
@@ -69,7 +70,6 @@
     margin: 0;
     width: $cell-menu-item-width;
     height: $cell-menu-item-height;
-    vertical-align: middle;
 
     &:hover {
       border: $cell-menu-item-hover-border;
@@ -607,6 +607,7 @@
       border-radius: $multiselect-icon-border-radius;
       margin: $multiselect-icon-margin;
       opacity: $multiselect-unchecked-opacity;
+      vertical-align: $multiselect-icon-vertical-align;
     }
 
     &:checked + span:before {

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