@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/base/components/email-signup/email-signup-fundraise.twig

@@ -0,0 +1,33 @@
+<div class="cr-email-signup-fundraise-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--standard block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-fundraise-form" id="block-emailsignupblockfundraise">
+  <div class="block--cr-email-signup__inner-wrapper">
+    <div class="cr-email-signup--messages">
+      <div class="esu-title-message">
+        <p>Sign-up to our newsletter</p>
+      </div>
+      <div class="esu-initial-message">
+        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
+      </div>
+      <div class="esu-first-success-message">
+        <p>ESU Fundraise: success message</p>
+      </div>
+    </div>
+    <div class="esu-errors messages messages--error"></div>
+    <form action="/web/test/esu" method="post" id="cr-email-signup-fundraise-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email--2,edit-step1--2">
+      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
+      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
+      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
+        <label for="edit-email--2">Your email address</label>
+        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--2" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
+      </div>
+      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--2" name="step1" value="Sign Up">
+      <input data-drupal-selector="form-rqvvpemkcgc5hd7jksv3ludvh6amvd-jgy6vmatcv8e" type="hidden" name="form_build_id" value="form-rqvvpeMkcgc5hd7jKSv3lUdvh6AmVD-JGY6vmaTCv8E">
+      <input data-drupal-selector="edit-cr-email-signup-fundraise-form-form-token" type="hidden" name="form_token" value="yg6GwzSbKSwRFrB5Py3ASG3bQr2UbWaltDcoZuUYpx8">
+      <input data-drupal-selector="edit-cr-email-signup-fundraise-form" type="hidden" name="form_id" value="cr_email_signup_fundraise_form">
+    </form>
+    <div class="esu-privacy-message">
+      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
+        <br> <br> If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
+      </p>
+    </div>
+  </div>
+</div>

package/src/sass/base/components/email-signup/email-signup-header.twig

@@ -0,0 +1,38 @@
+<div style="display:block;" class="cr-header-email-signup-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--head block--cr-email-signup--step-1 crEMailSignup-processed" data-drupal-selector="cr-header-email-signup-form" id="block-emailsignupblockhead">
+  <div class="block--cr-email-signup__inner-wrapper">
+    <div class="cr-email-signup--messages">
+      <div class="esu-title-message">
+        <p>Stay in the know!</p>
+      </div>
+      <div class="esu-initial-message">
+        <p>Get regular email updates and info on what we're up to!</p>
+      </div>
+      <div class="esu-first-success-message">
+        <p>Thanks! Your first email will be with you shortly</p>
+      </div>
+    </div>
+    <div class="esu-errors messages messages--error"></div>
+    <form action="/web/" method="post" id="cr-header-email-signup-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email,edit-step1">
+      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
+      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Header">
+      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
+        <label for="edit-email">Your email address</label>
+        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email" name="email" value="" size="60" maxlength="500" placeholder="example@youremail.com">
+      </div>
+      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1" name="step1" value="Subscribe">
+      <input data-drupal-selector="form-bja0x4d6a3lmjjlyotlzzlq-pazuc5phi7qyduqqcya" type="hidden" name="form_build_id" value="form-BJA0X4d6a3LmJJlyotLzzlQ_pAZuc5PhI7QyduQqCYA">
+      <input data-drupal-selector="edit-cr-header-email-signup-form-form-token" type="hidden" name="form_token" value="BREegNF1jBbSdnIuntqc0VFn7apoecLt3Dc0ubP8pFs">
+      <input data-drupal-selector="edit-cr-header-email-signup-form" type="hidden" name="form_id" value="cr_header_email_signup_form">
+      <div class="esu-second-success-message">
+        <p>Great! Now we know what's right for you.</p>
+      </div>
+    </form>
+    <div class="esu-privacy-message"><p>Our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p></div>
+    <a role="button" class="close-button" href="#">
+      <svg class="icon">
+        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-cross"></use>
+      </svg>
+    </a>
+  </div>
+</div>
+

