barbican-reset 3.22.0 → 3.23.0

package/scss/{card/index.scss → _br-card.scss}

@@ -1,14 +1,4 @@
-@use "../mixins/br-card" as *;
-
-@use "block";
-@use "confirm";
-@use "login";
-@use "membership";
-@use "membership-new";
-@use "password";
-@use "related";
-@use "slim";
-@use "video-help";
+@use "mixins/br-card" as *;
 
 .br-card {
   @include br-card;
@@ -26,6 +16,10 @@
   @include br-card-subtitle;
 }
 
+.br-card-subtitle+.br-card-subtitle {
+  margin-top: var(--margin-xs);
+}
+
 .br-card-body {
   @include br-card-body;
 }
@@ -36,4 +30,12 @@
 
 .br-card-footer {
   @include br-card-footer;
+}
+
+.br-card-tearoff {
+  @include br-card-tearoff;
+}
+
+.br-card-text {
+  @include br-card-text;
 }

package/scss/_br-wrap.scss

@@ -14,4 +14,13 @@
     grid-template-columns: repeat(2, 1fr);
     gap: var(--gap-lg);
   }
+}
+
+.br-wrap.cluster {
+  margin: var(--margin-wrap-xs);
+}
+
+.br-wrap.cluster>* {
+  margin: var(--margin-xs);
+  vertical-align: middle;
 }

package/scss/_variables.scss

@@ -140,7 +140,7 @@
   --font-size-h1: 2.25rem;
   --font-size-h2: 2rem;
   --font-size-h3: 1.75rem;
-  --font-size-h4: 1.5rem;
+  --font-size-h4: 1.375rem;
   --font-size-h5: 1.25rem;
   --font-size-h6: 1rem;
   --font-size-sm: 0.875rem;
@@ -153,16 +153,16 @@
   --line-height-sm: 1.15;
   --line-height-md: 1.35;
   --line-height-button-menu: 2.375rem;
-  --margin-xs: 0.25rem;
+  --margin-xs: 0.3125rem;
   --margin-sm: 0.5rem;
   --margin-md: 0.75rem;
   --margin-lg: 1rem;
   --margin-xl: 1.5rem;
   --margin-xxl: 2rem;
   --margin-xxxl: 2.5rem;
-  --margin-wrap-sm: calc(var(--margin-xs) * -1);
-  --margin-wrap-md: calc(var(--margin-sm) * -1);
-  --margin-wrap-lg: calc(var(--margin-md) * -1);
+  --margin-wrap-xs: calc(var(--margin-xs) * -1);
+  --margin-wrap-sm: calc(var(--margin-sm) * -1);
+  --margin-wrap-md: calc(var(--margin-md) * -1);
   --min-height-button: 2.5rem;
   --min-height-iframe-sm: 27.5rem;
   --min-height-iframe-lg: 36.875rem;
@@ -189,7 +189,7 @@
   --width-layout-sm: 50rem;
   --width-layout-md: 60rem;
   --width-layout-lg: 75rem;
-  --width-qr: 6.25rem;
+  --width-qrcode: 9.5rem;
 }
 
 /// @deprecated $br-input-border-color => var(--color-black-25-lighten);

package/scss/atomic/_max-widths.scss

@@ -0,0 +1,29 @@
+$iterations: (
+  "0": 0,
+  "0-5": 0.5,
+  "1": 1,
+  "1-5": 1.5,
+  "2": 2,
+  "2-5": 2.5,
+  "3": 3,
+  "3-5": 3.5,
+  "4": 4,
+  "4-5": 4.5,
+  "5": 5,
+  "5-5": 5.5,
+  "6": 6,
+  "6-5": 6.5,
+  "7": 7,
+  "7-5": 7.5,
+  "8": 8,
+  "8-5": 8.5,
+  "9": 9,
+  "9-5": 9.5,
+  "10": 10,
+);
+
+@each $name, $value in $iterations {
+  .max-width-#{$name} {
+    max-width: #{$value}rem;
+  }
+}

package/scss/index.scss

@@ -3,6 +3,7 @@
 
 @use "br-alert";
 @use "br-button";
+@use "br-card";
 @use "br-container";
 @use "br-footer";
 @use "br-form-checkbox";
@@ -22,8 +23,6 @@
 @use "br-table-header";
 @use "br-wrap";
 
-@use "card";
-@use "card-deck";
 @use "city-of-london";
 @use "close-icon";
 @use "form";

package/scss/mixins/_br-card.scss

