wickes-css2 2.94.0-develop.2 → 2.94.0-develop.21

package/src/scss/pages/page_default-store.scss

@@ -0,0 +1,634 @@
+@import '../helpers/helpers';
+@import '../components/my-account/mobile-nav';
+@import '../components/big-wins';
+
+.default-store {
+  margin: 0;
+  display: block;
+  padding: 0 0 40px;
+
+  .globalMessages {
+    padding-top: 16px;
+
+    .notification {
+      margin-bottom: 8px;
+    }
+  }
+
+  &__search {
+    order: 2;
+    min-height: 458px;
+  }
+
+  &__wrap {
+    margin-top: 16px;
+  }
+
+  &__title {
+    font-size: 1.625rem;
+    font-weight: 500;
+    line-height: 2.25rem;
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  &__subtitle {
+    margin-top: 16px;
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 2rem;
+
+    &--change {
+      margin-top: 24px;
+    }
+  }
+
+  .store-unavailable {
+    margin-top: 16px;
+    background: $ma-white;
+    padding: 40px 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    min-height: 305px;
+
+    &__title {
+      font-size: 1.25rem;
+      font-weight: 500;
+      line-height: 2rem;
+      margin-bottom: 0;
+    }
+
+    .icon {
+      margin-top: 36px;
+      color: $blue-satin;
+      font-size: 5rem;
+      height: auto;
+    }
+  }
+
+  .search-store {
+    display: flex;
+    align-items: flex-end;
+
+    &__wrap {
+      display: flex;
+      width: 100%;
+    }
+
+    &__label {
+      font-size: 1rem;
+      font-weight: 500;
+      line-height: 1.5rem;
+    }
+
+    .form-row {
+      padding: 0;
+      margin: 0;
+      justify-content: flex-start;
+      flex-direction: column;
+
+      &__error {
+        padding: 0;
+        width: calc(100% - 40px);
+      }
+    }
+
+    &__input {
+      display: flex;
+      align-items: center;
+      border-radius: 3px;
+      border: 1px solid $gray;
+      padding: 7px 8px 7px 16px;
+
+      .input {
+        border: 0;
+        width: 100%;
+        padding: 0;
+        outline: none;
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
+
+      .btn--clear {
+        padding: 0 6px;
+        position: relative;
+        top: auto;
+        right: auto;
+        margin: 0 8px 0 0;
+        transform: none;
+
+        .icon {
+          height: auto;
+          font-size: 1rem;
+          color: $gray-dark;
+        }
+      }
+
+      .btn-search {
+        padding: 0 4px;
+        background: none;
+        display: flex;
+        align-items: center;
+
+        .icon {
+          color: $blue;
+          font-size: 1rem;
+          height: auto;
+        }
+      }
+
+      &-error {
+        @include field-error;
+      }
+    }
+
+    .btn--location {
+      margin-left: 16px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 40px;
+    }
+  }
+
+  .list-of-store {
+    .bw {
+      margin-top: 16px;
+      padding: 0;
+      border: 0;
+
+      &_act {
+        display: flex;
+        grid-gap: 16px;
+        margin-top: 16px;
+      }
+    }
+
+    .store {
+      padding: 16px 8px;
+
+      &__name {
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 1.25rem;
+        padding-bottom: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        white-space: initial;
+      }
+
+      &__act {
+        display: none;
+      }
+
+      &__details {
+        margin-left: 16px;
+      }
+
+      &__dist {
+        width: 64px;
+        margin-bottom: 4px;
+      }
+    }
+
+    .stock {
+      &__list {
+        padding: 0;
+        margin-bottom: 0;
+      }
+
+      &__item {
+        flex-wrap: nowrap;
+      }
+
+      &__radio {
+        flex: auto;
+        max-width: initial;
+        min-width: 24px;
+
+        label {
+          top: 0;
+        }
+      }
+
+      &__store {
+        flex: 0 1 100%;
+        max-width: initial;
+      }
+    }
+
+    .s-details {
+      padding: 0 15px;
+
+      &__info {
+        padding: 10px 0;
+      }
+
+      &__store {
+        padding: 20px 0 10px;
+      }
+
+      &__address {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        margin-top: 4px;
+        font-weight: 400;
+      }
+
+      &__s-name {
+        margin-left: 0;
+        margin-top: 0;
+      }
+
+      &__phone {
+        margin-top: 0;
+      }
+
+      .s-details__address,
+      .s-details__postcode,
+      .s-details__action,
+      .s-details__open {
+        margin-top: 10px;
+      }
+
+      .s-details__open_title {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .s-details__open_title {
+        padding-top: 20px;
+        padding-bottom: 15px;
+      }
+
+      .s-details__table:not(.s-details__table_special) {
+        .s-details__table_cell:nth-child(2n+1) {
+          width: 35%;
+        }
+      }
+
+      .s-details__table_special {
+        .s-details__table_cell {
+          width: 50%;
+        }
+      }
+
+      &__close {
+        .fa-angle-right {
+          transform: rotate(-180deg);
+        }
+      }
+    }
+  }
+
+  .current-store {
+    margin-top: 24px;
+    border: 1px solid $gray;
+    border-radius: 4px;
+    padding: 16px;
+
+    &__default {
+      font-weight: 700;
+      margin-bottom: 0;
+    }
+
+    &__name {
+      margin-top: 8px;
+      margin-bottom: 0;
+      font-size: 1.25rem;
+    }
+
+    &__address,
+    &__phone,
+    &__link {
+      margin-bottom: 0;
+      margin-top: 8px;
+    }
+
+    &__link {
+      display: block;
+      text-decoration: none;
+      font-size: .875rem;
+      font-weight: 500;
+      line-height: 1.375rem;
+      width: max-content;
+    }
+
+    &__hours {
+      margin-top: 12px;
+      border-radius: 4px;
+      padding: 16px;
+      background: $gray-bg;
+
+      .title-section {
+        margin-bottom: 0;
+        font-weight: 500;
+      }
+
+      &-section {
+        & + .current-store__hours-section {
+          padding-top: 4px;
+        }
+      }
+
+      .opening-times,
+      .special-times,
+      .facilities {
+        margin-bottom: 0;
+        list-style-type: none;
+        padding: 0;
+
+        li {
+          padding-top: 4px;
+        }
+      }
+
+      .opening-times,
+      .special-times {
+        li:last-child {
+          padding-bottom: 12px;
+          border-bottom: 1px solid $gray;
+          margin-bottom: 8px;
+        }
+      }
+
+      .opening-times {
+        &__item {
+          display: flex;
+        }
+
+        &__day {
+          width: 35%;
+        }
+
+        &__time {
+          text-align: right;
+          width: 65%;
+        }
+      }
+
+      .special-times {
+        &__item {
+          display: flex;
+          align-items: center;
+        }
+
+        &__name {
+          font-weight: 500;
+        }
+
+        &__days {
+          display: flex;
+          flex-direction: column;
+          width: 50%;
+        }
+
+        &__time {
+          width: 50%;
+          text-align: right;
+        }
+      }
+
+      .facilities {
+        &__item {
+          display: flex;
+        }
+
+        &__icon-container {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 4px;
+        }
+
+        &__icon {
+          font-size: 1rem;
+          height: auto;
+        }
+      }
+
+      .btn-link {
+        padding: 0 6px;
+        height: auto;
+        margin: 8px auto 0;
+        display: flex;
+        border: 0;
+
+        .icon {
+          font-size: 1.2rem;
+        }
+
+        &[aria-expanded='true'] {
+          .icon {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .default-store {
+    .list-of-store {
+      .s-details__info {
+        padding-bottom: 0;
+      }
+
+      .bw_act {
+        .my-account {
+          &_cancel-store {
+            max-width: 75px;
+          }
+
+          &_add-store {
+            width: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .default-store {
+    padding-bottom: 70px;
+    padding-top: 24px;
+
+    .globalMessages {
+      padding-top: 0;
+    }
+
+    &__search {
+      order: 0;
+    }
+
+    &__title {
+      font-size: 2.125rem;
+      line-height: 2.875rem;
+    }
+
+    &__wrap {
+      margin-top: 24px;
+    }
+
+    &__subtitle {
+      font-size: 1.5rem;
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
+
+    .list-of-store {
+      .s-details {
+        right: auto;
+        left: calc(100% + 15px);
+        outline: none;
+        border: 1px solid $gray;
+        border-radius: 4px;
+        padding: 20px 15px;
+        max-width: 333px;
+        height: auto;
+        min-height: 100%;
+
+        &::after {
+          content: none;
+        }
+
+        &__store {
+          padding-top: 0;
+          margin-right: 0;
+        }
+      }
+
+      .bw_act {
+        margin-top: 24px;
+      }
+
+      .stock__det-open {
+        &::after {
+          content: none;
+        }
+      }
+    }
+
+    .current-store {
+      margin-top: 0;
+
+      &__name {
+        font-size: 1.5rem;
+        margin-top: 12px;
+      }
+    }
+
+    .store-unavailable {
+      margin-top: 24px;
+
+      &__title {
+        font-size: 1.5rem;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .default-store {
+    padding-top: 40px;
+
+    .globalMessages {
+      padding-top: 0;
+
+      .notification {
+        margin-bottom: 24px;
+      }
+    }
+
+    &__wrap {
+      margin-top: 0;
+    }
+
+    .list-of-store .s-details {
+      max-width: calc(100% - 30px);
+    }
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .default-store {
+    .current-store {
+      &__hours {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        position: relative;
+        grid-gap: 0 30px;
+        margin-top: 24px;
+
+        &-section {
+          & + .current-store__hours-section {
+            padding-top: 0;
+          }
+
+
+          &--special {
+            margin-top: 16px;
+            grid-column: 1;
+          }
+
+          &--facilities {
+            grid-column: 2;
+            grid-row: 1 / span 2;
+            position: relative;
+
+            &::after {
+              content: '';
+              position: absolute;
+              height: 100%;
+              border: 1px solid $gray;
+              top: 0;
+              left: -16px;
+            }
+          }
+        }
+
+        .opening-times,
+        .special-times {
+          li:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+            margin-bottom: 0;
+          }
+        }
+
+        .special-times {
+          &__time,
+          &__day {
+            width: auto;
+          }
+
+          &__time {
+            flex: 1 0 60%;
+          }
+        }
+
+        .btn-link {
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          margin-top: 0;
+        }
+      }
+    }
+  }
+}