barbican-reset 1.3.2 → 1.3.6

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);
 }
@@ -204,6 +211,13 @@
   );
 }
 
+@mixin btn-cta {
+  @include button-solid(
+    $background: $c-grey-night,
+    $display: 'flex');
+  fill: $white;
+}
+
 @mixin btn-invisible {
   &, &:focus {
     background: transparent;

package/icons/back_arrow.vue

@@ -1,5 +1,7 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" fill="black"/></svg>
+  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" />
+  </svg>
 </template>
 
 <script>

package/package.json

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

@@ -5,9 +5,8 @@
   display: flex;
 }
 
-#app.splash {
-  &.powerDashboard, 
-  &.powerStream {
+#app { 
+  &.powerSplash {
     background-position: center -15rem;
     background-color: $c-power-blue;
     background-repeat: no-repeat;
@@ -22,13 +21,10 @@
     }
   }
   
-  &.videos, 
-  &.cinemaDashboard, 
-  &.cinemaStream,
-  &.concertDashboard, 
-  &.concertStream,
-  &.theatreDashboard,
-  &.theatreStream {
+  &.videoSplash,  
+  &.cinemaSplash,
+  &.concertSplash,
+  &.theatreSplash {
     background-image: url("/img/videos/splash-bg.jpg");
     background-color: $c-splash-videos;
     background-position: center -4rem;

package/scss/_btn.scss

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

package/scss/_header.scss

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

package/scss/_main.scss

@@ -1,5 +1,5 @@
 main {
-  &.splash {
+  &.videoSplash, &.powerSplash, &.cinemaSplash, &.concertSplash, &.theatreSplash {
     padding-top: 2rem;
     color: $white;
     

package/scss/index.scss

@@ -42,6 +42,10 @@ a, a:hover {
   color: inherit;
 }
 
-p:last-of-type:not([class^=margin]) {
+p {
   margin-bottom: 0;
+}
+
+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;