Merge branch 'develop' into table-margin

docs/icons.stories.js

@@ -15,6 +15,8 @@ stories.add('icon', () => {
     'icon youtube': 'icon youtube',
     'icon close': 'icon close',
     pokeball: 'pokeball',
+    smartphone: 'smartphone',
+    phone: 'phone',
     'octocat animate': 'octocat animate',
     'icon trophy': 'icon trophy',
     'nes-logo': 'nes-logo',
@@ -24,6 +26,7 @@ stories.add('icon', () => {
   }, 'icon twitter');
   const selectedSize = radios('size', {
     default: '',
+    'is-small': 'is-small',
     'is-medium': 'is-medium',
     'is-large': 'is-large',
   }, '');

index.html

@@ -179,16 +179,19 @@
       <section class="container with-title">
         <h3 class="title">Reaction</h3>
         <div>
+          <i class="icon heart is-small"></i>
           <i class="icon heart"></i>
           <i class="icon heart is-medium"></i>
           <i class="icon heart is-large"></i>
           <i class="icon heart is-empty"></i>
 
+          <i class="icon star is-small"></i>
           <i class="icon star"></i>
           <i class="icon star is-medium"></i>
           <i class="icon star is-large"></i>
           <i class="icon star is-empty"></i>
 
+          <i class="icon like is-small"></i>
           <i class="icon like"></i>
           <i class="icon like is-medium"></i>
           <i class="icon like is-large"></i>
@@ -198,34 +201,42 @@
       <section class="container with-title">
         <h3 class="title">SNS</h3>
         <div>
+            <i class="icon twitter is-small"></i>
           <i class="icon twitter"></i>
           <i class="icon twitter is-medium"></i>
           <i class="icon twitter is-large"></i>
 
+          <i class="icon facebook is-small"></i>
           <i class="icon facebook"></i>
           <i class="icon facebook is-medium"></i>
           <i class="icon facebook is-large"></i>
 
+          <i class="icon github is-small"></i>
           <i class="icon github"></i>
           <i class="icon github is-medium"></i>
           <i class="icon github is-large"></i>
 
+          <i class="icon youtube is-small"></i>
           <i class="icon youtube"></i>
           <i class="icon youtube is-medium"></i>
           <i class="icon youtube is-large"></i>
 
+          <i class="icon google is-small"></i>
           <i class="icon google"></i>
           <i class="icon google is-medium"></i>
           <i class="icon google is-large"></i>
 
+          <i class="icon medium is-small"></i>
           <i class="icon medium"></i>
           <i class="icon medium is-medium"></i>
           <i class="icon medium is-large"></i>
 
+          <i class="icon twitch is-small"></i>
           <i class="icon twitch"></i>
           <i class="icon twitch is-medium"></i>
           <i class="icon twitch is-large"></i>
 
+          <i class="icon reddit is-small"></i>
           <i class="icon reddit"></i>
           <i class="icon reddit is-medium"></i>
           <i class="icon reddit is-large"></i>
@@ -235,17 +246,21 @@
       <section class="container with-title">
         <h3 class="title">Others</h3>
         <div>
+            <i class="icon close is-small"></i>
           <i class="icon close"></i>
           <i class="icon close is-medium"></i>
           <i class="icon close is-large"></i>
 
           <i class="octocat animate"></i>
 
+          <i class="icon trophy is-small"></i>
           <i class="icon trophy"></i>
           <i class="icon trophy is-medium"></i>
           <i class="icon trophy is-large"></i>
 
           <i class="pokeball"></i>
+          <i class="smartphone"></i>
+          <i class="phone"></i>
         </div>
       </section>
 

scss/form/inputs.scss

@@ -9,7 +9,7 @@
       -4px 0 $border;
   }
 
-  max-width: 100%;
+  width: 100%;
   padding: 0.5rem 1rem;
   margin: 4px;
   border: none;

scss/icons/icons.scss

@@ -55,6 +55,9 @@
     &.trophy::before {
       @include pixelize($icon-trophy, $icon-trophy-colors, $px);
     }
+    &.trophy.is-empty::before {
+      @include pixelize($icon-trophy-empty, $icon-trophy-empty-colors, $px);
+    }
 
     &.like::before {
       @include pixelize($icon-like, $icon-like-colors, $px);
@@ -89,12 +92,12 @@
 
     &.medium::before {
       @include pixelize($icon-medium, $icon-medium-colors, $px);
-    }    
+    }
-    
+
     &.twitch::before {
       @include pixelize($icon-twitch, $icon-twitch-colors, $px);
     }
-    
+
     &.reddit::before {
       @include pixelize($icon-reddit, $icon-reddit-colors, $px);
     }
@@ -103,6 +106,10 @@
   // default
   @include setup(2px);
 
+  &.is-small {
+    @include setup(1px);
+  }
+
   &.is-medium {
     @include setup(3px);
   }

scss/icons/trophy.scss

@@ -16,10 +16,26 @@ $icon-trophy: (
   (0,0,0,0,0,0,2,3,2,0,0,0,0,0,0,0),
   (0,0,0,0,0,2,2,3,2,2,0,0,0,0,0,0),
   (0,0,0,0,2,3,3,3,3,4,2,0,0,0,0,0),
-  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0),
+  (0,0,0,0,2,2,2,2,2,2,2,0,0,0,0,0)
 );
 