package/src/sass/base/components/email-signup/email-signup-interest.twig

@@ -0,0 +1,35 @@
+<div class="cr-email-signup-register-interest-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--register-interest block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-register-interest-form" id="block-emailsignupblockregisterinterest">
+  <div class="block--cr-email-signup__inner-wrapper">
+    <div class="cr-email-signup--messages">
+      <div class="esu-title-message">
+        <p>Sign-up to our newsletter</p>
+      </div>
+      <div class="esu-initial-message">
+        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
+      </div>
+      <div class="esu-first-success-message">
+        <p>ESU Register Interest: success message</p>
+      </div>
+    </div>
+    <div class="esu-errors messages messages--error">
+      <div></div>
+    </div>
+    <form action="/web/test/esu" method="post" id="cr-email-signup-register-interest-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email--5,edit-step1--5">
+      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
+      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
+      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
+        <label for="edit-email--5">Your email address</label>
+        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--5" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
+      </div>
+      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--5" name="step1" value="Subscribe">
+      <input data-drupal-selector="form-viyyqd1ny64-7lbarzwycso-2-zsflyjcxuvjyhekuw" type="hidden" name="form_build_id" value="form-VIYYqD1ny64_7lBArzWYcso_2-zsfLYJcxUVjYHeKUw">
+      <input data-drupal-selector="edit-cr-email-signup-register-interest-form-form-token" type="hidden" name="form_token" value="7YRPGVfEFSFWIp_igbeaXZBlhOLvbP-8WQZTFyi7EXM">
+      <input data-drupal-selector="edit-cr-email-signup-register-interest-form" type="hidden" name="form_id" value="cr_email_signup_register_interest_form">
+    </form>
+    <div class="esu-privacy-message">
+      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
+        <br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
+      </p>
+    </div>
+  </div>
+</div>

package/src/sass/base/components/email-signup/email-signup-standard.twig

@@ -0,0 +1,50 @@
+<div class="cr-email-signup-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--standard block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-form" id="block-emailsignupblockstandard">
+  <div class="block--cr-email-signup__inner-wrapper">
+    <div class="cr-email-signup--messages">
+       <div class="esu-title-message">
+        <p>Sign-up to our newsletter</p>
+      </div>
+      <div class="esu-initial-message">
+        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
+      </div>
+      <div class="esu-first-success-message">
+        <p>ESU Standard: success! (first message)</p>
+      </div>
+      <div class="esu-second-success-message">
+        <p>ESU Standard: success! (second message)</p>
+      </div>
+    </div>
+    <div class="esu-errors messages messages--error"></div>
+    <form action="/web/test/esu" method="post" id="cr-email-signup-form" accept-charset="UTF-8" data-drupal-form-fields="edit-email--3,edit-school-phase,edit-step1--3,edit-step2">
+      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
+      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
+      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
+        <label for="edit-email--3">Your email address</label>
+        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--3" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
+      </div>
+      <div class="js-form-item form-item js-form-type-select form-type-select js-form-item-school-phase form-item-school-phase">
+        <label for="edit-school-phase-button">Also send me School resources</label>
+        <select data-drupal-selector="edit-school-phase" id="edit-school-phase" name="school_phase" class="form-select" style="display: none;">
+          <option value="" selected="selected">-- Select age group --</option>
+          <option value="EY">Early Years or Nursery</option>
+          <option value="PY">Primary</option>
+          <option value="SY">Secondary</option>
+          <option value="FE">Further Education or Sixth-Form College</option>
+          <option value="HE">Higher Education</option>
+          <option value="OH">Other</option>
+        </select>
+        <span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="edit-school-phase-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="edit-school-phase-menu" aria-haspopup="true" style="width: 100px;"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">-- Select age group --</span></span>
+      </div>
+      <input class="step1 button js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--3" name="step1" value="Go">
+      <input class="step2 button js-form-submit form-submit" data-drupal-selector="edit-step2" type="submit" id="edit-step2" name="step2" value="Go">
+      <input data-drupal-selector="form-9b6qb6oimpe9zn500qwm7ijredqzatwi-g3izeutgg4" type="hidden" name="form_build_id" value="form-9B6qb6OIMpe9zn500Qwm7ijreDQZatwi_G3izEutgG4">
+      <input data-drupal-selector="edit-cr-email-signup-form-form-token" type="hidden" name="form_token" value="gK9p3T0PfgFJ0-jIiF33q3Wfu4BTHzu5RvYw_A8rlIo">
+      <input data-drupal-selector="edit-cr-email-signup-form" type="hidden" name="form_id" value="cr_email_signup_form">
+    </form>
+    <div class="esu-privacy-message">
+      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
+        <br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
+      </p>
+    </div>
+  </div>
+</div>

