barbican-reset 1.0.4 → 1.0.8

package/helpers/mixins/_content.scss

@@ -42,11 +42,4 @@
   &:focus {
     background-color: $background;
   }
-}
-
-@mixin card-container {
-  border-radius: $border-radius-lg;
-  background-color: $white;
-  padding: $gap-power;
-  overflow: hidden;
 }

package/helpers/mixins/_core.scss

@@ -22,4 +22,63 @@
 @mixin set-appearance($value: none) {
   -webkit-appearance: $value;
   -moz-appearance: $value;
+}
+
+@mixin button(
+  $background: $c-brand-orange, 
+  $focus: $c-brand-orange-dark, 
+  $gap: 1em) {
+  
+  $color: $white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: $border-radius-lg;
+  background-color: $background;
+  padding: $gap ($gap * 1.5);
+  text-decoration: none;
+  place-items: center;
+  text-align: center;
+  font-weight: 700;
+  transition: none;
+  gap: $gap * 0.75;
+  cursor: pointer;
+  line-height: 1;
+  display: flex;
+  color: $color;
+
+  @include focus {
+    @include double-box($color, $focus);
+    background-color: $focus;
+    color: $color;
+  }
+}
+
+@mixin button_outline(
+  $background: $c-brand-orange, 
+  $focus: $c-brand-orange-dark, 
+  $gap: 1em) {
+  
+  $color: $white;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: $border-radius-lg;
+  border: 1px solid $background;
+  padding: $gap ($gap * 1.5);
+  background-color: $color;
+  text-decoration: none;
+  place-items: center;
+  text-align: center;
+  color: $background;
+  font-weight: 700;
+  transition: none;
+  gap: $gap * 0.75;
+  cursor: pointer;
+  line-height: 1;
+  display: flex;
+
+  @include focus {
+    border: 1px solid $focus;
+    background-color: $focus;
+    color: $color;
+  }
 }

package/helpers/mixins/index.scss

@@ -1,6 +1,5 @@
 // paths more explicit for gulp-sass
 @import "~bourbon/core/bourbon.scss";
-@import "buttons.scss";
 @import "content.scss";
 @import "core.scss";
 @import "focus.scss";

package/helpers/variables/colors/_layout.scss

@@ -4,12 +4,12 @@ $c-list-btn-default:       $white, $c-grey-night, $white;
 $c-list-btn-primary:       $white, $c-brand-orange, null, null, $c-brand-orange-dark;
 $c-list-btn-primary-alt:   $white, $c-status-neutral;
 $c-list-btn-secondary:     $c-brand-orange, $white, $c-brand-orange, $c-brand-orange-dark, $c-brand-orange-light, $c-brand-orange-dark;
-$c-list-secondary_outline: $c-brand-orange, $white, $c-brand-orange, $white, $c-brand-orange;
+$c-list-btn-secondary-alt: $c-brand-orange, $white, $c-brand-orange, $white, $c-brand-orange;
 $c-list-btn-outline:       $c-grey-night, $c-grey-alpine, $c-grey-night, $c-grey-alpine, $c-grey-night;
 $c-list-btn-light:         $c-grey-night, $white;
 
-$c-list-btn-cinema:   $white, $c-brand-cinema, null, null, $c-brand-cinema-dark;
-$c-list-btn-outline-cinema: $c-brand-cinema, $white, $c-brand-cinema, $c-brand-cinema-dark, $c-status-success-fade, $c-brand-cinema-dark;
+$c-list-btn-primary-cinema:   $white, $c-brand-cinema, null, null, $c-brand-cinema-dark;
+$c-list-btn-secondary-cinema: $c-brand-cinema, $white, $c-brand-cinema, $c-brand-cinema-dark, $c-status-success-fade, $c-brand-cinema-dark;
 
 $c-list-btn-primary-power:   $white, $c-power-blue, null, null, $c-power-blue-dark;
 

package/helpers/variables/layout/index.scss

