Merge branch 'develop' into table-margin

2025-02-22 08:12:37 +01:00 · 2018-12-09 10:15:41 -06:00 · 2018-12-09 10:15:41 -06:00 · 67c1313960
commit 67c1313960
parent 918bc70ba3 4f0bca554f
11 changed files with 124 additions and 54 deletions
--- a/docs/icons.stories.js
+++ b/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',
--- a/index.html
+++ b/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>

--- a/scss/base/variables.scss
+++ b/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
+);
--- a/scss/elements/balloons.scss
+++ b/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
--- a/scss/elements/buttons.scss
+++ b/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, 
-      8px 0 #212529, 
-      0 4px $shadow, 
-      4px 4px #212529, 
-      0 8px #212529,
-      -4px 0 $hover-background, 
-      inset -2px 0 $shadow, 
-      -4px -4px #212529, 
-      -8px 0 #212529,
-      -4px 4px #212529;
+      4px -4px $base-color,
+      8px 0 $base-color,
+      0 4px $shadow,
+      4px 4px $base-color,
+      0 8px $base-color,
+      -4px 0 $hover-background,
+      inset -2px 0 $shadow,
+      -4px -4px $base-color,
+      -8px 0 $base-color,
+      -4px 4px $base-color;
  }

  &:active {
    // prettier-ignore
-    box-shadow: 
-      0 -4px $shadow, 
-      0 -8px #212529, 
-      4px 0 $hover-background, 
-      4px -4px #212529,
-      8px 0 #212529, 
-      0 4px $hover-background, 
-      4px 4px #212529, 
-      0 8px #212529, 
+    box-shadow:
+      0 -4px $shadow,
+      0 -8px $base-color,
+      4px 0 $hover-background,
+      4px -4px $base-color,
+      8px 0 $base-color,
+      0 4px $hover-background,
+      4px 4px $base-color,
+      0 8px $base-color,
      -4px 0 $shadow,
-      -4px -4px #212529, 
-      -8px 0 #212529, 
-      -4px 4px #212529;
+      -4px -4px $base-color,
+      -8px 0 $base-color,
+      -4px 4px $base-color;
  }

  // prettier-ignore
-  box-shadow: 
-    0 -4px $background, 
-    0 -8px #212529, 
-    4px 0 $shadow, 
-    4px -4px #212529, 
-    8px 0 #212529,
-    0 4px $shadow, 
-    4px 4px #212529, 
-    0 8px #212529, 
-    -4px 0 $background, 
-    -4px -4px #212529,
-    -8px 0 #212529, 
-    -4px 4px #212529;
+  box-shadow:
+    0 -4px $background,
+    0 -8px $base-color,
+    4px 0 $shadow,
+    4px -4px $base-color,
+    8px 0 $base-color,
+    0 4px $shadow,
+    4px 4px $base-color,
+    0 8px $base-color,
+    -4px 0 $background,
+    -4px -4px $base-color,
+    -8px 0 $base-color,
+    -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;
-    box-shadow: inset -4px -4px #adafbc;
+    background-color: map-get($disabled-colors, "normal");
+    box-shadow: inset -4px -4px map-get($disabled-colors, "shadow");
    opacity: 0.6;
  }

  // Other styles
  // prettier-ignore
  $types:
-    "primary" #fff #209cee #108de0 #006bb3,
-    "success" #fff #92cc41 #76c442 #4aa52e,
-    "warning" $base-color #f7d51d #f2c409 #e59400,
-    "error" #fff #e76e55 #ce372b #8c2022;
+    "primary" $background-color map-get($primary-colors, "normal") map-get($primary-colors, "hover") map-get($primary-colors, "shadow"),
+    "success" $background-color map-get($success-colors, "normal") map-get($success-colors, "hover") map-get($success-colors, "shadow"),
+    "warning" $base-color map-get($warning-colors, "normal") map-get($warning-colors, "hover") map-get($warning-colors, "shadow"),
+    "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 {
--- a/scss/elements/checkboxes.scss
+++ b/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;
--- a/scss/elements/containers.scss
+++ b/scss/elements/containers.scss
@ -117,7 +117,7 @@
    }

    &::after {
-      border-color: #fff;
+      border-color: $background-color;
    }

    &.with-title {
--- a/scss/elements/radios.scss
+++ b/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;
--- a/scss/form/inputs.scss
+++ b/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"));
  }
 }

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