package/src/sass/base/components/email-signup/email-signup-workplace.twig

@@ -0,0 +1,39 @@
+<div class="cr-email-signup-workplace-form contextual-region block-cr-email-signup block--cr-email-signup block--cr-email-signup--workplace block--cr-email-signup--step-1 block--cr-email-signup--banner crEMailSignup-processed" data-drupal-selector="cr-email-signup-workplace-form" id="block-emailsignupblockworkplace">
+  <div class="block--cr-email-signup__inner-wrapper">
+    <div class="cr-email-signup--messages">
+      <div class="esu-title-message">
+        <p>Sign-up to our newsletter</p>
+      </div>
+      <div class="esu-initial-message">
+        <p>We’ll keep you up to date with the latest Comic Relief updates, handy fundraising tips & tools as well as exciting news from Red Nose Day and Sport Relief.</p>
+      </div>
+      <div class="esu-first-success-message">
+        <p>ESU Workplace: success message</p>
+      </div>
+    </div>
+    <div class="esu-errors messages messages--error">
+      <div></div>
+    </div>
+    <form action="/web/test/esu" method="post" id="cr-email-signup-workplace-form" accept-charset="UTF-8" data-drupal-form-fields="edit-firstname,edit-email--4,edit-step1--4">
+      <input class="esu-device" data-drupal-selector="edit-device" type="hidden" name="device" value="OS_X_10.11.6_-_Chrome_56.0.2924.87">
+      <input class="esu-source" data-drupal-selector="edit-source" type="hidden" name="source" value="Banner">
+      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-firstname form-item-firstname">
+        <label for="edit-firstname">Your first name</label>
+        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-firstname" type="text" id="edit-firstname" name="firstName" value="" size="60" maxlength="100" placeholder="Enter your first name">
+      </div>
+      <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-email form-item-email">
+        <label for="edit-email--4">Your email address</label>
+        <input class="–metrika-nokeys form-text" data-drupal-selector="edit-email" type="text" id="edit-email--4" name="email" value="" size="60" maxlength="500" placeholder="Enter your email address">
+      </div>
+      <input class="step1 button btn btn--yellow js-form-submit form-submit" data-drupal-selector="edit-step1" type="submit" id="edit-step1--4" name="step1" value="Sign Up">
+      <input data-drupal-selector="form-ir3piqq75hewphoqjybj-co-i4iwk5-zblgbyc8sqso" type="hidden" name="form_build_id" value="form-ir3PiQq75HEwpHoqjYbJ_cO-I4iwK5-ZBLgbYc8sqso">
+      <input data-drupal-selector="edit-cr-email-signup-workplace-form-form-token" type="hidden" name="form_token" value="D5eVtLpvyGoOb9l0MxgyODaD28ouAReO9ExRWopMsk4">
+      <input data-drupal-selector="edit-cr-email-signup-workplace-form" type="hidden" name="form_id" value="cr_email_signup_workplace_form">
+    </form>
+    <div class="esu-privacy-message">
+      <p>Find out how we will use your information in our <a class="link link--white inline" href="/privacy-policy">Privacy Policy</a>
+        <br> <br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.
+      </p>
+    </div>
+  </div>
+</div>

