barbican-reset 1.7.5 → 1.7.8

package/components/br_loader.vue

@@ -1,18 +1,18 @@
 <template>
-  <b-card class="loading-animation" no-body>
-    <div class="wrap loading-animation">
-      <div class="icon loading-animation"></div>
-      <div class="icon loading-animation"></div>
-      <div class="icon loading-animation"></div>
-      <div class="icon loading-animation"></div>
-      <div class="icon loading-animation"></div>
-      <div class="icon loading-animation"></div>
+  <b-card class="br-loader" no-body>
+    <div class="wrap br-loader">
+      <div class="icon br-loader"></div>
+      <div class="icon br-loader"></div>
+      <div class="icon br-loader"></div>
+      <div class="icon br-loader"></div>
+      <div class="icon br-loader"></div>
+      <div class="icon br-loader"></div>
     </div>
   </b-card>
 </template>
 
 <script>
 export default {
-  name: "Loader",
+  name: "BrLoader",
 };
 </script>

package/helpers/mixins/_br-footer.scss

@@ -1,11 +1,14 @@
 
 @mixin br-footer-upper {
   padding-top: 3.75rem;
+  display: grid;
+  row-gap: 1rem;
 
   @include media-breakpoint-up(md) {
-    grid-template-columns: 11rem auto;
-    display: grid;
-    gap: 1rem;
+    justify-content: flex-start;
+    align-items: flex-start;
+    grid-auto-flow: column;
+    column-gap: 3rem;
   }
 
   &:not(.splash) {
@@ -21,16 +24,6 @@
   }
 }
 
-@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-row.scss

@@ -1,23 +1,24 @@
 
-@mixin br-form-row {
+@mixin br-form-row($mq:sm) {
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up($mq) {
     grid-template-columns: 33fr 67fr;
+    align-items: flex-start;
     gap: $gap-account;
     display: grid;
   }
 
   > label {
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up($mq) {
       margin-top: 1rem;
     }
   }
 
   label {
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down($mq) {
       margin-bottom: 0.5rem;
     }
   }

package/helpers/mixins/_buttons.scss

@@ -8,7 +8,11 @@
   font-weight: 700;
   transition: none;
   line-height: 1;
-  padding: 1em;  
+  padding: 1em;
+
+  &[slim] {
+    padding: 0.75em;
+  }
 }
 
 @mixin button-display($display:'ib',$gap:1em) {
@@ -32,18 +36,22 @@
   $background: $c-brand-orange, 
   $color: $white, 
   $border: 1px,
-  $padding: 1em,
+  $padding: false,
   $line-height: false,
   $display: false,
   $font-size: false) {
   border: $border solid $background;
   background-color: $background;
-  padding: $padding;
   color: $color;
+  
+  @if $display {
+    @if $padding { @include button-display($display, $padding * 0.625); } 
+    @else { @include button-display($display, 0.625); }
+  }
 
-  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line-height { line-height: $line-height; }
   @if $font-size { font-size: $font-size; }
+  @if $padding { padding: $padding; }
 
   path {
     fill: $color;    
@@ -65,18 +73,22 @@
   $color: $c-brand-orange,
   $background: $white, 
   $border: 1px,
-  $padding: 1em,
+  $padding: false,
   $line-height: false,
   $display: false,
   $font-size: false) {
   background-color: $background;
   border: $border solid $color;
-  padding: $padding;
   color: $color;
 
-  @if $display { @include button-display($display, $padding * 0.625); }
+  @if $display {
+    @if $padding { @include button-display($display, $padding * 0.625); } 
+    @else { @include button-display($display, 0.625); }
+  }
+  
   @if $line-height { line-height: $line-height; }
   @if $font-size { font-size: $font-size; }
+  @if $padding { padding: $padding; }
 
   path {
     fill: $color;    
@@ -98,16 +110,16 @@
 @mixin button-link(
   $color: inherit,
   $background: transparent,
-  $padding: 0,
+  $padding: false,
   $line-height: false) {
   background-color: $background;
   text-decoration: underline;
   font-weight: inherit;
-  padding: $padding;
   border-radius: 0;
   color: $color;
   
   @if $line-height { line-height: $line-height; }
+  @if $padding { padding: $padding; }
 }
 
 @mixin btn-primary {

package/helpers/mixins/_table.scss

@@ -5,12 +5,10 @@
   padding-top: $gap;
 }
 
-@mixin table-link {
-  @include focus {
-    @include single-box($c-grey-night);
-    background-color: $c-grey-night;
-    color: $white;
-  }
+@mixin table-link--focus {
+  @include single-box($c-grey-night);
+  background-color: $c-grey-night;
+  color: $white;
 }
 
 @mixin default-table-style {

package/helpers/mixins/table/_etickets.scss

@@ -53,6 +53,8 @@
   }
 
   a {
-    @include table-link;
+    @include focus {
+      @include table-link--focus;
+    }
   }
 }

package/helpers/mixins/table/_orders.scss

@@ -49,6 +49,8 @@
   }
 
   a {
-    @include table-link;
+    @include focus {
+      @include table-link--focus;
+    }
   }
 }

package/index.js

@@ -6,7 +6,6 @@ import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import CardDisplay from './components/card_display'
-import FooterLogos from './components/footer_logos'
 import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
@@ -24,6 +23,7 @@ import BrFormRow from './components/br_form_row'
 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'
 
@@ -43,7 +43,6 @@ export {
   EventSummary,
   BrFooterLower,
   BrFooterUpper,
-  FooterLogos,
   FluidIframe,
   HelpRow,
   CardDisplay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.5",
+  "version": "1.7.8",
   "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/_br-loader.scss

@@ -17,7 +17,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   margin-left: auto;
   padding-top: 2rem;
   height: 6.5rem;
-  width: 8.5rem;
+  width: 9.75rem;
 }
 
 .icon.br-loader {

package/components/footer_logos.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :class="$style.logos">
-    <slot />
-  </div>
-</template>
-
-<script>
-// dont think we need this any longer
-export default { 
-  name: 'FooterLogos'
-}
-</script>
-
-<style lang="scss" module>
-
-.logos {
-  margin: -1rem;
-
-  > * {
-    margin: 1rem;
-  }
-  
-  > svg {
-    display: inline-block;
-    height: 3rem;
-    fill: $white;
-    width: auto;
-  }
-}
-
-</style>