barbican-reset 1.7.3 → 1.7.6

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/_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

@@ -20,6 +20,7 @@
 @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/_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/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,8 +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 FooterLower from './components/footer_lower'
 import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
@@ -25,7 +23,9 @@ 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'
 
 export { 
   BrLoader, 
@@ -41,9 +41,8 @@ export {
   BrFormUpdate,
   BrFormRow,
   EventSummary,
+  BrFooterLower,
   BrFooterUpper,
-  FooterLogos,
-  FooterLower,
   FluidIframe,
   HelpRow,
   CardDisplay,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.7.3",
+  "version": "1.7.6",
   "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/_custom-select.scss

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

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";

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>