package/src/sass/base/components/email-signup/images/arrow-right.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+<path fill="#FFFFFF" d="M17.7,29.7l-1.4-1.4l8.3-8.3l-8.3-8.3l1.4-1.4l9.7,9.7L17.7,29.7z"/>
+</svg>

package/src/sass/base/components/email-signup/images/cross-close.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+  <path fill="#ffffff" d="M21.4,20l8.3,8.3l-1.4,1.4L20,21.4l-8.3,8.3l-1.4-1.4l8.3-8.3l-8.3-8.3l1.4-1.4l8.3,8.3l8.3-8.3l1.4,1.4L21.4,20z"/>
+</svg>

package/src/sass/base/components/email-signup/images/error-red-cross.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 40 40" width="40" height="40" xml:space="preserve" preserveAspectRatio="xMinYMid">
+<path fill="#F04257" d="M20,21.4l-5.3,5.3l-1.4-1.4l5.3-5.3l-5.3-5.3l1.4-1.4l5.3,5.3l5.3-5.3l1.4,1.4L21.4,20l5.3,5.3l-1.4,1.4
+	L20,21.4z"/>
+</svg>

package/src/sass/base/components/external-link/_external-link.scss

@@ -0,0 +1,16 @@
+.external-link {
+  &:after {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    margin: 5px 5px -3px 10px;
+    content: " ";
+    background: url($image-path + "external-link.svg");
+    background-size: 25px 25px;
+  }
+}
+.media-external-file {
+	a {
+		@extend .link;
+	}
+}

package/src/sass/base/components/feature-articles-block/_feature-articles-block.scss

