barbican-reset 2.2.5 → 2.2.7

package/helpers/mixins/_buttons.scss

@@ -41,8 +41,8 @@
   }
 }
 
-@mixin display-button($display: 'ib', $gap: 1) {
-  @if $display == 'ib' {
+@mixin display-button($display: "ib", $gap: 1) {
+  @if $display == "ib" {
     vertical-align: middle;
     display: inline-block;
 
@@ -50,14 +50,23 @@
       vertical-align: middle;
       display: inline-block;
     }
-  } @else if $display == 'flex' {
+  } @else if $display == "flex" {
     display: inline-flex;
     align-items: center;
     gap: #{$gap}rem;
   }
 }
 
-@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;
@@ -99,7 +108,16 @@
   }
 }
 
-@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;
@@ -142,7 +160,12 @@
   }
 }
 
-@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;
@@ -168,7 +191,7 @@
   @include solid-button;
   min-width: 8rem;
 
-  &[disabled='disabled'] {
+  &[disabled="disabled"] {
     @include solid-button($c-grey-l21);
     cursor: not-allowed;
   }
@@ -199,7 +222,12 @@
 }
 
 @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 {
@@ -220,7 +248,7 @@
 }
 
 @mixin btn-power-login {
-  @include solid-button($background: $white, $color: $c-power-blue);
+  @include solid-button($background: white, $color: $c-power-blue);
 }
 
 @mixin btn-info {
@@ -236,7 +264,11 @@
 }
 
 @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 {
@@ -253,7 +285,7 @@
 
   @include focus {
     background-color: $c-grey-l44;
-    color: $white;
+    color: white;
   }
 }
 
@@ -265,11 +297,14 @@
   }
 
   @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 {
-      fill: $white;
+      fill: white;
     }
 
     path.tint {
@@ -299,7 +334,7 @@
 }
 
 @mixin btn-membership-card {
-  @include outline-button($color: $white, $background: transparent);
+  @include outline-button($color: white, $background: transparent);
 
   @include focus {
     &.member {
@@ -312,20 +347,20 @@
 }
 
 @mixin btn-video-login {
-  // @include solid-button($background: $white, $color: $c-splash-videos);
+  @include solid-button($background: white, $color: #0a0a0a);
 }
 
 @mixin btn-cta {
-  @include solid-button($background: $c-grey-l21, $display: 'flex');
-  fill: $white;
+  @include solid-button($background: $c-grey-l21, $display: "flex");
+  fill: white;
 }
 
 @mixin btn-carousel {
   @include solid-button($c-grey-l21);
-  @include single-box($white);
+  @include single-box(white);
   border-radius: 50%;
   font-size: 0;
-  fill: $white;
+  fill: white;
 
   @include media-breakpoint-down(lg) {
     padding: 0.75rem;
@@ -343,7 +378,7 @@
 }
 
 @mixin btn-menu-focus($brand: $c-brand-generic) {
-  background-color: $white;
+  background-color: white;
   color: $brand;
 
   path {
@@ -353,7 +388,13 @@
 
 @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;
 
@@ -361,14 +402,20 @@
     @include btn-menu-focus;
   }
 
-  @include data('clicked') {
+  @include data("clicked") {
     @include btn-menu-focus;
   }
 }
 
 @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;
 
@@ -376,11 +423,21 @@
     @include btn-menu-focus;
   }
 
-  @include data('clicked') {
+  @include data("clicked") {
     @include btn-menu-focus;
   }
 }
 
+@mixin btn-discover {
+  @include display-button(flex, 0.75);
+  @include outline-button(white, $c-grey-l21);
+
+  span {
+    position: relative;
+    top: 0.125rem;
+  }
+}
+
 @mixin btn-invisible {
   color: inherit;
   padding: 0;

package/package.json

@@ -1,12 +1,12 @@
 {
   "_args": [
     [
-      "barbican-reset@2.2.5",
+      "barbican-reset@2.2.7",
       "/Users/pheading/Sites/eticketing-vue"
     ]
   ],
-  "_from": "barbican-reset@2.2.5",
-  "_id": "barbican-reset@2.2.5",
+  "_from": "barbican-reset@2.2.7",
+  "_id": "barbican-reset@2.2.7",
   "_inBundle": false,
   "_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
   "_location": "/barbican-reset",
@@ -35,18 +35,18 @@
   "_requested": {
     "type": "version",
     "registry": true,
-    "raw": "barbican-reset@2.2.5",
+    "raw": "barbican-reset@2.2.7",
     "name": "barbican-reset",
     "escapedName": "barbican-reset",
-    "rawSpec": "2.2.5",
+    "rawSpec": "2.2.7",
     "saveSpec": null,
-    "fetchSpec": "2.2.5"
+    "fetchSpec": "2.2.7"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.5.tgz",
-  "_spec": "2.2.5",
+  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.7.tgz",
+  "_spec": "2.2.7",
   "_where": "/Users/pheading/Sites/eticketing-vue",
   "author": {
     "name": "Paul Heading"
@@ -100,5 +100,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.2.5"
+  "version": "2.2.7"
 }

package/scss/_btn.scss

@@ -118,7 +118,12 @@
     @include btn-basket;
   }
 
+  &.btn-discover {
+    @include btn-discover;
+  }
+
   // modifyers
+
   &.expand {
     @include btn-expand;
   }