@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/themes/cr/2019/components/full-height-single-image/full-height-single-image.twig

@@ -0,0 +1,12 @@
+<section class="paragraph--full-height-single-image {{modifier_class}} bg--purple">
+    <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/4-3-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
+        <img src="kss-assets/images/16-9-img.jpg" alt="boring" typeof="foaf:Image" />
+    </picture>
+    <div class="fhsi__text-wrapper text-align-center">
+        <h1>FHSI - 4:3 img on mobile</h1>
+        <p><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Button</a></p>
+    </div>
+</section>

package/src/sass/themes/cr/2019/components/full-height-single-image-single-copy/_full-height-single-image-single-copy.scss

@@ -0,0 +1,72 @@
+.paragraph--full-height-single-image-single-copy {
+  width: 100%;
+
+  .fhsisc {
+    &__image-wrapper {
+      img {
+        display: block;
+        width: 100%;
+      }
+    }
+    &__text-wrapper {
+      padding: 15vw 5vw;
+
+      .fhsisc__text {
+        height: auto;
+      }
+    }
+
+    /* If this component is acting as our header */
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+  
+  @include breakpoint($screen-md) {
+    display: flex;
+    .fhsisc {
+      &__image-wrapper,
+      &__text-wrapper {
+        display: inline-block;
+        vertical-align: top;
+        width: 50%;
+      }
+      &__image-wrapper {
+        position: relative;
+        overflow: hidden;
+        height: inherit;
+        // position image absolutely so height of section will be based on the text
+        img {
+          @include no-objectfit; // IE11
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+
+        }
+      }
+      // text should be at least the viewheight, but if the text doesn't fit increase height automatically
+      &__text-wrapper {
+        padding: 5vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 100vh;
+      }
+
+      header & {
+        &__text-wrapper {
+          padding: 5vw;
+        }
+      }
+    }
+
+    &.paragraph--full-height-single-image-single-copy--image-right {
+      flex-basis: auto; // IE10
+      flex-direction: row-reverse;
+      -ms-flex-direction: row-reverse; // IE10
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/full-height-single-image-single-copy/full-height-single-image-single-copy.twig

@@ -0,0 +1,14 @@
+<section class="paragraph--full-height-single-image-single-copy {{modifier_class}} bg--coral">
+  <div class="fhsisc__image-wrapper objectfit">
+     <img src="kss-assets/images/spice_3-4_2x.jpg">
+  </div>
+  <div class="fhsisc__text-wrapper">
+    <div class="fhsisc__text cr-body">
+      <h1 class="font--white text-align-center">
+        PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
+      </h1>
+      <p class="text-align-center">On website image will be 4:3 on mobile</p>
+      <p class="text-align-center"><a class="btn btn--light-coral" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
+    </div> 
+  </div>
+</section>

package/src/sass/themes/cr/2019/components/full-height-single-image-triple-copy/_full-height-single-image-triple-copy.scss

@@ -0,0 +1,158 @@
+.paragraph--full-height-sing-img-triple-copy {
+  width: 100%;
+  height: auto;
+
+  .fhsitc {
+    &__image-text-wrapper,
+    &__text-1,
+    &__text-2,
+    &__text-3,
+    &__image,
+    &__text-wrapper {
+      position: relative;
+      height: auto;
+      width: 100%;
+    } 
+
+    &__text-wrapper {
+      padding: 15vw 5vw;
+    }
+
+    header & {
+      &__text-wrapper {
+        padding: 10vw 5vw;
+      }
+    }
+  }
+
+  .fhsitc__text-1,
+  .fhsitc__text-2 {
+    padding: 15vw 5vw;
+    
+    img {
+      width: 50%;
+      margin: 0 auto;
+      display: block;
+    }
+    
+    .cr-body, p {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .fhsitc__image img {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+    // Medium screen
+    @include breakpoint($screen-md) {
+      display: flex;
+      flex-direction: row;
+      min-height: 100vh;
+      
+        // Inner containers
+        .fhsitc__text-wrapper,
+        .fhsitc__image-text-wrapper {
+          min-height: 100vh;
+          width: 50%;
+          float: left;
+        }
+
+        .fhsitc__image-text-wrapper {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .fhsitc__text-wrapper {
+          padding: 5vw;
+          display: flex;
+          -webkit-box-align: center;
+          -webkit-align-items: center;
+          -ms-flex-align: center;
+          align-items: center;
+        }
+
+        .fhsitc__image {
+          min-height: 50vh;
+          position: relative;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+
+        .fhsitc__text-1,
+        .fhsitc__text-2 {
+          min-height: 25vh;
+          width: 100%;
+          padding: 2vh 10vw;
+          flex-grow: 1;
+          position: relative;
+
+          img {
+            position: absolute;
+            top: 8%;
+            left: 50%;
+            height: 84%;
+            width: auto;
+            transform: translateX(-50%);
+          }
+        }
+
+        .fhsitc__text-3 {
+          width: calc(100% - 5vw);
+        }
+
+        header & {
+          .fhsitc__text-wrapper {
+            padding: 5vw;
+          }
+        }
+      }
+
+      &--image-right {
+        display: flex;
+        flex-direction: column;
+
+        .fhsitc__text-wrapper {
+          order: 2;
+        }
+
+        .fhsitc__image-text-wrapper {
+          order: 1;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .fhsitc {
+          &__image-text-wrapper,
+          &__text-1,
+          &__text-2,
+          &__text-3,
+          &__image,
+          &__text-wrapper {
+            flex-shrink: 0;
+          }
+        }
+
+        @include breakpoint($screen-md) {
+          flex-direction: row;
+
+          .fhsitc__text-wrapper {
+            order: 1;
+          }
+          
+          .fhsitc__image-text-wrapper {
+            order: 2;
+          }
+        }
+      }
+    }

package/src/sass/themes/cr/2019/components/full-height-single-image-triple-copy/full-height-single-image-triple-copy.twig

@@ -0,0 +1,24 @@
+<section class="paragraph--full-height-sing-img-triple-copy {{modifier_class}} bg--purple">
+    <div class="fhsitc__image-text-wrapper">
+        <div class="fhsitc__text-1 bg--red "> 
+            <img src="kss-assets/images/example-emoji.png">
+        </div>
+        <div class="fhsitc__image bg--yellow">
+         <img src="kss-assets/images/london4-3.jpg">
+         </div>
+        <div class="bg--green fhsitc__text-2 "> 
+            <img src="kss-assets/images/example-emoji.png">
+        </div>
+    </div>
+    <div class="bg--teal fhsitc__text-wrapper">
+        <div class="fhsitc__text-3">
+        <h1 class="text-align-center"><strong>PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</strong></h1>
+
+<p class="text-align-center">28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
+
+<p class="text-align-center">Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, </p>
+
+<p class="text-align-center"><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
+         </div> 
+    </div>
+</section>

package/src/sass/themes/cr/2019/components/grant-page/_grant-page.scss

@@ -0,0 +1,18 @@
+.grant-page.cards {
+  @include breakpoint($screen-md) {
+    padding-bottom: 30px;
+    padding-top: 60px;
+
+    .card .card__content-wrapper {
+      padding: 15px;
+    }
+  }
+}
+
+.grant-page.paragraph--full-height-single-image {
+  img {
+    @include breakpoint($screen-md) {
+      opacity: 0.5;
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/highlight/_highlight.scss

@@ -0,0 +1,38 @@
+
+.highlight {
+  padding: 7px 4px 1px;
+  letter-spacing: 0.9px;
+  text-transform: uppercase;
+  border: 4px solid $colour-black;
+  font-weight: bold;
+
+  // Target Highlights wrapped in *or* containing strong tags
+  strong &,
+  strong {
+    padding: 3px 6px 2px;
+  }
+}
+
+/* Ensure we're overriding the general 
+'white/black, dark/light' font-bg rules
+for this edgecase */
+.highlight--purple {
+  color: $colour-dark-purple !important;
+  border: 4px solid $colour-dark-purple;
+}
+.highlight--royal-blue {
+  color: $colour-dark-blue !important;
+  border: 4px solid $colour-dark-blue;
+}
+.highlight--red {
+  color: $colour-red !important;
+  border: 4px solid $colour-red;
+}
+.highlight--mint-green {
+  color: $colour-teal !important;
+  border: 4px solid $colour-teal;
+}
+.highlight--white {
+  color: $colour-white !important;
+  border: 4px solid $colour-white;
+}

package/src/sass/themes/cr/2019/components/highlight/highlight.twig

@@ -0,0 +1 @@
+<p><span class="highlight {{modifier_class}}">Highlight class</span> - Adds border around text (used for the years on Timeline page).</p>

package/src/sass/themes/cr/2019/components/inline-social-icons/_inline-social-icons.scss

@@ -0,0 +1,43 @@
+p.inline-icon {
+
+  @extend .text--label-small;
+  position: relative;
+  padding-left: 28px;
+
+  &:before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left:0;
+    width: 20px;
+    height: 20px;
+    background-size: 20px 20px;
+    background-color: none;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+
+  &--tw-light {
+    &:before {
+      background-image: url($image-path + "twitter-icon--light.svg");
+    }
+  }
+
+  &--ig-light {
+    &:before {
+      background-image: url($image-path + "ig-icon--light.svg");
+    }
+  }
+
+  &--tw-dark {
+    &:before {
+      background-image: url($image-path + "twitter-icon--dark.svg");
+    }
+  }
+
+  &--ig-dark {
+    &:before {
+      background-image: url($image-path + "ig-icon--dark.svg");
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/inline-social-icons/images/ig-icon--dark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 29 28.6" style="enable-background:new 0 0 29 28.6;" xml:space="preserve" fill="#2C0230">
+<path class="st0" d="M14.5,2.6c3.8,0,4.3,0,5.8,0.1c0.9,0,1.8,0.2,2.7,0.5c1.2,0.5,2.2,1.5,2.7,2.7c0.3,0.9,0.5,1.8,0.5,2.7
+	c0.1,1.5,0.1,2,0.1,5.8s0,4.3-0.1,5.8c0,0.9-0.2,1.8-0.5,2.7c-0.5,1.2-1.5,2.2-2.7,2.7c-0.9,0.3-1.8,0.5-2.7,0.5
+	c-1.5,0.1-2,0.1-5.8,0.1s-4.3,0-5.8-0.1c-0.9,0-1.8-0.2-2.7-0.5C4.8,25,3.8,24,3.3,22.8C3,21.9,2.8,21,2.8,20.1
+	c-0.1-1.5-0.1-2-0.1-5.8s0-4.3,0.1-5.8c0-0.9,0.2-1.8,0.5-2.7C3.8,4.6,4.8,3.6,6,3.1c0.9-0.3,1.8-0.5,2.7-0.5
+	C10.2,2.6,10.7,2.6,14.5,2.6 M14.5,0c-3.9,0-4.4,0-5.9,0.1c-1.2,0-2.4,0.3-3.5,0.7C3.1,1.5,1.6,3,0.9,4.9C0.5,6.1,0.2,7.2,0.2,8.4
+	c-0.1,1.5-0.1,2-0.1,5.9s0,4.4,0.1,5.9c0,1.2,0.3,2.4,0.7,3.5c0.7,1.9,2.3,3.4,4.2,4.2c1.1,0.4,2.3,0.6,3.5,0.7
+	c1.5,0.1,2,0.1,5.9,0.1s4.4,0,5.9-0.1c1.2,0,2.4-0.3,3.5-0.7c1.9-0.7,3.4-2.3,4.2-4.2c0.4-1.1,0.6-2.3,0.7-3.5
+	c0.1-1.5,0.1-2,0.1-5.9s0-4.4-0.1-5.9c0-1.2-0.3-2.4-0.7-3.5c-0.7-1.9-2.3-3.4-4.2-4.2c-1.1-0.4-2.3-0.6-3.5-0.7
+	C18.8,0,18.4,0,14.5,0z"/>
+<path class="st0" d="M14.5,7c-4.1,0-7.4,3.3-7.4,7.4s3.3,7.4,7.4,7.4s7.4-3.3,7.4-7.4S18.5,7,14.5,7C14.5,7,14.5,7,14.5,7z
+	 M14.5,19.1c-2.6,0-4.8-2.1-4.8-4.8c0-2.6,2.1-4.8,4.8-4.8c2.6,0,4.8,2.1,4.8,4.8c0,0,0,0,0,0l0,0C19.2,17,17.1,19.1,14.5,19.1
+	C14.5,19.1,14.5,19.1,14.5,19.1z"/>
+<circle class="st0" cx="22.1" cy="6.7" r="1.7"/>
+</svg>

package/src/sass/themes/cr/2019/components/inline-social-icons/images/ig-icon--light.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 29 28.6" style="enable-background:new 0 0 29 28.6;" xml:space="preserve" fill="#fff">
+<path class="st0" d="M14.5,2.6c3.8,0,4.3,0,5.8,0.1c0.9,0,1.8,0.2,2.7,0.5c1.2,0.5,2.2,1.5,2.7,2.7c0.3,0.9,0.5,1.8,0.5,2.7
+	c0.1,1.5,0.1,2,0.1,5.8s0,4.3-0.1,5.8c0,0.9-0.2,1.8-0.5,2.7c-0.5,1.2-1.5,2.2-2.7,2.7c-0.9,0.3-1.8,0.5-2.7,0.5
+	c-1.5,0.1-2,0.1-5.8,0.1s-4.3,0-5.8-0.1c-0.9,0-1.8-0.2-2.7-0.5C4.8,25,3.8,24,3.3,22.8C3,21.9,2.8,21,2.8,20.1
+	c-0.1-1.5-0.1-2-0.1-5.8s0-4.3,0.1-5.8c0-0.9,0.2-1.8,0.5-2.7C3.8,4.6,4.8,3.6,6,3.1c0.9-0.3,1.8-0.5,2.7-0.5
+	C10.2,2.6,10.7,2.6,14.5,2.6 M14.5,0c-3.9,0-4.4,0-5.9,0.1c-1.2,0-2.4,0.3-3.5,0.7C3.1,1.5,1.6,3,0.9,4.9C0.5,6.1,0.2,7.2,0.2,8.4
+	c-0.1,1.5-0.1,2-0.1,5.9s0,4.4,0.1,5.9c0,1.2,0.3,2.4,0.7,3.5c0.7,1.9,2.3,3.4,4.2,4.2c1.1,0.4,2.3,0.6,3.5,0.7
+	c1.5,0.1,2,0.1,5.9,0.1s4.4,0,5.9-0.1c1.2,0,2.4-0.3,3.5-0.7c1.9-0.7,3.4-2.3,4.2-4.2c0.4-1.1,0.6-2.3,0.7-3.5
+	c0.1-1.5,0.1-2,0.1-5.9s0-4.4-0.1-5.9c0-1.2-0.3-2.4-0.7-3.5c-0.7-1.9-2.3-3.4-4.2-4.2c-1.1-0.4-2.3-0.6-3.5-0.7
+	C18.8,0,18.4,0,14.5,0z"/>
+<path class="st0" d="M14.5,7c-4.1,0-7.4,3.3-7.4,7.4s3.3,7.4,7.4,7.4s7.4-3.3,7.4-7.4S18.5,7,14.5,7C14.5,7,14.5,7,14.5,7z
+	 M14.5,19.1c-2.6,0-4.8-2.1-4.8-4.8c0-2.6,2.1-4.8,4.8-4.8c2.6,0,4.8,2.1,4.8,4.8c0,0,0,0,0,0l0,0C19.2,17,17.1,19.1,14.5,19.1
+	C14.5,19.1,14.5,19.1,14.5,19.1z"/>
+<circle class="st0" cx="22.1" cy="6.7" r="1.7"/>
+</svg>

package/src/sass/themes/cr/2019/components/inline-social-icons/images/twitter-icon--dark.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="icon-twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 54 46.3" style="enable-background:new 0 0 54 46.3;" xml:space="preserve" fill="#2C0230">
+<path class="st0" d="M47.6,7.3c2.3-1.5,4.1-3.8,4.9-6.4c-2.2,1.4-4.5,2.3-7,2.8c-2-2.3-4.9-3.7-8-3.7c-6.3,0.2-11.2,5.4-11.1,11.7
+	c0,0.9,0.1,1.8,0.3,2.7c-9-0.5-17.4-5-22.8-12.2C2.8,3.9,2.2,6,2.2,8c0,3.8,1.8,7.5,4.9,9.7c-1.8-0.1-3.5-0.6-5-1.5v0.1
+	C2,21.8,5.7,26.6,11,27.9C10,28.1,9,28.3,8.1,28.3c-0.7,0-1.3-0.1-2-0.2c1.3,4.7,5.5,7.9,10.3,8.1c-3.9,3.2-8.7,5-13.8,5
+	c-0.9,0-1.8-0.1-2.6-0.2c5,3.4,10.9,5.2,17,5.2c20.4,0,31.5-17.8,31.5-33.2c0-0.5,0-1,0-1.5c2.2-1.7,4-3.7,5.5-6
+	C52,6.5,49.9,7.1,47.6,7.3L47.6,7.3z"/>
+</svg>

package/src/sass/themes/cr/2019/components/inline-social-icons/images/twitter-icon--light.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="icon-twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 54 46.3" style="enable-background:new 0 0 54 46.3;" xml:space="preserve" fill="#fff">
+<path class="st0" d="M47.6,7.3c2.3-1.5,4.1-3.8,4.9-6.4c-2.2,1.4-4.5,2.3-7,2.8c-2-2.3-4.9-3.7-8-3.7c-6.3,0.2-11.2,5.4-11.1,11.7
+	c0,0.9,0.1,1.8,0.3,2.7c-9-0.5-17.4-5-22.8-12.2C2.8,3.9,2.2,6,2.2,8c0,3.8,1.8,7.5,4.9,9.7c-1.8-0.1-3.5-0.6-5-1.5v0.1
+	C2,21.8,5.7,26.6,11,27.9C10,28.1,9,28.3,8.1,28.3c-0.7,0-1.3-0.1-2-0.2c1.3,4.7,5.5,7.9,10.3,8.1c-3.9,3.2-8.7,5-13.8,5
+	c-0.9,0-1.8-0.1-2.6-0.2c5,3.4,10.9,5.2,17,5.2c20.4,0,31.5-17.8,31.5-33.2c0-0.5,0-1,0-1.5c2.2-1.7,4-3.7,5.5-6
+	C52,6.5,49.9,7.1,47.6,7.3L47.6,7.3z"/>
+</svg>

package/src/sass/themes/cr/2019/components/inline-social-icons/inline-social-icons.twig

@@ -0,0 +1,21 @@
+<div class="bg--coral" style="padding: 10px;">
+  <p class="inline-icon inline-icon--ig-dark">@ComicRelief</p>
+  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
+</div>
+
+
+<div class="bg--dark-coral" style="padding: 10px;">
+  <p class="inline-icon inline-icon--ig-light">@ComicRelief</p>
+  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
+</div>
+
+<div class="bg--coral" style="padding: 10px;">
+  <p class="inline-icon inline-icon--tw-dark">@ComicRelief</p>
+  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
+</div>
+
+
+<div class="bg--dark-coral" style="padding: 10px;">
+  <p class="inline-icon inline-icon--tw-light">@ComicRelief</p>
+  <p>Some other copy can go here to illustrate alignment etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc etc</p>
+</div>

package/src/sass/themes/cr/2019/components/just-in-time-block/_just-in-time-block.scss

@@ -0,0 +1,15 @@
+.form__row--just-in-time-block {
+  font-family:$montserrat;
+  font-weight: 800;
+  .toggle-link {
+    font-family:$montserrat;
+    font-weight: 800;
+  }
+  .just-in-time--content {
+    strong {
+      font-weight: inherit;
+      font-family: inherit;
+      text-decoration: underline;
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/links/_links.scss

@@ -0,0 +1,42 @@
+.link,
+.inline {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  text-decoration: none;
+  position: relative;
+  display: inline;
+  padding: 0 2px 1px;
+  width: auto;
+  border-bottom: 2px solid;
+  border-bottom-color: inherit;
+
+  // Override this so we're only using the .link--bold variant with its own hover state
+  strong {
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  // Backwards compatibility with base theme
+  &.link--purple { @include link($colour-purple, $colour-deep-violet); }
+  &.link--dark-purple { @include link($colour-deep-violet, $colour-deep-violet); }
+  &.link--deep-violet { @include link($colour-deep-violet, $colour-deep-violet); }
+
+  &:hover,
+  &:focus,
+  &:active {
+    font-weight: 700;
+    padding: 0 0 1px;
+  }
+
+  &.link--bold {
+    font-weight: 700;
+    &:hover,
+    &:focus,
+    &:active {
+      font-weight: 800;
+      padding: 0 1px 1px;
+    }
+  }
+}

package/src/sass/themes/cr/2019/components/links/links.twig

@@ -0,0 +1,28 @@
+<p>LINKS</p>
+<p>
+  <a class="link" href="#">Standard link</a> <i>.link</i>
+</p>
+<p>
+  <a class="link link--bold" href="#">Bold link</a> <i>.link</i>
+</p>
+
+<p class="bg--black" style="padding: 5px;">
+  <a class="link" href="#">White link</a>
+  <i>.link</i>
+</p>
+
+<p>
+  <a class="link" href="#">An incredibly long link to illustrate linebreaks:Vivamus suscipit tortor eget felis porttitor volutpat.
+  </a> <i>.link</i>
+</p>
+
+<div class="bg--dark-grey" style="padding: 10px;">
+  <p class="bg--light-grey" style="padding: 5px;">
+    <a class="link" href="#">A link to show nested bg-colour rules working properly</a>
+    <i>.link</i>
+  </p>
+</div>
+
+
+<h3 style="margin-top: 30px;">Inline Link</h3>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue <a href="#" class="link inline">inline link</a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue</p>

package/src/sass/themes/cr/2019/components/list/_list.scss

@@ -0,0 +1,3 @@
+.cr-body ul {
+  font-family: $montserrat;
+}

package/src/sass/themes/cr/2019/components/loading/_loading.scss

@@ -0,0 +1,101 @@
+// CR 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;
+  }
+}