barbican-reset 1.2.0 → 1.2.4

package/components/card_deck.vue

@@ -0,0 +1,41 @@
+<template>
+  <b-card-group deck>
+    <slot />
+  </b-card-group>
+</template>
+
+<script>
+import { BCard } from 'bootstrap-vue'
+export default { 
+  name: 'CardDeck',
+  components: { BCard },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.card-deck {
+  justify-content: center;
+  display: grid;
+  gap: 2rem;
+
+  @include media-breakpoint-up(md) {
+    align-items: flex-start;
+    grid-auto-flow: column;
+  }
+}
+
+.card-deck .card {
+  margin-bottom: 0;
+  max-width: 20rem;
+}
+
+.card-deck .card-title {
+  font-size: $h3-font-size;
+}
+
+.card-deck .card-text {
+  margin-bottom: 1rem;
+}
+
+</style>

package/components/form_section.vue

@@ -0,0 +1,23 @@
+<template>
+  <div :class="$style.container">
+    <slot />
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormSection',
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+  padding: 0.875rem 0.75rem 0.625rem 0.75rem;
+  border-left: 0.25rem solid;
+  background: $c-grey-alpine;
+  margin-bottom: 1rem;
+  font-weight: 700;
+}
+
+</style>

package/components/form_update.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="$style.container">
+    <div :class="$style.input"><slot /></div>
+    <b-button class="btn-update" @click.prevent="$emit('update')">update</b-button>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormUpdate',
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+  grid-template-columns: auto 6rem;
+  column-gap: 0.5rem;
+  display: grid;
+
+  @include media-breakpoint-up(sm) {
+    column-gap: 1rem;
+  }
+}
+
+.input {
+  @include all-text-inputs;
+  user-select: none;
+  overflow: hidden;
+}
+
+</style>

package/helpers/mixins/_buttons.scss

@@ -1,5 +1,5 @@
 
