barbican-reset 1.4.1 → 1.4.5

package/components/card_display.vue

@@ -73,6 +73,8 @@ export default {
 
 <style lang="scss" module>
 
+@import "../helpers";
+
 .svg {
   fill: white;
 }
@@ -91,18 +93,18 @@ export default {
 }
 
 .image {
+  @include inset(0);
   position: absolute;
   height: auto;
   width: 100%;
-  inset: 0;
 }
 
 .title {
+  @include inset(0);
   background-color: rgba($c-grey-midnight, 0.85);
   place-items: center;
   position: absolute;
   display: grid;
-  inset: 0;
 }
 
 .component.hero {

package/components/fluid_iframe.vue

@@ -24,6 +24,8 @@ export default {
 
 <style lang="scss" module>
 
+@import "../helpers";
+
 .component {
   border-radius: $border-radius-lg;
   padding-top: 56.25%;
@@ -33,7 +35,7 @@ export default {
 
 .component > iframe {
   position: absolute;
-  inset: 0;
+  @include inset(0);
 }
 
 </style>

package/components/footer_upper.vue

@@ -35,6 +35,14 @@ export default {
     gap: 1rem;
   }
 
+  nav a {
+    @include focus {
+      @include single-box($white);
+      background-color: $white;
+      color: $black;
+    }
+  }
+
   &:not(.splash) {
     padding-bottom: 3.75rem;
   }

package/components/form_update.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.container">
-    <div :class="$style.input"><slot /></div>
-    <b-button class="btn-update" @click.prevent="$emit('update')">update</b-button>
+    <div :class="$style.input" data-test="email"><slot /></div>
+    <b-button class="btn-update" @click.prevent="$emit('update')" data-test="update">update</b-button>
   </div>
 </template>
 

package/helpers/mixins/_buttons.scss

@@ -197,6 +197,16 @@
   }
 }
 
+@mixin btn-remove-gift {
+  @include media-breakpoint-down(xl) {
+    @include btn-remove;
+    width: 100%;
+  }
+  @include media-breakpoint-up(xl) {
+    @include btn-link;
+  }
+}
+
 @mixin btn-membership-card {
   @include button-outline(
     $color: $white,

package/helpers/mixins/index.scss

@@ -1,5 +1,13 @@
 // paths more explicit for gulp-sass
 @import "~bourbon/core/bourbon.scss";
+
+@mixin inset($val: 0) {
+  bottom: $val;
+  right: $val;
+  left: $val;
+  top: $val;
+}
+
 @import "account/orders.scss";
 @import "basket.scss";
 @import "buttons.scss";

package/icons/city_of_london_lockup.vue

@@ -1,12 +1,10 @@
 <template>
-  <div :class="$style.lockup">
-    <a href="//www.cityoflondon.gov.uk" target="_blank">
-      <city-of-london-logo />
-    </a>
+  <a :class="$style.lockup" href="//www.cityoflondon.gov.uk" target="_blank">
+    <city-of-london-logo />
     <small>
       The City of London<br />Corporation is the founder<br />and principal funder of<br />the Barbican Centre
     </small>
-  </div>
+  </a>
 </template>
 
 <script>
@@ -21,10 +19,17 @@ export default {
 
 <style lang="scss" module>
 
+@import "../helpers";
+
 .lockup {
+  text-decoration: none;
   display: inline-flex;
   align-items: center;
-  gap: 0.625rem;  
+  gap: 0.625rem;
+
+  @include focus {
+    text-decoration: underline;
+  }
 }
 
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.4.1",
+  "version": "1.4.5",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_atomic.scss

@@ -54,6 +54,10 @@ $aligns: "left", "center", "right";
   margin-top: 0.5rem;
 }
 
+.margin-top-025 {
+  margin-top: 0.25rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }

package/scss/_btn.scss

@@ -52,6 +52,10 @@
     @include btn-remove-ticket;
   }
 
+  &.btn-remove-gift {
+    @include btn-remove-gift;
+  }
+
   &.btn-membership-card {
     @include btn-membership-card;
   }

package/scss/_custom-select.scss

@@ -0,0 +1,8 @@
+.custom-select {
+  background-color: $c-grey-alpine;
+  border-color: $c-grey-concrete;
+  border-radius: $border-radius;
+  padding: 0.75rem 0.5rem;
+  color: $c-grey-night;
+  width: 100%;
+}

package/scss/_promo.scss

@@ -0,0 +1,11 @@
+.promo-form {
+  @include basket-row-grid;
+  margin-top: 0.5rem;
+}
+
+.promo-added {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+}

package/scss/index.scss

@@ -13,6 +13,7 @@
 @import "loading-animation.scss";
 @import "close-icon.scss";
 @import "table/index.scss";
+@import "promo.scss";
 
 // bootstrap component styles
 @import "btn.scss";
@@ -20,6 +21,7 @@
 @import "card-group.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
+@import "custom-select.scss";
 @import "form.scss";
 @import "list.scss";
 @import "input.scss";

package/scss/table/_basket.scss

@@ -28,9 +28,4 @@ table.basket tr {
       width: 100%;
     } 
   }
-}
-
-table.basket .promo-form {
-  @include basket-row-grid;
-  margin-top: 0.5rem;
-}
+}

package/scss/table/_gifts.scss

@@ -0,0 +1,56 @@
+table.gifts {
+
+  $mq: xl;
+
+  thead {
+    @include media-breakpoint-down($mq) {
+      display: none;
+    }
+  }
+
+  th {
+    font-weight: 700;
+  }
+
+  tr {
+    @include media-breakpoint-up($mq) {
+      @include table-row;
+      grid-template-columns: 3fr 5fr 5fr 2fr 2fr;
+      display: grid;
+      gap: 0.75rem;
+  
+      label {
+        display: none;
+      }
+    }
+
+    @include media-breakpoint-down($mq) {
+      border-radius: $border-radius-lg;
+      border: 1px solid $c-grey-pearl;
+      display: block;
+      padding: 1rem;
+  
+      &:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+  
+      td {
+        justify-content: space-between;
+        display: flex;
+
+        &:not(:last-of-type) {
+          padding-bottom: 0.25rem;
+          padding-top: 0.25rem;
+        }
+
+        &:not(:first-of-type):not(:last-of-type) {
+          border-top: 1px solid $c-grey-pearl;
+        }
+  
+        &:last-of-type {
+          margin-top: 0.5rem;
+        }
+      }
+    }
+  }
+}

package/scss/table/_preferences.scss

@@ -66,7 +66,7 @@ table.preferences {
 
       input[type=radio] {
         position: relative;
-        inset: auto;
+        @include inset(auto);
       }
     }
   }

package/scss/table/index.scss

@@ -7,6 +7,7 @@
 @import "preferences.scss";
 @import "etickets.scss";
 @import "membership.scss";
+@import "gifts.scss";
 
 table {
   border-spacing: 0;