@@ -5,6 +5,8 @@
 @use "card/navlink" as *;
 @use "card/navitem" as *;
 @use "card/ticket" as *;
+@use "card/membership" as *;
+@use "card/qrcode" as *;
 
 @mixin br-card {
   border-color: var(--color-black-25-lighten);
@@ -38,6 +40,14 @@
     @include br-card--ticket;
   }
 
+  &.membership {
+    @include br-card--membership;
+  }
+
+  &.qrcode {
+    @include br-card--qrcode;
+  }
+
   iframe {
     min-height: var(--min-height-iframe-lg);
 
@@ -72,7 +82,11 @@
 }
 
 @mixin br-card-subtitle {
-  font-size: var(--font-size-h6);
+  font-size: var(--font-size-h5);
+
+  @include medium-up {
+    font-size: var(--font-size-h4);
+  }
 }
 
 @mixin br-card-body {
@@ -110,4 +124,15 @@
   .br-card-body {
     @include br-card-body;
   }
+}
+
+@mixin br-card-tearoff {
+  border-top-color: var(--color-black-25-lighten);
+  border-top-width: var(--border-width-sm);
+  border-top-style: dashed;
+}
+
+@mixin br-card-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

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

@@ -35,7 +35,7 @@
   }
 
   .content.radios {
-    margin: var(--margin-wrap-sm);
+    margin: var(--margin-wrap-xs);
   }
 
   .content>fieldset {

package/scss/mixins/_buttons.scss

@@ -1,5 +1,6 @@
 @forward "buttons/setup";
 @forward "buttons/outline";
 @forward "buttons/solid";
+@forward "buttons/slim";
 @forward "buttons/custom";
 @forward "buttons/spektrix";

package/scss/mixins/_core.scss

@@ -8,7 +8,7 @@
     @include inline-block;
 
     & {
-      margin-right: var(--margin-wrap-sm);
+      margin-right: var(--margin-wrap-xs);
       height: 100%;
       content: "";
     }

package/scss/mixins/buttons/_custom.scss

@@ -1,22 +1,30 @@
 @use "../../mixins/focus" as *;
 @use "../../mixins/core" as *;
 @use "../../mixins/breakpoints" as *;
-@use "../../mixins/buttons/solid" as *;
-@use "../../mixins/buttons/outline" as *;
-@use "../../mixins/buttons/setup" as *;
 @use "../../functions" as *;
+
+@use "outline" as *;
+@use "setup" as *;
+@use "slim" as *;
+@use "solid" as *;
+
 @use "custom/outline-primary" as *;
 @use "custom/outline-secondary" as *;
 @use "custom/primary" as *;
 @use "custom/secondary" as *;
 
+@forward "custom/add-to-wallet";
 @forward "custom/exit-overlay";
+@forward "custom/invisible";
+@forward "custom/manage-order";
+@forward "custom/navcard";
+@forward "custom/outline-alert-neutral";
 @forward "custom/outline-primary";
 @forward "custom/outline-secondary";
 @forward "custom/primary";
 @forward "custom/renew-membership";
 @forward "custom/secondary";
-@forward "custom/see-tickets-info";
+@forward "custom/summary";
 
 @mixin link-button($color: inherit,
   $background: transparent,
@@ -41,7 +49,7 @@
   @include solid-button($padding: 0.75em);
   white-space: nowrap;
 
-  @include disabled {
+  &:disabled {
     @include btn-outline-secondary;
   }
 }
@@ -239,17 +247,6 @@
   }
 }
 
