@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/core/_base-1-mixins.scss

@@ -0,0 +1,327 @@
+// Mixins
+
+// Breakpoint gutters mixin
+@mixin breakpoint-gutters {
+  width: calc(100% - (8 * #{gutter()}) );
+  @include breakpoint($screen-md) {
+    width: calc(100% - (4 * #{gutter()}) );
+  }
+  @include breakpoint($screen-md-max) {
+    max-width: calc(#{$max-width} - (1 * #{gutter()}) );
+  }
+}
+
+/** Button mixin, used by $buttonList in _buttons.scss
+ *
+ * Parameters:
+ * $button[1] = name
+ * $button[2] = background-color
+ * $button[3] = background-color for hover & focus
+ * $button[4] = text color
+ */
+
+@mixin btn-variation($button){
+  // Makes .btn-green etc
+  .btn--#{nth($button, 1)} {
+    // Applies $colour-green etc.
+    background-color: nth($button, 2);
+    color: nth($button, 4);
+    transition-property: background-color;
+    transition-duration: 300ms;
+    &:hover,
+    &:focus {
+      outline: none;
+      // Applies $green-v-dark etc.
+      background-color: nth($button, 3);
+      color: nth($button, 4);
+      transition-property: background-color;
+      transition-duration: 600ms;
+    }
+    &:active {
+      transition-property: background-color;
+      transition-duration: 600ms;
+    }
+  }
+}
+
+/***********************************
+ *  Link colour
+ */
+
+/**
+ * Parameters
+ * $link[1] = name
+ * $link[2] = border-color and text
+ * $link[3] = border-color text for hover & focus
+ */
+
+@mixin link-variation($link) {
+  .link--#{nth($link, 1)} {
+    border-bottom: 4px solid nth($link, 2);
+    &:hover,
+    &:focus,
+    &:active {
+      border-bottom: 4px solid nth($link, 3);
+    }
+  }
+}
+
+/**
+ * Parameters
+ * $color[1] = name
+ * $color[2] = background colour
+ */
+
+@mixin bg-variation($color) {
+  .bg--#{nth($color, 1)} {
+    background-color: nth($color, 2);
+  }
+}
+
+/**
+ * Parameters
+ * $color[1] = name
+ * $color[2] = font colour
+ */
+
+@mixin font-variation($color) {
+  .font--#{nth($color, 1)} {
+    color: nth($color, 2);
+  }
+}
+// Make inline classes stronger
+@mixin font-variation-inline($color) {
+  &.font--#{nth($color, 1)} {
+    color: nth($color, 2);
+  }
+}
+
+/**
+ * Font sizes
+ * $fs-map = font size maps in typography vars
+ */
+
+@mixin font-size($fs-map) {
+  @each $fs-breakpoint, $p-font-size in $fs-map {
+    @if $fs-breakpoint == null {
+      @include make-font-size($p-font-size);
+    }
+    @else {
+      @include breakpoint($fs-breakpoint) {
+        @include make-font-size($p-font-size);
+      }
+    }
+  }
+}
+
+// walks through the $fs-map, adding in line-heights
+@mixin make-font-size($p-font-size) {
+  @if type-of($p-font-size) == "list" {
+    font-size: nth($p-font-size, 1);
+    @if (length($p-font-size) > 1) {
+      line-height: nth($p-font-size, 2);
+    }
+  }
+  @else {
+    font-size: $p-font-size;
+  }
+}
+
+/* Helper function for multi-dimensional arrays */
+@function multimap-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+/* Crops 4:3 or 16:9 images to 1:1, using container width as basis */
+@mixin square-img-ratio($width, $ratio) {
+
+  // Values associated with each 'ratio' key passed in along with the container width
+  $ratio-map: (
+    '16:9' : (height: 0, padding-bottom : $width, offset : -39%, width : 178%),
+    '4:3' : (height: 0, padding-bottom  : $width, offset: -16%, width : 134%),
+    'reset': (height: auto, padding-bottom  : 0, offset: 0, width : 100%)
+  );
+
+  padding-bottom: multimap-get($ratio-map, $ratio, "padding-bottom");
+  height: multimap-get($ratio-map, $ratio, "height");
+  overflow:hidden;
+
+   img {
+    margin-left: multimap-get( $ratio-map, $ratio, "offset");
+    width: multimap-get( $ratio-map, $ratio, "width");
+    height: auto;
+  }
+}
+
+// Visually hidden
+
+@mixin visuallyhidden {
+  position: absolute;
+  margin: -1px;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  border: 0;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  word-wrap: normal;
+}
+
+.visuallyhidden,
+.visually-hidden {
+  @include visuallyhidden;
+}
+
+.hide {
+  display: none;
+}
+
+//no objectfit
+ @mixin no-objectfit {
+  .no-objectfit & {
+    position: absolute;
+    top: -100%;
+    right: -100%;
+    bottom: -100%;
+    left: -100%;
+    overflow: hidden;
+    width: auto;
+    max-width: none;
+    height: 100%!important;
+    max-height: none;
+    margin: auto;
+  }
+}
+/* Not all of these options and additional rules are provided by PostCSS Autoprefix, so am leaving this in */
+@mixin border-radius( $radius: $default-border-radius, $vertical-radius: false ) {
+  @if $vertical-radius {
+     -webkit-border-radius: $radius $vertical-radius;
+    -moz-border-radius: $radius / $vertical-radius;
+    border-radius: $radius / $vertical-radius;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+  } @else {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    border-radius: $radius;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+  }
+}
+
+@mixin clearfix {
+  overflow: hidden;
+}
+
+/* Opacity prefixes not supported by PostCSS */
+@mixin opacity( $arg ) {
+  filter: alpha(opacity=($arg * 100));
+  -moz-opacity: $arg;
+  -khtml-opacity: $arg;
+  -webkit-opacity: $arg;
+  opacity: $arg;
+}
+
+@mixin linear-gradient( $color1, $color2 ) {
+  background-color: $color2;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($color1), to($color2));
+  background-image: -webkit-linear-gradient(left, $color1, $color2);
+  background-image:    -moz-linear-gradient(right, $color2, $color1);
+  background-image:     -ms-linear-gradient(left, $color1, $color2);
+  background-image:      -o-linear-gradient(left, $color1, $color2);
+  background-image:         linear-gradient(to left, $color1, $color2);
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#{$color1}', EndColorStr='#{$color2}');
+}
+
+@mixin nowrap() {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* Additional rules not supplied by PostCSS, so leaving this in */
+@mixin breakword-hyphenated() {
+  -ms-word-break: break-all;
+    word-break: break-all;
+    // Non standard for webkit
+    word-break: break-word;
+
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+
+@mixin retina {
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+    @content;
+  }
+}
+
+
+@mixin optional-at-root($sel) {
+  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+    @content;
+  }
+}
+
+@mixin placeholder($color, $font-size, $body-font, $line-height:"normal", $font-weight:"normal", $font-size--md: $font-size, $line-height--md:"normal") {
+  @include optional-at-root('::placeholder') {
+    color: $color;
+    font-size: $font-size;
+    line-height: $line-height;
+    font-family: $body-font;
+    opacity:  1;
+    overflow: visible;
+    font-weight: $font-weight;
+    
+    @include breakpoint($screen-md) {
+      font-size: $font-size--md;
+      line-height: $line-height--md;
+    }
+  }
+  @include optional-at-root('::-webkit-input-placeholder') {
+    color: $color;
+    font-size: $font-size;
+    line-height: $line-height;
+    font-family: $body-font;
+    opacity:  1;
+    overflow: visible;
+    font-weight: $font-weight;
+    @include breakpoint($screen-md) {
+      font-size: $font-size--md;
+      line-height: $line-height--md;
+    }
+  }
+  
+  @include optional-at-root(':-ms-input-placeholder') {
+    color: $color;
+    font-size: $font-size;
+    line-height: $line-height;
+    font-family: $body-font;
+    opacity:  1;
+    overflow: visible;
+    font-weight: $font-weight;
+    @include breakpoint($screen-md) {
+      font-size: $font-size--md;
+      line-height: $line-height--md;
+    }
+  }
+
+  // safari only hack
+  @media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
+    @include optional-at-root('::-webkit-input-placeholder') {
+      opacity:  0.7;
+    }
+  }
+}

