barbican-reset 2.2.3 → 2.2.5

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,7 +41,7 @@
   }
 }
 
-@mixin button-display($display: 'ib', $gap: 1) {
+@mixin display-button($display: 'ib', $gap: 1) {
   @if $display == 'ib' {
     vertical-align: middle;
     display: inline-block;
@@ -52,25 +57,16 @@
   }
 }
 
-@mixin button-solid(
-  $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;
 
   @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,25 +99,16 @@
   }
 }
 
-@mixin button-outline(
-  $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;
 
   @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,12 +142,7 @@
   }
 }
 
-@mixin button-link(
-  $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;
@@ -176,18 +158,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);
+    @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 +183,27 @@
 }
 
 @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(
-    $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 {
-  @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,46 +212,42 @@
 }
 
 @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(
-    $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 {
-  @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,17 +258,14 @@
 }
 
 @mixin btn-exit {
-  @include button-link;
+  @include link-button;
 
   svg {
     display: block;
   }
 
   @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 {
@@ -323,7 +299,7 @@
 }
 
 @mixin btn-membership-card {
-  @include button-outline($color: $white, $background: transparent);
+  @include outline-button($color: $white, $background: transparent);
 
   @include focus {
     &.member {
@@ -336,16 +312,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,14 +352,8 @@
 }
 
 @mixin btn-menu {
-  @include button-display(flex, 0.75);
-  @include button-outline(
-    $color: $white,
-    $background: $c-brand-generic,
-    $padding: 0 0.75rem,
-    $margin: 0.25rem,
-    $line-height: 2.375rem
-  );
+  @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);
   vertical-align: middle;
   min-height: 2.5rem;
 
@@ -397,14 +367,8 @@
 }
 
 @mixin btn-basket {
-  @include button-display(flex, 0.5);
-  @include button-solid(
-    $background: $white,
-    $color: $c-brand-generic,
-    $padding: 0 0.75rem,
-    $margin: 0.25rem,
-    $line-height: 2.375rem
-  );
+  @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);
   vertical-align: middle;
   min-height: 2.5rem;
 

package/helpers/mixins/_focus.scss

@@ -46,12 +46,7 @@
   z-index: 2;
 }
 
-@mixin double-box(
-  $bg: $white,
-  $col: $black,
-  $bg_size: 0.25rem,
-  $col_size: 0.15rem
-) {
+@mixin double-box($bg: $white, $col: $black, $bg_size: 0.25rem, $col_size: 0.15rem) {
   @include box-setup;
   box-shadow: 0 0 0 $bg_size $bg, 0 0 0 ($bg_size + $col_size) $col;
 }
@@ -106,15 +101,9 @@
 
 @mixin skip-link {
   @include focus-visible {
-    background-color: $c-grey-l21;
-    border-radius: 0.5rem;
     position: absolute;
-    padding: 0.5rem;
-    margin: 0.5rem;
-    color: white;
-    outline: none;
+    @content;
   }
-
   @include not-focus-visible {
     @include sr-only;
   }

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

package/scss/_btn.scss

@@ -1,5 +1,5 @@
 .btn {
-  @include button-setup;
+  @include setup-button;
 
   &.btn-primary {
     // solid orange