barbican-reset 2.19.0 → 2.21.0

package/components/account_title.vue

@@ -23,8 +23,7 @@ export default {
 
 <style lang="scss" module>
 
-.title {
-  font-size: $h2-font-size;
+@mixin title {
   margin-bottom: 1.25rem;
 
   @include media-breakpoint-up(md) {
@@ -32,8 +31,12 @@ export default {
   }
 }
 
+.title {
+  @include title;
+}
+
 .placeholder {
-  composes: title;
+  @include title;
   @include placeholder;
   width: 30%;
 }

package/components/br_form_block.vue

@@ -13,11 +13,11 @@
 <style lang="scss" module>
 
 .container {
+  @include fontfamily-black;
   padding: 0.875rem 0.75rem 0.625rem 0.75rem;
   border-left: 0.25rem solid;
   background: $c-grey-l96;
   margin-bottom: 1rem;
-  font-weight: 700;
 }
 
 </style>

package/components/event_summary.vue

@@ -41,6 +41,7 @@ export default {
 
 <style lang="scss" module>
 @mixin title {
+  @include fontfamily-black;
   letter-spacing: $headings-letter-spacing;
   line-height: $line-height-sm;
 }
@@ -49,7 +50,7 @@ export default {
   @include title;
   font-size: $h5-font-size;
   color: $c-grey-l44;
-  font-weight: normal;
+  font-weight: 400;
 
   @include media-breakpoint-up(md) {
     font-size: $h4-font-size;
@@ -97,7 +98,6 @@ export default {
 
 .title {
   @include title;
-  font-weight: $headings-font-weight;
   font-size: $h2-font-size;
   margin-bottom: 0.75rem;
 }

package/components/related_title.vue

@@ -33,9 +33,9 @@ export default {
 }
 
 .title {
+  @include fontfamily-black;
   font-size: $h5-font-size;
   margin-bottom: 3rem;
-  font-weight: bold;
 
   @include media-breakpoint-up(md) {
     grid-template-columns: 1fr auto 1fr;

package/helpers/functions/index.scss

@@ -7,5 +7,16 @@
 }
 
 @function input-bg($value) {
-  @return rgba($value,0.08);
+  @return rgba($value, 0.08);
+}
+
+@function toRem($value) {
+  @return ($value * 0.0625)+rem;
+}
+
+@function font-family($name: "SupremeLLWeb") {
+  @return #{$name},
+  "Helvetica",
+  "Arial",
+  sans-serif;
 }

package/helpers/mixins/_br-alert.scss

@@ -1,7 +1,7 @@
 @mixin br-alert-wrap--setup {
   border-radius: $border-radius-lg;
   border-width: $border-width;
-  padding: 0.75rem 0.875rem;
+  padding: 0.75rem toRem(14);
   border-style: solid;
 }
 
@@ -38,6 +38,7 @@
   path.cross {
     fill: $main;
   }
+
   path.tint {
     fill: $fade;
   }
@@ -48,6 +49,7 @@
     path.cross {
       fill: $fade;
     }
+
     path.tint {
       fill: $main;
     }
@@ -63,8 +65,8 @@
 }
 
 @mixin br-alert--title {
+  @include fontfamily-black;
   margin-bottom: 0.25rem;
-  font-weight: 700;
 }
 
 @mixin br-alert--flex {
@@ -98,4 +100,4 @@
       @include br-alert-exit($neutral_focus...);
     }
   }
-}
+}

package/helpers/mixins/{_card.scss → _br-card.scss}

@@ -1,32 +1,31 @@
-
-@mixin card {
+@mixin br-card {
   border: 1px solid $c-grey-l87;
   border-radius: $border-radius-lg;
   background-color: white;
 
-  + .card {
+  +.card {
     margin-top: 1rem;
   }
 }
 
-@mixin card-header {
+@mixin br-card-header {
   border-bottom: 1px solid $c-grey-l87;
   padding: 1.5rem 1.75rem 1.25rem;
   background-color: transparent;
 }
 
-@mixin card-subtitle {
+@mixin br-card-subtitle {
   color: $c-grey-l44 !important;
   font-size: $font-size-sm;
   font-weight: 400;
   margin: 0;
 }
 
-@mixin card-body {
+@mixin br-card-body {
   padding: 1.75rem;
 }
 
-@mixin card-footer {
+@mixin br-card-footer {
   padding: 1rem;
 
   @include media-breakpoint-up(md) {
@@ -34,22 +33,23 @@
   }
 }
 
-@mixin card-img {
+@mixin br-card-img {
   border: 1px solid $c-grey-l65;
   margin-bottom: 1rem;
   max-width: 100%;
 }
 
-@mixin form-card {
+@mixin br-form-card {
   .card-header {
-    @include card-header;
+    @include br-card-header;
   }
+
   .card-body {
-    @include card-body;
+    @include br-card-body;
   }
 }
 
-@mixin form-card-title {
+@mixin br-form-card-title {
   font-size: $h1-font-size;
   margin: 0;
 }

package/helpers/mixins/_buttons.scss

@@ -1,173 +1,6 @@
-@mixin disabled {
-
-  &:disabled,
-  &.disabled {
-    @content;
-  }
-}
-
-@mixin small-button {
-  padding: $padding-button-xs;
-  font-size: $font-size-sm;
-}
-
-@mixin setup-button {
-  @include fontfamily-black;
-  border-radius: $border-radius-lg;
-  padding: $padding-button-lg;
-  text-decoration: none;
-  font-size: 1.0625rem;
-  text-align: center;
-  transition: none;
-  cursor: pointer;
-  line-height: 1;
-
-  &:focus {
-    box-shadow: none;
-    outline: none;
-  }
-
-  &[slim] {
-    padding: $padding-button-sm;
-  }
-
-  &[large] {
-    padding-bottom: $padding-button-md;
-    padding-top: $padding-button-md;
-    font-size: 1.125rem;
-  }
-
-  @include disabled {
-    opacity: 1; // override bootstrap
-  }
-}
-
-@mixin display-button($display: "ib", $gap: 1) {
-  @if $display =="ib" {
-    vertical-align: middle;
-    display: inline-block;
-
-    >* {
-      vertical-align: middle;
-      display: inline-block;
-    }
-  }
-
-  @else if $display =="flex" {
-    display: inline-flex;
-    align-items: center;
-    gap: #{$gap}rem;
-  }
-}
-
-@mixin solid-button($background: $c-brand-generic,
-  $color: white,
-  $border: 1px,
-  $padding: false,
-  $margin: false,
-  $line-height: false,
-  $display: false,
-  $font-size: false) {
-  border: $border solid $background;
-  background-color: $background;
-  color: $color;
-
-  @if $display {
-    @if $padding {
-      @include display-button($display, $padding * 0.625);
-    }
-
-    @else {
-      @include display-button($display, 0.625);
-    }
-  }
-
-  @if $line-height {
-    line-height: $line-height;
-  }
-
-  @if $font-size {
-    font-size: $font-size;
-  }
-
-  @if $padding {
-    padding: $padding;
-  }
-
-  @if $margin {
-    margin: $margin;
-  }
-
-  path {
-    fill: currentColor;
-  }
-
-  @include focus {
-    @include double-box($color, $background);
-    border: $border solid $background;
-    background-color: $background;
-    color: $color;
-  }
-
-  &.hide {
-    visibility: hidden;
-  }
-}
-
-@mixin outline-button($color: $c-brand-generic,
-  $background: white,
-  $border: 1px,
-  $padding: false,
-  $margin: false,
-  $line-height: false,
-  $display: false,
-  $font-size: false) {
-  background-color: $background;
-  border: $border solid $color;
-  color: $color;
-
-  @if $display {
-    @if $padding {
-      @include display-button($display, $padding * 0.625);
-    }
-
-    @else {
-      @include display-button($display, 0.625);
-    }
-  }
-
-  @if $line-height {
-    line-height: $line-height;
-  }
-
-  @if $font-size {
-    font-size: $font-size;
-  }
-
-  @if $padding {
-    padding: $padding;
-  }
-
-  @if $margin {
-    margin: $margin;
-  }
-
-  path {
-    fill: $color;
-  }
-
-  @include focus {
-    border: $border solid $color;
-    background-color: $color;
-    color: $background;
-    box-shadow: none;
-    outline: none;
-
-    path {
-      fill: $background;
-    }
-  }
-}
+@import "buttons/setup";
+@import "buttons/outline";
+@import "buttons/solid";
 
 @mixin link-button($color: inherit,
   $background: transparent,
@@ -176,9 +9,9 @@
   background-color: $background;
   text-decoration: underline;
   vertical-align: baseline;
-  font-weight: inherit;
   padding: $padding;
   border-radius: 0;
+  font-weight: 400;
   text-align: left;
   color: $color;
   border: none;
@@ -194,9 +27,12 @@
   padding: 0;
 }
 
-@mixin btn-primary {
+@mixin btn-primary($min-width: true) {
   @include solid-button;
-  min-width: 8rem;
+
+  @if $min-width {
+    min-width: 8rem;
+  }
 
   &[disabled="disabled"] {
     @include solid-button($c-grey-l21);
@@ -219,6 +55,10 @@
 
 @mixin btn-outline-primary {
   @include outline-button;
+
+  @include focus {
+    @include outline-button-focus;
+  }
 }
 
 @mixin btn-resale {
@@ -282,7 +122,7 @@
 
 @mixin btn-video-help {
   @include link-button($padding: 1.25em, $background: $c-grey-l96);
-  font-weight: 700;
+  @include fontfamily-black;
   width: 100%;
 
   @include focus {
@@ -448,4 +288,6 @@
 
 @mixin btn-expand {
   display: block;
-}
+}
+
+@import "buttons/spektrix";

package/helpers/mixins/_focus.scss

@@ -26,6 +26,16 @@
   }
 }
 
+@mixin input-focus {
+  @include focus {
+    @content;
+  }
+
+  &:focus {
+    @content;
+  }
+}
+
 @mixin focus-tabs {
   @include single-box($c-grey-l21);
   background-color: $c-grey-l21;
@@ -104,7 +114,16 @@
     position: absolute;
     @content;
   }
+
   @include not-focus-visible {
     @include sr-only;
   }
 }
+
+@mixin spx-link-focus {
+
+  &:hover,
+  &:focus {
+    @content;
+  }
+}

package/helpers/mixins/_font.scss

@@ -1,3 +1,29 @@
+@mixin font-face($name: "SupremeLLWeb", $path: "/fonts/") {
+  @font-face {
+    font-family: "Supreme-Light";
+    src: url("#{$path}#{$name}-Light.woff") format("woff"),
+    url("#{$path}#{$name}-Light.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Supreme-LightItalic";
+    src: url("#{$path}#{$name}-LightItalic.woff") format("woff"),
+    url("#{$path}#{$name}-LightItalic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Supreme-Black";
+    src: url("#{$path}#{$name}-Black.woff") format("woff"),
+    url("#{$path}#{$name}-Black.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "Supreme-BlackItalic";
+    src: url("#{$path}#{$name}-BlackItalic.woff") format("woff"),
+    url("#{$path}#{$name}-BlackItalic.woff2") format("woff2");
+  }
+}
+
 @mixin fontfamily-light {
   font-family: $fontfamily-light;
   font-weight: 400;
@@ -11,12 +37,13 @@
 // https://caniuse.com/#search=font-smoothing
 
 @mixin font-smoothing($value: on) {
-  @if $value == on {
+  @if $value ==on {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-  } @else {
+  }
+
+  @else {
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: auto;
   }
-}
-
+}

package/helpers/mixins/_headings.scss

@@ -0,0 +1,19 @@
+@mixin br-heading($margin: 0) {
+  @include fontfamily-black;
+  margin: $margin;
+}
+
+@mixin br-h1 {
+  @include br-heading;
+  font-size: $h1-font-size;
+}
+
+@mixin br-h2 {
+  @include br-heading(toRem(32) 0 0);
+  font-size: $h2-font-size;
+}
+
+@mixin br-h3 {
+  @include br-heading(toRem(24) 0 0);
+  font-size: $h3-font-size;
+}

package/helpers/mixins/_input.scss

@@ -1,7 +1,6 @@
-
 @import "input/generic";
 @import "input/status";
 @import "input/checkbox";
-@import "input/dropdown";
+@import "input/select";
 @import "input/radio";
-@import "input/text";
+@import "input/text";

package/helpers/mixins/buttons/_outline.scss

@@ -0,0 +1,58 @@
+@mixin outline-button($color: $c-brand-generic,
+  $background: white,
+  $border: 1px,
+  $padding: false,
+  $margin: false,
+  $line-height: false,
+  $display: false,
+  $font-size: false) {
+  background-color: $background;
+  border: $border solid $color;
+  color: $color;
+
+  @if $display {
+    @if $padding {
+      @include display-button($display, $padding * 0.625);
+    }
+
+    @else {
+      @include display-button($display, 0.625);
+    }
+  }
+
+  @if $line-height {
+    line-height: $line-height;
+  }
+
+  @if $font-size {
+    font-size: $font-size;
+  }
+
+  @if $padding {
+    padding: $padding;
+  }
+
+  @if $margin {
+    margin: $margin;
+  }
+
+  path {
+    fill: $color;
+  }
+
+  @include focus {
+    @include outline-button-focus($color, $background, $border)
+  }
+}
+
+@mixin outline-button-focus($color: $c-brand-generic, $background: white, $border: 1px) {
+  border: $border solid $color;
+  background-color: $color;
+  color: $background;
+  box-shadow: none;
+  outline: none;
+
+  path {
+    fill: $background;
+  }
+}

package/helpers/mixins/buttons/_setup.scss

@@ -0,0 +1,69 @@
+@mixin disabled {
+
+  &:disabled,
+  &.disabled {
+    @content;
+  }
+}
+
+@mixin small-button {
+  padding: $padding-button-xs;
+  font-size: $font-size-sm;
+}
+
+@mixin setup-slim-button {
+  padding: $padding-button-slim; // formerly $padding-button-sm
+}
+
+@mixin setup-large-button {
+  padding-bottom: $padding-button-md;
+  padding-top: $padding-button-md;
+  font-size: 1.125rem;
+}
+
+@mixin setup-button {
+  @include fontfamily-black;
+  border-radius: $border-radius-lg;
+  padding: $padding-button-lg;
+  text-decoration: none;
+  font-size: 1.0625rem;
+  text-align: center;
+  transition: none;
+  cursor: pointer;
+  line-height: 1;
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+
+  &[slim] {
+    @include setup-slim-button;
+  }
+
+  &[large] {
+    @include setup-large-button;
+  }
+
+  @include disabled {
+    opacity: 1; // override bootstrap
+  }
+}
+
+@mixin display-button($display: "ib", $gap: 1) {
+  @if $display =="ib" {
+    vertical-align: middle;
+    display: inline-block;
+
+    >* {
+      vertical-align: middle;
+      display: inline-block;
+    }
+  }
+
+  @else if $display =="flex" {
+    display: inline-flex;
+    align-items: center;
+    gap: #{$gap}rem;
+  }
+}