barbican-reset 1.3.0 → 1.3.1

package/components/container.vue

@@ -64,7 +64,7 @@ export default {
 }
 
 .inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   margin: 0 auto;
 
   &:not(.footer) {
@@ -78,7 +78,7 @@ export default {
   }
   
   &.thin {
-    max-width: $constrained_content_width--thin;  
+    max-width: $layout-width-thin;  
   }
 
   &.masthead {

package/components/display_stream.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.component">
+  <div :class="styleComponent">
     <img :class="$style.image" :src="image">
     <div v-if="expired" :class="$style.title">
       <h4>Expired</h4>
@@ -18,7 +18,19 @@ export default {
     expired: {
       type: Boolean,
       default: false,
+    },
+    hero: {
+      type: Boolean,
+      default: false,
     }
+  },
+  computed: {
+    styleComponent() {
+      const style = this.$style;
+      let output = [style.component];
+      if (this.hero) { output.push(style.hero); }
+      return output;
+    },
   }
 }
 </script>
@@ -26,7 +38,6 @@ export default {
 <style lang="scss" module>
 
 .component {
-  border-radius: $border-radius-lg;
   padding-top: 56.25%;
   position: relative;
   overflow: hidden;
@@ -40,12 +51,16 @@ export default {
   }
 
   .title {
-    background-color: rgba($c-grey-night, 0.8);
+    background-color: rgba($c-grey-midnight, 0.85);
     place-items: center;
     position: absolute;
     display: grid;
     inset: 0;
+  }
+}
 
+.component.hero {
+  .title {
     h4 {
       font-size: $h2-font-size;
     }

package/components/wrap.vue

@@ -14,6 +14,10 @@ export default {
     thin: {
       type: Boolean,
       default: false,
+    },
+    videos: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
@@ -22,6 +26,7 @@ export default {
       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;
     }
   }
@@ -31,16 +36,20 @@ export default {
 <style lang="scss" module>
 
 .container {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   margin-right: auto;
   margin-left: auto;
 
   &.title {
-    @include narrow-width;    
+    max-width: $layout-width-title;    
+  }
+
+  &.videos {
+    max-width: $layout-width-videos;    
   }
 
   &.thin {
-    max-width: $constrained_content_width--thin;
+    max-width: $layout-width-thin;
   }
 }
 

package/helpers/mixins/_buttons.scss

@@ -49,6 +49,10 @@
     background-color: $background;
     color: $color;
   }
+
+  &.hide {
+    visibility: hidden;
+  }
 }
 
 @mixin button-outline(

package/helpers/mixins/_content.scss

@@ -2,13 +2,13 @@
 @mixin content_masthead {
   background-color: white;
   box-shadow: 0 5px 5px rgba(black, 0.1);
-  padding: 0 $constrained_grid_padding;
+  padding: 0 $layout-padding;
   // Required to ensure the box-shadow is visible when div.content-main-content uses a background-color.
   position: relative;
 }
 
 @mixin content_masthead__inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   padding: $space--large * 2 0;
   margin: 0 auto;
 
@@ -23,7 +23,7 @@
 }
 
 @mixin content-main-content__inner {
-  max-width: $constrained_content_width--wide;
+  max-width: $layout-width-wide;
   padding: 1.5rem 0;
   margin: 0 auto;
 

package/helpers/variables/layout/index.scss

@@ -1,7 +1,9 @@
 /// Constrained content
-$constrained_grid_padding: 5%;
-$constrained_content_width--thin: 50rem;
-$constrained_content_width--wide: 75rem;
+$layout-padding: 5%;
+$layout-width-title: 20rem;
+$layout-width-thin: 50rem;
+$layout-width-videos: 60rem;
+$layout-width-wide: 75rem;
 
 $space: 0.625rem;
 // Default large amount of space.

package/index.js

@@ -14,8 +14,6 @@ import RelatedCard from './components/related_card'
 import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
-import Carousel from './components/carousel'
-import NewCarousel from './components/new_carousel'
 import CardDeck from './components/card_deck'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
@@ -27,7 +25,6 @@ import FooterLower from './components/footer_lower'
 import FluidIframe from './components/fluid_iframe'
 import HelpRow from './components/help_row'
 import DisplayStream from './components/display_stream'
-import VideosRow from './components/videos_row'
 
 export { 
   LoadingAnimation, 
@@ -39,8 +36,6 @@ export {
   Container,
   Wrap,
   Card,
-  Carousel,
-  NewCarousel,
   Banner,
   AccountTitle,
   Placeholder,
@@ -58,5 +53,4 @@ export {
   FluidIframe,
   HelpRow,
   DisplayStream,
-  VideosRow
 };

package/package.json

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

@@ -20,6 +20,10 @@ $aligns: "left", "center", "right";
   margin: 0;
 }
 
+.margin-top-05 {
+  margin-top: 0.5rem;
+}
+
 .width-100 {
   width: 100%;
 }

package/scss/card/_related.scss

@@ -3,7 +3,23 @@
   border: 1px solid $c-grey-pearl;
   overflow: hidden;
 
+  img {
+    max-width: 100%;
+  }
+
+  .card-title {
+    font-size: $font-size-lg;
+  }
+}
+
+.card[related][hero=true] {
+
   .card-title {
+    font-size: $h2-font-size;
+  }
+
+  .card-text {
     font-size: $font-size-lg;
   }
+
 }

package/components/carousel.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="slick-carousel__container">
-    <VueSlickCarousel v-bind="settings">
-      <slot />
-    </VueSlickCarousel>
-  </div>
-</template>
-
-<script>
-import VueSlickCarousel from 'vue-slick-carousel'
-import 'vue-slick-carousel/dist/vue-slick-carousel.css'
-import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
-
-export default {
-  components: { VueSlickCarousel },
-  props: {
-    infinite: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      settings: {
-        slidesToScroll: 1,
-        slidesToShow: 4,
-        infinite: this.infinite,
-        arrows: true,
-        speed: 500,
-        responsive: [
-          {
-            breakpoint: 1024,
-            settings: {
-              slidesToShow: 3,
-            },
-          },
-          {
-            breakpoint: 768,
-            settings: {
-              slidesToShow: 2,
-            },
-          },
-        ],
-      },
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-
-.slick {
-  &-carousel {
-    &__container:hover {
-      .slick-arrow {
-        opacity: 1;
-      }
-    }
-  }
-  &-arrow {
-    margin-top: -1.25rem;
-    border-radius: 0;
-    height: 2.5rem;
-    width: 2.5rem;
-    z-index: 2;
-    top: 28%;
-
-    @media only screen and (min-width: 400px) {
-      top: 32%;
-    }
-
-    @include media-breakpoint-up(sm) {
-      top: 38%;
-    }
-
-    &:before {
-      font-size: $h1-font-size;
-      color: $c-page-footer-bg;
-      opacity: 1;
-    }
-  }
-
-  &-slide {
-    .video-item {
-      &__container {
-        padding-right: 0.25rem;
-      }
-    }
-    .video-status__wrap {
-      opacity: 0.8;
-    }
-    &:hover {
-      .video-status__wrap {
-        @include media-breakpoint-up(md) {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &-prev {
-    left: -1.25rem;
-    @include media-breakpoint-up(lg) {
-      left: -3.75rem;
-    }
-  }
-  &-next {
-    right: -1.25rem;
-    @include media-breakpoint-up(lg) {
-      right: -3.75rem;
-    }
-  }
-}
-
-
-</style>

package/components/new_carousel.vue

@@ -1,31 +0,0 @@
-<template>
-  <div :class="$style.component">
-    <slot />
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "NewCarousel",
-};
-</script>
-
-<style lang="scss" module>
-
-.component {
-  column-gap: 0.75rem;
-  display: grid;
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  @include media-breakpoint-up(md) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  @include media-breakpoint-up(lg) {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-</style>

package/components/videos_row.vue

@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <h4 :class="$style.title">{{ title }}</h4>
-    <div :class="$style.slider">
-      <b-button @click="$emit('back')">back</b-button>
-      <new-carousel>
-        <slot />
-      </new-carousel>
-      <b-button @click="$emit('next')">next</b-button>
-    </div>    
-  </div>
-</template>
-
-<script>
-import { NewCarousel, Alert } from '../index'
-export default {
-  name: "VideosRow",
-  components: { NewCarousel, Alert },
-  props: {
-    title: {
-      type: String
-    }
-  }
-}
-</script>
-
-<style lang="scss" module>
-
-.title {
-  border-bottom: 1px solid $c-grey-steel;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1rem;
-}
-
-.slider {
-  align-items: center;
-  display: flex;
-  gap: 1.5rem;
-}
-
-</style>