-// 2 black
+$icon-trophy-empty-colors: (#adafbb);
-// 3 yellow
+// prettier-ignore
-// 1 white
+$icon-trophy-empty: (
-// 4 orange
+  (0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (1,1,1,0,0,0,0,0,0,0,0,0,1,1,1,0),
+  (1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
+  (1,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0),
+  (0,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0),
+  (0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0),
+  (0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0),
+  (0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0),
+  (0,0,0,0,1,1,1,1,1,1,1,0,0,0,0,0)
+);

scss/pixel-arts/_index.scss

@@ -7,3 +7,5 @@
 @import "bcrikko.scss";
 @import "octocat.scss";
 @import "pokeball.scss";
+@import "phone.scss";
+@import "smartphone.scss";

scss/pixel-arts/phone.scss

@@ -0,0 +1,43 @@
+.phone {
+  $px: 6px;
+  $phone-colors: (#596985, #3c4665, #000);
+  // prettier-ignore
+  $phone: (
+    (0,0,3,3,3,3,3,3),
+    (0,3,3,2,2,2,1,3),
+    (3,3,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,3,3,3,3,3),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,0,0,0,0),
+    (3,2,2,3,3,3,3,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,2,2,2,2,2,1,3),
+    (3,3,2,2,2,2,1,3),
+    (0,3,3,2,2,2,1,3),
+    (0,0,3,3,3,3,3,3)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 8;
+  height: $px * 21;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($phone, $phone-colors, $px);
+  }
+}

scss/pixel-arts/smartphone.scss

@@ -0,0 +1,49 @@
+.smartphone {
+  $px: 6px;
+  $smartphone-colors: (#fff, #060606);
+  // prettier-ignore
+  $smartphone: (
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2),
+    (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
+    (2,1,1,1,2,2,2,2,2,2,2,1,1,1,2),
+    (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,2,2,2,2,2,2,2,2,2,2,2,1,2),
+    (2,1,1,1,1,1,1,1,1,1,1,1,1,1,2),
+    (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
+    (2,1,1,1,1,1,1,2,2,1,1,1,1,1,2),
+    (2,2,1,1,1,1,1,1,1,1,1,1,1,2,2),
+    (0,2,2,2,2,2,2,2,2,2,2,2,2,2)
+  );
+
+  position: relative;
+  display: inline-block;
+  width: $px * 16;
+  height: $px * 27;
+
+  &::before {
+    position: absolute;
+    top: $px * -1;
+    left: $px * -1;
+    content: "";
+    background: transparent;
+
+    @include pixelize($smartphone, $smartphone-colors, $px);
+  }
+}