barbican-reset 1.6.9 → 1.7.3

package/animations/confirm.js

@@ -0,0 +1,62 @@
+import gsap from 'gsap'
+import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
+
+gsap.registerPlugin(DrawSVGPlugin);
+
+const fadeIn = {
+  duration: 0.3,
+  opacity: 0,
+  delay: 0.3,
+};
+
+const explode = {
+  ease: "power1.out",
+  opacity: 0,
+  scale: 1.5,
+};
+
+const defaults = {
+  duration: 0.6, 
+  ease: "power1.in", 
+  transformOrigin: "center"
+}
+
+export const animateEmail = () => {
+  const query = target => document.querySelector(`.card[email] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const arrow = query(".arrow");
+  const fold = query(".fold");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.set(arrow, { opacity: 0 })
+    .from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(fold, { drawSVG: "0%", duration: 0.3 }, "start")
+    .to(clone, explode, "start")
+    .set(arrow, { opacity: 1 })
+    .from(arrow, { x: -6, ease: "power1.out" });
+}
+
+export const animateDone = () => {
+  const query = target => document.querySelector(`.card[done] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const tick = query(".tick");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(tick, { drawSVG: "0%", duration: 0.3 }, "start+=0.3")
+    .to(clone, explode, "start");
+}

package/animations/index.js

@@ -0,0 +1,8 @@
+import { animateEmail, animateDone } from './confirm'
+
+export default {
+  methods: {
+    animateEmail,
+    animateDone,
+  },
+};

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

@@ -1,6 +1,6 @@
 <template>
-  <div :class="$style.container">
-    <div :class="$style.input" data-test="email"><slot /></div>
+  <div class="br-form-update">
+    <div class="br-form-update--input" data-test="email"><slot /></div>
     <b-button @click.prevent="$emit('update')" data-test="update">update</b-button>
   </div>
 </template>
@@ -10,23 +10,3 @@
     name: 'BrFormUpdate',
   }
 </script>
-
-<style lang="scss" module>
-
-.container {
-  display: grid;
-  gap: 1rem;
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: auto 6rem;
-  }
-}
-
-.input {
-  @include all-text-inputs;
-  color: $c-grey-steel;
-  user-select: none;
-  overflow: hidden;
-}
-
-</style>

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/_br-form-update.scss

@@ -0,0 +1,15 @@
+
+@mixin br-form-update {
+  display: grid;
+  gap: 1rem;
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: auto 6rem;
+  }
+}
+
+@mixin br-form-update--input {
+  @include text-input-defaults;  
+  user-select: none;
+  overflow: hidden;
+}

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/_city-of-london.scss

@@ -0,0 +1,12 @@
+
+@mixin city-of-london-lockup {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  @include focus {
+    text-decoration: underline;
+    outline: none;
+  }
+}

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/_focus.scss

@@ -33,13 +33,13 @@
   }
 }
 
-@mixin input-focus {
+@mixin input-focus-defaults {
   @include single-box($c-grey-steel, 0.0625rem);
   border: 1px solid $c-grey-steel;
   background-color: $c-grey-alpine;
 }
 
-@mixin focus_colors {
+@mixin neutral-status-colors {
   background-color: $c-status-neutral-fade;
   border: 1px solid $c-status-neutral;
   color: $c-status-neutral;

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

@@ -1,5 +1,3 @@
-// paths more explicit for gulp-sass + iframe overrides
-@import "../../node_modules/bourbon/core/bourbon";
 
 @mixin inset($val: 0) {
   bottom: $val;
@@ -8,11 +6,16 @@
   top: $val;
 }
 
+@import "br-alert";
+@import "br-form-row";
+@import "br-form-update";
+@import "br-footer";
 @import "account/orders";
 @import "basket";
 @import "buttons";
 @import "card";
 @import "content";
+@import "city-of-london";
 @import "core";
 @import "festival";
 @import "focus";

package/helpers/mixins/input/_generic.scss

@@ -30,13 +30,13 @@
       }
 
       &:checked ~ label {
-        @include focus_colors;
+        @include neutral-status-colors;
         @include single-box($c-status-neutral, 0.0625rem);
       }
     }
 
     &:checked ~ label {
-      @include focus_colors;
+      @include neutral-status-colors;
     }
   }
 }
@@ -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/input/_text.scss

@@ -1,5 +1,26 @@
 
 @mixin all-text-inputs {
+  [type='color'],
+  [type='date'],
+  [type='datetime'],
+  [type='datetime-local'],
+  [type='email'],
+  [type='month'],
+  [type='number'],
+  [type='password'],
+  [type='search'],
+  [type='tel'],
+  [type='text'],
+  [type='time'],
+  [type='url'],
+  [type='week'],
+  input:not([type]),
+  textarea {
+    @content;
+  }
+}
+
+@mixin text-input-defaults {
   border: solid $border-width $c-border-strong;
   padding: 0.875rem 0.875rem 0.75rem;
   background-color: $c-grey-alpine;

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;
+    }
+  }
+}