@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/sr/2018/components/typography/_fonts.scss

@@ -0,0 +1,23 @@
+//import fonts
+@font-face {font-family: 'Founders-GroteskXCondensed-Bold';
+src: url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.eot');
+src: url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff2') format('woff2'),
+url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskX-CondensedWeb-Bold.woff') format('woff');
+font-display: fallback;
+}
+ 
+  
+@font-face {font-family: 'Founders-Grotesk-Semibold';
+src: url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.eot');
+src: url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff2') format('woff2'),
+url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Semibold.woff') format('woff');
+font-display: fallback;
+}
+ 
+  
+@font-face {font-family: 'Founders-Grotesk-Regular';
+src: url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.eot');
+src: url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff2') format('woff2'),
+url('https://d1r885f187bvv1.cloudfront.net/FoundersGroteskWeb-Regular.woff') format('woff');
+font-display: fallback;
+}

package/src/sass/themes/sr/2018/components/typography/_typography.scss

@@ -0,0 +1,161 @@
+h1 {
+  color: $colour-SR20-deep-violet;
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+
+  &.font--large{
+     @include font-size($h1-large-font-size);
+  }
+}
+
+h1,
+h2,
+h3 {
+  font-family: $font-black--sr18;
+  color: $colour-SR20-deep-violet;
+
+}
+
+h4,
+h5 {
+  color: $colour-SR20-deep-violet;
+  font-family: $font-bold--sr18;
+}
+
+h2 {
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+}
+
+h3,
+h3.alternate {
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+}
+
+h5 {
+  @include font-size($h5-font-size);
+  margin-bottom: 15px;
+}
+
+i.font--family-black {
+  font-family: $font-black--sr18;
+}
+.font--family-black {
+  font-family: $font-black--sr18;
+}
+i.font--family-bold {
+  font-family: $font-bold--sr18;
+}
+.font--family-bold {
+  font-family: $font-bold--sr18;
+}
+i.font--family-regular {
+  font-family: $font-regular--sr18;
+}
+.font--family-regular {
+  font-family: $font-regular--sr18;
+
+}
+strong {
+  font-family: $font-bold--sr18;
+  color: $colour-dark-blue-lighter;
+}
+
+p {
+  color: $colour-SR20-deep-violet;
+  font-family: $font-regular--sr18;
+
+  &.font--xxlarge {
+    margin-bottom: 20px;
+    @include font-size($p-xxlarge-font-size);
+  }
+  &.font--xxsmall {
+    @include font-size($p-xxsmall-font-size);
+  }
+}
+span,
+ul,
+ol {
+  color: $colour-SR20-deep-violet;
+}
+
+// colour classes
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+span,
+strong,
+ul,
+ol,
+li {
+  &.font {
+    &--black {
+      color: $colour-black;
+    }
+    &--dark-blue {
+      color: $colour-dark-blue;
+    }
+    &--dark-blue-lighter {
+      color: $colour-dark-blue-lighter;
+    }
+    &--ruby {
+      color: $colour-ruby;
+    }
+    &--white-smoke {
+      color: $colour-white-smoke;
+    }
+    &--white {
+      color: $colour-white;
+    }
+    &--SR19-white {
+      color: $colour-SR19-white;
+    }
+    &--SR19-black {
+      color: $colour-SR19-black;
+    }
+    &--SR19-light-blue {
+      color: $colour-SR19-light-blue;
+    }
+    &--SR19-dark-blue {
+      color: $colour-SR19-dark-blue;
+    }
+    &--SR19-coral {
+      color: $colour-SR19-coral;
+    }
+    &--SR19-red {
+      color: $colour-SR19-red;
+    }
+    /* SR20 */
+    &--SR20-deep-violet {
+      color: $colour-SR20-deep-violet;
+    }
+    &--SR20-red {
+      color: $colour-SR20-red;
+    } 
+    &--SR20-dark-blue {
+      color: $colour-SR20-dark-blue;
+    }
+    &--SR20-white {
+      color: $colour-SR20-white;
+    }
+    &--SR20-yellow {
+      color: $colour-SR20-yellow;
+    }
+    &--SR20-green {
+      color: $colour-SR20-green;
+    }
+    &--SR20-cyan-blue {
+      color: $colour-SR20-cyan-blue;
+    }
+    &--SR20-light-grey {
+      color: $colour-SR20-light-grey;
+    }
+    &--SR20-purple {
+      color: $colour-SR20-purple;
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/typography/typography.twig

@@ -0,0 +1,127 @@
+<style>
+.breakpoint-lg, .breakpoint-md{display:none}
+.breakpoint-sm{display:inline-block}
+@media (min-width: 740px){
+  .breakpoint-md{display:inline-block}
+  .breakpoint-sm, .breakpoint-lg {display:none}
+}
+@media (min-width: 1024px){
+  .breakpoint-lg {display:inline-block}
+  .breakpoint-sm, .breakpoint-md{display:none}
+}
+</style>
+<p>Sport Relief uses Founders Grotesk. This is used for headings and body copy in a number of weights</p>
+<h3>Fonts</h3>
+<h1 class="font--family-black">Black</h1>
+<p>Founders Grotesk X Condensed Bold <b>.font--family-black</b></p>
+<h1 class="font--family-bold">Bold</h1>
+<p>Founders Grotesk Semibold <b>.font--family-bold</b></p>
+<h1 class="font--family-regular">Regular</h1>
+<p>Founders Grotesk Regular <b>.font--family-regular</b></p>
+<br>
+<br>
+<br>
+<h3>Type Sizes</h3>
+<p>All type sizes and line heights come from a typographic scale, which has a base copy size of 20px.</p>
+<br>
+<br>
+<br>
+<h3>Headings</h3>
+<p>There are a range of heading sizes from H1 to H5, using the typographic scale. According to the typographic scale set the heading change sizes responsively for different media devices.</p>
+<h1 class="font--large">Header 1 Large</h1>
+<p>
+  <span><b>.font--large</b> (Used for headers on landing pages)<br/></span>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 167px / line-height: 125px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 132px / line-height: 99px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 65px / line-height: 49px</span>
+</p>
+<h1>Header 1</h1>
+<p>
+  <span>(Used in secondary page headers) <br/><span>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 117px / line-height: 88px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 92px / line-height: 69px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 58px / line-height: 43px</span>
+</p>
+
+<h2>Header 2</h2>
+<p>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 40px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 32px / line-height: 35px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 28px / line-height: 31px</span>
+</p>
+<h3 class="alternate">Header 3</h3>
+<p>
+  <span><b>.alternate</b><br/></span>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 40px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 32px / line-height: 35px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 28px / line-height: 31px</span>
+</p>
+<h3>Header 3</h3>
+<p>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 28px / line-height: 31px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 25px / line-height: 28px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 25px</span>
+</p>
+<h4>Header 4</h4>
+<p>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 25px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 22px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 20px</span>
+</p>
+<h5>Header 5</h5>
+<p>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 20px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 17px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 17px</span>
+</p>
+<br/>
+<br/>
+
+<h3>Paragraphs</h3>
+<p class="font--xxlarge">font--xxlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 47px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 36px / line-height: 47px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 32px / line-height: 42px</span>
+</p>
+<p class="font--xlarge">font--xlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 28px / line-height: 37px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 28px / line-height: 37px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 33px</span>
+</p>
+<p class="font--large">font--large: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 29px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 23px / line-height: 29px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 29px</span>
+</p>
+<p>Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 26px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 26px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 26px</span>
+</p>
+<p class="font--small">font--small: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 23px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 23px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 23px</span>
+</p>
+<p class="font--xsmall">font--xsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 16px / line-height: 21px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 21px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 21px</span>
+</p>
+<p class="font--xxsmall">font--xxsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p>
+  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 14px / line-height: 18px</span>
+  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 14px / line-height: 18px</span>
+  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 14px / line-height: 18px</span>
+</p>
+<br>
+<br>
+
+
+<p class="font--black">Black font <b>.font--black</b> There are a range of paragraph sizes, using the typographic scale.</p>
+<p class="font--dark-blue">Dark blue font <b>.font--dark-blue</b> There are a range of paragraph sizes, using the typographic scale.</p>
+<p class="font--dark-blue-lighter">Dark blue lighter font <b>.font--dark-blue-lighter</b> There are a range of paragraph sizes, using the typographic scale.</p>
+<p class="font--ruby">Ruby font <b>.font--ruby</b> There are a range of paragraph sizes, using the typographic scale.</p>
+<p class="font--white-smoke bg--black" style="padding: 5px;">White smoke font <b>.font--white-smoke</b> There are a range of paragraph sizes, using the typographic scale.</p>
+<p class="font--white bg--black" style="padding: 5px;">White font <b>.font--white</b> There are a range of paragraph sizes, using the typographic scale.</p>

package/src/sass/themes/sr/2018/main-nav.twig

@@ -0,0 +1,86 @@
+<div class="main-nav__wrapper">
+  <!-- Main navigation menu -->
+  <nav role="navigation" class="navigation menu--main sticky-nav">
+    <div class="main-nav__icons main-nav__burger">
+      <a role="button" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" aria-expanded="false" aria-haspopup="true">
+        <div class="c-hamburger__text">
+          <span class="visually-hidden">Open and close navigation menu</span>
+        </div>
+        <span></span>
+      </a>
+    </div>
+
+    <h2 class="visually-hidden" id="main-nav__title">Main navigation menu </h2>
+    <!-- Mobile: navigation toggle button -->
+    <ul id="main-menu" class="main-nav__items sm menu--level-0 ">
+
+            <li class="menu-item menu-item--expanded menu-item--active-trail">
+        <a href="/link">Schools</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/" class="is-active">sub-item 1 (active)</a>
+          </li>
+          <li class="menu-item">
+            <a href="/">sub-item 2, split over multiple lines</a>
+          </li>
+        </ul>
+      </li>
+
+      <li class="menu-item menu-item--expanded">
+        <a href="/" class="is-active">Get involved</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/">sub-item 1</a>
+          </li>
+          <li class="menu-item">
+            <a href="/">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+
+
+
+
+      <li class="menu-item menu-item--expanded menu-item--active-trail">
+        <a href="/link">What is Sport Relief?</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/" class="is-active">sub-item 1 (active)</a>
+          </li>
+          <li class="menu-item">
+            <a href="/">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+
+      <li class="menu-item menu-item--expanded menu-item--active-trail">
+        <a href="/link">Donate</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/" class="is-active">sub-item 1 (active)</a>
+          </li>
+          <li class="menu-item">
+            <a href="/">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+
+    </ul>
+  </nav>
+</div>

package/src/sass/themes/sr/2018/sr18.scss

@@ -0,0 +1,135 @@
+// ==========================================================================
+// Core variables * comment files you want to override
+// ==========================================================================
+
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_theme.scss";
+@import "../../../base/variables/_typography.scss";
+
+// ==========================================================================
+// SR variables
+// ==========================================================================
+
+@import "variables/_colours.scss";
+@import "variables/_typography.scss";
+@import "variables/_mixins.scss";
+@import "variables/_main-nav.scss";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+@import "../../../base/_core";
+
+// ==========================================================================
+// Base helpers
+// ==========================================================================
+
+@import "../../../base/helpers/_js-breakpoint-class-helper.scss";
+
+// ==========================================================================
+// UI components
+// ==========================================================================
+
+// Import all components
+// @import "../../../base/_components";
+
+// choose components one by one
+@import "../../../base/components/animations/animations";
+// @import "../../../base/components/background-colours/background-colours";
+@import "../../../base/components/background-single-msg/background-single-msg";
+@import "../../../base/components/banners/card-banner";
+// @import "../../../base/components/buttons/buttons";
+@import "../../../base/components/card-block/card";
+@import "../../../base/components/cards/cards";
+@import "../../../base/components/content-block/content-block";
+@import "../../../base/components/content-wall/content-wall";
+@import "../../../base/components/cookie-consent/cookie-consent";
+@import "../../../base/components/custom-block/custom-block";
+@import "../../../base/components/demo/demo";
+@import "../../../base/components/email-signup/email-signup-head";
+@import "../../../base/components/email-signup/email-signup";
+@import "../../../base/components/external-link/external-link";
+@import "../../../base/components/feature-articles-block/feature-articles-block";
+@import "../../../base/components/footer/footer";
+@import "../../../base/components/form/form";
+@import "../../../base/components/grid/grid";
+@import "../../../base/components/header/base-header";
+@import "../../../base/components/iframe-block/iframe-block";
+@import "../../../base/components/lightcase/lightcase";
+// @import "../../../base/components/links/links";
+@import "../../../base/components/list/list";
+@import "../../../base/components/media-block/media-block";
+@import "../../../base/components/media/media";
+@import "../../../base/components/meta-icons/meta-icons";
+@import "../../../base/components/navigation/feature-nav";
+@import "../../../base/components/navigation/footer-nav";
+@import "../../../base/components/navigation/hamburger-menu-button";
+@import "../../../base/components/navigation/main-nav";
+@import "../../../base/components/news-article/news-article";
+@import "../../../base/components/news-article/press-release-article";
+@import "../../../base/components/news-overview/news";
+@import "../../../base/components/news-teaser/news-article-teaser";
+@import "../../../base/components/news-teaser/news-teaser";
+@import "../../../base/components/pagination/pagination";
+@import "../../../base/components/paragraph--cr-single-message-row/paragraph--cr-single-message-row";
+@import "../../../base/components/partners-row/partners-row";
+@import "../../../base/components/partners-grid/partners-grid";
+@import "../../../base/components/partners/partners";
+@import "../../../base/components/progress-bar/progress-bar";
+@import "../../../base/components/promo-header/promo-header";
+@import "../../../base/components/quote-block/content-wall-quote";
+@import "../../../base/components/related-articles/related-articles";
+@import "../../../base/components/search-results/search-result";
+@import "../../../base/components/search/search-block";
+@import "../../../base/components/selectbox/selectbox";
+@import "../../../base/components/single-msg/single-msg";
+@import "../../../base/components/social/social";
+@import "../../../base/components/story/story";
+@import "../../../base/components/table/table";
+@import "../../../base/components/teaser-block/teaser-block";
+@import "../../../base/components/tooltips/tooltips";
+@import "../../../base/components/typography/typography";
+@import "../../../base/components/views/views";
+@import "../../../base/components/just-in-time-block/_just-in-time";
+
+// ==========================================================================
+// SR UI components
+// ==========================================================================
+
+@import "components/typography/_fonts.scss";
+@import "components/typography/_typography.scss";
+@import "components/background-colours/_background-colours.scss";
+@import "components/buttons/_buttons.scss";
+@import "components/links/_links.scss";
+@import "components/lists/_lists.scss";
+@import "components/teaser-block/_teaser-block.scss";
+@import "components/navigation/_main-nav.scss";
+@import "components/single-msg/_single-msg.scss";
+@import "components/promo-header/_promo-header.scss";
+@import "components/loading/_loading.scss";
+@import "components/news-teaser/_news-teaser.scss";
+@import "components/email-signup/_email-signup.scss";
+@import "components/email-signup/_email-signup-head.scss";
+@import "components/search/_search-block.scss";
+@import "components/search-results/_search-results.scss";
+@import "components/background-single-msg/_background-single-msg.scss";
+@import "components/tooltips/_tooltips.scss";
+@import "components/news-article/news-article";
+@import "components/app-link-block/_app-link-block.scss";
+@import "components/footer-app-links-block/_footer-app-links-block.scss";
+@import "components/live-total-block/_live-total-block.scss";
+@import "components/just-in-time-block/_just-in-time-block";
+@import "components/full-height-single-image/_full-height-single-image";
+@import "components/full-height-single-image-single-copy/_full-height-single-image-single-copy";
+@import "components/full-height-double-image-single-copy/_full-height-double-image-single-copy";
+@import "components/full-height-single-image-triple-copy/_full-height-single-image-triple-copy";
+@import "components/copy-copy/_copy-copy";
+@import "components/copy-video/_copy-video";
+@import "components/bg-video-copy/_bg-video-copy";
+@import "components/fixed-ratio-image/_fixed-ratio-image";
+@import "components/membership-signup/_membership-signup";
+@import "components/bg-graphics/_bg-graphics";
+@import "_sr18-styleguide.scss";

package/src/sass/themes/sr/2018/variables/_colours.scss

@@ -0,0 +1,36 @@
+
+$colour-black: #030e1a;
+$colour-dark-blue: #061d38;
+$colour-dark-blue-lighter: #223c59;
+$colour-ruby: #e7135d;
+$colour-white-smoke: #fbf5f5;
+$colour-white: #ffffff;
+$colour-purple: #ab12e3;
+$colour-green: #008000;
+$colour-grey: #bfbfbf;
+
+// SR19 colours
+$colour-SR19-white: #ffffff;
+$colour-SR19-black: #030e1a;
+$colour-SR19-light-blue:#86E4E9;
+$colour-SR19-dark-blue: #3A4972;
+$colour-SR19-coral: #FF6F61;
+$colour-SR19-red: #E52630;
+
+/* SR20 colours */
+
+// Primy
+$colour-SR20-deep-violet: #2c0230;
+$colour-SR20-red: #e52530;
+$colour-SR20-dark-blue:#3a4972;
+$colour-SR20-light-blue:#274084;
+$colour-SR20-white: #ffffff;
+
+//Secondy
+$colour-SR20-yellow: #FFE400;
+$colour-SR20-green: #4ecd57;
+$colour-SR20-cyan-blue: #22CFD8;
+$colour-SR20-light-grey: #f4f2f4;
+
+//Schoolsy
+$colour-SR20-purple: #7F58A5;

package/src/sass/themes/sr/2018/variables/_main-nav.scss

@@ -0,0 +1,3 @@
+$sm-nav-height: 50px;
+$md-nav-height: 70px;
+$lg-nav-height: 80px;

package/src/sass/themes/sr/2018/variables/_mixins.scss

@@ -0,0 +1,82 @@
+// Buttons
+@mixin sr_button_types($colour, $bg-colour) {
+  color: $colour;
+  background-color: $bg-colour;
+
+  // To animate the hover-state position
+  transition: 0.3s;
+
+  &:hover,
+  &:focus {
+    transform: translateY(-3px);
+  }
+
+  &-ghost {
+    padding: 20px 29px;
+    border: 1px solid $bg-colour;
+    color: $bg-colour;
+    background-color: transparent;
+    background-clip: initial;
+    box-shadow:inset 0px 0px 0px 1px $bg-colour;
+
+    &:hover,
+    &:focus  {
+      box-shadow:inset 0px 0px 0px 3px $bg-colour;
+      transform: translateY(-3px);
+    }
+  }
+}
+
+
+@mixin gradient-background($colour1, $colour2) {
+  background-color: transparent;
+  background-image: linear-gradient(90deg, $colour1 0%, $colour2 100%);
+}
+
+// Links
+@mixin link_colour($colour) {
+  border-bottom: 1px solid $colour;
+  color: $colour;
+}
+
+//SR19 button style
+@mixin sr19_button_types($colour, $bg-colour, $hover-colour, $hover-bg-colour) {
+  transition: none;
+  letter-spacing: normal;
+  font-weight: 900;
+  color: $colour;
+  background-color: $bg-colour;
+
+  &:hover,
+  &:focus {
+    color: $hover-colour;
+    background-color: $hover-bg-colour;
+  }
+
+  &-ghost {
+    font-weight: 900;
+    padding: 20px 29px;
+    border: 1px solid $bg-colour;
+    color: $bg-colour;
+    background-color: transparent;
+    background-clip: initial;
+    box-shadow:inset 0px 0px 0px 1px $bg-colour;
+
+    &:hover,
+    &:focus  {
+      box-shadow:inset 0px 0px 0px 3px $bg-colour;
+    }
+  }
+}
+
+@mixin sr20_button_types($colour, $bg-colour) {
+  color: $colour;
+  background-color: $bg-colour;
+  background-color: rgba($bg-colour, 0.8);
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: rgba($bg-colour, 1.0);
+  }
+}