barbican-reset 0.9.9 → 1.0.3

package/helpers/mixins/_buttons.scss

@@ -0,0 +1,104 @@
+
+@mixin button_setup($gap: 1em) {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  border-radius: $border-radius-lg;
+  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;
+  padding: $gap;
+}
+
+@mixin button_solid(
+  $background: $c-brand-orange, 
+  $color: $white, 
+  $gap: 1em,
+  $border: 1px) {
+  @include button_setup($gap);  
+  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, 
+  $gap: 1em,
+  $border: 1px) {
+  @include button_setup($gap);
+  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);
+}
+
+@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,
+    $gap: 0.625rem);
+}
+
+@mixin btn-expand {
+  display: block;
+}
+
+@mixin btn-slim {
+  padding: 0.5rem 0.75rem;
+}

package/helpers/mixins/_content.scss

@@ -33,8 +33,20 @@
 }
 
 @mixin all-text-inputs {
-  background-color: lighten($c-grey-alpine, 1%);
+  $background: lighten($c-grey-alpine, 1%);
+  background-color: $background;
   border: solid $border-width $c-border-strong;
   border-radius: $border-radius-sm;
   padding: 0.8rem 0.8rem 0.6rem;
+
+  &: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,63 +22,4 @@
 @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/_focus.scss

@@ -8,18 +8,16 @@
   }  
 }
 
-@mixin focus-visible {
-  border-radius: $border-radius;
+@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;
   position: relative;
-  z-index: 999;
-}
-
-@mixin double-box($bg: $white, $col: $black, $bg_size: 0.25rem, $col_size: 0.375rem) {
-  box-shadow: 0 0 0 $bg_size $bg, 0 0 0 $col_size $col;
+  z-index: 2;
 }
 
 @mixin single-box($bg: $white, $size: 0.25rem) {
   box-shadow: 0 0 0 $size $bg;
+  position: relative;
+  z-index: 2;
 }
 
 @mixin link-focus($color: $c-grey-midnight, $border: $white) {

package/helpers/mixins/index.scss

@@ -1,5 +1,6 @@
 // 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-btn-secondary-alt: $c-brand-orange, $white, $c-brand-orange, $white, $c-brand-orange;
+$c-list-secondary_outline: $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-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-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-power:   $white, $c-power-blue, null, null, $c-power-blue-dark;
 

package/helpers/variables/colors/_status.scss

@@ -9,4 +9,22 @@ $c-status-error: hsl(0, 45%, 37%);
 
 $c-status-success-fade: hsl(120, 30%, 95%);
 $c-status-success-light: hsl(120, 30%, 75%);
-$c-status-success: hsl(120, 30%, 37%);
+$c-status-success: hsl(120, 30%, 37%);
+
+$statees : (
+  neutral : (
+    base : $c-status-neutral,
+    fade : $c-status-neutral-fade,
+    light : $c-status-neutral-light
+  ),
+  success : (
+    base : $c-status-success,
+    fade : $c-status-success-fade,
+    light : $c-status-success-light
+  ),
+  error : (
+    base : $c-status-error,
+    fade : $c-status-error-fade,
+    light : $c-status-error-light
+  ),
+);

package/helpers/variables/layout/index.scss

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

package/icons/index.js

@@ -1,9 +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'
 
 export {
   BarbicanLogo,
   CityOfLondonLogo,
   ArrowIcon,
+  BackArrow,
+  CartIcon
 };

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "0.9.9",
+  "version": "1.0.3",
   "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,4 +5,8 @@
 
 .margin-top-2 {
   margin-top: 2rem;
+}
+
+.margin-bottom-1 {
+  margin-bottom: 1rem;
 }

package/scss/_btn.scss

@@ -0,0 +1,52 @@
+.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;
+  }
+
+  // button modifyers
+  &.expand {
+    @include btn-expand;
+  }
+  &.slim {
+    @include btn-slim;
+  }
+}
+
+input[type="number"] {
+  @include focus {
+    @include double-box($white, $c-grey-steel);
+  }
+}

package/scss/_checkbox-group.scss

@@ -18,11 +18,24 @@
       top: 0;
       right: auto;
       left: 1rem;
