barbican-reset 1.0.1 → 1.0.5

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/index.js

@@ -2,17 +2,16 @@ 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'
 
 export { 
   LoadingAnimation, 
@@ -23,11 +22,10 @@ export {
   Wrap,
   Card,
   Carousel,
+  Banner,
   AccountCard,
   AccountTitle,
   Placeholder,
   LoginForm,
-  FormRow,
-  EventSummary,
-  Block
+  FormRow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.0.1",
+  "version": "1.0.5",
   "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/_atomic.scss

@@ -5,8 +5,4 @@
 
 .margin-top-2 {
   margin-top: 2rem;
-}
-
-.margin-bottom-1 {
-  margin-bottom: 1rem;
 }

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/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/form_row.vue

@@ -1,6 +1,8 @@
 <template>
   <div :class="$style.container">
-    <label v-if="label" :for="id">{{ label }}</label>
+    <label v-if="label" :for="id">
+      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
+    </label>
     <div :class="styleContent">
       <slot />
     </div>
@@ -17,6 +19,12 @@
       id: {
         type: String
       },
+      required: {
+        type: Boolean
+      },
+      optional: {
+        type: Boolean
+      }
     },
     computed: {
       styleContent() {
@@ -29,9 +37,9 @@
 <style lang="scss" module>
 
 .container {
+  gap: $gap-account;
   display: grid;
-  gap: 0.5rem;
-
+  
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
@@ -41,6 +49,10 @@
     align-items: center;
   }
 
+  label {
+    font-weight: normal;
+  }
+
   input {
     margin: 0;
   }

package/helpers/mixins/_buttons.scss

@@ -1,187 +0,0 @@
-////
-/// @group buttons
-////
-
-/// Set button colours.
-/// @param {color} $text - Text colour
-/// @param {color} $bg - Background colour
-/// @param {color} $border [null] - Border colour
-/// @param {color} $text-hover [$text] - Text hover colour
-/// @param {color} $bg-hover [darken($bg, 10%)] - Background hover colour
-/// @output `color`, `background-color` plus `:active`, `:visited`, `:hover` & `:focus` pseudo-classes.
-
-@mixin button_setup($gap: 1em) {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  border-radius: $border-radius-lg;
-  padding: $gap ($gap * 1.5);
-  text-decoration: none;
-  display: inline-flex;
-  place-items: center;
-  text-align: center;
-  gap: $gap * 0.75;
-  font-weight: 700;
-  transition: none;
-  cursor: pointer;
-  line-height: 1;
-}
-
-@mixin button_solid(
-  $background: $c-brand-orange, 
-  $color: $white, 
-  $gap: 1em) {
-  @include button_setup($gap);  
-  border: 1px solid $background;
-  background-color: $background;
-  color: $color;
-
-  @include focus {
-    @include double-box($color, $background);
-    border: 1px solid $background;
-    background-color: $background;
-    color: $color;
-  }
-}
-
-@mixin button_outline(
-  $background: $c-brand-orange,
-  $color: $white, 
-  $gap: 1em) {
-  @include button_setup($gap);
-  border: 1px solid $background;
-  background-color: $color;
-  color: $background;
-
-  @include focus {
-    border: 1px solid $background;
-    background-color: $background;
-    color: $color;
-  }
-}
-
-@mixin btn-colors(
-  $text,
-  $bg,
-  $border: null,
-  $text-hover: $text,
-  $bg-hover: darken($bg, 7%),
-  $border-hover: $border
-) {
-  @if ($border != null) {
-    border-color: $border;
-  }
-
-  path {
-    fill: $text;
-  }
-
-  &,
-  &:active,
-  &:visited {
-    background-color: $bg;
-    color: $text;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: $bg-hover;
-    border-color: $border-hover;
-    color: $text-hover;
-    box-shadow: none;
-    outline: none;
-
-    path {
-      fill: $text-hover;
-    }
-  }
-}
-
-/// Base button styles.
-@mixin btn-base {
-  @include btn-colors($c-list-btn-default...);
-  @include font-smoothing(on);
-  transition: background 0.15s ease-out;
-  border-radius: $border-radius;
-  line-height: $line-height-lg;
-  font-size: $font-size-base;
-  display: inline-block;
-  font-family: inherit;
-  border-style: solid;
-  padding: 0.75em 1em;
-  text-align: center;
-  overflow: visible;
-  font-weight: bold;
-  border-width: 0;
-  cursor: pointer;
-  margin: 0;
-
-  svg {
-    vertical-align: middle;
-  }
-
-  &,
-  &:hover,
-  &:active,
-  &:focus,
-  &:visited {
-    text-decoration: none;
-  }
-}
-
-// Style variants
-// (use in addition to btn-base)
-
-/// Add a visible border to a button.
-/// @param {string} $border-width [1px] - Border width in px
-/// @param {string} $padding-v [12px] - Vertical padding in px
-/// @param {string} $padding-h [16px] - Horizontal padding in px
-
-@mixin btn-border($border-width: 1px, $padding-v: 12px, $padding-h: 16px) {
-  padding: $padding-v - $border-width $padding-h - $border-width;
-  border-width: $border-width;
-  transition: none;
-
-  &:focus {
-    box-shadow: none;
-  }
-}
-
-@mixin btn-primary {
-  @include button_solid;
-}
-
-@mixin btn-outline-primary {
-  @include button_outline;
-}
-
-@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-expand {
-  display: block;
-}
-
-@mixin btn-slim {
-  padding: 0.5rem 0.75rem;
-}

package/scss/_btn.scss

@@ -1,36 +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-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;
-  }
-
-  // button modifyers
-  &.expand {
-    @include btn-expand;
-  }
-  &.slim {
-    @include btn-slim;
-  }
-}

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>