barbican-reset 1.4.3 → 1.4.7

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/skip_link.vue

@@ -0,0 +1,37 @@
+<template>
+  <a :href="href" :class="$style.skiplink">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "SkipLink",
+  props: {
+    href: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" module>
+
+.skiplink {
+  border: 0.25rem solid $c-grey-night;
+  border-radius: $border-radius-lg;
+  background-color: $white;
+  color: $c-grey-night;
+  position: absolute;
+  padding: 0.5rem;
+  z-index: -1;
+  opacity: 0;
+  
+  @include focus {
+    opacity: 1;
+    z-index: 2;
+  }
+}
+
+</style>

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";
@@ -9,4 +17,12 @@
 @import "festival.scss";
 @import "focus.scss";
 @import "font.scss";
-@import "loading.scss";
+@import "loading.scss";
+
+@mixin table_link {
+  @include focus {
+    @include single-box($c-grey-night);
+    background-color: $c-grey-night;
+    color: $white;
+  }
+}

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/index.js

@@ -22,6 +22,7 @@ import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
 import PaymentLogo from './components/payment_logo'
+import SkipLink from './components/skip_link'
 
 export { 
   Loader, 
@@ -46,5 +47,6 @@ export {
   HelpRow,
   CardDisplay,
   VideoContent,
-  PaymentLogo
+  PaymentLogo,
+  SkipLink
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.4.3",
+  "version": "1.4.7",
   "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/table/_etickets.scss

@@ -51,4 +51,8 @@ table.etickets {
       display: none;
     }
   }
+
+  a {
+    @include table_link;
+  }
 }

package/scss/table/_orders.scss

@@ -13,7 +13,7 @@ table.orders {
     }
   }
 
-  thead tr, tbody tr.active {
+  thead tr, tbody tr {
     border: 1px solid $c-grey-pearl;
     display: grid;
 
@@ -44,6 +44,12 @@ table.orders {
     }
   }
 
+  tr.full-width {
+    justify-content: center;
+    grid-template: none;
+    border: none;
+  }
+
   label {
     font-size: $font-size-lg;
 
@@ -51,4 +57,8 @@ table.orders {
       display: none;
     }
   }
+
+  a {
+    @include table_link;
+  }
 }

package/scss/table/_preferences.scss

@@ -66,7 +66,12 @@ table.preferences {
 
       input[type=radio] {
         position: relative;
-        inset: auto;
+        @include inset(auto);
+
+        @include focus {
+          outline: 0.15rem solid $blue;
+          outline-offset: 0.25rem;
+        }
       }
     }
   }