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

package/src/scss/pages/page_store-locator.scss

@@ -1,11 +1,47 @@
 @import '../helpers/helpers';
 @import '../components/special-opening-schedule';
 
+.store-locator {
+  .container {
+    padding-top: 0;
+  }
+
+  .notification {
+    margin-top: 24px;
+    margin-bottom: 0;
+  }
+}
+
 h1 {
-  margin-bottom: 30px;
+  margin-bottom: 24px;
+  font-size: 1.625rem;
+  font-weight: $btn-font-weight;
+  line-height: 36px;
+  text-align: left;
+}
+
+.store-locator-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  .row-holder {
+    margin-top: 24px;
+
+    .map-container {
+      margin: 0;
+    }
+  }
+}
+
+.store-locator__content {
+  padding-top: 24px;
 }
 
 .cards-store {
+  &-holder {
+    scroll-margin-top: 60px;
+  }
+
   &-list {
     padding-right: 0;
     padding-left: 0;
@@ -17,7 +53,7 @@ h1 {
   }
 
   &-wrapper {
-    padding-top: 40px;
+    padding-top: 24px;
 
     .row {
       display: grid;
@@ -25,13 +61,23 @@ h1 {
       gap: 16px;
       margin-right: 0;
       margin-left: 0;
-      align-items: start;
+      align-items: flex-start;
     }
   }
 }
 
 .locator {
   .forms-locator {
+    button {
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: 5px auto -webkit-focus-ring-color;
+      }
+    }
+
     .form-row__field {
       .header-search__submit {
         color: $blue;
@@ -51,11 +97,52 @@ h1 {
 }
 
 .btn_store-near-me {
-  @include button-full;
-  margin-bottom: 20px;
+  display: none;
+}
+
+
+@include media-breakpoint-down(md) {
+  .store-locator_search-collapsed {
+    .form-locator-wrapper {
+      display: none;
+    }
+
+    .locator__open-search {
+      display: flex;
+    }
+  }
 }
 
 @include media-breakpoint-down(sm) {
+  .store-locator-wrapper {
+    .row-holder {
+      .map-container,
+      .map,
+      .map__google-map {
+        width: 100%;
+        min-height: 252px;
+      }
+
+      .map-container {
+        margin-top: 0;
+      }
+
+      .map__google-map {
+        background-size: cover !important;
+      }
+    }
+  }
+
+  .store-locator_geo-off,
+  .store-locator-wrapper.store-locator_geo-off {
+    .store-locator-wrapper,
+    & {
+      .row-holder {
+        display: none;
+      }
+    }
+  }
+
   .cards-store {
     &-list {
       &__actions {
@@ -100,6 +187,62 @@ h1 {
         grid-template-columns: repeat(2, 1fr);
       }
     }
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .store-locator {
+    .notification {
+      margin-bottom: -16px;
+    }
+  }
+
+  h1 {
+    font-size: 2.125rem;
+    line-height: 46px;
+  }
+
+  .store-locator__content {
+    padding-top: 40px;
+  }
+
+  .store-locator-wrapper {
+    .row-holder {
+      padding-right: 0;
+      padding-left: 0;
+
+      .map-container,
+      .map,
+      .map__google-map {
+        width: 100%;
+        min-height: 266px;
+      }
+
+      .map__google-map {
+        background-size: cover !important;
+      }
+    }
+  }
+
+  .store-locator_geo-off,
+  .store-locator-wrapper.store-locator_geo-off {
+    .store-locator-wrapper,
+    & {
+      .row-holder {
+        display: none;
+      }
+    }
+  }
+
+  .cards-store {
+    &-wrapper {
+      padding-top: 40px;
+
+      .row {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24px;
+      }
+    }
 
     &-list__actions {
       margin: 24px 0 0;
@@ -114,13 +257,89 @@ h1 {
   }
 }
 
-@include media-breakpoint-up(md) {
-  .btn_store-near-me {
-    display: none;
+@include media-breakpoint-up(lg) {
+  .store-locator {
+    &.store-locator_geo-off {
+      .notification {
+        margin-bottom: -16px;
+      }
+    }
+
+    .notification {
+      margin-bottom: 24px;
+    }
+  }
+
+  .store-locator-wrapper {
+    .row-holder {
+      margin-top: 0;
+      padding-right: 31px;
+      padding-left: 31px;
+    }
+  }
+
+  .store-locator-wrapper {
+    display: grid;
+    grid-template-columns: 50vw 50vw;
+    align-items: stretch;
+    width: 100vw;
+    margin-right: calc(50% - 50vw);
+    margin-left: calc(50% - 50vw);
+
+    .store-locator__content,
+    .row-holder {
+      width: auto;
+      min-width: 0;
+    }
+
+    .store-locator__content {
+      padding-left: calc((100vw - 930px) / 2);
+      padding-right: 40px;
+    }
+
+    .row-holder {
+      padding-right: 0;
+      padding-left: 0;
+
+      .map-container,
+      .map,
+      .map__google-map {
+        height: 100%;
+        min-height: 563px;
+      }
+
+      .map-container {
+        margin: 0;
+      }
+    }
+  }
+
+  .store-locator_geo-off {
+    .store-locator-wrapper {
+      display: block;
+      width: auto;
+      margin-right: 0;
+      margin-left: 0;
+
+      .store-locator__content {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
+
+  .store-locator-wrapper.store-locator_geo-off {
+    display: block;
+    width: auto;
+    margin-right: 0;
+    margin-left: 0;
+
+    .store-locator__content {
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
-}
 
-@include media-breakpoint-up(lg) {
   .cards-store {
     &-wrapper {
       .row {
@@ -131,6 +350,26 @@ h1 {
 }
 
 @include media-breakpoint-up(xl) {
+  .store-locator {
+    .notification {
+      margin-bottom: 24px;
+    }
+  }
+
+  .store-locator-wrapper {
+    .store-locator__content {
+      padding-left: calc((100vw - 1110px) / 2);
+    }
+
+    .row-holder {
+      .map-container,
+      .map,
+      .map__google-map {
+        min-height: 507px;
+      }
+    }
+  }
+
   .cards-store {
     &-wrapper {
       .row {

package/src/scss/pages/page_ti.scss

@@ -453,7 +453,7 @@
         height: auto;
         display: flex;
         flex-direction: row;
-        justify-content: start;
+        justify-content: flex-start;
         padding: 10px 20px;
       }
     }

package/src/scss/store-locator-main.scss

@@ -28,11 +28,6 @@
   position: fixed;
 }
 
-// Main
-main {
-  padding-bottom: 72px;
-}
-
 //Component card extract start
 
 .card {