-@mixin btn-invisible {
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  padding: 0;
-
-  @include focus {
-    box-shadow: none;
-  }
-}
-
 @mixin btn-membership-pill {
   @include outline-button(var(--color-black-80-lighten), white);
 

package/scss/mixins/buttons/_setup.scss

@@ -1,63 +1,25 @@
-@mixin disabled {
-
-  &:disabled,
-  &.disabled {
-    @content;
-  }
-}
-
-@mixin small-button {
-  padding: var(--padding-sm);
-  font-size: var(--font-size-sm);
-}
-
-@mixin setup-slim-button {
-  padding: var(--padding-md);
-}
-
-@mixin setup-large-button {
-  padding-bottom: var(--padding-lg);
-  padding-top: var(--padding-lg);
-  font-size: 1.125rem;
-}
-
 @mixin setup-button {
   border-radius: var(--border-radius-lg);
   line-height: var(--line-height-xs);
-  padding: var(--padding-lg);
   font-size: var(--font-size-body);
+  border-color: currentColor;
+  padding: var(--padding-lg);
+  justify-content: center;
+  vertical-align: middle;
   text-decoration: none;
   font-family: inherit;
+  display: inline-flex;
+  border-style: solid;
+  align-items: center;
   text-align: center;
+  gap: var(--gap-sm);
   font-weight: bold;
   transition: none;
   cursor: pointer;
-
-  justify-content: center;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--gap-sm);
+  color: inherit;
 
   &:focus {
     box-shadow: none;
     outline: none;
   }
-
-  &[slim] {
-    @include setup-slim-button;
-  }
-
-  &[large] {
-    @include setup-large-button;
-  }
-
-  @include disabled {
-    opacity: 1; // override bootstrap
-  }
-}
-
-// @mixin flex-button($gap: var(--gap-sm)) {
-//   display: inline-flex;
-//   align-items: center;
-//   gap: $gap;
-// }
+}

package/scss/mixins/buttons/_slim.scss

@@ -0,0 +1,3 @@
+@mixin btn-slim {
+  padding: var(--padding-md);
+}

package/scss/mixins/buttons/custom/_add-to-wallet.scss

@@ -0,0 +1,12 @@
+@mixin btn-add-to-wallet {
+  border-width: var(--border-width-sm);
+  color: var(--color-black-80-lighten);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-black-80-lighten);
+    border-color: var(--color-black-80-lighten);
+    color: white;
+  }
+}

package/scss/mixins/buttons/custom/_invisible.scss

@@ -0,0 +1,10 @@
+@mixin btn-invisible {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  &:focus,
+  &:hover {
+    box-shadow: none;
+  }
+}

package/scss/mixins/buttons/custom/_manage-order.scss

@@ -0,0 +1,11 @@
+@mixin btn-manage-order {
+  border-width: var(--border-width-sm);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-brand-generic-15-lighten);
+    border-color: var(--color-brand-generic-90-darken);
+    color: var(--color-brand-generic-90-darken);
+  }
+}

package/scss/mixins/buttons/custom/_navcard.scss

@@ -0,0 +1,32 @@
+@use "../slim" as *;
+
+@mixin btn-tint {
+  background-color: var(--color-brand-generic-15-lighten);
+  color: var(--color-brand-generic-90-darken);
+  border-color: currentColor;
+}
+
+@mixin btn-navcard {
+  @include btn-slim;
+
+  & {
+    border-width: var(--border-width-sm);
+    background-color: white;
+  }
+
+  &.btn-active {
+    @include btn-tint;
+  }
+
+  &.btn-active:hover,
+  &.btn-active:focus {
+    background-color: var(--color-brand-generic);
+    border-color: var(--color-brand-generic);
+    color: white;
+  }
+
+  &:not(.btn-active):hover,
+  &:not(.btn-active):focus {
+    @include btn-tint;
+  }
+}

package/scss/mixins/buttons/custom/_outline-alert-neutral.scss

@@ -0,0 +1,10 @@
+@mixin btn-outline-alert-neutral {
+  border-width: var(--border-width-sm);
+  color: var(--color-status-neutral);
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-status-neutral-10-lighten);
+  }
+}

package/scss/mixins/buttons/custom/_renew-membership.scss

@@ -13,15 +13,14 @@ $iterations: (
 @mixin btn-renew-membership {
   @include outline-button($color: white, $background: transparent);
 
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
+    color: var(--color-black-60-lighten);
+
     @each $name, $value in $iterations {
       &.#{$name} {
         color: #{$value};
       }
     }
   }
-
-  &:active {
-    transform: scale(0.98);
-  }
 }

package/scss/mixins/buttons/custom/_summary.scss

@@ -0,0 +1,19 @@
+@use "invisible" as *;
+
+@mixin btn-summary {
+  @include btn-invisible;
+
+  & {
+    justify-content: space-between;
+    font-weight: inherit;
+    align-items: center;
+    width: 100%;
+  }
+
+  &:hover,
+  &:focus {
+    .br-summary-icon {
+      outline-style: dashed;
+    }
+  }
+}

package/scss/mixins/card/_inline.scss

@@ -1,4 +1,3 @@
 @mixin br-card--inline {
-  margin: var(--margin-sm);
   display: inline-block;
 }

package/scss/{card → mixins/card}/_membership.scss

