@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/payin/default/components/images/CR__Arrow_L.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, 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 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;opacity:0.2;}
+	.st2{fill:none;}
+	.st3{fill:#3366FF;}
+</style>
+<g id="Grids" class="st0">
+	<g class="st1">
+		<polygon class="st2" points="47.9,48.242 4.342,91.8 47.9,91.8 		"/>
+		<polygon class="st2" points="48.242,48.1 91.8,91.658 91.8,48.1 		"/>
+		<polygon class="st2" points="48.1,48.242 48.1,91.8 91.658,91.8 		"/>
+		<polygon class="st2" points="47.758,47.9 4.2,4.342 4.2,47.9 		"/>
+		<polygon class="st2" points="0.206,48.1 0.2,48.098 0.2,95.658 4,91.858 4,48.1 		"/>
+		<polygon class="st2" points="48.242,47.9 91.8,47.9 91.8,4.342 		"/>
+		<polygon class="st2" points="48.1,4.2 48.1,47.758 91.658,4.2 		"/>
+		<polygon class="st2" points="47.9,47.758 47.9,4.2 4.342,4.2 		"/>
+		<polygon class="st2" points="4.2,48.1 4.2,91.658 47.758,48.1 		"/>
+		<polygon class="st2" points="95.794,48.1 92,48.1 92,91.858 95.8,95.658 95.8,48.098 		"/>
+		<polygon class="st2" points="91.858,92 48.1,92 48.1,95.794 48.098,95.8 95.658,95.8 		"/>
+		<polygon class="st2" points="95.8,47.902 95.8,0.342 92,4.142 92,47.9 95.794,47.9 		"/>
+		<polygon class="st2" points="48.1,0.206 48.1,4 91.858,4 95.658,0.2 48.098,0.2 		"/>
+		<polygon class="st2" points="47.9,95.794 47.9,92 4.142,92 0.342,95.8 47.902,95.8 		"/>
+		<polygon class="st2" points="4.142,4 47.9,4 47.9,0.206 47.902,0.2 0.342,0.2 		"/>
+		<polygon class="st2" points="0.206,47.9 4,47.9 4,4.142 0.2,0.342 0.2,47.902 		"/>
+		<path class="st3" d="M0,0v96h96V0H0z M0.2,95.658V48.098c0.002,0,0.004,0.003,0.006,0.003H4v43.758L0.2,95.658z M4.2,48.1h43.558
+			L4.2,91.658V48.1z M47.9,47.758L4.342,4.2H47.9V47.758z M48.1,4.2h43.558L48.1,47.758V4.2z M47.758,47.9H4.2V4.342L47.758,47.9z
+			 M47.9,48.242V91.8H4.342L47.9,48.242z M48.1,48.242L91.658,91.8H48.1V48.242z M48.242,48.1H91.8v43.558L48.242,48.1z
+			 M48.242,47.9L91.8,4.342V47.9H48.242z M92,4.142l3.8-3.8v47.561c-0.002,0-0.004-0.003-0.006-0.003H92V4.142z M91.858,4H48.1
+			V0.206c0-0.002-0.002-0.004-0.003-0.006h47.561L91.858,4z M47.9,0.206V4H4.142l-3.8-3.8h47.561
+			C47.902,0.202,47.9,0.204,47.9,0.206z M4,4.142V47.9H0.206c-0.002,0-0.004,0.002-0.006,0.003V0.342L4,4.142z M4.142,92H47.9v3.794
+			c0,0.002,0.002,0.004,0.003,0.006H0.342L4.142,92z M48.1,95.794V92h43.758l3.8,3.8H48.098C48.098,95.798,48.1,95.796,48.1,95.794z
+			 M92,91.858V48.1h3.794c0.002,0,0.004-0.002,0.006-0.003v47.561L92,91.858z"/>
+	</g>
+</g>
+<g id="Export">
+	<path d="M5.171,45.172l32-32C37.953,12.391,38.976,12,40,12s2.047,0.391,2.829,1.171c1.562,1.562,1.562,4.095,0,5.657L17.657,44H88
+		c2.209,0,4,1.791,4,4s-1.791,4-4,4H17.657l25.172,25.171c1.562,1.562,1.562,4.095,0,5.657c-1.562,1.562-4.095,1.562-5.657,0l-32-32
+		C3.609,49.266,3.609,46.734,5.171,45.172z"/>
+</g>
+</svg>

package/src/sass/themes/payin/default/components/images/CR__Chevron_D--white.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, 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 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;opacity:0.2;}
+	.st2{fill:none;}
+	.st3{fill:#ffffff;}
+</style>
+<g id="Grids" class="st0">
+	<g class="st1">
+		<polygon class="st2" points="47.9,48.242 4.342,91.8 47.9,91.8 		"/>
+		<polygon class="st2" points="48.242,48.1 91.8,91.658 91.8,48.1 		"/>
+		<polygon class="st2" points="48.1,48.242 48.1,91.8 91.658,91.8 		"/>
+		<polygon class="st2" points="47.758,47.9 4.2,4.342 4.2,47.9 		"/>
+		<polygon class="st2" points="0.206,48.1 0.2,48.098 0.2,95.658 4,91.858 4,48.1 		"/>
+		<polygon class="st2" points="48.242,47.9 91.8,47.9 91.8,4.342 		"/>
+		<polygon class="st2" points="48.1,4.2 48.1,47.758 91.658,4.2 		"/>
+		<polygon class="st2" points="47.9,47.758 47.9,4.2 4.342,4.2 		"/>
+		<polygon class="st2" points="4.2,48.1 4.2,91.658 47.758,48.1 		"/>
+		<polygon class="st2" points="95.794,48.1 92,48.1 92,91.858 95.8,95.658 95.8,48.098 		"/>
+		<polygon class="st2" points="91.858,92 48.1,92 48.1,95.794 48.098,95.8 95.658,95.8 		"/>
+		<polygon class="st2" points="95.8,47.902 95.8,0.342 92,4.142 92,47.9 95.794,47.9 		"/>
+		<polygon class="st2" points="48.1,0.206 48.1,4 91.858,4 95.658,0.2 48.098,0.2 		"/>
+		<polygon class="st2" points="47.9,95.794 47.9,92 4.142,92 0.342,95.8 47.902,95.8 		"/>
+		<polygon class="st2" points="4.142,4 47.9,4 47.9,0.206 47.902,0.2 0.342,0.2 		"/>
+		<polygon class="st2" points="0.206,47.9 4,47.9 4,4.142 0.2,0.342 0.2,47.902 		"/>
+		<path class="st3" d="M0,0v96h96V0H0z M0.2,95.658V48.098c0.002,0,0.004,0.003,0.006,0.003H4v43.758L0.2,95.658z M4.2,48.1h43.558
+			L4.2,91.658V48.1z M47.9,47.758L4.342,4.2H47.9V47.758z M48.1,4.2h43.558L48.1,47.758V4.2z M47.758,47.9H4.2V4.342L47.758,47.9z
+			 M47.9,48.242V91.8H4.342L47.9,48.242z M48.1,48.242L91.658,91.8H48.1V48.242z M48.242,48.1H91.8v43.558L48.242,48.1z
+			 M48.242,47.9L91.8,4.342V47.9H48.242z M92,4.142l3.8-3.8v47.561c-0.002,0-0.004-0.003-0.006-0.003H92V4.142z M91.858,4H48.1
+			V0.206c0-0.002-0.002-0.004-0.003-0.006h47.561L91.858,4z M47.9,0.206V4H4.142l-3.8-3.8h47.561
+			C47.902,0.202,47.9,0.204,47.9,0.206z M4,4.142V47.9H0.206c-0.002,0-0.004,0.002-0.006,0.003V0.342L4,4.142z M4.142,92H47.9v3.794
+			c0,0.002,0.002,0.004,0.003,0.006H0.342L4.142,92z M48.1,95.794V92h43.758l3.8,3.8H48.098C48.098,95.798,48.1,95.796,48.1,95.794z
+			 M92,91.858V48.1h3.794c0.002,0,0.004-0.002,0.006-0.003v47.561L92,91.858z"/>
+	</g>
+</g>
+<g id="Export">
+	<path d="M48,72c-1.024,0-2.047-0.391-2.829-1.171l-32-32c-1.562-1.562-1.562-4.095,0-5.657c1.562-1.562,4.095-1.562,5.657,0
+		L48,62.343l29.171-29.172c1.562-1.562,4.095-1.562,5.657,0c1.562,1.562,1.562,4.095,0,5.657l-32,32C50.047,71.609,49.024,72,48,72z
+		"/>
+</g>
+</svg>

package/src/sass/themes/payin/default/components/images/CR__Chevron_D.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, 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 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;opacity:0.2;}
+	.st2{fill:none;}
+	.st3{fill:#3366FF;}
+</style>
+<g id="Grids" class="st0">
+	<g class="st1">
+		<polygon class="st2" points="47.9,48.242 4.342,91.8 47.9,91.8 		"/>
+		<polygon class="st2" points="48.242,48.1 91.8,91.658 91.8,48.1 		"/>
+		<polygon class="st2" points="48.1,48.242 48.1,91.8 91.658,91.8 		"/>
+		<polygon class="st2" points="47.758,47.9 4.2,4.342 4.2,47.9 		"/>
+		<polygon class="st2" points="0.206,48.1 0.2,48.098 0.2,95.658 4,91.858 4,48.1 		"/>
+		<polygon class="st2" points="48.242,47.9 91.8,47.9 91.8,4.342 		"/>
+		<polygon class="st2" points="48.1,4.2 48.1,47.758 91.658,4.2 		"/>
+		<polygon class="st2" points="47.9,47.758 47.9,4.2 4.342,4.2 		"/>
+		<polygon class="st2" points="4.2,48.1 4.2,91.658 47.758,48.1 		"/>
+		<polygon class="st2" points="95.794,48.1 92,48.1 92,91.858 95.8,95.658 95.8,48.098 		"/>
+		<polygon class="st2" points="91.858,92 48.1,92 48.1,95.794 48.098,95.8 95.658,95.8 		"/>
+		<polygon class="st2" points="95.8,47.902 95.8,0.342 92,4.142 92,47.9 95.794,47.9 		"/>
+		<polygon class="st2" points="48.1,0.206 48.1,4 91.858,4 95.658,0.2 48.098,0.2 		"/>
+		<polygon class="st2" points="47.9,95.794 47.9,92 4.142,92 0.342,95.8 47.902,95.8 		"/>
+		<polygon class="st2" points="4.142,4 47.9,4 47.9,0.206 47.902,0.2 0.342,0.2 		"/>
+		<polygon class="st2" points="0.206,47.9 4,47.9 4,4.142 0.2,0.342 0.2,47.902 		"/>
+		<path class="st3" d="M0,0v96h96V0H0z M0.2,95.658V48.098c0.002,0,0.004,0.003,0.006,0.003H4v43.758L0.2,95.658z M4.2,48.1h43.558
+			L4.2,91.658V48.1z M47.9,47.758L4.342,4.2H47.9V47.758z M48.1,4.2h43.558L48.1,47.758V4.2z M47.758,47.9H4.2V4.342L47.758,47.9z
+			 M47.9,48.242V91.8H4.342L47.9,48.242z M48.1,48.242L91.658,91.8H48.1V48.242z M48.242,48.1H91.8v43.558L48.242,48.1z
+			 M48.242,47.9L91.8,4.342V47.9H48.242z M92,4.142l3.8-3.8v47.561c-0.002,0-0.004-0.003-0.006-0.003H92V4.142z M91.858,4H48.1
+			V0.206c0-0.002-0.002-0.004-0.003-0.006h47.561L91.858,4z M47.9,0.206V4H4.142l-3.8-3.8h47.561
+			C47.902,0.202,47.9,0.204,47.9,0.206z M4,4.142V47.9H0.206c-0.002,0-0.004,0.002-0.006,0.003V0.342L4,4.142z M4.142,92H47.9v3.794
+			c0,0.002,0.002,0.004,0.003,0.006H0.342L4.142,92z M48.1,95.794V92h43.758l3.8,3.8H48.098C48.098,95.798,48.1,95.796,48.1,95.794z
+			 M92,91.858V48.1h3.794c0.002,0,0.004-0.002,0.006-0.003v47.561L92,91.858z"/>
+	</g>
+</g>
+<g id="Export">
+	<path d="M48,72c-1.024,0-2.047-0.391-2.829-1.171l-32-32c-1.562-1.562-1.562-4.095,0-5.657c1.562-1.562,4.095-1.562,5.657,0
+		L48,62.343l29.171-29.172c1.562-1.562,4.095-1.562,5.657,0c1.562,1.562,1.562,4.095,0,5.657l-32,32C50.047,71.609,49.024,72,48,72z
+		"/>
+</g>
+</svg>

package/src/sass/themes/payin/default/components/images/CR__Chevron_U.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, 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 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;opacity:0.2;}
+	.st2{fill:none;}
+	.st3{fill:#3366FF;}
+</style>
+<g id="Grids" class="st0">
+	<g class="st1">
+		<polygon class="st2" points="47.9,48.242 4.342,91.8 47.9,91.8 		"/>
+		<polygon class="st2" points="48.242,48.1 91.8,91.658 91.8,48.1 		"/>
+		<polygon class="st2" points="48.1,48.242 48.1,91.8 91.658,91.8 		"/>
+		<polygon class="st2" points="47.758,47.9 4.2,4.342 4.2,47.9 		"/>
+		<polygon class="st2" points="0.206,48.1 0.2,48.098 0.2,95.658 4,91.858 4,48.1 		"/>
+		<polygon class="st2" points="48.242,47.9 91.8,47.9 91.8,4.342 		"/>
+		<polygon class="st2" points="48.1,4.2 48.1,47.758 91.658,4.2 		"/>
+		<polygon class="st2" points="47.9,47.758 47.9,4.2 4.342,4.2 		"/>
+		<polygon class="st2" points="4.2,48.1 4.2,91.658 47.758,48.1 		"/>
+		<polygon class="st2" points="95.794,48.1 92,48.1 92,91.858 95.8,95.658 95.8,48.098 		"/>
+		<polygon class="st2" points="91.858,92 48.1,92 48.1,95.794 48.098,95.8 95.658,95.8 		"/>
+		<polygon class="st2" points="95.8,47.902 95.8,0.342 92,4.142 92,47.9 95.794,47.9 		"/>
+		<polygon class="st2" points="48.1,0.206 48.1,4 91.858,4 95.658,0.2 48.098,0.2 		"/>
+		<polygon class="st2" points="47.9,95.794 47.9,92 4.142,92 0.342,95.8 47.902,95.8 		"/>
+		<polygon class="st2" points="4.142,4 47.9,4 47.9,0.206 47.902,0.2 0.342,0.2 		"/>
+		<polygon class="st2" points="0.206,47.9 4,47.9 4,4.142 0.2,0.342 0.2,47.902 		"/>
+		<path class="st3" d="M0,0v96h96V0H0z M0.2,95.658V48.098c0.002,0,0.004,0.003,0.006,0.003H4v43.758L0.2,95.658z M4.2,48.1h43.558
+			L4.2,91.658V48.1z M47.9,47.758L4.342,4.2H47.9V47.758z M48.1,4.2h43.558L48.1,47.758V4.2z M47.758,47.9H4.2V4.342L47.758,47.9z
+			 M47.9,48.242V91.8H4.342L47.9,48.242z M48.1,48.242L91.658,91.8H48.1V48.242z M48.242,48.1H91.8v43.558L48.242,48.1z
+			 M48.242,47.9L91.8,4.342V47.9H48.242z M92,4.142l3.8-3.8v47.561c-0.002,0-0.004-0.003-0.006-0.003H92V4.142z M91.858,4H48.1
+			V0.206c0-0.002-0.002-0.004-0.003-0.006h47.561L91.858,4z M47.9,0.206V4H4.142l-3.8-3.8h47.561
+			C47.902,0.202,47.9,0.204,47.9,0.206z M4,4.142V47.9H0.206c-0.002,0-0.004,0.002-0.006,0.003V0.342L4,4.142z M4.142,92H47.9v3.794
+			c0,0.002,0.002,0.004,0.003,0.006H0.342L4.142,92z M48.1,95.794V92h43.758l3.8,3.8H48.098C48.098,95.798,48.1,95.796,48.1,95.794z
+			 M92,91.858V48.1h3.794c0.002,0,0.004-0.002,0.006-0.003v47.561L92,91.858z"/>
+	</g>
+</g>
+<g id="Export">
+	<path d="M50.829,25.171l32,32c1.562,1.562,1.562,4.095,0,5.657c-1.562,1.562-4.095,1.562-5.657,0L48,33.657L18.829,62.829
+		c-1.562,1.562-4.095,1.562-5.657,0c-1.562-1.562-1.562-4.095,0-5.657l32-32C45.953,24.391,46.976,24,48,24
+		S50.047,24.391,50.829,25.171z"/>
+</g>
+</svg>

package/src/sass/themes/payin/default/components/images/drop-down-dark-purple.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="drop_down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 9" style="enable-background:new 0 0 16 9;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#29022c;}
+</style>
+<polygon class="st0" points="14.4,0.3 8,6.7 1.6,0.3 0.9,1 8,8.1 8.7,7.4 15.1,1 "/>
+</svg>

package/src/sass/themes/payin/default/components/images/paypal.svg

@@ -0,0 +1,8 @@
+<svg width="100" height="32" viewBox="0 0 100 32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet">
+    <path fill="#003087" d="M 12 4.917 L 4.2 4.917 C 3.7 4.917 3.2 5.317 3.1 5.817 L 0 25.817 C -0.1 26.217 0.2 26.517 0.6 26.517 L 4.3 26.517 C 4.8 26.517 5.3 26.117 5.4 25.617 L 6.2 20.217 C 6.3 19.717 6.7 19.317 7.3 19.317 L 9.8 19.317 C 14.9 19.317 17.9 16.817 18.7 11.917 C 19 9.817 18.7 8.117 17.7 6.917 C 16.6 5.617 14.6 4.917 12 4.917 Z M 12.9 12.217 C 12.5 15.017 10.3 15.017 8.3 15.017 L 7.1 15.017 L 7.9 9.817 C 7.9 9.517 8.2 9.317 8.5 9.317 L 9 9.317 C 10.4 9.317 11.7 9.317 12.4 10.117 C 12.9 10.517 13.1 11.217 12.9 12.217 Z"></path>
+    <path fill="#003087" d="M 35.2 12.117 L 31.5 12.117 C 31.2 12.117 30.9 12.317 30.9 12.617 L 30.7 13.617 L 30.4 13.217 C 29.6 12.017 27.8 11.617 26 11.617 C 21.9 11.617 18.4 14.717 17.7 19.117 C 17.3 21.317 17.8 23.417 19.1 24.817 C 20.2 26.117 21.9 26.717 23.8 26.717 C 27.1 26.717 29 24.617 29 24.617 L 28.8 25.617 C 28.7 26.017 29 26.417 29.4 26.417 L 32.8 26.417 C 33.3 26.417 33.8 26.017 33.9 25.517 L 35.9 12.717 C 36 12.517 35.6 12.117 35.2 12.117 Z M 30.1 19.317 C 29.7 21.417 28.1 22.917 25.9 22.917 C 24.8 22.917 24 22.617 23.4 21.917 C 22.8 21.217 22.6 20.317 22.8 19.317 C 23.1 17.217 24.9 15.717 27 15.717 C 28.1 15.717 28.9 16.117 29.5 16.717 C 30 17.417 30.2 18.317 30.1 19.317 Z"></path>
+    <path fill="#003087" d="M 55.1 12.117 L 51.4 12.117 C 51 12.117 50.7 12.317 50.5 12.617 L 45.3 20.217 L 43.1 12.917 C 43 12.417 42.5 12.117 42.1 12.117 L 38.4 12.117 C 38 12.117 37.6 12.517 37.8 13.017 L 41.9 25.117 L 38 30.517 C 37.7 30.917 38 31.517 38.5 31.517 L 42.2 31.517 C 42.6 31.517 42.9 31.317 43.1 31.017 L 55.6 13.017 C 55.9 12.717 55.6 12.117 55.1 12.117 Z"></path>
+    <path fill="#009cde" d="M 67.5 4.917 L 59.7 4.917 C 59.2 4.917 58.7 5.317 58.6 5.817 L 55.5 25.717 C 55.4 26.117 55.7 26.417 56.1 26.417 L 60.1 26.417 C 60.5 26.417 60.8 26.117 60.8 25.817 L 61.7 20.117 C 61.8 19.617 62.2 19.217 62.8 19.217 L 65.3 19.217 C 70.4 19.217 73.4 16.717 74.2 11.817 C 74.5 9.717 74.2 8.017 73.2 6.817 C 72 5.617 70.1 4.917 67.5 4.917 Z M 68.4 12.217 C 68 15.017 65.8 15.017 63.8 15.017 L 62.6 15.017 L 63.4 9.817 C 63.4 9.517 63.7 9.317 64 9.317 L 64.5 9.317 C 65.9 9.317 67.2 9.317 67.9 10.117 C 68.4 10.517 68.5 11.217 68.4 12.217 Z"></path>
+    <path fill="#009cde" d="M 90.7 12.117 L 87 12.117 C 86.7 12.117 86.4 12.317 86.4 12.617 L 86.2 13.617 L 85.9 13.217 C 85.1 12.017 83.3 11.617 81.5 11.617 C 77.4 11.617 73.9 14.717 73.2 19.117 C 72.8 21.317 73.3 23.417 74.6 24.817 C 75.7 26.117 77.4 26.717 79.3 26.717 C 82.6 26.717 84.5 24.617 84.5 24.617 L 84.3 25.617 C 84.2 26.017 84.5 26.417 84.9 26.417 L 88.3 26.417 C 88.8 26.417 89.3 26.017 89.4 25.517 L 91.4 12.717 C 91.4 12.517 91.1 12.117 90.7 12.117 Z M 85.5 19.317 C 85.1 21.417 83.5 22.917 81.3 22.917 C 80.2 22.917 79.4 22.617 78.8 21.917 C 78.2 21.217 78 20.317 78.2 19.317 C 78.5 17.217 80.3 15.717 82.4 15.717 C 83.5 15.717 84.3 16.117 84.9 16.717 C 85.5 17.417 85.7 18.317 85.5 19.317 Z"></path>
+    <path fill="#009cde" d="M 95.1 5.417 L 91.9 25.717 C 91.8 26.117 92.1 26.417 92.5 26.417 L 95.7 26.417 C 96.2 26.417 96.7 26.017 96.8 25.517 L 100 5.617 C 100.1 5.217 99.8 4.917 99.4 4.917 L 95.8 4.917 C 95.4 4.917 95.2 5.117 95.1 5.417 Z"></path>
+</svg>

package/src/sass/themes/payin/default/components/payin-form.twig

@@ -0,0 +1,119 @@
+<section id="payin-step-three" class="content">
+        <div class="form__step form__step--payment">
+            <form name="comicrelief_payinbundle_payment" method="post" novalidate="novalidate" class="has-validation-callback">
+
+            <div class="form__row form__row--payment">
+                <div class="form__fieldset">
+                    <h4 class="form__subtitle">Payment details</h4>
+                    <p class="form__subcopy">There are a number of different ways you can pay - with a credit or debit
+                        card or through paypal.</p>
+                    
+
+<div class="form__field--wrapper form__text form__field--amount"><label class="form__field form__field--amount form__text" for="comicrelief_payinbundle_payment_amount">Amount</label><input type="text" id="comicrelief_payinbundle_payment_amount" name="comicrelief_payinbundle_payment[amount]" placeholder="0.00" data-validation="number" data-validation-allowing="range[1.00;5000.00],float" data-validation-error-msg="Please enter number between 1 and 5000" class="form__field form__field--amount"><div class="form__field--error"></div></div>
+                    
+
+<div class="form__field--wrapper form__choice form__field--currency"><label class="form__field form__field--currency form__choice required" for="comicrelief_payinbundle_payment_currency">Currency</label><select id="comicrelief_payinbundle_payment_currency" name="comicrelief_payinbundle_payment[currency]" class="form__field form__field--currency"><option value="GBP">£ GBP</option><option value="USD">$ USD</option><option value="AUD">$ AUD</option><option value="EUR">€ EUR</option></select><div class="form__field--error"></div></div>
+                    
+
+<div class="form__field--wrapper form__choice form__field--paymentType"><label class="form__field form__field--paymentType form__choice required">Payment method</label><div id="comicrelief_payinbundle_payment_paymentType" data-validation-error-msg="Please select a payment type" class="form__field form__field--paymentType"><div class="form__radio payment--mscd"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_0" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="mscd" class="form__field form__input payment__mscd" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_0" class="required">MSCD</label></div><div class="form__radio payment--dmc"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_1" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="dmc" class="form__field form__input payment__dmc" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_1" class="required">DMC</label></div><div class="form__radio payment--maes"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_2" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="maes" class="form__field form__input payment__maes" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_2" class="required">MAES</label></div><div class="form__radio payment--visa"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_3" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="visa" class="form__field form__input payment__visa" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_3" class="required">VISA</label></div><div class="form__radio payment--visd"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_4" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="visd" class="form__field form__input payment__visd" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_4" class="required">VISD</label></div><div class="form__radio payment--vied"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_5" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="vied" class="form__field form__input payment__vied" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_5" class="required">VIED</label></div><div class="form__radio payment--paypal_express"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_6" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="paypal_express" class="form__field form__input payment__paypal_express" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_6" class="required">PAYPAL</label></div><div class="form__radio payment--amex"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_7" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="amex" class="form__field form__input payment__amex" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_7" class="required">AMEX</label></div><div class="form__radio payment--jcb"><input type="radio" id="comicrelief_payinbundle_payment_paymentType_8" name="comicrelief_payinbundle_payment[paymentType]" required="required" value="jcb" class="form__field form__input payment__jcb" data-validation="required"><label for="comicrelief_payinbundle_payment_paymentType_8" class="required">JCB</label></div></div><div class="form__field--error"></div></div>
+                </div>
+            </div>
+
+            <div class="form__row form__row--giftaid">
+                <div class="form__fieldset">
+                    <h1 class="font--center donate__giftaid-title">
+                        <img src="/images/logo/gift_aid_logo.png">
+                    </h1>
+                    <h4 class="font--center font--red">Tick ‘Yes’ to Gift Aid and the Government will give us 25% on top of your donation.</h4>
+                    <h4 class="font--center">It doesn’t cost you a penny, and helps to keep us going.</h4>
+                    <div class="form-type-checkbox form-item">
+                        
+
+<div class="form__field--wrapper form__checkbox form__field--giftaid"><input type="checkbox" id="comicrelief_payinbundle_payment_giftaid" name="comicrelief_payinbundle_payment[giftaid]" class="form__field form__field--giftaid" value="1"><label class="form__field form__field--giftaid form__checkbox" for="comicrelief_payinbundle_payment_giftaid">Yes, I would like Comic Relief to claim Gift Aid on my donation</label><div class="form__field--error"></div></div>
+                    </div>
+                    <p class="font--xsmall font--center">*If you’re making a personal donation please give us your full name, home address and tick the box or we can’t claim Gift Aid. You must be a UK taxpayer and understand that if you pay less Income Tax and / or Capital Gains Tax in your current tax year than the amount of Gift Aid claimed on all your donations it is your responsibility to pay any difference. <a class="link--inline-grey" href="http://www.rednoseday.com/frequently-asked-questions#gift-aid" id="faq-gift-aid" target="_blank">Find out more about Gift Aid</a>.</p>
+                </div>
+            </div>
+
+            <div class="form__row form__row--your-detail">
+                <div class="form__fieldset">
+                    <h4 class="form__subtitle">Your details</h4>
+                    
+
+<div class="form__field--wrapper form__choice form__field--title"><label class="form__field form__field--title form__choice required" for="comicrelief_payinbundle_payment_title">Title</label><select id="comicrelief_payinbundle_payment_title" name="comicrelief_payinbundle_payment[title]" class="form__field form__field--title"><option value="mr">Mr.</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="miss">Miss</option><option value="dr">Dr</option><option value="mx">Mx</option></select><div class="form__field--error"></div></div>
+                    
+
+<div class="form__field--wrapper form__text form__field--firstName"><label class="form__field form__field--firstName form__text required" for="comicrelief_payinbundle_payment_firstName">First name</label><input type="text" id="comicrelief_payinbundle_payment_firstName" name="comicrelief_payinbundle_payment[firstName]" required="required" placeholder="James" maxlength="25" data-validation="alphanumeric required length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Please fill in your first name" data-validation-help="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--firstName has-help-txt" data-validation-length="max25"><div class="form__field--error"></div></div>
+                    
+
+<div class="form__field--wrapper form__text form__field--lastName"><label class="form__field form__field--lastName form__text required" for="comicrelief_payinbundle_payment_lastName">Last name</label><input type="text" id="comicrelief_payinbundle_payment_lastName" name="comicrelief_payinbundle_payment[lastName]" required="required" placeholder="Bond" maxlength="50" data-validation="alphanumeric required length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Please fill in your last name" data-validation-help="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--lastName has-help-txt" data-validation-length="max50"><div class="form__field--error"></div></div>
+                    
+
+<div class="form__field--wrapper form__text form__field--first"><label class="form__field form__field--first form__text required" for="comicrelief_payinbundle_payment_email_first">Email</label><input type="email" id="comicrelief_payinbundle_payment_email_first" name="comicrelief_payinbundle_payment[email][first]" required="required" placeholder="example@example.com" maxlength="100" data-validation="email required email length" data-validation-error-msg="Please enter a valid e-mail address" class="form__field form__field--first" data-validation-length="max100"><div class="form__field--error"></div></div>
+                    
+
+<div class="form__field--wrapper form__text form__field--second"><label class="form__field form__field--second form__text required" for="comicrelief_payinbundle_payment_email_second">Confirm email</label><input type="email" id="comicrelief_payinbundle_payment_email_second" name="comicrelief_payinbundle_payment[email][second]" required="required" placeholder="example@example.com" maxlength="100" data-validation="confirmation required email length" data-validation-confirm="comicrelief_payinbundle_payment[email][first]" data-validation-error-msg="Email address does not match" class="form__field form__field--second" data-validation-length="max100"><div class="form__field--error"></div></div>
+                </div>
+            </div>
+
+            <div class="form__row form__row--billing-detail form__row--address-lookup">
+                <div class="form__fieldset">
+                    <h4 class="form__subtitle">Billing address</h4>
+                    <p class="form__subcopy">Please enter the billing address which matches the method of your
+                        payment.</p>
+                    <!-- address detail -->
+
+<!-- postcode search -->
+
+
+<div class="form__field--wrapper form__text form__field--postcode"><div class="search-box"><label class="form__field form__field--postcode form__text required" for="comicrelief_payinbundle_payment_postcode">Postcode</label><input type="text" id="comicrelief_payinbundle_payment_postcode" name="comicrelief_payinbundle_payment[postcode]" required="required" placeholder="SE1 7TP" maxlength="15" data-validation="required required length" data-validation-error-msg="Please enter a valid postcode" class="form__field form__field--postcode postcodeSearch" data-validation-length="max15"><div class="search-box-button"><label for="postcode_button" class="visually-hidden">Search</label><input type="button" id="postcode_button" name="btnPostcodeSearch" class="btn button btnPostcodeSearch postcode" value="FIND ADDRESS"></div><div class="form__field--error"></div></div></div>
+
+<!-- address dropdown list -->
+<div class="form__field--wrapper form__select form__field--address-list address-list-wrapper">
+  <label for="address-list" class="form__field">Please select your address:</label>
+  <select id="comicrelief_payinbundle_payment_address-list" name="address-list" class="form__field select-address address-list">
+    <option value="">Please select...</option>
+  </select>
+</div>
+
+<!-- address fields -->
+<div class="form__field--wrapper form__checkbox form__field--address-detail form__checkbox-text-only">
+
+  <label for="address-detail" class="form__field form__checkbox">Or enter your address manually</label>
+  <input type="checkbox" id="address-detail" class="form__field form__field--address-detail">
+
+  <div class="form__field--address">
+
+  
+
+<div class="form__field--wrapper form__text form__field--address1"><label class="form__field form__field--address1 form__text required" for="comicrelief_payinbundle_payment_address1">Address1</label><input type="text" id="comicrelief_payinbundle_payment_address1" name="comicrelief_payinbundle_payment[address1]" required="required" maxlength="100" data-validation="alphanumeric required length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Please fill in address 1" data-validation-help="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--address1 has-help-txt" data-validation-length="max100"><div class="form__field--error"></div></div>
+  
+
+<div class="form__field--wrapper form__text form__field--address2"><label class="form__field form__field--address2 form__text" for="comicrelief_payinbundle_payment_address2">Address2</label><input type="text" id="comicrelief_payinbundle_payment_address2" name="comicrelief_payinbundle_payment[address2]" maxlength="100" data-validation="alphanumeric length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--address2" data-validation-length="max100" data-validation-optional="true"><div class="form__field--error"></div></div>
+  
+
+<div class="form__field--wrapper form__text form__field--address3"><label class="form__field form__field--address3 form__text" for="comicrelief_payinbundle_payment_address3">Address3</label><input type="text" id="comicrelief_payinbundle_payment_address3" name="comicrelief_payinbundle_payment[address3]" maxlength="100" data-validation="alphanumeric length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--address3" data-validation-length="max100" data-validation-optional="true"><div class="form__field--error"></div></div>
+  
+
+<div class="form__field--wrapper form__text form__field--address4"><label class="form__field form__field--address4 form__text" for="comicrelief_payinbundle_payment_address4">Address4</label><input type="text" id="comicrelief_payinbundle_payment_address4" name="comicrelief_payinbundle_payment[address4]" maxlength="100" data-validation="alphanumeric length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--address4" data-validation-length="max100" data-validation-optional="true"><div class="form__field--error"></div></div>
+  
+
+<div class="form__field--wrapper form__text form__field--town"><label class="form__field form__field--town form__text required" for="comicrelief_payinbundle_payment_town">Town</label><input type="text" id="comicrelief_payinbundle_payment_town" name="comicrelief_payinbundle_payment[town]" required="required" maxlength="50" data-validation="alphanumeric required length" data-validation-allowing="-_ '@/&amp;" data-validation-error-msg="Please fill in town" data-validation-help="Only allows alphanumeric characters and _ - / @ &amp;" class="form__field form__field--town has-help-txt" data-validation-length="max50"><div class="form__field--error"></div></div>
+  
+
+<div class="form__field--wrapper form__choice form__field--country"><label class="form__field form__field--country form__choice required" for="comicrelief_payinbundle_payment_country">Country</label><select id="comicrelief_payinbundle_payment_country" name="comicrelief_payinbundle_payment[country]" class="form__field form__field--country"><option value="GB">United Kingdom</option><option disabled="disabled">-------------------</option><option value="AF">Afghanistan</option><option value="AX">Åland Islands</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua &amp; Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AC">Ascension Island</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia &amp; Herzegovina</option><option value="BW">Botswana</option><option value="BR">Brazil</option><option value="IO">British Indian Ocean Territory</option><option value="VG">British Virgin Islands</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="IC">Canary Islands</option><option value="CV">Cape Verde</option><option value="BQ">Caribbean Netherlands</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="EA">Ceuta &amp; Melilla</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CC">Cocos (Keeling) Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CG">Congo - Brazzaville</option><option value="CD">Congo - Kinshasa</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="CI">Côte d’Ivoire</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CW">Curaçao</option><option value="CY">Cyprus</option><option value="CZ">Czechia</option><option value="DK">Denmark</option><option value="DG">Diego Garcia</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="EZ">Eurozone</option><option value="FK">Falkland Islands</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HN">Honduras</option><option value="HK">Hong Kong SAR China</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="XK">Kosovo</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau SAR China</option><option value="MK">Macedonia</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar (Burma)</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="KP">North Korea</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Islands</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RE">Réunion</option><option value="RO">Romania</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="ST">São Tomé &amp; Príncipe</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SX">Sint Maarten</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia &amp; South Sandwich Islands</option><option value="KR">South Korea</option><option value="SS">South Sudan</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="BL">St. Barthélemy</option><option value="SH">St. Helena</option><option value="KN">St. Kitts &amp; Nevis</option><option value="LC">St. Lucia</option><option value="MF">St. Martin</option><option value="PM">St. Pierre &amp; Miquelon</option><option value="VC">St. Vincent &amp; Grenadines</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard &amp; Jan Mayen</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TL">Timor-Leste</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad &amp; Tobago</option><option value="TA">Tristan da Cunha</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks &amp; Caicos Islands</option><option value="TV">Tuvalu</option><option value="UM">U.S. Outlying Islands</option><option value="VI">U.S. Virgin Islands</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="AE">United Arab Emirates</option><option value="UN">United Nations</option><option value="US">United States</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatican City</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="WF">Wallis &amp; Futuna</option><option value="EH">Western Sahara</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option></select><div class="form__field--error"></div></div>
+  </div>
+</div>
+                </div>
+            </div>
+
+            <div class="form__row form__nav"><div class="form__fieldset"><div class="form__field--wrapper form__submit form__field--submit"><button type="submit" id="comicrelief_payinbundle_payment_submit" name="comicrelief_payinbundle_payment[submit]">Make donation</button></div></div></div>
+    </form>
+            <div class="form__row form__row--logos">
+                <p><img src="/images/logo/frsb.png"></p>
+                <p class="font--center font--small">
+                    By working with the best partners like <strong>Braintree</strong>, <strong>DigiCert</strong>, <strong>Paypal</strong>, <strong>Stripe</strong> and <strong>Worldpay</strong>, we'll keep your data safe. To donate using your <strong>Charities Aid Foundation</strong> account <a target="_blank" class="link link--gainsboro-grey inline" href="https://www.cafonline.org/">click here</a>
+                </p>
+            </div>
+        </div>
+    </section>

package/src/sass/themes/payin/default/payin-default.scss

@@ -0,0 +1,46 @@
+// ==========================================================================
+// Core variables * comment files you want to override
+// ==========================================================================
+
+@import "../../../base/variables/_colours.scss";
+@import "../../../base/variables/_grid.scss";
+@import "../../../base/variables/_lists.scss";
+@import "../../../base/variables/_theme.scss";
+@import "../../../base/variables/_typography.scss";
+
+// ==========================================================================
+// Core components
+// ==========================================================================
+
+@import "../../../base/_core";
+
+// ==========================================================================
+// Base UI components
+// ==========================================================================
+
+@import "../../../base/components/background-colours/background-colours";
+@import "../../../base/components/buttons/buttons";
+@import "../../../base/components/grid/grid";
+@import "../../../base/components/header/base-header";
+@import "../../../base/components/links/links";
+@import "../../../base/components/list/list";
+@import "../../../base/components/navigation/footer-nav";
+@import "../../../base/components/footer/footer";
+@import "../../../base/components/navigation/hamburger-menu-button";
+@import "../../../base/components/navigation/main-nav";
+@import "../../../base/components/promo-header/promo-header";
+@import "../../../base/components/selectbox/selectbox";
+@import "../../../base/components/social/social";
+@import "../../../base/components/table/table";
+@import "../../../base/components/typography/typography";
+
+// ==========================================================================
+// Payin variables
+// ==========================================================================
+@import "variables/_payin-mixins";
+@import "variables/_payin-colours";
+
+// ==========================================================================
+// Payin UI components
+// ==========================================================================
+@import "components/_payin-form.scss"

package/src/sass/themes/payin/default/variables/_payin-colours.scss

@@ -0,0 +1,5 @@
+// Payin Colours
+
+$colour-black: #29022c;
+$colour-black-pearl: #030e1a;
+$colour-grey: #e8e8e8;

package/src/sass/themes/payin/default/variables/_payin-mixins.scss

@@ -0,0 +1,5 @@
+@mixin clearfix {
+  content: "";
+  display: table;
+  clear: both;
+}

package/src/sass/themes/payin/payin-rnd.scss

@@ -0,0 +1,3 @@
+@import 'rednoseday/payin-rednoseday.scss';
+@import '_payin-styleguide.scss';
+

package/src/sass/themes/payin/payin-sr.scss

@@ -0,0 +1,3 @@
+@import 'sportrelief/payin-sportrelief.scss';
+@import '_payin-styleguide.scss';
+

package/src/sass/themes/payin/rednoseday/components/failure/_failure.scss

@@ -0,0 +1,41 @@
+.promo-header {
+  &--failure {
+    min-height: 308px;
+  }
+
+  .promo-header__content {
+    .promo-header__content-inner {
+      @include breakpoint($screen-md) {
+        width: 70%;
+      }
+    }
+  }
+}
+
+.inner-content {
+  margin: 40px auto;
+  width: span(10);
+
+  @include breakpoint($screen-md) {
+    width: span(7);
+    margin-top: 80px;
+  }
+
+  @include breakpoint($screen-lg) {
+    width: span(5);
+  }
+
+  p {
+    color: $colour-black;
+  }
+
+  .contact-information {
+    margin-top: 35px;
+    @include font-size($p-small-font-size);
+
+    a {
+      text-decoration: underline;
+      color: $colour-black;
+    }
+  }
+}

package/src/sass/themes/payin/rednoseday/components/footer/_footer.scss

@@ -0,0 +1,22 @@
+footer[role=contentinfo] {
+  padding: 50px 25px 185px;
+  background-color: $colour-deep-violet;
+  overflow: hidden;
+
+  @media (min-width: 740px) {
+    padding: 50px 25px 140px;
+  }
+
+  @media (min-width: 1024px) {
+    padding-top: 100px;
+    padding-bottom: 120px;
+  }
+
+  .footer__social-links {
+    margin: 0;
+
+    li {
+      margin: 0 1.25%;
+    }
+  }
+}