barbican-reset 1.5.0 → 1.5.4

package/components/br_button.vue

@@ -1,5 +1,8 @@
 <template>
-  <b-button @click="$emit('click')" :variant="variant" :type="type">
+  
+  <!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
+
+  <b-button @click="$emit('click')" :variant="variant" :type="type" aria-live="polite" :aria-busy="loading">
 
     <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
       <template v-for="(index, name) in $slots" v-slot:[name]>
@@ -69,6 +72,11 @@ export default {
       default: "button"
     }
   },
+  computed: {
+    loading() {
+      return this.state === "loading" ? "true" : "false";
+    }
+  },
   components: {
     BButton,
     RemoveTicket

package/helpers/index.scss

@@ -1,3 +1,3 @@
 // paths more explicit for gulp-sass
-@import "variables/index.scss";
-@import "mixins/index.scss";
+@import "variables/index";
+@import "mixins/index";

package/helpers/mixins/_buttons.scss

@@ -74,6 +74,7 @@
     border: $border solid $color;
     background-color: $color;
     color: $background;
+    outline: none;
 
     svg {
       fill: $background;
@@ -111,6 +112,11 @@
 @mixin btn-primary {
   @include button-solid;
   min-width: 8rem;
+
+  &[disabled=disabled] {
+    @include button-solid($c-grey-night);
+    cursor: not-allowed;
+  }
 }
 
 @mixin btn-outline-primary {

package/helpers/mixins/_focus.scss

@@ -1,32 +1,45 @@
 @mixin focus {
-  &:focus {
-    box-shadow: none; 
-    outline: none; 
-  }
-  &:hover, &[data-focus-visible-added] {
-    @content;
+  &:not([disabled=disabled]) {
+    &[data-focus-visible-added], 
+    &:focus-visible,
+    &:hover {
+      @content;
+    }
   }  
 }
 
-@mixin double-box($bg: $white, $col: $black, $bg_size: 0.25rem, $col_size: 0.15rem) {
-  box-shadow: 0 0 0 $bg_size $bg, 0 0 0 ($bg_size + $col_size) $col;
+@mixin box-setup {
   position: relative;
+  outline: none;
   z-index: 2;
 }
 
+@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;
+}
+
 @mixin single-box($bg: $white, $size: 0.25rem) {
+  @include box-setup;
   box-shadow: 0 0 0 $size $bg;
-  position: relative;
-  z-index: 2;
 }
 
 @mixin link-focus($color: $c-grey-midnight, $border: $white) {
   @include focus {
     @include double-box($color, $border);
     background-color: $color;
-    position: relative;
     color: $border;
-    outline: none;
-    z-index: 2;
   }
 }
+
+@mixin input-focus {
+  @include single-box($c-grey-steel, 0.0625rem);
+  border: 1px solid $c-grey-steel;
+  background-color: $c-grey-alpine;
+}
+
+@mixin focus_colors {
+  background-color: $c-status-neutral-fade;
+  border: 1px solid $c-status-neutral;
+  color: $c-status-neutral;
+}

package/helpers/mixins/_font.scss

@@ -10,9 +10,3 @@
   }
 }
 
-@mixin all-text-inputs {
-  border: solid $border-width $c-border-strong;
-  padding: 0.875rem 0.875rem 0.75rem;
-  background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;  
-}

package/helpers/mixins/_input.scss

@@ -0,0 +1,7 @@
+
+@import "input/generic";
+@import "input/status";
+@import "input/checkbox";
+@import "input/dropdown";
+@import "input/radio";
+@import "input/text";

package/helpers/mixins/index.scss

@@ -1,5 +1,5 @@
-// paths more explicit for gulp-sass
-@import "~bourbon/core/bourbon.scss";
+// paths more explicit for gulp-sass + iframe overrides
+@import "../../node_modules/bourbon/core/bourbon";
 
 @mixin inset($val: 0) {
   bottom: $val;
@@ -8,16 +8,17 @@
   top: $val;
 }
 
-@import "account/orders.scss";
-@import "basket.scss";
-@import "buttons.scss";
-@import "card.scss";
-@import "content.scss";
-@import "core.scss";
-@import "festival.scss";
-@import "focus.scss";
-@import "font.scss";
-@import "loading.scss";
+@import "account/orders";
+@import "basket";
+@import "buttons";
+@import "card";
+@import "content";
+@import "core";
+@import "festival";
+@import "focus";
+@import "font";
+@import "loading";
+@import "input";
 
 @mixin table_link {
   @include focus {

package/helpers/mixins/input/_checkbox.scss

@@ -0,0 +1,6 @@
+@mixin checkbox-input(
+  $state: neutral,
+  $type: checkbox) {
+  @include generic-input($state,$type);
+  display: block;
+}

package/helpers/mixins/input/_dropdown.scss

@@ -0,0 +1,9 @@
+
+@mixin input-dropdown {
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;
+  border-color: $c-grey-concrete;
+  padding: 0.875rem 0.5rem;
+  color: $c-grey-night;
+  width: 100%;
+}

package/helpers/mixins/input/_generic.scss

@@ -0,0 +1,62 @@
+@mixin generic-input($state,$type) {
+  position: relative;
+  padding: 0;
+
+  input[type=#{$type}] {
+    $size: 0.875rem;
+    position: absolute;
+    height: $size;
+    margin: auto;
+    width: $size;
+    right: auto;
+    z-index: 3;
+    left: 1rem;
+    bottom: 0;
+    top: 0;
+
+    @if $state != disabled {
+      cursor: pointer;
+
+      @include focus {
+        outline: none;
+        
+        ~ label {
+          @include single-box($c-grey-steel, 0.0625rem);
+          border: 1px solid $c-grey-steel;
+          background-color: $c-grey-alpine;
+        }
+        
+        &:checked ~ label {
+          @include focus_colors;
+          @include single-box($c-status-neutral, 0.0625rem);
+        }
+      }
+  
+      &:checked ~ label {
+        @include focus_colors;
+      }
+    }
+  }
+
+  label {
+    padding: 0.75rem 0.75rem 0.625rem 2.75rem;
+    border: 1px solid $c-grey-concrete;
+    border-radius: $border-radius-lg;
+    background-color: $white;
+    font-weight: 400;
+
+    @if $state != disabled {
+      color: $c-grey-night;
+      cursor: pointer;
+    }
+
+    @if $state == disabled {
+      color: $c-grey-steel;
+      cursor: not-allowed;
+
+      &.spx-label-field__checkout, .spx-data-delivery-type {
+        text-decoration: line-through;
+      }
+    }
+  }
+}

package/helpers/mixins/input/_radio.scss

@@ -0,0 +1,19 @@
+
+@mixin radio-group {
+  margin: -0.25rem;
+}
+
+@mixin radio-input(
+  $state: neutral,
+  $type: radio) {
+  @include generic-input($state,$type);
+  display: inline-block;
+  margin: 0.25rem;
+}
+
+// margin: 0;
+// gap: 1rem;
+
+// &:not(:first-of-type) {
+//   margin-top: 1rem;
+// }

package/helpers/mixins/input/_status.scss

@@ -0,0 +1,18 @@
+@mixin status-input($type,$color) {
+  input[type=#{$type}] {
+    @include focus {
+      &:checked ~ label {
+        @include single-box(map-get($color, base), 0.0625rem);
+        border: 1px solid map-get($color, base);
+        background-color: map-get($color, fade);
+        color: map-get($color, base);
+      }
+    }
+
+    &:checked ~ label {
+      border: 1px solid map-get($color, base);
+      background-color: map-get($color, fade);
+      color: map-get($color, base);
+    }
+  }
+}

package/helpers/mixins/input/_text.scss

@@ -0,0 +1,7 @@
+
+@mixin all-text-inputs {
+  border: solid $border-width $c-border-strong;
+  padding: 0.875rem 0.875rem 0.75rem;
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;  
+}

package/helpers/variables/colors/index.scss

@@ -1,9 +1,9 @@
-@import "grey.scss";
-@import "brand.scss";
-@import "docs.scss";
-@import "status.scss";
-@import "wgp.scss";
-@import "power.scss";
-@import "llf.scss";
+@import "grey";
+@import "brand";
+@import "docs";
+@import "status";
+@import "wgp";
+@import "power";
+@import "llf";
 
-@import "layout.scss";
+@import "layout";

package/helpers/variables/index.scss

@@ -1,5 +1,5 @@
 // paths more explicit for gulp-sass
-@import "colors/index.scss";
-@import "layout.scss";
-@import "breakpoints.scss";
-@import "typography.scss";
+@import "colors/index";
+@import "layout";
+@import "breakpoints";
+@import "typography";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.5.0",
+  "version": "1.5.4",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_checkbox-group.scss

@@ -2,84 +2,18 @@
 .checkbox-group {
   
   .custom-control {
-    position: relative;
+    @include checkbox-input;
 
     &:not(:last-of-type) {
       margin-bottom: 0.5rem;
-    }
-  
-    input[type=checkbox] {
-      $size: 0.875rem;
-      position: absolute;
-      cursor: pointer;
-      height: $size;
-      margin: auto;
-      width: $size;
-      right: auto;
-      z-index: 3;
-      left: 1rem;
-      bottom: 0;
-      top: 0;
-
-      @mixin focus_colors {
-        background-color: $c-status-neutral-fade;
-        border: 1px solid $c-status-neutral;
-        color: $c-status-neutral;
-      }
-
-      &:hover, &[data-focus-visible-added] {
-        &:focus {
-          box-shadow: none; 
-          outline: none; 
-        }
-        
-        ~ label {
-          @include single-box($c-grey-steel, 0.0625rem);
-          border: 1px solid $c-grey-steel;
-          background-color: $c-grey-alpine;
-        }
-
-        &:checked ~ label {
-          @include focus_colors;
-          @include single-box($c-status-neutral, 0.0625rem);
-        }
-      }
-
-      &:checked ~ label {
-        @include focus_colors;
-      }
-    }
-  
-    label {
-      padding: 0.875rem 0.75rem 0.625rem 2.5rem;
-      border: 1px solid $c-grey-concrete;
-      border-radius: $border-radius-lg;
-      background-color: $white;  
-      color: $c-grey-night;
-      cursor: pointer;
-    }
+    }    
   }
 }
 
 @each $status, $color in $statees {
   @if $status != 'neutral' {
     .checkbox-group.#{$status} {
-      input[type=checkbox] {
-        &:hover, &[data-focus-visible-added] {
-          &:checked ~ label {
-            @include single-box(map-get($color, base), 0.0625rem);
-            border: 1px solid map-get($color, base);
-            background-color: map-get($color, fade);
-            color: map-get($color, base);
-          }
-        }
-  
-        &:checked ~ label {
-          border: 1px solid map-get($color, base);
-          background-color: map-get($color, fade);
-          color: map-get($color, base);
-        }
-      }
+      @include status-input(checkbox,$color);
     }    
   }
 }

package/scss/_checkbox.scss

@@ -1,57 +1,6 @@
 
 .checkbox {
-  position: relative;
-  display: grid;
-
-  input[type=checkbox] {
-    $size: 0.875rem;
-    position: absolute;
-    cursor: pointer;
-    height: $size;
-    margin: auto;
-    width: $size;
-    right: auto;
-    z-index: 3;
-    left: 1rem;
-    bottom: 0;
-    top: 0;
-
-    @mixin focus_colors {
-      background-color: $c-status-neutral-fade;
-      border: 1px solid $c-status-neutral;
-      color: $c-status-neutral;
-    }
-
-    &:hover, &[data-focus-visible-added] {
-      &:focus {
-        box-shadow: none; 
-        outline: none; 
-      }
-      
-      ~ label {
-        @include single-box($c-grey-steel, 0.0625rem);
-        border: 1px solid $c-grey-steel;
-        background-color: $c-grey-alpine;
-      }
-      &:checked ~ label {
-        @include focus_colors;
-        @include single-box($c-status-neutral, 0.0625rem);
-      }
-    }
-
-    &:checked ~ label {
-      @include focus_colors;
-    }
-  }
-
-  label {
-    padding: 0.875rem 0.75rem 0.625rem 2.5rem;
-    border: 1px solid $c-grey-concrete;
-    border-radius: $border-radius-lg;
-    background-color: $white;  
-    color: $c-grey-night;
-    cursor: pointer;
-  }
+  @include checkbox-input;
 }
 
 @each $status, $color in $statees {

package/scss/_custom-select.scss

@@ -1,8 +1,3 @@
 .custom-select {
-  background-color: $c-grey-alpine;
-  border-color: $c-grey-concrete;
-  border-radius: $border-radius;
-  padding: 0.75rem 0.5rem;
-  color: $c-grey-night;
-  width: 100%;
+  @include input-dropdown;
 }

package/scss/_input.scss

@@ -1,10 +1,4 @@
 
-@mixin input-focus {
-  @include single-box($c-grey-steel, 0.0625rem);
-  border: 1px solid $c-grey-steel;
-  background-color: $c-grey-alpine;
-}
-
 .form-control {
   @include focus {
     @include input-focus;

package/scss/_radio-group.scss

@@ -1,83 +1,16 @@
 
-$margin-radio: 0.25rem;
-
 .radio-group {
-  margin: -$margin-radio;
+  @include radio-group;
 }
 
 .custom-radio {
-  display: inline-block;
-  margin: $margin-radio;
-  position: relative;
-  padding: 0;
-
-  input[type=radio] {
-    $size: 0.875rem;
-    position: absolute;
-    cursor: pointer;
-    height: $size;
-    margin: auto;
-    width: $size;
-    right: auto;
-    z-index: 3;
-    left: 1rem;
-    bottom: 0;
-    top: 0;
-
-    @mixin focus_colors {
-      background-color: $c-status-neutral-fade;
-      border: 1px solid $c-status-neutral;
-      color: $c-status-neutral;
-    }
-
-    @include focus {
-      ~ label {
-        @include single-box($c-grey-steel, 0.0625rem);
-        border: 1px solid $c-grey-steel;
-        background-color: $c-grey-alpine;
-      }
-      
-      &:checked ~ label {
-        @include focus_colors;
-        @include single-box($c-status-neutral, 0.0625rem);
-      }
-    }
-
-    &:checked ~ label {
-      @include focus_colors;
-    }
-  }
-
-  label {
-    padding: 0.75rem 0.75rem 0.625rem 2.75rem;
-    border: 1px solid $c-grey-concrete;
-    border-radius: $border-radius-lg;
-    background-color: $white;  
-    color: $c-grey-night;
-    font-weight: 400;
-    cursor: pointer;
-  }
+  @include radio-input;
 }
 
 @each $status, $color in $statees {
   @if $status != 'neutral' {
     .radio-group.#{$status} {
-      input[type=radio] {
-        @include focus {
-          &:checked ~ label {
-            @include single-box(map-get($color, base), 0.0625rem);
-            border: 1px solid map-get($color, base);
-            background-color: map-get($color, fade);
-            color: map-get($color, base);
-          }
-        }
-  
-        &:checked ~ label {
-          border: 1px solid map-get($color, base);
-          background-color: map-get($color, fade);
-          color: map-get($color, base);
-        }
-      }
+      @include status-input(radio,$color);
     }
   }
 }

package/scss/card/index.scss

@@ -1,12 +1,12 @@
 
-@import "confirm.scss";
-@import "login.scss";
-@import "password.scss";
-@import "account.scss";
-@import "video-help.scss";
-@import "related.scss";
-@import "block.scss";
-@import "membership.scss";
+@import "confirm";
+@import "login";
+@import "password";
+@import "account";
+@import "video-help";
+@import "related";
+@import "block";
+@import "membership";
 
 .card {
   border: 1px solid $c-grey-pearl;

package/scss/index.scss

@@ -2,33 +2,33 @@
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
-@import "../helpers/index.scss";
-
-@import "app.scss";
-@import "header.scss";
-@import "main.scss";
-@import "footer.scss";
-@import "klaro.scss";
-@import "fonts.scss";
-@import "loading-animation.scss";
-@import "close-icon.scss";
-@import "table/index.scss";
-@import "promo.scss";
+@import "../helpers/index";
+
+@import "app";
+@import "header";
+@import "main";
+@import "footer";
+@import "klaro";
+@import "fonts";
+@import "loading-animation";
+@import "close-icon";
+@import "table/index";
+@import "promo";
 
 // bootstrap component styles
-@import "btn.scss";
-@import "card/index.scss";
-@import "card-group.scss";
-@import "checkbox.scss";
-@import "checkbox-group.scss";
-@import "custom-select.scss";
-@import "form.scss";
-@import "list.scss";
-@import "input.scss";
-@import "radio-group.scss";
+@import "btn";
+@import "card/index";
+@import "card-deck";
+@import "checkbox";
+@import "checkbox-group";
+@import "custom-select";
+@import "form";
+@import "list";
+@import "input";
+@import "radio-group";
 
 // atomic helper styles
-@import "atomic.scss";
+@import "atomic";
 
 body {
   line-height: $line-height-md;

package/scss/table/index.scss

@@ -1,13 +1,13 @@
 
-@import "tickets.scss";
-@import "basket.scss";
-@import "section.scss";
-@import "orders.scss";
-@import "details.scss";
-@import "preferences.scss";
-@import "etickets.scss";
-@import "membership.scss";
-@import "gifts.scss";
+@import "tickets";
+@import "basket";
+@import "section";
+@import "orders";
+@import "details";
+@import "preferences";
+@import "etickets";
+@import "membership";
+@import "gifts";
 
 table {
   border-spacing: 0;