@@ -1,4 +1,5 @@
-@use "../mixins/breakpoints" as *;
+@use "../../mixins/breakpoints" as *;
+@use "inline" as *;
 
 $colors: (
   "member": var(--color-brand-membership),
@@ -19,34 +20,43 @@ $gradients: (
   "young-barbican": linear-gradient(120deg, var(--color-youngbarbican-1) 0%, var(--color-youngbarbican-2) 50%, var(--color-youngbarbican-3) 95%),
 );
 
-.br-card.membership {
-  background-color: var(--color-black-60-lighten);
-  min-height: 12.75rem;
-  border-width: 0;
-  color: white;
-
-  @include small-up {
+@mixin br-card--membership {
+  & {
+    background-color: var(--color-black-60-lighten);
     max-width: var(--width-layout-xs);
-    margin: var(--margin-xs);
-    display: inline-block;
+    min-height: 12.75rem;
+    border-width: 0;
+    color: white;
     width: 100%;
   }
-}
 
-.br-card.membership+.br-card.membership {
   @include small-up {
-    margin-top: 0;
+    @include br-card--inline;
+  }
+
+  @include small-down {
+    +.br-card.membership {
+      margin-top: var(--margin-md);
+    }
+  }
+
+  @each $name, $value in $colors {
+    &.#{$name} {
+      background-color: #{$value};
+    }
   }
-}
 
-@each $name, $value in $colors {
-  .br-card.membership.#{$name} {
-    background-color: #{$value};
+  @each $name, $value in $gradients {
+    &.#{$name} {
+      background-image: #{$value};
+    }
   }
-}
 
-@each $name, $value in $gradients {
-  .br-card.membership.#{$name} {
-    background-image: #{$value};
+  .br-card-title {
+    font-size: var(--font-size-h4);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: bold;
+    overflow: hidden;
   }
 }

package/scss/mixins/card/_navitem.scss

@@ -13,7 +13,7 @@
     transform: scale(1);
   }
 
-  &.router-link-exact-active {
+  &.disabled {
     outline-offset: calc(var(--border-width-sm) * -1);
     background-color: var(--color-brand-generic);
     outline-color: var(--color-brand-generic);
@@ -24,7 +24,15 @@
     color: white;
   }
 
-  &:not(.router-link-active):hover {
+  &.router-link-active:not(.router-link-exact-active) {
+    background-color: var(--color-brand-generic-15-lighten);
+    color: var(--color-brand-generic-90-darken);
+    outline-color: var(--color-brand-generic);
+    text-decoration: underline;
+    border-color: currentColor;
+  }
+
+  &:not(.disabled):hover {
     color: var(--color-brand-generic-90-darken);
     outline-color: var(--color-brand-generic);
     text-decoration: underline;

package/scss/mixins/card/_qrcode.scss

@@ -0,0 +1,21 @@
+@use "../../mixins/breakpoints" as *;
+@use "inline" as *;
+
+@mixin br-card--qrcode {
+  @include br-card--inline;
+
+  & {
+    border-color: currentColor;
+  }
+
+  .br-card-text {
+    margin-top: var(--margin-md);
+    width: var(--width-qrcode);
+    word-wrap: break-word;
+    text-align: center;
+  }
+
+  p+p {
+    margin-top: var(--margin-xs);
+  }
+}

package/scss/_card-deck.scss

@@ -1,26 +0,0 @@
-@use "mixins/breakpoints";
-
-.card-deck {
-  justify-content: center;
-  display: grid;
-  gap: var(--gap-xl);
-
-  @include breakpoints.medium-up {
-    align-items: flex-start;
-    grid-auto-flow: column;
-  }
-
-  .br-card {
-    max-width: var(--width-title);
-    margin-top: 0;
-  }
-
-  .br-card-title {
-    font-size: var(--font-size-h3);
-  }
-
-  .br-card-img {
-    border-radius: var(--border-radius-lg);
-    margin-top: var(--margin-lg);
-  }
-}

package/scss/mixins/buttons/custom/_see-tickets-info.scss

@@ -1,18 +0,0 @@
-@use "outline-secondary" as *;
-
-@mixin btn-see-tickets-info {
-  @include btn-outline-secondary;
-
-  & {
-    margin-top: var(--margin-lg);
-    padding: var(--padding-md);
-    text-align: left;
-
-    &:hover,
-    &:focus {
-      background-color: var(--color-brand-generic-15-lighten);
-      border-color: var(--color-brand-generic-90-darken);
-      color: var(--color-brand-generic-90-darken);
-    }
-  }
-}