barbican-reset 3.3.0 → 3.5.0

package/scss/helpers/mixins/buttons/_custom.scss

@@ -0,0 +1,360 @@
+@use "../../mixins/focus" as *;
+@use "../../mixins/core" as *;
+@use "../../variables/colors" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../variables/typography" as *;
+@use "../../mixins/buttons/solid" as *;
+@use "../../mixins/buttons/outline" as *;
+@use "../../mixins/buttons/setup" as *;
+@use "../../functions" as *;
+
+@mixin link-button($color: inherit,
+  $background: transparent,
+  $padding: 0,
+  $line-height: false) {
+  background-color: $background;
+  text-decoration: underline;
+  vertical-align: baseline;
+  padding: $padding;
+  border-radius: 0;
+  font-weight: normal;
+  text-align: left;
+  color: $color;
+  border: none;
+
+  @if $line-height {
+    line-height: $line-height;
+  }
+}
+
+@mixin invisible-button {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+@mixin btn-primary($min-width: true) {
+  @include solid-button;
+
+  @if $min-width {
+    min-width: 8rem;
+  }
+
+  &[disabled="disabled"] {
+    @include solid-button($c-grey-l21);
+    cursor: not-allowed;
+  }
+}
+
+@mixin btn-returns {
+  @include solid-button($padding: 0.75em);
+  white-space: nowrap;
+
+  @include disabled {
+    @include btn-outline-secondary;
+  }
+}
+
+@mixin btn-cancel-returns {
+  @include solid-button($background: $c-grey-l21, $padding: 0.75em);
+}
+
+@mixin btn-outline-primary {
+  @include outline-button;
+
+  @include focus {
+    @include outline-button-focus;
+  }
+}
+
+@mixin btn-resale {
+  @include outline-button($padding: 0.625em, $font-size: $font-size-sm);
+}
+
+@mixin btn-secondary {
+  @include solid-button($c-grey-l21);
+}
+
+@mixin btn-outline-secondary {
+  @include outline-button($c-grey-l21);
+}
+
+@mixin btn-outline-header {
+  @include outline-button($color: white,
+    $background: $c-brand-generic,
+    $border: 0.125rem);
+  @include flex-button;
+}
+
+@mixin btn-input-edit {
+  @include outline-button($c-grey-l44);
+  background-color: $c-grey-l87;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-color: $c-grey-l65;
+  padding: 0.625rem 0.75rem;
+}
+
+@mixin btn-cinema {
+  @include solid-button($c-brand-cinema);
+}
+
+@mixin btn-info {
+  @include solid-button($c-status-neutral);
+}
+
+@mixin btn-outline-info {
+  @include outline-button($c-status-neutral);
+}
+
+@mixin btn-outline-cinema {
+  @include outline-button($c-brand-cinema);
+}
+
+@mixin btn-remove {
+  @include solid-button($background: $c-grey-l21,
+    $padding: 0.625em,
+    $line-height: 1.375);
+}
+
+@mixin btn-link {
+  @include link-button($line-height: 1.3);
+
+  @include focus {
+    @include focus-tabs;
+  }
+}
+
+@mixin btn-video-help {
+  @include link-button($padding: 1.25em, $background: $c-grey-l96);
+  font-weight: bold;
+  width: 100%;
+
+  @include focus {
+    background-color: $c-grey-l44;
+    color: white;
+  }
+}
+
+@mixin btn-exit {
+  @include link-button;
+
+  svg {
+    display: block;
+  }
+
+  @include focus {
+    @include single-box(currentColor,
+      0.1875rem); // @BUG: safari outline + border-radius
+    border-radius: 50%;
+
+    path.cross {
+      fill: white;
+    }
+
+    path.tint {
+      fill: currentColor;
+    }
+  }
+}
+
+@mixin btn-remove-ticket {
+  @include small-down {
+    @include btn-remove;
+    width: 100%;
+  }
+
+  @include small-up {
+    @include btn-link;
+  }
+}
+
+@mixin btn-remove-gift {
+  @include x-large-down {
+    @include btn-remove;
+    width: 100%;
+  }
+
+  @include x-large-up {
+    @include btn-link;
+  }
+}
+
+@mixin btn-membership-card {
+  @include outline-button($color: white, $background: transparent);
+
+  @include focus {
+    &.member {
+      color: $c-brand-membership;
+    }
+
+    &.member-plus {
+      color: $c-brand-membership-dark;
+    }
+  }
+}
+
+@mixin btn-video-login {
+  @include solid-button($background: white, $color: #0a0a0a);
+}
+
+@mixin btn-cta {
+  @include solid-button($background: $c-grey-l21);
+  @include flex-button;
+  fill: white;
+}
+
+@mixin btn-carousel {
+  @include solid-button($c-grey-l21);
+  @include single-box(white);
+  border-radius: 50%;
+  font-size: 0;
+  fill: white;
+
+  @include large-down {
+    padding: 0.75rem;
+  }
+
+  &:disabled {
+    background-color: $c-grey-l87;
+    border-color: $c-grey-l87;
+    opacity: 1;
+  }
+
+  label {
+    @include sr-only;
+  }
+}
+
+@mixin btn-menu-focus($brand: $c-brand-generic) {
+  background-color: white;
+  color: $brand;
+
+  path {
+    fill: currentColor;
+  }
+}
+
+@mixin btn-menu {
+  @include outline-button($color: white,
+    $background: $c-brand-generic,
+    $padding: 0 0.75rem,
+    $margin: 0.25rem,
+    $line-height: 2.375rem);
+  @include flex-button($gap: 0.75rem);
+  vertical-align: middle;
+  min-height: 2.5rem;
+
+  @include focus {
+    @include btn-menu-focus;
+  }
+
+  @include data("clicked") {
+    @include btn-menu-focus;
+  }
+}
+
+@mixin btn-basket {
+  @include solid-button($background: white,
+    $color: $c-brand-generic,
+    $padding: 0 0.75rem,
+    $margin: 0.25rem,
+    $line-height: 2.375rem);
+  @include flex-button($gap: 0.5rem);
+  vertical-align: middle;
+  min-height: 2.5rem;
+
+  @include focus {
+    @include btn-menu-focus;
+  }
+
+  @include data("clicked") {
+    @include btn-menu-focus;
+  }
+}
+
+@mixin btn-discover {
+  @include outline-button(white, $c-grey-l21);
+  @include flex-button($gap: 0.75rem);
+
+  span {
+    position: relative;
+    top: 0.125rem;
+  }
+}
+
+@mixin btn-invisible {
+  color: inherit;
+  border: none;
+  padding: 0;
+
+  @include focus {
+    box-shadow: none;
+  }
+}
+
+@mixin btn-membership-pill {
+  @include outline-button($c-grey-l11, white);
+
+  $border: 1px solid $c-grey-l11;
+
+  &:hover {
+    @include outline-button-focus($c-grey-l87, $c-grey-l11, $border);
+  }
+
+  @include focus-visible {
+    @include outline-button-focus($c-grey-l87, $c-grey-l11, $border);
+    outline: $border;
+  }
+
+  &[data-status="active"] {
+    @include outline-button-focus($c-grey-l11, white, $border);
+
+    @include focus {
+      outline: 2px solid $c-grey-l11;
+      outline-offset: toRem(2);
+    }
+  }
+}
+
+@mixin btn-priority-row {
+  @include btn-outline-primary;
+  @include flex-button($gap: 0.5rem);
+}
+
+@mixin btn-login-to-book {
+  @include btn-primary;
+  @include flex-button($gap: 0.5rem);
+}
+
+@mixin btn-sold-out {
+  @include btn-secondary;
+  @include flex-button($gap: 0.5rem);
+  pointer-events: none;
+  min-width: initial;
+}
+
+@mixin btn-add-membership-to-basket {
+  @include solid-button($background: $c-brand-membership);
+  @include flex-button($gap: 0.5rem);
+}
+
+@mixin btn-remove-membership-from-basket {
+  @include solid-button($background: $c-status-error);
+  @include flex-button($gap: 0.5rem);
+}
+
+@mixin btn-additional-information {
+  @include btn-outline-primary;
+  @include flex-button($gap: 0.5rem);
+}
+
+@mixin btn-toggle-password {
+  @include btn-secondary;
+  place-items: center;
+  padding: 0;
+}
+
+@mixin btn-expand {
+  display: block;
+}

package/scss/helpers/mixins/buttons/_outline.scss

@@ -1,3 +1,6 @@
+@use "../../mixins/focus" as *;
+@use "../../variables/colors" as *;
+
 @mixin outline-button($color: $c-brand-generic,
   $background: white,
   $border: 1px,

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

@@ -1,4 +1,8 @@
+@use "../../variables/layout" as *;
+@use "../../variables/typography" as *;
+
 @mixin disabled {
+
   &:disabled,
   &.disabled {
     @content;

package/scss/helpers/mixins/buttons/_solid.scss

@@ -1,3 +1,6 @@
+@use "../../mixins/focus" as *;
+@use "../../variables/colors" as *;
+
 @mixin solid-button--color($color: white, $background: $c-brand-generic, $border: 1px) {
   border: $border solid $background;
   background-color: $background;

package/scss/helpers/mixins/buttons/_spektrix.scss

@@ -1,3 +1,9 @@
+@use "../../variables/typography" as *;
+@use "../../variables/colors" as *;
+@use "../../mixins/buttons/setup" as *;
+@use "../../mixins/buttons/solid" as *;
+@use "../../mixins/buttons/outline" as *;
+
 @mixin spx-btn-primary {
   @include btn-primary;
 

package/scss/helpers/mixins/drupal/_br-search-form.scss

@@ -1,3 +1,9 @@
+@use "../../mixins/focus" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../mixins/core" as *;
+@use "../../variables/colors" as *;
+@use "../../functions" as *;
+
 @mixin br-search-form {
   max-width: 20rem;
 

package/scss/helpers/mixins/drupal/_br-site-logo.scss

@@ -1,3 +1,5 @@
+@use "../../mixins/focus" as *;
+
 @mixin br-site-logo {
   a {
     display: block;
@@ -11,4 +13,4 @@
       display: block;
     }
   }
-}
+}

package/scss/helpers/mixins/drupal/index.scss

@@ -1,7 +1,6 @@
-
-@import "br-border-reset";
-@import "br-column";
-@import "br-container";
-@import "br-inner";
-@import "br-search-form";
-@import "br-site-logo";
+@forward "br-border-reset";
+@forward "br-column";
+@forward "br-container";
+@forward "br-inner";
+@forward "br-search-form";
+@forward "br-site-logo";

package/scss/helpers/mixins/index.scss

@@ -1,40 +1,22 @@
-@mixin inset($val: 0) {
-  bottom: $val;
-  right: $val;
-  left: $val;
-  top: $val;
-}
+@forward "account/orders";
+@forward "drupal";
 
-@mixin sr-only {
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-  overflow: hidden;
-  margin: -1px;
-  height: 1px;
-  padding: 0;
-  width: 1px;
-  border: 0;
-}
-
-@import "account/orders";
-@import "drupal/index.scss";
-
-@import "basket";
-@import "br-alert";
-@import "br-card";
-@import "br-footer";
-@import "br-form-password";
-@import "br-form-row";
-@import "br-form-update";
-@import "br-skiplink";
-@import "breakpoints";
-@import "buttons";
-@import "city-of-london";
-@import "content";
-@import "core";
-@import "festival";
-@import "focus";
-@import "headings";
-@import "input";
-@import "loading";
-@import "table";
+@forward "basket";
+@forward "br-alert";
+@forward "br-card";
+@forward "br-footer";
+@forward "br-form-password";
+@forward "br-form-row";
+@forward "br-form-update";
+@forward "br-skiplink";
+@forward "breakpoints";
+@forward "buttons";
+@forward "city-of-london";
+@forward "content";
+@forward "core";
+@forward "festival";
+@forward "focus";
+@forward "headings";
+@forward "input";
+@forward "loading";
+@forward "table";

package/scss/helpers/mixins/input/_checkbox.scss

@@ -1,3 +1,5 @@
+@use "generic" as *;
+
 @mixin br-checkbox($state: neutral) {
   @include generic-input($state, checkbox);
   display: block;

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

@@ -1,3 +1,8 @@
+@use "../../mixins/focus" as *;
+@use "../../variables/layout" as *;
+@use "../../variables/colors" as *;
+@use "../../functions" as *;
+
 @mixin generic-input-wrap {
   position: relative;
   padding: 0;

package/scss/helpers/mixins/input/_radio.scss

@@ -1,3 +1,5 @@
+@use "generic" as *;
+
 // formerly radio-input
 
 @mixin br-radio($state: neutral) {

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

@@ -1,3 +1,7 @@
+@use "../../mixins/focus" as *;
+@use "../../variables/layout" as *;
+@use "../../variables/colors" as *;
+
 // formerly custom-select
 
 @mixin br-select {

package/scss/helpers/mixins/input/_status.scss

@@ -1,16 +1,19 @@
+@use "sass:map";
+@use "../../mixins/focus" as *;
+
 @mixin status-input($color) {
   @include focus {
-    &:checked ~ label {
-      @include single-box(map-get($color, base), 0.0625rem);
-      border: 1px solid map-get($color, base);
-      background-color: map-get($color, fade);
-      color: map-get($color, base);
+    &:checked~label {
+      @include single-box(map.get($color, base), 0.0625rem);
+      border: 1px solid map.get($color, base);
+      background-color: map.get($color, fade);
+      color: map.get($color, base);
     }
   }
 
-  &:checked ~ label {
-    border: 1px solid map-get($color, base);
-    background-color: map-get($color, fade);
-    color: map-get($color, base);
+  &:checked~label {
+    border: 1px solid map.get($color, base);
+    background-color: map.get($color, fade);
+    color: map.get($color, base);
   }
-}
+}

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

@@ -1,3 +1,9 @@
+@use "../../variables/layout" as *;
+@use "../../variables/colors" as *;
+@use "../../variables/typography" as *;
+@use "../../mixins/focus" as *;
+@use "../../functions" as *;
+
 @mixin all-text-inputs {
 
   [type='color'],

package/scss/helpers/mixins/table/_basket.scss

@@ -1,6 +1,11 @@
-@mixin basket-table {
+@use "generic";
+@use "../basket" as *;
+@use "../../variables/typography" as *;
+@use "../../mixins/basket" as *;
+
+@mixin table {
   tr {
-    @include table-row;
+    @include generic.table-row;
     justify-content: space-between;
     display: flex;
     gap: 0.75rem;

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

@@ -1,4 +1,10 @@
-@mixin details-table {
+@use "../../variables/colors" as *;
+@use "../../variables/columns";
+@use "../../variables/layout" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../mixins/table/generic" as *;
+
+@mixin table {
   thead {
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
@@ -18,7 +24,7 @@
     display: grid;
 
     @include medium-up {
-      grid-template-columns: $columns-details--header;
+      grid-template-columns: columns.$details--header;
     }
 
     @include medium-down {

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

@@ -1,4 +1,12 @@
-@mixin etickets-table {
+@use "../../variables/columns";
+@use "../../variables/colors" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../variables/layout" as *;
+@use "../../mixins/table/generic" as *;
+@use "../../mixins/focus" as *;
+@use "../../mixins/breakpoints" as *;
+
+@mixin table {
   thead {
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
@@ -20,7 +28,7 @@
     }
 
     @include medium-up {
-      grid-template-columns: $columns-etickets;
+      grid-template-columns: columns.$etickets;
     }
 
     @include medium-down {

package/scss/helpers/mixins/table/_generic.scss

@@ -0,0 +1,40 @@
+@use "../../variables" as *;
+@use "../../variables/colors" as *;
+@use "../../mixins/breakpoints" as *;
+@use "../../mixins/core" as *;
+@use "../../mixins/focus" as *;
+
+@mixin table-row($gap: 0.75rem) {
+  border-bottom: 1px solid $c-grey-l87;
+  padding-bottom: $gap;
+  padding-top: $gap;
+}
+
+@mixin table-link--focus {
+  @include focus-tabs;
+}
+
+@mixin table-label($mq: $medium) {
+  font-size: $br-font-size-lg;
+  margin-bottom: 0.25rem;
+
+  @include min-width($mq) {
+    @include sr-only;
+  }
+}
+
+@mixin table-style {
+
+  th,
+  td {
+    @include medium-up {
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-l87;
+      }
+
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+}

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

@@ -1,4 +1,11 @@
-@mixin gifts-table {
+@use "../../mixins/breakpoints" as *;
+@use "../../variables/columns";
+@use "../../variables/layout" as *;
+@use "../../variables/colors" as *;
+@use "../../mixins/core" as *;
+@use "generic";
+
+@mixin table {
   thead {
     @include x-large-down {
       display: none;
@@ -11,8 +18,8 @@
 
   tr {
     @include x-large-up {
-      @include table-row;
-      grid-template-columns: $columns-gifts;
+      @include generic.table-row;
+      grid-template-columns: columns.$gifts;
       display: grid;
       gap: 0.75rem;