@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/cr/2019/variables/_typography.scss

@@ -0,0 +1,81 @@
+// Fonts
+$montserrat: "Montserrat", Helvetica, Arial, sans-serif;
+$anton: "Anton", Impact, sans-serif;
+
+// Backwards compatibility to keep the base theme happy
+$body-font: $montserrat;
+
+/* Sizing variations.
+** format is as follows: breakpoint: (font-size, line-height)
+*/
+
+/* 'Title' H1 variation */
+$h1-title-font-size: (
+  null: (54px, 62px),
+  $screen-md: (54px, 62px),
+  $screen-lg: (100px, 104px)
+);
+$h1-font-size: (
+  null: (42px, 48px),
+  $screen-md: (42px, 48px),
+  $screen-lg: (64px, 72px)
+);
+$h2-font-size: (
+  null: (34px, 40px),
+  $screen-md: (34px, 40px),
+  $screen-lg: (42px, 48px)
+);
+$h3-font-size: (
+  null: (26px, 32px),
+  $screen-md: (26px, 32px),
+  $screen-lg: (26px, 32px)
+);
+
+/* More backwards compatibility */
+$h1-large-font-size: $h1-title-font-size;
+
+/* New stuff */
+$subtitle-font-size: (
+  null: (27px, 40px),
+  $screen-md: (27px, 40px),
+  $screen-lg: (36px, 48px)
+);
+
+$label-font-size: (
+  null: (11px, 16px),
+  $screen-md: (11px, 16px),
+  $screen-lg: (15px, 24px)
+);
+
+$label-small-font-size: (
+  null: (11px, 16px),
+  $screen-md: (11px, 16px),
+  $screen-lg: (11px, 16px)
+);
+
+$body-font-size: (
+  null: (15px, 24px),
+  $screen-md: (15px, 24px),
+  $screen-lg: (20px, 32px)
+);
+
+$body-small-font-size: (
+  null: (15px, 24px),
+  $screen-md: (15px, 24px),
+  $screen-lg: (15px, 24px)
+);
+
+$footnote-font-size: (
+  null: (11px, 16px),
+  $screen-md: (11px, 16px),
+  $screen-lg: (11px, 16px)
+);
+
+$subtitle-small-font-size: (
+  null: (27px, 40px),
+  $screen-md: (27px, 40px),
+  $screen-lg: (27px, 40px)
+);
+
+/* As per Body for backwards compatibility */
+$p-font-size: $body-font-size;

package/src/sass/themes/cr/2019/variables/colour.twig

@@ -0,0 +1,162 @@
+<h3>Primary colours</h3>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--white" style="height: 100px; margin-bottom: 10px; display:block; width: 100px; border: 1px solid black;"></div>
+	<h5>white</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--deep-violet" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Deep violet</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Red</h5>
+</div>
+
+
+<h3>Secondary colours</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>grey</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>coral</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Orange</h5>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>yellow</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>green</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>blue</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>magenta</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>purple</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>teal</h5>
+</div>
+
+
+
+<h3>Secondary light colours</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light grey</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light coral</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light orange</h5>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light yellow</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light green</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light blue</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light magenta</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light purple</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--light-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Light teal</h5>
+</div>
+
+
+<h3>Secondary dark colours</h3>
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark grey</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark coral</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark orange</h5>
+</div>
+
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark yellow</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark green</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark blue</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark magenta</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark purple</h5>
+</div>
+
+<div style="display: inline-block; margin: 10px">
+	<div class="bg--dark-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
+	<h5>Dark teal</h5>
+</div>
+

package/src/sass/themes/donate/_donate-styleguide.scss

@@ -0,0 +1,18 @@
+// Donate Page
+//
+// Markup: donate-page.twig
+//
+// Style guide: 30
+
+// Thank You Page
+//
+// Markup: success-page.twig
+//
+// Style guide: 40
+
+// Failure Page
+//
+// Markup: failure-page.twig
+//
+// Style guide: 50
+

package/src/sass/themes/donate/components/background-colours/_background-colours.scss

@@ -0,0 +1,9 @@
+.bg--transparent {
+  background-color: transparent;
+}
+
+.bg--blue-gradient {
+  // Non-gradient browser fallback:
+  background-color: #00407e;
+  background-image: linear-gradient(to top right, $colour--bg-gradient-top-right, $colour--bg-gradient-bottom-left);
+}

package/src/sass/themes/donate/components/banner/_banner.scss

