barbican-reset 1.3.1 → 1.3.5

package/components/{display_stream.vue → card_display.vue}

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  name: "DisplayStream",
+  name: "CardDisplay",
   props: {
     image: {
       type: String,

package/components/container.vue

@@ -21,6 +21,10 @@ export default {
       type: Boolean,
       default: false
     },
+    header: {
+      type: Boolean,
+      default: false
+    },
     footer: {
       type: Boolean,
       default: false
@@ -39,6 +43,7 @@ export default {
       let output = [style.inner];
       if (this.masthead) { output.push(style.masthead); }
       if (this.thin) { output.push(style.thin); }
+      if (this.header) { output.push(style.header); }
       if (this.footer) { output.push(style.footer); }
       return output;
     }
@@ -76,6 +81,11 @@ export default {
       padding-top: 2.5rem;
     }
   }
+
+  &.header {
+    padding-bottom: 1.875rem;
+    padding-top: 1.875rem;
+  }
   
   &.thin {
     max-width: $layout-width-thin;  

package/components/{loading_animation.vue → loader.vue}

@@ -13,6 +13,6 @@
 
 <script>
 export default {
-  name: "LoadingAnimation",
+  name: "Loader",
 };
 </script>

package/components/placeholder.vue

@@ -7,8 +7,8 @@ export default {
   name: 'Placeholder',
   props: {
     margin: {
-      type: Number,
-      default: 0
+      type: String,
+      default: "0"
     },
     height: {
       type: Number,
@@ -16,7 +16,7 @@ export default {
     },
     width: {
       type: String,
-      default: 100
+      default: "100"
     },
     right: {
       type: Boolean,

package/helpers/mixins/_buttons.scss

@@ -129,6 +129,13 @@
   @include button-solid($c-power-blue);
 }
 
+@mixin btn-power-login {
+  @include button-solid( 
+    $background: $white,
+    $color: $c-power-blue 
+  );
+}
+
 @mixin btn-info {
   @include button-solid($c-status-neutral);
 }

package/index.js

@@ -5,16 +5,14 @@ import Block from './components/block'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
-import TableRow from './components/table_row'
-import Banner from './components/banner'
 import Alert from './components/alert'
-import LoadingAnimation from './components/loading_animation'
+import Loader from './components/loader'
 import RelatedTitle from './components/related_title'
 import RelatedCard from './components/related_card'
 import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
-import CardDeck from './components/card_deck'
+import CardDisplay from './components/card_display'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
 import FormGroup from './components/form_group'
@@ -24,10 +22,9 @@ 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 DisplayStream from './components/display_stream'
 
 export { 
-  LoadingAnimation, 
+  Loader, 
   Alert,
   RelatedTitle,
   RelatedCard,
@@ -36,21 +33,18 @@ export {
   Container,
   Wrap,
   Card,
-  Banner,
   AccountTitle,
   Placeholder,
   FormSection,
   FormUpdate,
   FormGroup,
   RadioGroup,
-  TableRow,
   Block,
   EventSummary,
-  CardDeck,
   FooterUpper,
   FooterLogos,
   FooterLower,
   FluidIframe,
   HelpRow,
-  DisplayStream,
+  CardDisplay,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.3.1",
+  "version": "1.3.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/scss/_app.scss

@@ -0,0 +1,38 @@
+#app {
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: 100%;
+  display: flex;
+}
+
+#app { 
+  &.powerSplash {
+    background-position: center -15rem;
+    background-color: $c-power-blue;
+    background-repeat: no-repeat;
+  
+    @include media-breakpoint-up(lg) {
+      background-image: url("/img/power/bg.jpg");
+      background-size: 36rem;
+    }
+  
+    @include media-breakpoint-up(xxl) {    
+      background-size: 40rem;
+    }
+  }
+  
+  &.videoSplash,  
+  &.cinemaSplash,
+  &.concertSplash,
+  &.theatreSplash {
+    background-image: url("/img/videos/splash-bg.jpg");
+    background-color: $c-splash-videos;
+    background-position: center -4rem;
+    background-repeat: no-repeat;
+    background-size: 72rem;
+
+    @include media-breakpoint-up(xxl) {
+      background-position: center top;
+    }
+  }
+}

package/scss/_btn.scss

@@ -60,6 +60,10 @@
     @include btn-video-login;
   }
 
+  &.btn-power-login {
+    @include btn-power-login;
+  }
+
   &.btn-invisible {
     @include btn-invisible;
   }

package/scss/_card-group.scss

@@ -0,0 +1,25 @@
+
+.card-deck {
+  justify-content: center;
+  display: grid;
+  gap: 2rem;
+
+  @include media-breakpoint-up(md) {
+    align-items: flex-start;
+    grid-auto-flow: column;
+  }
+
+  .card {
+    margin-bottom: 0;
+    max-width: 20rem;
+  }
+  
+  .card-title {
+    font-size: $h3-font-size;
+  }
+  
+  .card-img {
+    border-radius: $border-radius-lg;
+    margin-top: 1rem;
+  }
+}

package/scss/_footer.scss

@@ -0,0 +1,8 @@
+footer {
+  color: $white;
+
+  &:not(.splash) {
+    background-color: $c-grey-midnight;
+  }
+}
+

package/scss/_header.scss

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

package/scss/_main.scss

@@ -0,0 +1,14 @@
+main {
+  &.videoSplash, &.powerSplash, &.cinemaSplash, &.concertSplash, &.theatreSplash {
+    padding-top: 2rem;
+    color: $white;
+    
+    @include media-breakpoint-up(md) {
+      padding-top: 4rem;
+    }
+    
+    @include media-breakpoint-up(xxl) {
+      padding-top: 10rem;
+    }
+  }
+}

package/scss/card/_related.scss

@@ -10,6 +10,10 @@
   .card-title {
     font-size: $font-size-lg;
   }
+
+  .card-text:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
 }
 
 .card[related][hero=true] {

package/scss/index.scss

@@ -4,6 +4,10 @@
 @import "node_modules/bootstrap/scss/mixins";
 @import "../helpers/index.scss";
 
+@import "app.scss";
+@import "header.scss";
+@import "main.scss";
+@import "footer.scss";
 @import "klaro.scss";
 @import "fonts.scss";
 @import "loading-animation.scss";
@@ -13,6 +17,7 @@
 // bootstrap component styles
 @import "btn.scss";
 @import "card/index.scss";
+@import "card-group.scss";
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 @import "form.scss";
@@ -37,14 +42,10 @@ a, a:hover {
   color: inherit;
 }
 
-p:last-of-type:not([class^=margin]) {
+p {
   margin-bottom: 0;
 }
 
-footer {
-  color: $white;
-
-  &:not(.splash) {
-    background-color: $c-grey-midnight;
-  }
+p + p {
+  margin-top: 1rem;
 }

package/scss/table/_etickets.scss

@@ -0,0 +1,54 @@
+table.etickets {
+
+  $mq: md;
+
+  thead {
+    background-color: $c-grey-alpine;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    display: block;
+
+    @include media-breakpoint-down($mq) {
+      display: none;
+    }
+  }
+
+  tr {
+    border: 1px solid $c-grey-pearl;
+    display: grid;
+
+    @include media-breakpoint-up($mq) {
+      grid-template-columns: 9rem auto 9rem;
+    }
+
+    @include media-breakpoint-down($mq) {
+      border-radius: $border-radius-lg;
+    }
+  }
+
+  th, td {
+    padding: 0.75rem;
+
+    @include media-breakpoint-up($mq) {
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-pearl;
+      }
+  
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+
+  label {
+    font-size: $font-size-lg;
+
+    @include media-breakpoint-up($mq) {
+      display: none;
+    }
+  }
+
+  tbody > div:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+}

package/scss/table/_orders.scss

@@ -47,4 +47,8 @@ table.orders {
       display: none;
     }
   }
+
+  tbody > div:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
 }

package/scss/table/index.scss

@@ -5,6 +5,7 @@
 @import "orders.scss";
 @import "details.scss";
 @import "preferences.scss";
+@import "etickets.scss";
 
 table {
   border-spacing: 0;

package/components/card_deck.vue

@@ -1,41 +0,0 @@
-<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/table_row.vue

@@ -1,94 +0,0 @@
-<template>
-  <div :class="styleRow" :style="`grid-template-columns: ${columns};`">
-    <slot></slot>
-  </div>  
-</template>
-
-<script>
-export default {
-  name: 'TableRow',
-  props: {
-    header: {
-      type: Boolean,
-      default: false
-    },
-    columns: {
-      type: String
-    },
-    mobile: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  computed: {
-    styleRow() {
-      if (this.header) {
-        if (this.mobile) {
-          return this.$style.mobile_header_row;
-        } else {
-          return this.$style.header_row;
-        }
-      } else {
-        if (this.mobile) {
-          return this.$style.mobile_row;
-        } else {
-          return this.$style.row;
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.row {
-  border: 1px solid $input-border-color;
-  grid-auto-flow: column;
-  margin-top: 0.625rem;
-  display: grid;
-
-  > div {
-    padding: 0.5rem 0.75rem;
-
-    &:not(:last-of-type) {
-      border-right: 1px solid $input-border-color;
-    }
-
-    > label {
-      font-size: $font-size-lg;
-      font-weight: 700;
-      display: none;
-    }
-  }
-}
-
-.mobile_row {
-  composes: row;
-
-  @include media-breakpoint-down(md) {
-    border-radius: $border-radius-lg;
-    display: block;
-
-    > div:not(:last-of-type) {
-      border-right: none;
-    }
-  }
-}
-
-.header_row {
-  composes: row;
-  background-color: $c-grey-alpine;
-  font-weight: 700;
-  margin-top: 0;
-}
-
-.mobile_header_row {
-  composes: header_row;
-
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
-}
-
-</style>