Merge pull request #215 from appirio-tech/tom-buttons

First v of new button spec

Author: tladendo

assets/css/partials/_colors.scss

@@ -53,4 +53,5 @@ $ui-light-gray: #808285;
 
 $ui-blue: #26A9E0;
 $ui-disabled-button-blue: #94D7ED;
+$button-gray: #d1d3d4;
 $ui-enabled-button-blue: #27a9e1;

assets/css/partials/_mixins.scss

@@ -121,14 +121,14 @@
 }
 
 // Replace with classes from style guide, when it's finished
-@mixin button-s {
+@mixin button-s($background: $primary-color) {
   height: 20px;
   line-height: 20px;
   padding: 0 8px;
   border: none;
   border-radius: 3px;
   color: $white;
-  background-color: $primary-color;
+  background-color: $background;
   @include sofia-pro-regular;
   font-size: 11px;
   text-transform: uppercase;
@@ -137,16 +137,18 @@
   cursor: pointer;
   outline: 0;
 }
-@mixin button-m {
-  @include button-s;
+
+@mixin button-m($background: $primary-color) {
+  @include button-s($background);
   height: 30px;
   line-height: 30px;
   padding: 0 15px;
   font-size: 14px;
   border-radius: 4px;
 }
-@mixin button-l {
-  @include button-s;
+
+@mixin button-l($background: $primary-color) {
+  @include button-s($background);
   height: 50px;
   line-height: 50px;
   padding: 0 15px;
@@ -155,8 +157,9 @@
   border-radius: 4px;
 
 }
-@mixin button-xl {
-  @include button-s;
+
+@mixin button-xl($background: $primary-color) {
+  @include button-s($background);
   height: 60px;
   line-height: 60px;
   padding: 0 15px;
@@ -165,8 +168,9 @@
   border-radius: 4px;
 
 }
-@mixin button-m-wide {
-  @include button-m;
+
+@mixin button-m-wide($background: $primary-color) {
+  @include button-m($background);
   padding: 0 30px;
 }
 
@@ -180,6 +184,138 @@
   border: 1px solid $primary-color;
 }
 
+@mixin button-1($disabled: #b2e7fe, $normal: #1eaefc, $hover: #199ae2, $active: #1792d7) {
+  @include button-s;
+  background-color: $normal;
+  &.disabled {
+    background-color: $disabled;
+  }
+  &:hover {
+    background-color: $hover;
+  }
+  &:active {
+    background-color: $active;
+  }
+}
+
+@mixin button-1-m {
+  @include button-1;
+  @include button-m(#1eaefc);
+}
+
+@mixin button-1-m-wide {
+  @include button-1;
+  @include button-m-wide(#1eaefc);
+}
+
+@mixin button-1-l {
+  @include button-1;
+  @include button-l(#1eaefc);
+}
+
+@mixin button-1-xl {
+  @include button-1;
+  @include button-xl(#1eaefc);
+}
+
+@mixin button-2 {
+  @include button-1(#edeeee, #d1d3d4, #1eaefc)
+}
+
+@mixin button-2-m {
+  @include button-2;
+  @include button-m(#d1d3d4);
+}
+
+@mixin button-2-m-wide {
+  @include button-2;
+  @include button-m-wide(#d1d3d4);
+}
+
+@mixin button-2-l {
+  @include button-2;
+  @include button-l(#d1d3d4);
+}
+
+@mixin button-2-xl {
+  @include button-2;
+  @include button-xl(#d1d3d4);
+}
+
+@mixin button-border($disabled, $normal, $hover, $hover-fill: white, $fill: $normal) {
+  background-color: white;
+  color: $fill;
+  border: 1px solid $normal;
+  &.disabled {
+    border: 1px solid $disabled;
+  }
+  &:hover {
+    border: 1px solid $hover;
+    color: $hover-fill;
+  }
+  &:active {
+    color: white;
+  }
+}
+
+@mixin button-3 {
+  @include button-1(white, white, #1eaefc, #1893d8);
+  @include button-border(#dedede, #1eaefc, #1eaefc);
+}
+
+@mixin button-3-m {
+  @include button-3;
+  @include button-m(#edeeee);
+  @include button-border(#dedede, #1eaefc, #1eaefc);
+}
+
+@mixin button-3-m-wide {
+  @include button-3;
+  @include button-m-wide(#edeeee);
+  @include button-border(#dedede, #1eaefc, #1eaefc);
+}
+
+@mixin button-3-l {
+  @include button-3;
+  @include button-l(white);
+  @include button-border(#dedede, #1eaefc, #1eaefc);
+}
+
+@mixin button-3-xl {
+  @include button-3;
+  @include button-xl(#edeeee);
+  @include button-border(#dedede, #1eaefc, #1eaefc);
+}
+
+@mixin button-4 {
+  @include button-1(white, white, white, #1893d8);
+  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
+}
+
+@mixin button-4-m {
+  @include button-4;
+  @include button-m(#edeeee);
+  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
+}
+
+@mixin button-4-m-wide {
+  @include button-4;
+  @include button-m-wide(#edeeee);
+  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
+}
+
+@mixin button-4-l {
+  @include button-4;
+  @include button-l(#edeeee);
+  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
+}
+
+@mixin button-4-xl {
+  @include button-4;
+  @include button-xl(#edeeee);
+  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
+}
+
 @mixin module-s {
   margin-top: 6px;
   background-color: $white;

assets/css/profile/about.scss

@@ -152,7 +152,7 @@
       margin-top: 20px;
       margin-left: auto;
       margin-right: auto;
-      @include button-l;
+      @include button-2-l;
     }
     .list {
       display: flex;