@comicrelief/storybook 1.34.0 → 2.0.0

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

@@ -0,0 +1,704 @@
+// Li psuedoclass to extend nav styles in mutiple places
+.nav-underline {
+  content: "";
+  width: auto;
+  height: 2px;
+  background-color: $colour-ruby;
+  position: absolute;
+  bottom: -3px;
+  left: 0;
+  right: 0;
+}
+
+/* Main avigation styling */ 
+.header__inner-wrapper {
+  height: 100%;
+  justify-content: space-between;
+
+  &:after {
+    content: none;
+  }
+  .block-system-branding-block {
+    margin-right: 0;
+  }
+
+  .main-nav__wrapper {
+    @include breakpoint($desktop-nav-breakpoint) {
+      margin-right: 0;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 75%;
+
+    }
+  }
+}
+
+.main-nav__wrapper {
+  height: auto;
+  margin-right: 0;
+
+  li.menu-item {
+    padding-top: 0;
+    position: relative;
+  }
+
+  // UL menu
+  .main-nav__items {
+    top: $sm-nav-height;
+    text-align: right;
+    
+    @include breakpoint($screen-md) {
+      top: $md-nav-height;
+    }
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      background-color: transparent;
+      top: 0;
+    }
+
+    li.item-open,
+    li {
+      a {
+        font-size: 16px;
+        line-height: 16px;
+
+        // Transparent 'top of screen' state
+        color: white;
+
+        span {
+          position: relative;
+        }
+
+        @include breakpoint($desktop-nav-breakpoint) {
+          padding: 8px 7px 4px;
+
+          span {
+            color: inherit;
+          }
+        }
+      }
+
+      &:hover > ul {
+        @include breakpoint($desktop-nav-breakpoint) {
+          top: $lg-nav-height;
+        }
+      }
+    }
+
+    // Parent items of the menu
+    &.menu--level-0 {
+      @include breakpoint($desktop-nav-breakpoint) {
+        width: 100%;
+        text-align: center;
+        height: 100%;
+      }
+
+      > li.item-open,
+      > li {
+         &:hover > a {
+          
+          color: $colour-dark-blue;
+
+          @include breakpoint($desktop-nav-breakpoint) {
+            color: white;
+          }
+
+          span {
+            position: relative;
+            color: inherit;
+
+            &:after {
+              @extend .nav-underline;
+            }
+          }
+        }
+
+        // Our JS-manipulated focus state
+        &.focused >a {
+          span.menu-item__text {
+            border-bottom: none;
+
+            &:after {
+              @extend .nav-underline;
+            }
+          }
+        }
+
+        @include breakpoint($desktop-nav-breakpoint) {
+          padding: 25px 0px;
+          margin: 0 10px;
+        }
+
+        > a {
+          font-family: $font-medium;
+          font-weight: 500;
+          font-size: 21px;
+          line-height: 21px;
+          padding: 12px 20px;
+          height: 53px;
+          
+          &.is-active,
+          &:focus {
+            span.menu-item__text {
+              // Override base theme, apply underline as an 'after' to allow us to style it further
+              border-bottom: none;
+
+              &:after {
+                @extend .nav-underline;
+              }
+            }
+          }
+
+          &.is-active span.menu-item__text:after {
+            @extend .nav-underline;
+          }
+        
+          @include breakpoint($desktop-nav-breakpoint) {
+            font-size: 16px;
+            line-height: 16px;
+            padding: 7px 5px;
+            height: auto;
+
+            // Transparent nav state
+            color: white;
+
+            header[role=banner] &,
+            body.cc-banner--visible header[role=banner] & {
+              color: $colour-dark-blue;
+              background-image: none;
+            }
+
+            &.is-active span.menu-item__text {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    } 
+
+    // First level of sub items (dropdwn)
+    &.menu--level-1 {
+      li.menu-item.menu-item--duplicate {
+        > a {
+          color: white;
+          font-family: $font-medium;
+          position: relative;
+          font-size: 16px;
+          line-height: 16px;
+          padding: 16px 20px;
+          height: 53px;
+          @include breakpoint($desktop-nav-breakpoint) {
+            &:focus {
+              background-color: #3e1c43;
+            }
+          }
+
+          &:after {
+            width: 14px;
+            border-bottom: 4px solid white;
+            left: 12px;
+            top: auto;
+            bottom: 0;
+
+            @include breakpoint($desktop-nav-breakpoint) {
+              bottom: 10px;
+            }
+          }
+
+          &:before {
+            @include breakpoint($desktop-nav-breakpoint) {
+              left: 34px;
+              width: 10px;
+              height: 10px;
+              border: 11px solid transparent;
+              border-bottom-color: $colour-dark-blue;
+              top: -22px;
+            }
+          }
+
+          &.is-active {
+
+            // Add border to the span (to allow control over the width), rather than the :after psuedo
+            span.menu-item__text {
+              border-bottom: 4px solid white;
+            }
+
+            &:after {
+              border-bottom: none;
+            }
+          }
+        }
+
+        @include breakpoint($desktop-nav-breakpoint) {
+          height: 74px;
+          width: 100%;
+          padding: 0;
+
+          a {
+            padding: 26px 21px;
+            height: 74px;
+
+            &:focus {
+              span.menu-item__text {
+                border-bottom: none;
+              }
+            }
+          }
+        }
+      }
+      
+      li.item-open a,
+      li a,
+      li a span {
+        color: $colour-white;
+
+        &.is-active span.menu-item__text {
+          border-bottom: 2px solid $colour-white;
+        }
+      }
+
+      @include breakpoint($desktop-nav-breakpoint) {
+        padding-bottom: 20px !important;
+      }
+    }
+
+    // First and second levels of sub items
+    &.menu--level-1,
+    &.menu--level-2 {
+      top: 0;
+      
+      @include breakpoint($desktop-nav-breakpoint) {
+        top: 75px;
+        text-align: left;
+      }
+      
+      li a,
+      li.item-open a {
+        font-family: $font-light;
+        font-weight: 300;
+        font-size: 16px;
+        line-height: 16px;
+        color: $colour-white;
+        height: 44px;
+
+        @include breakpoint($desktop-nav-breakpoint) {
+          // The complex inherited styles need a little bullying to override here
+          font-size: 20px !important;
+          line-height: 20px !important;
+        }
+
+        &:hover {
+          background-color: #3e1c43;
+
+          &.is-active span.menu-item__text {
+            border-bottom: 2px solid $colour-white;
+          }
+        }
+
+        &.is-active span.menu-item__text {
+          border-bottom: 2px solid $colour-white;
+        }
+      }
+
+      li.menu-item,
+      li.item-open.menu-item {
+        @include breakpoint($desktop-nav-breakpoint) {
+          padding: 0;
+          height: 100%;
+          width: 100%;
+
+          a {
+            padding: 12px 21px;
+            height: auto;
+
+            &:focus {
+              background-color: #3e1c43;
+  
+              span {
+                border-bottom: none;
+              }
+            } 
+          }
+        }
+      }
+    }
+
+    li.item-open,
+    li {
+
+      // Reset base styles, so we're targetting the anchor and not the li
+      > ul li:hover {
+        background-color: transparent;
+      }
+
+      > ul li a:hover {
+        background-color: #3e1c43;
+      }
+
+      &:hover >a span.menu-item__text {
+        border-bottom: none;
+      }
+    }
+
+    // Secondary nav items that have tertiary menu items
+    &.menu--level-1 li.menu-item.menu-item--expanded {
+      @include breakpoint($desktop-nav-breakpoint) {
+        height: 100%;
+      }
+    }
+    
+    // Second levels of sub items
+    &.menu--level-2 {
+      li.menu-item {
+        padding: 0;
+
+        a {
+          // Indent tertiary items
+          padding-left: 40px;
+          background-color: #3e1c43;
+
+          &:hover {
+            background-color: #3e1c43;
+          }
+        }
+      } 
+
+      @include breakpoint($desktop-nav-breakpoint) {
+        display: block;
+        position: relative;
+        top: 0;
+        height: 100%;
+        max-height: 100%;
+      }
+    }
+  } 
+}
+
+header[role=banner] {
+  border-bottom: none;
+  height: $sm-nav-height;
+
+  @include breakpoint($screen-md) {
+    height: $md-nav-height;
+  }
+
+   @include breakpoint($desktop-nav-breakpoint) {
+    height: $lg-nav-height;
+  }
+
+  .block-cr-meta-icons,
+  .meta-icons,
+  .meta-icons__login,
+  .meta-icons__magnify,
+  .meta-icons__esu-toggle,
+  .main-nav__icons.main-nav__burger,
+  .c-hamburger {
+    height: $sm-nav-height;
+
+    .icon {
+      fill: $colour-black;
+      margin: 12px 10px;
+    }
+
+    @include breakpoint($screen-md) {
+      height: $md-nav-height;
+
+      .icon {
+        margin: 17px 6px;
+      }
+    }
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      background-color: transparent;
+      height: $lg-nav-height;
+    }
+  }
+
+  // Menu icon
+  .c-hamburger {
+    span {
+      top: 23px;
+      background-color: $colour-black;
+      &:after,
+      &:before {
+        background-color: inherit;
+      }
+      @include breakpoint($screen-md) {
+        top: 32px;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    &.is-active {
+      background-color: white;
+      span {
+        background-color: transparent;
+
+        &:before,
+        &:after {
+          background-color: $colour-dark-blue;
+        }
+      }
+    } 
+  }
+
+  // States for ESU, Search and FROST button
+  .meta-icons > a {
+    display: block;
+    float: left;
+    width: 46px;
+    -webkit-transition: 0.2s background-color;
+    transition: 0.2s background-color;
+    &:hover,
+    &:focus {
+      background-color: $colour-dark-blue;
+      .icon {
+        fill: $colour-white;
+      }
+    }
+    &.active {
+      height: $sm-nav-height;
+      background-color: $colour-dark-blue;
+      .path-search & {
+        &.meta-icons__magnify {
+          background-color: transparent;
+        }
+      }
+      @include breakpoint($screen-md) {
+       height: $md-nav-height;
+      }
+      @include breakpoint($desktop-nav-breakpoint) {
+        height: $lg-nav-height;
+      }
+      .icon {
+        fill: $colour-white;
+      }
+    }
+  }
+
+  @include breakpoint($desktop-nav-breakpoint) {
+    .meta-icons > a {
+      .icon {
+        margin: 30px 12px;
+      }
+    }
+  }
+
+  .block-cr-meta-icons {
+    @include breakpoint($desktop-nav-breakpoint) {
+      margin-right: 5px;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+    background: transparent;
+    background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.5));
+    -webkit-transition: background-color 350ms linear;
+    transition: background-color 350ms linear;
+    height: $sm-nav-height;
+
+    // Quick-and-dirty unsticky
+    position: relative;
+    background: white;
+    top: auto;
+    left: auto;
+
+    @include breakpoint($screen-md) {
+      height: $md-nav-height;
+    }
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      height: $lg-nav-height;
+    }
+
+    body.cc-banner--visible & {
+      position: relative;
+      background-image: none;
+    }
+
+    // Tweak the styles when the nav is scrolling so has a solid background
+    &.scrolling {
+      background: white;
+      box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
+      height: $sm-nav-height;
+
+      @include breakpoint($screen-md) {
+        height: $md-nav-height;
+      }
+
+      @include breakpoint($desktop-nav-breakpoint) {
+        height: $lg-nav-height;
+
+        .site-logo {
+          margin-top: 6px;
+          width: 61px;
+          height: 61px;
+        }
+      }
+
+      .meta-icons a {
+        .icon {
+          fill: $colour-dark-blue;
+        }
+        &.active,
+        &:hover,
+        &:focus {
+          background-color: $colour-dark-blue;
+          .icon {
+            fill: $colour-white;
+          }
+        }
+        &.active {
+          .path-search.cc-banner--visible & {
+            background-color: transparent;
+            .icon {
+              fill: $colour-dark-blue;
+            }  
+          }
+        }
+      }
+
+      .c-hamburger {
+        span,
+        span:after,
+        span:before {
+          background-color: $colour-dark-blue;
+        }
+
+        &.is-active {
+          span {
+            background-color: transparent;
+
+            &:after,
+            &:before {
+              background-color: $colour-dark-blue;
+            }
+          }
+        }
+      }
+    }
+
+    .site-logo {
+      margin-top: 5px;
+      min-width: 0px;
+      width: 40px;
+      height: 40px;
+      background: none;
+
+      img {
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+
+      @include breakpoint($screen-md) {
+        width: 50px;
+        height: 50px;
+      }
+      
+      @include breakpoint($desktop-nav-breakpoint) {
+        margin-top: 6px;
+        width: 61px;
+        height: 61px;
+      }
+    }
+
+}
+/* Very specific selector for search icon color on search result page
+   when not scrolling and cookie banner is visible
+*/
+body.path-search.cc-banner--visible header[role=banner] {
+  .meta-icons > a.active.meta-icons__magnify .icon {
+    fill: $colour-dark-blue;
+  }
+}
+
+// Ensure wrapper height matches the content, so we can display nav fully underneath
+.cc_banner-wrapper {
+  height: auto;
+}
+
+ header[role=banner] {
+  // Cookie banner-related tweaks to make sure our icons are visible over the temporarily white header 
+  body.cc-banner--visible & {
+    .meta-icons > a {
+      .icon {
+        fill: $colour-dark-blue;
+      }
+      &.active,
+      &:hover,
+      &:focus {
+        .icon {
+          fill: $colour-white;
+        }
+      }
+    }
+
+    // Use our 'scrolling' styles here too
+    .site-logo {
+      @include breakpoint($desktop-nav-breakpoint) {
+        margin-top: 6px;
+        width: 61px;
+        height: 61px;
+      }
+    }
+  
+    .c-hamburger {
+      span, span:after, span:before {
+        background-color: $colour-dark-blue;
+      }
+
+      &.is-active {
+        span {
+          background-color: transparent;
+        }
+
+        span:after, span:before {
+          background-color: $colour-dark-blue;
+        }
+      }
+    }
+  }
+}
+
+header[role=banner] {
+  padding: 0;
+
+  @include breakpoint($screen-md) {
+    height: 70px;
+  }
+
+  @include breakpoint($desktop-nav-breakpoint) {
+    height: 80px
+  }
+  
+
+  .site-logo {
+    margin-top: 5px;
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      margin-top: 8px;
+    }
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      margin-top: 9px;
+    }
+  }
+} 
+
+#main-menu {
+  @include breakpoint($desktop-nav-breakpoint) {
+    text-align: right;
+  }
+}

package/src/sass/themes/sr/2018/components/navigation/images/SR+IGO_LOGO_RGB.svg

@@ -0,0 +1 @@
+<svg id="LOGO" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.46 230.57"><defs><style>.cls-1{fill:#3a4972;}.cls-2{fill:#e62731;}.cls-3{fill:#fff;}</style></defs><title>SR+IGO_LOGO_RGB</title><path class="cls-1" d="M239.92,32.69V88.05H227V32.69Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M255.66,88.05V43.32H245.11V32.69H279.3V43.32H268.49V88.05Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M284.58,32.69h12.56V43.32c0,7.56-3.95,10.9-12.56,11.16V48.6c3.78-.09,5.62-1.23,5.71-4.66h-5.71Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M312.53,69.34v2.19c0,4.13,1.75,6.86,5.18,6.86,3,0,4.57-1.67,4.57-4.75s-2-4.39-5.36-6.24l-4.66-2.55c-5.88-3.25-11-7.2-11-16.69,0-9.85,6.41-16.17,15.9-16.17,10.11,0,15.91,5.8,15.91,17.13v2.2H321.76V49c0-4.48-1.41-6.67-4.58-6.67-2.72,0-4.13,1.93-4.13,4.92,0,2.81,1.59,4.57,4.22,6l5.19,2.82c7.29,4,11.68,7.82,11.68,16.43,0,10.72-6.59,16.26-16.43,16.26s-16.52-5.45-16.52-17.32v-2.1Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M377.39,88.05l-1-4.92c-1.4,3.78-5.36,5.63-9.75,5.63-11,0-15.64-8.7-15.64-24.61V56.59c0-15.9,5.18-24.6,17.84-24.6S386,39.9,386,52.81v1.41H373.44V50.53c0-4.92-.79-8.09-4.57-8.09s-4.57,3.17-4.57,8.09V70c0,4.92,1.05,8.09,4.74,8.09s4.75-3.17,4.75-8.09v-.79h-4V59.49H386V88.05Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M417.3,32.69l11.95,55.36H416.42l-1.85-9.84H403.68l-1.94,9.84H390l11.95-55.36ZM405.52,68.46h7.3l-3.34-18.28h-.35Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M455.89,60.81h.35l5.27-28.12h16.26V88.05H465.82V56.51h-.35L459.4,88.05h-8.08l-6.24-31.54h-.35V88.05H433.39V32.69H450Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M511.88,88.05h-28V32.69h28V43.32H496.5V54.66h11.42V65.21H496.5V77.42h15.38Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M256.36,223.11a65.22,65.22,0,0,1-35.71-59.33,65.22,65.22,0,0,1,35.71-59.32q16.74-8.74,37.75-8.74t37.75,8.74a65.22,65.22,0,0,1,35.71,59.32,65.22,65.22,0,0,1-35.71,59.33q-16.74,8.73-37.75,8.74T256.36,223.11Zm52.54-30.78A28.53,28.53,0,0,0,319.4,181a36.07,36.07,0,0,0,3.91-17.21,36.08,36.08,0,0,0-3.91-17.2,28.66,28.66,0,0,0-10.5-11.34,29.32,29.32,0,0,0-29.57,0,28.68,28.68,0,0,0-10.51,11.34,36.2,36.2,0,0,0-3.91,17.2A36.18,36.18,0,0,0,268.82,181a28.55,28.55,0,0,0,10.51,11.34,29.32,29.32,0,0,0,29.57,0Z" transform="translate(-1.42 -1.42)"/><path class="cls-1" d="M511.88,98.7V228.87H475.8l-49.47-59.13v59.13H383.56V98.7h36.08l49.47,59.13V98.7Z" transform="translate(-1.42 -1.42)"/><path class="cls-2" d="M230.22,96.69A115.27,115.27,0,1,1,96.69,3.19a115.27,115.27,0,0,1,133.53,93.5" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M45.32,109.66l.33,1.91c.64,3.59,2.58,5.69,5.56,5.16,2.6-.45,3.72-2.15,3.25-4.82s-2.43-3.51-5.62-4.6L44.4,105.8c-5.62-1.92-10.65-4.58-12.11-12.83-1.51-8.55,3.1-15,11.35-16.49,8.79-1.55,14.72,2.6,16.45,12.46l.34,1.91-9.85,1.73-.35-2c-.69-3.9-2.25-5.59-5-5.11-2.37.42-3.3,2.32-2.84,4.91S44.47,94.13,47,95l4.93,1.65c7,2.32,11.36,5,12.68,12.5,1.65,9.32-3.23,15.14-11.79,16.65s-15.2-2.2-17-12.52l-.32-1.83Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M80.58,120.22l-11.16,2L60.94,74.06l13.6-2.4C85.08,69.8,91.07,74.73,92.89,85S90.78,102.12,80.23,104l-2.44.43ZM77.33,95.11C82,94.29,83,92.23,82.05,87s-2.56-7-7.22-6.13l-1.15.21,2.51,14.21Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M127.59,90.19c2.44,13.83-.53,22.47-11.76,24.45s-17-5.12-19.41-19l-1-6c-2.44-13.83.52-22.47,11.76-24.45s17,5.12,19.41,19ZM109,99.06c.75,4.28,2,7.06,5.23,6.48s3.47-3.6,2.71-7.88l-3-16.8c-.76-4.28-2-7.07-5.24-6.49S105.27,78,106,82.26Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M152.39,107.56c-.93-1.73-1.58-4.53-2.91-10.28-1-4.54-2.61-6.71-6.12-6.09l-1.45.26L145,108.87l-11.08,1.95-8.48-48.13,13.82-2.44c10.78-1.9,16.59,2.9,18.09,11.46,1.34,7.56-1.44,11.91-6.18,13.62,5.24.25,7.56,3.55,9,9.52,1.5,6.27,1.86,8.73,3.32,10.76Zm-11-25.16c4.5-.8,6-2.56,5.14-7.45-.77-4.35-2.9-6.18-7.41-5.39l-1.07.19,2.27,12.83Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M173.55,103.83,166.7,64.94l-9.17,1.62-1.63-9.25,29.72-5.24,1.63,9.25L177.85,63l6.86,38.89Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M67.46,178.49c-.94-1.72-1.59-4.52-2.92-10.27-1-4.55-2.6-6.71-6.11-6.09l-1.45.25,3.07,17.42L49,181.75l-8.49-48.13,13.83-2.43c10.77-1.9,16.58,2.9,18.09,11.46,1.33,7.56-1.44,11.91-6.18,13.61,5.24.26,7.55,3.55,9,9.52,1.5,6.28,1.85,8.73,3.32,10.76Zm-11-25.16c4.51-.79,6-2.55,5.15-7.44-.77-4.36-2.9-6.19-7.41-5.39l-1.07.19,2.26,12.83Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M105.35,171.81,81,176.11,72.49,128l24.37-4.3,1.63,9.25-13.37,2.35,1.74,9.86,9.93-1.75,1.62,9.17-9.93,1.75,1.87,10.62,13.37-2.36Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M111,121.19l6.85,38.89,13-2.29,1.63,9.24-24.22,4.27-8.48-48.13Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M137.81,116.46l8.49,48.13-11.23,2-8.49-48.13Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M174,159.7,149.66,164l-8.49-48.13,24.38-4.3,1.63,9.25-13.37,2.35,1.73,9.86,9.94-1.75,1.61,9.17-9.93,1.75L159,152.82l13.37-2.36Z" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M176.94,159.19l-8.49-48.13,23.45-4.14,1.63,9.25-12.22,2.15,2,11.16,8.93-1.58,1.61,9.09-8.94,1.58,3.29,18.64Z" transform="translate(-1.42 -1.42)"/></svg>