@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/sr/2018/components/news-article/_news-article.scss

@@ -0,0 +1,118 @@
+  .cr-article {
+    background-color: $colour-white;
+  }
+
+  .cr-article__header {
+    text-align: left;
+
+    .cr-article__title {
+      @include font-size($h1-small-font-size);
+      font-family: $font-black--sr18;
+      font-weight: 900;
+      color: $colour-black;
+      margin-bottom: 40px;
+      margin-left:20px;
+      margin-right:20px;
+
+      @include breakpoint($screen-md) {
+        margin-left: 30px;
+        margin-right: 30px;
+      }
+
+      @include breakpoint($screen-lg) {
+        @include span(12);
+      }
+
+    }
+
+    .cr-article__date {
+      @include span(12 no-gutters);
+      font-family: $font-regular--sr18;
+      @include font-size($p-xxsmall-font-size);
+      margin-bottom: 10px;
+      color: $colour-black;
+      text-transform: capitalize;
+      text-indent: 30px;
+
+      @include breakpoint($screen-md) {
+        @include span(6);
+        @include font-size($p-large-font-size);
+        margin-bottom: 15px;
+      }
+
+      @include breakpoint($screen-lg) {
+        text-indent: 0;
+      }
+    }
+
+    .cr-article__social-links  {
+      @include span(12 no-gutters);
+      text-align: right;
+      text-indent: 30px;
+
+      @include breakpoint($screen-md) {
+        @include span(6);
+        text-indent: 0;
+        margin-bottom: 15px;
+      }
+    }
+
+    .social-links-label {
+      @include span(4);
+      @include font-size($p-xxsmall-font-size);
+      text-align: left;
+      margin-left: 0;
+      margin-right: 0;
+
+      @include breakpoint($screen-md) {
+        @include span(5);
+        @include font-size($p-large-font-size);
+        margin-top: -12px;
+      }
+
+      span {
+        color: $colour-black;
+      }
+    }
+
+    .social-links {
+      @include span(8);
+      margin-left: -5%;
+      text-align: left;
+      color: $colour-black;
+
+      @include breakpoint($screen-md) {
+        @include span(7 no-gutters);
+      }
+
+      li {
+        a {
+          display: block;
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .cr-article__image, .cr-article__video {
+      clear: both;
+      @include breakpoint($screen-lg) {
+        @include susy-clearfix; // temporary fix until clearfix mixin is fixed
+      }
+    }
+
+    .cr-article__caption {
+      padding:25px 20px 20px;
+      margin-top: -40px;
+      font-family: $font-regular--sr18;
+      font-weight: 500;
+      background-color: $colour-white;
+      color: $colour-black;
+      border-bottom: 1px solid $colour-grey;
+      text-align: left;
+
+      @include breakpoint($screen-lg) {
+        padding-left:0;
+        padding-right:0;
+      }
+     }
+  }

package/src/sass/themes/sr/2018/components/news-article/news-article.twig

@@ -0,0 +1,29 @@
+<article class="cr-article">
+  <div class="cr-article__content-wrapper">
+	  <header class="node node--type-article node--view-mode-full cr-article__header cr-article__header--no-caption">
+	    <h1 class="cr-article__title">Best Auction Ever - raising money for Red Nose Day</h1>
+	    <span class="cr-article__date">
+	      <div class="field__label visually-hidden">Display date</div>
+	      Posted: 12/10/2017
+	      </span>
+        <div class="cr-article__social-links">
+  	      <div class="social-links-label">
+  	        <span>Share with:</span>
+  	      </div>
+  	      <div class="item-list"><ul class="social-links"><li><a href="http://twitter.com/home?status=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Share on Twitter" class="social-link twitter-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-twitter"></use></svg></a></li><li>
+            <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.rednoseday.com%2Fnews-tv-and-events%2Fnews%2Fbest-auction-ever-raising-money-red-nose-day&amp;amp;title=Best+Auction+Ever+-+raising+money+for+Red+Nose+Day" title="Share on Facebook" class="social-link facebook-social-link social-link-popup SocialPopup-processed"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-link-facebook"></use></svg></a></li></ul></div>
+  	    </div>
+	      	<div class="cr-article__image">
+	        <picture>
+				    <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg">
+				    <source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg">
+				    <source srcset="kss-assets/images/16-9-img.jpg" media="(min-width: 0px)" type="image/jpeg">
+				  	<img srcset="kss-assets/images/16-9-img.jpg" alt="Africa" typeof="foaf:Image">
+				  </picture>
+	    	</div>
+        <figcaption class="cr-article__caption">
+            Katy enjoys a quick break on her way to make her first delivery - photo credit
+        </figcaption>
+	  </header>
+  </div>
+</article>

package/src/sass/themes/sr/2018/components/news-teaser/_news-teaser.scss

@@ -0,0 +1,8 @@
+.article-teaser {
+  .article-teaser__content-wrapper {
+    .article-teaser__date,
+    h2 {
+      color: $colour-dark-blue;
+    }
+  } 
+}

package/src/sass/themes/sr/2018/components/promo-header/_promo-header.scss

@@ -0,0 +1,61 @@
+.promo-header {
+  @include breakpoint($screen-md-max) {
+    min-height: 500px;
+  }
+}
+
+.promo-header__content {
+  .promo-header--default:not(.promo-header--video):not(.promo-header--no-image) & {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    width: 100%;
+    transform: translateY(-50%);
+
+    .promo-header__content-inner {
+      margin: 0 auto;
+
+      h1 {
+        // Remove the stock h1 margin-bottom to keep it properly vertically aligned
+        margin-bottom: 0;
+        text-shadow: 0 0 50px rgba(0,0,0,0.50);
+      }
+    }
+  }
+
+  p {
+    .promo-header--feature & {
+      color: $colour-dark-blue-lighter;
+    }
+  }
+}
+
+/* As we can't maintain the ratio, at least set a height on 
+ * browsers that can't display objectfit our promo feature image */
+.promo-header__bg-image.compat-object-fit {
+  min-height: 300px;
+
+  @include breakpoint($screen-md) {
+    min-height: 400px;
+  }
+
+  @include breakpoint($screen-lg) {
+    min-height: 500px;
+  }
+}
+
+/* Override offsets from the base theme */
+header[role=banner].sticky-nav__header ~ main .promo-header--default:not(.promo-header--video):not(.promo-header--no-image)
+ .promo-header__content .promo-header__content-inner {
+  padding: 20px;
+
+  @include breakpoint($screen-md) {
+    margin-top: 0;
+    padding: 0;
+  }
+
+  @include breakpoint($screen-lg) {
+    margin-top: 0;
+  }
+}

package/src/sass/themes/sr/2018/components/search/_search-block.scss

@@ -0,0 +1,177 @@
+.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-dark-blue;
+
+    @include breakpoint($screen-md) {
+      // offset from right width of icon buttons and hamburger button
+      right: calc(0px + 65px);
+      width: 380px;
+    }
+    @include breakpoint($desktop-nav-breakpoint) {
+      // offset from right width of icon buttons and margin meta-icons
+      right: calc(0px + 5px);
+    }
+  }
+  .search-block__message {
+    margin: 0;
+    width: 100%;
+    p {
+      margin: 0 auto 20px;
+      width: 60%;
+      font-family: $font-bold--sr18;
+      font-weight: 700;
+      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--sr18;
+    @include font-size($h3-font-size);
+    color: $colour-dark-blue;
+  }
+  .form-actions {
+    margin: 0;
+    height: 50px;
+    width: 50px;
+    background-color: $colour-ruby;
+  }
+  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: 111px;
+    width: 46px;
+    height: $sm-nav-height;
+    background-color: $colour-dark-blue;
+    @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: 51px;
+      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/sr/2018/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/sr/2018/components/search/search.twig

@@ -0,0 +1,21 @@
+<div class="views-exposed-form contextual-region block search-block show" data-drupal-selector="views-exposed-form-search-page-1" id="block-exposedformsearchpage-1">
+  <div class="search-block__wrapper">
+    <div class="search-block__message">
+      <p>So, what are you looking for?</p>
+    </div>
+    <div class="search-block__form">
+      <form action="/web/search" method="get" id="views-exposed-form-search-page-1" accept-charset="UTF-8" data-drupal-form-fields="edit-text">
+        <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-text form-item-text">
+          <label for="edit-text">Search</label>
+          <input data-drupal-selector="edit-text" type="text" id="edit-text" name="text" value="" size="30" maxlength="128" class="form-text">
+        </div>
+        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit-search" type="submit" id="edit-submit-search" value="Apply" class="button js-form-submit form-submit"></div>
+      </form>
+    </div>
+  </div>
+  <a role="button" class="close-button" href="#" aria-label="close search form">
+    <svg class="icon" focusable="false" tabindex="-1">
+      <use xlink:href="#close-cross"></use>
+    </svg>
+  </a>
+</div>

package/src/sass/themes/sr/2018/components/search-results/_search-results.scss

@@ -0,0 +1,127 @@
+.path-search {
+  background-color: $colour-white;
+  .search-block {
+    position: relative;
+    top: 0;
+    right: 0;
+    left: 0;
+    margin: 0;
+    padding-top: 0;
+    width: 100%;
+    max-width: 100%;
+    z-index: 0;
+    @include gradient-background($colour-purple, $colour-ruby);
+
+    .search-block__wrapper {
+      position: relative;
+      right: 0;
+      padding: 150px 0 50px;
+      width: 100%;
+      background-color: transparent;
+    }
+
+    .search-block__message {
+      display: none;
+    }
+    .search-block__form {
+      margin: 0 auto;
+      width: 100%;
+      padding: 0 calc((4 * 1.25%));
+      @include breakpoint($screen-md) {
+        padding: 0 calc((2 * 1.25%));
+      }
+      @include breakpoint($screen-lg) {
+        width: span(8);
+        padding: 0 calc((0.5 * 1.25%));
+      }
+      form {
+        border-bottom: $colour-white 1px solid ;
+      }
+    }
+    .form-item {
+      @include span(11);
+      margin-top: 0;
+      margin-left: 0;
+      margin-bottom: 5px;
+      padding: 0;
+      background-color: transparent;
+    }
+    input[type=text] {
+      height: 50px;
+      padding: 0;
+      font-family: $font-bold--sr18;
+      font-weight: 700;
+      @include font-size($p-large-font-size);
+      color: $colour-white;
+      background-color: transparent;
+      @include breakpoint($screen-md){
+        @include font-size($p-xxlarge-font-size);
+      }
+    }
+    .form-actions {
+      width: auto;
+      margin: 0;
+      float: right;
+      background-color: transparent;
+    }
+    input[type=submit] {
+      height: 50px;
+      width: 30px;
+      @include breakpoint($screen-md){
+        width: 50px;
+        mask-size: 36px;
+        -webkit-mask-size: 36px;
+      }
+      .no-cssmask & {
+        @include breakpoint($screen-md) {
+          background-size: 36px;
+        }
+      }
+    }
+  }
+  &.cc-banner--visible {
+    .search-block {
+      top: 0;
+      @include breakpoint($screen-md) {
+        top: 0;
+      }
+    }
+  }
+  .search-result__content {
+    @include font-size($p-font-size);
+    h3 {
+      @include font-size($p-large-font-size);
+      @include breakpoint($screen-md) {
+        @include font-size($p-xxlarge-font-size);
+      }
+    }
+    & .search-result__tag {
+      color: $colour-ruby;
+    }
+    & .search-result__published-date {
+      // decrease line height for smaller border
+      line-height: 16px;
+      color: $colour-ruby;
+      @include breakpoint($screen-md) {
+        border-left: 2px solid $colour-ruby;
+      }
+    }
+    a {
+      color: $colour-dark-blue;
+    }
+    .search-result__body {
+      color: $colour-dark-blue-lighter;
+    }
+  }
+}
+// IE 
+.no-object-fit {
+  .path-search.cc-banner--visible {
+    .search-block {
+      top: 0;
+      @include breakpoint($screen-md) {
+        top: 0;
+      }
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/single-msg/_single-msg.scss

@@ -0,0 +1,59 @@
+.single-msg.paragraph {
+
+  @include breakpoint($screen-md) {
+    .single-msg__outer-wrapper {
+      display: -webkit-flex;
+      display: flex;
+
+      .single-msg__copy_wrapper { 
+        // Reset absolute position to give the copy
+        // height that'll allow overflow
+        position: relative;
+        top: auto;
+        right: auto;
+        height: auto;
+        margin-top: 0;
+      } 
+    }
+
+    // Change flex direction for left-aligned copy version
+    &.single-msg--copy-left {
+      .single-msg__outer-wrapper {
+        -webkit-flex-direction: row-reverse;
+        flex-direction: row-reverse; 
+      }
+    }
+
+    // Reset these tweaks for our Feature versions
+    &.single-msg--feature-copy-right,
+    &.single-msg--feature-copy-left {
+      .single-msg__outer-wrapper {
+        display: block;
+      }
+    }
+  }
+
+  @include breakpoint($screen-lg) {
+    &.single-msg--feature-copy-right,
+    &.single-msg--feature-copy-left {
+      .single-msg__outer-wrapper { 
+        .single-msg__copy_wrapper {
+          position: absolute;
+          top: 0;
+          right: 0;
+          margin: 90px gutter() 0 0;
+          height: calc(100% - (60px * 3));
+          width: calc( #{span(5)} +  ( #{gutter()} * 4) );
+        }
+      }
+    }
+
+    &.single-msg--feature-copy-left {
+      .single-msg__outer-wrapper { 
+        .single-msg__copy_wrapper {
+          margin: 90px 0 0 gutter();
+        }
+      }
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/teaser-block/_teaser-block.scss

@@ -0,0 +1,60 @@
+.teaser-block__body {
+  padding: 20px;
+  text-align: initial;
+}
+
+.teaser-block--bg-image {
+  .teaser-block__image:after {
+    width: 100%;
+    height: 100%;
+    content: "";
+    position: absolute;
+    top: 0;
+    left:0;
+    transition: background-color 0.2s linear;
+    // Set this up as totally transparent to fade-in on hover
+    background-color: rgba($colour-dark-blue, 0);
+  }
+
+  .teaser-block__body {
+    /* Increase padding-top to extend gradient 'reach';
+     * provides better accessibility against the first line of text */
+    padding: 100px 30px 40px;
+    margin: 0;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    top: auto;
+    height: auto;
+    background-image: linear-gradient(transparent, $colour-dark-blue);
+
+    /* Ensure the last element is flush to the padding of the block */
+    .cr-body {
+      height: auto;
+      
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    /* Re-add our margin to the CTA if present, so the above last-child doesn't
+      sit flush with it */
+    .teaser-block__cta {
+      .btn { 
+        margin-top: 20px;
+      }
+      .link { 
+        display: inline-block;
+        margin-top: 15px;
+        width: auto;
+      }
+    }
+  }
+
+  &:hover,
+  .teaser-block__link:focus  {
+    .teaser-block__image:after {
+      background-color: rgba($colour-dark-blue, 0.5);
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/tooltips/_tooltips.scss

@@ -0,0 +1,9 @@
+.ui-tooltip.ui-tooltip--nav {
+  background-color: $colour-dark-blue;
+  // place tooltip behind open esu/search dropdown because colour clash
+  z-index: 99;
+  &:before {
+    // important flag needed to override colour
+    border-bottom-color: $colour-dark-blue !important; 
+  }
+}