@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/donate/components/money-buy-block/_money-buy-block.scss

@@ -0,0 +1,272 @@
+// Money buy block
+.form__row--moneybuy-block {
+  p {
+    @extend p;
+    color: $colour--white;
+  }
+
+  p,
+  .number-input-label {
+    color:  $colour--white;
+  }
+
+  .form__fieldset {
+    @include clearfix;
+    position: relative;
+
+    &.form__amount-submit {
+      margin-top: 45px;
+      text-align: center;
+
+      #comicrelief_payinbundle_payment_amount_submit {
+        width: 100%;
+
+        @include breakpoint($screen-lg) {
+          width: auto;
+        }
+      }
+    }
+
+    // Shift button down to make room for error
+    &.form__field-error-wrapper {
+      & + .form__fieldset.form__amount-submit.submit-btn-wrapper {
+        margin-top: 65px;
+
+        @include breakpoint($screen-md){
+          margin-top: 70px;
+        }
+
+        @include breakpoint($screen-lg){
+          margin-top: 70px;
+        }
+      }
+    }
+
+    // Adjust button to show larger alert message
+    &.payin-alert {
+      & + .form__fieldset.form__amount-submit.submit-btn-wrapper {
+        margin-top: 85px;
+        @include breakpoint($screen-md){
+          margin-top: 90px;
+        }
+      }
+    }
+    
+    // Move second error msg under first
+    &.payin-alert.form__field-error-wrapper {
+      .form__field-error-container--amount + .form__field-error-container--payin-alert {
+        margin-top: 40px;
+      }
+      // Move submit button accordingly
+      & + .form__fieldset.form__amount-submit.submit-btn-wrapper {
+        margin-top: 125px;
+        @include breakpoint($screen-md){
+          margin-top: 130px;
+        }
+      }
+    }
+  }
+
+  .form__field-error-container--amount,
+  .form__field-error-container--payin-alert {
+    position: absolute;
+    top: 60px;
+    width: 100%;
+    left: 0;
+  }
+
+  .form__togglebtn-amount {
+    .select-amount-btn {
+      position: relative;
+      margin: 0 0 20px 0;
+      padding: 10px 0;
+      height: auto;
+      min-height: 84px;
+      background-color: $colour--btn-light;
+      color: $colour--black;
+      font-family: $body-font;
+      line-height: 22px;
+      text-transform: none;
+      text-align: left;
+      text-shadow: none;
+      letter-spacing: normal;
+      background-clip: inherit;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+      transition: box-shadow 0.2s ease-in-out;
+      @include border-radius(8px);
+      @include colour-transition();
+
+      &.selected,
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $colour--btn-selected;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
+        color: $colour--white;
+        border: none;
+        // outline: none; // should we be doing this?
+
+        .select-amount,
+        .select-amount--context {
+          color: $colour-white;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        background-color: $colour--btn-hover;
+      }
+
+      &:active {
+        background-color: $colour--btn-on-click;
+      }
+
+      // Override colour for selected buttons to 'remove' focus and hover colour
+      &.selected {
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: $colour--btn-selected;
+        }
+      }
+
+      span {
+        color: inherit;
+      }
+
+      .select-amount {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 80px;
+        font-family: $font-bold;
+        text-align: center;
+        width: 125px;
+
+        .amount-text {
+          position: relative;
+          top: calc(50% - 0.5em);
+          font-size: 30px;
+
+          &-value {
+            font-size: 35px;
+            top: calc(50% - 0.5em + 3px);
+          }
+        }
+      }
+
+      .select-amount--context {
+        display: block;
+        margin-left: 100px;
+        margin-right: 5px;
+        max-width: 65%;
+        line-height: 1.3;
+        margin-left: 125px;
+      }
+    }
+  }
+
+  .currency-input-label {
+    position: absolute;
+    left: 50%;
+    top: 14px;
+    line-height: 21px;
+    color: $colour--black;
+    font-size: 18px;
+    font-family: $body-font;
+    margin-left: 15px;
+    margin-top: 1px;
+    z-index: 9;
+    @include breakpoint($screen-lg) {
+      left: 30%;
+    }
+  }
+
+  div.form__field--amount {
+    width: 50%;
+    margin: 0;
+    float: left;
+    
+    @include breakpoint($screen-lg) {
+      width: 70%;
+    }
+    
+    .form__field--amount {
+      width: 100%;
+      @include placeholder($colour--placeholder, 18px, $body-font, 22px, 700, 20px, 24px);
+      font-size: 18px;
+      padding-left: 28px;
+      float: left;
+      border-color: $colour-white;
+      @include border-radius(0 8px 8px 0);
+      position: relative;
+
+      @include breakpoint($screen-lg) {
+        margin-right: 0px;
+      }
+    }
+
+    &.form__field--wrapper {
+      margin-bottom: 0;
+
+      @include breakpoint($screen-lg) {
+        //width: 260px;
+      }
+    }
+
+    .error-container {
+      position: relative;
+      top: 25px;
+
+      .help-block.form-error {
+        position: absolute;
+        top: 25px;
+      }
+    }
+  }
+
+  div.form__field--currency {
+    width: 50%;
+    margin: 0;
+    float: left;
+
+    @include breakpoint($screen-lg) {
+      width: 30%;
+    }
+  
+    .form__field--currency {
+      float: left;
+      width: 100%;
+      background-color: $colour-white;
+      border-color: $colour-white;
+      border-left: none;
+      font-size: 18px;
+      line-height: 24px;
+      padding: 12px 50px 12px 10px;
+      background-position: calc(100% - 22px) 15px;
+      @include border-radius(8px);
+    }
+
+    #comicrelief_payinbundle_payment_currency {
+      @include breakpoint($screen-lg) {
+        margin: 0;
+      }
+    }
+  }
+
+  .form__field--currency,
+  .form__field--amount {
+    label {
+      @extend .visually-hidden;
+    }
+  }
+}
+
+// Payin-specific
+section.payin #field-error--amount {
+  .form-error {
+    margin-top: 80px;
+  }
+}

