wickes-css2 2.96.0-develop.1 → 2.96.0-develop.2

package/src/scss/pages/tradePro-rewards.scss

@@ -1,775 +1,170 @@
 @import '../helpers/helpers';
 @import '../components/barcode';
 
-.page_tradePro-rewards {
-  .voucher {
-    &__tradePro {
-      &.empty-voucher {
-        .voucher__tradePro-code {
-          flex: 0 0 100%;
-          max-width: 100%;
-          padding-top: 30px;
-          padding-bottom: 30px;
-
-          &-warning {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-          }
-        }
-      }
-
-      &.big-voucher {
-        .voucher {
-          font-size: 1rem;
-
-          &__tradePro {
-            &-description {
-              font-size: $font-size-base;
-            }
-          }
-        }
-      }
-
-      &.big-voucher-targeted {
-        .voucher {
-          font-size: 1rem;
-
-          &__tradePro {
-            &-banner {
-              &-wrap {
-                margin-bottom: 2px;
-                padding: 10px;
-                height: 80px;
-                width: 100%;
-                text-align: center;
-                color: $white;
-                background-color: $red;
-              }
-
-              &-info {
-                font-size: 1.375rem;
-                font-weight: 500;
-              }
-
-              &-expiry-date {
-                font-size: $font-size-base;
-              }
-            }
-
-            &-barcode {
-              text-align: center;
-              border-right: 1px solid $gray;
-
-              &-container {
-                border: 0;
-              }
-
-              &-number {
-                margin: 0;
-                padding: 0;
-              }
-
-              &-img {
-                max-height: 128px;
-
-                svg {
-                  width: 100%;
-                }
-              }
-            }
-
-            &-code {
-              display: initial;
-
-              &-container {
-                margin: 0;
-                text-align: center;
-              }
-
-              &-field {
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                margin: 0;
-
-                span {
-                  position: absolute;
-                  top: 20px;
-                  background: $white;
-                  padding: 0 15px;
-                  color: $warm-grey;
-                }
-              }
-
-              &-wrap {
-                height: 120px;
-                display: flex;
-                align-items: center;
-                width: 100%;
-              }
-
-              &-value {
-                height: 78px;
-                width: 100%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                border: 2px solid $gray-light;
-                font-size: 1.25rem;
-                font-weight: 500;
-                margin-right: 0;
-              }
-            }
-
-            &-barcode-title,
-            &-code-title {
-              margin: 0;
+$voucher-gap: 16px;
+$voucher-gap-desktop: 24px;
+$voucher-cell-height-lg: 246px;
+$voucher-cell-height-xl: 296px;
 
-              h5 {
-                margin: 0;
-              }
-            }
-
-            &-barcode-img,
-            &-code-field {
-              padding: 2% 10% 0;
-            }
-
-            &-barcode-info,
-            &-code-info {
-              .hint {
-                font-size: 1rem;
-              }
-            }
-
-            &-wrap {
-              padding: 25px 20px;
-              border: 1px dashed $black;
-            }
+.text-start {
+  text-align: left;
+}
 
-            &-description {
-              font-size: $font-size-base;
-            }
-          }
-        }
-      }
+.page_tradePro-rewards {
+  .voucher {
+    &__grid {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: auto;
+      grid-auto-flow: dense;
+      gap: $voucher-gap;
 
-      &.empty-code {
-        .voucher {
-          &__tradePro {
-            &-barcode {
-              &-container {
-                border: 0;
-                padding-bottom: 0;
-              }
-            }
-          }
-        }
+      @include media-breakpoint-up(lg) {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: $voucher-cell-height-lg;
+        gap: $voucher-gap-desktop;
       }
 
-      &:not(:last-child) {
-        margin-bottom: 40px;
+      @include media-breakpoint-up(xl) {
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: $voucher-cell-height-xl;
+        gap: $voucher-gap-desktop;
       }
+    }
 
-      &-barcode {
-        &-container {
-          border-right: 1px solid $gray;
-          font-size: 1rem;
-
-          svg {
-            width: 95%;
-          }
-
-          .barcode__footer_expand {
-            margin-top: 0;
-          }
-        }
-
-        &-number,
-        &-warning {
-          text-align: center;
-        }
-
-        &-number {
-          margin-top: -5px;
-          padding-bottom: 8px;
-        }
-
-        &-warning {
-          font-size: .785rem;
-          color: $warm-grey;
+    &__cell {
+      border-radius: $border-radius;
 
-          svg {
-            // sass-lint:disable no-important
-            width: 1rem !important;
-            height: 1rem;
-            color: $blue;
+      &:not(.voucher__description) {
+        min-height: 240px;
 
-            &:hover {
-              cursor: pointer;
-              color: $blue-dark;
-            }
-          }
+        @include media-breakpoint-up(lg) {
+          height: $voucher-cell-height-lg;
         }
 
-        &-brackets {
-          vertical-align: top;
+        @include media-breakpoint-up(xl) {
+          height: $voucher-cell-height-xl;
         }
       }
+    }
 
-      &-placeholder {
-        img {
-          width: 100%;
-
-          &[src=''] {//fix for IE-11
-            width: auto;
-          }
-        }
-
-        &-wrap {
-          position: relative;
-        }
+    &__column {
+      grid-area: auto;
+      text-align: center;
 
-        &-discount {
-          display: inline-block;
-          position: absolute;
-          top: 0;
-          right: 0;
-          padding: 5px 15px;
-          font-size: 1rem;
-          color: $white;
-          background: $red;
-          font-weight: bold;
-        }
+      @include media-breakpoint-up(lg) {
+        grid-area: 1 / 2 / 3 / 3;
       }
 
-      &-wrap {
-        padding: 10px 20px;
+      .voucher__cell {
         border: 1px solid $gray;
+        overflow: hidden;
 
-        &_button-absent {
-          .voucher__tradePro-code {
-            &-warning {
-              position: absolute;
-              bottom: 0;
-              right: 0;
-              left: 0;
-            }
-          }
-        }
-
-        .name,
-        .date {
-          display: block;
-        }
-      }
-
-      &-info {
-        margin: 1.5rem 0;
-      }
-
-      &-code {
-        display: flex;
-
-        &-container {
-          margin: auto;
-          align-self: center;
-
-          .fa-copy {
-            // sass-lint:disable no-important
-            width: 1rem !important;
-            height: 1rem;
-          }
-        }
-
-        &-title,
-        &-field {
-          margin-bottom: 1rem;
-        }
-
-        &-title {
-          text-align: center;
-        }
-
-        &-field {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          input {
-            padding: 10px;
-            border-radius: 3px;
-            border: 1px solid $gray;
-            color: $gray-dark;
-            font-weight: 500;
-            text-align: center;
-            min-width: 210px;
-            margin-right: 10px;
-
-            &[disabled] {
-              background: $white;
-              color: $gray-dark;
-              opacity: 1;
-            }
-          }
-
-          .icon {
-            align-self: center;
-          }
-
-          a {
-            align-self: center;
-            font-weight: 500;
-            position: relative;
-            bottom: 3px;
-          }
-        }
-
-        &-actions {
-          .btn {
-            width: 100%;
-          }
-        }
-
-        &-warning {
-          text-align: center;
-          font-size: .785rem;
-          color: $warm-grey;
-        }
-      }
-
-      .copy-barcode {
-        svg,
-        a {
-          &:hover {
-            cursor: pointer;
-            color: $blue-dark;
-          }
-        }
-
-        a {
-          text-decoration: none;
+        &:first-child {
+          margin-bottom: $voucher-gap;
 
-          &:hover {
-            text-decoration: $link-decoration;
+          @include media-breakpoint-up(lg) {
+            margin-bottom: $voucher-gap-desktop;
           }
         }
-
-        &_notification {
-          margin-top: 10px;
-          margin-bottom: 0;
-        }
       }
     }
 
-    .terms {
-      border-bottom: 1px solid $gray;
-      padding: 0;
+    &__image-wrap {
+      height: 100%;
 
-      &__btn-accordion {
-        @include primary-text;
-
-        padding: 20px 0;
-        color: $blue;
-        cursor: pointer;
+      img {
+        width: 100%;
+        height: auto;
 
-        .icon {
-          margin-right: 10px;
-
-          .fa-angle-down {
-            .terms_expanded & {
-              transform: rotate(180deg);
-            }
-          }
-        }
-      }
-
-      &__btn-toggle {
-        cursor: pointer;
-
-        .terms:not(.terms_expanded) & {
-          display: inline-block;
-          padding-top: 4px;
+        @include media-breakpoint-up(lg) {
+          width: auto;
+          height: 100%;
         }
       }
+    }
 
-      &__content {
-        padding-bottom: 20px;
+    &__barcode-img {
+      width: 311px;
+      height: 78px;
+      margin: auto;
 
-        .terms_expanded & {
-          display: block;
-          height: auto;
-          padding-right: 8px;
-        }
+      & > * {
+        width: 100%;
+        height: 100%;
       }
 
-      .terms__content {
-        display: none;
+      @include media-breakpoint-up(lg) {
+        width: 261px;
+        height: 66px;
       }
 
-      &_expanded {
-        .terms__content {
-          display: block;
-        }
+      @include media-breakpoint-up(xl) {
+        width: 450px;
+        height: 114px;
       }
     }
-  }
-
-  .rewards-counter {
-    position: relative;
-    margin-left: 10px;
-    top: 0;
-    left: 0;
-  }
-}
-
-.copy-barcode_notification {
-  & .notification {
-    margin-bottom: 1rem;
-  }
-}
 
-@include media-breakpoint-down(sm) {
-  .page_tradePro-rewards {
-    .account-heading {
-      &__content {
-        margin-bottom: 20px;
-      }
+    &__barcode-number {
+      margin-top: 4px;
     }
 
-    .voucher {
-      &__tradePro {
-        &.empty-voucher {
-          .voucher__tradePro-code {
-            padding-top: 10px;
-            padding-bottom: 10px;
-
-            &-warning {
-              position: static;
-            }
-          }
-
-          .voucher__tradePro-wrap {
-            .voucher__tradePro-code-title {
-              margin-top: 0;
-            }
-          }
-        }
-
-        &.big-voucher {
-          .voucher {
-            &__tradePro {
-              &-description {
-                border-bottom: 1px solid $gray;
-              }
-            }
-          }
-        }
-
-        &.big-voucher-targeted {
-          .voucher {
-            font-size: 1rem;
-
-            &__tradePro {
-              &-banner {
-                &-wrap {
-                  height: auto;
-                }
-              }
-
-              &-barcode {
-                border-right: 0;
-
-                &-container {
-                  border-bottom: 2px solid $gray;
-                  padding-bottom: 30px;
-
-                  .barcode__footer_expand {
-                    a {
-                      text-decoration: none;
-
-                      &:hover {
-                        text-decoration: $link-decoration;
-                      }
-                    }
-                  }
-                }
-
-                &-number {
-                  margin-top: -10px;
-                  margin-bottom: 15px;
-                }
-
-                &-img {
-                  padding: 0;
-                }
-              }
-
-              &-code {
-                &-container {
-                  padding-top: 30px;
-                }
-
-                &-field {
-                  padding: 0;
-
-                  span {
-                    top: 12px;
-                  }
-                }
-
-                &-info {
-                  margin-bottom: 15px;
-                }
-              }
-
-              &-barcode-info,
-              &-code-info {
-                .hint {
-                  white-space: normal;
-                }
-              }
-
-              &-description {
-                border-bottom: 1px solid $gray;
-              }
-            }
-          }
-        }
-
-        &-barcode {
-          &-container {
-            svg {
-              width: 100%;
-            }
-          }
-        }
-
-        &-subheader {
-          margin-top: 1rem;
-        }
-
-        &-wrap {
-          padding: 20px;
-
-          &_button-absent {
-            .voucher__tradePro-code {
-              &-warning {
-                position: static;
-                margin-top: 20px;
-              }
-            }
-          }
-        }
-
-        &-info {
-          padding-left: 15px;
-          padding-right: 15px;
-        }
-
-        &-code {
-          &-field {
-            justify-content: space-between;
-
-            input {
-              min-width: inherit;
-              margin-right: 0;
-            }
-          }
-        }
-
-        &-barcode,
-        &-code {
-          width: 100%;
-        }
-
-        &-barcode {
-          padding: 0 10px;
-
-          &-container {
-            border-right: 0;
-            padding-bottom: 15px;
-            border-bottom: 1px solid $gray;
-          }
-
-          &-number {
-            margin-top: -10px;
-            padding-bottom: 10px;
-          }
-        }
-
-        &-code {
-          padding-left: 10px;
-          padding-right: 10px;
-
-          &-title {
-            margin-top: 1rem;
-            text-align: center;
-          }
-
-          &-field {
-            justify-content: center;
-
-            .icon {
-              margin-left: 10px;
-              margin-right: 0;
-            }
-          }
-        }
-      }
+    &__label {
+      background: $blue-dark;
+      color: $white;
+      display: block;
+      padding: 4px;
+      font-size: .75rem;
+      font-weight: 500;
     }
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .page_tradePro-rewards {
-    .voucher {
-      &__tradePro {
-        &.big-voucher-targeted {
-          .voucher {
-            &__tradePro {
-              &-barcode-info,
-              &-code-info {
-                .hint {
-                  white-space: normal;
-                }
-              }
 
-              &-code {
-                .copy-barcode {
-                  &_notification {
-                    text-align: left;
-                    padding: 0 10%;
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        &-barcode {
-          &-brackets {
-            display: none;
-          }
-        }
-
-        &-subheader {
-          margin-top: 1rem;
-        }
+    &__code-field {
+      display: inline-block;
+      height: 40px;
+      padding: 8px 16px;
+      background: $ma-white;
+      border-radius: $border-radius;
+      cursor: pointer;
 
-        &-code {
-          &-field {
-            justify-content: space-between;
-          }
-        }
+      input {
+        background: none;
+        border: 0;
+        width: 90px;
+        pointer-events: none;
+      }
 
-        .terms {
-          &__btn-accordion {
-            display: block;
-          }
-        }
+      .icon {
+        color: $blue;
       }
     }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .page_tradePro-rewards {
-    .voucher {
-      &__tradePro {
-        &.big-voucher {
-          .voucher {
-            &__tradePro {
-              &-description {
-                flex: 4;
-              }
-
-              &-placeholder {
-                max-width: 60%;
-                flex: 6;
-              }
 
-              &-code-actions {
-                min-width: 150px;
-
-                &.competition-button {
-                  width: 150px;
-                }
-              }
-            }
-          }
-        }
-
-        &.empty-code {
-          .voucher {
-            &__tradePro {
-              &-wrap {
-                @include make-col(12);
-              }
-
-              &-barcode {
-                @include make-col(6);
-                margin: 0 auto;
-              }
-
-              &-code-warning {
-                padding-top: 30px;
-                padding-bottom: 30px;
-              }
-            }
-          }
-        }
+    &__description {
+      &-title {
+        font-weight: 700;
+        font-size: 1rem;
+      }
 
-        &-info,
-        &-wrap {
-          @include make-col(12);
-        }
+      &-text {
+        font-weight: 400;
+        font-size: .875rem;
+      }
 
-        &-placeholder,
-        &-description,
-        &-barcode,
-        &-code {
-          @include make-col-ready;
-          @include make-col(6);
-        }
+      &-button {
+        margin-top: 16px;
       }
     }
-  }
-}
 
-@include media-breakpoint-up(xl) {
-  .page_tradePro-rewards {
-    .voucher {
-      &__tradePro {
-        &.big-voucher-targeted {
-          .voucher {
-            &__tradePro {
-              &-barcode-info,
-              &-code-info {
-                .hint {
-                  white-space: nowrap;
-                }
-              }
-            }
-          }
-        }
-      }
+    &__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+      padding: 16px;
     }
-  }
-}
 
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .page_tradePro-rewards {
-    .voucher {
-      &__tradePro {
-        &-code-field {
-          span {
-            left: 32%;
-          }
-        }
-      }
+    &--terms {
+      padding: 24px 0 16px;
     }
   }
 }