@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/base/components/teaser-block/_teaser-block.scss

@@ -0,0 +1,156 @@
+
+.teaser-block {
+  position: relative;
+  overflow: hidden;
+  height: 450px;
+}
+.teaser-block__link {
+  text-decoration: none;
+}
+.teaser-block__cta {
+  display: block;
+  clear: both;
+}
+.teaser-block__image {
+  width: 100%;
+  height: 50%;
+  background-position: center center;
+  @include breakpoint($screen-md) {
+    position: relative;
+    overflow: hidden;
+    margin-bottom: 0;
+    .block-content--view-mode-cw-s &,
+    .block-content--view-mode-cw-m & {
+      height: 45%;
+    }
+    .block-content--view-mode-cw-mp & {
+      height: 55%;
+      float: right;
+    }
+    .block-content--view-mode-cw-l & {
+      width: 65%;
+      height: 450px;
+      float: right;
+    }
+  }
+  @include breakpoint($screen-lg) {
+    .block-content--view-mode-cw-s &,
+    .block-content--view-mode-cw-m & {
+      height: 50%;
+    }
+    .block-content--view-mode-cw-mp & {
+      width: 60%;
+      height: 450px;
+    }
+    .block-content--view-mode-cw-l & {
+      width: 70%;
+      height: 450px;
+    }
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    margin-bottom: -5px;
+    object-fit: cover;
+    .no-objectfit & {
+      position: absolute;
+      top: -100%;
+      right: -100%;
+      bottom: -100%;
+      left: -100%;
+      overflow: hidden;
+      width: auto;
+      max-width: none;
+      height: 100%!important;
+      max-height: none;
+      margin: auto;
+    }
+  }
+}
+.teaser-block__body {
+  -webkit-align-content: center;
+  align-content: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  * { // fix ie11 bug flex not wrapping
+    width: 100%;
+  }
+  .teaser-block__cta {
+    .btn {
+      width: auto;
+    }
+  }
+  @include breakpoint($screen-md) {
+    .block-content--view-mode-cw-s &,
+    .block-content--view-mode-cw-m & {
+      height: 55%;
+    }
+    .block-content--view-mode-cw-mp & {
+      height: 45%;
+    }
+    .block-content--view-mode-cw-mp &,
+    .block-content--view-mode-cw-l & {
+      float: right;
+    }
+    .block-content--view-mode-cw-l & {
+      width: 35%;
+      height: 450px;
+    }
+  }
+  @include breakpoint($screen-lg) {
+    .block-content--view-mode-cw-s &,
+    .block-content--view-mode-cw-m & {
+      height: 50%;
+    }
+    .block-content--view-mode-cw-mp & {
+      width: 40%;
+      height: 450px;
+    }
+    .block-content--view-mode-cw-l & {
+      width: 30%;
+      height: 450px;
+    }
+  }
+  width: 100%;
+  height: 50%;
+  padding: calc(4 * #{gutter()});
+  text-align: center;
+  .no-flexbox & {
+    padding-top: 25px;
+  }
+  p:last-child,
+  p:first-child:last-child {
+    margin-bottom: 15px;
+  }
+}
+.teaser-block--bg-image {
+  .teaser-block__body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 10 * 1.25%);
+    height: 100%;
+    margin: 0 calc(5 * 1.25%);
+    background-color: transparent;
+    .no-flexbox & {
+      padding-top: 100px;
+    }
+  }
+  .teaser-block__image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.teaser-block--no-image {
+  .teaser-block__body {
+    height: 100%;
+  }
+}

package/src/sass/base/components/teaser-block/teaser-block.twig

@@ -0,0 +1,17 @@
+<div class="cw-region">
+  <article class="{{ modifier_class }} 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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>

package/src/sass/base/components/teaser-block/teaser-row.twig

@@ -0,0 +1,128 @@
+<div class="cw-region">
+  <article class="block-content--view-mode-cw-l teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>
+<div class="cw-region">
+  <article class="block-content--view-mode-cw-m teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="block-content--view-mode-cw-m teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>
+<div class="cw-region">
+  <article class="block-content--view-mode-cw-s teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="block-content--view-mode-cw-s teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="block-content--view-mode-cw-s teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>
+<div class="cw-region">
+  <article class="block-content--view-mode-cw-s teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+  <article class="block-content--view-mode-cw-mp teaser-block {{ modifier_class }} clearfix">
+    <a class="teaser-block__link" href="http://shop.rednoseday.com/order-a-fundraising-kit">
+      <div class="teaser-block__image">
+        <img src="/profiles/contrib/cr/themes/custom/campaign_base/images/styleguide-images/original.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--black">Pre-order a Kit</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </article>
+</div>

package/src/sass/base/components/tooltips/_tooltips.scss

