barbican-reset 1.7.1 → 1.7.5

package/components/br_form_update.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :class="$style.container">
-    <div :class="$style.input" data-test="email"><slot /></div>
+  <div class="br-form-update">
+    <div class="br-form-update--input" data-test="email"><slot /></div>
     <b-button @click.prevent="$emit('update')" data-test="update">update</b-button>
   </div>
 </template>
@@ -10,23 +10,3 @@
     name: 'BrFormUpdate',
   }
 </script>
-
-<style lang="scss" module>
-
-.container {
-  display: grid;
-  gap: 1rem;
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: auto 6rem;
-  }
-}
-
-.input {
-  @include all-text-inputs;
-  color: $c-grey-steel;
-  user-select: none;
-  overflow: hidden;
-}
-
-</style>

package/helpers/mixins/_br-footer.scss

@@ -1,11 +1,11 @@
 
 @mixin br-footer-upper {
   padding-top: 3.75rem;
-  display: grid;
-  gap: 1rem;
 
   @include media-breakpoint-up(md) {
     grid-template-columns: 11rem auto;
+    display: grid;
+    gap: 1rem;
   }
 
   &:not(.splash) {
@@ -21,6 +21,16 @@
   }
 }
 
+@mixin br-footer-upper-inner {
+  display: grid;
+  gap: 2rem;
+
+  @include media-breakpoint-up(md) {
+    align-items: flex-start;
+    grid-auto-flow: column;
+  }
+}
+
 @mixin br-footer-lower {
   padding-bottom: 1.875rem;
   padding-top: 1.875rem;

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

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

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

@@ -0,0 +1,12 @@
+
+@mixin city-of-london-lockup {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  @include focus {
+    text-decoration: underline;
+    outline: none;
+  }
+}

package/helpers/mixins/_focus.scss

@@ -33,13 +33,13 @@
   }
 }
 
