spree_frontend 4.1.0 → 4.7.0

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

@@ -1,6 +1,6 @@
 .plp {
   &-not-found-header {
-    color: theme-color("dark-text");
+    color: $font-color;
     font-size: font-px-to-rem(18px);
     font-weight: 500;
     letter-spacing: 0.45px;
@@ -30,7 +30,7 @@
   }
 
   &-not-found-text {
-    color: theme-color("dark-text");
+    color: $font-color;
     margin-bottom: 350px;
     font-size: font-px-to-rem(14px);
     font-weight: 500;
@@ -50,7 +50,7 @@
     height: 60px;
     display: flex;
     align-items: center;
-    color: theme-color("dark-text");
+    color: $font-color;
     @include media-breakpoint-up("md") {
       font-size: font-px-to-rem(32px);
     }
@@ -68,7 +68,7 @@
     }
 
     &-buttons {
-      color: theme-color("dark-text");
+      color: $font-color;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -92,7 +92,7 @@
     top: $spree-plp-filter-desktop-position;
     left: 0;
     &-card {
-      background-color: theme-color("light-background");
+      background-color: $primary-background;
       border: none;
       a:hover {
         text-decoration: none;
@@ -104,8 +104,10 @@
         }
       }
       &-header {
-        background-color: theme-color("light-background");
-        border-color: $global-border-style;
+        background-color: $primary-background;
+        border: 0;
+        border-bottom: 1px solid $global-border-style;
+        text-align: left;
         cursor: pointer;
         font-size: font-px-to-rem(17px);
         font-weight: bold;
@@ -125,7 +127,7 @@
       }
       &-item {
         border: solid 1px $second-global-border;
-        color: theme-color("dark-text");
+        color: $font-color;
         font-size: font-px-to-rem(16px);
         font-weight: 500;
         &--selected {
@@ -133,12 +135,24 @@
         }
       }
     }
+    &-scroller {
+      @include media-breakpoint-up('lg') {
+        max-height: calc(100vh - #{$spree-plp-filter-desktop-position});
+        overflow: auto;
+      }
+    }
   }
 
   &-sort {
     font-size: font-px-to-rem(17px);
     &-header {
+      color: $font-color;
       cursor: pointer;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        color: $font-color;
+      }
       &-arrow {
         &--up {
           display: none;
@@ -154,13 +168,23 @@
         &-li--active {
           list-style: none;
           a {
-            color: theme-color("dark-text");
+            color: $font-color;
           }
         }
         &-li--active {
           font-weight: bold;
         }
       }
+      .dropdown-item {
+        padding: 0;
+        color: inherit;
+        font-weight: inherit;
+        background-color: transparent;
+        &:hover,
+        &:focus {
+          background-color: transparent;
+        }
+      }
     }
   }
 
@@ -186,7 +210,7 @@
       }
     }
     a {
-      color: theme-color("dark-text");
+      color: $font-color;
       border-color: $global-border-style !important;
       padding: 5px 13px;
       min-width: 37px;
@@ -207,7 +231,7 @@
   }
 
   &-overlay {
-    color: theme-color("dark-text");
+    color: $font-color;
     position: fixed;
     width: 100%;
     height: 100%;
@@ -216,7 +240,7 @@
     right: 0;
     bottom: 0;
     z-index: 999;
-    background-color: theme-color("light-background");
+    background-color: $primary-background;
 
     &-header {
       height: 60px;
@@ -235,6 +259,9 @@
       padding: 0;
       margin: 0;
       &-li {
+        .filled-dot {
+          display: none;
+        }
         &--active {
           .filled-dot {
             z-index: 1px;
@@ -243,45 +270,42 @@
             height: 12px;
             margin-top: 2px;
             margin-left: 2px;
-            background-color: theme-color("secondary");
-            border: solid 1px theme-color("secondary");
+            background-color: $secondary-color;
+            border: solid 1px $secondary-color;
             border-radius: 50%;
           }
         }
         a {
-          color: theme-color("dark-text");
+          color: $font-color;
           &:hover {
             text-decoration: none;
           }
         }
-        .filled-dot {
-          display: none;
-        }
       }
     }
 
     &-card {
       border: none;
       border-top: solid 1px $global-border-style;
-      background-color: theme-color("light-background");
+      background-color: $primary-background;
       &-header.collapsed {
         .arrow {
           transform: rotate(90deg);
         }
       }
       &-header {
-        background-color: theme-color("light-background");
+        background-color: $primary-background;
         border-bottom: none;
         cursor: pointer;
         &-arrow {
-          color: theme-color("dark-test");
+          color: $font-color;
           transform: rotate(-90deg);
         }
       }
 
       &-item {
         border: solid 1px $second-global-border;
-        color: theme-color("dark-text");
+        color: $font-color;
         font-size: font-px-to-rem(13px);
         &--selected {
           border: solid 2px $secondary-color;
@@ -295,19 +319,24 @@
       }
     }
     &-buttons {
-      bottom: 30px;
+      background-color: $primary-background;
+      padding-bottom: 30px;
+      bottom: 0px;
     }
   }
 
   &-scroll {
     max-height: 100%;
     overflow-y: auto;
-    padding-bottom: 140px;
+    padding-bottom: 150px;
+    @include media-breakpoint-up('sm') {
+      padding-bottom: 220px;
+    }
   }
 
   &-empty-dot {
-    background-color: theme-color("light-background");
-    border: solid 1px theme-color("secondary");
+    background-color: $primary-background;
+    border: solid 1px $secondary-color;
     border-radius: 50%;
     display: inline-block;
     margin-right: 16px;

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

@@ -16,6 +16,13 @@
       font-size: font-px-to-rem(16px);
     }
   }
