barbican-reset 0.9.4 → 0.9.5

package/helpers/mixins/_content.scss

@@ -0,0 +1,33 @@
+
+@mixin content_masthead {
+  background-color: white;
+  box-shadow: 0 5px 5px rgba(black, 0.1);
+  padding: 0 $constrained_grid_padding;
+  // Required to ensure the box-shadow is visible when div.content-main-content uses a background-color.
+  position: relative;
+}
+
+@mixin content_masthead__inner {
+  max-width: $constrained_content_width--wide;
+  padding: $space--large * 2 0;
+  margin: 0 auto;
+
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
+@mixin content-main-content {
+  padding-right: 10%;
+  padding-left: 10%;
+}
+
+@mixin content-main-content__inner {
+  max-width: $constrained_content_width--wide;
+  padding: 1.5rem 0;
+  margin: 0 auto;
+
+  @include media-breakpoint-up(sm) {
+    padding: 2.5rem 0;
+  }
+}

package/helpers/mixins/_core.scss

@@ -24,15 +24,18 @@
   -moz-appearance: $value;
 }
 
-@mixin button($background: $c-power-blue, $focus: $c-power-blue-dark) {
+@mixin button(
+  $background: $c-power-blue, 
+  $focus: $c-power-blue-dark, 
+  $gap: 0.75em) {
+  
   $color: $white;
-  $gap: 0.75em;
-
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  border-radius: $border-radius-lg;
   background-color: $background;
+  padding: $gap ($gap * 1.65);
   text-decoration: none;
-  border-radius: 0.5rem;
   place-items: center;
   text-align: center;
   font-weight: 700;
@@ -41,7 +44,6 @@
   cursor: pointer;
   line-height: 1;
   display: flex;
-  padding: $gap;
   color: $color;
 
   @include focus {

package/helpers/mixins/_focus.scss

@@ -3,7 +3,7 @@
     box-shadow: none; 
     outline: none; 
   }
-  &:hover, &:focus, &[data-focus-visible-added] {
+  &:hover, &[data-focus-visible-added] {
     @content;
   }  
 }

package/helpers/mixins/index.scss

@@ -1,5 +1,6 @@
 // paths more explicit for gulp-sass
 @import "~bourbon/core/bourbon.scss";
+@import "content.scss";
 @import "core.scss";
 @import "focus.scss";
 @import "font.scss";

package/helpers/variables/layout/index.scss

@@ -4,13 +4,18 @@ $constrained_content_width--thin: 800px;
 $constrained_content_width--wide: 1200px;
 
 $space: 0.625rem;
-/// Default large amount of space.
+// Default large amount of space.
 $space--large: $space * 3;
-/// Default gap value for use in CSS grid.
+// Default gap value for use in CSS grid.
 $grid-gap: $space;
 
-/// Power Festival
-$power-gap: 1.25rem;
+$border-radius-lg: 0.375rem;
+
+// Account Area
+$gap-account: 2rem;
+
+// Power Festival
+$gap-power: 1.25rem;
 $height-dashboard-banner: 25rem;
 $width-power-related: 66rem;
-$accordion-gap: 2rem;
+$gap-accordion: 2rem;

package/index.js

@@ -6,6 +6,7 @@ import Container from './vue/Container'
 import Wrap from './vue/Wrap'
 import Card from './vue/Card'
 import Carousel from './vue/Carousel'
+import Banner from './vue/Banner'
 
 export { 
   LoadingAnimation, 
@@ -15,5 +16,6 @@ export {
   Container,
   Wrap,
   Card,
-  Carousel
+  Carousel,
+  Banner
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/vue/Banner/banner.scss

@@ -0,0 +1,8 @@
+
+.outer {
+  @include content_masthead;
+}
+
+.inner {
+  @include content_masthead__inner;
+}

package/vue/Banner/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div :class="$style.outer">
+    <div :class="$style.inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style src="./banner.scss" lang="scss" module></style>

package/vue/Card/card.scss

@@ -1,17 +1,24 @@
 
 .container {
   border: 1px solid $c-grey-concrete;
+  border-radius: $border-radius-lg;
   border-color: $c-grey-pearl;
   background-color: $white;
-  border-radius: 0.5rem;
   align-content: start;
   overflow: hidden;
   padding: 1.25rem;
   display: grid;
   gap: 1.25rem;
-  
-  &_wrap {
-    composes: container;
-    background-color: $gray-100;
+}
+
+.container.wrap {
+  background-color: $gray-100;
+}
+
+.container.account {
+  padding: $gap-account;
+
+  &:not(:last-of-type) {
+    margin-bottom: $gap-account;
   }
 }

package/vue/Card/index.vue

@@ -10,11 +10,22 @@ export default {
     wrap: {
       type: Boolean,
       default: false,
+    },
+    account: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
     styleContainer() {
-      return this.wrap ? this.$style.container_wrap : this.$style.container;
+      let styles = [this.$style.container];
+      if (this.wrap) {
+        styles.push(this.$style.wrap);
+      }
+      if (this.account) {
+        styles.push(this.$style.account);
+      }
+      return styles;
     }
   }
 }

package/vue/Container/container.scss

@@ -2,11 +2,11 @@
 .outer {
   padding-right: 5%;
   padding-left: 5%;
+}
 
-  &_splash {
-    padding-right: 10%;
-    padding-left: 10%;  
-  }
+.outer_splash {
+  padding-right: 10%;
+  padding-left: 10%;  
 }
 
 .inner {

package/vue/Wrap/wrap.scss

@@ -2,9 +2,9 @@
   max-width: $constrained_content_width--wide;
   margin-right: auto;
   margin-left: auto;
+}
 
-  &_title {
-    composes: container;
-    @include narrow-width;
-  }
+.container_title {
+  composes: container;
+  @include narrow-width;
 }