package/src/sass/base/core/_base-breakpoints.scss

@@ -0,0 +1,56 @@
+// Breakpoint mixin? move to mixins
+
+/**
+ * Breakpoints
+ *
+ * For usage, please refer to:
+ * http://wiki.comicrelief.com/wiki/CR_Layout_V2#Breakpoints_and_SASS_Usage
+ * More on the breakpoint mixin usage:
+ * https://github.com/Team-Sass/breakpoint/wiki
+ *
+ * Single query breakpoint:
+ * @include breakpoint(md) { ... }
+ *
+ * Single custom breakpoint:
+ * @include breakpoint(100px) { ... }
+ * 
+ * Min and max query breakpoint:
+ * @include breakpoint(100px, 200px) { ... }
+ *
+ */  
+
+@mixin breakpoint($min: 0, $max: 0) {
+    $type: type-of($min);
+ 
+    @if $type == string {
+   
+        @if $min == md {
+            @media (min-width: $screen-md-min) { @content; }
+            .lt-ie9 & { @content } 
+        }
+   
+        @else if $min == lg {
+            @media (min-width: $screen-lg) { @content; }
+        }
+   
+        @else {
+            @warn "Breakpoint mixin supports: md, lg";
+        }
+    }
+ 
+    @else if $type == number {
+        $query: "all" !default;
+        @if $min != 0 and $max != 0 { 
+            $query: "(min-width: #{$min}) and (max-width: #{$max})"; 
+        }
+        @else if $min != 0 and $max == 0 { 
+            $query: "(min-width: #{$min})"; 
+        }
+        @else if $min == 0 and $max != 0 { 
+            $query: "(max-width: #{$max})"; 
+        }
+        @media #{$query} { 
+            @content;
+        }
+    }
+}

