@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/rnd/2017/components/_loading.scss

@@ -0,0 +1,101 @@
+// rnd 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/rnd/2017/components/_otn.scss

@@ -0,0 +1,9 @@
+.btn.btn--xl {
+  //H4 style font
+  font-size: 24px;
+  line-height: 30px;
+  
+  height: 80px;
+  padding: 24px 50px;
+  @include border-radius(40px);
+}

package/src/sass/themes/rnd/2017/components/_theme.scss

@@ -0,0 +1,246 @@
+// RND Theme
+//
+// General overrides - we need to split those rules to specific files
+
+// Burger menu
+.c-hamburger {
+  width: 60px;
+  height: 67px;
+  @media screen and (min-width: 740px) {
+    text-indent: 0;
+    width: 125px;
+  }
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+  }
+  span {
+    top: 31px;
+    right: 15px;
+    height: 4px;
+    width: 30px;
+    &:before,
+    &:after {
+      height: 4px;
+    }
+    &:before {
+      top: -4px -6px;
+    }
+    &:after {
+      bottom: -4px -6px;
+    }
+    @media (min-width: 1150px) {
+      right: 20px;
+      top: 35px;
+    }
+  }
+}
+// Remove fonts from campaign
+.c-hamburger__text {
+  font-family: "GT-Walsheim-Regular",helvetica,arial,sans-serif;
+  top: 25px;
+}
+
+// Meta nav
+.feature-nav__items {
+  margin-top: 0;
+  margin-left: 10px;
+  li {
+    padding: 26px 0;
+    margin: 0 5px;
+    &:nth-child(n+4) {
+      display:none;
+    }
+    .menu--level-1 {
+      display: none;
+    }
+  }
+}
+.feature-nav__icons {
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+  }
+}
+.meta-icons {
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+    .icon {
+      width: 35px;
+      height: 100%;
+    }
+  }
+  .meta-icons__esu-toggle {
+    font-family: "GT-Walsheim-Regular",helvetica,arial,sans-serif;
+  }
+  .meta-icons__login,
+  .meta-icons__magnify,
+  .meta-icons__esu-toggle {
+    width: 32px;
+    height: 67px;
+    @media screen and (min-width: 740px) {
+      width: 52px;
+    }
+    @media screen and (min-width: 1150px) {
+      height: 72px;
+      width: 32px;
+    }
+    &.active {
+      background-color: #f9f9f9;
+    }
+    &:focus {
+      outline: none; // Accessibility !
+    }
+    span {
+      display: none;
+    }
+    .icon {
+      margin: 20px 4px;
+      fill: $colour-gainsboro-grey;
+      transition-property: fill;
+      transition-duration:150ms;
+      @media screen and (min-width: 740px) {
+        margin: 14px 4px;
+        width: 35px;
+        height: 35px;
+      }
+      @media screen and (min-width: 1150px) {
+        width: 20px;
+        height: 21px;
+        margin: 26px 5px;
+      }
+    }
+    &:hover,
+    &:focus,
+    &:active {
+      .icon {
+        fill: $colour-black;
+      }
+    }
+  }
+}
+
+// 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;
+  }
+}
+
+// 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: 76px !important;
+
+  //Reposition this to take our admin menu into account
+  .user-logged-in & {
+    top: 156px !important;
+  }
+}
+
+
+.main-nav__wrapper.main-nav--feature__wrapper .main-nav--feature__featured-items li {
+  @media screen and (min-width: 1150px) {
+    padding: 26px 0;
+    margin: 0 5px;
+  }
+}
+
+.main-nav__wrapper.main-nav--feature__wrapper {
+   @media screen and (min-width: 1150px) {
+      width: 100%;
+    }
+  
+  .feature-nav.main-nav--feature__inner-wrapper {
+    @media screen and (min-width: 1150px) {
+      height: 100%;
+    }
+  }
+
+  .main-nav--feature__featured-items {
+    @media screen and (min-width: 1150px) {
+      margin-top: 0;
+      height: 73px;
+    }
+  }
+  .c-hamburger.main-nav-toggle .c-hamburger__text {
+    @media screen and (min-width: 740px) {
+      top: 22px;
+    }
+    @media screen and (min-width: 1150px) {
+      top: 25px;
+    }
+  }
+}
+
+.main-nav__icons.main-nav__burger.feature-nav__icons.feature-nav__burger {
+  height: 66px;
+
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+  }
+}
+
+#block-rnd17-branding {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.header__inner-wrapper .block-cr-meta-icons {
+  width: 105px;
+  height: 66px;
+
+  @media screen and (min-width: 740px) {
+    width: 165px;
+  }
+  @media (min-width: 1150px) {
+    width: 120px;
+  }
+}
+
+#block-rnd17-main-menu {
+  #main-menu {
+    display: none !important;
+  }
+
+  &.show {
+    #main-menu {
+      display: block !important;
+      top: 70px;
+      @media (min-width: 1150px) {
+        top: 76px;
+      }
+    }
+  }
+}
+
+.main-nav__wrapper.main-nav--feature__wrapper .main-nav__items.main-nav--feature__items.menu-open {
+  @media (min-width: 1150px) {
+    top: 76px;
+  }
+}
+
+.header__inner-wrapper {
+  display: block;
+}
+
+.block--cr-email-signup--head.show .block--cr-email-signup__inner-wrapper {
+  @media (min-width: 1150px) {
+    top: 76px;  
+  }
+}

