wickes-css2 2.97.0-IM-1593-code-width.1 → 2.97.0-develop.2

package/src/scss/pages/page_address-book.scss

@@ -0,0 +1,356 @@
+@import '../helpers/helpers';
+@import '../components/leave-modal';
+
+.address-book {
+  padding-top: 0;
+  padding-bottom: 40px;
+
+  .globalMessages {
+    .notification {
+      margin-bottom: 8px;
+
+      &:first-child {
+        margin-top: 16px;
+      }
+    }
+  }
+
+  &__header {
+    margin-top: 16px;
+
+    .title {
+      @include font-size(26);
+      @include line-height(36);
+      font-weight: 500;
+      margin-bottom: 0;
+      text-align: left;
+    }
+
+    .btn--add-address {
+      margin-top: 24px;
+    }
+  }
+
+  &__items {
+    display: grid;
+    margin-top: 24px;
+    grid-gap: 16px;
+  }
+
+  .icon-wrap {
+    @include font-size(16);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+  }
+
+  .address-card {
+    position: relative;
+    padding: 24px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    border-radius: 4px;
+    border: 1px solid $gray;
+
+    &--add {
+      align-items: center;
+      justify-content: center;
+      grid-gap: 24px;
+      min-height: 328px;
+
+      .icon-wrap {
+        @include font-size(32);
+        margin-right: 0;
+        width: 48px;
+        height: 48px;
+        color: $blue-satin;
+      }
+
+      .description {
+        @include font-size(16);
+        @include line-height(24);
+        font-weight: 500;
+        margin-bottom: 0;
+      }
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 0;
+      top: 0;
+      background: $blue;
+      color: $white;
+      padding: 9px 9px 9px 16px;
+      border-radius: 0 0 0 24px;
+    }
+
+    &.default {
+      border-color: $blue;
+    }
+
+    &__type {
+      @include font-size(16);
+      @include line-height(24);
+      font-weight: 500;
+      margin-bottom: 16px;
+
+      .type-icon {
+        margin-right: 11px;
+      }
+    }
+
+    &__information {
+      margin-bottom: 16px;
+    }
+
+    &__ctas {
+      display: flex;
+      align-items: center;
+      margin-top: auto;
+      grid-gap: 24px;
+
+      .link {
+        @include font-size(14);
+        @include line-height(22);
+        font-weight: 500;
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .link--set-default {
+        margin-left: auto;
+      }
+    }
+
+    .information {
+      @include font-size(16);
+      @include line-height(24);
+      margin-bottom: 0;
+
+      & + .information {
+        margin-top: 4px;
+      }
+    }
+  }
+
+  &__form {
+    margin-top: 24px;
+
+    .form-row__label,
+    .form-row__field {
+      padding: 0;
+      margin: 0;
+    }
+
+    .form-row__error {
+      padding: 0;
+    }
+
+    .form-row__label {
+      @include font-size(16);
+      @include line-height(24);
+      font-weight: 500;
+      margin-bottom: 8px;
+    }
+
+    .form-row {
+      margin-bottom: 24px;
+      padding: 0;
+      margin-right: 0;
+      margin-left: 0;
+
+      &.row-title {
+        max-width: 112px;
+      }
+
+      &--required {
+        @include font-size(12);
+        @include line-height(16);
+        margin-bottom: 24px;
+      }
+    }
+
+    &-ctas {
+      margin-top: 24px;
+      display: flex;
+      grid-gap: 16px;
+    }
+  }
+}
+
+.delete-modal {
+  .modal-dialog {
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .modal-box__row {
+    width: 100%;
+  }
+
+  .modal-header {
+    padding: 20px 16px;
+
+    .modal-box__inner-columns {
+      display: flex;
+      align-items: center;
+    }
+
+    .modal-title {
+      @include font-size(18);
+      @include line-height(24);
+      font-weight: 500;
+      padding-right: 5px;
+    }
+
+    .icon-wrap {
+      min-width: 40px;
+      height: 40px;
+      font-size: 1.65rem;
+      color: $gray;
+      margin-right: 8px;
+    }
+
+    .close {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .address-info {
+    padding: 16px 16px 0;
+
+    &__data {
+      @include font-size(16);
+      @include line-height(24);
+      font-weight: 400;
+
+      .information {
+        margin-bottom: 0;
+
+        & + .information {
+          margin-top: 4px;
+        }
+      }
+    }
+
+    &__warning {
+      @include font-size(16);
+      @include line-height(24);
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      margin-bottom: 0;
+      margin-top: 16px;
+
+      .icon-wrap {
+        margin-right: 8px;
+      }
+
+      .info-icon {
+        color: $orange;
+      }
+    }
+  }
+
+  .actions {
+    padding: 16px;
+    margin-top: 16px;
+    display: flex;
+    grid-gap: 16px;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .address-book {
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .btn--add-address {
+        margin-top: 0;
+        max-width: 193px;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .address-book {
+    padding-bottom: 72px;
+
+    &__header {
+      margin-top: 24px;
+
+      .title {
+        @include font-size(34);
+        @include line-height(46);
+      }
+    }
+
+    &__items {
+      grid-template-columns: 1fr 1fr;
+      grid-auto-rows: auto;
+      grid-gap: 24px;
+    }
+
+    .address-card {
+      flex: 1 1 0;
+    }
+
+    &__form-ctas {
+      .btn {
+        width: auto;
+      }
+    }
+  }
+
+  .delete-modal {
+    .actions .btn {
+      width: auto;
+    }
+  }
+}
+
+
+@include media-breakpoint-up(lg) {
+  .address-book {
+    padding-top: 40px;
+    padding-bottom: 72px;
+
+    .globalMessages {
+      .notification {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 24px;
+        }
+      }
+    }
+
+    &__header {
+      margin-top: 0;
+    }
+
+    .add-address {
+      max-width: 453px;
+    }
+  }
+}

package/src/scss/pages/page_change-password.scss

@@ -0,0 +1,147 @@
+@import '../helpers/helpers';
+@import '../components/leave-modal';
+@import '../libs/pstrength';
+
+.change-password {
+  padding-top: 0;
+
+  .globalMessages {
+    .notification:first-child {
+      margin-top: 16px
+    }
+
+    .notification {
+      margin-bottom: 8px;
+
+      &_link {
+        color: $white;
+        text-decoration: none;
+        padding: 0 5px;
+
+        &:hover {
+          text-decoration: none;
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .warning-required {
+    margin-top: 0;
+    margin-bottom: 24px;
+
+    &::before {
+      margin-right: 4px;
+    }
+  }
+
+  &__header {
+    .title {
+      @include font-size(26);
+      @include line-height(36);
+      margin-bottom: 24px;
+    }
+  }
+
+  .account-nav {
+    margin-bottom: 16px;
+  }
+
+  &__form {
+    .form-row {
+      padding: 0;
+      margin: 0 0 24px;
+
+      &__label,
+      &__field {
+        padding-right: 0;
+        padding-left: 0;
+      }
+
+      &__label {
+        &::before {
+          margin-right: 4px;
+        }
+      }
+
+      &__info,
+      &__error {
+        padding-left: 0;
+      }
+
+      .tbx {
+        padding-right: 35px;
+      }
+
+      .toggle-show {
+        @include font-size(16);
+        cursor: pointer;
+        position: absolute;
+        right: 8px;
+        top: 0;
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+      }
+
+      .input-wrap {
+        position: relative;
+      }
+    }
+  }
+
+  &__ctas {
+    display: flex;
+
+    .btn--cancel {
+      margin-left: 16px;
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .change-password {
+    &__ctas {
+      .btn {
+        width: auto;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .change-password {
+    &__header {
+      .title {
+        @include font-size(34);
+        @include line-height(46);
+      }
+    }
+
+    .account-nav {
+      margin-bottom: 24px;
+    }
+
+    &__form {
+      max-width: 384px;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .change-password {
+    padding-top: 40px;
+
+    .globalMessages {
+      .notification:first-child {
+        margin-top: 0;
+      }
+
+      .notification:last-child {
+        margin-bottom: 24px;
+      }
+    }
+  }
+}