barbican-reset 2.29.0 → 2.31.0

package/helpers/mixins/_basket.scss

@@ -1,18 +1,19 @@
-
 @mixin summary-sm {
-  @include media-breakpoint-down(md) {
+  @include medium-down {
     @content;
   }
-  @include media-breakpoint-only(lg) {
+
+  @include large-only {
     @content;
   }
 }
 
 @mixin summary-lg {
-  @include media-breakpoint-only(md) {
+  @include medium-only {
     @content;
   }
-  @include media-breakpoint-up(xl) {
+
+  @include x-large-up {
     @content;
   }
 }
@@ -25,5 +26,5 @@
 
   @include summary-sm {
     grid-auto-flow: row;
-  }  
+  }
 }

package/helpers/mixins/_br-alert.scss

@@ -75,7 +75,7 @@
 }
 
 @mixin br-alert--setup {
-  @include media-breakpoint-down(xs) {
+  @include x-small-down {
     font-size: $font-size-sm;
   }
 

package/helpers/mixins/_br-card.scss

@@ -28,7 +28,7 @@
 @mixin br-card-footer {
   padding: 1rem;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     border-top: 1px solid $c-grey-l65;
   }
 }

package/helpers/mixins/_br-footer.scss

@@ -3,7 +3,7 @@
   display: grid;
   row-gap: 2rem;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     justify-content: flex-start;
     align-items: flex-start;
     grid-auto-flow: column;
@@ -24,4 +24,4 @@
 @mixin br-footer-lower {
   padding-bottom: 2rem;
   padding-top: 2rem;
-}
+}

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

@@ -1,24 +1,23 @@
-
-@mixin br-form-row($mq:sm) {
+@mixin br-form-row {
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
 
-  @include media-breakpoint-up($mq) {
+  @include small-up {
     grid-template-columns: 33fr 67fr;
     align-items: flex-start;
     gap: $gap-account;
     display: grid;
   }
 
-  > label {
-    @include media-breakpoint-up($mq) {
+  >label {
+    @include small-up {
       margin-top: 1rem;
     }
   }
 
   label {
-    @include media-breakpoint-down($mq) {
+    @include small-down {
       margin-bottom: 0.5rem;
     }
   }

package/helpers/mixins/_br-form-update.scss

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

package/helpers/mixins/_buttons.scss

@@ -154,23 +154,23 @@
 }
 
 @mixin btn-remove-ticket {
-  @include media-breakpoint-down(sm) {
+  @include small-down {
     @include btn-remove;
     width: 100%;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include small-up {
     @include btn-link;
   }
 }
 
 @mixin btn-remove-gift {
-  @include media-breakpoint-down(xl) {
+  @include x-large-down {
     @include btn-remove;
     width: 100%;
   }
 
-  @include media-breakpoint-up(xl) {
+  @include x-large-up {
     @include btn-link;
   }
 }
@@ -206,7 +206,7 @@
   font-size: 0;
   fill: white;
 
-  @include media-breakpoint-down(lg) {
+  @include large-down {
     padding: 0.75rem;
   }
 
@@ -303,6 +303,11 @@
 
   &[data-status="active"] {
     @include outline-button-focus($c-grey-l11, white, $border);
+
+    @include focus {
+      outline: 2px solid $c-grey-l11;
+      outline-offset: toRem(2);
+    }
   }
 }
 
@@ -317,7 +322,7 @@
   justify-content: center;
   min-width: initial;
 
-  @include media-breakpoint-down(md) {
+  @include medium-down {
     margin-top: 1rem;
     width: 100%;
   }

package/helpers/mixins/_content.scss

@@ -1,4 +1,3 @@
-
 @mixin content_masthead {
   background-color: white;
   box-shadow: 0 5px 5px rgba(black, 0.1);
@@ -27,7 +26,7 @@
   padding: 1.5rem 0;
   margin: 0 auto;
 
-  @include media-breakpoint-up(sm) {
+  @include small-up {
     padding: 2.5rem 0;
   }
 }

package/helpers/mixins/_festival.scss

@@ -1,18 +1,17 @@
-
 @mixin narrow-width {
   max-width: 20rem;
 
-  @include media-breakpoint-up(sm) {
+  @include small-up {
     max-width: 25rem;
   }
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     max-width: 50rem;
   }
 }
 
-@mixin columns($size:sm, $count:2) {
-  @include media-breakpoint-up($size) {
+@mixin columns($size: $small, $count: 2) {
+  @include min-width($size) {
     grid-template-columns: repeat($count, 1fr);
   }
 }
@@ -30,7 +29,7 @@
   text-align: center;
   padding: 1.25rem;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     margin-bottom: 3rem;
   }
 
@@ -41,7 +40,8 @@
 
 @mixin section-margins {
   margin-bottom: 2rem;
-  @include media-breakpoint-up(md) {
+
+  @include medium-up {
     margin-bottom: 3rem;
   }
 }

package/helpers/mixins/_table.scss

@@ -1,4 +1,3 @@
-
 @mixin table-row($gap: 0.75rem) {
   border-bottom: 1px solid $c-grey-l87;
   padding-bottom: $gap;
@@ -9,22 +8,24 @@
   @include focus-tabs;
 }
 
-@mixin table-label($mq:md) {
+@mixin table-label($mq: $medium) {
   font-size: $font-size-lg;
   margin-bottom: 0.25rem;
 
-  @include media-breakpoint-up($mq) {
+  @include min-width($mq) {
     @include sr-only;
   }
 }
 
 @mixin default-table-style {
-  th, td {
-    @include media-breakpoint-up(md) {
+
+  th,
+  td {
+    @include medium-up {
       &:not(:last-of-type) {
         border-right: 1px solid $c-grey-l87;
       }
-  
+
       &:last-of-type {
         text-align: right;
       }

package/helpers/mixins/account/_orders.scss

@@ -8,7 +8,7 @@
   padding: 0.5rem 0.75rem;
 
   &:last-of-type {
-    @include media-breakpoint-up(md) {
+    @include medium-up {
       text-align: right;
     }
   }

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

@@ -1,7 +1,7 @@
 @mixin br-search-form {
   max-width: 20rem;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     @include inline-block;
     max-width: 12.5rem;
     margin: 0.25rem;
@@ -18,7 +18,9 @@
 
   @if $background {
     background-color: input-bg($color);
-  } @else {
+  }
+
+  @else {
     background-color: transparent;
   }
 
@@ -28,11 +30,15 @@
 
   @include focus {
     @include no-border;
+
     @if $background {
       background-color: input-bg($color);
-    } @else {
+    }
+
+    @else {
       background-color: transparent;
     }
+
     @if $border {
       @include br-border-reset-left($color);
     }
@@ -56,7 +62,9 @@
 
   @if $background {
     background-color: input-bg($color);
-  } @else {
+  }
+
+  @else {
     background-color: transparent;
   }
 
@@ -74,4 +82,4 @@
       }
     }
   }
-}
+}

package/helpers/mixins/input/_select.scss

@@ -4,17 +4,17 @@
   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: 1px solid $c-grey-l65;
   background-color: $c-grey-l96;
-  border-radius: $border-radius-lg;
   background-size: 1rem 0.75rem;
   background-repeat: no-repeat;
   line-height: 1.375rem;
   color: $c-grey-l21;
+  font-size: inherit;
   font-weight: 400;
   transition: none;
   appearance: none;
-  font-size: 85%;
   display: block;
   width: 100%;
 

package/helpers/mixins/input/_text.scss

@@ -23,16 +23,24 @@
 @mixin text-input-defaults {
   border: solid $border-width $c-grey-l65;
   padding: toRem(14) toRem(14) 0.75rem;
-  background-color: $c-grey-l96;
   border-radius: $border-radius-lg;
+  background-color: $c-grey-l96;
   line-height: 1.375rem;
+  font-size: inherit;
   color: $c-grey-l21;
-  font-size: 85%;
 
   @include input-focus {
     @include input-focus-defaults;
   }
 
+  &::-ms-input-placeholder {
+    color: inherit;
+  }
+
+  &::placeholder {
+    color: inherit;
+  }
+
   &:disabled,
   &[readonly] {
     background-color: $c-grey-l96;

package/helpers/mixins/table/_details.scss

@@ -1,14 +1,11 @@
-
 @mixin details-table {
-  $mq: md;
-
   thead {
     @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
     display: block;
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       display: none;
     }
   }
@@ -20,11 +17,11 @@
   tr {
     display: grid;
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       grid-template-columns: $columns-details--header;
     }
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       border-radius: $border-radius-lg;
     }
   }
@@ -37,20 +34,21 @@
     }
   }
 
-  th, td {
+  th,
+  td {
     padding: 0.75rem;
 
     &[empty=true] {
-      @include media-breakpoint-down($mq) {
+      @include medium-down {
         padding: 0;
-      }      
+      }
     }
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       &:not(:last-of-type) {
         border-right: 1px solid $c-grey-l87;
       }
-  
+
       &:last-of-type {
         text-align: right;
       }
@@ -58,6 +56,6 @@
   }
 
   label {
-    @include table-label($mq);
+    @include table-label;
   }
 }

package/helpers/mixins/table/_etickets.scss

@@ -1,13 +1,11 @@
 @mixin etickets-table {
-  $mq: md;
-
   thead {
     @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
     display: block;
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       display: none;
     }
   }
@@ -21,11 +19,11 @@
       margin-bottom: 1rem;
     }
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       grid-template-columns: $columns-etickets;
     }
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       border-radius: $border-radius-lg;
     }
   }
@@ -34,7 +32,7 @@
   td {
     padding: 0.75rem;
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       &:not(:last-of-type) {
         border-right: 1px solid $c-grey-l87;
       }
@@ -46,7 +44,7 @@
   }
 
   label {
-    @include table-label($mq);
+    @include table-label;
   }
 
   a {
@@ -54,4 +52,4 @@
       @include table-link--focus;
     }
   }
-}
+}

package/helpers/mixins/table/_gifts.scss

@@ -1,9 +1,6 @@
-
 @mixin gifts-table {
-  $mq: xl;
-
   thead {
-    @include media-breakpoint-down($mq) {
+    @include x-large-down {
       display: none;
     }
   }
@@ -13,27 +10,27 @@
   }
 
   tr {
-    @include media-breakpoint-up($mq) {
+    @include x-large-up {
       @include table-row;
       grid-template-columns: $columns-gifts;
       display: grid;
       gap: 0.75rem;
-  
+
       label {
         @include sr-only;
       }
     }
 
-    @include media-breakpoint-down($mq) {
+    @include x-large-down {
       border-radius: $border-radius-lg;
       border: 1px solid $c-grey-l87;
       display: block;
       padding: 1rem;
-  
+
       &:not(:last-of-type) {
         margin-bottom: 1rem;
       }
-  
+
       td {
         justify-content: space-between;
         display: flex;
@@ -46,7 +43,7 @@
         &:not(:first-of-type):not(:last-of-type) {
           border-top: 1px solid $c-grey-l87;
         }
-  
+
         &:last-of-type {
           margin-top: 0.5rem;
         }

package/helpers/mixins/table/_membership.scss

@@ -1,7 +1,6 @@
-
 @mixin membership-table {
   tr {
-    @include media-breakpoint-up(md) {
+    @include medium-up {
       grid-template-columns: $columns-membership;
     }
   }

package/helpers/mixins/table/_orders.scss

@@ -1,13 +1,11 @@
 @mixin orders-table($columns) {
-  $mq: md;
-
   thead {
     @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
     display: block;
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       display: none;
     }
   }
@@ -21,11 +19,11 @@
       margin-bottom: 1rem;
     }
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       grid-template-columns: $columns;
     }
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       border-radius: $border-radius-lg;
     }
   }
@@ -42,7 +40,7 @@
   }
 
   label {
-    @include table-label($mq);
+    @include table-label;
   }
 
   a {
@@ -50,4 +48,4 @@
       @include table-link--focus;
     }
   }
-}
+}

package/helpers/mixins/table/_preferences.scss

@@ -1,13 +1,11 @@
 @mixin preferences-table {
-  $mq: md;
-
   thead {
     @include fontfamily-black;
     background-color: $c-grey-l96;
     margin-bottom: 1rem;
     display: block;
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       display: none;
     }
   }
@@ -20,11 +18,11 @@
       margin-bottom: 1rem;
     }
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       grid-template-columns: $columns-preferences;
     }
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       border-radius: $border-radius-lg;
     }
   }
@@ -33,7 +31,7 @@
   td {
     padding: 0.75rem;
 
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       text-align: center;
 
       &:not(:last-of-type) {
@@ -45,7 +43,7 @@
       }
     }
 
-    @include media-breakpoint-down($mq) {
+    @include medium-down {
       &:not(:first-of-type) {
         padding-top: 0;
       }
@@ -53,11 +51,11 @@
   }
 
   label {
-    @include table-label($mq);
+    @include table-label;
   }
 
   .custom-radio {
-    @include media-breakpoint-up($mq) {
+    @include medium-up {
       margin: 0;
 
       input[type='radio'] {
@@ -71,4 +69,4 @@
       }
     }
   }
-}
+}

package/helpers/mixins/table/_resale.scss

@@ -1,11 +1,8 @@
-
 @mixin resale-table {
   margin-right: auto;
   margin-left: auto;
   max-width: 11rem;
 
-  $mq: md;
-
   tbody tr {
     border: 1px solid $c-grey-l87;
   }
@@ -14,7 +11,7 @@
     text-align: left;
     padding: 0.625rem;
 
-    @include media-breakpoint-up($mq) {  
+    @include medium-up {
       &:last-of-type {
         text-align: right;
       }
@@ -22,6 +19,6 @@
   }
 
   label {
-    @include table-label($mq);
+    @include table-label;
   }
 }

package/helpers/mixins/table/_simple.scss

@@ -1,7 +1,6 @@
-
 @mixin simple-table {
   tr {
-    @include media-breakpoint-up(md) {
+    @include medium-up {
       grid-template-columns: $columns-simple;
     }
   }

package/helpers/mixins/table/_tickets.scss

@@ -1,24 +1,21 @@
-
 @mixin tickets-table {
-  $mq: sm;
-
   th {
     @include fontfamily-black;
   }
 
   tr {
-    @include media-breakpoint-up($mq) {
+    @include small-up {
       @include table-row;
       grid-template-columns: $columns-tickets;
       display: grid;
       gap: 0.75rem;
-  
+
       label {
         @include sr-only;
       }
     }
 
-    @include media-breakpoint-down($mq) {
+    @include small-down {
       border-radius: $border-radius-lg;
       border: 1px solid $c-grey-l87;
       display: block;
@@ -27,11 +24,11 @@
       &:first-of-type {
         display: none;
       }
-  
+
       &:not(:last-of-type) {
         margin-bottom: 1rem;
       }
-  
+
       td {
         justify-content: space-between;
         display: flex;
@@ -44,7 +41,7 @@
         &:not(:first-of-type):not(:last-of-type) {
           border-top: 1px solid $c-grey-l87;
         }
-  
+
         &:last-of-type {
           margin-top: 0.5rem;
         }
@@ -53,7 +50,7 @@
   }
 
   .ticket-name {
-    @include media-breakpoint-down($mq) {
+    @include small-down {
       display: none;
     }
   }

package/package.json

@@ -103,5 +103,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.29.0"
+  "version": "2.31.0"
 }

package/scss/_app.scss

@@ -5,8 +5,9 @@
   display: flex;
 }
 
-#app { 
-  &.videoSplash,  
+#app {
+
+  &.videoSplash,
   &.cinemaSplash,
   &.concertSplash,
   &.theatreSplash {
@@ -20,7 +21,7 @@
     background-repeat: no-repeat;
     background-size: 72rem;
 
-    @include media-breakpoint-up(xxl) {
+    @include xx-large-up {
       background-position: center top;
     }
   }

package/scss/_br-checkbox.scss

@@ -11,7 +11,7 @@
     display: block;
     z-index: 1;
 
-    @include media-breakpoint-up(md) {
+    @include medium-up {
       margin-top: 0.625rem;
     }
 

package/scss/_br-container.scss

@@ -21,7 +21,7 @@
     padding-bottom: 1.5rem;
     padding-top: 1.5rem;
 
-    @include media-breakpoint-up(sm) {
+    @include small-up {
       padding-bottom: 2.5rem;
       padding-top: 2.5rem;
     }
@@ -31,13 +31,13 @@
     padding-bottom: 1.875rem;
     padding-top: 1.875rem;
   }
-  
+
   &.thin {
-    max-width: $layout-width-sm;  
+    max-width: $layout-width-sm;
   }
 
   &.masthead {
-    @include media-breakpoint-up(sm) {
+    @include small-up {
       padding-bottom: 3rem;
       padding-top: 3rem;
     }

package/scss/_br-form-row.scss

@@ -1,4 +1,3 @@
-
 .br-form-row {
   @include br-form-row;
 
@@ -12,7 +11,8 @@
       flex-direction: row-reverse;
       display: flex;
 
-      input[type=text], input[type=email] {
+      input[type=text],
+      input[type=email] {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
         border-right: none;
@@ -20,18 +20,18 @@
     }
 
     &:not(.label) {
-      @include media-breakpoint-up(sm) {
+      @include small-up {
         grid-column: 2 / 3;
       }
     }
-    
+
     &.submit {
       justify-content: flex-end;
       display: flex;
       gap: 1rem;
 
-      @include media-breakpoint-down(sm) {
-        > button {
+      @include small-down {
+        >button {
           width: 100%;
         }
       }

package/scss/_card-deck.scss

@@ -1,10 +1,9 @@
-
 .card-deck {
   justify-content: center;
   display: grid;
   gap: 2rem;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     align-items: flex-start;
     grid-auto-flow: column;
   }
@@ -13,11 +12,11 @@
     max-width: 20rem;
     margin-top: 0;
   }
-  
+
   .card-title {
     font-size: $h3-font-size;
   }
-  
+
   .card-img {
     border-radius: $border-radius-lg;
     margin-top: 1rem;

package/scss/_klaro.scss

@@ -44,7 +44,7 @@
     left: 0;
   }
 
-  @include media-breakpoint-up(lg) {
+  @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;
     max-width: 28rem;
@@ -235,7 +235,7 @@
         width: 100%;
         top: 50%;
 
-        @include media-breakpoint-up(sm) {
+        @include small-up {
           border-radius: $border-radius;
           position: relative;
           max-width: 40rem;
@@ -389,12 +389,12 @@
         margin-right: 0;
         bottom: 0;
 
-        @include media-breakpoint-up(lg) {
+        @include large-up {
           padding: 1rem;
         }
 
         p {
-          @include media-breakpoint-down(xs) {
+          @include x-small-down {
             margin-bottom: 0.5rem;
           }
 
@@ -410,7 +410,7 @@
         .cn-buttons {
           display: inline-block;
 
-          @include media-breakpoint-down(xs) {
+          @include x-small-down {
             width: 100%;
 
             button.cm-btn {
@@ -429,13 +429,13 @@
           padding: 0.5rem;
           color: $white;
 
-          @include media-breakpoint-down(sm) {
+          @include small-down {
             margin-bottom: 1rem;
             margin-right: 0;
             width: 10rem;
           }
 
-          @include media-breakpoint-up(sm) {
+          @include small-up {
             margin-right: 1rem;
           }
 
@@ -447,7 +447,7 @@
         .cn-ok {
           padding-top: 1.5rem;
 
-          @include media-breakpoint-down(xs) {
+          @include x-small-down {
             text-align: center;
           }
         }

package/scss/_main.scss

@@ -1,13 +1,17 @@
 main {
-  &.videoSplash, &.cinemaSplash, &.concertSplash, &.theatreSplash {
+
+  &.videoSplash,
+  &.cinemaSplash,
+  &.concertSplash,
+  &.theatreSplash {
     padding-top: 2rem;
     color: $white;
-    
-    @include media-breakpoint-up(md) {
+
+    @include medium-up {
       padding-top: 4rem;
     }
-    
-    @include media-breakpoint-up(xxl) {
+
+    @include xx-large-up {
       padding-top: 10rem;
     }
   }

package/scss/card/_account.scss

@@ -1,15 +1,15 @@
-
 .card[account] {
   margin-top: $gap-account;
   margin-bottom: 0;
 
-  > .card-body {
+  >.card-body {
     padding: $gap-account;
   }
 
   iframe {
     min-height: 590px;
-    @include media-breakpoint-up(sm) {
+
+    @include small-up {
       min-height: 440px;
     }
   }

package/scss/card/_membership.scss

@@ -1,4 +1,3 @@
-
 $angle: 120deg;
 $c-yb-membership-card-1: #8205FF;
 $c-yb-membership-card-2: #C030AC;
@@ -13,16 +12,16 @@ $c-yb-membership-card-3: #FE5A59;
   color: $white;
   border: none;
 
-  @include media-breakpoint-up(sm) {
+  @include small-up {
     width: 23rem;
   }
 
-  > .card-body {
+  >.card-body {
     align-items: flex-start;
     row-gap: 0.75rem;
     display: grid;
 
-    @include media-breakpoint-up(sm) {
+    @include small-up {
       row-gap: 2rem;
     }
   }
@@ -35,13 +34,15 @@ $c-yb-membership-card-3: #FE5A59;
     background-color: $c-brand-membership-dark;
     background-image: linear-gradient($angle, $c-brand-membership-dark 20%, $c-brand-membership 100%);
   }
-  
-  &.patron, &.premier-patron {
+
+  &.patron,
+  &.premier-patron {
     background-color: $c-patron;
     background-image: linear-gradient($angle, $c-patron 60%, $c-patron-light 75%, $c-patron 90%);
   }
-  
-  &.principle-patron, &.directors-circle {
+
+  &.principle-patron,
+  &.directors-circle {
     background-color: $c-principle;
     background-image: linear-gradient($angle, $c-principle 60%, $c-principle-light 75%, $c-principle 90%);
   }