barbican-reset 1.3.8 → 1.3.9

package/components/card_display.vue

@@ -1,5 +1,8 @@
 <template>
   <div :class="styleComponent">
+    <div v-if="type === 'live'" :class="$style.icon">
+      <div class="btn btn-secondary">live</div>
+    </div>
     <img :class="$style.image" :src="image">
     <div v-if="expired" :class="$style.title">
       <h4>Expired</h4>
@@ -22,7 +25,11 @@ export default {
     hero: {
       type: Boolean,
       default: false,
-    }
+    },
+    type: {
+      type: String,
+      default: 'live',
+    },
   },
   computed: {
     styleComponent() {
@@ -42,24 +49,35 @@ export default {
   position: relative;
   overflow: hidden;
   color: $white;
+}
 
-  .image {
-    position: absolute;
-    height: auto;
-    width: 100%;
-    inset: 0;
-  }
+.icon {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
 
-  .title {
-    background-color: rgba($c-grey-midnight, 0.85);
-    place-items: center;
-    position: absolute;
-    display: grid;
-    inset: 0;
-  }
+.image {
+  position: absolute;
+  height: auto;
+  width: 100%;
+  inset: 0;
+}
+
+.title {
+  background-color: rgba($c-grey-midnight, 0.85);
+  place-items: center;
+  position: absolute;
+  display: grid;
+  inset: 0;
 }
 
 .component.hero {
+  .icon {
+    right: 1.5rem;
+    top: 1.5rem;
+  }
+  
   .title {
     h4 {
       font-size: $h2-font-size;

package/components/related_row.vue

@@ -17,15 +17,17 @@ export default {
   margin-left: auto;
   max-width: 20rem;
 
+  @include media-breakpoint-down(md) {
+    .card + .card {
+      margin-top: 1.25rem;
+    }
+  }
+
   @include media-breakpoint-up(md) {
     grid-template-columns: repeat(3, 1fr);
     column-gap: 1.25rem;
     max-width: 60rem;
     display: grid;
-
-    .card {
-      margin-bottom: 0;
-    }
   }
 }
 

package/helpers/variables/index.scss

@@ -1,5 +1,5 @@
 // paths more explicit for gulp-sass
 @import "colors/index.scss";
-@import "layout/index.scss";
+@import "layout.scss";
 @import "breakpoints.scss";
 @import "typography.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "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/_card-group.scss

@@ -10,8 +10,8 @@
   }
 
   .card {
-    margin-bottom: 0;
     max-width: 20rem;
+    margin-top: 0;
   }
   
   .card-title {

package/scss/card/_related.scss

@@ -3,6 +3,10 @@
   border: 1px solid $c-grey-pearl;
   overflow: hidden;
 
+  + .card {
+    margin-top: 0;
+  }
+
   img {
     max-width: 100%;
   }

package/scss/card/_video-help.scss

@@ -2,7 +2,6 @@
 $border: 1px solid $c-grey-pearl;
 
 .card[video-help] {
-  margin-bottom: 0;
   overflow: hidden;
   border: $border;
 
@@ -17,6 +16,10 @@ $border: 1px solid $c-grey-pearl;
     border-bottom: 0;
   }
 
+  + .card {
+    margin-top: 0;
+  }
+
   .card-header {
     border-radius: 0;
     border-bottom: 0;