@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/cr/2017/components/buttons/buttons.twig

@@ -0,0 +1,39 @@
+<h3>Primary buttons</h3>
+<p>Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button <b>.btn .btn--dark-purple</b> class</p>
+<a class="btn btn--dark-purple" href="#">Link with button class</a>
+<button class="btn btn--dark-purple">Native button</button>
+<br>
+<h3 style="margin-top: 30px;">Secondary / Ghost button</h3>
+<p>Used for less important call-to-actions, particularly when primary buttons are feature on the same component/page, or simply as an alternative styling, where applicable. These buttons appear as ghost (hollow) buttons with 4px solid border and text colour matching the colour of the border. This default styling can be applied by using the <b>.btn--white-ghost</b> class. See Variations for more button syling options.</p>
+<a class="btn btn--white-ghost" href="#">Link</a>
+<button class="btn btn--white-ghost">Button</button>
+<br>
+<h3 style="margin-top: 30px;">Variations / Modifiers</h3>
+<p>Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button <b>.btn .btn--red etc</b> class</p>
+
+<a class="btn btn--red" href="#">Link</a>
+<button class="btn btn--red">Button</button>
+<a class="btn btn--red-ghost" href="#">Ghost Button</a>
+<p style="margin-top: 10px;">Red variation <i>.btn--red</i> <i>.btn--red-ghost</i></p>
+
+<a class="btn btn--purple" href="#">Link</a>
+<button class="btn btn--purple">Button</button>
+<a class="btn btn--purple-ghost" href="#">Ghost Button</a>
+<p style="margin-top: 10px;">Purple variation <i>.btn--purple</i> <i>.btn--purple-ghost</i></p>
+
+<a class="btn btn--royal-blue" href="#">Link</a>
+<button class="btn btn--royal-blue">Button</button>
+<a class="btn btn--royal-blue-ghost" href="#">Ghost Button</a>
+<p style="margin-top: 10px;">Royal-blue variation <i>.btn--royal-blue</i> <i>.btn--royal-blue-ghost</i></p>
+<div class="bg--black" style="padding: 20px; margin-bottom: 20px;">
+	<a class="btn btn--mint-green" href="#">Link</a>
+	<button class="btn btn--mint-green">Button</button>
+	<a class="btn btn--mint-green-ghost" href="#">Ghost Button</a>
+	<p style="margin-top: 10px;">Mint-green variation <i>.btn--mint-green</i> <i>.btn--mint-green-ghost</i></p>
+</div>
+<div class="bg--black" style="padding: 20px;">
+	<a class="btn btn--white" href="#">Link</a>
+	<button class="btn btn--white">Button</button>
+	<a class="btn btn--white-ghost" href="#">Ghost Button</a>
+	<p style="margin-top: 10px;">White variation <i>.btn--white</i> <i>.btn--white-ghost</i></p>
+</div>

package/src/sass/themes/cr/2017/components/content-block/_content-block.scss

@@ -0,0 +1,5 @@
+
+
+.content-block__content {
+  background-image: linear-gradient(rgba(0,0,0,0), $colour-dark-purple);
+}

package/src/sass/themes/cr/2017/components/content-block/content-block.twig

@@ -0,0 +1,20 @@
+<div class="cw-region">
+  <article class="contextual-region block-content block-content--type-content-reference-block {{ modifier_class }} content-block clearfix">
+    <div class="content-block__image">
+      <div class="media media--blazy  media--responsive media--image">
+        <picture>
+          <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
+        </picture>
+      </div>
+    </div>
+    <div class="content-block__content-wrapper">
+      <div class="content-block__content">
+        <span class="content-block__tag font--mint-green font--family-black">News</span>
+        <h4>
+          Red Nose Day is coming soon to BBC One
+        </h4>
+      </div>
+    </div>
+    <a href="#" class="content-block__link" hreflang="en">Read more</a>
+  </article>
+</div>

package/src/sass/themes/cr/2017/components/content-wall/content-wall.twig