package/src/sass/base/core/_base-common.scss

@@ -0,0 +1,8 @@
+
+// ==========================================================================
+// Common
+// ==========================================================================
+
+.media--blazy {
+  height: 100%;
+}

package/src/sass/base/core/_base-fonts.scss

@@ -0,0 +1,81 @@
+// Import font
+@font-face {
+  font-family: 'GT-Walsheim-Light-Oblique';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light-Oblique.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light-Oblique.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light-Oblique.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light-Oblique.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Light';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Light.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Regular-Oblique';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular-Oblique.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular-Oblique.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular-Oblique.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular-Oblique.eot');/* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Regular';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Regular.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Black-Oblique';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black-Oblique.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black-Oblique.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black-Oblique.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black-Oblique.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Black';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Black.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Bold-Oblique';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold-Oblique.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold-Oblique.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold-Oblique.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold-Oblique.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Bold';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Bold.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Medium-Oblique';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium-Oblique.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium-Oblique.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium-Oblique.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium-Oblique.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}
+@font-face {
+  font-family: 'GT-Walsheim-Medium';
+  src: url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium.woff2') format('woff2'), /* Pretty Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium.woff') format('woff'), /* Modern Browsers */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
+       url('https://d2xeqttht14d9p.cloudfront.net/GT-Walsheim-Medium.eot'); /* IE9 Compat Modes */
+       font-display: fallback;
+}

package/src/sass/base/core/_base-grid.scss

@@ -0,0 +1 @@
+

package/src/sass/base/core/_base-helper.scss

@@ -0,0 +1,4 @@
+
+// ==========================================================================
+// Common
+// ==========================================================================

package/src/sass/base/core/_base-layout.scss

@@ -0,0 +1,4 @@
+
+// ==========================================================================
+// Layout
+// ==========================================================================

package/src/sass/base/core/_base-reset.scss