@@ -0,0 +1,46 @@
+
+// Tooltips provided by jQuery UI Tooltip js plugin
+.ui-tooltip.ui-tooltip--nav {
+  background-color: #333333;
+  color: #fff;
+  padding: 20px 10px;
+  box-shadow: none;
+  @include border-radius(16px);
+  @include opacity(1);
+  border: 0;
+  margin: 0;
+  width: 110px;
+
+  // Override the JS so we can keep the position within CSS
+  top: 157px !important;
+
+  //Reposition this to take our admin menu into account
+  .user-logged-in & {
+    top: 236px !important;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    margin-left: -15px;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    border-bottom-color: #333333;
+  }
+
+  .ui-tooltip-content {
+    text-align: center;
+    font-family: $font-regular;
+    font-size: 14px;
+    line-height: 21px;
+    color: white;
+  }
+}
+
+// Hide tooltips when we're scrolling a stickynav to avoid positioning issues and terrible UX
+header[role=banner].sticky-nav__header.scrolling ~ .ui-tooltip {
+  display: none !important;
+}

package/src/sass/base/components/typography/_typography.scss

@@ -0,0 +1,99 @@
+@import "../../_core.scss";
+
+h1 {
+  margin: 0 0 20px;
+  color: $colour-black;
+  font-family: $font-bold;
+  @include font-size($h1-font-size);
+  &.font--font-black {
+    font-family: $font-black;
+    @include font-size($h1-black-font-size);
+  }
+  &.font--xlarge {
+    @include font-size($h1-xlarge-font-size);
+  }
+  &.font--black-shadow {
+    text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.25);
+    font-family: $font-black;
+    @include font-size($h1-blackshadow-font-size);
+    @include breakpoint($screen-md) {
+      text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.25);
+    }
+    @include breakpoint($screen-lg) {
+      text-shadow: -7px 7px 0 rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+h2,
+h3,
+h4,
+h5,
+p,
+.link {
+  color: $colour-black;
+}
+p,
+h2,
+h3,
+h4 {
+  clear: both;
+  margin: 0 0 15px;
+}
+p:last-child,
+p:first-child:last-child {
+  margin-bottom: 5px;
+}
+h2 {
+  font-family: $font-medium;
+  @include font-size($h2-font-size);
+}
+h3 {
+  font-family: $font-regular;
+  @include font-size($h3-font-size);
+}
+h4 {
+  font-family: $font-regular;
+  @include font-size($h4-font-size);
+}
+
+p {
+  padding: 0;
+  font-family: $body-font;
+  @include font-size($p-font-size);
+  &.font--xlarge {
+    margin-bottom: 20px;
+    @include font-size($p-xlarge-font-size);
+  }
+  &.font--large {
+    @include font-size($p-large-font-size);
+  }
+  &.font--small {
+    @include font-size($p-small-font-size);
+  }
+  &.font--xsmall {
+    @include font-size($p-xsmall-font-size);
+  }
+}
+span.font--font-black {
+  font-family: $font-black;
+}
+
+strong {
+  font-family: $font-bold;
+}
+
+@for $color from 1 to (length($colorList)+1) {
+  @include font-variation(nth($colorList, $color));
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+span {
+  @for $color from 1 to (length($colorList)+1) {
+    @include font-variation-inline(nth($colorList, $color));
+  }
+}

package/src/sass/base/components/typography/typography.twig

@@ -0,0 +1,25 @@
+<p>The Comic Relief font is Proxima Nova. This used for headings and body copy in a number of weights (Bold, Semibold and Regular).</p>
+<p>There are a range of heading sizes from H1 to H5. These sizes are based on a typographic scale, with the base of 18px.</p>
+<p>H1.large: 83px</p>
+<h1>This is fun, right?</h1>
+<p>H1 59px</p>
+<h1 class="font--large">This is fun, right?</h1>
+<p>H2</p>
+<h2>This is fun, right?</h2>
+<p>H3</p>
+<h3>This is fun, right?</h3>
+<p>H4</p>
+<h4>This is fun, right?</h4>
+<p>H5</p>
+<h5>This is fun, right?</h5>
+<br/>
+<br/>
+<br/>
+<h4>Paragraphs</h4>
+<p>There are a range of heading sizes from H1 to H5. These are used</p>
+<p>18 px</p>
+<p>This is fun, right?</p>
+<p>18 px</p>
+<p>This is fun, right?</p>
+<p>18 px</p>
+<p>This is fun, right?</p>

package/src/sass/base/components/views/_views.scss

@@ -0,0 +1,11 @@
+// views layout
+
+.view-content {
+  .views-row {
+    @include span(12);
+    margin-bottom: calc(2 * #{gutter()});
+    @include breakpoint($screen-md) {
+      @include span(4);
+    }
+  }
+}