@@ -6,13 +6,10 @@ $constrained_content_width--wide: 1200px;
 $space: 0.625rem;
 // Default large amount of space.
 $space--large: $space * 3;
-$border-radius-lg: 0.375rem;
-
-// Basket layout
-$gap-basket: 0.625rem;
+// Default gap value for use in CSS grid.
+$grid-gap: $space;
 
-// Seat Selection
-$gap-instance: 1.5rem;
+$border-radius-lg: 0.375rem;
 
 // Account Area
 $gap-account: 2rem;

package/icons/index.js

@@ -1,13 +1,13 @@
 import BarbicanLogo from '../vue/Icons/Barbican'
 import CityOfLondonLogo from '../vue/Icons/CityOfLondon'
 import ArrowIcon from '../vue/Icons/ArrowIcon'
-import BackArrow from '../vue/Icons/back_arrow.vue'
-import CartIcon from '../vue/Icons/cart.vue'
+import BackArrow from '../vue/Icons/back_arrow'
+import WheelchairIcon from '../vue/Icons/wheelchair'
 
 export {
   BarbicanLogo,
   CityOfLondonLogo,
   ArrowIcon,
   BackArrow,
-  CartIcon
+  WheelchairIcon
 };

package/index.js

@@ -2,17 +2,17 @@ import LoadingAnimation from './vue/LoadingAnimation'
 import Notification from './vue/Notification'
 import RelatedTitle from './vue/RelatedTitle'
 import TypeText from './vue/TypeText'
+import Container from './vue/Container'
 import Wrap from './vue/Wrap'
+import Card from './vue/Card'
 import Carousel from './vue/Carousel'
+import Banner from './vue/Banner'
 import AccountCard from './vue/Account/Card'
 import AccountTitle from './vue/Account/Title'
 import Placeholder from './vue/Placeholder'
 import LoginForm from './vue/Login/Form'
 import FormRow from './vue/form_row'
-import Container from './vue/container'
-import EventSummary from './vue/event_summary'
-import Card from './vue/card'
-import Block from './vue/block'
+import TableRow from './vue/table_row'
 
 export { 
   LoadingAnimation, 
@@ -23,11 +23,11 @@ export {
   Wrap,
   Card,
   Carousel,
+  Banner,
   AccountCard,
   AccountTitle,
   Placeholder,
   LoginForm,
   FormRow,
-  EventSummary,
-  Block
+  TableRow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "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

@@ -1,11 +1,12 @@
 
 .checkbox-group {
-  row-gap: 0.5rem;
-  display: grid;
   
   .custom-control {
     position: relative;
-    display: grid;
+
+    &:not(:last-of-type) {
+      margin-bottom: 0.5rem;
+    }
   
     input[type=checkbox] {
       $size: 0.875rem;
@@ -14,37 +15,47 @@
       height: $size;
       margin: auto;
       width: $size;
-      bottom: 0;
-      top: 0;
       right: auto;
+      z-index: 3;
       left: 1rem;
+      bottom: 0;
+      top: 0;
 
       @mixin focus_colors {
-        border: 1px solid $c-status-neutral-light;
         background-color: $c-status-neutral-fade;
+        border: 1px solid $c-status-neutral;
         color: $c-status-neutral;
       }
 
-      @include focus {
-        z-index: 3;
+      &: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;
+        }
 
-        + label {
+        &:checked ~ label {
           @include focus_colors;
-          @include double-box($white, $c-status-neutral-light, 0.5rem);
+          @include single-box($c-status-neutral, 0.0625rem);
         }
       }
-  
-      &:checked + label {
+
+      &: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;
-      padding: 14px 12px 10px 40px;
-      border: 1px solid #b8b8b8;
       background-color: $white;  
-      color: #4d4d4d;
+      color: $c-grey-night;
       cursor: pointer;
     }
   }
@@ -53,25 +64,21 @@
 @each $status, $color in $statees {
   @if $status != 'neutral' {
     .checkbox-group.#{$status} {
-      .custom-control {
-        input[type=checkbox] {
-          @include focus {
-            z-index: 3;
-
-            + label {
-              @include double-box($white, map-get($color, light), 0.5rem);
-              border: 1px solid map-get($color, light);
-              background-color: map-get($color, fade);
-              color: map-get($color, base);
-            }
-          }
-    
-          &:checked + label {
-            border: 1px solid map-get($color, light);
+      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);
+        }
       }
     }    
   }

package/scss/_checkbox.scss

@@ -10,37 +10,46 @@
     height: $size;
     margin: auto;
     width: $size;
-    bottom: 0;
-    top: 0;
     right: auto;
+    z-index: 3;
     left: 1rem;
+    bottom: 0;
+    top: 0;
 
     @mixin focus_colors {
-      border: 1px solid $c-status-neutral-light;
       background-color: $c-status-neutral-fade;
+      border: 1px solid $c-status-neutral;
       color: $c-status-neutral;
     }
 
-    @include focus {
-      z-index: 3;
-
-      + label {
+    &: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 double-box($white, $c-status-neutral-light, 0.5rem);
+        @include single-box($c-status-neutral, 0.0625rem);
       }
     }
 
-    &:checked + label {
+    &: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;
-    padding: 14px 12px 10px 40px;
-    border: 1px solid #b8b8b8;
     background-color: $white;  
-    color: #4d4d4d;
+    color: $c-grey-night;
     cursor: pointer;
   }
 }
@@ -49,23 +58,21 @@
   @if $status != 'neutral' {
     .checkbox.#{$status} {
       input[type=checkbox] {
-        @include focus {
-          z-index: 3;
-
-          + label {
-            @include double-box($white, map-get($color, light), 0.5rem);
-            border: 1px solid map-get($color, light);
+        &: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);
+        }
       }
-      
-      &:checked + label {
-        border: 1px solid map-get($color, light);
-        background-color: map-get($color, fade);
-        color: map-get($color, base);
-      }
-    }
+    }    
   }
 }