@@ -0,0 +1,37 @@
+
+// ==========================================================================
+// Reset
+// ==========================================================================
+
+body, div,
+dl, dt, dd,
+ul, ol, li,
+h1, h2, h3, h4, h5, h6,
+pre, form, fieldset, input, textarea, 
+p, blockquote, th, td { margin: 0; padding: 0; }
+table { border-collapse: collapse; border-spacing: 0; }
+fieldset, img { border: 0; }
+caption, th { text-align: left; }
+h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
+q:before,q:after { content: ''; }
+abbr, acronym { border: 0; }
+
+/* apply a natural box layout model to all elements, but allowing components to change */
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+ol, ul {
+	list-style: none;
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+}
+
+picture img,
+legend {
+  width: 100%;
+}

package/src/sass/base/helpers/_js-breakpoint-class-helper.scss

@@ -0,0 +1,10 @@
+/* breakpoint class hidden and shown by CSS so the JS can determine the current breakpoint easily. 
+ * Used by for example the background video component
+*/
+span.md-breakpoint {
+  display: none;
+  visibility: hidden;
+  @include breakpoint($screen-md) {  
+    display: block;
+  }
+}

package/src/sass/base/variables/_colours.scss

@@ -0,0 +1,43 @@
+
+// Colours
+// 
+// Markup: colour.twig
+//
+// Style guide: 10.5
+
+/* 
+ * Colours
+ */
+
+// Colours
+
+// Brand colors
+
+$colour-red: #f04257 !default;
+$colour-blue: #22d2dc !default;
+$colour-yellow: #fbef51 !default;
+$colour-green: #b2e55e !default;
+$colour-teal: #00beca !default;
+$colour-royal-blue: #0565d1 !default;
+$colour-purple: #7d2ca9 !default;
+$colour-dark-purple: #7023b7 !default;
+$colour-pink: #fc9eb9 !default;
+
+$colour-black: #030e1a !default;
+$colour-dark-blue: #061d38 !default;
+$colour-dark-grey: #333 !default;
+$colour-jasper-grey: #666 !default;
+$colour-greyboy-grey: #999 !default;
+$colour-gainsboro-grey: #c7c7c7 !default;
+$colour-light-grey: #dddddd !default;
+$colour-smoke-grey: #f0f0f0 !default;
+$colour-white: #fff !default;
+
+/* Single message row background colour, used in June site, to be renamed and updated */
+$cream-grey: #F5F2ED !default;
+$item-grey: #ddd !default;
+
+/* standard form colors */
+$colour-scorpion-grey:#595959 !default;
+$colour-ribbon-red: #EA0043 !default;
+$colour-persian-purple: #340F78 !default;

package/src/sass/base/variables/_grid.scss

@@ -0,0 +1,51 @@
+/* Susy Grid and breakpoints */
+
+/*
+ * TODO: Extract grid from susy framework instead of importing all
+ */
+@import "~susy/sass/_susy";
+
+/* Small breakpoint */
+$screen-sm: 0px;
+$screen-sm-min: $screen-sm;
+$screen-sm-max: 739px;
+
+/* Medium breakpoint */
+$screen-md: 740px;
+$screen-md-min: $screen-md;
+$screen-md-max: 1023px;
+
+$screen-md-only: $screen-md $screen-md-max;
+
+/* Large breakpoint */
+$screen-lg: 1024px;
+$screen-lg-min: $screen-lg;
+$screen-lg-max: 1439px;
+
+/* Tweaked breakpoints to allow 'mobile' style nav on iPad landscape */
+$desktop-nav-breakpoint: 1150px;
+$desktop-max-nav-breakpoint: max-width 1150px;
+$desktop-nav-breakpoint-min: $desktop-nav-breakpoint;
+
+/* Extra Large breakpoint  */
+$screen-xlg: 1440px;
+$screen-xlg-min: $screen-xlg;
+
+/* Grid values */
+$max-width: 1200px;
+
+$gutter: 30px;
+$column: 70px;
+
+$columns: 12;
+
+/* Changing Susy default global settings */
+$susy: (  
+  columns: $columns,
+  container: $max-width,
+  gutters: $gutter/$column,
+  global-box-sizing: border-box,
+  gutter-position: split,
+  output: float,
+  last-flow: to
+);