@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/rnd/2017/components/navigation/kids-nav/_kids-nav.scss

@@ -0,0 +1,180 @@
+// Kids navigation
+//
+// Markup: kids-nav.twig
+//
+// Style guide: 185.50
+
+.menu--kids-menu {
+  text-align: center;
+  .kids-logo {
+    display: inline-block;
+  }
+}
+
+@include breakpoint(max-width 739px) {
+  // fix issue kids menu
+  .header__inner-wrapper nav.menu--kids-menu ul.menu {
+    float: left;
+  }
+}
+.kids-logo {
+  background: url( $image-path + 'kids-nav-sprite.png') no-repeat 0 -1814px;
+  position: relative;
+  z-index: 5;
+  display: block;
+  float: left;
+  width: 204px;
+  height: 60px;
+  margin-top: 10px;
+  text-indent: -9999px;
+  @include breakpoint($desktop-nav-breakpoint) {
+    top: -46px;
+    float: none;
+    margin-right: 30px;
+    margin-left: 54px;
+  }
+}
+.menu--kids-menu {
+  display: block !important;
+  .menu-item a {
+    background: url( $image-path + 'kids-nav-sprite.png') no-repeat;
+  }
+  .menu-item {
+    .kids-leave-kids {
+      width: 120px;
+      height: 50px;
+      background-position: 0 0;
+      &:hover {
+        background-position: 0 -90px;
+      }
+    }
+    .kids-grown-ups {
+      background-position: 0 -1375px;
+      &:hover {
+        background-position: 0 -1465px;
+      }
+    }
+    .kids-learn {
+      background-position: 0 -1914px;
+      &:hover {
+        background-position: 0 -2004px;
+      }
+    }
+    .kids-bake {
+      background-position: 0 -320px;
+      &:hover {
+        background-position: 0 -410px;
+      }
+    }
+    .kids-dress-up {
+      background-position: 0 -953px;
+      &:hover {
+        background-position: 0 -1043px;
+      }
+    }
+    .kids-play {
+      background-position: 0 -2269px;
+      &:hover {
+        background-position: 0 -2359px;
+      }
+    }
+    .kids-jokes {
+      background-position: 0 -1634px;
+      &:hover {
+        background-position: 0 -1724px;
+      }
+    }
+  }
+  .menu {
+    @include breakpoint($desktop-nav-breakpoint) {
+      width: auto;
+      padding-left: 0;
+      display: inline-block;
+    }
+    .menu-item {
+      @include breakpoint($desktop-nav-breakpoint) {
+        margin: 0 18px;
+        padding: 14px 0;
+        display: inline-block;
+      }
+      a {
+        border: none;
+        color: $colour-black;
+        text-decoration: none;
+        font-size: 16px;
+        line-height: 16px;
+        display: block;
+        @include breakpoint($desktop-max-nav-breakpoint) {
+          background-image: none;
+        }
+        @include breakpoint($desktop-nav-breakpoint) {
+          width: 70px;
+          padding: 55px 0 10px;
+          text-align: center;
+        }
+        &.kids-grown-ups {
+          @include breakpoint($desktop-nav-breakpoint) {
+            width: 82px;
+            margin: 0 -5px;
+          }
+        }
+        &.kids-leave-kids {
+          @include breakpoint($desktop-nav-breakpoint) {
+            width: 124px;
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+}
+@include breakpoint(max-width 1150px) {
+  nav.menu--kids-menu {
+    position: absolute;
+    z-index: 100;
+    top: 70px;
+    right: 0;
+    width: 100%;
+    display: none !important;
+    @include breakpoint($screen-md) {
+      width: auto;
+    }
+    &.show {
+      display: block !important;
+    }
+    .menu {
+      text-align: right;
+      background: #051d37;
+      padding: 10px 0;
+      margin: 0;
+      width: 100%;
+      .menu-item {
+        position: relative;
+        a {
+          display: block;
+          padding: 10px 30px;
+          text-decoration: none;
+          color: $colour-white;
+          font-size: 16px;
+          line-height: 16px;
+          @include transition(background-color 180ms);
+        }
+        &.menu-item--active-trail a,
+        &.menu-item--active-trail a:hover,
+        a:hover{
+          background-color: #1e354b;
+          color: $colour-white;
+        }
+        .font--red:hover,
+        .font--red {
+          color: $colour-red;
+        }
+      }
+    }
+    .menu--level-0 {
+      .menu {
+        display: none; // fallback in case there are more levels
+      }
+    }
+  }
+}

package/src/sass/themes/rnd/2017/components/navigation/kids-nav/kids-nav.twig

@@ -0,0 +1,13 @@
+<nav style="display: block;" role="navigation" aria-labelledby="block-kidsmenu-menu" id="block-kidsmenu" class="block block-menu menu--kids-menu">
+  <h2 class="visually-hidden" id="block-kidsmenu-menu">Kids menu</h2>
+  <a class="kids-logo" href="/kids">Kids homepage</a>
+  <ul class="menu" id="main-menu">
+  <li class="menu-item"><a href="#" class="kids-play" target="">Play</a></li>
+  <li class="menu-item"><a href="#" class="kids-bake" target="">Bake</a></li>
+  <li class="menu-item"><a href="#" class="kids-dress-up" target="">Dress up</a></li>
+  <li class="menu-item"><a href="#" class="kids-jokes" target="">Jokes</a></li>
+  <li class="menu-item"><a href="#" class="kids-learn" target="">Story</a></li>
+  <li class="menu-item"><a href="#" class="kids-grown-ups" target="">Grown ups</a></li>
+  <li class="menu-item"><a href="#" class="kids-leave-kids" target="">Leave</a></li>
+  </ul>
+</nav>

package/src/sass/themes/rnd/2017/components/search/_search-block-sticky-nav.scss

@@ -0,0 +1,175 @@
+.search-block {
+  // offset top from navigation and give it the same width as the header inner wrapper
+  position: fixed;
+  overflow: visible;
+  top: $sm-nav-height;
+  right: 0;
+  left: 0;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1200px;
+  z-index: 100;
+
+  @include breakpoint($screen-md) {
+    top: $md-nav-height;
+  }
+  @include breakpoint($desktop-nav-breakpoint) {
+    top: $lg-nav-height;
+  }
+
+  .cc-banner--visible & {
+    position: relative;
+    top: 0;
+  }
+  .search-block__wrapper {
+    position: absolute;
+    overflow: visible;
+    top: 0;
+    right: 0;
+    padding: 20px;
+    width: 100%;
+    background-color: $colour-black;
+
+    @include breakpoint($screen-md) {
+      // offset from right width of icon buttons and hamburger button
+      right: calc(92px + 65px);
+      width: 380px;
+    }
+    @include breakpoint($desktop-nav-breakpoint) {
+      // offset from right width of icon buttons and margin meta-icons
+      right: calc(92px + 5px);
+    }
+  }
+  .search-block__message {
+    margin: 0;
+    width: 100%;
+    p {
+      margin: 0 auto 20px;
+      width: 60%;
+      font-family: $font-bold;
+      color: $colour-white;
+      word-wrap: break-word;
+      @include font-size($h3-font-size);
+    }
+  }
+  .search-block__form {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    form {
+      margin: 0;
+      border: none;
+    }
+  }
+  .form-item {
+    margin: 0;
+    padding: 0 10px;
+    width: calc(100% - 50px);
+    background-color: $colour-white;
+  }
+  input[type=text] {
+    padding: 0;
+    height: 50px;
+    font-family: $font-bold;
+    @include font-size($h3-font-size);
+    color: $colour-black;
+  }
+  .form-actions {
+    margin: 0;
+    height: 50px;
+    width: 50px;
+    background-color: $colour-red;
+  }
+  input[type=submit] {
+    width: 50px;
+    height: 50px;
+    background-color: $colour-white;
+    mask: url($image-path + "magnify-icon.svg") no-repeat center;
+    mask-size: 23px;
+    -webkit-mask: url($image-path + "magnify-icon.svg") no-repeat center;
+    -webkit-mask-size: 23px;
+    @include breakpoint($screen-md) {
+      mask-size: 25px;
+      -webkit-mask-size: 25px;
+    }
+
+    &:hover {
+      background-color: $colour-black;
+    }
+    
+    &:focus {
+      outline: 1px dotted #212121;
+      // Webkit specific override where applicable
+      outline: 5px auto -webkit-focus-ring-color;
+    }
+    .no-cssmask & {
+      background: transparent url($image-path + "search_page_icon.png") center no-repeat;
+      background-size: 23px;
+      @include breakpoint($screen-md) {
+        background-size: 25px;
+      }
+      &:focus,
+      &:hover {
+        background-image: url($image-path + "search_page_icon_hover.png");
+        background-color: transparent;
+      }
+    } 
+  }
+
+  a.close-button {
+    position: absolute;
+    top: calc(0px - #{$sm-nav-height});
+    right: calc(92px + 65px); 
+    width: 46px;
+    height: $sm-nav-height;
+    background-color: $colour-black;
+    @include breakpoint($screen-md) {
+      top: calc(0px - #{$md-nav-height});
+      height: $md-nav-height;
+    }
+    @include breakpoint($desktop-nav-breakpoint) {
+      top: calc(0px - #{$lg-nav-height});
+      right: calc(92px + 5px); 
+      height: $lg-nav-height;
+    }
+    .icon {
+      margin: 12px 10px;
+      width: 25px;
+      height: 25px;
+      fill: white;
+      @include breakpoint($screen-md) {
+        margin: 12px 6px;
+        width: 35px;
+        height: 35px;
+      }
+      @include breakpoint($desktop-nav-breakpoint) {
+        margin: 26px 12px 28px;
+        width: 20px;
+        height: 21px;
+      }
+    }
+    &:focus,
+    &:hover {
+      .icon {
+        fill: $colour-white;
+      }  
+    }
+    .path-search & {
+      display: none;
+    }
+  }  
+}
+//IE
+.no-object-fit {
+  .search-block {
+    // override base theme's IE fix
+    position: fixed;
+  }
+  // positioning for when cookie message is visible
+  .cc-banner--visible {
+    .search-block {
+      position: relative;
+      top: 0;
+    }
+  }
+}

package/src/sass/themes/rnd/2017/components/search/images/magnify-icon.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="26.8mm" height="26.8mm" viewBox="0 0 76.1 76"><title>search</title><path d="M36.2,13.7a1.9,1.9,0,0,0-1.5-.4c-13.2,1.5-20.4,8.6-21.5,21.5a2.1,2.1,0,0,0,.4,1.4,1.9,1.9,0,0,0,1.3.7,1.7,1.7,0,0,0,1.4-.5,1.7,1.7,0,0,0,.7-1.3c.9-10.7,6.9-16.7,18-17.9a1.9,1.9,0,0,0,1.3-.7,1.9,1.9,0,0,0,.4-1.5C36.9,14.5,36.7,14.1,36.2,13.7Z"/><path d="M75,70,58.7,53.8A31.7,31.7,0,0,0,66.1,33,31.7,31.7,0,0,0,56.4,9.6,31.9,31.9,0,0,0,33-.1,32,32,0,0,0,9.6,9.5,32.6,32.6,0,0,0,0,33,31.8,31.8,0,0,0,9.6,56.3,31.9,31.9,0,0,0,33,66a31.5,31.5,0,0,0,20.8-7.4L70,74.9a3.3,3.3,0,0,0,2.5,1,3,3,0,0,0,2.4-1A3.2,3.2,0,0,0,76,72.5,3.3,3.3,0,0,0,75,70ZM51.6,51.5h-.1a25,25,0,0,1-18.4,7.6,25.7,25.7,0,0,1-18.6-7.7A25.2,25.2,0,0,1,6.9,33,25.8,25.8,0,0,1,33,6.9a25.1,25.1,0,0,1,18.5,7.6,25.4,25.4,0,0,1,7.7,18.6A25,25,0,0,1,51.6,51.5Z"/></svg>

package/src/sass/themes/rnd/2017/components/social/_social.scss

@@ -0,0 +1,21 @@
+// Footer Social icons
+.footer__social-links {
+  li {
+    margin: 5px 4px 0;
+    @media (min-width: 740px) {
+      margin: 5px 8px 0;
+    }
+    a {
+      -webkit-transition: 0.5s opacity;
+      transition: 0.5s opacity;
+      border-radius: 50%;
+      background: black;
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+  .icon {
+    fill: none;
+  }
+}

package/src/sass/themes/rnd/2017/components/tooltips/_tooltips.scss

@@ -0,0 +1,14 @@
+// Theme-specific overrides for our nav tooltips to suit our RND nav
+.ui-tooltip.ui-tooltip--nav {
+
+  // Override the JS so we can keep the position within CSS
+  top: 80px !important;
+  
+  @include breakpoint($desktop-nav-breakpoint) {
+    top: 107px !important;
+  }
+  //Reposition this to take our admin menu into account
+  .user-logged-in & {
+    top: 156px !important;
+  }
+}

package/src/sass/themes/rnd/2017/rnd17.scss

@@ -0,0 +1,36 @@
+// ==========================================================================
+// Core variables * comment files you want to override
+// ==========================================================================
+
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_theme.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_typography.scss";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+@import "../../../base/_core";
+
+// ==========================================================================
+// Base components
+// ==========================================================================
+
+@import "../../../base/_components";
+
+// ==========================================================================
+// RND variables
+// ==========================================================================
+@import "variables/_colours.scss";
+// ==========================================================================
+// RND components
+// ==========================================================================
+
+@import "components/navigation/kids-nav/_kids-nav.scss";
+@import "components/_loading.scss";
+@import "components/_otn.scss";
+@import "components/_theme.scss";
+
+@import "_rnd17-styleguide.scss";

package/src/sass/themes/rnd/2017/variables/_colours.scss

@@ -0,0 +1,25 @@
+/* RND17 colours */
+
+$colour-red: #f04257;
+$colour-blue: #22d2dc;
+$colour-yellow: #fbef51;
+$colour-green: #b2e55e;
+$colour-teal: #00beca;
+$colour-royal-blue: #0565d1;
+$colour-purple: #7d2ca9;
+$colour-dark-purple: #7023b7;
+$colour-pink: #fc9eb9;
+
+$colour-black: #030e1a;
+$colour-dark-blue: #061d38;
+// $colour-dark-grey: #333;
+$colour-jasper-grey: #666;
+// $colour-greyboy-grey: #999;
+$colour-gainsboro-grey: #c7c7c7;
+$colour-light-grey: #dddddd;
+$colour-smoke-grey: #f0f0f0;
+$colour-white: #fff;
+// it the below still needed??
+$item-grey: #ddd;
+/* Single message row background colour, used in June site, to be renamed and updated */
+$cream-grey: #F5F2ED;

package/src/sass/themes/rnd/2017/variables/_navigation.scss

@@ -0,0 +1,4 @@
+// Sticky nav heights
+$sm-nav-height: 50px;
+$md-nav-height: 60px;
+$lg-nav-height: 75px;

package/src/sass/themes/shop/2018/_shop18-components.scss

@@ -0,0 +1,52 @@
+// SR components
+@import "../../sr/2018/components/background-colours/background-colours";
+@import "../../sr/2018/components/buttons/buttons";
+@import "../../sr/2018/components/links/links";
+@import "../../sr/2018/components/loading/loading";
+@import "../../sr/2018/components/typography/fonts";
+@import "../../sr/2018/components/typography/typography";
+@import "../../sr/2018/components/navigation/main-nav";
+@import "../../sr/2018/components/just-in-time-block/_just-in-time-block";
+
+// Shop overrides
+
+body {
+  font-family: $body-font;
+}
+header[role=banner] {
+  height: auto;
+  .site-logo {
+    margin-top: 20px;
+  }   
+}
+// select box overrides
+select {
+  padding: 14px 50px 14px 10px;
+  font-family: $body-font;
+  color: $colour-dark-blue-lighter;
+}
+
+// Social links
+.footer__social-links {
+  margin: 0 0 20px;
+  li {
+    margin: 5px 4px 0;
+    @media (min-width: 740px) {
+      margin: 5px 8px 0;
+    }
+    a {
+      -webkit-transition: 0.5s opacity;
+      transition: 0.5s opacity;
+      border-radius: 50%;
+      background: black;
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+}
+span, strong {
+  color: inherit;
+}
+$item-grey: #ddd;
+$colour-red: #e81962;