-  
-      &:checked + label {
-        color: $c-status-neutral;
+
+      @mixin focus_colors {
         border: 1px solid $c-status-neutral-light;
         background-color: $c-status-neutral-fade;
+        color: $c-status-neutral;
+      }
+
+      @include focus {
+        z-index: 3;
+
+        + label {
+          @include focus_colors;
+          @include double-box($white, $c-status-neutral-light, 0.5rem);
+        }
+      }
+  
+      &:checked + label {
+        @include focus_colors;
       }
     }
   
@@ -37,22 +50,29 @@
   }
 }
 
-.checkbox-group.error {
-  .custom-control {
-    input[type=checkbox]:checked + label {
-      color: $c-status-error;
-      border: 1px solid $c-status-error-light;
-      background-color: $c-status-error-fade;
-    }
-  }
-}
+@each $status, $color in $statees {
+  @if $status != 'neutral' {
+    .checkbox-group.#{$status} {
+      .custom-control {
+        input[type=checkbox] {
+          @include focus {
+            z-index: 3;
 
-.checkbox-group.success {
-  .custom-control {
-    input[type=checkbox]:checked + label {
-      color: $c-status-success;
-      border: 1px solid $c-status-success-light;
-      background-color: $c-status-success-fade;
-    }
+            + 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);
+            background-color: map-get($color, fade);
+            color: map-get($color, base);
+          }
+        }    
+      }
+    }    
   }
 }

package/scss/_checkbox.scss

@@ -15,10 +15,23 @@
     right: auto;
     left: 1rem;
 
-    &:checked + label {
-      color: $c-status-neutral;
+    @mixin focus_colors {
       border: 1px solid $c-status-neutral-light;
       background-color: $c-status-neutral-fade;
+      color: $c-status-neutral;
+    }
+
+    @include focus {
+      z-index: 3;
+
+      + label {
+        @include focus_colors;
+        @include double-box($white, $c-status-neutral-light, 0.5rem);
+      }
+    }
+
+    &:checked + label {
+      @include focus_colors;
     }
   }
 
@@ -32,18 +45,27 @@
   }
 }
 
-.checkbox.error {
-  input[type=checkbox]:checked + label {
-    color: $c-status-error;
-    border: 1px solid $c-status-error-light;
-    background-color: $c-status-error-fade;
-  }
-}
+@each $status, $color in $statees {
+  @if $status != 'neutral' {
+    .checkbox.#{$status} {
+      input[type=checkbox] {
+        @include focus {
+          z-index: 3;
 
-.checkbox.success {
-  input[type=checkbox]:checked + label {
-    color: $c-status-success;
-    border: 1px solid $c-status-success-light;
-    background-color: $c-status-success-fade;
+          + 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);
+        background-color: map-get($color, fade);
+        color: map-get($color, base);
+      }
+    }
   }
 }

package/scss/index.scss

@@ -11,6 +11,7 @@
 @import "close-icon.scss";
 
 // bootstrap component styles
+@import "btn.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 

package/vue/Icons/back_arrow.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" fill="black"/></svg>
+</template>
+
+<script>
+export default {
+  name: 'BackArrow'
+}
+</script>

package/vue/Icons/cart.vue

@@ -0,0 +1,5 @@
+<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/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;
+  border-radius: $border-radius-lg;
   border-width: $border-width;
   color: $c-status-neutral;
   border-style: solid;

package/vue/block.vue

@@ -0,0 +1,30 @@
+<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/{Card/index.vue → card.vue}

@@ -1,6 +1,6 @@
 <template>
   <div :class="styleContainer">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
@@ -31,4 +31,29 @@ export default {
 }
 </script>
 
-<style src="./card.scss" lang="scss" module></style>
+<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>

package/vue/container.vue

@@ -0,0 +1,84 @@
+<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

@@ -0,0 +1,109 @@
+<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>

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 {
-  column-gap: 1rem;
+  gap: $gap-account;
   display: grid;
-
+  
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
@@ -41,13 +49,19 @@
     align-items: center;
   }
 
+  label {
+    font-weight: normal;
+  }
+
   input {
     margin: 0;
   }
 }
 
 .no_label {
-  grid-column: 2 / 3;
+  @include media-breakpoint-up(sm) {
+    grid-column: 2 / 3;
+  }
 }
 
-</style>
+</style>

package/vue/Banner/banner.scss

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

package/vue/Banner/index.vue

@@ -1,9 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-
-.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/Container/container.scss

@@ -1,20 +0,0 @@
-
-.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

@@ -1,25 +0,0 @@
-<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>