-@mixin input-focus {
+@mixin input-focus-defaults {
   @include single-box($c-grey-steel, 0.0625rem);
   border: 1px solid $c-grey-steel;
   background-color: $c-grey-alpine;
 }
 
-@mixin focus_colors {
+@mixin neutral-status-colors {
   background-color: $c-status-neutral-fade;
   border: 1px solid $c-status-neutral;
   color: $c-status-neutral;

package/helpers/mixins/_hide.scss

@@ -0,0 +1,27 @@
+
+@mixin hide-visually($state:"hide") {
+  @if $state == "hide" {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(100%);
+    position: absolute;
+    overflow: hidden;
+    height: 1px;
+    padding: 0;
+    width: 1px;
+    border: 0;
+  } 
+  @if $state == "unhide" {
+    overflow: visible;
+    position: static;
+    clip-path: none;
+    height: auto;
+    width: auto;
+    clip: auto;
+  }
+}
+
+@mixin hide-text {
+  white-space: nowrap;
+  text-indent: 101%;
+  overflow: hidden;
+}

package/helpers/mixins/index.scss

@@ -1,5 +1,3 @@
-// paths more explicit for gulp-sass + iframe overrides
-@import "../../node_modules/bourbon/core/bourbon";
 
 @mixin inset($val: 0) {
   bottom: $val;
@@ -10,16 +8,19 @@
 
 @import "br-alert";
 @import "br-form-row";
+@import "br-form-update";
 @import "br-footer";
 @import "account/orders";
 @import "basket";
 @import "buttons";
 @import "card";
 @import "content";
+@import "city-of-london";
 @import "core";
 @import "festival";
 @import "focus";
 @import "font";
+@import "hide";
 @import "loading";
 @import "input";
 @import "table";

package/helpers/mixins/input/_dropdown.scss

@@ -1,9 +1,23 @@
 
-@mixin input-dropdown {
+@mixin custom-select {
+  padding: 0.8125rem 2.5rem 0.8125rem 0.8125rem;
+  background-position: right 0.75rem center;
+  background-image: url($select-arrow);
+  border: 1px solid $c-grey-concrete;
   background-color: $c-grey-alpine;
   border-radius: $border-radius-lg;
-  border-color: $c-grey-concrete;
-  padding: 0.875rem 0.5rem;
+  background-size: 1rem 0.75rem;
+  background-repeat: no-repeat;
+  line-height: 1.375rem;
   color: $c-grey-night;
+  font-size: inherit;
+  font-weight: 400;
+  transition: none;
+  appearance: none;
+  display: block;
   width: 100%;
+
+  @include focus {
+    @include input-focus-defaults;
+  }
 }

package/helpers/mixins/input/_generic.scss

@@ -30,13 +30,13 @@
       }
 
       &:checked ~ label {
-        @include focus_colors;
+        @include neutral-status-colors;
         @include single-box($c-status-neutral, 0.0625rem);
       }
     }
 
     &:checked ~ label {
-      @include focus_colors;
+      @include neutral-status-colors;
     }
   }
 }

package/helpers/mixins/input/_text.scss

@@ -1,9 +1,31 @@
 
 @mixin all-text-inputs {
+  [type='color'],
+  [type='date'],
+  [type='datetime'],
+  [type='datetime-local'],
+  [type='email'],
+  [type='month'],
+  [type='number'],
+  [type='password'],
+  [type='search'],
+  [type='tel'],
+  [type='text'],
+  [type='time'],
+  [type='url'],
+  [type='week'],
+  input:not([type]),
+  textarea {
+    @content;
+  }
+}
+
+@mixin text-input-defaults {
   border: solid $border-width $c-border-strong;
   padding: 0.875rem 0.875rem 0.75rem;
   background-color: $c-grey-alpine;
   border-radius: $border-radius-lg;
+  line-height: 1.375rem;
   color: $c-grey-night;
 
   &:disabled, &[readonly] {

package/helpers/variables/_layout.scss

@@ -20,4 +20,6 @@ $gap-account: 2rem;
 $gap-power: 1.25rem;
 $height-dashboard-banner: 25rem;
 $width-power-related: 66rem;
-$gap-accordion: 2rem;
+$gap-accordion: 2rem;
+
+$select-arrow: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e";

package/icons/city_of_london_lockup.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :class="$style.lockup" href="//www.cityoflondon.gov.uk" target="_blank">
+  <a class="city-of-london-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
@@ -15,22 +15,4 @@ export default {
     CityOfLondonLogo
   }
 }
-</script>
-
-<style lang="scss" module>
-
-@import "../helpers";
-
-.lockup {
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.625rem;
-
-  @include focus {
-    text-decoration: underline;
-    outline: none;
-  }
-}
-
-</style>
+</script>

package/index.js

@@ -7,7 +7,6 @@ import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import CardDisplay from './components/card_display'
 import FooterLogos from './components/footer_logos'
-import FooterLower from './components/footer_lower'
 import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
@@ -26,6 +25,7 @@ import BrFormUpdate from './components/br_form_update'
 import BrLoader from './components/br_loader'
 import BrWrap from './components/br_wrap'
 import BrFooterUpper from './components/br_footer/upper'
+import BrFooterLower from './components/br_footer/lower'
 
 export { 
   BrLoader, 
@@ -41,9 +41,9 @@ export {
   BrFormUpdate,
   BrFormRow,
   EventSummary,
+  BrFooterLower,
   BrFooterUpper,
   FooterLogos,
-  FooterLower,
   FluidIframe,
   HelpRow,
   CardDisplay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.1",
+  "version": "1.7.5",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -28,7 +28,6 @@
   "dependencies": {
     "bootstrap": "^5.1.3",
     "bootstrap-vue": "^2.21.2",
-    "bourbon": "^7.0.0",
     "focus-visible": "^5.2.0",
     "gsap": "^3.7.1",
     "gulp": "^4.0.2",

package/scss/_br-form-update.scss

@@ -0,0 +1,8 @@
+
+.br-form-update {
+  @include br-form-update;
+}
+
+.br-form-update--input {
+  @include br-form-update--input;
+}

package/scss/_city-of-london.scss

@@ -0,0 +1,4 @@
+
+.city-of-london-lockup {
+  @include city-of-london-lockup;
+}

package/scss/_custom-select.scss

@@ -1,3 +1,3 @@
 .custom-select {
-  @include input-dropdown;
+  @include custom-select;
 }

package/scss/_fonts.scss

@@ -3,36 +3,32 @@ $futura: "FuturaLTPro";
 $font-family: #{$futura}, "Helvetica", "Arial", sans-serif;
 $font-file-path: "../fonts/";
 
-@include font-face(
-  "#{$futura}",
-  "#{$font-file-path}#{$futura}-Book",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-Book.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-Book.woff2") format("woff2");
   font-style: normal;
 }
 
-@include font-face(
-  "#{$futura}",
-  "#{$font-file-path}#{$futura}-BookOblique",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-BookOblique.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-BookOblique.woff2") format("woff2");
   font-style: italic;
 }
 
-@include font-face(
-  "#{$futura}",
-  "#{$font-file-path}#{$futura}-Bold",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-Bold.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-Bold.woff2") format("woff2");
   font-style: normal;
   font-weight: bold;
 }
 
-@include font-face(
-  "#{$futura}",
-  "#{$font-file-path}#{$futura}-BoldOblique",
-  ("woff", "woff2")
-) {
+@font-face {
+  font-family: "#{$futura}";
+  src: url("#{$font-file-path}#{$futura}-BoldOblique.woff") format("woff"),
+       url("#{$font-file-path}#{$futura}-BoldOblique.woff2") format("woff2");
   font-style: italic;
   font-weight: bold;
-}
+}

package/scss/_input.scss

@@ -1,7 +1,7 @@
 
 .form-control {
   @include focus {
-    @include input-focus;
+    @include input-focus-defaults;
   }
 }
 
@@ -23,13 +23,13 @@ input[type=submit] {
 
 input[type=number] {
   @include focus {
-    @include input-focus;
+    @include input-focus-defaults;
   }
 }
 
-#{$all-text-inputs} {
-  @include all-text-inputs;
+@include all-text-inputs {
+  @include text-input-defaults;
   @include focus {
-    @include input-focus;
+    @include input-focus-defaults;
   }
-}
+}

package/scss/index.scss

@@ -19,6 +19,7 @@
 @import "br-loader";
 @import "br-wrap";
 @import "br-footer";
+@import "city-of-london";
 
 // bootstrap component styles
 @import "btn";