package/scss/_input.scss

@@ -0,0 +1,10 @@
+
+.form-control {
+  &:hover, &:focus, &[data-focus-visible-added] {
+    outline: none;
+    
+    @include single-box($c-grey-steel, 0.0625rem);
+    border: 1px solid $c-grey-steel;
+    background-color: $c-grey-alpine;
+  }
+}

package/scss/_radio-group.scss

@@ -0,0 +1,87 @@
+
+$margin-radio: 0.25rem;
+
+.radio-group {
+  margin: -$margin-radio;
+}
+
+.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;
+    }
+    
+    &: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.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;
+    cursor: pointer;
+  }
+}
+
+@each $status, $color in $statees {
+  @if $status != 'neutral' {
+    .radio-group.#{$status} {
+      input[type=radio] {
+        &: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);
+        }
+      }
+    }
+  }
+}

package/scss/index.scss

@@ -11,9 +11,10 @@
 @import "close-icon.scss";
 
 // bootstrap component styles
-@import "btn.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
+@import "radio-group.scss";
+@import "input.scss";
 
 // atomic helper styles
 @import "atomic.scss";

package/vue/Banner/banner.scss

@@ -0,0 +1,8 @@
+
+.outer {
+  @include content_masthead;
+}
+
+.inner {
+  @include content_masthead__inner;
+}

package/vue/Banner/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div :class="$style.outer">
+    <div :class="$style.inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style src="./banner.scss" lang="scss" module></style>

package/vue/Card/card.scss

@@ -0,0 +1,24 @@
+
+.container {
+  border-radius: $border-radius-lg;
+  border: 1px solid $c-grey-pearl;
+  background-color: $white;
+  align-content: start;
+  overflow: hidden;
+  padding: 1.25rem;
+  display: grid;
+  gap: 1.25rem;
+}
+
+.container.wrap {
+  background-color: $gray-100;
+}
+
+.container.account {
+  padding: $gap-account;
+  display: block;
+
+  &:not(:last-of-type) {
+    margin-bottom: $gap-account;
+  }
+}

