barbican-reset 2.26.0 → 2.28.0

package/helpers/mixins/_buttons.scss

@@ -77,8 +77,8 @@
   @include outline-button($color: white,
     $background: $c-brand-generic,
     $border: 0.125rem,
-    $display: "flex"
   );
+  @include flex-button;
 }
 
 @mixin btn-input-edit {
@@ -139,7 +139,7 @@
   }
 
   @include focus {
-    @include single-box($c-grey-l21,
+    @include single-box(currentColor,
       0.1875rem); // @BUG: safari outline + border-radius
     border-radius: 50%;
 
@@ -148,7 +148,7 @@
     }
 
     path.tint {
-      fill: $c-grey-l21;
+      fill: currentColor;
     }
   }
 }
@@ -194,7 +194,8 @@
 }
 
 @mixin btn-cta {
-  @include solid-button($background: $c-grey-l21, $display: "flex");
+  @include solid-button($background: $c-grey-l21);
+  @include flex-button;
   fill: white;
 }
 
@@ -230,12 +231,12 @@
 }
 
 @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 flex-button($gap: 0.75rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -249,12 +250,12 @@
 }
 
 @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 flex-button($gap: 0.5rem);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -268,8 +269,8 @@
 }
 
 @mixin btn-discover {
-  @include display-button(flex, 0.75);
   @include outline-button(white, $c-grey-l21);
+  @include flex-button($gap: 0.75rem);
 
   span {
     position: relative;
@@ -304,12 +305,12 @@
 
 @mixin btn-priority-row {
   @include btn-outline-primary;
-  @include display-button(flex, 0.5);
+  @include flex-button($gap: 0.5rem);
 }
 
 @mixin btn-login-to-book {
-  @include display-button(flex, 0.5);
   @include btn-primary;
+  @include flex-button($gap: 0.5rem);
   justify-content: center;
   min-width: initial;
 
@@ -320,20 +321,25 @@
 }
 
 @mixin btn-sold-out {
-  @include display-button(flex, 0.5);
   @include btn-secondary;
+  @include flex-button($gap: 0.5rem);
   pointer-events: none;
   min-width: initial;
 }
 
 @mixin btn-add-membership-to-basket {
   @include solid-button($background: $c-brand-membership);
-  @include display-button(flex, 0.5);
+  @include flex-button($gap: 0.5rem);
 }
 
 @mixin btn-remove-membership-from-basket {
   @include solid-button($background: $c-status-error);
-  @include display-button(flex, 0.5);
+  @include flex-button($gap: 0.5rem);
+}
+
+@mixin btn-additional-information {
+  @include btn-outline-primary;
+  @include flex-button($gap: 0.5rem);
 }
 
 // Access Overlay Work -- End

package/helpers/mixins/buttons/_outline.scss

@@ -4,22 +4,11 @@
   $padding: false,
   $margin: false,
   $line-height: false,
-  $display: false,
   $font-size: false) {
   background-color: $background;
   border: $border solid $color;
   color: $color;
 
-  @if $display {
-    @if $padding {
-      @include display-button($display, $padding * 0.625);
-    }
-
-    @else {
-      @include display-button($display, 0.625);
-    }
-  }
-
   @if $line-height {
     line-height: $line-height;
   }

package/helpers/mixins/buttons/_setup.scss

@@ -50,20 +50,20 @@
   }
 }
 
-@mixin display-button($display: "ib", $gap: 1) {
-  @if $display =="ib" {
-    vertical-align: middle;
-    display: inline-block;
+// deprecated: @mixin display-button
 
-    >* {
-      vertical-align: middle;
-      display: inline-block;
-    }
-  }
+@mixin flex-button($gap: 1rem) {
+  display: inline-flex;
+  align-items: center;
+  gap: $gap;
+}
 
-  @else if $display =="flex" {
-    display: inline-flex;
-    align-items: center;
-    gap: #{$gap}rem;
+@mixin inline-block-button() {
+  vertical-align: middle;
+  display: inline-block;
+
+  >* {
+    vertical-align: middle;
+    display: inline-block;
   }
 }

package/helpers/mixins/buttons/_solid.scss

@@ -4,22 +4,11 @@
   $padding: false,
   $margin: false,
   $line-height: false,
-  $display: false,
   $font-size: false) {
   border: $border solid $background;
   background-color: $background;
   color: $color;
 
-  @if $display {
-    @if $padding {
-      @include display-button($display, $padding * 0.625);
-    }
-
-    @else {
-      @include display-button($display, 0.625);
-    }
-  }
-
   @if $line-height {
     line-height: $line-height;
   }

package/package.json

@@ -103,5 +103,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.26.0"
+  "version": "2.28.0"
 }

package/scss/_btn.scss

@@ -147,6 +147,10 @@
     @include btn-remove-membership-from-basket;
   }
 
+  &.btn-additional-information {
+    @include btn-additional-information;
+  }
+
   // modifyers
 
   &.expand {