@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/sr/2018/components/lists/lists.twig

@@ -0,0 +1,28 @@
+<div class="cr-body">
+  <h3>Default styling</h3>
+  <p>Unordered list default styling</p>
+  <ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+  <p>Ordered list default styling</p>
+  <ol>
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ol>
+  <h3>Font size and font colour classes can be added to the lists</h3>
+   <p>Unordered list class <i>font--ruby</i></p>
+   <ul class="font--ruby">
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ul>
+  <p>Ordered list class <i>font--black font--xxsmall</i></p>
+  <ol class="font--black font--xxsmall">
+    <li>Item 1</li>
+    <li>Item 2</li>
+    <li>Item 3</li>
+  </ol>
+</div> 

package/src/sass/themes/sr/2018/components/live-total-block/_live-total-block.scss

@@ -0,0 +1,150 @@
+// remove ios default form styles
+
+ /* variables for animated pie chart */
+ $circle-size: 95px;
+ $circle-background: #1d0a43;
+ $circle-color: #00FFA9;
+ $inset-size: 83px;
+ $inset-color: #2a0f58;
+ $transition-length: 3s;
+
+.live-total-block {
+  @include gradient-background(#420D6D , #061238);
+  color: $colour-white;
+  font-family: $font-bold--sr18;
+  font-weight: 700;
+
+  .live-total-block__outerwrapper {
+    @include container();
+    padding: 40px calc(4 * #{gutter()});
+  }
+
+  .live-total-block__wrapper {
+    @include span(12);
+
+    @include breakpoint($screen-md) {
+      width: 73%;
+      margin: 0;
+    }
+
+    .live-total__content {
+      @include span(12);
+      text-align: center;
+
+      @include breakpoint($screen-md) {
+        @include span(6);
+      }
+
+      h2 {
+        font-size: 12px;
+        color: $colour-white;
+        margin-bottom: 0;
+        line-height:1.5;
+      }
+
+      .live-total {
+        font-size: 40px;
+        line-height:1.2;
+
+        @include breakpoint($screen-md) {
+          font-size: 48px;
+        }
+      }
+
+      .live-total__button {
+        background-color: #00FFA9;
+        color: #061238;
+        border-radius: 60px;
+        max-width: 190px;
+        height: 25px;
+        line-height: 1.5;
+        margin: 20px auto
+      }
+    }
+
+    .live-total__progress {
+      @include span(12);
+
+      @include breakpoint($screen-md) {
+        @include span(6);
+      }
+
+      .progress-outer-circle {
+        position: relative;
+        width: $circle-size;
+        height: $circle-size;
+        border-radius: 50%;
+        margin: 0 auto 20px;
+        background-color: $circle-background;
+
+        @include breakpoint($screen-md) {
+          float: right;
+          margin: 0;
+        }
+
+        .progress-circle__slice {
+          width: $circle-size;
+          height: $circle-size;
+          position: absolute;
+          -webkit-backface-visibility: hidden;
+          transition: transform $transition-length;
+          border-radius: 50%;
+
+          &:before, .progress-circle__bar {
+            content: '';
+            display:block;
+            width: $circle-size;
+            height: $circle-size;
+            position: absolute;
+            -webkit-backface-visibility: hidden;
+            transition: transform $transition-length;
+            border-radius: 50%;
+            clip: rect(0px, $circle-size/2, $circle-size, 0px);
+            background-color: $circle-color;
+          }
+        }
+
+        .progress-circle__slice {
+          clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
+        }
+
+        .progress-circle__overlay {
+          width: $inset-size;
+          height: $inset-size;
+          position: absolute;
+          margin-left: ($circle-size - $inset-size)/2;
+          margin-top: ($circle-size - $inset-size)/2;
+          background-color: $inset-color;
+          border-radius: 50%;
+
+          &:after {
+            content: '';
+            position: absolute;
+            display: block;
+            top: 7%;
+            left: 6%;
+            width: 73px;
+            height: 73px;
+            background:url($image-path + "sr18-logo-2018.svg") no-repeat center center;
+            margin: 0 auto;
+            border-radius: 50%;
+          }
+        }
+
+        $i: 0;
+        $increment: 180deg / 100;
+        @while $i <= 100 {
+        &[data-percentage='#{$i}'] {
+          .progress-circle__slice.progress-circle-full, .progress-circle__slice:before {
+            transform: rotate($increment * $i);
+          }
+          .progress-circle__bar {
+            transform: rotate($increment * $i * 2);
+          }
+          $i: $i + 1;
+        }
+        }
+      }
+    }
+  }
+}

package/src/sass/themes/sr/2018/components/live-total-block/images/sr18-logo-2018.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130"><defs><style>.cls-1{fill:#e52631;}.cls-2{fill:#fff;}</style></defs><title>SR18_logo_nav_130x130</title><circle class="cls-1" cx="65" cy="65" r="63.54"/><path class="cls-2" d="M107.52,63.34a.53.53,0,0,1-.41-.22.78.78,0,0,1-.18-.5c-.06-5.92-.38-11.85-1-17.84q-2.51-.35-5-.66a.61.61,0,0,1-.43-.27,1.1,1.1,0,0,1-.21-.58q-.19-2.24-.41-4.48a.73.73,0,0,1,.11-.51.36.36,0,0,1,.38-.16q8.21,1.27,16.35,3.14a.81.81,0,0,1,.45.3,1.05,1.05,0,0,1,.25.51q.34,2,.62,4a.56.56,0,0,1-.1.46.38.38,0,0,1-.39.12q-2.48-.45-5-.86a165.11,165.11,0,0,1,1.11,17,.71.71,0,0,1-.16.48.5.5,0,0,1-.42.2Z"/><path class="cls-2" d="M32.07,63.26a.54.54,0,0,1-.43-.23.78.78,0,0,1-.18-.52c.07-7.94.49-15.89,1.26-23.91a1.06,1.06,0,0,1,.22-.55.66.66,0,0,1,.42-.29q3.18-.46,6.37-.82a17.7,17.7,0,0,1,4.51,0,6.89,6.89,0,0,1,3.15,1.21,5.41,5.41,0,0,1,1.82,2.49,10.13,10.13,0,0,1,.53,3.88c-.09,3-.91,5.31-2.48,6.78s-3.7,2.17-6.66,2.3h-.3l-2,.09q-.14,4.38-.17,8.75A.87.87,0,0,1,38,63a.53.53,0,0,1-.44.24Zm6.48-15.15,2.54-.17c.95-.06,2.91-.17,3-2.94s-1.81-2.62-2.75-2.54l-2.52.22Q38.67,45.4,38.54,48.11Z"/><path class="cls-2" d="M94.83,63.22a.42.42,0,0,1-.28-.13.91.91,0,0,1-.23-.33q-1.62-4-3.33-8.2h0l-.21-.34a1.66,1.66,0,0,0-.29-.33,5.2,5.2,0,0,0-2-.33l-1.13,0q.11,4.42.13,8.85a.9.9,0,0,1-.17.55.49.49,0,0,1-.42.24l-5.58,0a.49.49,0,0,1-.4-.25.94.94,0,0,1-.18-.57c0-8.56-.21-17.12-.55-25.61a.89.89,0,0,1,.14-.55.4.4,0,0,1,.37-.22q5.35.35,10.68,1a8,8,0,0,1,5,2.47,8.69,8.69,0,0,1,2.38,5.48C99,47.28,98.51,49,97.48,50a5.38,5.38,0,0,1-.91.73,6.84,6.84,0,0,1-1.17.59l-.38.15.37.29A8.39,8.39,0,0,1,96.76,53a9.57,9.57,0,0,1,1,1.35q1.83,3.93,3.58,7.73a.93.93,0,0,1,0,.8.52.52,0,0,1-.52.35ZM87.16,47.75l2.91.17c.94.06,2.92.19,2.77-2.51a2.84,2.84,0,0,0-3-3l-2.88-.23Q87.06,45,87.16,47.75Z"/><path class="cls-2" d="M36.08,92.75a.64.64,0,0,1-.42-.28,1,1,0,0,1-.22-.55q-1.07-12-1.2-23.88a.79.79,0,0,1,.17-.52.51.51,0,0,1,.41-.22q7.4.09,14.84.14a.52.52,0,0,1,.42.25.91.91,0,0,1,.18.56q0,2.44,0,4.88a.93.93,0,0,1-.17.59.49.49,0,0,1-.41.23q-4.28-.1-8.56-.24,0,1.85.1,3.71,3.71.18,7.44.3a.55.55,0,0,1,.42.26.92.92,0,0,1,.19.56q.05,2.25.11,4.51a.92.92,0,0,1-.16.58.49.49,0,0,1-.4.25q-3.69-.18-7.37-.44.08,1.86.19,3.71,4.53.38,9.07.62a.53.53,0,0,1,.43.26,1.09,1.09,0,0,1,.18.6q.08,2.43.18,4.86a.89.89,0,0,1-.14.55.43.43,0,0,1-.4.21Q43.53,93.74,36.08,92.75Z"/><path class="cls-2" d="M83.11,94a.42.42,0,0,1-.39-.21.82.82,0,0,1-.15-.54c.39-8.32.61-16.7.66-25.08a.89.89,0,0,1,.18-.56.52.52,0,0,1,.42-.25q7.43-.05,14.83-.15a.51.51,0,0,1,.41.22.77.77,0,0,1,.17.51q0,2.28-.09,4.56a.9.9,0,0,1-.19.56.55.55,0,0,1-.42.24q-4.26.2-8.54.34,0,1.86-.1,3.72,3.72-.18,7.42-.41a.46.46,0,0,1,.4.2.73.73,0,0,1,.15.51q-.09,2.13-.22,4.26a1,1,0,0,1-.21.58.66.66,0,0,1-.42.3q-3.67.34-7.35.59-.08,1.86-.18,3.72,4.53-.38,9-.9a.39.39,0,0,1,.4.17.79.79,0,0,1,.12.54q-.18,2.28-.41,4.57a1.09,1.09,0,0,1-.22.55.64.64,0,0,1-.43.28Q90.58,93.47,83.11,94Z"/><path class="cls-2" d="M54.75,94.45a.55.55,0,0,1-.43-.26,1,1,0,0,1-.19-.56c-.28-8.4-.43-16.88-.47-25.36a.94.94,0,0,1,.17-.56.49.49,0,0,1,.43-.24l5.68,0a.55.55,0,0,1,.43.25.87.87,0,0,1,.19.56c0,6.63.05,13.24.13,19.82q4.54.08,9.09,0a.53.53,0,0,1,.43.23.84.84,0,0,1,.18.57q0,2.48-.06,5a1,1,0,0,1-.18.56.51.51,0,0,1-.4.25Q62.25,94.82,54.75,94.45Z"/><path class="cls-2" d="M73.33,94.59a.36.36,0,0,1-.32-.21,1,1,0,0,1-.13-.57c.17-8.44.26-17,.28-25.52a1.1,1.1,0,0,1,.15-.58.4.4,0,0,1,.34-.23l5.73,0a.39.39,0,0,1,.34.22,1,1,0,0,1,.15.58c0,8.45-.22,16.89-.53,25.27a1.18,1.18,0,0,1-.17.58.42.42,0,0,1-.34.24Q76.09,94.49,73.33,94.59Z"/><path class="cls-2" d="M101.85,91.78a.35.35,0,0,1-.38-.16.68.68,0,0,1-.11-.49c.83-7.79,1.3-15.5,1.4-23.19a.8.8,0,0,1,.18-.51.52.52,0,0,1,.42-.23q7.45-.11,14.83-.27a.47.47,0,0,1,.4.18.65.65,0,0,1,.15.45q0,2-.14,3.92a.79.79,0,0,1-.18.49.56.56,0,0,1-.41.22q-4.42.33-8.87.6-.07,1.67-.17,3.35,3.26-.28,6.5-.61a.43.43,0,0,1,.38.15.57.57,0,0,1,.1.46q-.15,1.91-.35,3.82a.9.9,0,0,1-.22.49.66.66,0,0,1-.41.26q-3.2.47-6.41.88-.37,4.21-.92,8.47a1.1,1.1,0,0,1-.22.53.67.67,0,0,1-.41.28Q104.43,91.36,101.85,91.78Z"/><path class="cls-2" d="M27.69,91.47a.53.53,0,0,1-.27-.16,1.23,1.23,0,0,1-.25-.34L23.41,83h0l-.22-.32a1.83,1.83,0,0,0-.29-.32,5.62,5.62,0,0,0-1.9-.47l-1.06-.15q.38,3.83.94,7.73a.61.61,0,0,1-.09.46.31.31,0,0,1-.35.13q-2.53-.52-5-1.1A.72.72,0,0,1,15,88.7a1.1,1.1,0,0,1-.24-.51,141.42,141.42,0,0,1-2-20.64.62.62,0,0,1,.15-.44.45.45,0,0,1,.37-.19l10.5.2A6.79,6.79,0,0,1,28.64,69a7.35,7.35,0,0,1,2.07,5.13c.09,2.37-.35,4.07-1.33,5a4.69,4.69,0,0,1-.86.68,5.62,5.62,0,0,1-1.1.53l-.36.13.36.28A8.64,8.64,0,0,1,28.75,82a10.43,10.43,0,0,1,.95,1.34l3.82,7.89a1,1,0,0,1,.11.8.37.37,0,0,1-.45.29Q30.43,91.94,27.69,91.47ZM19.51,76.82l2.77.27c.9.09,2.77.26,2.64-2.28s-2-2.63-2.9-2.68L19.24,72Q19.34,74.39,19.51,76.82Z"/><path class="cls-2" d="M20.55,63.74c-.73,0-1.47,0-2.2-.08s-1.46-.16-2.17-.28l-.45-.08-.37-.08-.23-.06s0,0,0,0l-1-.21-.8-.17a.54.54,0,0,1-.3-.21.69.69,0,0,1-.15-.37q-.15-2.59-.19-5.18a.73.73,0,0,1,.26-.65.52.52,0,0,1,.6-.08,24.24,24.24,0,0,0,2.57,1l.79.28a11.06,11.06,0,0,0,4.15.56A4.51,4.51,0,0,0,23,57.68a1.82,1.82,0,0,0,.87-1.48,1.44,1.44,0,0,0-.43-1.06,8,8,0,0,0-3-.85h-.05c-2.76-.44-4.74-.71-5.73-1.63s-1.5-2.46-1.25-4.48a9.7,9.7,0,0,1,2.89-5.88,12.27,12.27,0,0,1,6.27-3.17,14.21,14.21,0,0,1,3.55-.23c.6,0,1.12.09,1.57.14a7.8,7.8,0,0,1,1.1.2.36.36,0,0,1,.25.21.78.78,0,0,1,.1.38q-.06,2.82,0,5.63a1,1,0,0,1-.29.77.53.53,0,0,1-.3.17.45.45,0,0,1-.28-.07,13.15,13.15,0,0,0-1.57-.71,15.14,15.14,0,0,0-1.71-.54,8.68,8.68,0,0,0-3.28-.17,6.38,6.38,0,0,0-1.8.51A1.73,1.73,0,0,0,19,46.69a1,1,0,0,0,.61,1.07c.37.11.83.23,1.35.35a15.86,15.86,0,0,0,1.92.29c2.7.34,4.42.68,5.3,1.82a7.32,7.32,0,0,1,1.38,5,10.8,10.8,0,0,1-.72,3.64A7.38,7.38,0,0,1,27,61.54a7.59,7.59,0,0,1-2.78,1.63A11.79,11.79,0,0,1,20.55,63.74Z"/><ellipse class="cls-2" cx="64.82" cy="49.29" rx="13.73" ry="14.13"/></svg>

package/src/sass/themes/sr/2018/components/live-total-block/live-total-block.twig

@@ -0,0 +1,44 @@
+<div class="block live-total-block">
+  <div class="live-total-block__outerwrapper">
+    <div class="live-total-block__wrapper">
+      <div class="live-total__progress">
+      <div class="progress-outer-circle" data-percentage="80">
+        <div class="progress-inner-circle">
+            <div class="progress-circle-full progress-circle__slice"></div>
+            <div class="progress-circle__slice">
+              <div class="progress-circle__bar"></div>
+            </div>
+        </div>
+        <div class="progress-circle__overlay"></div>
+      </div>
+      </div>
+      <div class="live-total__content">
+        <h2>The nation's steps</h2>
+        <div id="js-totaliser" class="live-total">810,013,162</div>
+        <div class="live-total__button">One billion step target</div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="block live-total-block">
+  <div class="live-total-block__outerwrapper">
+    <div class="live-total-block__wrapper">
+      <div class="live-total__progress">
+      <div class="progress-outer-circle" data-percentage="100">
+        <div class="progress-inner-circle">
+            <div class="progress-circle-full progress-circle__slice"></div>
+            <div class="progress-circle__slice">
+              <div class="progress-circle__bar"></div>
+            </div>
+        </div>
+        <div class="progress-circle__overlay"></div>
+      </div>
+      </div>
+      <div class="live-total__content">
+        <h2>The nation's steps</h2>
+        <div id="js-totaliser" class="live-total">1000000000</div>
+        <div class="live-total__button">One billion step target</div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/sass/themes/sr/2018/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;
+  }
+}

package/src/sass/themes/sr/2018/components/media/_media.scss

@@ -0,0 +1,9 @@
+.media-cr-image.view-mode-large {
+  figure,
+  img {
+    @include breakpoint($screen-lg) {
+      width: calc(100% + (6 * 60px));
+      margin-left: -180px;
+    }
+  }
+}