@@ -0,0 +1,10 @@
+.promo-header, .promo-header--small {
+  min-height: 200px;
+  background-size: cover!important;
+}
+
+@media (min-width: 640px) {
+  .promo-header, .promo-header--small {
+    min-height: 350px;
+  }
+}

package/src/sass/themes/donate/components/buttons/_buttons.scss

@@ -0,0 +1,122 @@
+a.btn,
+a.cta,
+a.cta-2,
+button.btn,
+button.cta,
+button.cta-2  {
+  width:100%;
+  height: 48px;
+  font-family: $montserrat;
+  display: block;
+  margin: 0 auto;
+  @include font-size($button-cta-font-size);
+  @include border-radius(25px);
+  @include box-shadow-transition();
+
+  @include breakpoint($screen-md){
+    width: auto;
+  }
+}
+
+
+// Buttons: primary action
+a.btn,
+button.btn {
+  background-color: $colour--btn-light;
+  color: $colour--black;
+  padding: 13px 30px;
+  @include border-radius(25px);
+  @include box-shadow-transition();
+  @include colour-transition();
+
+  &.secondary {
+    background-color: transparent;
+    border: 2px solid $colour--white;
+    color: $colour--white;
+    padding: 10px 30px;
+    @include font-size($button-cta-font-size);
+    @include border-radius(25px);
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $colour--btn-hover;
+    color: $colour--white;
+
+    &.secondary {
+      background-color: transparent;
+      border: 2px solid $colour--white;
+      color: $colour--white;
+    }
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0px 4px $colour--system-blue;
+  }
+  &:active {
+    background-color: $colour--btn-on-click;
+    color: $colour--white;
+
+    &.secondary {
+      background-color: transparent;
+      border: 2px solid $colour--white;
+      color: $colour--white;
+    }
+  }
+}
+
+// CTAs - classes to be finalised
+a.cta,
+button.cta {
+  background-color: $colour--red;
+  color: $colour--white;
+  @include border-radius(30px);
+  @include box-shadow-transition();
+  @include colour-transition();
+
+  &:hover,
+  &:focus {
+    background-color: $colour--cta-hover;
+    color: $colour--white;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0px 4px $colour--system-blue;
+  }
+}
+
+a.cta-2,
+button.cta-2 {
+  background-color: rgba(255,255,255,0);
+  border: 2px solid $colour--white;
+  color: $colour--white;
+  transition: all 0.1s ease-in-out;
+  @include border-radius(30px);
+  @include colour-transition();
+  box-shadow: none;
+  padding: 9px 30px;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+    box-shadow: none;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0px 4px $colour--system-blue;
+  }
+
+  &.disabled,
+  &:disabled {
+    border: 2px solid $colour--cta2-disbled;
+    color: $colour--cta2-disbled;
+    opacity: 1;
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+}

package/src/sass/themes/donate/components/cards/_cards.scss

@@ -0,0 +1,72 @@
+.cards {
+  padding: 40px 0 30px;
+  .cards__wrapper {
+    @include container;
+
+    .cards__item {
+      width: 100%;
+      margin:0 5% 28px;
+
+      @include breakpoint($screen-md) {
+        margin:0 1.25% 28px;
+        width: 30%;
+      }
+    }
+
+    .cards__image {
+      img {
+        display: block;
+        max-width: 100%;
+      }
+    }
+
+    .cards__content-wrapper {
+      position: relative;
+      padding: 30px 0 0;
+      text-align: left;
+
+      h3 {
+        color: $colour-dark-purple;
+      }
+
+      a {
+        color: $colour-dark-purple;
+      }
+    }
+  }
+
+  .cards-header {
+    margin-bottom: 30px;
+
+    @include breakpoint($screen-md) {
+      width: 100%;
+    }
+  }
+
+  // Extends the cards unit to allow background images for success pages
+  &.cards--three-grid-unit {
+    .cards__image {
+      background-size: 100%;
+      background-repeat: no-repeat;
+      width: 100%;
+      padding-top: 75%;
+      overflow: hidden;
+  
+      &.cards__item--kevin-story {
+        background-image: url($image-path + "kevin-card.jpg");
+      }
+      &.cards__item--aziza-story{
+        background-image: url($image-path + "aziza-card.jpg");
+      }
+      &.cards__item--georgia-story{
+        background-image: url($image-path + "georgia-card.jpg");
+      }
+    }
+  }
+}
+
+.form__row--upsell {
+    text-align: center;
+    padding-bottom: 30px;
+}
+