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

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

@@ -0,0 +1,776 @@
+/* this file is for the feature switcher for previous rewards and can be deleted later */
+@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;
+
+              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;
+            }
+
+            &-description {
+              font-size: $font-size-base;
+            }
+          }
+        }
+      }
+
+      &.empty-code {
+        .voucher {
+          &__tradePro {
+            &-barcode {
+              &-container {
+                border: 0;
+                padding-bottom: 0;
+              }
+            }
+          }
+        }
+      }
+
+      &:not(:last-child) {
+        margin-bottom: 40px;
+      }
+
+      &-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;
+
+          svg {
+            // sass-lint:disable no-important
+            width: 1rem !important;
+            height: 1rem;
+            color: $blue;
+
+            &:hover {
+              cursor: pointer;
+              color: $blue-dark;
+            }
+          }
+        }
+
+        &-brackets {
+          vertical-align: top;
+        }
+      }
+
+      &-placeholder {
+        img {
+          width: 100%;
+
+          &[src=''] {//fix for IE-11
+            width: auto;
+          }
+        }
+
+        &-wrap {
+          position: relative;
+        }
+
+        &-discount {
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 5px 15px;
+          font-size: 1rem;
+          color: $white;
+          background: $red;
+          font-weight: bold;
+        }
+      }
+
+      &-wrap {
+        padding: 10px 20px;
+        border: 1px solid $gray;
+
+        &_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;
+
+          &:hover {
+            text-decoration: $link-decoration;
+          }
+        }
+
+        &_notification {
+          margin-top: 10px;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .terms {
+      border-bottom: 1px solid $gray;
+      padding: 0;
+
+      &__btn-accordion {
+        @include primary-text;
+
+        padding: 20px 0;
+        color: $blue;
+        cursor: pointer;
+
+        .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;
+        }
+      }
+
+      &__content {
+        padding-bottom: 20px;
+
+        .terms_expanded & {
+          display: block;
+          height: auto;
+          padding-right: 8px;
+        }
+      }
+
+      .terms__content {
+        display: none;
+      }
+
+      &_expanded {
+        .terms__content {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+
+    .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;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@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 {
+            justify-content: space-between;
+          }
+        }
+
+        .terms {
+          &__btn-accordion {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+
+@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;
+              }
+            }
+          }
+        }
+
+        &-info,
+        &-wrap {
+          @include make-col(12);
+        }
+
+        &-placeholder,
+        &-description,
+        &-barcode,
+        &-code {
+          @include make-col-ready;
+          @include make-col(6);
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .page_tradePro-rewards {
+    .voucher {
+      &__tradePro {
+        &.big-voucher-targeted {
+          .voucher {
+            &__tradePro {
+              &-barcode-info,
+              &-code-info {
+                .hint {
+                  white-space: nowrap;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .page_tradePro-rewards {
+    .voucher {
+      &__tradePro {
+        &-code-field {
+          span {
+            left: 32%;
+          }
+        }
+      }
+    }
+  }
+}