spree_frontend 4.1.0 → 4.7.0

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

@@ -1,6 +1,26 @@
+.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;
 }
+
 .breadcrumb {
   background: none;
   padding: 0.5rem 0;
@@ -23,3 +43,31 @@
 .breadcrumb-product-name {
   padding-right: 9.5px;
 }
+
+.truncate {
+  white-space: nowrap;
+  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/bootstrap-overrides.scss

@@ -1,3 +1,4 @@
+// we're keeping this file for legacy installations relying on it
 $grid-gutter-width: 19px;
 $body-color: $font-color;
 $theme-colors: (
@@ -35,6 +36,5 @@ $grid-breakpoints: (
 $container-max-widths: (
   sm: 768px,
   md: 992px,
-  lg: 1200px,
-  xl: 1200px
+  lg: 1200px
 );

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

@@ -1,3 +1,4 @@
+// we're keeping this file for legacy installations relying on it
 $container-padding: 17px;
 $photo-width-to-height-ratio: 30001/ 37500;
 $photo-width-to-height-ratio-zoom: 28015 / 37500;

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

@@ -1,3 +1,4 @@
+// main spree variables
 $primary-color: #0074c2;
 $secondary-color: #4c4c4c;
 $primary-background: #ffffff;
@@ -18,3 +19,56 @@ $spree-header-max-width: 1440px;
 $spree-header-mobile-height: 50px;
 $spree-header-tablet-height: 75px;
 $spree-header-desktop-height: 75px;
+
+// bootstrap overrides
+$grid-gutter-width: 1rem;
+$body-color: $font-color;
+$theme-colors: (
+  // standard bootstrap colors
+  "primary": $primary-color,
+  "secondary": $secondary-color,
+  "danger": #f53737,
+  "info": #999999,
+  "warning": #ffc107,
+  "light-secondary": #999999,
+  "borders": $second-global-border,
+  "dark-borders": $global-border-style,
+  "light-background": $primary-background,
+  "dark-text": $font-color,
+  "overlay": rgba(76, 76, 76, 0.5),
+  "shadow": rgba(0, 0, 0, 0.16)
+);
+$enable-rounded: false;
+$enable-shadows: false;
+$enable-gradients: false;
+$font-family-sans-serif: $font-family;
+$font-weight-medium: 500;
+.font-weight-medium {
+  font-weight: $font-weight-medium;
+}
+$btn-border-width: 2px;
+$modal-dialog-margin: 0;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+$container-max-widths: (
+  sm: 768px,
+  md: 992px,
+  lg: 1200px
+);
+
+// helper variables
+$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;
+$thumbnails-carousel-single-height-zoom: 100% /
+  $photo-width-to-height-ratio-zoom;
+$zoom-height-breakpoint: calc(
+  650px / #{$photo-width-to-height-ratio-zoom} + 102px * 2
+);
+$spree-plp-filter-desktop-position: $spree-header-desktop-height + 77px;

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

@@ -2,11 +2,6 @@
   display: flex;
   flex-direction: column;
 
-  div:first-child {
-    -webkit-flex: 0;
-    flex-shrink: 0;
-  }
-
   &-order-details {
     padding-bottom: 40px;
     font-weight: 500;
@@ -36,6 +31,9 @@
     }
 
     &-line-items {
+      @include media-breakpoint-down(sm) {
+        flex-basis: 100%;
+      }
       @include media-breakpoint-up(lg) {
         border: none;
         flex: 1 1 0;
@@ -48,15 +46,6 @@
       &-line-item {
         $self: &;
 
-        a {
-          max-width: 50%;
-          margin-right: 20px;
-
-          @include media-breakpoint-up(lg) {
-            margin-right: 40px;
-          }
-        }
-
         img {
           width: 90px;
           height: auto;
@@ -73,14 +62,28 @@
         &-name {
           font-size: font-px-to-rem(14px);
           border-top: 1px solid $global-border-style;
+          margin-right: 20px;
 
-          @include media-breakpoint-up(sm) {
-            font-size: font-px-to-rem(27px);
+          &-image {
+            padding-right: 16px;
           }
 
-          @include media-breakpoint-up(lg) {
-            font-size: font-px-to-rem(22px);
-            width: 55%;
+          &-link {
+            max-width: 50%;
+
+            @include media-breakpoint-up(lg) {
+              margin-right: 40px;
+            }
+
+
+            @include media-breakpoint-up(sm) {
+              font-size: font-px-to-rem(27px);
+            }
+
+            @include media-breakpoint-up(lg) {
+              font-size: font-px-to-rem(22px);
+              width: 55%;
+            }
           }
 
           &-options {
@@ -185,6 +188,8 @@
   }
 
   &-delivery-informations {
+    flex-basis: 100%;
+
     div:first-child {
       flex-shrink: unset;
       -webkit-flex: unset;
@@ -253,13 +258,9 @@
   }
 
   #checkout-summary {
-    margin-top: 20px;
-    @include media-breakpoint-up(sm) {
-      margin-top: 70px;
-    }
-    @include media-breakpoint-up(lg) {
-      flex: 0 0 40%;
-      align-self: flex-start;
+    flex: 1 1 0;
+    @include media-breakpoint-down(sm) {
+      margin-top: 20px;
     }
   }
 }

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

@@ -0,0 +1,6 @@
+#shipToLocation {
+  font-size: font-px-to-rem(10px);
+  @include media-breakpoint-up(md) {
+    font-size: font-px-to-rem(14px);
+  }
+}

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;
         }
       }
     }
@@ -149,7 +161,7 @@
         }
         hr {
           margin: 0;
-          width: 33%;
+          flex: 1;
           border: 1px solid theme-color('info');
         }
       }
@@ -160,8 +172,11 @@
       .nav-item {
         color: theme-color('info');
         font-weight: 600;
+        max-width: 70px;
+        text-align: center;
         @include media-breakpoint-up(sm) {
           font-weight: 500;
+          max-width: 100px;
         }
         a {
           color: inherit;
@@ -385,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;
         }
@@ -494,9 +509,6 @@
           font-size: font-px-to-rem(16px);
         }
       }
-      .delete-address-img {
-        color: $primary-color;
-      }
     }
 
     #checkout-summary {
@@ -508,7 +520,8 @@
         height: 100%;
         padding: 0;
         max-width: 380px;
-        align-self: flex-end;
+        margin-right: 0;
+        margin-left: auto;
       }
     }
 
@@ -517,3 +530,4 @@
     }
   }
 }
