spree_frontend 4.2.3 → 4.3.0.rc1

data/app/assets/stylesheets/spree/frontend/application.scss

@@ -28,6 +28,7 @@
 @import "spree/frontend/views/spree/shared/order_details";
 @import "spree/frontend/views/spree/shared/main_nav_bar";
 @import "spree/frontend/views/spree/errors/not_found";
+@import "spree/frontend/views/spree/cms_sections/_index";
 @import "spree/frontend/views/spree/shared/carousel/thumbnails";
 @import "spree/frontend/views/spree/shared/carousel/single";
 @import "spree/frontend/views/spree/home/index";

data/app/assets/stylesheets/spree/frontend/components-bootstrap/button.scss

@@ -6,3 +6,11 @@
     }
   }
 }
+
+.cursor-default {
+  cursor: default;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}

data/app/assets/stylesheets/spree/frontend/helpers/spree/frontend_helper.scss

@@ -1,3 +1,22 @@
+.position-absolute-center {
+  position:absolute;
+  left:50%;
+  top:50%;
+  transform:translate(-50%, -50%);
+}
+
+.position-absolute-x-center {
+  position:absolute;
+  left:50%;
+  transform:translate(-50%, 0);
+}
+
+.position-absolute-y-center {
+  position:absolute;
+  top:50%;
+  transform:translate(0, -50%);
+}
+
 #breadcrumbs {
   padding: 0;
 }
@@ -30,3 +49,25 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+// Aspect Ratios
+[style*="--aspect-ratio"] > img,
+[style*="--aspect-ratio"] > svg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+@supports (--custom:property) {
+  [style*="--aspect-ratio"] {
+    position: relative;
+  }
+
+  [style*="--aspect-ratio"]::before {
+    content: "";
+    display: block;
+    padding-bottom: calc(100% / (var(--aspect-ratio)));
+  }
+}

data/app/assets/stylesheets/spree/frontend/variables/variables.scss

@@ -21,7 +21,7 @@ $spree-header-tablet-height: 75px;
 $spree-header-desktop-height: 75px;
 
 // bootstrap overrides
-$grid-gutter-width: 19px;
+$grid-gutter-width: 1rem;
 $body-color: $font-color;
 $theme-colors: (
   // standard bootstrap colors
@@ -62,7 +62,7 @@ $container-max-widths: (
 );
 
 // helper variables
-$container-padding: 17px;
+$container-padding: $grid-gutter-width / 2;
 $photo-width-to-height-ratio: 30001/ 37500;
 $photo-width-to-height-ratio-zoom: 28015 / 37500;
 $thumbnails-carousel-single-height: 100% / $photo-width-to-height-ratio;

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/edit.scss

@@ -32,9 +32,21 @@
         }
       }
       &-text {
-        padding-left: 15px;
+        color: black;
+        font-size: 0.8rem;
+        @include media-breakpoint-up(sm) {
+          font-size: 1rem;
+        }
+        @include media-breakpoint-up(lg) {
+          font-size: 1.25rem;
+        }
+        svg {
+          height: 15px;
+          padding-top: 2px;
+        }
         &:hover {
           text-decoration: underline;
+          color: black;
         }
       }
     }
