Merge pull request #96 from evexoio/add-google-icon-clean

feat: added google icon

docs/icons.stories.js

@@ -11,6 +11,7 @@ stories.add('icon', () => {
     'icon twitter': 'icon twitter',
     'icon facebook': 'icon facebook',
     'icon github': 'icon github',
+    'icon google': 'icon google',
     'icon youtube': 'icon youtube',
     'icon close': 'icon close',
     'octocat animate': 'octocat animate',

index.html

@@ -132,11 +132,12 @@
       </div>
     </section>
 
-    <section class="container with-title" style="display:flex;">
+    <section class="container with-title">
       <h2 class="title">Table</h2>
-      <table class="table is-bordered is-centered" style="margin:15px 15px 5px 0">
+      <table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
         <thead>
           <tr>
+            <th>Table</th>
             <th>Table.is-bordered</th>
             <th>Table.is-centered</th>
           </tr>
@@ -145,17 +146,11 @@
           <tr>
             <td>Thou hast had a good morning</td>
             <td>Thou hast had a good afternoon</td>
+            <td>Thou hast had a good night</td>
           </tr>
-        </tbody>
-      </table>
-      <table class="table is-dark is-bordered" style="margin:15px 15px 5px 0">
-        <thead>
-          <tr>
-            <th>Table.is-dark.is-bordered</th>
-          </tr>
-        </thead>
-        <tbody>
           <tr>
+            <td>Thou hast had a good morning</td>
+            <td>Thou hast had a good afternoon</td>
             <td>Thou hast had a good night</td>
           </tr>
         </tbody>
@@ -201,6 +196,10 @@
           <i class="icon youtube"></i>
           <i class="icon youtube is-medium"></i>
           <i class="icon youtube is-large"></i>
+
+          <i class="icon google"></i>
+          <i class="icon google is-medium"></i>
+          <i class="icon google is-large"></i>
         </div>
       </section>
 

scss/elements/buttons.scss

@@ -153,7 +153,12 @@
     }
     @each $type in $types {
       &.is-#{nth($type, 1)} {
-        @include btn-extra-pixelize-style(nth($type, 2), nth($type, 3), nth($type, 4), nth($type, 5));
+        @include btn-extra-pixelize-style(
+          nth($type, 2),
+          nth($type, 3),
+          nth($type, 4),
+          nth($type, 5)
+        );
       }
     }
   }

scss/icons/google.scss

@@ -0,0 +1,20 @@
+$icon-google-colors: (#4285f4, #fff, #db4437, #f4b400, #0f9d58);
+// prettier-ignore
+$icon-google: (
+  ( 0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0 ),
+  ( 2,2,2,2,2,3,3,3,3,3,3,2,2,2,2,2 ),
+  ( 2,2,2,3,3,3,3,3,3,3,3,3,3,2,2,2 ),
+  ( 2,2,3,3,3,3,3,3,3,3,3,3,2,2,2,2 ),
+  ( 2,3,3,3,3,2,2,2,2,2,3,2,2,2,2,2 ),
+  ( 4,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 4,4,3,2,2,2,2,2,2,2,2,2,2,2,2,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,4,2,2,2,2,2,1,1,1,1,1,1,1,2 ),
+  ( 4,4,5,2,2,2,2,2,2,2,2,2,1,1,1,2 ),
+  ( 4,5,5,5,2,2,2,2,2,2,2,1,1,1,1,2 ),
+  ( 2,5,5,5,5,2,2,2,2,2,5,1,1,1,2,2 ),
+  ( 2,2,5,5,5,5,5,5,5,5,5,5,1,1,2,2 ),
+  ( 2,2,2,5,5,5,5,5,5,5,5,5,5,2,2,2 ),
+  ( 0,2,2,2,2,5,5,5,5,5,5,2,2,2,2,0 )
+);

scss/icons/icons.scss

@@ -8,6 +8,7 @@
 @import "facebook.scss";
 @import "github.scss";
 @import "youtube.scss";
+@import "google.scss";
 
 // others
 @import "close.scss";
@@ -78,6 +79,10 @@
     &.youtube::before {
       @include pixelize($icon-youtube, $icon-youtube-colors, $px);
     }
+
+    &.google::before {
+      @include pixelize($icon-google, $icon-google-colors, $px);
+    }
   }
 
   // default