barbican-reset 2.38.0 → 2.40.0

package/scss/_klaro.scss

@@ -1,12 +1,12 @@
 @mixin cm-button {
   @include fontfamily-black;
   background: $c-grey-l44;
-  border-radius: $border-radius;
+  border-radius: $br-border-radius;
   font-size: $font-size-sm;
   padding: 0.5em 0.75em;
   margin-right: 1em;
   cursor: pointer;
-  color: $white;
+  color: $br-white;
   border: 0;
 
   &:focus {
@@ -18,7 +18,7 @@
   }
 
   &.focus-visible {
-    @include double-box($c-grey-l21, $white, md);
+    @include double-box($c-grey-l21, $br-white, md);
   }
 
   &.cm-btn-success {
@@ -46,7 +46,7 @@
 
   @include large-up {
     box-shadow: 0 4px 6px 0 rgba($black, 0.2), 5px 5px 10px 0 rgba($black, 0.2);
-    border-radius: $border-radius;
+    border-radius: $br-border-radius;
     max-width: 28rem;
     bottom: 1.25rem;
 
@@ -61,7 +61,7 @@
 }
 
 @mixin cookie-defaults {
-  font-size: $font-size-base;
+  font-size: $br-font-size-base;
 
   a {
     text-decoration: underline;
@@ -104,7 +104,7 @@
     top: 0;
 
     &:focus+.cm-list-label .slider {
-      @include double-box($c-grey-l21, $white);
+      @include double-box($c-grey-l21, $br-white);
     }
 
     &:checked+.cm-list-label .slider {
@@ -143,7 +143,7 @@
       }
 
       &::before {
-        background-color: $white;
+        background-color: $br-white;
         position: absolute;
         transition: 0.3s;
         height: 1.25rem;
@@ -236,7 +236,7 @@
         top: 50%;
 
         @include small-up {
-          border-radius: $border-radius;
+          border-radius: $br-border-radius;
           position: relative;
           max-width: 40rem;
           margin: 0 auto;
@@ -365,7 +365,7 @@
           outline: none;
 
           svg {
-            @include double-box($c-grey-l21, $white, md);
+            @include double-box($c-grey-l21, $br-white, md);
           }
         }
 
@@ -421,13 +421,13 @@
 
         .cn-learn-more {
           @include fontfamily-black;
-          border-radius: $border-radius;
+          border-radius: $br-border-radius;
           font-size: $font-size-sm;
           background: $c-grey-l44;
           text-decoration: none;
           display: inline-block;
           padding: 0.5rem;
-          color: $white;
+          color: $br-white;
 
           @include small-down {
             margin-bottom: 1rem;
@@ -468,6 +468,6 @@
   @include cookie-position;
   background: $c-status-neutral;
   padding: 1rem;
-  color: $white;
+  color: $br-white;
   opacity: 0;
 }

package/scss/_main.scss

@@ -5,7 +5,7 @@ main {
   &.concertSplash,
   &.theatreSplash {
     padding-top: 2rem;
-    color: $white;
+    color: $br-white;
 
     @include medium-up {
       padding-top: 4rem;

package/scss/card/_membership.scss

@@ -9,7 +9,7 @@ $c-yb-membership-card-3: #FE5A59;
   width: calc(100% - 1rem);
   display: inline-block;
   margin: 0.5rem;
-  color: $white;
+  color: $br-white;
   border: none;
 
   @include small-up {

package/scss/card/_related.scss

@@ -12,7 +12,7 @@
   }
 
   .card-title {
-    font-size: $font-size-lg;
+    font-size: $br-font-size-lg;
     margin-bottom: 0.75rem;
 
     a {
@@ -37,7 +37,7 @@
   }
 
   .card-text {
-    font-size: $font-size-lg;
+    font-size: $br-font-size-lg;
   }
 
 }

package/scss/helpers/mixins/_br-alert.scss

@@ -1,5 +1,5 @@
 @mixin br-alert-wrap--setup {
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   border-width: $border-width;
   padding: 0.75rem toRem(14);
   border-style: solid;

package/scss/helpers/mixins/_br-card.scss

@@ -1,6 +1,6 @@
 @mixin br-card {
   border: 1px solid $c-grey-l87;
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   background-color: white;
 
   +.card {

package/scss/helpers/mixins/_br-skiplink.scss

@@ -1,7 +1,7 @@
 @mixin br-skiplink {
   border: 0.25rem solid $c-grey-l21;
-  border-radius: $border-radius-lg;
-  background-color: $white;
+  border-radius: $br-border-radius-lg;
+  background-color: $br-white;
   color: $c-grey-l21;
   position: absolute;
   padding: 0.5rem;

package/scss/helpers/mixins/_breakpoints.scss

@@ -1,7 +1,7 @@
-$xsmall: 416;
-$small: 520;
+$xsmall: 100;
+$small: 576;
 $medium: 768;
-$large: 960;
+$large: 992;
 $xlarge: 1200;
 $xxlarge: 1600;
 

package/scss/helpers/mixins/_content.scss

@@ -32,7 +32,7 @@
 }
 
 @mixin card-container {
-  border-radius: $border-radius-lg;
-  background-color: $white;
+  border-radius: $br-border-radius-lg;
+  background-color: $br-white;
   overflow: hidden;
 }

package/scss/helpers/mixins/_festival.scss

@@ -19,13 +19,13 @@
 @mixin welcome($max-width: 23rem) {
   box-shadow: 0 0 0.3125rem rgba($c-grey-l21, 0.1);
   border: 1px solid $c-grey-l87;
-  border-radius: $border-radius;
+  border-radius: $br-border-radius;
   margin-bottom: 1.5rem;
   max-width: $max-width;
   margin-right: auto;
   margin-left: auto;
   margin-top: -7rem;
-  background: $white;
+  background: $br-white;
   text-align: center;
   padding: 1.25rem;
 

package/scss/helpers/mixins/_focus.scss

@@ -40,12 +40,12 @@
   @include single-box($c-grey-l21);
   background-color: $c-grey-l21;
   // border-radius: 0;
-  color: $white;
+  color: $br-white;
 }
 
 @mixin focus-tabs-dark {
-  @include single-box($white);
-  background-color: $white;
+  @include single-box($br-white);
+  background-color: $br-white;
   // border-radius: 0;
   color: $black;
 }
@@ -56,17 +56,17 @@
   z-index: 2;
 }
 
-@mixin double-box($bg: $white, $col: $black, $bg_size: 0.25rem, $col_size: 0.15rem) {
+@mixin double-box($bg: $br-white, $col: $black, $bg_size: 0.25rem, $col_size: 0.15rem) {
   @include box-setup;
   box-shadow: 0 0 0 $bg_size $bg, 0 0 0 ($bg_size + $col_size) $col;
 }
 
-@mixin single-box($bg: $white, $size: 0.25rem) {
+@mixin single-box($bg: $br-white, $size: 0.25rem) {
   @include box-setup;
   box-shadow: 0 0 0 $size $bg;
 }
 
-@mixin link-focus($color: $c-grey-l11, $border: $white) {
+@mixin link-focus($color: $c-grey-l11, $border: $br-white) {
   @include focus {
     @include double-box($color, $border);
     background-color: $color;

package/scss/helpers/mixins/_font.scss

@@ -1,4 +1,4 @@
-@mixin font-face($name: "SupremeLLWeb", $path: "https://www.barbican.org.uk/themes/barb22/fonts/") {
+@mixin font-face($name: "SupremeLLWeb", $path: "https://static.barbican.org.uk/systems-public/fonts/") {
   @font-face {
     font-family: "Supreme-Light";
     src: url("#{$path}#{$name}-Light.woff") format("woff"),

package/scss/helpers/mixins/_loading.scss

@@ -7,13 +7,13 @@
   content: "";
 }
 
-@mixin placeholder($color: $gray-300) {
+@mixin placeholder($color: $br-gray-300) {
   background-color: $color;
   color: $color;
   cursor: wait;
 }
 
-@mixin placeholder-animation($color: $gray-400, $width: false) {
+@mixin placeholder-animation($color: $br-gray-400, $width: false) {
   @include inline-block;
   background-color: $color;
   position: relative;

package/scss/helpers/mixins/_table.scss

@@ -9,7 +9,7 @@
 }
 
 @mixin table-label($mq: $medium) {
-  font-size: $font-size-lg;
+  font-size: $br-font-size-lg;
   margin-bottom: 0.25rem;
 
   @include min-width($mq) {

package/scss/helpers/mixins/buttons/_setup.scss

@@ -23,7 +23,7 @@
 
 @mixin setup-button {
   @include fontfamily-black;
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   padding: $padding-button-lg;
   text-decoration: none;
   font-size: 1.0625rem;

package/scss/helpers/mixins/input/_generic.scss

@@ -56,9 +56,9 @@
 
 @mixin generic-input-label($state: neutral) {
   padding: 0.75rem 0.75rem 0.625rem 2.5rem;
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   border: 1px solid $c-grey-l65;
-  background-color: $white;
+  background-color: $br-white;
   font-weight: 400;
   display: block;
 

package/scss/helpers/mixins/input/_select.scss

@@ -4,7 +4,7 @@
   padding: 0.8125rem 2.5rem 0.8125rem 0.8125rem;
   background-position: right 0.75rem center;
   background-image: url($select-arrow);
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   border: 1px solid $c-grey-l65;
   background-color: $c-grey-l96;
   background-size: 1rem 0.75rem;

package/scss/helpers/mixins/input/_text.scss

@@ -23,7 +23,7 @@
 @mixin text-input-defaults {
   border: solid $border-width $c-grey-l65;
   padding: toRem(14) toRem(14) 0.75rem;
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   background-color: $c-grey-l96;
   line-height: 1.375rem;
   font-size: inherit;

package/scss/helpers/mixins/table/_details.scss

@@ -22,7 +22,7 @@
     }
 
     @include medium-down {
-      border-radius: $border-radius-lg;
+      border-radius: $br-border-radius-lg;
     }
   }
 

package/scss/helpers/mixins/table/_etickets.scss

@@ -24,7 +24,7 @@
     }
 
     @include medium-down {
-      border-radius: $border-radius-lg;
+      border-radius: $br-border-radius-lg;
     }
   }
 

package/scss/helpers/mixins/table/_gifts.scss

@@ -22,7 +22,7 @@
     }
 
     @include x-large-down {
-      border-radius: $border-radius-lg;
+      border-radius: $br-border-radius-lg;
       border: 1px solid $c-grey-l87;
       display: block;
       padding: 1rem;

package/scss/helpers/mixins/table/_orders.scss

@@ -24,7 +24,7 @@
     }
 
     @include medium-down {
-      border-radius: $border-radius-lg;
+      border-radius: $br-border-radius-lg;
     }
   }
 

package/scss/helpers/mixins/table/_preferences.scss

@@ -23,7 +23,7 @@
     }
 
     @include medium-down {
-      border-radius: $border-radius-lg;
+      border-radius: $br-border-radius-lg;
     }
   }
 
@@ -63,7 +63,7 @@
         @include inset(auto);
 
         @include focus {
-          outline: 0.15rem solid $blue;
+          outline: 0.15rem solid $br-blue;
           outline-offset: 0.25rem;
         }
       }

package/scss/helpers/mixins/table/_tickets.scss

@@ -16,7 +16,7 @@
     }
 
     @include small-down {
-      border-radius: $border-radius-lg;
+      border-radius: $br-border-radius-lg;
       border: 1px solid $c-grey-l87;
       display: block;
       padding: 1rem;

package/scss/helpers/variables/_layout.scss

@@ -5,7 +5,7 @@ $layout-width-sm: 50rem;
 $layout-width-md: 60rem;
 $layout-width-lg: 75rem;
 
-$border-radius-lg: 0.375rem;
+$br-border-radius-lg: 0.375rem;
 
 // Basket layout
 $gap-basket: 0.625rem;

package/scss/helpers/variables/index.scss

@@ -2,4 +2,19 @@
 @import 'typography';
 @import 'alerts';
 @import 'layout';
-@import 'columns';
+@import 'columns';
+
+$br-gray-300: #dee2e6;
+$br-gray-400: #ced4da;
+$br-gray-500: #adb5bd;
+$br-white: #ffffff;
+$br-blue: #0d6efd;
+$br-input-border-color: #ced4da;
+
+$br-border-radius: 0.25rem;
+$br-border-radius-lg: 0.5rem;
+
+$br-font-size-base: 1rem;
+$br-font-size-lg: 1.25rem;
+
+$br-h6-font-size: 1rem;

package/scss/index.scss

@@ -90,7 +90,7 @@ h5,
 h6,
 .h6 {
   @include br-heading;
-  font-size: $h6-font-size;
+  font-size: $br-h6-font-size;
 }
 
 a,

package/components/card_display.vue

@@ -1,123 +0,0 @@
-<template>
-  <div :class="styleComponent">
-    <div v-if="type === 'concert'" :class="$style.icon">
-      <div :class="[`btn btn-secondary`, { hero }]">
-        <template v-if="hero">Live event</template>
-        <live-icon :class="$style.svg" />
-      </div>
-    </div>
-    <img :class="$style.image" :src="image" />
-    <div v-if="expired" :class="$style.title">
-      <h4>Expired</h4>
-    </div>
-  </div>
-</template>
-
-<script>
-import { LiveIcon } from "barbican-reset/icons/stream";
-export default {
-  name: "CardDisplay",
-  components: { LiveIcon },
-  props: {
-    image: {
-      type: String,
-      required: true,
-    },
-    expired: {
-      type: Boolean,
-      default: false,
-    },
-    hero: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: "concert",
-    },
-  },
-  computed: {
-    styleComponent() {
-      const style = this.$style;
-      let output = [style.component];
-      if (this.hero) {
-        output.push(style.hero);
-      }
-      return output;
-    },
-    styleButton() {
-      const style = this.$style;
-      let output = [style.button];
-      if (this.hero) {
-        output.push(style.hero);
-      }
-      return output;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.btn.btn-secondary {
-  &:not(.hero) {
-    border-radius: 50%;
-    padding: 0.5rem;
-  }
-
-  &.hero {
-    align-items: center;
-    padding: 0.75rem;
-    display: flex;
-    gap: 0.5rem;
-  }
-}
-</style>
-
-<style lang="scss" module>
-@import "../scss/helpers";
-
-.svg {
-  fill: white;
-}
-
-.component {
-  padding-top: 56.25%;
-  position: relative;
-  overflow: hidden;
-  color: $white;
-}
-
-.icon {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-.image {
-  @include inset(0);
-  position: absolute;
-  height: auto;
-  width: 100%;
-}
-
-.title {
-  @include inset(0);
-  background-color: rgba($c-grey-l11, 0.85);
-  place-items: center;
-  position: absolute;
-  display: grid;
-}
-
-.component.hero {
-  .icon {
-    right: 1.5rem;
-    top: 1.5rem;
-  }
-
-  .title {
-    h4 {
-      font-size: $h2-font-size;
-    }
-  }
-}
-</style>

package/components/help_row.vue

@@ -1,33 +0,0 @@
-<template>
-  <b-card video-help no-body>
-    <b-card-header>
-      <b-button variant="video-help" v-b-toggle="`help-${id}`">
-        {{ title }}
-      </b-button>
-    </b-card-header>
-    <b-collapse :id="`help-${id}`">
-      <b-card-body>
-        <slot />
-      </b-card-body>
-    </b-collapse>
-  </b-card>
-</template>
-
-<script>
-import { BCard, BCardHeader, BCollapse, BCardBody, BButton } from 'bootstrap-vue'
-
-export default {
-  name: 'HelpRow',
-  components: { BCard, BCardHeader, BCollapse, BCardBody, BButton },
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>

package/components/payment_logo.vue

@@ -1,37 +0,0 @@
-<template>
-  <div>
-    <svg :class="$style.logo" role="presentation">
-      <slot />
-    </svg>
-    <div :class="$style.label">{{ label }}</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PaymentLogo',
-  props: {
-    label: {
-      type: String,
-      default: 'visa'
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-  .label {
-    @include sr-only;
-    text-transform: uppercase;
-    height: 0;
-    width: 0;
-  }
-
-  .logo {
-    display: block;
-    height: 2.5rem;
-    width: 4rem;
-  }
-
-</style>

package/components/placeholder.vue

@@ -1,45 +0,0 @@
-<template>
-  <div :class="$style.placeholder" :style="stylePlaceholder">.</div>
-</template>
-
-<script>
-export default {
-  name: 'Placeholder',
-  props: {
-    margin: {
-      type: String,
-      default: "0"
-    },
-    height: {
-      type: Number,
-      default: 1.5
-    },
-    width: {
-      type: String,
-      default: "100"
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  computed: {
-    stylePlaceholder() {
-      // dynamic styles are placed inline
-      let string = `margin-bottom: ${this.margin}rem; line-height: ${this.height}; width: ${this.width}%;`;
-      if (this.right) {
-        string += `margin-left: ${100 - this.width}%`;
-      }
-      return string;
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.placeholder {
-  @include placeholder;
-}
-
-</style>