barbican-reset 2.14.0 → 2.16.0

package/helpers/mixins/_buttons.scss

@@ -16,6 +16,7 @@
   border-radius: $border-radius-lg;
   padding: $padding-button-lg;
   text-decoration: none;
+  display: inline-block;
   text-align: center;
   font-weight: 700;
   transition: none;
@@ -57,16 +58,7 @@
   }
 }
 
-@mixin solid-button(
-  $background: $c-brand-generic,
-  $color: white,
-  $border: 1px,
-  $padding: false,
-  $margin: false,
-  $line-height: false,
-  $display: false,
-  $font-size: false
-) {
+@mixin solid-button($background: $c-brand-generic, $color: white, $border: 1px, $padding: false, $margin: false, $line-height: false, $display: false, $font-size: false) {
   border: $border solid $background;
   background-color: $background;
   color: $color;
@@ -96,11 +88,13 @@
     fill: currentColor;
   }
 
-  @include focus {
-    @include double-box($color, $background);
-    border: $border solid $background;
-    background-color: $background;
-    color: $color;
+  &:not(:disabled) {
+    @include focus {
+      @include double-box($color, $background);
+      border: $border solid $background;
+      background-color: $background;
+      color: $color;
+    }
   }
 
   &.hide {
@@ -108,16 +102,7 @@
   }
 }
 
-@mixin outline-button(
-  $color: $c-brand-generic,
-  $background: white,
-  $border: 1px,
-  $padding: false,
-  $margin: false,
-  $line-height: false,
-  $display: false,
-  $font-size: false
-) {
+@mixin outline-button($color: $c-brand-generic, $background: white, $border: 1px, $padding: false, $margin: false, $line-height: false, $display: false, $font-size: false) {
   background-color: $background;
   border: $border solid $color;
   color: $color;
@@ -144,28 +129,25 @@
   }
 
   path {
-    fill: $color;
+    fill: currentColor;
   }
 
-  @include focus {
-    border: $border solid $color;
-    background-color: $color;
-    color: $background;
-    box-shadow: none;
-    outline: none;
-
-    path {
-      fill: $background;
+  &:not(:disabled) {
+    @include focus {
+      border: $border solid $color;
+      background-color: $color;
+      color: $background;
+      box-shadow: none;
+      outline: none;
+  
+      path {
+        fill: $background;
+      }
     }
   }
 }
 
-@mixin link-button(
-  $color: inherit,
-  $background: transparent,
-  $padding: 0,
-  $line-height: false
-) {
+@mixin link-button($color: inherit, $background: transparent, $padding: 0, $line-height: false) {
   background-color: $background;
   text-decoration: underline;
   vertical-align: baseline;
@@ -191,7 +173,7 @@
   @include solid-button;
   min-width: 8rem;
 
-  &[disabled='disabled'] {
+  @include disabled {
     @include solid-button($c-grey-l21);
     cursor: not-allowed;
   }
@@ -227,12 +209,7 @@
 }
 
 @mixin btn-outline-header {
-  @include outline-button(
-    $color: white,
-    $background: $c-brand-generic,
-    $border: 0.125rem,
-    $display: 'flex'
-  );
+  @include outline-button($color: white, $background: $c-brand-generic, $border: 0.125rem, $display: 'flex');
 }
 
 @mixin btn-input-edit {
@@ -261,11 +238,7 @@
 }
 
 @mixin btn-remove {
-  @include solid-button(
-    $background: $c-grey-l21,
-    $padding: 0.625em,
-    $line-height: 1.375
-  );
+  @include solid-button($background: $c-grey-l21, $padding: 0.625em, $line-height: 1.375);
 }
 
 @mixin btn-link {
@@ -294,10 +267,7 @@
   }
 
   @include focus {
-    @include single-box(
-      $c-grey-l21,
-      0.1875rem
-    ); // @BUG: safari outline + border-radius
+    @include single-box($c-grey-l21, 0.1875rem); // @BUG: safari outline + border-radius
     border-radius: 50%;
 
     path.cross {
@@ -385,13 +355,7 @@
 
 @mixin btn-menu {
   @include display-button(flex, 0.75);
-  @include outline-button(
-    $color: white,
-    $background: $c-brand-generic,
-    $padding: 0 0.75rem,
-    $margin: 0.25rem,
-    $line-height: 2.375rem
-  );
+  @include outline-button($color: white, $background: $c-brand-generic, $padding: 0 0.75rem, $margin: 0.25rem, $line-height: 2.375rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -406,13 +370,7 @@
 
 @mixin btn-basket {
   @include display-button(flex, 0.5);
-  @include solid-button(
-    $background: white,
-    $color: $c-brand-generic,
-    $padding: 0 0.75rem,
-    $margin: 0.25rem,
-    $line-height: 2.375rem
-  );
+  @include solid-button($background: white, $color: $c-brand-generic, $padding: 0 0.75rem, $margin: 0.25rem, $line-height: 2.375rem);
   vertical-align: middle;
   min-height: 2.5rem;
 

package/package.json

@@ -54,5 +54,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.14.0"
+  "version": "2.16.0"
 }