spree_frontend 4.1.14 → 4.2.0.beta

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

@@ -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);
@@ -359,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/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

@@ -2,5 +2,6 @@
   .close {
     right: 0;
     z-index: 3;
+    padding: 10px 15px;
   }
 }

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

@@ -105,7 +105,9 @@
       }
       &-header {
         background-color: $primary-background;
-        border-color: $global-border-style;
+        border: 0;
+        border-bottom: 1px solid $global-border-style;
+        text-align: left;
         cursor: pointer;
         font-size: font-px-to-rem(17px);
         font-weight: bold;
@@ -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;
@@ -161,6 +175,16 @@
           font-weight: bold;
         }
       }
+      .dropdown-item {
+        padding: 0;
+        color: inherit;
+        font-weight: inherit;
+        background-color: transparent;
+        &:hover,
+        &:focus {
+          background-color: transparent;
+        }
+      }
     }
   }
 
@@ -235,6 +259,9 @@
       padding: 0;
       margin: 0;
       &-li {
+        .filled-dot {
+          display: none;
+        }
         &--active {
           .filled-dot {
             z-index: 1px;
@@ -254,9 +281,6 @@
             text-decoration: none;
           }
         }
-        .filled-dot {
-          display: none;
-        }
       }
     }
 

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

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

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,41 +13,49 @@
       }
     }
   }
-  &-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;
+        }
+      }
+    }
+
+    .dropdown-item {
+      width: auto;
+      padding: 0;
+      background-color: transparent;
+      &:hover, &:focus {
+        background-color: transparent;
       }
     }
 
     &-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;
       }
     }
 
@@ -64,7 +70,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,7 +15,8 @@
   &.shown {
     transform: translate(0);
   }
-  &-list, &-sublist {
+  &-list,
+  &-sublist {
     margin: 0;
     overflow-y: auto;
     overflow-x: hidden;
@@ -63,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 {
@@ -75,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;
@@ -89,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");
     }