package/src/sass/themes/donate/components/partner-footer/_partner-footer.scss

@@ -0,0 +1,43 @@
+.partners {
+	@include container;
+	color: $colour-deep-violet;
+  padding: 25px 20px;
+
+	@include breakpoint($screen-md) {
+    text-align: center;
+  }
+
+	.donate__partners {
+		font-family: $body-font;
+		display: flex;
+		justify-content: center;
+
+		.donate__partners-fr {
+			@include span(9);
+			width: 185px;
+		}
+
+		.donate__partners-digicert {
+			@include span(3);
+			width: 85px;
+		}
+
+		img {
+			max-width: 100%;
+			display: block;
+		}
+	}
+
+	.donate__partners-copy {
+		color: $colour--black;
+		margin-top: 25px;
+		p, 
+		.hyperlink {
+			color: inherit;
+		}
+	}
+
+	.hyperlink {
+		color: $colour--black;	
+	}
+}

package/src/sass/themes/donate/components/success/_success.scss

@@ -0,0 +1,137 @@
+.inner-content {
+	font-family: $anton;
+	text-align: center;
+
+	p,
+	ul {
+		color: $colour--white;
+		text-align: left;
+
+		@include breakpoint($screen-md) {
+			text-align: center;
+		}
+	}
+
+	h1 {
+		font-size: 38px;
+
+		@include breakpoint($screen-md) {
+			font-size: 58px;
+		}
+	}
+
+	&.inner-content--success {
+		position: relative;
+
+		a.btn {
+			display: inline-block;
+		}
+
+		.success-transactionsid {
+			text-align: center;
+
+			@include breakpoint($screen-md) {
+				margin: 40px 0;
+			}
+		}
+
+		.btn--red {
+			padding: 23px 20px 19px;
+		}
+
+		.success-social-links {
+			span {
+				display: inline-block;
+				vertical-align: middle;
+				color: $colour--white;
+			}
+
+			ul {
+				display: inline-block;
+				vertical-align: middle;
+				margin: 0 0 0 15px;
+
+				li {
+					display: inline-block;
+					margin-right: 5px;
+
+					@include breakpoint($screen-md) {
+						margin-right: 15px;
+					}
+
+					a {
+						display: inline-block;
+						width: 25px;
+						height: 25px;
+
+						@include breakpoint($screen-md) {
+							width: 50px;
+							height: 50px;
+						}
+
+						.icon {
+							display: inherit;
+							width: inherit;
+							height: inherit;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.inner-content {
+	h1 {
+		@include font-size($h1-font-size);
+	}
+
+	&.failure {
+		.btn {
+			margin-bottom: 15px;
+		}
+	}
+
+	&.sorry {
+		width: 85%;
+		margin-bottom: 50px;
+		@include breakpoint($screen-md) {
+			width: span(10);
+		}
+
+		h1 {
+			margin-bottom: 50px;
+			line-height: 1.3;
+		}
+
+		p {
+			margin-bottom: 30px;
+			line-height: 1.3;
+			text-align: center;
+		}
+	}
+}
+
+// Success page
+h1.success-heading {
+	font-size: 48px;
+	line-height: 59px;
+	margin-top: 60px;
+ }
+
+ .success-subtitle {
+	font-weight: bold;
+	font-size: 30px;
+	line-height: 37px;
+	margin: 50px 0;
+ }
+  
+.success-details {
+	font-size: 20px;
+	line-height: 24px;
+	margin: 50px 0;
+}
+
+.success-share {
+	margin-top: 20px;
+}

package/src/sass/themes/donate/components/typography/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:500,700,800');

package/src/sass/themes/donate/components/typography/_typography.scss

@@ -0,0 +1,188 @@
+h1, h2, h3, h4, h5 { 
+  text-transform: none;
+  font-family: $montserrat;
+  font-weight: 700;
+  color: $colour--white;
+  strong {
+    font-family: inherit;
+  }
+}
+
+p, span {
+  font-family: $montserrat;
+  strong {
+    font-family: inherit;
+  }
+}
+
+p,
+span,
+.link {
+  color: $colour--white;
+  font-family: $montserrat;
+}
+
+.link {
+  border-bottom: 4px solid $colour--white;
+}
+
+p:last-child {
+  margin: 0;
+}
+
+/* Override base theme variations, to make current content 'work' on some level */
+h1 {
+  margin-bottom: 30px;
+
+  &.font--font-black,
+  &.font--xlarge,
+  &.font--black-shadow  {
+    @include font-size($h1-font-size);
+  }
+}
+
+h2,
+h3,
+p.text--subtitle {
+  margin-bottom: 20px;
+}
+
+p {
+  &.font--xlarge,
+  &.font--large,
+  &.font--small,
+  &.font--xsmall {
+    @include font-size($p-font-size);
+  }
+}
+
+h1.text--title {
+  @include font-size($h1-title-font-size);
+  margin-bottom: 30px;
+}
+
+h1, h2, h3, h4, h5, p, span {
+  &.font {
+    &--red,
+    &--royal-blue,
+    &--dark-purple,
+    &--purple,
+    &--black,
+    &--dark-grey,
+    &--grey  {
+      color: $colour-dark-purple;
+    }
+
+    &--mint-green,
+    &--white,
+    &--light-grey,
+    &--blue-gradient {
+      color: $colour-white;
+    }
+  }
+}
+
+/* 2019 Classes .. to be used via Sass @extends, not as standalone WYSIWYG classes */
+.text--subtitle,
+.text--subtitle-small,
+.text--label,
+.text--label-small {
+  font-family: $montserrat;
+  font-weight: 800;
+  @include font-size($field-label-font-size);
+  strong {
+    font-weight: inherit;
+  }
+}
+
+.text--footnote {
+  font-family: $montserrat;
+  font-weight: 500;
+  strong {
+    font-weight: 700;
+  }
+}
+
+// Temporarily remove these to eventually refactor with new classes
+/* .text--body {
+  @include font-size($body-font-size);
+}
+.text--body-small {
+  @include font-size($body-small-font-size);
+}
+.text--subtitle {
+  @include font-size($subtitle-font-size);
+}
+.text--subtitle-small {
+  @include font-size($subtitle-small-font-size);
+  margin-bottom: 15px;
+}
+.text--label {
+  @include font-size($label-font-size);
+  text-transform: uppercase;
+}
+.text--label-small {
+  @include font-size($label-small-font-size);
+  text-transform: uppercase;
+}
+.text--footnote {
+  @include font-size($footnote-font-size);
+} */
+
+/* Backwards mapping so our existing content in the CMS doesn't look too wonky */
+i.font--family-black,
+.font--family-black, 
+i.font--family-bold, 
+.font--family-bold {
+  font-family: $montserrat;
+  font-weight: 800;
+  text-transform: unset;
+}
+
+i.font--family-regular,
+.font--family-regular,
+.font--family-medium,
+i.font--family-medium {
+  font-family: $montserrat;
+  font-weight: 700;
+  text-transform: unset;
+}
+
+.font--family-light,
+i.font--family-light {
+  font-family: $montserrat;
+  font-weight: 500;
+  text-transform: unset;
+}
+
+label {
+  @extend .text--label;
+  @include font-size($field-label-font-size);
+}
+
+/* Per breakpoint tweaks for Membership */
+.no-wrap--md-lg {
+  @include breakpoint($screen-md) {
+    white-space: nowrap;
+  }
+}
+
+.no-wrap--lg {
+  @include breakpoint($screen-lg) {
+    white-space: nowrap;
+  }
+}
+
+br.break--md-lg {
+  display: none;
+  @include breakpoint($screen-md) {
+    display: inline;
+  }
+}
+
+br.break--lg {
+  display: none;
+  @include breakpoint($screen-lg) {
+    display: inline;
+  }
+}