+

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/orders/edit.scss

@@ -42,7 +42,7 @@
       }
     }
     &-continue-link {
-      margin-top: 234px;
+      margin-top: 100px;
       margin-bottom: 30px;
       @include media-breakpoint-up(sm) {
         padding: 20px 12px;
@@ -131,7 +131,7 @@
       }
     }
     &-description {
-      h4 {
+      h2 {
         font-size: font-px-to-rem(14px);
         @include media-breakpoint-up(sm) {
           font-size: font-px-to-rem(22px);
@@ -227,6 +227,7 @@
         border-width: 1px !important;
         border-style: solid;
         color: color-yiq($input-background);
+        touch-action: manipulation;
         @include media-breakpoint-up(sm) {
           height: 51.4px;
           font-size: font-px-to-rem(24px);
@@ -358,7 +359,7 @@
         }
       }
     }
-    input[type=text] {
+    input[type="text"] {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;

data/app/assets/stylesheets/spree/frontend/views/spree/orders/show.scss

@@ -261,6 +261,9 @@
   }
   #checkout-summary {
     margin-top: 30px;
+    @include media-breakpoint-down(sm) {
+      flex-basis: 100%;
+    }
     @include media-breakpoint-up(sm) {
       margin-top: 75px;
     }

data/app/assets/stylesheets/spree/frontend/views/spree/products/cart_form.scss

@@ -6,6 +6,11 @@
     @include media-breakpoint-up(sm) {
       font-size: font-px-to-rem(36px);
     }
+
+    .compare-at-price {
+      color: theme-color("info");
+      text-decoration: line-through;
+    }
   }
   &-general-availability {
     font-size: font-px-to-rem(12px);
@@ -87,6 +92,9 @@
             border-color: theme-color("dark-text");
           }
         }
+        &:focus + label, &:focus + svg {
+          outline: theme-color("dark-text") dotted 2px;
+        }
         &--bad-combination {
           & + #{$self2}-label {
             position: relative;

data/app/assets/stylesheets/spree/frontend/views/spree/products/gallery_modal.scss

@@ -0,0 +1,7 @@
+#picturesModal {
+  .close {
+    right: 0;
+    z-index: 3;
+    padding: 10px 15px;
+  }
+}