-@mixin button_setup {
+@mixin button-setup {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border-radius: $border-radius-lg;
@@ -11,7 +11,7 @@
   padding: 1em;
 }
 
-@mixin button_display($display:'ib',$gap:1rem) {
+@mixin button-display($display:'ib',$gap:1rem) {
   @if $display == 'ib' {
     vertical-align: middle;
     display: inline-block;
@@ -28,7 +28,7 @@
   }
 }
 
-@mixin button_solid(
+@mixin button-solid(
   $background: $c-brand-orange, 
   $color: $white, 
   $border: 1px,
@@ -40,7 +40,7 @@
   padding: $padding;
   color: $color;
 
-  @if $display { @include button_display($display, $padding * 0.625); }
+  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
   @include focus {
@@ -51,7 +51,7 @@
   }
 }
 
-@mixin button_outline(
+@mixin button-outline(
   $color: $c-brand-orange,
   $background: $white, 
   $border: 1px,
@@ -63,7 +63,7 @@
   padding: $padding;
   color: $color;
 
-  @if $display { @include button_display($display, $padding * 0.625); }
+  @if $display { @include button-display($display, $padding * 0.625); }
   @if $line { line-height: $line; }
 
   @include focus {
@@ -73,7 +73,7 @@
   }
 }
 
-@mixin button_link(
+@mixin button-link(
   $color: inherit,
   $background: transparent,
   $padding: 0,
@@ -93,7 +93,7 @@
 }
 
 @mixin btn-outline-header {
-  @include button_outline(
+  @include button-outline(
     $color: $white, 
     $background: $c-brand-orange,
     $border: 0.125rem,
@@ -101,46 +101,47 @@
 }
 
 @mixin btn-primary {
-  @include button_solid;
+  @include button-solid;
+  min-width: 8rem;
 }
 
 @mixin btn-outline-primary {
-  @include button_outline;
+  @include button-outline;
 }
 
 @mixin btn-secondary {
-  @include button_solid($c-grey-night);
+  @include button-solid($c-grey-night);
 }
 
 @mixin btn-outline-secondary {
-  @include button_outline($c-grey-night);
+  @include button-outline($c-grey-night);
 }
 
 @mixin btn-cinema {
-  @include button_solid($c-brand-cinema);
+  @include button-solid($c-brand-cinema);
 }
 
 @mixin btn-power {
-  @include button_solid($c-power-blue);
+  @include button-solid($c-power-blue);
 }
 
 @mixin btn-info {
-  @include button_solid($c-status-neutral);
+  @include button-solid($c-status-neutral);
 }
 
 @mixin btn-outline-cinema {
-  @include button_outline($c-brand-cinema);
+  @include button-outline($c-brand-cinema);
 }
 
 @mixin btn-remove {
-  @include button_solid(
+  @include button-solid(
     $background: $c-grey-night,
     $padding: 0.625rem,
     $line: 1.375);
 }
 
 @mixin btn-link {
-  @include button_link {
+  @include button-link {
     @include single-box($c-grey-night);
     background-color: $c-grey-night;
     color: $white;
@@ -148,7 +149,7 @@
 }
 
 @mixin btn-exit {
-  @include button_link {
+  @include button-link {
     @include single-box($c-grey-night);
     background-color: $white;
     border-radius: 50%;
@@ -174,12 +175,19 @@
 }
 
 @mixin btn-membership-card {
-  @include button_outline(
+  @include button-outline(
     $color: $white,
     $background: transparent
   );
 }
 
+@mixin btn-video-login {
+  @include button-solid( 
+    $background: $white,
+    $color: $c-splash-videos 
+  );
+}
+
 @mixin btn-expand {
   display: block;
 }

package/helpers/mixins/_card.scss

@@ -0,0 +1,15 @@
+
+@mixin form-card {
+  .card-header {
+    padding: 1.5rem 1.75rem 1.25rem;
+  }
+  .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/_content.scss

@@ -32,18 +32,6 @@
   }
 }
 
-// @mixin all-text-inputs {
-//   border: solid $border-width $c-border-strong;
-//   $background: lighten($c-grey-alpine, 1%);
-//   border-radius: $border-radius-sm;
-//   background-color: $background;
-//   // padding: 0.8rem 0.8rem 0.6rem;
-
-//   &:focus {
-//     background-color: $background;
-//   }
-// }
-
 @mixin card-container {
   border-radius: $border-radius-lg;
   background-color: $white;

package/helpers/mixins/_core.scss

@@ -12,13 +12,6 @@
   }
 }
 
-@mixin zeros {
-  bottom: 0;
-  right: 0;
-  left: 0;
-  top: 0;
-}
-
 @mixin set-appearance($value: none) {
   -webkit-appearance: $value;
   -moz-appearance: $value;

package/helpers/mixins/_font.scss

@@ -8,4 +8,11 @@
     -webkit-font-smoothing: subpixel-antialiased;
     -moz-osx-font-smoothing: auto;
   }
+}
+
+@mixin all-text-inputs {
+  border: solid $border-width $c-border-strong;
+  padding: 0.875rem 0.875rem 0.75rem;
+  background-color: $c-grey-alpine;
+  border-radius: $border-radius-lg;  
 }

package/helpers/mixins/index.scss

@@ -3,6 +3,7 @@
 @import "account/orders.scss";
 @import "basket.scss";
 @import "buttons.scss";
+@import "card.scss";
 @import "content.scss";
 @import "core.scss";
 @import "festival.scss";

package/icons/password/RequestIcon.vue

@@ -0,0 +1,16 @@
+<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/{ResetIcon/index.vue → ResetIcon.vue}

@@ -23,4 +23,11 @@
   </svg>
 </template>
 
-<style src="./reset_icon.scss" lang="scss"></style>
+<style lang="scss" scoped>
+
+.reset-success__svg {
+  stroke: $c-grey-night;
+  margin-bottom: 0.625rem;
+}
+
+</style>

package/index.js

@@ -6,8 +6,6 @@ import EventSummary from './components/event_summary'
 import AccountCard from './components/account_card'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
-import LoginForm from './components/login_form'
-import FormRow from './components/form_row'
 import TableRow from './components/table_row'
 import Banner from './components/banner'
 import Notification from './components/notification'
@@ -16,6 +14,9 @@ import RelatedTitle from './components/related_title'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import Carousel from './components/carousel'
+import CardDeck from './components/card_deck'
+import FormSection from './components/form_section'
+import FormUpdate from './components/form_update'
 
 export { 
   LoadingAnimation, 
@@ -30,9 +31,10 @@ export {
   AccountCard,
   AccountTitle,
   Placeholder,
-  LoginForm,
-  FormRow,
+  FormSection,
+  FormUpdate,
   TableRow,
   Block,
-  EventSummary
+  EventSummary,
+  CardDeck
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "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/_btn.scss

@@ -1,5 +1,5 @@
 .btn {
-  @include button_setup;
+  @include button-setup;
 
   &.btn-primary {
     // solid orange
@@ -52,6 +52,10 @@
     @include btn-membership-card;
   }
 
+  &.btn-video-login {
+    @include btn-video-login;
+  }
+
   // modifyers
   &.expand {
     @include btn-expand;

package/scss/_checkbox.scss

@@ -75,4 +75,8 @@
       }
     }    
   }
+}
+
+.custom-checkbox label {
+  font-weight: 400;
 }

package/scss/_form-group.scss

@@ -0,0 +1,59 @@
+
+form > .form-group {
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 33fr 67fr;
+    align-items: center;
+    gap: $gap-account;
+    display: grid;
+  }
+
+  > div:first-child {
+    @include media-breakpoint-up(sm) {
+      grid-column: 2 / 3;
+    }
+  }
+}
+
+.form-group {
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  legend {
+    padding: 0 !important;
+    font-weight: 700;
+    
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+
+.form-group[submit] {
+  text-align: right;
+
+  @include media-breakpoint-down(sm) {
+    button {
+      width: 100%;
+    }
+  }
+}
+
+@mixin label-status($content: '(required)') {
+  margin-left: 0.375rem;
+  display: inline-block;
+  content: $content;
+  font-weight: 400;
+}
+
+.form-group[required] {
+  legend::after {
+    @include label-status;
+  }
+}
+
+.form-group[optional] {
+  legend::after {
+    @include label-status('(optional)');
+  }
+}

package/scss/_input.scss

@@ -34,8 +34,5 @@ input[type=submit] {
 }
 
 #{$all-text-inputs} {
-  border: solid $border-width $c-border-strong;
-  padding: 0.875rem 0.875rem 0.75rem;
-  background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;
+  @include all-text-inputs;
 }

package/scss/_klaro.scss

@@ -4,7 +4,9 @@
   font-size: $font-size-sm;
   padding: 0.5em 0.75em;
   margin-right: 1em;
+  font-weight: 700;
   cursor: pointer;
+  color: $white;
   border: 0;
 
   &:focus {

package/scss/_radio.scss

@@ -0,0 +1,4 @@
+
+.custom-radio label {
+  font-weight: 400;
+}

package/scss/card/_confirm.scss

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

package/scss/card/_login.scss

@@ -0,0 +1,15 @@
+
+.card[login] {
+  @include form-card;
+
+  .card-header {
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+  }
+
+  .card-title {
+    font-size: $h1-font-size;
+    margin: 0;
+  }
+}

package/scss/card/_password.scss

@@ -0,0 +1,8 @@
+
+.card[password] {
+  @include form-card;
+
+  .card-title {
+    font-size: $h2-font-size;
+  }
+}

package/scss/{_card.scss → card/index.scss}

@@ -1,3 +1,8 @@
+
+@import "confirm.scss";
+@import "login.scss";
+@import "password.scss";
+
 .card {
   border: 1px solid $c-grey-pearl;
   border-radius: $border-radius-lg;
@@ -14,7 +19,14 @@
 }
 
 .card-subtitle {
-  @include card-subtitle;
+  color: $c-grey-steel !important;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  margin: 0;
+}
+
+.card-body {
+  padding: 1.5rem;
 }
 
 .card-img {

package/scss/index.scss

@@ -1,7 +1,7 @@
 // paths more explicit for gulp-sass
-@import "../node_modules/bootstrap/scss/functions";
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/mixins";
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
 @import "../helpers/index.scss";
 
 @import "klaro.scss";
@@ -13,13 +13,15 @@
 
 // bootstrap component styles
 @import "btn.scss";
-@import "card.scss";
+@import "card/index.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 @import "form.scss";
+@import "form-group.scss";
 @import "list.scss";
 @import "input.scss";
 @import "radio-group.scss";
+@import "radio.scss";
 
 // atomic helper styles
 @import "atomic.scss";

package/scss/table/_basket.scss

@@ -0,0 +1,31 @@
+
+table.basket tr {
+  @include table-row;
+  justify-content: space-between;
+  display: flex;  
+  gap: 0.75rem;
+
+  &.promo {
+    padding-bottom: 1rem;
+  }
+
+  &.donation {
+    @include basket-row-grid;
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+  }
+
+  &.total {
+    font-size: $h4-font-size;
+    border-bottom: none;
+    font-weight: 700;
+  }
+
+  &.continue {
+    border-bottom: none;
+
+    td {
+      width: 100%;
+    } 
+  }
+}

package/scss/table/_section.scss

@@ -0,0 +1,12 @@
+
+table.section {
+  padding-bottom: 0.75rem;
+  padding-top: 0.75rem;
+  display: block;
+
+  tr:not(:first-of-type) {
+    @include summary-lg {
+      margin-left: 0.75rem;
+    }
+  }
+}

package/scss/table/index.scss

@@ -1,5 +1,7 @@
 
 @import "tickets.scss";
+@import "basket.scss";
+@import "section.scss";
 
 table {
   border-spacing: 0;
@@ -8,47 +10,4 @@ table {
 
 td {
   padding: 0;
-}
-
-table.basket tr {
-  @include table-row;
-  justify-content: space-between;
-  display: flex;  
-  gap: 0.75rem;
-
-  &.promo {
-    padding-bottom: 1rem;
-  }
-
-  &.donation {
-    @include basket-row-grid;
-    padding-bottom: 1rem;
-    padding-top: 1rem;
-  }
-
-  &.total {
-    font-size: $h4-font-size;
-    border-bottom: none;
-    font-weight: 700;
-  }
-
-  &.continue {
-    border-bottom: none;
-
-    td {
-      width: 100%;
-    } 
-  }
-}
-
-table.section {
-  padding-bottom: 0.75rem;
-  padding-top: 0.75rem;
-  display: block;
-
-  tr:not(:first-of-type) {
-    @include summary-lg {
-      margin-left: 0.75rem;
-    }
-  }
 }

package/components/form_row.vue

@@ -1,91 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <label v-if="label" :for="id">
-      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
-    </label>
-    <div :class="styleContent">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script type="text/javascript">
-  export default {
-    name: 'FormRow',
-    props: {
-      label: {
-        type: String
-      },
-      id: {
-        type: String
-      },
-      required: {
-        type: Boolean
-      },
-      optional: {
-        type: Boolean
-      },
-      submit: {
-        type: Boolean
-      }
-    },
-    computed: {
-      styleContent() {
-        const style = this.$style;
-        let output = [style.content];
-        if (!this.label) { output.push(style.no_label); }
-        if (this.submit) { output.push(style.submit); }
-        return output;
-      }
-    }
-  }
-</script>
-
-<style lang="scss" module>
-
-.container {
-
-  &:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 33fr 67fr;
-    align-items: center;
-    gap: $gap-account;
-    display: grid;
-  }
-
-  label {
-    font-weight: normal;
-
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  input {
-    margin: 0;
-  }
-}
-
-.content {
-
-  &.no_label {
-    @include media-breakpoint-up(sm) {
-      grid-column: 2 / 3;
-    }
-  }
-  
-  &.submit {
-    text-align: right;
-
-    @include media-breakpoint-down(sm) {
-      > button {
-        width: 100%;
-      }
-    }
-  }
-}
-
-</style>

package/components/login_form.vue

@@ -1,54 +0,0 @@
-<template>
-  <b-card no-body>
-    <div v-if="headerSlot" class="card-header">
-      <slot name="header" />
-    </div>
-    <div v-if="defaultSlot" class="card-body">
-      <slot />
-    </div>
-    <div v-if="footerSlot" class="card-footer">
-      <slot name="footer" />
-    </div>
-  </b-card>
-</template>
-
-<script>
-import { BCard } from 'bootstrap-vue'
-export default { 
-  name: 'LoginForm',
-  components: { BCard },
-  computed: {
-    headerSlot() {
-      return this.$slots.header ? true : false;
-    },
-    defaultSlot() {
-      return this.$slots.default ? true : false;
-    },
-    footerSlot() {
-      return this.$slots.footer ? true : false;
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.card {
-  
-  .card-header {
-    padding: 1.5rem 1.75rem 1.25rem;
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-
-    h1 {
-      margin: 0;
-    }
-  }
-
-  .card-body {
-    padding: 1.75rem 1.75rem 1.5rem;
-  }
-}
-
-</style>

package/icons/password/RequestIcon/index.vue

@@ -1,32 +0,0 @@
-<template>
-  <svg
-    class="request-success__svg"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 80"
-    version="1.1"
-    width="100"
-    height="80"
-  >
-    <path
-      class="request-success__arrow"
-      d="M72.6,45.6L87,60L72.6,74.4V63.6H58.2v-7.2h14.4V45.6z"
-    />
-    <path
-      class="request-success__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="request-success__fold"
-      d="M15.2,14.5l32.3,20.2l32.2-20.2"
-      fill="none"
-      stroke-width="6"
-      stroke-miterlimit="10"
-    />
-  </svg>
-</template>
-
-<style src="./request_icon.scss" lang="scss"></style>

package/icons/password/RequestIcon/request_icon.scss

@@ -1,5 +0,0 @@
-.request-success__svg {
-  stroke: $c-grey-night;
-  fill: $c-grey-night;
-  margin-bottom: 0.625rem;
-}

package/icons/password/ResetIcon/reset_icon.scss

@@ -1,4 +0,0 @@
-.reset-success__svg {
-  stroke: $c-grey-night;
-  margin-bottom: 0.625rem;
-}