feat: added google icon

nostalgic-css · Dec 7, 2018 · 25ed2a4 · 25ed2a4
1 parent e028a0d
commit 25ed2a4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -132,11 +132,12 @@ <h2 class="title">Balloons</h2>
       </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 @@ <h2 class="title">Table</h2>
           <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 @@ <h3 class="title">SNS</h3>
           <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>
 

diff --git a/scss/elements/buttons.scss b/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)
+        );
       }
     }
   }

diff --git a/scss/icons/google.scss b/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 )
+);
diff --git a/scss/icons/icons.scss b/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