package/vue/{card.vue → Card/index.vue}

@@ -1,6 +1,6 @@
 <template>
   <div :class="styleContainer">
-    <slot />
+    <slot></slot>
   </div>
 </template>
 
@@ -31,29 +31,4 @@ export default {
 }
 </script>
 
-<style lang="scss" module>
-
-@import "../helpers/mixins";
-
-.container {
-  @include card-container;
-  border: 1px solid $c-grey-pearl;
-  align-content: start;
-  display: grid;
-  gap: 1.25rem;
-}
-
-.container.wrap {
-  background-color: $gray-100;
-}
-
-.container.account {
-  padding: $gap-account;
-  display: block;
-
-  &:not(:last-of-type) {
-    margin-bottom: $gap-account;
-  }
-}
-
-</style>
+<style src="./card.scss" lang="scss" module></style>

package/vue/Container/container.scss

@@ -0,0 +1,20 @@
+
+.outer {
+  padding-right: 5%;
+  padding-left: 5%;
+}
+
+.outer_splash {
+  padding-right: 10%;
+  padding-left: 10%;  
+}
+
+.inner {
+  max-width: $constrained_content_width--wide;
+  padding: 1.5rem 0;
+  margin: 0 auto;
+
+  @include media-breakpoint-up(sm) {
+    padding: 2.5rem 0;
+  }
+}

package/vue/Container/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div :class="styleOuter">
+    <div :class="$style.inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    splash : {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    styleOuter() {
+      return this.splash ? this.$style.outer_splash : this.$style.outer;
+    }
+  }
+}
+</script>
+
+<style src="./container.scss" lang="scss" module></style>

package/vue/Icons/wheelchair.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 4C8.10457 4 9 3.10457 9 2C9 0.89543 8.10457 0 7 0C5.89543 0 5 0.89543 5 2C5 3.10457 5.89543 4 7 4Z" fill="black"/>
+    <path d="M14 11V9.00001C12.46 9.02001 10.91 8.25001 9.93 7.17001L8.64 5.74001C8.47 5.55001 8.26 5.40001 8.03 5.29001C8.02 5.29001 8.02 5.28001 8.01 5.28001H8C7.65 5.08001 7.25 4.98001 6.81 5.02001C5.76 5.11001 5 6.04001 5 7.09001V13C5 14.1 5.9 15 7 15H12V20H14V14.5C14 13.4 13.1 12.5 12 12.5H9V9.05001C10.29 10.12 12.25 10.99 14 11ZM5 18C3.34 18 2 16.66 2 15C2 13.69 2.84 12.59 4 12.17V10.1C1.72 10.56 0 12.58 0 15C0 17.76 2.24 20 5 20C7.42 20 9.44 18.28 9.9 16H7.83C7.42 17.16 6.31 18 5 18Z" fill="black"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'WheelchairIcon'
+}
+</script>

package/vue/Notification/external.scss

@@ -10,14 +10,18 @@
   }
 }
 