@@ -0,0 +1,213 @@
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-l teaser-block teaser-block--bg-image clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="contextual-region block-content block-content--type-content-reference-block block-content--view-mode-cw-m content-block clearfix">
+            <div class="content-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="content-block__content-wrapper">
+              <div class="content-block__content">
+                <span class="content-block__tag font--mint-green font--font-black">News</span>
+                <h4>
+                  Red Nose Day is coming soon to BBC One
+                </h4>
+              </div>
+            </div>
+            <a href="#" class="content-block__link" hreflang="en">Read more</a>
+          </article>
+        </li>
+        <li>
+          <article class="block-content--view-mode-cw-m teaser-block clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title visuallyhidden">
+    Row's title visually hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-s cw-quote clearfix">
+            <div class="cw-quote__outer-wrapper">
+              <div class="cw-quote__bg-image">
+                <img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
+              </div>
+              <div class="cw-quote__inner-wrapper">
+                <div class="cw-quote__image bg--purple">
+                  <img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
+                </div>
+                <div class="cw-quote__body">
+                  <h3 class="font--yellow">Jo's Top Tip</h3>
+                  <h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
+                </div>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-mp media-block clearfix">
+            <div class="media-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="media-block__content-wrapper">
+              <div class="media-block__content">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+                  <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+                    s20-9,20-20S31,0,20,0L20,0z"></path>
+                  <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+                </svg>
+                <div class="cr-body">
+                  <h4>Relive all the best bits of last Red Nose Day</h4>
+                  <p class="font--mint-green"><strong>20:20</strong></p>
+                </div>
+              </div>
+            </div>
+            <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+            <div class="media-block__caption">
+              <div class="cr-body">
+                <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+                <p><a class="btn btn--red" href="#">See how to join in</a></p>
+              </div>
+            </div>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="view-mode-default content-wall paragraph">
+  <h2 class="content-wall__title">
+    Row's title can be hidden
+  </h2>
+  <div class="clearfix cw-region">
+    <div class="item-list">
+      <ul>
+        <li>
+          <article class="block-content--view-mode-cw-s teaser-block clearfix">
+            <a class="teaser-block__link" href="#">
+              <div class="teaser-block__image">
+                <img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
+              </div>
+              <div class="teaser-block__body bg--white">
+                <div class="cr-body">
+                  <h4>Get ideas, tips and tools to help you fundraise</h4>
+                  <div class="teaser-block__cta">
+                    <span class="btn btn--red">Pre-order a Kit</span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </article>
+        </li>
+        <li>
+          <article class="contextual-region block-content block-content--type-media-reference block-content--view-mode-cw-s media-block clearfix">
+            <div class="media-block__image">
+              <div class="media media--blazy  media--responsive media--image">
+                <picture>
+                  <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+                </picture>
+              </div>
+            </div>
+            <div class="media-block__content-wrapper">
+              <div class="media-block__content">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+                  <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+                    s20-9,20-20S31,0,20,0L20,0z"></path>
+                  <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+                </svg>
+                <div class="cr-body">
+                  <h4>Relive all the best bits of last Red Nose Day</h4>
+                  <p class="font--mint-green"><strong>20:20</strong></p>
+                </div>
+              </div>
+            </div>
+            <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+            <div class="media-block__caption">
+              <div class="cr-body">
+                <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+                <p><a class="btn btn--red" href="#">See how to join in</a></p>
+              </div>
+            </div>
+          </article>
+        </li>
+        <li>
+          <article class="block-content--view-mode-cw-s cw-quote clearfix">
+            <div class="cw-quote__outer-wrapper">
+              <div class="cw-quote__bg-image">
+                <img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
+              </div>
+              <div class="cw-quote__inner-wrapper">
+                <div class="cw-quote__image bg--purple">
+                  <img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
+                </div>
+                <div class="cw-quote__body">
+                  <h3 class="font--yellow">Jo's Top Tip</h3>
+                  <h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
+                </div>
+              </div>
+            </div>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>

package/src/sass/themes/cr/2017/components/cookie-consent/_cookie-consent.scss

@@ -0,0 +1,18 @@
+
+
+.cookie-consent.cc_container {
+  .cc_more_info {
+    font-size: 14px;
+    line-height: 16px;
+    @include breakpoint($screen-md) {
+      font-size: 18px;
+      line-height: 20px;
+    }
+  }
+  
+  @include breakpoint($screen-lg) {
+    .btn {
+      padding: 13px 20px;
+    }
+  }
+}