@@ -388,19 +400,19 @@
       }
       &-header {
         font-size: font-px-to-rem(16px);
+        hyphens: auto;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
         font-weight: 500;
-        line-height: 1.06;
         letter-spacing: 0.4px;
-        margin-bottom: 35px;
+        margin-bottom: 30px;
         @include media-breakpoint-up(sm) {
           font-size: font-px-to-rem(29px);
-          line-height: 1.1;
           letter-spacing: 0.73px;
           margin-bottom: 74px;
         }
         @include media-breakpoint-up(lg) {
           font-size: font-px-to-rem(26px);
-          line-height: 0.65;
           letter-spacing: 0.65px;
           margin-bottom: 35px;
         }

data/app/assets/stylesheets/spree/frontend/views/spree/cms_sections/_index.scss

@@ -0,0 +1 @@
+@import "spree/frontend/views/spree/cms_sections/product_buy_bar";

data/app/assets/stylesheets/spree/frontend/views/spree/cms_sections/product_buy_bar.scss

@@ -0,0 +1,20 @@
+.row.section-row.sticky-top {
+  z-index: 3;
+  background-color: rgba(255, 255, 255, 0.95);
+  padding: 5px 0;
+  border-top: 1px solid $global-border-style;
+  border-bottom: 1px solid $global-border-style;
+  top: $spree-header-mobile-height + 24px;
+
+  .buy-container {
+    min-height: $spree-header-mobile-height;
+  }
+
+  li.buy-bar {
+    a { color: grey;
+      &.active {
+        color: $header-font-color;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/spree/frontend/views/spree/home/index.scss

@@ -1,10 +1,29 @@
+:root {
+  --spree-border-color: transparent;
+}
+
+.brand {
+  img {
+    width: 85%;
+    max-width: 140px;
+  }
+}
+
+.section-row {
+  margin-bottom: #{$grid-gutter-width};
+}
+
+.match-col-gap {
+  padding-left: $container-padding;
+  padding-right: $container-padding;
+}
+
 .homepage {
   &-hero-image {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     flex-direction: column;
     text-align: center;
-    height: 204px;
     width: 100%;
     overflow: hidden;
 
@@ -16,16 +35,7 @@
       height: 100%;
     }
 
-    @include media-breakpoint-up(md) {
-      height: 418px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      height: 600px;
-    }
-
     .hero-content {
-      position: absolute;
       z-index: 1;
       right: 10%;
     }
@@ -40,7 +50,7 @@
 
       @include media-breakpoint-up(md) {
         font-size: font-px-to-rem(44px);
-        width: 288px;
+        width: 398px;
       }
 
       @include media-breakpoint-up(lg) {
@@ -65,17 +75,6 @@
 
   &-taxon-box {
     display: block;
-    flex-direction: column;
-    height: 140px;
-    position: relative;
-    overflow: hidden;
-
-    img {
-      display: block;
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
 
     h3 {
       margin: 0;
@@ -97,14 +96,6 @@
       }
     }
 
-    @include media-breakpoint-up(md) {
-      height: 324px;
-    }
-
-    @include media-breakpoint-up(lg) {
-      height: 390px;
-    }
-
     &-text {
       width: 100%;
       text-transform: uppercase;
@@ -133,10 +124,10 @@
   &-fashion-trends-box {
     background: $secondary-background;
     color: $secondary-font-color;
-    padding: 30px 0px;
+    padding: 30px 15px;
 
     @include media-breakpoint-up(md) {
-      padding: 60px 0px;
+      padding: 5vw 0px;
     }
 
     &-summer-text {
@@ -178,11 +169,12 @@
       color: $font-color;
       margin: auto;
       font-size: font-px-to-rem(12px);
-      width: 283px;
+      max-width: 283px;
 
       @include media-breakpoint-up(md) {
         font-size: font-px-to-rem(16px);
-        width: 608px;
+        width: 90%;
+        max-width: 608px;
       }
     }
     .spree-btn {
@@ -190,58 +182,36 @@
         border: solid 2px theme-color('primary');
         font-size: font-px-to-rem(12px);
         font-weight: bold;
+        max-width: 100%;
         @include media-breakpoint-up(md) {
           font-size: font-px-to-rem(22px);
-          width: 400px;
-          padding-top: 0.7rem;
         }
         @include media-breakpoint-up(lg) {
           font-size: font-px-to-rem(20px);
-          width: 497.2px;
         }
       }
     }
   }
 
   &-bottom-box {
-    background: $secondary-background;
-    color: $secondary-font-color;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    height: 168px;
-    overflow: hidden;
-
     img {
       width: 100%;
       object-fit: cover;
     }
 
-    @include media-breakpoint-up(md) {
-      height: 363px;
-    }
-    @include media-breakpoint-up(lg) {
-      height: 350px;
-    }
-
     &-inner {
       background: $primary-background;
       margin: auto;
-      padding: 10px 30px;
       position: absolute;
-      width: 70%;
-      left: 15%;
-
-      @include media-breakpoint-up(md) {
-        padding: 30px 100px;
-      }
+      max-height: 70%;
+      min-width: 60%;
+      max-width: 80%;
+      bottom: 35px;
 
       &-small-text {
         font-weight: 500;
         line-height: 0.9;
         letter-spacing: 0.25px;
-        text-align: center;
         color: theme-color('primary');
         font-size: font-px-to-rem(10px);
 
@@ -257,9 +227,12 @@
         font-weight: 600;
         line-height: 1.2;
         letter-spacing: 0.38px;
-        text-align: center;
         color: $font-color;
-        font-size: font-px-to-rem(15px);
+        font-size: font-px-to-rem(14px);
+
+        @include media-breakpoint-up(sm) {
+          font-size: font-px-to-rem(22px);
+        }
 
         @include media-breakpoint-up(md) {
           font-size: font-px-to-rem(27px);
@@ -280,14 +253,28 @@
       text-decoration: none !important;
     }
     &-text {
-      font-size: 12px;
+      font-size: font-px-to-rem(12px);
 
       @include media-breakpoint-up(md) {
-        font-size: 22px;
+        font-size: font-px-to-rem(22px);
       }
       @include media-breakpoint-up(lg) {
-        font-size: 24px;
+        font-size: font-px-to-rem(24px);
       }
     }
   }
+
+  &-hpb {
+    border: 3px solid var(--spree-border-color);
+  }
+}
+
+#missingHomepage {
+  .missing-homepage-logo-container {
+    width: 160px;
+
+    img {
+      max-width: 100%;
+    }
+  }
 }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/category_nav_bar.scss

@@ -1,7 +1,7 @@
 .category {
   &-links {
-    width: 176px;
-    min-width: 176px;
+    width: 170px;
+    min-width: 170px;
 
     &-header {
       color: $meganav-font-color;
@@ -12,7 +12,7 @@
 
     ul {
       list-style-type: none;
-      padding-top: 27px;
+      padding-top: 15px;
     }
 
     li {

data/app/assets/stylesheets/spree/frontend/views/spree/shared/footer.scss

@@ -41,6 +41,10 @@
     @include media-breakpoint-up(xl) {
       font-size: font-px-to-rem(16px);
       font-weight: 500;
+
+      a {
+        font-size: font-px-to-rem(16px) !important;
+      }
     }
   }
   &-info {

data/app/assets/stylesheets/spree/frontend/views/spree/shared/main_nav_bar.scss

@@ -28,6 +28,14 @@
       }
     }
 
+    #{$self}-button.active {
+      color: $header-font-color;
+      text-decoration: none;
+      &:after {
+        border-bottom-color: $header-font-color;
+      }
+    }
+
     .dropdown-item {
       width: auto;
       padding: 0;
@@ -35,6 +43,10 @@
       &:hover, &:focus {
         background-color: transparent;
       }
+      &.active {
+        color: $header-font-color;
+        text-decoration: underline;
+      }
     }
 
     &-button {
@@ -60,7 +72,6 @@
     }
 
     &-dropdown {
-      padding: 51px 0px 51px 0px;
       min-height: 341px;
       left: 0;
       right: 0;