barbican-reset 2.2.4 → 2.2.6

package/helpers/mixins/_buttons.scss

@@ -5,16 +5,21 @@
   }
 }
 
-@mixin button-setup {
+@mixin small-button {
+  padding: $padding-button-xs;
+  font-size: $font-size-sm;
+}
+
+@mixin setup-button {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: $border-radius-lg;
+  padding: $padding-button-lg;
   text-decoration: none;
   text-align: center;
   font-weight: 700;
   transition: none;
   line-height: 1;
-  padding: 1rem;
 
   &:focus {
     box-shadow: none;
@@ -22,12 +27,12 @@
   }
 
   &[slim] {
-    padding: 0.75rem;
+    padding: $padding-button-sm;
   }
 
   &[large] {
-    padding-bottom: 0.9375rem;
-    padding-top: 0.9375rem;
+    padding-bottom: $padding-button-md;
+    padding-top: $padding-button-md;
     font-size: 1.125rem;
   }
 
@@ -36,8 +41,8 @@
   }
 }
 
-@mixin button-display($display: 'ib', $gap: 1) {
-  @if $display == 'ib' {
+@mixin display-button($display: "ib", $gap: 1) {
+  @if $display == "ib" {
     vertical-align: middle;
     display: inline-block;
 
@@ -45,14 +50,14 @@
       vertical-align: middle;
       display: inline-block;
     }
-  } @else if $display == 'flex' {
+  } @else if $display == "flex" {
     display: inline-flex;
     align-items: center;
     gap: #{$gap}rem;
   }
 }
 
-@mixin button-solid(
+@mixin solid-button(
   $background: $c-brand-generic,
   $color: $white,
   $border: 1px,
@@ -68,9 +73,9 @@
 
   @if $display {
     @if $padding {
-      @include button-display($display, $padding * 0.625);
+      @include display-button($display, $padding * 0.625);
     } @else {
-      @include button-display($display, 0.625);
+      @include display-button($display, 0.625);
     }
   }
 
@@ -103,7 +108,7 @@
   }
 }
 
-@mixin button-outline(
+@mixin outline-button(
   $color: $c-brand-generic,
   $background: $white,
   $border: 1px,
@@ -119,9 +124,9 @@
 
   @if $display {
     @if $padding {
-      @include button-display($display, $padding * 0.625);
+      @include display-button($display, $padding * 0.625);
     } @else {
-      @include button-display($display, 0.625);
+      @include display-button($display, 0.625);
     }
   }
 
@@ -155,7 +160,7 @@
   }
 }
 
-@mixin button-link(
+@mixin link-button(
   $color: inherit,
   $background: transparent,
   $padding: 0,
@@ -176,18 +181,24 @@
   }
 }
 
+@mixin invisible-button {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
 @mixin btn-primary {
-  @include button-solid;
+  @include solid-button;
   min-width: 8rem;
 
-  &[disabled='disabled'] {
-    @include button-solid($c-grey-l21);
+  &[disabled="disabled"] {
+    @include solid-button($c-grey-l21);
     cursor: not-allowed;
   }
 }
 
 @mixin btn-returns {
-  @include button-solid($padding: 0.75em, $font-size: $font-size-sm);
+  @include solid-button($padding: 0.75em, $font-size: $font-size-sm);
 
   @include disabled {
     @include btn-outline-secondary;
@@ -195,32 +206,32 @@
 }
 
 @mixin btn-outline-primary {
-  @include button-outline;
+  @include outline-button;
 }
 
 @mixin btn-resale {
-  @include button-outline($padding: 0.625em, $font-size: $font-size-sm);
+  @include outline-button($padding: 0.625em, $font-size: $font-size-sm);
 }
 
 @mixin btn-secondary {
-  @include button-solid($c-grey-l21);
+  @include solid-button($c-grey-l21);
 }
 
 @mixin btn-outline-secondary {
-  @include button-outline($c-grey-l21);
+  @include outline-button($c-grey-l21);
 }
 
 @mixin btn-outline-header {
-  @include button-outline(
+  @include outline-button(
     $color: $white,
     $background: $c-brand-generic,
     $border: 0.125rem,
-    $display: 'flex'
+    $display: "flex"
   );
 }
 
 @mixin btn-input-edit {
-  @include button-outline($c-grey-l44);
+  @include outline-button($c-grey-l44);
   background-color: $c-grey-l87;
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -229,31 +240,31 @@
 }
 
 @mixin btn-cinema {
-  @include button-solid($c-brand-cinema);
+  @include solid-button($c-brand-cinema);
 }
 
 @mixin btn-power {
-  @include button-solid($c-power-blue);
+  @include solid-button($c-power-blue);
 }
 
 @mixin btn-power-login {
-  @include button-solid($background: $white, $color: $c-power-blue);
+  @include solid-button($background: $white, $color: $c-power-blue);
 }
 
 @mixin btn-info {
-  @include button-solid($c-status-neutral);
+  @include solid-button($c-status-neutral);
 }
 
 @mixin btn-outline-info {
-  @include button-outline($c-status-neutral);
+  @include outline-button($c-status-neutral);
 }
 
 @mixin btn-outline-cinema {
-  @include button-outline($c-brand-cinema);
+  @include outline-button($c-brand-cinema);
 }
 
 @mixin btn-remove {
-  @include button-solid(
+  @include solid-button(
     $background: $c-grey-l21,
     $padding: 0.625em,
     $line-height: 1.375
@@ -261,14 +272,14 @@
 }
 
 @mixin btn-link {
-  @include button-link($line-height: 1.3);
+  @include link-button($line-height: 1.3);
   @include focus {
     @include focus-tabs;
   }
 }
 
 @mixin btn-video-help {
-  @include button-link($padding: 1.25em, $background: $c-grey-l96);
+  @include link-button($padding: 1.25em, $background: $c-grey-l96);
   font-weight: 700;
   width: 100%;
 
@@ -279,7 +290,7 @@
 }
 
 @mixin btn-exit {
-  @include button-link;
+  @include link-button;
 
   svg {
     display: block;
@@ -323,7 +334,7 @@
 }
 
 @mixin btn-membership-card {
-  @include button-outline($color: $white, $background: transparent);
+  @include outline-button($color: $white, $background: transparent);
 
   @include focus {
     &.member {
@@ -336,16 +347,16 @@
 }
 
 @mixin btn-video-login {
-  // @include button-solid($background: $white, $color: $c-splash-videos);
+  // @include solid-button($background: $white, $color: $c-splash-videos);
 }
 
 @mixin btn-cta {
-  @include button-solid($background: $c-grey-l21, $display: 'flex');
+  @include solid-button($background: $c-grey-l21, $display: "flex");
   fill: $white;
 }
 
 @mixin btn-carousel {
-  @include button-solid($c-grey-l21);
+  @include solid-button($c-grey-l21);
   @include single-box($white);
   border-radius: 50%;
   font-size: 0;
@@ -376,8 +387,8 @@
 }
 
 @mixin btn-menu {
-  @include button-display(flex, 0.75);
-  @include button-outline(
+  @include display-button(flex, 0.75);
+  @include outline-button(
     $color: $white,
     $background: $c-brand-generic,
     $padding: 0 0.75rem,
@@ -391,14 +402,14 @@
     @include btn-menu-focus;
   }
 
-  @include data('clicked') {
+  @include data("clicked") {
     @include btn-menu-focus;
   }
 }
 
 @mixin btn-basket {
-  @include button-display(flex, 0.5);
-  @include button-solid(
+  @include display-button(flex, 0.5);
+  @include solid-button(
     $background: $white,
     $color: $c-brand-generic,
     $padding: 0 0.75rem,
@@ -412,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/helpers/variables/_layout.scss

@@ -24,4 +24,9 @@ $gap-accordion: 2rem;
 
 $select-arrow: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e";
 
-$box-shadow-card: 0 0 0.5rem rgba($black, 0.1);
+$box-shadow-card: 0 0 0.5rem rgba($black, 0.1);
+
+$padding-button-xs: 0.625rem;
+$padding-button-sm: 0.75rem;
+$padding-button-md: 0.9375rem;
+$padding-button-lg: 1rem;

package/package.json

@@ -1,12 +1,12 @@
 {
   "_args": [
     [
-      "barbican-reset@2.2.4",
+      "barbican-reset@2.2.6",
       "/Users/pheading/Sites/eticketing-vue"
     ]
   ],
-  "_from": "barbican-reset@2.2.4",
-  "_id": "barbican-reset@2.2.4",
+  "_from": "barbican-reset@2.2.6",
+  "_id": "barbican-reset@2.2.6",
   "_inBundle": false,
   "_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
   "_location": "/barbican-reset",
@@ -35,18 +35,18 @@
   "_requested": {
     "type": "version",
     "registry": true,
-    "raw": "barbican-reset@2.2.4",
+    "raw": "barbican-reset@2.2.6",
     "name": "barbican-reset",
     "escapedName": "barbican-reset",
-    "rawSpec": "2.2.4",
+    "rawSpec": "2.2.6",
     "saveSpec": null,
-    "fetchSpec": "2.2.4"
+    "fetchSpec": "2.2.6"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.4.tgz",
-  "_spec": "2.2.4",
+  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.6.tgz",
+  "_spec": "2.2.6",
   "_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.4"
+  "version": "2.2.6"
 }

package/scss/_btn.scss

@@ -1,5 +1,5 @@
 .btn {
-  @include button-setup;
+  @include setup-button;
 
   &.btn-primary {
     // solid orange
@@ -118,7 +118,12 @@
     @include btn-basket;
   }
 
+  &.btn-discover {
+    @include btn-discover;
+  }
+
   // modifyers
+
   &.expand {
     @include btn-expand;
   }