package/src/sass/themes/cr/2017/components/cookie-consent/cookie-consent.json

@@ -0,0 +1,7 @@
+{
+	"message": "We use cookies. By continuing to use this site you are agreeing to our terms of use. ",
+	"target":"_blank",
+	"link":"https://www.rednoseday.com/legal#terms",
+	"learn_more": "Learn more",
+	"dismiss": "Close"
+}

package/src/sass/themes/cr/2017/components/cookie-consent/cookie-consent.twig

@@ -0,0 +1,4 @@
+<div class="cookie-consent cc_banner cc_container cc_container--open">
+    <p class="cc_message">{{ message }}<a data-cc-if="options.link" target="{{ target }}" class="cc_more_info link link--grey inline" href="{{ link }}">{{ learn_more }}</a></p>
+    <a href="#null" data-cc-event="click:dismiss" target="_blank" class="btn btn--white-ghost">{{ dismiss }}</a>
+</div>

package/src/sass/themes/cr/2017/components/email-signup/_email-signup-head.scss

@@ -0,0 +1,5 @@
+
+.block--cr-email-signup--head.cr-header-email-signup-form input.button[type=submit] {
+  @extend .btn--red;
+  margin: 0 0 40px 0 !important;
+}

package/src/sass/themes/cr/2017/components/highlight/_highlight.scss

@@ -0,0 +1,35 @@
+
+.highlight {
+  padding: 7px 4px 1px;
+  letter-spacing: 0.9px;
+  text-transform: uppercase;
+  border: 4px solid $colour-black;
+  font-weight: bold;
+
+  // Target Highlights wrapped in *or* containing strong tags
+  strong &,
+  strong {
+    padding: 3px 6px 2px;
+  }
+}
+
+.highlight--purple {
+  color: $colour-purple;
+  border: 4px solid $colour-purple;
+}
+.highlight--royal-blue {
+  color: $colour-royal-blue;
+  border: 4px solid $colour-royal-blue;
+}
+.highlight--red {
+  color: $colour-red;
+  border: 4px solid $colour-red;
+}
+.highlight--mint-green {
+  color: $colour-mint-green;
+  border: 4px solid $colour-mint-green;
+}
+.highlight--white {
+  color: $colour-white;
+  border: 4px solid $colour-white;
+}

package/src/sass/themes/cr/2017/components/highlight/highlight.twig

@@ -0,0 +1 @@
+<p><span class="highlight {{modifier_class}}">Highlight class</span> - Adds border around text (used for the years on Timeline page).</p>

package/src/sass/themes/cr/2017/components/just-in-time-block/_just-in-time-block.scss

@@ -0,0 +1,6 @@
+.form__row--just-in-time-block {
+  font-family:$font-bold;
+  .toggle-link {
+    font-family:$font-bold;
+  }
+}

package/src/sass/themes/cr/2017/components/links/_links.scss

@@ -0,0 +1,43 @@
+.link {
+  &.link--dark-purple{
+    @include link($colour-black, $colour-red);
+  }
+  &.link--purple {
+    @include link($colour-purple, $colour-dark-purple);
+  }
+  &.link--royal-blue {
+    @include link($colour-royal-blue, $colour-dark-purple);
+  }
+  &.link--red {
+    @include link($colour-red, $colour-dark-purple);
+  }
+  &.link--mint-green {
+    @include link($colour-mint-green, $colour-white);
+  }
+  &.link--white {
+    @include link($colour-white, $colour-mint-green);
+  }
+  &.link--grey {
+    @include link($colour-grey, $colour-mint-green);
+  }
+  &.link--light-grey {
+    @include link($colour-light-grey, $colour-mint-green);
+  }
+  &.link--black{
+    @include link($colour-black, $colour-royal-blue);
+    border-color: $colour-red;
+    &:hover {
+        color: $colour-black;
+    }
+  }
+}
+// Default link for Article and Page types
+.cr-article__body .link,
+.basic-page--content .link {
+  @include link($colour-black, $colour-red);
+  line-height: 14px;
+  border-bottom: 4px solid rgba($colour-black, 0.5);
+  &:hover {
+    border-bottom: 4px solid rgba($colour-red, 0.5);
+  }
+}