package/src/sass/themes/rnd/2017/components/email-signup/_email-signup-sticky-nav.scss

@@ -0,0 +1,144 @@
+// email signup when stikcy nav is in place
+.sticky-nav__header {
+  .block--cr-email-signup--head.cr-header-email-signup-form {
+    position: relative;
+    .block--cr-email-signup__inner-wrapper {
+      overflow: visible;
+      top: 0;
+      padding: 20px;
+      background-color: $colour-black;
+
+      @include breakpoint($screen-md) {
+        right: 65px;
+        width: 380px;
+      }
+      @include breakpoint($desktop-nav-breakpoint) {
+        top: $lg-nav-height;
+        right: 5px;
+      }
+      a.close-button {
+        position: absolute;
+        top: calc(0px - #{$sm-nav-height});
+        right: 65px;
+        width: 46px;
+        height: $sm-nav-height;
+        background-color: $colour-black;
+        @include breakpoint($screen-md) {
+          top: calc(0px - #{$md-nav-height});
+          right: 0;
+          height: $md-nav-height;
+        }
+        @include breakpoint($desktop-nav-breakpoint) {
+          top: calc(0px - #{$lg-nav-height});
+          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;
+          }  
+        }
+      }
+      .cr-email-signup--messages {
+        margin: 0;
+        width: 100%;
+        p {
+          margin: 0 auto 20px;
+          width: 80%;
+          font-family: $font-bold;
+          color: $colour-white;
+          word-wrap: break-word;
+          @include font-size($h3-font-size);
+        }
+      }
+      .esu-first-success-message,
+      .esu-second-success-message {
+        p {
+          margin: 0 auto;
+        }
+      }
+      form {
+        width: 100%;
+      }
+      .form-item {
+        margin: 0;
+        width: calc(100% - 50px);
+        background-color: $colour-white;
+      }
+      input[type=text] {
+        padding: 0 10px;
+        height: 50px;
+        max-width: 100%;
+        border-radius: 0;
+        font-family: $font-bold;
+
+        @include font-size($h4-font-size);
+        color: $colour-black;
+      }
+      input[type=submit].button {
+        margin: 0;
+        width: 50px;
+        height: 50px;
+        border-radius: 0;
+        text-indent: -9999px;
+        background: $colour-red url( $image-path + "arrow-right.svg") center no-repeat;
+        background-size: 45px 45px;
+        transition: background-size 0.1s linear;
+
+        &:focus,
+        &:hover {
+          background-size: 60px 60px;
+          border: 0;
+        }
+        
+        &:focus {
+          outline: 1px dotted #212121;
+          // Webkit specific override where applicable
+          outline: 5px auto -webkit-focus-ring-color;
+        }
+      }
+    }
+
+    &.block--cr-email-signup--error {
+      .block--cr-email-signup__inner-wrapper {
+        padding: 20px;
+
+        .cr-email-signup--messages {
+          p {
+            margin: 0 auto; 
+          }
+        }
+
+        input[type=text] {
+          border: 1px solid $colour-red;
+        }
+        input[type=submit].button {
+           border: none;
+        }
+      }
+
+      .esu-errors.error-msg-cr-header-email-signup-form {
+        float: none;
+        margin: 0 auto;
+        width: 100%;
+        background-color: $colour-black;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+.block--cr-email-signup--head.show .block--cr-email-signup__inner-wrapper {
+  @media (min-width: 1150px) {
+    top: 76px;  
+  }
+}

package/src/sass/themes/rnd/2017/components/header/_base-header.scss

@@ -0,0 +1,26 @@
+header[role=banner] {
+  height: 80px;
+
+   @include breakpoint($desktop-nav-breakpoint) {
+    height: 107px;
+  }
+}
+// hide top wrapper as this doesn't exist in rnd
+.header__top-wrapper {
+  display: none;
+}
+.site-logo {
+  margin-top: 7px;
+  width: 66px;
+  height: 66px;
+  min-width: 0;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+  @include breakpoint($desktop-nav-breakpoint) {
+    margin-top: 12px;
+    width: 80px;
+  }
+}

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

@@ -0,0 +1,69 @@
+.meta-icons {
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+    .icon {
+      width: 35px;
+      height: 100%;
+    }
+  }
+  .meta-icons__esu-toggle {
+    font-family: "GT-Walsheim-Regular",helvetica,arial,sans-serif;
+  }
+  .meta-icons__login,
+  .meta-icons__magnify,
+  .meta-icons__esu-toggle {
+    width: 32px;
+    height: 67px;
+    @media screen and (min-width: 740px) {
+      width: 52px;
+    }
+    @media screen and (min-width: 1150px) {
+      height: 72px;
+      width: 32px;
+    }
+    &.active {
+      background-color: #f9f9f9;
+    }
+    &:focus {
+      outline: none; // Accessibility !
+    }
+    span {
+      display: none;
+    }
+    .icon {
+      margin: 20px 4px;
+      fill: $colour-gainsboro-grey;
+      transition-property: fill;
+      transition-duration:150ms;
+      @media screen and (min-width: 740px) {
+        margin: 14px 4px;
+        width: 35px;
+        height: 35px;
+      }
+      @media screen and (min-width: 1150px) {
+        width: 20px;
+        height: 21px;
+        margin: 26px 5px;
+      }
+    }
+    &:hover,
+    &:focus,
+    &:active {
+      .icon {
+        fill: $colour-black;
+      }
+    }
+  }
+}
+
+.header__inner-wrapper .block-cr-meta-icons {
+  width: 105px;
+  height: 66px;
+
+  @media screen and (min-width: 740px) {
+    width: 165px;
+  }
+  @media (min-width: 1150px) {
+    width: 120px;
+  }
+}

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

@@ -0,0 +1,69 @@
+// Meta nav
+.feature-nav__items {
+  margin-top: 0;
+  margin-left: 10px;
+  li {
+    padding: 26px 0;
+    margin: 0 5px;
+    &:nth-child(n+4) {
+      display:none;
+    }
+    .menu--level-1 {
+      display: none;
+    }
+  }
+}
+.feature-nav__icons {
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+  }
+}
+
+.main-nav__wrapper.main-nav--feature__wrapper .main-nav--feature__featured-items li {
+  @media screen and (min-width: 1150px) {
+    padding: 26px 0;
+    margin: 0 5px;
+  }
+}
+
+.main-nav__wrapper.main-nav--feature__wrapper {
+   @media screen and (min-width: 1150px) {
+      width: 100%;
+    }
+  
+  .feature-nav.main-nav--feature__inner-wrapper {
+    @media screen and (min-width: 1150px) {
+      height: 100%;
+    }
+  }
+
+  .main-nav--feature__featured-items {
+    @media screen and (min-width: 1150px) {
+      margin-top: 0;
+      height: 73px;
+    }
+  }
+  .c-hamburger.main-nav-toggle .c-hamburger__text {
+    @media screen and (min-width: 740px) {
+      top: 22px;
+    }
+    @media screen and (min-width: 1150px) {
+      top: 25px;
+    }
+  }
+}
+
+.main-nav__icons.main-nav__burger.feature-nav__icons.feature-nav__burger {
+  height: 66px;
+
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+  }
+}
+
+
+.main-nav__wrapper.main-nav--feature__wrapper .main-nav__items.main-nav--feature__items.menu-open {
+  @media (min-width: 1150px) {
+    top: 76px;
+  }
+}

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

@@ -0,0 +1,37 @@
+// Burger menu
+.c-hamburger {
+  width: 60px;
+  height: 67px;
+  @media screen and (min-width: 740px) {
+    text-indent: 0;
+    width: 125px;
+  }
+  @media screen and (min-width: 1150px) {
+    height: 72px;
+  }
+  span {
+    top: 31px;
+    right: 15px;
+    height: 4px;
+    width: 30px;
+    &:before,
+    &:after {
+      height: 4px;
+    }
+    &:before {
+      top: -4px -6px;
+    }
+    &:after {
+      bottom: -4px -6px;
+    }
+    @media (min-width: 1150px) {
+      right: 20px;
+      top: 35px;
+    }
+  }
+}
+// Remove fonts from campaign
+.c-hamburger__text {
+  font-family: "GT-Walsheim-Regular",helvetica,arial,sans-serif;
+  top: 25px;
+}