barbican-reset 1.7.1 → 1.7.3

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-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/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,12 +8,14 @@
 
 @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";

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,5 +1,26 @@
 
 @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;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "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/_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;
   }
-}
+}