feat(styling): add extra material icons & new color

ghiscoding · Jun 15, 2021 · 4205b66 · 4205b66
1 parent d2e5685
commit 4205b66
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 3 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/app.html b/examples/webpack-demo-vanilla-bundle/src/app.html
@@ -2,7 +2,7 @@
   <div class="navbar-brand">
     <a class="navbar-item" href="//github.com/ghiscoding/slickgrid-universal">
       <span class="icon is-medium">
-        <i class="mdi mdi-github mdi-24px"></i>
+        <i class="mdi mdi-github mdi-24px color-white"></i>
       </span>
       <span>
         <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/icons.html b/examples/webpack-demo-vanilla-bundle/src/examples/icons.html
@@ -279,15 +279,19 @@ <h4 class="title is-4 section-title">
   </div>
   <div class="slick-col-medium-2">
     <span class="mdi mdi-help-circle mdi-22px color-se-link-dark"></span>
-    <span class="color-se">color-se-link-dark</span>
+    <span class="color-se-link-dark">color-se-link-dark</span>
   </div>
   <div class="slick-col-medium-2">
     <span class="mdi mdi-help-circle mdi-22px color-se-danger"></span>
     <span class="color-se-danger">color-se-danger</span>
   </div>
+  <div class="slick-col-medium-2">
+    <span class="mdi mdi-help-circle mdi-22px color-se-secondary-light"></span>
+    <span class="color-se-secondary-light">color-se-secondary-light</span>
+  </div>
   <div class="slick-col-medium-2">
     <span class="mdi mdi-help-circle mdi-22px color-se-secondary"></span>
-    <span class="color-se">color-se-secondary </span>
+    <span class="color-se-secondary">color-se-secondary</span>
   </div>
   <div class="slick-col-medium-2">
     <span class="mdi mdi-help-circle mdi-22px color-se-warning"></span>

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/icons.ts b/examples/webpack-demo-vanilla-bundle/src/examples/icons.ts
@@ -141,6 +141,7 @@ export class Icons {
       '.mdi.mdi-folder-open',
       '.mdi.mdi-forum',
       '.mdi.mdi-forum-outline',
+      '.mdi.mdi-github',
       '.mdi.mdi-help',
       '.mdi.mdi-help-circle',
       '.mdi.mdi-help-circle-outline',

diff --git a/packages/common/src/styles/colors-from-filters.scss b/packages/common/src/styles/colors-from-filters.scss
@@ -84,3 +84,4 @@ $color-sf-primary-dark: #004487 !default;
 .color-alt-danger-dark { filter: brightness(0) saturate(100%) invert(32%) sepia(51%) saturate(3649%) hue-rotate(329deg) brightness(94%) contrast(97%); }
 .color-alt-success-light { filter: brightness(0) saturate(100%) invert(77%) sepia(87%) saturate(336%) hue-rotate(90deg) brightness(90%) contrast(87%); }
 .color-alt-success-dark { filter: brightness(0) saturate(100%) invert(53%) sepia(76%) saturate(371%) hue-rotate(106deg) brightness(97%) contrast(99%); }
+.color-se-secondary-light { filter: brightness(0) saturate(100%) invert(77%) sepia(9%) saturate(72%) hue-rotate(187deg) brightness(94%) contrast(87%); }
diff --git a/packages/common/src/styles/colors.scss b/packages/common/src/styles/colors.scss
@@ -89,3 +89,4 @@ $color-sf-primary-dark: #004487 !default;
 .color-alt-danger-dark { @include recolor(darken($color-alt-danger, $color-darken-percentage), 1); }
 .color-alt-success-light { @include recolor(lighten($color-alt-success, $color-lighten-percentage), 1); }
 .color-alt-success-dark { @include recolor(darken($color-alt-success, $color-darken-percentage), 1); }
+.color-se-secondary-light { @include recolor(lighten($color-se-secondary, $color-lighten-percentage), 1); }
diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss
@@ -581,6 +581,11 @@ $icon-height: $icon-width;
   "M15,4V11H5.17L4,12.17V4H15M16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12V3A1,1 0 0,0 16,2M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z",
   encodecolor($icon-color), $icon-height, $icon-width, inline-block);
 
+@include loadsvg(
+  ".mdi.mdi-github",
+  "M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z",
+  encodecolor($icon-color), $icon-height, $icon-width, inline-block);
+
 @include loadsvg(
   ".mdi.mdi-help",
   "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z",