barbican-reset 1.7.4 → 1.7.7

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

@@ -2,10 +2,13 @@
 @mixin br-footer-upper {
   padding-top: 3.75rem;
   display: grid;
-  gap: 1rem;
+  row-gap: 1rem;
 
   @include media-breakpoint-up(md) {
-    grid-template-columns: 11rem auto;
+    justify-content: flex-start;
+    align-items: flex-start;
+    grid-auto-flow: column;
+    column-gap: 3rem;
   }
 
   &:not(.splash) {

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/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/_text.scss

@@ -25,6 +25,7 @@
   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/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/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/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.4",
+  "version": "1.7.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/_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/scss/_custom-select.scss

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

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>