-.btn-link {
+.btn-link, a {
   @include status_focus;
 }
 
-.error .btn-link {
-  @include status_focus($c-status-error, $c-status-error-fade);
+.error {
+  .btn-link, a {
+    @include status_focus($c-status-error, $c-status-error-fade);
+  }
 }
 
-.success .btn-link {
-  @include status_focus($c-status-success, $c-status-success-fade);
+.success {
+  .btn-link, a {
+    @include status_focus($c-status-success, $c-status-success-fade);
+  }
 }

package/vue/Notification/index.vue

@@ -2,6 +2,7 @@
   <div :class="styleContainer">
     <div :class="styleWrap">
       <span>
+        <div :class="$style.title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
       <button v-if="toggle" :class="$style.button" @click="() => $emit('close')">
@@ -42,6 +43,10 @@ export default {
     margin: {
       type: String,
       default: null
+    },
+    title: {
+      type: String,
+      default: ''
     }
   },
   computed: {

package/vue/Notification/notification.scss

@@ -50,7 +50,7 @@ $error-colors: $c-status-error, $c-status-error-fade;
 .wrap {
   background-color: $c-status-neutral-fade;
   border-color: $c-status-neutral-light;
-  border-radius: $border-radius-lg;
+  border-radius: $border-radius;
   border-width: $border-width;
   color: $c-status-neutral;
   border-style: solid;
@@ -118,4 +118,9 @@ $error-colors: $c-status-error, $c-status-error-fade;
   &.success {
     @include icon($success-colors...);
   }
+}
+
+.title {
+  margin-bottom: 0.25rem;
+  font-weight: 700;
 }

package/vue/form_row.vue

@@ -37,9 +37,7 @@
 <style lang="scss" module>
 
 .container {
-  gap: $gap-account;
-  display: grid;
-  
+
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
@@ -47,10 +45,16 @@
   @include media-breakpoint-up(sm) {
     grid-template-columns: 33fr 67fr;
     align-items: center;
+    gap: $gap-account;
+    display: grid;
   }
 
   label {
     font-weight: normal;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
   }
 
   input {
@@ -64,4 +68,4 @@
   }
 }
 
-</style>
+</style>

package/vue/table_row.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :class="styleRow" :style="`grid-template-columns: ${columns};`">
+    <slot></slot>
+  </div>  
+</template>
+
+<script>
+export default {
+  name: 'TableRow',
+  props: {
+    header: {
+      type: Boolean,
+      default: false
+    },
+    columns: {
+      type: String
+    },
+    mobile: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    styleRow() {
+      if (this.header) {
+        if (this.mobile) {
+          return this.$style.mobile_header_row;
+        } else {
+          return this.$style.header_row;
+        }
+      } else {
+        if (this.mobile) {
+          return this.$style.mobile_row;
+        } else {
+          return this.$style.row;
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.row {
+  border: 1px solid $input-border-color;
+  grid-auto-flow: column;
+  margin-top: 0.625rem;
+  display: grid;
+
+  > div {
+    padding: 0.5rem 0.75rem;
+
+    &:not(:last-of-type) {
+      border-right: 1px solid $input-border-color;
+    }
+
+    > label {
+      font-size: $font-size-lg;
+      font-weight: 700;
+      display: none;
+    }
+  }
+}
+
+.mobile_row {
+  composes: row;
+
+  @include media-breakpoint-down(md) {
+    border-radius: $border-radius-lg;
+    display: block;
+
+    > div:not(:last-of-type) {
+      border-right: none;
+    }
+  }
+}
+
+.header_row {
+  composes: row;
+  background-color: $c-grey-alpine;
+  font-weight: 700;
+  margin-top: 0;
+}
+
+.mobile_header_row {
+  composes: header_row;
+
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+}
+
+</style>

package/helpers/mixins/_buttons.scss

@@ -1,120 +0,0 @@
-
-@mixin button_setup(
-  $pad: 1em, 
-  $line: 1,
-  $flex: false) {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border-radius: $border-radius-lg;
-  text-decoration: none;
-  line-height: $line;
-  text-align: center;
-  font-weight: 700;
-  transition: none;
-  cursor: pointer;
-  padding: $pad;
-
-  @if $flex {
-    display: inline-flex;
-    align-items: center;
-    gap: $pad * 0.625;
-  } @else {
-    vertical-align: middle;
-    display: inline-block;
-
-    > * {
-      vertical-align: middle;
-      display: inline-block;
-    }
-  }
-}
-
-@mixin button_solid(
-  $background: $c-brand-orange, 
-  $color: $white, 
-  $border: 1px,
-  $pad: 1em,
-  $line: 1,
-  $flex: false) {
-  @include button_setup($pad, $line, $flex);  
-  border: $border solid $background;
-  background-color: $background;
-  color: $color;
-
-  @include focus {
-    @include double-box($color, $background);
-    border: $border solid $background;
-    background-color: $background;
-    color: $color;
-  }
-}
-
-@mixin button_outline(
-  $color: $c-brand-orange,
-  $background: $white, 
-  $pad: 1em,
-  $border: 1px,
-  $line: 1,
-  $flex: false) {
-  @include button_setup($pad, $line, $flex);
-  border: $border solid $color;
-  background-color: $background;
-  color: $color;
-
-  @include focus {
-    border: $border solid $color;
-    background-color: $color;
-    color: $background;
-  }
-}
-
-@mixin btn-primary {
-  @include button_solid;
-}
-
-@mixin btn-outline-primary {
-  @include button_outline;
-}
-
-@mixin btn-outline-header {
-  @include button_outline(
-    $color: $white, 
-    $background: $c-brand-orange,
-    $border: 0.125rem,
-    $flex: true);
-}
-
-@mixin btn-secondary {
-  @include button_solid($c-grey-night);
-}
-
-@mixin btn-outline-secondary {
-  @include button_outline($c-grey-night);
-}
-
-@mixin btn-cinema {
-  @include button_solid($c-brand-cinema);
-}
-
-@mixin btn-power {
-  @include button_solid($c-power-blue);
-}
-
-@mixin btn-info {
-  @include button_solid($c-status-neutral);
-}
-
-@mixin btn-outline-cinema {
-  @include button_outline($c-brand-cinema);
-}
-
-@mixin btn-remove {
-  @include button_solid(
-    $background: $c-grey-night,
-    $pad: 0.625rem,
-    $line: 1.375);
-}
-
-@mixin btn-expand {
-  display: block;
-}

package/scss/_btn.scss

@@ -1,49 +0,0 @@
-.btn {
-  @include button_setup;
-
-  &.btn-primary {
-    // solid orange
-    @include btn-primary;
-  }
-
-  &.btn-outline-primary {
-    // orange outline, fill on focus
-    @include btn-outline-primary;
-  }
-
-  &.btn-outline-header {
-    // orange outline, fill on focus
-    @include btn-outline-header;
-  }
-
-  &.btn-info {
-    // solid blue
-    @include btn-info;
-  }
-
-  &.btn-secondary {
-    // solid grey
-    @include btn-secondary;
-  }
-
-  &.btn-outline-secondary {
-    // grey outline, fill on focus
-    @include btn-outline-secondary;
-  }
-
-  &.btn-remove {
-    // solid grey, slim
-    @include btn-remove;
-  }
-
-  // modifyers
-  &.expand {
-    @include btn-expand;
-  }
-}
-
-input[type="number"] {
-  @include focus {
-    @include double-box($white, $c-grey-steel);
-  }
-}

package/vue/Icons/cart.vue

@@ -1,5 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="-89 91 20 19">
-    <path d="M-69 91.7c-.1-.3-.3-.5-.5-.6s-.5-.2-.8-.1l-3 1c-.4.1-.7.4-.7.9l-.2 1.7-13.8 1.5c-.3.1-.6.2-.7.4-.2.2-.2.5-.2.8l.9 4.7c.1.6.4.9 1 .9h12.1l.2 1.4h-11.6c-.3 0-.5.1-.7.3s-.3.4-.3.7c0 .3.1.5.3.7s.4.3.7.3h12.9c.3 0 .6-.2.8-.4.2-.2.3-.5.2-.8l-.6-3 .8-8.3 2.5-.8c.6-.2.8-.7.7-1.3zm-4.4 16.7c0-.4-.2-.8-.5-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1 0 .4.2.8.5 1.1.3.3.7.5 1.1.5.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1zm-9.5 0c0-.4-.2-.8-.5-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1 0 .4.2.8.5 1.1.3.3.7.5 1.1.5.4 0 .8-.2 1.1-.5.4-.3.5-.7.5-1.1z"></path>
-  </svg>
-</template>

package/vue/block.vue

@@ -1,30 +0,0 @@
-<template>
-  <div :class="styleContainer">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    styleContainer() {
-      return this.$style.container;
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-@import "../helpers/mixins";
-
-.container {
-  @include card-container;
-  box-shadow: 0 0 0.625rem rgba($black, 0.1);
-  
-  &:not(:last-of-type) {
-    margin-bottom: $gap-basket;
-  }
-}
-
-</style>

package/vue/container.vue

@@ -1,84 +0,0 @@
-<template>
-  <div :class="styleOuter">
-    <div :class="styleInner">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    splash: {
-      type: Boolean,
-      default: false
-    },
-    masthead: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    styleOuter() {
-      if (this.splash) {
-        return this.$style.outer_splash;
-      }
-      if (this.masthead) {
-        return this.$style.outer_masthead;
-      }
-      return this.$style.outer;
-    },
-    styleInner() {
-      if (this.masthead) {
-        return this.$style.inner_masthead;
-      }
-      return this.$style.inner;
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.outer {
-  padding-right: 5%;
-  padding-left: 5%;
-}
-
-.outer_splash {
-  padding-right: 10%;
-  padding-left: 10%;  
-}
-
-.outer_masthead {
-  composes: outer;
-  box-shadow: 0 0.375rem 0.375rem rgba($black, 0.1);
-  background-color: $white;
-}
-
-.inner {
-  max-width: $constrained_content_width--wide;
-  padding-bottom: 1.5rem;
-  padding-top: 1.5rem;
-  margin: 0 auto;
-
-  @include media-breakpoint-up(sm) {
-    padding-bottom: 2.5rem;
-    padding-top: 2.5rem;
-  }
-}
-
-.inner_masthead {
-  composes: inner;
-
-  @include media-breakpoint-up(sm) {
-    padding-bottom: 3rem;
-    padding-top: 3rem;
-  }
-
-  h1 {
-    margin: 0;
-  }
-}
-
-</style>

package/vue/event_summary.vue

@@ -1,109 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <img :class="styleImage" v-bind:src="data.image" alt="" />
-    <div>
-      <div :class="$style.title">{{ data.title }}</div>
-      <div :class="$style.date_time">{{ data.date_formatted }}</div>
-      <div :class="$style.venue">{{ data.venue }}</div>
-      <router-link v-if="data.socially_distanced" :to="{ name: 'chooseSeats', params: { instanceIdShort: data.id_short } }" class="btn btn-outline-primary margin-top-1">
-        Update seat selection
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script type="text/javascript">
-export default {
-  name: "EventSummary",
-  props: {
-    data: {
-      type: Object,
-      required: true
-    },
-    basket: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    styleImage() {
-      return this.basket ? this.$style.basket_image : this.$style.seats_image; 
-    }
-  }
-};
-</script>
-
-<style lang="scss" module>
-
-@mixin title {
-  letter-spacing: $headings-letter-spacing;
-  line-height: $line-height-sm;
-}
-
-@mixin subtitle {
-  @include title;
-  font-size: $h5-font-size;
-  color: $c-text-secondary;
-  font-weight: normal;
-
-  @include media-breakpoint-up(md) {
-    font-size: $h4-font-size;
-  }
-}
-
-.container {
-  @include media-breakpoint-up(md) {
-    align-items: flex-start;
-    display: flex;
-  }
-}
-
-.image {
-  border: 1px solid $c-border-faint;
-  border-radius: $border-radius-lg;
-  max-width: 24rem;
-  width: 100%;
-
-  @include media-breakpoint-down(md) {
-    margin-bottom: $gap-instance;
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-right: $gap-instance;
-    width: 50%;
-  }
-}
-
-.seats_image {
-  composes: image;
-
-  @include media-breakpoint-up(md) {
-    max-width: 20rem;
-  }
-}
-
-.basket_image {
-  composes: image;
-
-  @include media-breakpoint-up(md) {
-    max-width: 16rem;
-  }
-}
-
-.title {
-  @include title;
-  font-weight: $headings-font-weight;
-  font-size: $h2-font-size;
-  margin-bottom: 0.75rem;
-}
-
-.date_time {
-  @include subtitle;  
-  margin-bottom: 0.25rem;
-}
-
-.venue {
-  @include subtitle;  
-}
-
-</style>