package/src/sass/themes/cr/2017/components/links/links.twig

@@ -0,0 +1,26 @@
+<p>
+	<a class="link link--dark-purple" href="#">Dark purple link</a> <i>.link-dark-purple</i> Look over here, son
+</p>
+<p>
+	<a class="link link--red" href="#">Red link</a> <i>.link-red</i> Look over here, son
+</p>
+<p>
+	<a class="link link--royal-blue" href="#">Royal Blue link</a> <i>.link-royal-blue</i> Look over here, son
+</p>
+<p>
+	<a class="link link--purple" href="#">Purple link</a> <i>.link--purple</i> Look over here, son
+</p>
+<p>
+	<a class="link link--black" href="#">Black link</a> <i>.link--black</i> Look over here, son
+</p>
+<p class="font--white bg--black" style="padding: 5px;">
+	<a class="link link--mint-green" href="#">Mint Green</a> <i>.link-mint-green</i> Look over here, son
+</p>
+<p class="font--white bg--black" style="padding: 5px;">
+	<a class="link link--white" href="#">White link</a> <i>.link--white</i> Look over here, son
+</p>
+<p class="font--white bg--black" style="padding: 5px;">
+	<a class="link link--grey" href="#">Grey link</a> <i>.link--grey</i> Look over here, son
+</p>
+<h3 style="margin-top: 30px;">Inline Link</h3>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue <a href="#" class="link link--dark-purple inline">inline link</a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue</p>

package/src/sass/themes/cr/2017/components/loading/_loading.scss

@@ -0,0 +1,101 @@
+// CR loading icon
+
+/* The lazyloaded element: IMG, IFRAME, DIV. */
+.b-lazy,
+.b-responsive {
+  display: block;
+  opacity: 0;
+  -webkit-transition: opacity 500ms ease-in-out;
+  transition: opacity 500ms ease-in-out;
+}
+
+/* Needed to display preloader with CSS BG image, otherwise hidden. */
+.b-loaded,
+.media--loading.media--background {
+  opacity: 1;
+}
+
+.media--loading {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  position: relative;
+}
+
+.media--background {
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+.media--loading {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  position: relative;
+}
+.media--loading {
+  margin: 100px auto;
+  font-size: 6px;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  -webkit-animation: load5 1.1s infinite ease;
+  animation: load5 1.1s infinite ease;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+@-webkit-keyframes load5 {
+  0%,
+  100% {
+    box-shadow: 0em -2.6em 0em 0em #cbcbcb, 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.5), -1.8em -1.8em 0 0em rgba(203,203,203, 0.7);
+  }
+  12.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.7), 1.8em -1.8em 0 0em #cbcbcb, 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.5);
+  }
+  25% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.5), 1.8em -1.8em 0 0em rgba(203,203,203, 0.7), 2.5em 0em 0 0em #cbcbcb, 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  37.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.5), 2.5em 0em 0 0em rgba(203,203,203, 0.7), 1.75em 1.75em 0 0em #cbcbcb, 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  50% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.5), 1.75em 1.75em 0 0em rgba(203,203,203, 0.7), 0em 2.5em 0 0em #cbcbcb, -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  62.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.5), 0em 2.5em 0 0em rgba(203,203,203, 0.7), -1.8em 1.8em 0 0em #cbcbcb, -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  75% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.5), -1.8em 1.8em 0 0em rgba(203,203,203, 0.7), -2.6em 0em 0 0em #cbcbcb, -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  87.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.5), -2.6em 0em 0 0em rgba(203,203,203, 0.7), -1.8em -1.8em 0 0em #cbcbcb;
+  }
+}
+@keyframes load5 {
+  0%,
+  100% {
+    box-shadow: 0em -2.6em 0em 0em #cbcbcb, 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.5), -1.8em -1.8em 0 0em rgba(203,203,203, 0.7);
+  }
+  12.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.7), 1.8em -1.8em 0 0em #cbcbcb, 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.5);
+  }
+  25% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.5), 1.8em -1.8em 0 0em rgba(203,203,203, 0.7), 2.5em 0em 0 0em #cbcbcb, 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  37.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.5), 2.5em 0em 0 0em rgba(203,203,203, 0.7), 1.75em 1.75em 0 0em #cbcbcb, 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  50% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.5), 1.75em 1.75em 0 0em rgba(203,203,203, 0.7), 0em 2.5em 0 0em #cbcbcb, -1.8em 1.8em 0 0em rgba(203,203,203, 0.2), -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  62.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.5), 0em 2.5em 0 0em rgba(203,203,203, 0.7), -1.8em 1.8em 0 0em #cbcbcb, -2.6em 0em 0 0em rgba(203,203,203, 0.2), -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  75% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.5), -1.8em 1.8em 0 0em rgba(203,203,203, 0.7), -2.6em 0em 0 0em #cbcbcb, -1.8em -1.8em 0 0em rgba(203,203,203, 0.2);
+  }
+  87.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(203,203,203, 0.2), 1.8em -1.8em 0 0em rgba(203,203,203, 0.2), 2.5em 0em 0 0em rgba(203,203,203, 0.2), 1.75em 1.75em 0 0em rgba(203,203,203, 0.2), 0em 2.5em 0 0em rgba(203,203,203, 0.2), -1.8em 1.8em 0 0em rgba(203,203,203, 0.5), -2.6em 0em 0 0em rgba(203,203,203, 0.7), -1.8em -1.8em 0 0em #cbcbcb;
+  }
+}

