@comicrelief/storybook 1.34.0 → 2.0.0

package/src/sass/base/components/email-signup/_email-signup.scss

@@ -0,0 +1,835 @@
+/* Generic styles */
+input.button,
+input.form-text,
+
+select,
+.ui-selectmenu-button {
+  &:focus {
+    // outline: none; bad for accessibility
+    outline: $colour-red;
+  }
+}
+// safari only hack
+@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
+  ::-webkit-input-placeholder {
+    opacity:  0.7;
+  } 
+}
+
+::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+  color: $colour-jasper-grey;
+  font-size: 18px;
+  font-family: $body-font;
+  opacity:  1;
+  overflow: visible;
+}
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+  color: $colour-black;
+  font-size: 18px;
+  font-family: $body-font;
+  opacity:  0.7;
+  overflow: visible;
+}
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+  color: $colour-black;
+  font-size: 18px;
+  font-family: $body-font;
+  opacity:  0.7;
+  overflow: visible;
+}
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: $colour-jasper-grey;
+  font-size: 18px;
+  font-family: $body-font;
+  opacity:  1;
+  overflow: visible;
+}
+
+.button.form-submit:disabled {
+  @include opacity(0.2);
+}
+
+/* General ESU styles */
+.block--cr-email-signup {
+  float: left;
+  width: 100%;
+  background: #fafafa; // change for variable
+
+  label {
+    @include visuallyhidden;
+  }
+  .ui-selectmenu-button,
+  .form-text,
+  input[type=select]
+  input[type=text] {
+    font-size: 18px;
+    color: $colour-black;
+    font-family: $body-font;
+  }
+
+  // Hide custom error container and all hidden fields
+  .esu-errors.messages.messages--error,
+  .ajax-progress,
+  .esu-uuid,
+  .esu-region,
+  .esu-context-mapping,
+  .esu-weight {
+    display: none;
+  }
+
+  .block--cr-email-signup__inner-wrapper {
+    width: calc(100% - (8 * #{gutter()}) );
+    max-width: $max-width;
+    @include clearfix;
+    position: relative;
+    margin: 20px auto;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    @include breakpoint($screen-md) {
+      width: calc(100% - (4 * #{gutter()}) );
+    }
+  }
+
+  .form-item {
+    margin: 0;
+    position: relative;
+  }
+
+  .cr-email-signup--messages {
+    @include span(12);
+    position: relative;
+    height: 60px;
+    > div {
+      width: 100%;
+    }
+    .esu-title-message p,
+    h3 {
+      @extend h3;
+      color: $colour-white!important;
+    }
+    .esu-title-message {
+      margin-bottom: 26px;
+    }
+  }
+  
+  .esu-initial-message {
+    display: block;
+  }
+
+  .esu-first-success-message,
+  .esu-second-success-message {
+    p {
+      @extend h4;
+    }
+  }
+
+  /* General field styling */
+  .form-item-email,
+  .form-item-school-phase {
+    @include span(10);
+    margin-right: 0;
+  }
+
+  .button.form-submit {
+    @include border-radius(0);
+    @include span(2 wide);
+    height: 60px;
+    padding: 0;
+    margin-left: 0;
+    cursor: pointer;
+    color: #fff;
+    border: 0;
+    background-color: #5f5c59;
+    font-size: 14px;
+    font-weight: normal;
+    -webkit-appearance: none;
+    // iOS fix
+    -webkit-tap-highlight-color: transparent;
+    transition-property: background-color;
+    transition-duration: 600ms;
+    &:hover {
+      background-color: #272727;
+    }
+  }
+
+  .form-item-email,
+  .form-item-firstname,
+  .form-item-school-phase {
+    .form-text,
+    .form-item-email {
+      width: 100%;
+      height: 60px;
+      margin-right: 0;
+      padding: 15px 0 15px 20px;
+      border: 0;
+
+      &:focus {
+        border: 1px solid #5f5c59;
+      }
+    }
+  }
+
+  .form-item-school-phase {
+    select,
+    .ui-selectmenu-button {
+      width: 100% !important;
+      height: 60px;
+      margin-right: 0;
+      padding: 18px 0 15px 20px;
+    }
+    .ui-selectmenu-button span.ui-selectmenu-text {
+      padding: 0 10px;
+    }
+  }
+
+  // Error state
+  &.block--cr-email-signup--error {
+    position: relative;
+    .esu-errors.messages.messages--error {
+      @include span(12);
+      display: block;
+      margin-top: 60px;
+      margin-bottom: 10px;
+      text-align: center;
+      background: $colour-black url( $image-path + "error-red-cross.svg") 10px center no-repeat;
+      color: $colour-white;
+      border: none;
+      font-size: 18px;
+      box-shadow: none;
+      @include border-radius(0);
+      // backround-size breaks the background svg on IE, but is needed for chrome
+      -webkit-background-size: 40px;
+      padding: 20px 20px 20px 40px;
+    }
+
+    .form-item-email .form-text,
+    .form-item-school-phase .ui-selectmenu-button {
+      border: 2px solid $colour-black;
+    }
+  }
+
+
+  /* Standard ESU */
+  &.block--cr-email-signup--standard {
+    background-color: $colour-red;
+
+    &.error--email .form-item-email .form-text {
+      border: 3px solid $colour-black;
+    }
+
+    input[type=submit].button {
+      background: $colour-black url( $image-path + "arrow-right.svg") -4px center no-repeat;
+      @include border-radius(0 30px 30px 0);
+      text-indent: -9999px;
+      max-width: 60px;
+    }
+    .ui-selectmenu-button,
+    input[type=select],
+    input[type=text] {
+      @include border-radius(30px 0 0 30px);
+      max-width: 100%;
+    }
+    .cr-email-signup--messages {
+      @include span(12 no-gutter wide);
+      height: auto;
+
+      .esu-initial-message,
+      .esu-first-success-message,
+      .esu-second-success-message {
+        position: relative;
+        transform: translateY(0);
+        width: 100%;
+        
+        p {
+          // Override global colour-matching rules because... designers.
+          color: $colour-white;
+        }
+      }
+    }
+
+    .block--cr-email-signup__inner-wrapper {
+      .button.form-submit {
+        margin-top: 0;
+      }
+      form {
+        margin-top: 20px;
+        width: 100%;
+        margin-right: 0;
+        margin-left: 0;
+        float: left;
+
+        @include breakpoint($screen-lg) {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+
+  /* Workplace ESU */
+  &.block--cr-email-signup--workplace {
+    background-color: $colour-red;
+
+    /* Errors */
+    &.block--cr-email-signup--error {
+      // Placeholder styles to make visible over RED background!
+      &.error--firstname .form-item-firstname .form-text,
+      &.error--email .form-item-email .form-text {
+        border: 3px solid $colour-black;
+      }
+    }
+    .cr-email-signup--messages {
+      @include span(12 no-gutter wide);
+      height: auto;
+      h3 {
+        color: $colour-white;
+      }
+
+      .esu-initial-message,
+      .esu-first-success-message,
+      .esu-second-success-message {
+        position: relative;
+        transform: translateY(0);
+        @include span(12);
+        
+        p {
+          margin-bottom: 0;
+          // Override global colour-matching rules because... designers.
+          color: $colour-white !important;
+        }
+      }
+ 
+      .esu-initial-message {
+        margin-left: 0;
+      }
+
+    }
+
+    .block--cr-email-signup__inner-wrapper {
+      &:after {
+        content: none;
+      }
+
+      form {
+        width: 100%;
+        margin-left: 0;
+        margin-right: 0;
+        input[type="text"],
+        input[type="submit"] {
+          max-width: none;
+        }
+
+        .form-item-firstname,
+        .form-item-email {
+          margin-top: 26px;
+          @include span(12);
+          position: relative;
+        }
+
+        .form-submit {
+          margin-top: 26px;
+          padding: 12px 20px !important;
+          @include span(12);
+        }
+      }
+    }
+  }
+
+
+  /* Register Interest ESU */
+  &.block--cr-email-signup--register-interest {
+    background-color: $colour-purple;
+
+    &.error--email .form-item-email .form-text {
+      border: 3px solid $colour-black;
+    }
+
+    input[type=submit].button {
+      background: $colour-black url( $image-path + "arrow-right.svg") -4px center no-repeat;
+      @include border-radius(0 30px 30px 0);
+      text-indent: -9999px;
+      max-width: 60px;
+    }
+
+    .ui-selectmenu-button,
+    input[type=select],
+    input[type=text] {
+      @include border-radius(30px 0 0 30px);
+      max-width: 100%;
+    }
+
+    .cr-email-signup--messages {
+      height: auto;
+      text-align: left;
+      @include span(12);
+
+      h3 {
+        color: $colour-pink;
+      }
+
+      .esu-initial-message,
+      .esu-first-success-message {
+        position: relative;
+        transform: translateY(0);
+        float: left;
+        width: 100%;
+
+        p {
+          // Override global colour-matching rules because... designers.
+          color: $colour-white;
+        }
+      }
+    }
+
+    .block--cr-email-signup__inner-wrapper {
+      &:after {
+        background: none;
+        width: 0;
+        height: 0;
+        top: 0;
+        left: 0;
+        margin-left: 0;
+      }
+
+      form {
+        margin-top: 10px;
+        width: 100%;
+        margin-right: 0;
+        margin-left: 0;
+        float: left;
+
+        .form-item-email {
+          @include span(10); 
+          margin-right: 0;
+          position: relative;
+        }
+      }
+    }
+  }
+}
+
+
+/* Medium breakpoint */
+@include breakpoint($screen-md) {
+  .block--cr-email-signup {
+    .block--cr-email-signup__inner-wrapper {
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+    .cr-email-signup--messages {
+      @include span(4);
+    }
+    .form-item-email {
+      @include span(4);
+      margin-right: 0;
+      margin-left: 0;
+      
+      .form-text {
+        margin-right: 0;
+        margin-left: 0;
+      }
+    }
+    .button.form-submit {
+      @include span(1 wide);
+      margin-left: 0;
+      margin-top: 0;
+      margin-left: 0;
+    }
+    /*  Step 2 */
+    &.block--cr-email-signup--step-2 {
+      .form-item-school-phase {
+        @include span(10);
+        position: relative;
+        margin-right: 0;
+
+        select,
+        .ui-selectmenu-button {
+          width: 100% !important;
+          margin-right: 0;
+          margin-left: 0;
+        }
+      }
+     .button.form-submit {
+        margin-top: 0;
+        @include span(2);
+      }
+    }
+
+    &.block--cr-email-signup--step-3 {
+      .cr-email-signup--messages {
+        @include span(8);
+      }
+    }
+    // Error state
+    &.block--cr-email-signup--error {
+      .block--cr-email-signup__inner-wrapper {
+        padding-top: 75px;
+        &:after {
+          top: 80px;
+        }
+      }
+      .esu-errors.messages.messages--error {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: 0 auto;
+        max-width: span(6);
+      }
+    }
+    
+    /* Standard ESU */
+    &.block--cr-email-signup--standard {
+      .block--cr-email-signup__inner-wrapper {
+        form {
+          @include span(8);
+
+          .form-item-email {
+            @include span(9);
+            margin-right: 0;
+          }
+          .form-submit {
+            @include span(2);
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+    /* Workplace ESU */
+    &.block--cr-email-signup--workplace {
+      .block--cr-email-signup__inner-wrapper {
+        .cr-email-signup--messages {
+          @include span(12 no-gutter wide);
+          
+          .esu-initial-message {
+            margin-top: 0;
+            margin-left: 0;
+            margin-right: 0;
+          }
+        }
+
+        form {
+          position: relative;
+          float: left;
+          .form-item-firstname,
+          .form-item-email {
+            @include span(5);
+          }
+
+          .form-submit {
+            @include span(2);
+            position: relative;
+            left: auto;
+            top: auto;
+            width: span(2)!important;
+          }
+        }
+      }
+      &.block--cr-email-signup--error  {
+        .block--cr-email-signup__inner-wrapper {
+          padding-top: 96px;
+        }
+      }
+    }
+
+    /* Register Interest ESU */
+    &.block--cr-email-signup--register-interest {
+      .block--cr-email-signup__inner-wrapper {
+        &:after {
+          position:absolute;
+          content: "";
+          width: 127px;
+          height: 177px;
+          top: 50%;
+          left: 11%;
+          margin-top: -88px;
+        }
+
+        form {
+          width: 100%;
+          margin-right: 0;
+          margin-left: 0;
+          float: left;
+
+          .form-item-email {
+            @include span(9);
+            margin-right: 0;
+            float: left;
+          }
+
+          .form-submit {
+            @include span(4);
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* Large breakpoint */
+@include breakpoint($screen-lg) {
+  .block--cr-email-signup {
+    .cr-email-signup--messages {
+      @include span(4);
+      @include push(2);
+    }
+
+    .block--cr-email-signup__inner-wrapper {
+      padding-top: 40px;
+      padding-bottom: 40px;
+    }
+
+    .form-item-email {
+      @include span(3);
+      margin-right: 0;
+    }
+
+    &.block--cr-email-signup--step-2 {
+      .form-item-school-phase {
+        @include span(10);
+        margin-right: 0;
+      }
+    }
+
+    // Error state
+    &.block--cr-email-signup--error {
+      .esu-errors.messages.messages--error {
+        margin-top: 0;
+        margin-bottom: 0;
+        max-width: span(6);
+      }
+    }
+
+    /* Standard ESU */
+    &.block--cr-email-signup--standard {
+      .block--cr-email-signup__inner-wrapper {
+        .cr-email-signup--messages {
+          @include span(7);
+          text-align: left;
+        }
+
+        form {
+          @include span(5);
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          .form-item-email {
+            @include span(10);
+            margin-right: 0;
+          }
+          .form-submit {
+            @include span(2);
+            margin-left: 0;
+          }
+          .form-text,
+          .ui-selectmenu-button {
+            max-width: 310px;
+            float: right;
+          }
+        }
+      }
+
+
+      &.block--cr-email-signup--step-3 {
+        .block--cr-email-signup__inner-wrapper {
+          .cr-email-signup--messages {
+            @include span(8);
+            @include push(2);
+          }
+        }
+      }
+    }
+
+
+    /* Workplace ESU */
+    &.block--cr-email-signup--workplace {
+      .cr-email-signup--messages {
+        @include span(10);
+
+        .esu-initial-message {
+          @include span(8);
+          margin-top: 26px;
+        }
+      }
+
+      .block--cr-email-signup__inner-wrapper {
+        form {
+          @include span(10);
+          margin-left: 0;
+          padding-bottom: 0;
+        }
+      }
+      
+    }
+
+    /* Register Interest ESU */
+    &.block--cr-email-signup--register-interest {
+      .cr-email-signup--messages {
+        @include span(6);
+        @include push(5);
+      }
+
+      &.block--cr-email-signup--error {
+        .block--cr-email-signup__inner-wrapper {
+          padding-top: 155px;
+        }
+      }
+
+      .block--cr-email-signup__inner-wrapper {
+        // Use image height and offset to set minimal height of container to ensure image is always 100% visible
+        min-height: calc( 354px + 45px );
+
+        &:after {
+          background: url( $image-path + "fixedplaceholder-register-interest-bg-1x.png") no-repeat;
+          width: 254px;
+          height: 354px;
+          top: 50%;
+          left: 11%;
+          margin-top: -177px;
+        }
+
+        form {
+          margin-top: 10px;
+          @include span(6);
+          @include push(5);
+          float: left;
+          
+          .form-item-email {
+            @include span(8);
+            position: relative;
+            margin-right: 0;
+          }
+
+          .form-submit {
+            padding: 12px 20px !important;
+            @include span(4);
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* Hide-show steps */
+.block--cr-email-signup {
+  // Step 1
+  .form-item-email {
+    display: block;
+  }
+  .button.step2,
+  .form-item-school-phase,
+  .esu-first-success-message,
+  .esu-second-success-message {
+    display: none;
+  }
+  // Step 2
+  &.block--cr-email-signup--step-2 {
+    .form-item-email,
+    .button.step1,
+    .esu-initial-message,
+    .form-item-firstname {
+      display: none !important;
+    }
+    .button.step2,
+    .form-item-school-phase,
+    .esu-first-success-message {
+      display: block;
+    }
+  }
+  
+  // Step 3
+  &.block--cr-email-signup--step-3 {
+    .form-item-email,
+    .form-item-school-phase,
+    .button.form-submit,
+    .esu-initial-message {
+      display: none !important;
+    }
+
+    .esu-second-success-message {
+      display: block;
+    }
+  }
+}
+
+// Privacy policy
+.cr-email-signup-fundraise-form,
+.cr-email-signup-register-interest-form,
+.cr-email-signup-workplace-form,
+.cr-email-signup-form {
+  .esu-privacy-message p,
+  .esu-initial-message p {
+    color: $colour-white;
+  }
+
+  &.block--cr-email-signup--step-2, 
+  &.block--cr-email-signup--step-3 {
+    .esu-privacy-message {
+      display: none;
+    }
+  }
+
+  // ESU privacy message 
+  .esu-privacy-message {
+    margin-top: 26px;
+    @include span(12);
+    @include breakpoint($screen-lg) {
+      @include span(8);
+    }
+  }
+}
+
+// ESU Workplace add margin top to privacy message on large screen
+@include breakpoint($screen-lg) {
+  .cr-email-signup-workplace-form {
+    .esu-initial-message {
+      margin-top: 0; 
+    }
+    .esu-privacy-message {
+      @include span(8);
+      margin-top: 26px;
+    }
+  }
+}
+
+
+// ESU Fundraise & Standard
+.cr-email-signup-fundraise-form,
+.cr-email-signup-form {
+  &.block--cr-email-signup.block--cr-email-signup--standard .block--cr-email-signup__inner-wrapper form {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    float: left;
+  }
+
+  @include breakpoint($screen-lg) {
+    &.block--cr-email-signup.block--cr-email-signup--standard .block--cr-email-signup__inner-wrapper form {
+      @include span(6);
+      @include push(3);
+      top: 35%;
+    }
+  }
+}
+
+// ESU Interest
+.cr-email-signup-register-interest-form {
+  .esu-initial-message {
+    margin-bottom: 16px;
+  }
+  .esu-privacy-message {
+    @include span(12);
+    @include breakpoint($screen-md){
+    }
+    @include breakpoint($screen-lg) {
+      @include span(6);
+      @include push(5);
+    }
+  }
+}