barbican-reset 1.6.6 → 1.7.0

package/animations/confirm.js

@@ -0,0 +1,62 @@
+import gsap from 'gsap'
+import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
+
+gsap.registerPlugin(DrawSVGPlugin);
+
+const fadeIn = {
+  duration: 0.3,
+  opacity: 0,
+  delay: 0.3,
+};
+
+const explode = {
+  ease: "power1.out",
+  opacity: 0,
+  scale: 1.5,
+};
+
+const defaults = {
+  duration: 0.6, 
+  ease: "power1.in", 
+  transformOrigin: "center"
+}
+
+export const animateEmail = () => {
+  const query = target => document.querySelector(`.card[email] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const arrow = query(".arrow");
+  const fold = query(".fold");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.set(arrow, { opacity: 0 })
+    .from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(fold, { drawSVG: "0%", duration: 0.3 }, "start")
+    .to(clone, explode, "start")
+    .set(arrow, { opacity: 1 })
+    .from(arrow, { x: -6, ease: "power1.out" });
+}
+
+export const animateDone = () => {
+  const query = target => document.querySelector(`.card[done] ${target}`);
+  const title = query(".card-title");
+  const outline = query(".outline");
+  const tick = query(".tick");
+  const tl = gsap.timeline({ defaults });
+
+  const clone = title.cloneNode(true);
+  clone.classList.add("clone");
+  title.after(clone);
+
+  tl.from(title, fadeIn)
+    .set(clone, { opacity: 0.4 })
+    .from(outline, { drawSVG: "0%" }, "start")
+    .from(tick, { drawSVG: "0%", duration: 0.3 }, "start+=0.3")
+    .to(clone, explode, "start");
+}

package/animations/index.js

@@ -0,0 +1,8 @@
+import { animateEmail, animateDone } from './confirm'
+
+export default {
+  methods: {
+    animateEmail,
+    animateDone,
+  },
+};

package/components/br_button/remove_ticket.vue

@@ -15,7 +15,7 @@
         <slot name="loading" />
       </template>
       <template v-else>
-        removing ...
+        removing&nbsp;...
       </template>
     </template>
 

package/components/br_confirm_done.vue

@@ -0,0 +1,29 @@
+<template>
+  <b-card confirm done>
+    <done-icon />
+    <b-card-title>Done</b-card-title>
+    <b-card-text v-if="$slots.default">
+      <slot />
+    </b-card-text>
+  </b-card>
+</template>
+
+<script>
+import Animations from 'barbican-reset/animations'
+import { DoneIcon } from 'barbican-reset/icons/confirm'
+
+export default {
+  mixins: [Animations],
+  components: {
+    DoneIcon,
+  },
+  props: {
+    type: {
+      type: String
+    },
+  },
+  mounted() {
+    this.animateDone();
+  },
+};
+</script>

package/components/br_confirm_email.vue

@@ -0,0 +1,25 @@
+<template>
+  <b-card confirm email>
+    <email-icon />
+    <b-card-title v-if="$slots.title">
+      <slot name="title" />
+    </b-card-title>
+    <b-card-text v-if="$slots.default">
+      <slot />
+    </b-card-text>
+  </b-card>
+</template>
+
+<script>
+import Animations from 'barbican-reset/animations'
+import { EmailIcon } from 'barbican-reset/icons/confirm'
+export default {
+  mixins: [Animations],
+  components: {
+    EmailIcon
+  },
+  mounted() {
+    this.animateEmail();
+  },
+};
+</script>

package/components/br_form_row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-form-group">
+  <div class="br-form-row">
     <label v-if="label" :for="id">
       <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
     </label>

package/components/br_wrap.vue

@@ -0,0 +1,24 @@
+<template>
+  <div :class="['br_wrap',{ title },{ videos },{ thin }]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: Boolean,
+      default: false,
+    },
+    thin: {
+      type: Boolean,
+      default: false,
+    },
+    videos: {
+      type: Boolean,
+      default: false,
+    }
+  },
+}
+</script>

package/components/event_summary.vue

@@ -43,7 +43,7 @@ export default {
 @mixin subtitle {
   @include title;
   font-size: $h5-font-size;
-  color: $c-text-secondary;
+  color: $c-grey-steel;
   font-weight: normal;
 
   @include media-breakpoint-up(md) {

package/helpers/mixins/_basket.scss

@@ -26,10 +26,4 @@
   @include summary-sm {
     grid-auto-flow: row;
   }  
-}
-
-@mixin table-row($gap: 0.75rem) {
-  border-bottom: 1px solid $c-grey-pearl;
-  padding-bottom: $gap;
-  padding-top: $gap;
 }

package/helpers/mixins/_buttons.scss

@@ -8,10 +8,10 @@
   font-weight: 700;
   transition: none;
   line-height: 1;
-  padding: 1em;
+  padding: 1em;  
 }
 
-@mixin button-display($display:'ib',$gap:1rem) {
+@mixin button-display($display:'ib',$gap:1em) {
   @if $display == 'ib' {
     vertical-align: middle;
     display: inline-block;
@@ -32,16 +32,18 @@
   $background: $c-brand-orange, 
   $color: $white, 
   $border: 1px,
-  $padding: 1rem,
-  $line: false,
-  $display: false) {
+  $padding: 1em,
+  $line-height: false,
+  $display: false,
+  $font-size: false) {
   border: $border solid $background;
   background-color: $background;
   padding: $padding;
   color: $color;
 
   @if $display { @include button-display($display, $padding * 0.625); }
-  @if $line { line-height: $line; }
+  @if $line-height { line-height: $line-height; }
+  @if $font-size { font-size: $font-size; }
 
   path {
     fill: $color;    
@@ -63,16 +65,18 @@
   $color: $c-brand-orange,
   $background: $white, 
   $border: 1px,
-  $padding: 1rem,
-  $line: false,
-  $display: false) {
+  $padding: 1em,
+  $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 $line { line-height: $line; }
+  @if $line-height { line-height: $line-height; }
+  @if $font-size { font-size: $font-size; }
 
   path {
     fill: $color;    
@@ -95,7 +99,7 @@
   $color: inherit,
   $background: transparent,
   $padding: 0,
-  $line: false) {
+  $line-height: false) {
   background-color: $background;
   text-decoration: underline;
   font-weight: inherit;
@@ -103,7 +107,7 @@
   border-radius: 0;
   color: $color;
   
-  @if $line { line-height: $line; }
+  @if $line-height { line-height: $line-height; }
 }
 
 @mixin btn-primary {
@@ -116,10 +120,24 @@
   }
 }
 
+@mixin btn-returns {
+  @include button-solid(
+    $padding: 0.75em,
+    $font-size: $font-size-sm
+  );
+}
+
 @mixin btn-outline-primary {
   @include button-outline;
 }
 
+@mixin btn-resale {
+  @include button-outline(
+    $padding: 0.625em,
+    $font-size: $font-size-sm
+  );
+}
+
 @mixin btn-secondary {
   @include button-solid($c-grey-night);
 }
@@ -171,8 +189,8 @@
 @mixin btn-remove {
   @include button-solid(
     $background: $c-grey-night,
-    $padding: 0.625rem,
-    $line: 1.375);
+    $padding: 0.625em,
+    $line-height: 1.375);
 }
 
 @mixin btn-link {
@@ -186,7 +204,7 @@
 
 @mixin btn-video-help {
   @include button-link(
-    $padding: 1.25rem,
+    $padding: 1.25em,
     $background: $c-grey-alpine);
   font-weight: 700;
   text-align: left;

package/helpers/mixins/_card.scss

@@ -6,10 +6,4 @@
   .card-body {
     padding: 1.75rem 1.75rem 1.5rem;
   }
-}
-
-@mixin clone($top:5.875) {
-  margin-top: -#{$top}rem;
-  margin-bottom: 0;
-  opacity: 0;
 }

package/helpers/mixins/_table.scss

@@ -0,0 +1,50 @@
+
+@mixin table-row($gap: 0.75rem) {
+  border-bottom: 1px solid $c-grey-pearl;
+  padding-bottom: $gap;
+  padding-top: $gap;
+}
+
+@mixin table-link {
+  @include focus {
+    @include single-box($c-grey-night);
+    background-color: $c-grey-night;
+    color: $white;
+  }
+}
+
+@mixin table-details-row($type:"header") {
+  grid-template-columns: auto 10rem 8rem;
+  
+  @if $type == "checkbox" {
+    grid-template-columns: 2.75rem auto 10rem 8rem;  
+  }
+}
+
+@mixin table-etickets-row {
+  grid-template-columns: 10rem auto 8rem;
+}
+
+@mixin table-gifts-row {
+  grid-template-columns: 3fr 5fr 5fr 2fr 2fr;
+}
+
+@mixin table-membership-row {
+  grid-template-columns: auto 10rem 10rem 8rem;
+}
+
+@mixin table-orders-row {
+  grid-template-columns: 10rem 8rem auto 8rem;
+}
+
+@mixin table-preferences-row {
+  grid-template-columns: auto repeat(2, 5rem);
+}
+
+@mixin table-tickets-row {
+  grid-template-columns: 2fr 5fr 5fr 2fr;
+}
+
+
+
+

package/helpers/mixins/index.scss

@@ -19,11 +19,4 @@
 @import "font";
 @import "loading";
 @import "input";
-
-@mixin table_link {
-  @include focus {
-    @include single-box($c-grey-night);
-    background-color: $c-grey-night;
-    color: $white;
-  }
-}
+@import "table";

package/helpers/variables/colors/_borders.scss

@@ -0,0 +1,3 @@
+
+$c-border-faint:  $c-grey-pearl;
+$c-border-strong: $c-grey-concrete;

package/helpers/variables/colors/_brand.scss

@@ -1,4 +1,5 @@
 
+$c-brand-orange-faint: hsl(21, 60%, 99%);
 $c-brand-orange-light: hsl(21, 100%, 95%);
 $c-brand-orange: hsl(21, 100%, 41%);
 $c-brand-orange-dark: hsl(21, 100%, 38%);

package/helpers/variables/colors/index.scss

@@ -5,5 +5,4 @@
 @import "wgp";
 @import "power";
 @import "llf";
-
-@import "layout";
+@import "borders";

package/icons/confirm/done.vue

@@ -0,0 +1,23 @@
+<template>
+  <svg
+    viewBox="0 0 80 80"
+    stroke="#353535"
+    height="76"
+    width="76"
+  >
+    <path
+      class="tick"
+      d="M18.9,37.8l14.4,14.4l24.5-24.4"
+      fill="none"
+      stroke-width="6"
+      stroke-miterlimit="10"
+    />
+    <path
+      class="outline"
+      d="M40,10c-16.6,0-30,13.4-30,30s13.4,30,30,30	s30-13.4,30-30S56.6,10,40,10z"
+      fill="none"
+      stroke-width="6"
+      stroke-miterlimit="10"
+    />
+  </svg>
+</template>

package/icons/confirm/email.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg stroke="#353535" fill="#353535" viewBox="0 0 100 80" width="100" height="80">
+    <path class="arrow" d="M72.6,45.6L87,60L72.6,74.4V63.6H58.2v-7.2h14.4V45.6z" />
+    <path class="outline" d="M79.6,38.4	V13.2C79.6,9,76,9.5,76,9.5L18.6,9.7c0,0-3.5-0.3-3.5,3.5v42.9c0,0-0.7,3.9,3.3,3.9H51" fill="none" stroke-width="7" stroke-linejoin="round" stroke-miterlimit="10" />
+    <path class="fold" d="M15.2,14.5l32.3,20.2l32.2-20.2" fill="none" stroke-width="6" stroke-miterlimit="10" />
+  </svg>
+</template>

package/icons/confirm/index.js

@@ -0,0 +1,7 @@
+import EmailIcon from './email.vue'
+import DoneIcon from './done.vue'
+
+export {
+  EmailIcon,
+  DoneIcon
+}

package/index.js

@@ -1,7 +1,5 @@
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
-import Wrap from './components/wrap'
-import Loader from './components/loader'
 import RelatedTitle from './components/related_title'
 import RelatedCard from './components/related_card'
 import RelatedRow from './components/related_row'
@@ -16,23 +14,27 @@ import HelpRow from './components/help_row'
 import VideoContent from './components/video_content'
 import PaymentLogo from './components/payment_logo'
 import SkipLink from './components/skip_link'
+
 import BrAlert from './components/br_alert'
-import BrButton from './components/br_button'
 import BrAnchor from './components/br_anchor'
-import BrFormRow from './components/br_form_row'
+import BrButton from './components/br_button'
+import BrConfirmDone from './components/br_confirm_done'
+import BrConfirmEmail from './components/br_confirm_email'
 import BrContainer from './components/br_container'
 import BrFormBlock from './components/br_form_block'
+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'
 
 export { 
-  Loader, 
+  BrLoader, 
   BrAlert,
   RelatedTitle,
   RelatedCard,
   RelatedRow,
   TypeText,
   BrContainer,
-  Wrap,
   AccountTitle,
   Placeholder,
   BrFormBlock,
@@ -49,5 +51,8 @@ export {
   PaymentLogo,
   SkipLink,
   BrButton,
-  BrAnchor
+  BrAnchor,
+  BrConfirmDone,
+  BrConfirmEmail,
+  BrWrap
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {
@@ -15,6 +15,7 @@
   "files": [
     "fonts/*.{woff,woff2}",
     "focus-visible.min.js",
+    "animations/**/*",
     "components/**/*",
     "helpers/**/*",
     "icons/**/*",

package/scss/_atomic.scss

@@ -1,6 +1,9 @@
 
 $gaps: "margin-top", "margin-bottom", "min-height", "padding-left", "padding-right";
-$aligns: "left", "center", "right";
+$text-aligns: "left", "center", "right";
+$font-weights: "700", "400";
+$margins05: "margin-top", "margin-bottom", "margin-right", "margin-left";
+$paddings05: "padding-top", "padding-bottom", "padding-right", "padding-left";
 
 @each $gap in $gaps {
   @for $i from 1 to 5 {
@@ -10,26 +13,36 @@ $aligns: "left", "center", "right";
   }
 }
 
-@each $align in $aligns {
+@each $align in $text-aligns {
   .text-align-#{$align} {
     text-align: #{$align};
   }
 }
 
-.border-radius-lg {
-  border-radius: $border-radius-lg;
+@each $weight in $font-weights {
+  .font-weight-#{$weight} {
+    font-weight: #{$weight};
+  }
 }
 
-.color-orange {
-  color: $c-brand-orange;
+@each $margin in $margins05 {
+  .#{$margin}-05 {
+    #{$margin}: 0.5rem;
+  }
 }
 
-.font-weight-700 {
-  font-weight: 700;
+@each $padding in $paddings05 {
+  .#{$padding}-05 {
+    #{$padding}: 0.5rem;
+  }
 }
 
-.font-weight-400 {
-  font-weight: 400;
+.border-radius-lg {
+  border-radius: $border-radius-lg;
+}
+
+.color-orange {
+  color: $c-brand-orange;
 }
 
 .font-size-lg {
@@ -50,10 +63,6 @@ $aligns: "left", "center", "right";
   margin: 0;
 }
 
-.margin-top-05 {
-  margin-top: 0.5rem;
-}
-
 .margin-top-025 {
   margin-top: 0.25rem;
 }
@@ -67,5 +76,5 @@ $aligns: "left", "center", "right";
 }
 
 .background-color-alt {
-  background-color: $c-page-global-content-bg-alt;
+  background-color: $c-brand-orange-faint;
 }

package/scss/{_loading-animation.scss → _br-loader.scss}

@@ -1,7 +1,7 @@
 $offset: 0.875rem;
 $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
-.card.loading-animation {
+.card.br-loader {
   background-color: transparent;
   border: none;
 
@@ -11,7 +11,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 }
 
-.wrap.loading-animation {
+.wrap.br-loader {
   padding-bottom: 2rem;
   margin-right: auto;
   margin-left: auto;
@@ -20,7 +20,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   width: 8.5rem;
 }
 
-.icon.loading-animation {
+.icon.br-loader {
   @include inline-block;
   position: relative;
 

package/scss/_br-wrap.scss

@@ -0,0 +1,18 @@
+
+.br_wrap {
+  max-width: $layout-width-wide;
+  margin-right: auto;
+  margin-left: auto;
+
+  &.title {
+    max-width: $layout-width-title;    
+  }
+
+  &.videos {
+    max-width: $layout-width-videos;    
+  }
+
+  &.thin {
+    max-width: $layout-width-thin;
+  }
+}

package/scss/_btn.scss

@@ -84,6 +84,16 @@
     @include btn-invisible;
   }
 
+  &.btn-returns {
+    // solid orange
+    @include btn-returns;
+  }
+
+  &.btn-resale {
+    // orange outline, fill on focus
+    @include btn-resale;
+  }
+
   // modifyers
   &.expand {
     @include btn-expand;

package/scss/_close-icon.scss

@@ -8,7 +8,7 @@
   }
 
   .fill {
-    fill: $c-page-global-content-bg-alt;
+    fill: $c-brand-orange-faint;
   }
 }
 

package/scss/_custom-checkbox.scss

@@ -1,6 +1,18 @@
 .custom-checkbox {
   @include checkbox-input;
 
+  input[table][type="checkbox"] {
+    @include inset;
+    margin-top: 0.625rem;
+    position: relative;
+    display: block;
+    z-index: 1;
+
+    + label {
+      display: none;
+    }
+  }
+
   &:not(:last-of-type) {
     margin-bottom: 0.5rem;
   }

package/scss/{_form-group.scss → _form-row.scss}

@@ -1,5 +1,5 @@
 
-.br-form-group {
+.br-form-row {
 
   &:not(:last-of-type) {
     margin-bottom: 1rem;
@@ -7,11 +7,16 @@
 
   @include media-breakpoint-up(sm) {
     grid-template-columns: 33fr 67fr;
-    align-items: center;
     gap: $gap-account;
     display: grid;
   }
 
+  > label {
+    @include media-breakpoint-up(sm) {
+      margin-top: 1rem;
+    }
+  }
+
   label {
     font-weight: normal;
 

package/scss/_header.scss

@@ -1,5 +1,5 @@
 header {
-  background-color: $c-page-header-bg;
+  background-color: $c-brand-orange;
 
   &.videoSplash, &.powerSplash, &.cinemaSplash, &.concertSplash, &.theatreSplash {
     display: none;

package/scss/card/_confirm.scss

@@ -1,21 +1,28 @@
 
 .card[confirm] {
   @include form-card;
-  max-width: 16.25rem;
   margin-right: auto;
   text-align: center;
   margin-left: auto;
+  max-width: 20rem;  
 
-  .card-title {
-    font-size: $h2-font-size;
-    margin-bottom: 1.5rem;
+  $gap: 0.625rem;
+
+  svg {
+    margin-bottom: $gap;
   }
-}
 
-.card[confirm].request .clone {
-  @include clone;
-}
+  .card-title {
+    font-size: $h3-font-size;
+    margin-bottom: 0;
+
+    &.clone {
+      margin-top: -2.125rem;
+      opacity: 0;
+    }
+  }
 
-.card[confirm].reset .clone {
-  @include clone(3.3125);
+  .card-text {
+    margin-top: $gap;
+  }
 }

package/scss/index.scss

@@ -10,12 +10,13 @@
 @import "footer";
 @import "klaro";
 @import "fonts";
-@import "loading-animation";
+@import "br-loader";
 @import "close-icon";
 @import "table/index";
 @import "promo";
 @import "alert";
-@import "form-group";
+@import "form-row";
+@import "br-wrap";
 
 // bootstrap component styles
 @import "btn";

package/scss/table/_details.scss

@@ -1,3 +1,4 @@
+
 table.details {
 
   $mq: md;
@@ -21,7 +22,7 @@ table.details {
     display: grid;
 
     @include media-breakpoint-up($mq) {
-      grid-template-columns: auto 10rem 8rem;
+      @include table-details-row;
     }
 
     @include media-breakpoint-down($mq) {

package/scss/table/_etickets.scss

@@ -22,7 +22,7 @@ table.etickets {
     }
 
     @include media-breakpoint-up($mq) {
-      grid-template-columns: 10rem auto 8rem;
+      @include table-etickets-row;
     }
 
     @include media-breakpoint-down($mq) {
@@ -53,6 +53,6 @@ table.etickets {
   }
 
   a {
-    @include table_link;
+    @include table-link;
   }
 }

package/scss/table/_gifts.scss

@@ -15,7 +15,7 @@ table.gifts {
   tr {
     @include media-breakpoint-up($mq) {
       @include table-row;
-      grid-template-columns: 3fr 5fr 5fr 2fr 2fr;
+      @include table-gifts-row;
       display: grid;
       gap: 0.75rem;
   

package/scss/table/_membership.scss

@@ -1,6 +1,6 @@
 
 table.details.membership tr {
   @include media-breakpoint-up(md) {
-    grid-template-columns: auto 10rem 10rem 8rem;
+    @include table-membership-row;
   }
 }

package/scss/table/_orders.scss

@@ -22,7 +22,7 @@ table.orders {
     }
 
     @include media-breakpoint-up($mq) {
-      grid-template-columns: 10rem 8rem auto 8rem;
+      @include table-orders-row;
     }
 
     @include media-breakpoint-down($mq) {
@@ -59,6 +59,6 @@ table.orders {
   }
 
   a {
-    @include table_link;
+    @include table-link;
   }
 }

package/scss/table/_preferences.scss

@@ -22,7 +22,7 @@ table.preferences {
     }
 
     @include media-breakpoint-up($mq) {
-      grid-template-columns: auto repeat(2, 5rem);
+      @include table-preferences-row;
     }
 
     @include media-breakpoint-down($mq) {

package/scss/table/_resale.scss

@@ -0,0 +1,30 @@
+table.resale {
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 11rem;
+
+  $mq: md;
+
+  tbody tr {
+    border: 1px solid $c-grey-pearl;
+  }
+
+  td {
+    text-align: left;
+    padding: 0.625rem;
+
+    @include media-breakpoint-up($mq) {  
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+
+  label {
+    font-size: $font-size-lg;
+
+    @include media-breakpoint-up($mq) {
+      display: none;
+    }
+  }
+}

package/scss/table/_tickets.scss

@@ -9,7 +9,7 @@ table.tickets {
   tr {
     @include media-breakpoint-up($mq) {
       @include table-row;
-      grid-template-columns: 2fr 5fr 5fr 2fr;
+      @include table-tickets-row;
       display: grid;
       gap: 0.75rem;
   

package/scss/table/index.scss

@@ -4,6 +4,7 @@
 @import "section";
 @import "orders";
 @import "details";
+@import "resale";
 @import "preferences";
 @import "etickets";
 @import "membership";

package/components/wrap.vue

@@ -1,56 +0,0 @@
-<template>
-  <div :class="styleContainer">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: Boolean,
-      default: false,
-    },
-    thin: {
-      type: Boolean,
-      default: false,
-    },
-    videos: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  computed: {
-    styleContainer() {
-      const style = this.$style;
-      let output = [style.container];
-      if (this.title) { output.push(style.title); }
-      if (this.thin) { output.push(style.thin); }
-      if (this.videos) { output.push(style.videos); }
-      return output;
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.container {
-  max-width: $layout-width-wide;
-  margin-right: auto;
-  margin-left: auto;
-
-  &.title {
-    max-width: $layout-width-title;    
-  }
-
-  &.videos {
-    max-width: $layout-width-videos;    
-  }
-
-  &.thin {
-    max-width: $layout-width-thin;
-  }
-}
-
-</style>

package/helpers/variables/colors/_layout.scss

@@ -1,40 +0,0 @@
-
-/// Buttons
-$c-list-btn-default:       $white, $c-grey-night, $white;
-$c-list-btn-primary:       $white, $c-brand-orange, null, null, $c-brand-orange-dark;
-$c-list-btn-primary-alt:   $white, $c-status-neutral;
-$c-list-btn-secondary:     $c-brand-orange, $white, $c-brand-orange, $c-brand-orange-dark, $c-brand-orange-light, $c-brand-orange-dark;
-$c-list-btn-secondary-alt: $c-brand-orange, $white, $c-brand-orange, $white, $c-brand-orange;
-$c-list-btn-outline:       $c-grey-night, $c-grey-alpine, $c-grey-night, $c-grey-alpine, $c-grey-night;
-$c-list-btn-light:         $c-grey-night, $white;
-
-$c-list-btn-primary-cinema:   $white, $c-brand-cinema, null, null, $c-brand-cinema-dark;
-$c-list-btn-secondary-cinema: $c-brand-cinema, $white, $c-brand-cinema, $c-brand-cinema-dark, $c-status-success-fade, $c-brand-cinema-dark;
-
-$c-list-btn-primary-power:   $white, $c-power-blue, null, null, $c-power-blue-dark;
-
-/// Buttons - specific use
-$c-list-btn-header: $white, transparent;
-
-/// Text
-$c-text:           $c-grey-night;
-$c-text-secondary: $c-grey-steel;
-$c-text-mark:      $white;
-$c-text-mark-bg:   $c-grey-night;
-$c-text-hr-bg:     $c-grey-concrete;
-
-/// Links
-$c-list-link:        $c-text, $c-brand-orange;
-$c-list-link-footer: $white, $c-grey-concrete;
-$c-list-link-header: $white, rgba($white, 0.8);
-
-/// Borders
-$c-border-faint:  $c-grey-pearl;
-$c-border-strong: $c-grey-concrete;
-
-/// Page areas
-$c-page-footer:    $white;
-$c-page-footer-bg: $c-grey-midnight;
-$c-page-header:    $white;
-$c-page-header-bg: $c-brand-orange;
-$c-page-global-content-bg-alt: mix($white, $c-brand-orange, 98%);

package/icons/password/index.js

@@ -1,7 +0,0 @@
-import RequestIcon from './request'
-import ResetIcon from './reset'
-
-export {
-  RequestIcon,
-  ResetIcon
-}

package/icons/password/request.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" version="1.1" width="100" height="80">
-    <path data-arrow d="M72.6,45.6L87,60L72.6,74.4V63.6H58.2v-7.2h14.4V45.6z" />
-    <path data-outline d="M79.6,38.4	V13.2C79.6,9,76,9.5,76,9.5L18.6,9.7c0,0-3.5-0.3-3.5,3.5v42.9c0,0-0.7,3.9,3.3,3.9H51" fill="none" stroke-width="7" stroke-linejoin="round" stroke-miterlimit="10" />
-    <path data-fold d="M15.2,14.5l32.3,20.2l32.2-20.2" fill="none" stroke-width="6" stroke-miterlimit="10" />
-  </svg>
-</template>
-
-<style lang="scss" scoped>
-
-.svg {
-  stroke: $c-grey-night;
-  fill: $c-grey-night;
-}
-
-</style>

package/icons/password/reset.vue

@@ -1,33 +0,0 @@
-<template>
-  <svg
-    class="reset-success__svg"
-    xmlns="http://www.w3.org/2000/svg"
-    width="80"
-    height="80"
-    viewBox="0 0 80 80"
-  >
-    <path
-      class="reset-success__tick"
-      d="M18.9,37.8l14.4,14.4l24.5-24.4"
-      fill="none"
-      stroke-width="7"
-      stroke-miterlimit="10"
-    />
-    <path
-      class="reset-success__outline"
-      d="M40,10c-16.6,0-30,13.4-30,30s13.4,30,30,30	s30-13.4,30-30S56.6,10,40,10z"
-      fill="none"
-      stroke-width="7"
-      stroke-miterlimit="10"
-    />
-  </svg>
-</template>
-
-<style lang="scss" scoped>
-
-.reset-success__svg {
-  stroke: $c-grey-night;
-  margin-bottom: 0.625rem;
-}
-
-</style>