package/src/sass/themes/cr/2017/components/media-block/_media-block.scss

@@ -0,0 +1,16 @@
+
+.media-block {
+  #play-icon {
+    path {
+      fill: $colour-mint-green;
+    }
+  }
+}
+.media-block__content {
+  background-image: linear-gradient(rgba(0,0,0,0), $colour-dark-purple);
+  .cr-body {
+    .font--mint-green {
+      color: $colour-mint-green;
+    }
+  }
+}

package/src/sass/themes/cr/2017/components/media-block/media-block.twig

@@ -0,0 +1,31 @@
+<div class="cw-region">
+  <article class="contextual-region block-content block-content--type-media-reference {{ modifier_class }} media-block clearfix">
+    <div class="media-block__image">
+      <div class="media media--blazy  media--responsive media--image">
+        <picture>
+          <img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
+        </picture>
+      </div>
+    </div>
+    <div class="media-block__content-wrapper">
+      <div class="media-block__content">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
+          <path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
+            s20-9,20-20S31,0,20,0L20,0z"></path>
+          <path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
+        </svg>
+        <div class="cr-body">
+          <h4>Relive all the best bits of last Red Nose Day</h4>
+          <p class="font--mint-green"><strong>20:20</strong></p>
+        </div>
+      </div>
+    </div>
+    <a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
+    <div class="media-block__caption">
+      <div class="cr-body">
+        <p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
+        <p><a class="btn btn--red" href="#">See how to join in</a></p>
+      </div>
+    </div>
+  </article>
+</div>

package/src/sass/themes/cr/2017/components/meta-icons/_meta-icons.scss

@@ -0,0 +1,64 @@
+
+.block-cr-meta-icons {
+  height: 77px;
+}
+
+.meta-icons {
+  float: left;
+  position: relative;
+  top: calc(50% - 15px);
+  @include breakpoint($desktop-nav-breakpoint) {
+    position: relative;
+    z-index: 10;
+    float: left;
+    .icon {
+      width: 35px;
+      height: 35px;
+    }
+  }
+  .meta-icons__login {
+    display: inline-block;
+    text-decoration: none;
+  }
+  .meta-icons__login,
+  .meta-icons__magnify,
+  .meta-icons__esu-toggle {
+    width: 35px;
+    height: 35px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    display: inline-block;
+    @include breakpoint($screen-md) {
+      width: 46px;
+    }
+    &.active {
+      .icon {
+        background-color: $colour-mint-green;
+      } 
+    }
+    &:focus {
+      outline: none;
+    }
+    span {
+      display: none;
+    }
+    .icon {
+      width: 35px;
+      height: 35px;
+      padding: 5px;
+      transition-property: fill;
+      transition-duration: 150ms;
+      fill: $colour-jasper-grey;
+    }
+    &:hover,
+    &:focus,
+    &.active {
+      .icon {
+        fill: $colour-black;
+        outline: none;
+      }
+    }
+  }
+}