+  &-vendor-img {
+    max-height: 100px;
+    max-width: 100px;
+  }
+  &-vendor-name {
+    font-size: font-px-to-rem(20px);
+  }
   &-images {
     & > .product-details-thumbnails {
       width: (1 / 7) * 100%;

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

@@ -19,14 +19,15 @@
         height: auto;
       }
     }
-  }
-}
-
-input:checked,
-input:focus,
-input:active,
-input:focus-within {
-  & + .color-select-label .color-select-border {
-    stroke: $secondary-color;
+    input:checked,
+    input:focus,
+    input:active,
+    input:focus-within {
+      & + .color-select {
+        .color-select-border {
+          stroke: $secondary-color;
+        }
+      }
+    }
   }
 }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/carousel/single.scss

@@ -140,7 +140,7 @@
     justify-content: center;
     &-modal-opener {
       flex-basis: 430px;
-      cursor: image-url("picture-zoom.svg"), auto;
+      cursor: image-url("picture-zoom.svg"), zoom-in;
     }
   }
 }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/carousel/thumbnails.scss

@@ -1,5 +1,6 @@
 .product-thumbnails-carousel {
   &-item {
+    will-change: transform;
     $single-gap: 5%;
     &-content {
       height: 0;

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

@@ -3,7 +3,14 @@
   position: relative;
   display: inline-block;
   padding-right: 7%;
-
+  svg {
+    width: 24px;
+    height: 24px;
+    @include media-breakpoint-up(xl) {
+      width: 36px;
+      height: 36px;
+    }
+  }
   &,
   &:hover {
     color: $header-font-color;
@@ -26,9 +33,7 @@
     padding: 0 2px;
     font-size: font-px-to-rem(12px);
     display: none;
-  }
-  &--xl {
-    #{$self}-count {
+    @include media-breakpoint-up(xl) {
       $size: 26px;
       $border-width: 2px;
       border-radius: $size / 2;

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/change_store.scss

@@ -0,0 +1,7 @@
+.change-store {
+  .active {
+    a {
+      font-weight: bold;
+    }
+  }
+}

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

@@ -1,12 +1,10 @@
 .main-nav-bar {
-  @mixin active-category-button {
-    border-bottom-color: $header-font-color;
-  }
-
   &-item {
     text-transform: uppercase;
     font-size: 20px;
     font-weight: $font-weight-medium;
+    padding: 0 1.5rem;
+    height: 100%;
     a {
       color: theme-color('dark-text');
 
@@ -15,46 +13,65 @@
       }
     }
   }
-  &-dropdown {
-    &-toggle {
-      background: none;
-      border: none;
-      padding: 0;
-      margin: 0;
-      &:focus {
-        outline: none;
-      }
-    }
-  }
   &-category {
     $self: &;
-
+    display: flex;
     position: static;
 
-    &:hover {
-      #{$self}-dropdown {
-        display: block;
-      }
+    &:hover, &.show {
       #{$self}-button {
         color: $header-font-color;
         text-decoration: none;
-        @include active-category-button;
+        &:after {
+          border-bottom-color: $header-font-color;
+        }
+      }
+    }
+
+    #{$self}-button.active {
+      color: $header-font-color;
+      text-decoration: none;
+      &:after {
+        border-bottom-color: $header-font-color;
+      }
+    }
+
+    .dropdown-item {
+      width: auto;
+      padding: 0;
+      background-color: transparent;
+      &:hover, &:focus {
+        background-color: transparent;
+      }
+      &.active {
+        color: $header-font-color;
+        text-decoration: underline;
       }
     }
 
     &-button {
       background: none;
       border: none;
-      border-bottom: 3px solid transparent;
       color: $header-font-color;
       margin: 0;
-      &:focus {
-        outline: none;
+      display: flex;
+      align-items: center;
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        width: calc(100% - 2rem);
+        position: absolute;
+        left: 1rem;
+        bottom: 0.75rem;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-bottom: 3px solid transparent;
       }
     }
 
     &-dropdown {
-      padding: 51px 0px 51px 0px;
       min-height: 341px;
       left: 0;
       right: 0;
@@ -64,7 +81,6 @@
       margin: 0;
       border: none;
       z-index: 1000;
-      display: none;
       background: $meganav-background;
       background-clip: padding-box;
       border-top: 1px solid $global-border-style;

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

@@ -15,8 +15,11 @@
   &.shown {
     transform: translate(0);
   }
-  &-list, &-sublist {
+  &-list,
+  &-sublist {
     margin: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
     padding: 0 19px;
     &-item {
       padding: 16px 0;
@@ -39,6 +42,9 @@
     @include media-breakpoint-up(sm) {
       padding-top: $spree-header-tablet-height;
     }
+    &-subcategory-shown {
+      overflow-y: hidden;
+    }
   }
 
   &-sublist {
@@ -58,6 +64,17 @@
       border-bottom: 1px solid $global-border-style;
     }
   }
+
+  &-category-link {
+    svg {
+      width: 16px;
+      height: 16px;
+      @include media-breakpoint-up(sm) {
+        width: 14px;
+        height: 27px;
+      }
+    }
+  }
 }
 
 #mobile-navigation-close-button {
@@ -70,12 +87,18 @@
   .cls-3 {
     fill: theme-color("light-background");
   }
+  svg {
+    width: 17px;
+    height: 17px;
+    @include media-breakpoint-up(sm) {
+      width: 26px;
+      height: 26px;
+    }
+  }
 }
 
 #mobile-navigation-back-button {
   opacity: 0;
-  padding-left: 0;
-  padding-right: 0;
   transition: basic-transition(opacity);
   appearance: none;
   border: none;
@@ -84,4 +107,12 @@
   &.shown {
     opacity: 1;
   }
+  svg {
+    width: 18px;
+    height: 18px;
+    @include media-breakpoint-up(sm) {
+      width: 17px;
+      height: 28px;
+    }
+  }
 }

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

@@ -1,9 +1,9 @@
 .navbar-right {
-  li+li {
+  li + li {
     margin-left: calc-spacer(2);
   }
   @include media-breakpoint-up(xl) {
-    li+li {
+    li + li {
       margin-left: calc-spacer(4);
     }
   }
@@ -14,18 +14,35 @@
       padding: 0;
       margin: 0;
       color: $header-font-color;
-      &:focus {
-        outline: none;
-      }
     }
     .dropdown-menu {
       border-color: $global-border-style;
     }
   }
+  .account-icon {
+    svg {
+      width: 27.6px;
+      height: 24px;
+      @include media-breakpoint-up(xl) {
+        width: 41.4px;
+        height: 36px;
+      }
+    }
+  }
+  .search-icons {
+    svg {
+      width: 24px;
+      height: 24px;
+      @include media-breakpoint-up(xl) {
+        width: 36px;
+        height: 36px;
+      }
+    }
+  }
   &-search-menu {
     position: static;
     &-dropdown {
-      background-color: theme-color('light-background');
+      background-color: theme-color("light-background");
       visibility: hidden;
       opacity: 0;
       z-index: 4;
@@ -44,7 +61,7 @@
       }
 
       form {
-        input#keywords{
+        input#keywords {
           background: transparent;
           color: $meganav-font-color;
           font-size: font-px-to-rem(14px);

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

@@ -1,42 +1,39 @@
 .quantity-select {
-  width: 136px;
-  height: 45px;
-  @include media-breakpoint-up(sm) {
-    width: 174px;
-    height: 58px;
-  }
-  @include media-breakpoint-up(md) {
-    width: 136px;
-    height: 45px;
-  }
   &-decrease, &-increase {
+    width: 45px;
     border-radius: 0;
     font-size: font-px-to-rem(20px);
     font-weight: 500;
     background-color: theme-color("light-background");
     border: 1px solid theme-color("borders");
     @include media-breakpoint-up(sm) {
+      width: 58px;
       font-size: font-px-to-rem(30px);
       border: 2px solid theme-color("borders");
     }
     @include media-breakpoint-up(md) {
+      width: 45px;
       font-size: font-px-to-rem(20px);
       border: 1px solid theme-color("borders");
     }
   }
   &-value {
-    width: 100%;
+    width: 46px;
+    height: 45px;
     font-size: font-px-to-rem(20px);
     font-weight: 500;
     border-radius: 0;
     border: 1px solid theme-color('borders');
-    height: auto;
     z-index: 1;
     @include media-breakpoint-up(sm) {
+      width: 58px;
+      height: 58px;
       font-size: font-px-to-rem(28px);
       border: 2px solid theme-color("borders");
     }
     @include media-breakpoint-up(md) {
+      width: 46px;
+      height: 45px;
       font-size: font-px-to-rem(20px);
       border: 1px solid theme-color("borders");
     }

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

@@ -0,0 +1,12 @@
+.search-form {
+  button {
+    svg {
+      width: 20px;
+      height: 20px;
+      @include media-breakpoint-up(md) {
+        width: 27px;
+        height: 27px;
+      }
+    }
+  }
+}