Merge branch 'develop' into table-margin

docs/icons.stories.js

@@ -13,6 +13,7 @@ stories.add('icon', () => {
     'icon github': 'icon github',
     'icon google': 'icon google',
     'icon youtube': 'icon youtube',
+    'icon whatsapp': 'icon whatsapp',
     'icon close': 'icon close',
     pokeball: 'pokeball',
     smartphone: 'smartphone',

index.html

@@ -240,6 +240,10 @@
           <i class="icon reddit"></i>
           <i class="icon reddit is-medium"></i>
           <i class="icon reddit is-large"></i>
+
+          <i class="icon whatsapp"></i>
+          <i class="icon whatsapp is-medium"></i>
+          <i class="icon whatsapp is-large"></i>
         </div>
       </section>
 

scss/base/variables.scss

@@ -7,3 +7,33 @@ $background-color: $color-white;
 
 $cursor-url: url(../assets/cursor.png);
 $cursor-click-url: url(../assets/cursor-click.png);
+
+$default-colors: (
+  normal: $background-color,
+  hover: #e7e7e7,
+  shadow: #adafbc
+);
+$disabled-colors: (
+  normal: #d3d3d3,
+  shadow: #adafbc
+);
+$primary-colors: (
+  normal: #209cee,
+  hover: #108de0,
+  shadow: #006bb3
+);
+$success-colors: (
+  normal: #92cc41,
+  hover: #76c442,
+  shadow: #4aa52e
+);
+$warning-colors: (
+  normal: #f7d51d,
+  hover: #f2c409,
+  shadow: #e59400
+);
+$error-colors: (
+  normal: #e76e55,
+  hover: #ce372b,
+  shadow: #8c2022
+);

scss/elements/balloons.scss

@@ -49,7 +49,7 @@
     &::after {
       bottom: -18px;
       width: 18px;
-      height: 3px;
+      height: 4px;
       margin-right: 8px;
       background-color: $background-color;
       // prettier-ignore
@@ -82,7 +82,7 @@
     &::after {
       bottom: -18px;
       width: 18px;
-      height: 3px;
+      height: 4px;
       margin-left: 8px;
       background-color: $background-color;
       // prettier-ignore

scss/elements/buttons.scss

@@ -23,54 +23,54 @@
     background-color: $hover-background;
     outline: 0;
     // prettier-ignore
-    box-shadow: 
+    box-shadow:
       0 -4px $hover-background,
       inset 0 -2px $shadow,
-      0 -8px #212529,
+      0 -8px $base-color,
       4px 0 $shadow,
-      4px -4px #212529, 
+      4px -4px $base-color,
-      8px 0 #212529, 
+      8px 0 $base-color,
-      0 4px $shadow, 
+      0 4px $shadow,
-      4px 4px #212529, 
+      4px 4px $base-color,
-      0 8px #212529,
+      0 8px $base-color,
-      -4px 0 $hover-background, 
+      -4px 0 $hover-background,
-      inset -2px 0 $shadow, 
+      inset -2px 0 $shadow,
-      -4px -4px #212529, 
+      -4px -4px $base-color,
-      -8px 0 #212529,
+      -8px 0 $base-color,
-      -4px 4px #212529;
+      -4px 4px $base-color;
   }
 
   &:active {
     // prettier-ignore
-    box-shadow: 
+    box-shadow:
-      0 -4px $shadow, 
+      0 -4px $shadow,
-      0 -8px #212529, 
+      0 -8px $base-color,
-      4px 0 $hover-background, 
+      4px 0 $hover-background,
-      4px -4px #212529,
+      4px -4px $base-color,
-      8px 0 #212529, 
+      8px 0 $base-color,
-      0 4px $hover-background, 
+      0 4px $hover-background,
-      4px 4px #212529, 
+      4px 4px $base-color,
-      0 8px #212529, 
+      0 8px $base-color,
       -4px 0 $shadow,
-      -4px -4px #212529, 
+      -4px -4px $base-color,
-      -8px 0 #212529, 
+      -8px 0 $base-color,
-      -4px 4px #212529;
+      -4px 4px $base-color;
   }
 
   // prettier-ignore
-  box-shadow: 
+  box-shadow:
-    0 -4px $background, 
+    0 -4px $background,
-    0 -8px #212529, 
+    0 -8px $base-color,
-    4px 0 $shadow, 
+    4px 0 $shadow,
-    4px -4px #212529, 
+    4px -4px $base-color,
-    8px 0 #212529,
+    8px 0 $base-color,
-    0 4px $shadow, 
+    0 4px $shadow,
-    4px 4px #212529, 
+    4px 4px $base-color,
-    0 8px #212529, 
+    0 8px $base-color,
-    -4px 0 $background, 
+    -4px 0 $background,
-    -4px -4px #212529,
+    -4px -4px $base-color,
-    -8px 0 #212529, 
+    -8px 0 $base-color,
-    -4px 4px #212529;
+    -4px 4px $base-color;
 }
 
 // Default style
@@ -85,8 +85,14 @@
   vertical-align: middle;
   cursor: $cursor-click-url, pointer;
   user-select: none;
+  border: none;
 
-  @include btn-style($base-color, #fff, #e7e7e7, #adafbc);
+  @include btn-style(
+    $base-color,
+    map-get($default-colors, "normal"),
+    map-get($default-colors, "hover"),
+    map-get($default-colors, "shadow")
+  );
 
   &::before,
   &::after {
@@ -123,18 +129,18 @@
   &.is-disabled:focus {
     color: $base-color;
     cursor: not-allowed;
-    background-color: #d3d3d3;
+    background-color: map-get($disabled-colors, "normal");
-    box-shadow: inset -4px -4px #adafbc;
+    box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
     opacity: 0.6;
   }
 
   // Other styles
   // prettier-ignore
   $types:
-    "primary" #fff #209cee #108de0 #006bb3,
+    "primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
-    "success" #fff #92cc41 #76c442 #4aa52e,
+    "success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
-    "warning" $base-color #f7d51d #f2c409 #e59400,
+    "warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
-    "error" #fff #e76e55 #ce372b #8c2022;
+    "error" $background-color map-get($error-colors, "normal") map-get($error-colors, "hover") map-get($error-colors, "shadow");
 
   @each $type in $types {
     &.is-#{nth($type, 1)} {
@@ -145,7 +151,12 @@
   &.is-rounded {
     box-sizing: content-box;
     padding: 6px 8px;
-    @include btn-extra-pixelize-style($base-color, #fff, #e7e7e7, #adafbc);
+    @include btn-extra-pixelize-style(
+      $base-color,
+      map-get($default-colors, "normal"),
+      map-get($default-colors, "hover"),
+      map-get($default-colors, "shadow")
+    );
 
     &::before,
     &::after {

scss/elements/checkboxes.scss

@@ -45,7 +45,7 @@
     (2,0,0,1,0,0,0,2,0,0),
     (2,2,2,2,2,2,2,2,0,0)
   );
-  $colors: ($base-color, #adafbb);
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   margin-left: 28px;
   -webkit-appearance: none;

scss/elements/containers.scss

@@ -117,7 +117,7 @@
     }
 
     &::after {
-      border-color: #fff;
+      border-color: $background-color;
     }
 
     &.with-title {

scss/elements/radios.scss

@@ -19,7 +19,7 @@
     (2,2,2,2,0,0),
     (2,2,0,0,0,0),
   );
-  $colors: ($base-color, #adafbc);
+  $colors: ($base-color, map-get($default-colors, "shadow"));
 
   margin-right: 20px;
   -webkit-appearance: none;

scss/form/inputs.scss

@@ -14,16 +14,16 @@
   margin: 4px;
   border: none;
 
-  @include border-style($base-color, #e7e7e7);
+  @include border-style($base-color, map-get($default-colors, "hover"));
 
   &.is-success {
-    @include border-style(#92cc41, #76c442);
+    @include border-style(map-get($success-colors, "normal"), map-get($success-colors, "hover"));
   }
   &.is-warning {
-    @include border-style(#f7d51d, #f2c409);
+    @include border-style(map-get($warning-colors, "normal"), map-get($warning-colors, "hover"));
   }
   &.is-error {
-    @include border-style(#e76e55, #ce372b);
+    @include border-style(map-get($error-colors, "normal"), map-get($error-colors, "hover"));
   }
 }
 

scss/icons/icons.scss

@@ -12,6 +12,7 @@
 @import "medium.scss";
 @import "twitch.scss";
 @import "reddit.scss";
+@import "whatsapp.scss";
 
 // others
 @import "close.scss";
@@ -101,6 +102,10 @@
     &.reddit::before {
       @include pixelize($icon-reddit, $icon-reddit-colors, $px);
     }
+
+    &.whatsapp::before {
+      @include pixelize($icon-whatsapp, $icon-whatsapp-colors, $px);
+    }
   }
 
   // default

scss/icons/whatsapp.scss

@@ -0,0 +1,19 @@
+$icon-whatsapp-colors: (#00ba37, #fff);
+// prettier-ignore
+$icon-whatsapp: (
+  ( 0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0 ),
+  ( 0,0,1,1,1,2,2,2,2,2,2,2,1,1,1,0 ),
+  ( 0,1,1,1,2,1,1,1,1,1,1,1,2,1,1,1 ),
+  ( 0,1,1,2,1,1,1,1,1,1,1,1,1,2,1,1 ),
+  ( 0,1,1,2,1,2,2,1,1,1,1,1,1,2,1,1 ),
+  ( 0,1,2,1,1,2,2,1,1,1,1,1,1,1,2,1 ),
+  ( 0,1,2,1,1,2,1,1,1,1,1,1,1,1,2,1 ),
+  ( 0,1,2,1,1,1,2,2,1,1,1,1,1,1,2,1 ),
+  ( 0,1,2,1,1,1,1,2,2,1,1,1,1,1,2,1 ),
+  ( 0,1,2,1,1,1,1,1,2,1,2,2,1,1,2,1 ),
+  ( 0,1,1,2,1,1,1,1,1,2,2,2,1,2,1,1 ),
+  ( 0,1,1,2,1,1,1,1,1,1,1,1,1,2,1,1 ),
+  ( 0,1,2,1,2,1,1,1,1,1,1,1,2,1,1,1 ),
+  ( 0,1,2,2,1,2,2,2,2,2,2,2,1,1,1,0 ),
+  ( 0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0 )
+);