@@ -0,0 +1,30 @@
+.feature-articles-block {
+	width: calc(100% - (8 * 1.25%));
+	margin: auto;
+	@include breakpoint($screen-md) {
+		width: calc(100% - (4 * 1.25%));
+	}
+	@include breakpoint($screen-md-max) {
+		max-width: calc(1200px - (2 * 1.25%));
+	}
+	@include breakpoint($screen-lg) {
+		display: flex;
+	}
+	.article-teaser {
+		width: 100%;
+		height: 100%;
+		margin: 0 0 calc(4 * #{gutter()});
+		display: inline-block;
+		background-color: $colour-white;
+
+		@include breakpoint($screen-md) {
+			position: relative;
+			height: auto;
+		}
+		@include breakpoint($screen-lg) {
+			@include span(4);
+			min-height: 390px;
+			margin-bottom: calc(2 * #{gutter()});
+		}
+	}
+}

package/src/sass/base/components/feature-articles-block/feature-articles-block.twig

@@ -0,0 +1,14 @@
+<section class="paragraph">
+  <h2>Max 3 items</h2>
+  <div class="feature-articles-block">
+    {% for i in 0..2 %}
+      {% include directory ~ '../news-teaser/news-teaser.twig' %}
+    {% endfor %}
+  </div>
+  <h2>Teasers always keep same 4 columns width</h2>
+  <div class="feature-articles-block">
+    {% for i in 0..1 %}
+      {% include directory ~ '../news-teaser/news-teaser.twig' %}
+    {% endfor %}
+  </div>
+</section>

package/src/sass/base/components/footer/_footer.scss

@@ -0,0 +1,39 @@
+
+footer[role=contentinfo] {
+  padding: 50px 5px 185px;
+  background: $colour-black;
+  @include clearfix;
+  @include breakpoint($screen-md) {
+    padding: 50px 5px 140px;
+  }
+  @include breakpoint($screen-lg) {
+    padding-top: 100px;
+    padding-bottom: 120px;
+  }
+  .footer__copyright p {
+    text-align: center;
+    color: $colour-white;
+    font-size: 12px;
+    line-height: 15px;
+  }
+  .footer__branding {
+    text-align: center;
+    margin-top:25px;
+    a {
+      display: inline-block;
+      width: 70px;
+      height: 70px;
+      .icon {
+        width: inherit;
+        height: inherit;
+      }
+      html.no-svg & {
+        // background-image: url($image-path + "cr_footer_logo.png");
+      }
+    }
+  }
+  .footer__follow {
+    text-align: center;
+    color: $colour-white;
+  }
+}

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

@@ -0,0 +1,24 @@
+<footer role="contentinfo">
+  
+<h4 class="footer__follow">Follow us...</h4>
+
+{# social media icons #}
+{% include directory ~ '../social/social-following.twig' %}
+
+{# footer nav #}
+{% include directory ~ '../navigation/footer-nav.twig' %}
+
+
+<div class="footer__copyright">
+  <p>© Comic Relief {{ "now"|date("Y") }}. Comic Relief, registered charity 326568 (England/Wales); SC039730 (Scotland)</p>
+</div>
+<div class="footer__branding">
+  <a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
+   <svg class="icon">
+      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#crlogo"></use>
+    </svg>
+  </a>
+</div>
+
+  <a class="styleguide-link external-link" href="/profiles/contrib/cr/themes/custom/campaign_base/styleguide/index.html" target="_blank">Styleguide</a>
+</footer>

package/src/sass/base/components/form/_form.scss

@@ -0,0 +1,132 @@
+
+// Forms
+//
+// Standard Forms
+//
+// Kept in for legacy use of sites using this base styles
+
+label,
+legend {
+  display: block;
+  position: relative;
+  @include clearfix();
+  @include font-size($p-small-font-size);
+
+  span {
+    font-family: $body-font;
+  }
+}
+
+fieldset {
+  padding: 0;
+  border-width: 0; 
+}
+
+input[type="email"],
+input[type="number"],
+input[type="date"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  height: 50px;
+  padding: 13px; 
+  background-color: $colour-white;
+  border: 1px solid $item-grey;
+  width: 100%;
+
+  box-shadow: none;
+  box-sizing: border-box;
+  appearance: none;
+  
+  @include breakpoint($screen-md) {
+    max-width: 290px;
+  }
+}
+
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid $item-grey;
+}
+
+input:focus::-webkit-input-placeholder { color:transparent; }
+input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
+input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
+input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
+select:focus {
+  outline: 0;
+}
+
+input[type="checkbox"] {
+  @include opacity(0);
+  position: absolute;
+  left: 0px;
+}
+input[type="radio"],
+input[type="checkbox"],
+input[type="checkbox"] + span {
+  width: 30px;
+  height: 30px;
+  margin: 5px 10px 10px 0px;
+}
+
+input[type="checkbox"] + span {
+  background-color: $colour-white;
+  border: 1px solid $item-grey;
+  float: left;
+}
+
+input[type="checkbox"]:checked + span {
+  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTMuNzA3LDMyLjI5MyAxMi4yOTMsMzMuODU0IDI0LjI5Myw0NiAyNS43MDcsNDYgNDkuNzA3LDIxLjg1NCA0OC4yOTMsMjAuMzY2IDI1LDQzLjYyMyAiLz48L2c+PC9zdmc+) no-repeat center;
+  background-size: contain;
+}
+
+input[type="radio"] {
+  position: relative;
+  top: 5px;
+  left: 5px;
+}
+
+select {
+  border: 1px solid $item-grey;
+  background: $colour-white url(data:image/png;base64,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) 100% -51px no-repeat;
+  height: 50px;
+  position: relative;
+  width: 100%;
+  margin-bottom: 30px;
+  cursor: pointer;
+  outline: 0 none;
+  padding: 12px 50px 14px 10px;
+  text-decoration: none;
+  font-size: 16px;
+
+  appearance: none;
+  box-shadow: border-box;
+  @include border-radius(0px);
+
+  @include breakpoint($screen-md) {
+    max-width: 290px;
+  }
+}
+
+textarea {
+  min-height: 65px;
+  padding: 12px 50px 14px 10px;
+  @include font-size($p-small-font-size);
+}
+
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  @extend .btn;
+}