barbican-reset 3.4.0 → 3.6.0

package/scss/helpers/mixins/_buttons.scss

@@ -1,356 +1,5 @@
-@import "buttons/setup";
-@import "buttons/outline";
-@import "buttons/solid";
-
-@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;
-}
-
-@import "buttons/spektrix";
+@forward "buttons/setup";
+@forward "buttons/outline";
+@forward "buttons/solid";
+@forward "buttons/custom";
+@forward "buttons/spektrix";

package/scss/helpers/mixins/_city-of-london.scss

@@ -1,3 +1,5 @@
+@use "../mixins/focus" as *;
+
 @mixin city-of-london-lockup {
   text-decoration: none;
   display: inline-flex;
@@ -8,4 +10,4 @@
     text-decoration: underline;
     outline: none;
   }
-}
+}

package/scss/helpers/mixins/_content.scss

@@ -1,3 +1,6 @@
+@use "../mixins/breakpoints" as *;
+@use "../variables/layout" as *;
+
 @mixin content_masthead {
   background-color: white;
   box-shadow: 0 5px 5px rgba(black, 0.1);

package/scss/helpers/mixins/_core.scss

@@ -1,4 +1,4 @@
-@mixin inline-block($align:middle) {
+@mixin inline-block($align: middle) {
   vertical-align: $align;
   display: inline-block;
 }
@@ -15,4 +15,22 @@
 @mixin set-appearance($value: none) {
   -webkit-appearance: $value;
   -moz-appearance: $value;
+}
+
+@mixin inset($val: 0) {
+  bottom: $val;
+  right: $val;
+  left: $val;
+  top: $val;
+}
+
+@mixin sr-only {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  height: 1px;
+  padding: 0;
+  width: 1px;
+  border: 0;
 }

package/scss/helpers/mixins/_festival.scss

@@ -1,3 +1,7 @@
+@use "../variables/colors" as *;
+@use "../mixins/breakpoints" as *;
+@use "../variables/layout" as *;
+
 @mixin narrow-width {
   max-width: 20rem;
 

package/scss/helpers/mixins/_focus.scss

@@ -1,3 +1,6 @@
+@use "../variables/colors" as *;
+@use "../mixins/core" as *;
+
 @mixin focus-visible {
   &[data-focus-visible-added] {
     @content;
@@ -45,7 +48,7 @@
 // @mixin focus-tabs-dark {
 //   @include single-box(white);
 //   background-color: white;
-//   color: $black;
+//   color: black;
 // } // deprecated
 
 @mixin box-setup {
@@ -54,7 +57,7 @@
   z-index: 2;
 }
 
-@mixin double-box($bg: white, $col: $black, $bg_size: 0.25rem, $col_size: 0.15rem) {
+@mixin double-box($bg: 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;
 }

package/scss/helpers/mixins/_headings.scss

@@ -1,3 +1,6 @@
+@use "../variables/typography" as *;
+@use "../functions" as *;
+
 /// Generic margin/font weight reset for title headings
 /// @param {String} $margin [0] - pixel value 
 @mixin br-heading($margin: 0) {

package/scss/helpers/mixins/_input.scss

@@ -1,6 +1,6 @@
-@import "input/generic";
-@import "input/status";
-@import "input/checkbox";
-@import "input/select";
-@import "input/radio";
-@import "input/text";
+@forward "input/generic";
+@forward "input/status";
+@forward "input/checkbox";
+@forward "input/select";
+@forward "input/radio";
+@forward "input/text";

package/scss/helpers/mixins/_loading.scss

@@ -1,31 +1,43 @@
+@use "../mixins/core" as *;
+@use "../variables/colors" as *;
+
 @mixin loading-icon($size: 0.75rem) {
   @include inline-block;
-  border-radius: 50%;
-  position: absolute;
-  height: $size;
-  width: $size;
-  content: "";
+
+  & {
+    border-radius: 50%;
+    position: absolute;
+    height: $size;
+    width: $size;
+    content: "";
+  }
 }
 
 @mixin placeholder($color: $br-gray-300) {
-  background-color: $color;
-  color: $color;
-  cursor: wait;
+  & {
+    background-color: $color;
+    color: $color;
+    cursor: wait;
+  }
+
 }
 
 @mixin placeholder-animation($color: $br-gray-400, $width: false) {
   @include inline-block;
-  background-color: $color;
-  position: relative;
-  overflow: hidden;
-  color: $color;
-  cursor: wait;
-
-  @if $width {
-    width: $width;
-  }
 
-  $background: lighten($color, 40%);
+  & {
+    background-color: $color;
+    position: relative;
+    overflow: hidden;
+    color: $color;
+    cursor: wait;
+
+    @if $width {
+      width: $width;
+    }
+
+    $background: lighten($color, 40%);
+  }
 
   &::before {
     background: linear-gradient(to right, rgba($background, 0) 45%, rgba($background, 0.35) 50%, rgba($background, 0) 55%) 50% 50%;
@@ -42,7 +54,12 @@
   }
 
   @keyframes placeholder {
-    0% { transform: translate3d(-30%, 0, 0); }
-    100% { transform: translate3d(30%, 0, 0); }
+    0% {
+      transform: translate3d(-30%, 0, 0);
+    }
+
+    100% {
+      transform: translate3d(30%, 0, 0);
+    }
   }
 }

package/scss/helpers/mixins/_table.scss

@@ -1,48 +1,13 @@
-@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 default-table-style {
-
-  th,
-  td {
-    @include medium-up {
-      &:not(:last-of-type) {
-        border-right: 1px solid $c-grey-l87;
-      }
-
-      &:last-of-type {
-        text-align: right;
-      }
-    }
-  }
-}
-
-@import "table/simple";
-@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";
-
-@import "table/row/disabled";
+@use "table/basket";
+@use "table/details";
+@use "table/etickets";
+@use "table/generic";
+@use "table/gifts";
+@use "table/membership";
+@use "table/orders";
+@use "table/preferences";
+@use "table/resale";
+@use "table/row/disabled";
+@use "table/section";
+@use "table/simple";
+@use "table/tickets";

package/scss/helpers/mixins/account/_orders.scss

@@ -1,3 +1,5 @@
+@use "../../mixins/breakpoints" as *;
+
 @mixin row {
   grid-template-columns: 10rem 8rem auto 7rem;
   margin-bottom: 0.625rem;