barbican-reset 1.7.0 → 1.7.1

package/components/br_container.vue

@@ -70,7 +70,7 @@ export default {
 }
 
 .inner {
-  max-width: $layout-width-wide;
+  max-width: $layout-width-lg;
   margin: 0 auto;
 
   &:not(.footer) {
@@ -89,7 +89,7 @@ export default {
   }
   
   &.thin {
-    max-width: $layout-width-thin;  
+    max-width: $layout-width-sm;  
   }
 
   &.masthead {

package/components/br_footer/lower.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="br-footer-lower">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { 
+  name: 'BrFooterLower'
+}
+</script>

package/components/br_footer/upper.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="[`br-footer-upper`, { splash }]">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { 
+  name: 'BrFooterUpper',
+  props: {
+    splash: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

package/components/footer_logos.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+// dont think we need this any longer
 export default { 
   name: 'FooterLogos'
 }

package/helpers/mixins/_br-alert.scss

@@ -0,0 +1,99 @@
+
+@mixin br-alert-wrap--setup {
+  border-radius: $border-radius-lg;
+  border-width: $border-width;
+  padding: 0.75rem 0.875rem;
+  border-style: solid;
+}
+
+@mixin br-alert-wrap--colors($main, $fade, $light) {
+  background-color: $fade;
+  border-color: $light;
+  color: $main;
+}
+
+@mixin br-alert-wrap--toggle {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 0.625rem;
+
+  &.inline {
+    display: inline-flex;
+  }
+}
+
+@mixin br-alert-link($main, $fade) {
+  @include focus {
+    @include single-box($main);
+    background-color: $main;
+    color: $fade;
+  }
+}
+
+@mixin br-alert-exit($main, $fade) {
+  path.cross {
+    fill: $main;
+  }
+  path.tint {
+    fill: $fade;
+  }
+
+  @include focus {
+    outline-color: $main;
+
+    path.cross {
+      fill: $fade;
+    }
+    path.tint {
+      fill: $main;
+    }
+  }
+}
+
+@mixin br-alert--center {
+  text-align: center;
+
+  .wrap {
+    justify-content: center;
+  }
+}
+
+@mixin br-alert--title {
+  margin-bottom: 0.25rem;
+  font-weight: 700;
+}
+
+@mixin br-alert--flex {
+  justify-content: space-between;
+  display: flex;
+}
+
+@mixin br-alert--setup {
+  @include media-breakpoint-down(xs) {
+    font-size: $font-size-sm;
+  }
+
+  .title {
+    @include br-alert--title;
+  }
+
+  .flex {
+    @include br-alert--flex;
+  }
+
+  .btn.btn-exit {
+    
+    &.error {
+      @include br-alert-exit($error_focus...);
+    }
+
+    &.success {
+      @include br-alert-exit($success_focus...);
+    }
+
+    &.neutral {
+      @include br-alert-exit($neutral_focus...);
+    }
+  }
+}

package/helpers/mixins/_br-footer.scss

@@ -0,0 +1,27 @@
+
+@mixin br-footer-upper {
+  padding-top: 3.75rem;
+  display: grid;
+  gap: 1rem;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 11rem auto;
+  }
+
+  &:not(.splash) {
+    padding-bottom: 3.75rem;
+  }
+
+  nav a {
+    @include focus {
+      @include single-box($white);
+      background-color: $white;
+      color: $black;
+    }
+  }
+}
+
+@mixin br-footer-lower {
+  padding-bottom: 1.875rem;
+  padding-top: 1.875rem;
+}

package/helpers/mixins/_br-form-row.scss

@@ -0,0 +1,29 @@
+
+@mixin br-form-row {
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 33fr 67fr;
+    gap: $gap-account;
+    display: grid;
+  }
+
+  > label {
+    @include media-breakpoint-up(sm) {
+      margin-top: 1rem;
+    }
+  }
+
+  label {
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  input {
+    width: 100%;
+    margin: 0;
+  }
+}

package/helpers/mixins/_card.scss

@@ -1,9 +1,53 @@
 
+@mixin card {
+  border: 1px solid $c-grey-pearl;
+  border-radius: $border-radius-lg;
+  background-color: white;
+
+  &:not(:first-child) {
+    margin-top: 1.25rem;
+  }
+}
+
+@mixin card-header {
+  border-bottom: 1px solid $c-grey-pearl;
+  padding: 1.5rem 1.75rem 1.25rem;
+  background-color: transparent;
+}
+
+@mixin card-subtitle {
+  color: $c-grey-steel !important;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  margin: 0;
+}
+
+@mixin card-body {
+  padding: 1.75rem 1.75rem 1.5rem;
+  // padding: 1.5rem;
+}
+
+@mixin card-footer {
+  padding: 1rem;
+
+  @include media-breakpoint-up(md) {
+    border-top: 1px solid $c-grey-concrete;
+  }
+}
+
+@mixin card-img {
+  border: 1px solid $c-grey-concrete;
+  margin-bottom: 1rem;
+  max-width: 100%;
+}
+
 @mixin form-card {
   .card-header {
-    padding: 1.5rem 1.75rem 1.25rem;
+    @include card-header;
+    // padding: 1.5rem 1.75rem 1.25rem;
   }
   .card-body {
-    padding: 1.75rem 1.75rem 1.5rem;
+    @include card-body;
+    // padding: 1.75rem 1.75rem 1.5rem;
   }
 }

package/helpers/mixins/_content.scss

@@ -8,8 +8,8 @@
 }
 
 @mixin content_masthead__inner {
-  max-width: $layout-width-wide;
-  padding: $space--large * 2 0;
+  max-width: $layout-width-lg;
+  padding: 3.75rem 0;
   margin: 0 auto;
 
   h1 {
@@ -23,7 +23,7 @@
 }
 
 @mixin content-main-content__inner {
-  max-width: $layout-width-wide;
+  max-width: $layout-width-lg;
   padding: 1.5rem 0;
   margin: 0 auto;
 

package/helpers/mixins/_table.scss

@@ -13,38 +13,39 @@
   }
 }
 
-@mixin table-details-row($type:"header") {
-  grid-template-columns: auto 10rem 8rem;
+@mixin default-table-style {
+  th, td {
+    @include media-breakpoint-up(md) {
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-pearl;
+      }
   
-  @if $type == "checkbox" {
-    grid-template-columns: 2.75rem auto 10rem 8rem;  
+      &:last-of-type {
+        text-align: right;
+      }
+    }
   }
 }
 
-@mixin table-etickets-row {
-  grid-template-columns: 10rem auto 8rem;
-}
-
-@mixin table-gifts-row {
-  grid-template-columns: 3fr 5fr 5fr 2fr 2fr;
-}
-
-@mixin table-membership-row {
-  grid-template-columns: auto 10rem 10rem 8rem;
-}
-
-@mixin table-orders-row {
-  grid-template-columns: 10rem 8rem auto 8rem;
-}
-
-@mixin table-preferences-row {
-  grid-template-columns: auto repeat(2, 5rem);
-}
-
-@mixin table-tickets-row {
-  grid-template-columns: 2fr 5fr 5fr 2fr;
-}
-
+$columns-orders: 10rem 8rem auto 8rem;
+$columns-details--header: auto 10rem 8rem;
+$columns-details--checkbox: 2.75rem auto 10rem 8rem;
+$columns-etickets: 8rem auto 8rem;
+$columns-gifts: 3fr 5fr 5fr 2fr 2fr;
+$columns-membership: auto 10rem 10rem 8rem;
+$columns-preferences: auto repeat(2, 5rem);
+$columns-tickets: 2fr 5fr 5fr 2fr;
+
+@import "table/basket";
+@import "table/details";
+@import "table/etickets";
+@import "table/gifts";
+@import "table/membership";
+@import "table/orders";
+@import "table/preferences";
+@import "table/resale";
+@import "table/section";
+@import "table/tickets";
 
 
 

package/helpers/mixins/index.scss

@@ -8,6 +8,9 @@
   top: $val;
 }
 
+@import "br-alert";
+@import "br-form-row";
+@import "br-footer";
 @import "account/orders";
 @import "basket";
 @import "buttons";

package/helpers/mixins/input/_generic.scss

@@ -47,6 +47,7 @@
   border-radius: $border-radius-lg;
   background-color: $white;
   font-weight: 400;
+  display: block;
 
   @if $state != disabled {
     color: $c-grey-night;

package/helpers/mixins/table/_basket.scss

@@ -0,0 +1,33 @@
+
+@mixin basket-table {
+  tr {
+    @include table-row;
+    justify-content: space-between;
+    display: flex;  
+    gap: 0.75rem;
+  
+    &.promo {
+      padding-bottom: 1rem;
+    }
+  
+    &.donation {
+      @include basket-row-grid;
+      padding-bottom: 1rem;
+      padding-top: 1rem;
+    }
+  
+    &.total {
+      font-size: $h4-font-size;
+      border-bottom: none;
+      font-weight: 700;
+    }
+  
+    &.continue {
+      border-bottom: none;
+  
+      td {
+        width: 100%;
+      } 
+    }
+  }
+}

package/{scss → helpers/mixins}/table/_details.scss

@@ -1,6 +1,5 @@
 
-table.details {
-
+@mixin details-table {
   $mq: md;
 
   thead {
@@ -22,7 +21,7 @@ table.details {
     display: grid;
 
     @include media-breakpoint-up($mq) {
-      @include table-details-row;
+      grid-template-columns: $columns-details--header;
     }
 
     @include media-breakpoint-down($mq) {

package/{scss → helpers/mixins}/table/_etickets.scss

@@ -1,5 +1,5 @@
-table.etickets {
 
+@mixin etickets-table {
   $mq: md;
 
   thead {
@@ -22,7 +22,7 @@ table.etickets {
     }
 
     @include media-breakpoint-up($mq) {
-      @include table-etickets-row;
+      grid-template-columns: $columns-etickets;
     }
 
     @include media-breakpoint-down($mq) {

package/{scss → helpers/mixins}/table/_gifts.scss

@@ -1,5 +1,5 @@
-table.gifts {
 
+@mixin gifts-table {
   $mq: xl;
 
   thead {
@@ -15,7 +15,7 @@ table.gifts {
   tr {
     @include media-breakpoint-up($mq) {
       @include table-row;
-      @include table-gifts-row;
+      grid-template-columns: $columns-gifts;
       display: grid;
       gap: 0.75rem;
   

package/helpers/mixins/table/_membership.scss

@@ -0,0 +1,8 @@
+
+@mixin membership-table {
+  tr {
+    @include media-breakpoint-up(md) {
+      grid-template-columns: $columns-membership;
+    }
+  }
+}

package/{scss → helpers/mixins}/table/_orders.scss

@@ -1,5 +1,5 @@
-table.orders {
 
+@mixin orders-table($columns) {
   $mq: md;
 
   thead {
@@ -22,7 +22,7 @@ table.orders {
     }
 
     @include media-breakpoint-up($mq) {
-      @include table-orders-row;
+      grid-template-columns: $columns;
     }
 
     @include media-breakpoint-down($mq) {
@@ -32,16 +32,6 @@ table.orders {
 
   th, td {
     padding: 0.75rem;
-
-    @include media-breakpoint-up($mq) {
-      &:not(:last-of-type) {
-        border-right: 1px solid $c-grey-pearl;
-      }
-  
-      &:last-of-type {
-        text-align: right;
-      }
-    }
   }
 
   tr.full-width {

package/{scss → helpers/mixins}/table/_preferences.scss

@@ -1,5 +1,5 @@
-table.preferences {
 
+@mixin preferences-table {
   $mq: md;
 
   thead {
@@ -22,7 +22,7 @@ table.preferences {
     }
 
     @include media-breakpoint-up($mq) {
-      @include table-preferences-row;
+      grid-template-columns: $columns-preferences;
     }
 
     @include media-breakpoint-down($mq) {

package/{scss → helpers/mixins}/table/_resale.scss

@@ -1,4 +1,5 @@
-table.resale {
+
+@mixin resale-table {
   margin-right: auto;
   margin-left: auto;
   max-width: 11rem;

package/{scss → helpers/mixins}/table/_section.scss

@@ -1,5 +1,5 @@
 
-table.section {
+@mixin section-table {
   padding-bottom: 0.75rem;
   padding-top: 0.75rem;
   display: block;

package/{scss → helpers/mixins}/table/_tickets.scss

@@ -1,5 +1,5 @@
-table.tickets {
 
+@mixin tickets-table {
   $mq: sm;
 
   th {
@@ -9,7 +9,7 @@ table.tickets {
   tr {
     @include media-breakpoint-up($mq) {
       @include table-row;
-      @include table-tickets-row;
+      grid-template-columns: $columns-tickets;
       display: grid;
       gap: 0.75rem;
   

package/helpers/variables/_alerts.scss

@@ -0,0 +1,7 @@
+$neutral_wrap: $c-status-neutral, $c-status-neutral-fade, $c-status-neutral-light;
+$success_wrap: $c-status-success, $c-status-success-fade, $c-status-success-light;
+$error_wrap: $c-status-error, $c-status-error-fade, $c-status-error-light;
+
+$neutral_focus: $c-status-neutral, $c-status-neutral-fade;
+$success_focus: $c-status-success, $c-status-success-fade;
+$error_focus: $c-status-error, $c-status-error-fade;

package/helpers/variables/_layout.scss

@@ -1,13 +1,10 @@
 /// Constrained content
 $layout-padding: 5%;
 $layout-width-title: 20rem;
-$layout-width-thin: 50rem;
-$layout-width-videos: 60rem;
-$layout-width-wide: 75rem;
+$layout-width-sm: 50rem;
+$layout-width-md: 60rem;
+$layout-width-lg: 75rem;
 
-$space: 0.625rem;
-// Default large amount of space.
-$space--large: $space * 3;
 $border-radius-lg: 0.375rem;
 
 // Basket layout

package/helpers/variables/_typography.scss

@@ -1,14 +1,10 @@
 
-$f-primary-name: "FuturaLTPro";
-$f-primary: #{$f-primary-name}, "Helvetica", "Arial", sans-serif;
-
 $line-height-xs: 1.1;
 $line-height-sm: 1.2;
 $line-height-md: 1.4;
 $line-height-lg: 1.8;
 
 $headings-line-height: $line-height-sm;
-$font-family-sans-serif: $f-primary;
 $headings-letter-spacing: -0.015em;
 $link-decoration: underline;
 $headings-font-weight: 700;

package/helpers/variables/colors/_brand.scss

@@ -1,6 +1,7 @@
 
 $c-brand-orange-faint: hsl(21, 60%, 99%);
 $c-brand-orange-light: hsl(21, 100%, 95%);
+$c-brand-orange-shade: hsl(21, 50%, 90%);
 $c-brand-orange: hsl(21, 100%, 41%);
 $c-brand-orange-dark: hsl(21, 100%, 38%);
 

package/helpers/variables/index.scss

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

package/index.js

@@ -6,7 +6,6 @@ import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import CardDisplay from './components/card_display'
-import FooterUpper from './components/footer_upper'
 import FooterLogos from './components/footer_logos'
 import FooterLower from './components/footer_lower'
 import FluidIframe from './components/fluid_iframe'
@@ -26,6 +25,7 @@ import BrFormRow from './components/br_form_row'
 import BrFormUpdate from './components/br_form_update'
 import BrLoader from './components/br_loader'
 import BrWrap from './components/br_wrap'
+import BrFooterUpper from './components/br_footer/upper'
 
 export { 
   BrLoader, 
@@ -41,7 +41,7 @@ export {
   BrFormUpdate,
   BrFormRow,
   EventSummary,
-  FooterUpper,
+  BrFooterUpper,
   FooterLogos,
   FooterLower,
   FluidIframe,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "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/_br-alert.scss

@@ -0,0 +1,49 @@
+
+.br-alert {
+  @include br-alert--setup;
+
+  &.center {
+    @include br-alert--center;
+  }
+
+  .wrap {
+    @include br-alert-wrap--colors($neutral_wrap...);
+    @include br-alert-wrap--setup;
+
+    .btn.btn-link, a {
+      @include br-alert-link($neutral_focus...);
+    }
+
+    &.error {
+      @include br-alert-wrap--colors($error_wrap...);
+
+      .btn.btn-link, a {
+        @include br-alert-link($error_focus...);
+      }
+    }
+
+    &.success {
+      @include br-alert-wrap--colors($success_wrap...);
+
+      .btn.btn-link, a {
+        @include br-alert-link($success_focus...);
+      }
+    }
+
+    &.inline {
+      @include inline-block;
+    }
+
+    &.toggle {
+      @include br-alert-wrap--toggle;
+    }
+
+    p {
+      margin-bottom: 0;
+
+      + p {
+        margin-top: 1rem;
+      }
+    }
+  }
+}

package/scss/_br-footer.scss

@@ -0,0 +1,8 @@
+
+.br-footer-upper {
+  @include br-footer-upper;
+}
+
+.br-footer-lower {
+  @include br-footer-lower;
+}

package/scss/{_form-row.scss → _br-form-row.scss}

@@ -1,33 +1,9 @@
 
 .br-form-row {
-
-  &:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 33fr 67fr;
-    gap: $gap-account;
-    display: grid;
-  }
-
-  > label {
-    @include media-breakpoint-up(sm) {
-      margin-top: 1rem;
-    }
-  }
+  @include br-form-row;
 
   label {
     font-weight: normal;
-
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  input {
-    width: 100%;
-    margin: 0;
   }
 
   .content {

package/scss/_br-wrap.scss

@@ -1,6 +1,6 @@
 
 .br_wrap {
-  max-width: $layout-width-wide;
+  max-width: $layout-width-lg;
   margin-right: auto;
   margin-left: auto;
 
@@ -9,10 +9,10 @@
   }
 
   &.videos {
-    max-width: $layout-width-videos;    
+    max-width: $layout-width-md;    
   }
 
   &.thin {
-    max-width: $layout-width-thin;
+    max-width: $layout-width-sm;
   }
 }

package/scss/_fonts.scss

@@ -1,25 +1,27 @@
 
-$f-file-path: "~barbican-reset/fonts/";
+$futura: "FuturaLTPro";
+$font-family: #{$futura}, "Helvetica", "Arial", sans-serif;
+$font-file-path: "../fonts/";
 
 @include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-Book",
+  "#{$futura}",
+  "#{$font-file-path}#{$futura}-Book",
   ("woff", "woff2")
 ) {
   font-style: normal;
 }
 
 @include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-BookOblique",
+  "#{$futura}",
+  "#{$font-file-path}#{$futura}-BookOblique",
   ("woff", "woff2")
 ) {
   font-style: italic;
 }
 
 @include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-Bold",
+  "#{$futura}",
+  "#{$font-file-path}#{$futura}-Bold",
   ("woff", "woff2")
 ) {
   font-style: normal;
@@ -27,8 +29,8 @@ $f-file-path: "~barbican-reset/fonts/";
 }
 
 @include font-face(
-  "#{$f-primary-name}",
-  "#{$f-file-path}#{$f-primary-name}-BoldOblique",
+  "#{$futura}",
+  "#{$font-file-path}#{$futura}-BoldOblique",
   ("woff", "woff2")
 ) {
   font-style: italic;

package/scss/_input.scss

@@ -12,7 +12,7 @@ input::placeholder {
 input[type=checkbox],
 input[type=radio] {
   margin-bottom: 0.5rem;
-  margin-right: $space;
+  margin-right: 0.5rem;
 }
 
 input[type=button],

package/scss/_list.scss

@@ -1,5 +1,5 @@
 menu, ol, ul {
-  padding: 0 0 0 ($space * 2);
+  padding: 0 0 0 1.25rem;
 }
 
 nav > ul {

package/scss/_table.scss

@@ -0,0 +1,25 @@
+
+table {
+  border-spacing: 0;
+  width: 100%;
+
+  &.basket { @include basket-table; }
+  &.details { @include details-table; }
+  &.gifts { @include gifts-table; }
+  &.etickets { @include etickets-table; }
+  &.details.membership { @include membership-table; }
+  &.preferences { @include preferences-table; }
+  &.resale { @include resale-table; }
+  &.section { @include section-table; }
+  &.tickets { @include tickets-table; }
+}
+
+table.orders {
+  @include orders-table($columns-orders);
+  @include default-table-style;
+}
+
+td {
+  padding: 0;
+}
+

package/scss/card/index.scss

@@ -10,40 +10,25 @@
 @import "slim";
 
 .card {
-  border: 1px solid $c-grey-pearl;
-  border-radius: $border-radius-lg;
-}
-
-.card + .card {
-  margin-top: 1.25rem;
+  @include card;
 }
 
 .card-header {
-  border-bottom: 1px solid $c-grey-pearl;
-  background-color: transparent;
+  @include card-header;
 }
 
 .card-subtitle {
-  color: $c-grey-steel !important;
-  font-size: $font-size-sm;
-  font-weight: 400;
-  margin: 0;
+  @include card-subtitle;
 }
 
 .card-body {
-  padding: 1.5rem;
+  @include card-body;  
 }
 
 .card-img {
-  border: 1px solid $c-grey-concrete;
-  margin-bottom: 1rem;
-  max-width: 100%;
+  @include card-img;
 }
 
 .card-footer {
-  padding: 1rem;
-
-  @include media-breakpoint-up(md) {
-    border-top: 1px solid $c-grey-concrete;
-  }
+  @include card-footer;
 }

package/scss/index.scss

@@ -10,13 +10,15 @@
 @import "footer";
 @import "klaro";
 @import "fonts";
-@import "br-loader";
 @import "close-icon";
-@import "table/index";
+@import "table";
 @import "promo";
-@import "alert";
-@import "form-row";
+
+@import "br-alert";
+@import "br-form-row";
+@import "br-loader";
 @import "br-wrap";
+@import "br-footer";
 
 // bootstrap component styles
 @import "btn";
@@ -34,7 +36,7 @@
 
 body {
   line-height: $line-height-md;
-  font-family: $f-primary;
+  font-family: $font-family;
   color: $c-grey-night;
 }
 

package/components/footer_lower.vue

@@ -1,20 +0,0 @@
-<template>
-  <div :class="$style.lower">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default { 
-  name: 'FooterLower'
-}
-</script>
-
-<style lang="scss" module>
-
-.lower {
-  padding-bottom: 1.875rem;
-  padding-top: 1.875rem;
-}
-
-</style>

package/components/footer_upper.vue

@@ -1,51 +0,0 @@
-<template>
-  <div :class="styleUpper">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default { 
-  name: 'FooterUpper',
-  props: {
-    splash: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    styleUpper() {
-      const style = this.$style;
-      let output = [style.upper];
-      if (this.splash) { output.push(style.splash); }
-      return output;
-    },
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.upper {
-  padding-top: 3.75rem;
-
-  @include media-breakpoint-up(md) {
-    grid-template-columns: 11rem auto;
-    display: grid;
-    gap: 1rem;
-  }
-
-  nav a {
-    @include focus {
-      @include single-box($white);
-      background-color: $white;
-      color: $black;
-    }
-  }
-
-  &:not(.splash) {
-    padding-bottom: 3.75rem;
-  }
-}
-
-</style>

package/scss/_alert.scss

@@ -1,132 +0,0 @@
-
-$neutral_wrap: $c-status-neutral, $c-status-neutral-fade, $c-status-neutral-light;
-$success_wrap: $c-status-success, $c-status-success-fade, $c-status-success-light;
-$error_wrap: $c-status-error, $c-status-error-fade, $c-status-error-light;
-
-$neutral_focus: $c-status-neutral, $c-status-neutral-fade;
-$success_focus: $c-status-success, $c-status-success-fade;
-$error_focus: $c-status-error, $c-status-error-fade;
-
-@mixin status_focus($main, $fade) {
-  @include focus {
-    @include single-box($main);
-    background-color: $main;
-    color: $fade;
-  }
-}
-
-@mixin exit($main, $fade) {
-  path.cross {
-    fill: $main;
-  }
-  path.tint {
-    fill: $fade;
-  }
-
-  @include focus {
-    outline-color: $main;
-
-    path.cross {
-      fill: $fade;
-    }
-    path.tint {
-      fill: $main;
-    }
-  }
-}
-
-@mixin wrap($main, $fade, $light) {
-  background-color: $fade;
-  border-color: $light;
-  color: $main;
-}
-
-.br-alert {
-  @include media-breakpoint-down(xs) {
-    font-size: $font-size-sm;
-  }
-  
-  &.center {
-    text-align: center;
-
-    .wrap {
-      justify-content: center;
-    }
-  }
-
-  .wrap {
-    @include wrap($neutral_wrap...);
-    border-radius: $border-radius-lg;
-    border-width: $border-width;
-    padding: 0.75rem 0.875rem;
-    border-style: solid;
-
-    .btn.btn-link, a {
-      @include status_focus($neutral_focus...);
-    }
-
-    &.error {
-      @include wrap($error_wrap...);
-
-      .btn.btn-link, a {
-        @include status_focus($error_focus...);
-      }
-    }
-
-    &.success {
-      @include wrap($success_wrap...);
-
-      .btn.btn-link, a {
-        @include status_focus($success_focus...);
-      }
-    }
-
-    &.inline {
-      @include inline-block;
-    }
-
-    &.toggle {
-      justify-content: space-between;
-      align-items: center;
-      display: flex;
-      gap: $space;
-
-      &.inline {
-        display: inline-flex;
-      }
-    }
-
-    p {
-      margin-bottom: 0;
-
-      + p {
-        margin-top: 1rem;
-      }
-    }
-  }
-
-  .title {
-    margin-bottom: 0.25rem;
-    font-weight: 700;
-  }
-
-  .flex {
-    justify-content: space-between;
-    display: flex;    
-  }
-
-  .btn.btn-exit {
-    
-    &.error {
-      @include exit($error_focus...);
-    }
-
-    &.success {
-      @include exit($success_focus...);
-    }
-
-    &.neutral {
-      @include exit($neutral_focus...);
-    }
-  }
-}

package/scss/table/_basket.scss

@@ -1,31 +0,0 @@
-
-table.basket tr {
-  @include table-row;
-  justify-content: space-between;
-  display: flex;  
-  gap: 0.75rem;
-
-  &.promo {
-    padding-bottom: 1rem;
-  }
-
-  &.donation {
-    @include basket-row-grid;
-    padding-bottom: 1rem;
-    padding-top: 1rem;
-  }
-
-  &.total {
-    font-size: $h4-font-size;
-    border-bottom: none;
-    font-weight: 700;
-  }
-
-  &.continue {
-    border-bottom: none;
-
-    td {
-      width: 100%;
-    } 
-  }
-}

package/scss/table/_membership.scss

@@ -1,6 +0,0 @@
-
-table.details.membership tr {
-  @include media-breakpoint-up(md) {
-    @include table-membership-row;
-  }
-}

package/scss/table/index.scss

@@ -1,20 +0,0 @@
-
-@import "tickets";
-@import "basket";
-@import "section";
-@import "orders";
-@import "details";
-@import "resale";
-@import "preferences";
-@import "etickets";
-@import "membership";
-@import "gifts";
-
-table {
-  border-spacing: 0;
-  width: 100%;
-}
-
-td {
-  padding: 0;
-}