spree_frontend 4.1.15 → 4.2.0.beta

data/app/assets/stylesheets/spree/frontend/components-custom/inputs.scss

@@ -33,6 +33,8 @@
 .spree-flat-select {
   @extend .spree-flat-input;
   appearance: none;
+  padding-top:22px;
+  padding-bottom:21px;
   -webkit-appearance: none;
   -moz-appearance: none;
   &-arrow {
@@ -83,7 +85,12 @@
   }
 
   input[type="checkbox"] {
-    display: none;
+    opacity: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
   }
 
   label {
@@ -138,6 +145,10 @@
     }
   }
 
+  input[type="checkbox"]:focus + label {
+    border-color: $primary-color;
+  }
+
   input[type="checkbox"]:checked + label {
     background-color: theme-color("secondary");
 
@@ -241,6 +252,10 @@
     opacity: 0;
     height: 0;
     width: 0;
+    &:focus + span {
+      border-radius: 50%;
+      border: 2px solid $primary-color;
+    }
   }
   &-custom-input {
     @include colored-circle-radio($secondary-color);
@@ -264,3 +279,61 @@
     background-size: contain;
   }
 }
+
+//Slide in labels
+@mixin float-label-container {
+  display: block;
+  position: relative;
+}
+
+@mixin float-label {
+  label {
+    position: absolute;
+    left: 1em;
+    top: -0.5em;
+    cursor: text;
+    opacity: 1;
+    background: $input-background;
+    padding: 0 4px;
+    transition: all .2s;
+    @content;
+    &.state-select-label{
+      opacity: 1 !important;
+      left:1em !important;
+    }
+  }
+}
+
+@mixin float-label-input {
+  &::placeholder {
+    opacity: 0;
+    color: $secondary-font-color;
+    transition: all .2s;
+  }
+  &:placeholder-shown:not(:focus)::placeholder {
+      opacity: 0.3;
+      transition: all .2s;
+  }
+}
+
+@mixin float-label-scaled {
+  &:placeholder-shown:not(:focus) + * {
+      @content;
+  }
+}
+
+.has-float-label {
+  @include float-label-container;
+  @include float-label;
+
+  input, textarea {
+    @include float-label-input;
+    @include float-label-scaled {
+      opacity: 0;
+      left: 0em;
+    }
+  }
+  .form-control:focus {
+    box-shadow: none;
+  }
+}

data/app/assets/stylesheets/spree/frontend/flags/_flag-icon-base.scss

@@ -0,0 +1,23 @@
+.flag-icon-background {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.flag-icon {
+  @extend .flag-icon-background;
+  position: relative;
+  display: inline-block;
+  width: (4 / 3) * 2.3em;
+  &:before {
+    content: "\00a0";
+  }
+}
+
+@mixin flag-icon($country) {
+  .flag-icon-#{$country} {
+    background-image: image-url(
+      "#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg"
+    );
+  }
+}

data/app/assets/stylesheets/spree/frontend/flags/_flag-icon-list.scss

@@ -0,0 +1,265 @@
+@if variable-exists(include) {
+  @each $country in $include {
+    @include flag-icon($country);
+  }
+} @else {
+  @include flag-icon(ad);
+  @include flag-icon(ae);
+  @include flag-icon(af);
+  @include flag-icon(ag);
+  @include flag-icon(ai);
+  @include flag-icon(al);
+  @include flag-icon(am);
+  @include flag-icon(ao);
+  @include flag-icon(aq);
+  @include flag-icon(ar);
+  @include flag-icon(as);
+  @include flag-icon(at);
+  @include flag-icon(au);
+  @include flag-icon(aw);
+  @include flag-icon(ax);
+  @include flag-icon(az);
+  @include flag-icon(ba);
+  @include flag-icon(bb);
+  @include flag-icon(bd);
+  @include flag-icon(be);
+  @include flag-icon(bf);
+  @include flag-icon(bg);
+  @include flag-icon(bh);
+  @include flag-icon(bi);
+  @include flag-icon(bj);
+  @include flag-icon(bl);
+  @include flag-icon(bm);
+  @include flag-icon(bn);
+  @include flag-icon(bo);
+  @include flag-icon(bq);
+  @include flag-icon(br);
+  @include flag-icon(bs);
+  @include flag-icon(bt);
+  @include flag-icon(bv);
+  @include flag-icon(bw);
+  @include flag-icon(by);
+  @include flag-icon(bz);
+  @include flag-icon(ca);
+  @include flag-icon(cc);
+  @include flag-icon(cd);
+  @include flag-icon(cf);
+  @include flag-icon(cg);
+  @include flag-icon(ch);
+  @include flag-icon(ci);
+  @include flag-icon(ck);
+  @include flag-icon(cl);
+  @include flag-icon(cm);
+  @include flag-icon(cn);
+  @include flag-icon(co);
+  @include flag-icon(cr);
+  @include flag-icon(cu);
+  @include flag-icon(cv);
+  @include flag-icon(cw);
+  @include flag-icon(cx);
+  @include flag-icon(cy);
+  @include flag-icon(cz);
+  @include flag-icon(de);
+  @include flag-icon(dj);
+  @include flag-icon(dk);
+  @include flag-icon(dm);
+  @include flag-icon(do);
+  @include flag-icon(dz);
+  @include flag-icon(ec);
+  @include flag-icon(ee);
+  @include flag-icon(eg);
+  @include flag-icon(eh);
+  @include flag-icon(er);
+  @include flag-icon(es);
+  @include flag-icon(et);
+  @include flag-icon(fi);
+  @include flag-icon(fj);
+  @include flag-icon(fk);
+  @include flag-icon(fm);
+  @include flag-icon(fo);
+  @include flag-icon(fr);
+  @include flag-icon(ga);
+  @include flag-icon(gb);
+  @include flag-icon(gd);
+  @include flag-icon(ge);
+  @include flag-icon(gf);
+  @include flag-icon(gg);
+  @include flag-icon(gh);
+  @include flag-icon(gi);
+  @include flag-icon(gl);
+  @include flag-icon(gm);
+  @include flag-icon(gn);
+  @include flag-icon(gp);
+  @include flag-icon(gq);
+  @include flag-icon(gr);
+  @include flag-icon(gs);
+  @include flag-icon(gt);
+  @include flag-icon(gu);
+  @include flag-icon(gw);
+  @include flag-icon(gy);
+  @include flag-icon(hk);
+  @include flag-icon(hm);
+  @include flag-icon(hn);
+  @include flag-icon(hr);
+  @include flag-icon(ht);
+  @include flag-icon(hu);
+  @include flag-icon(id);
+  @include flag-icon(ie);
+  @include flag-icon(il);
+  @include flag-icon(im);
+  @include flag-icon(in);
+  @include flag-icon(io);
+  @include flag-icon(iq);
+  @include flag-icon(ir);
+  @include flag-icon(is);
+  @include flag-icon(it);
+  @include flag-icon(je);
+  @include flag-icon(jm);
+  @include flag-icon(jo);
+  @include flag-icon(jp);
+  @include flag-icon(ke);
+  @include flag-icon(kg);
+  @include flag-icon(kh);
+  @include flag-icon(ki);
+  @include flag-icon(km);
+  @include flag-icon(kn);
+  @include flag-icon(kp);
+  @include flag-icon(kr);
+  @include flag-icon(kw);
+  @include flag-icon(ky);
+  @include flag-icon(kz);
+  @include flag-icon(la);
+  @include flag-icon(lb);
+  @include flag-icon(lc);
+  @include flag-icon(li);
+  @include flag-icon(lk);
+  @include flag-icon(lr);
+  @include flag-icon(ls);
+  @include flag-icon(lt);
+  @include flag-icon(lu);
+  @include flag-icon(lv);
+  @include flag-icon(ly);
+  @include flag-icon(ma);
+  @include flag-icon(mc);
+  @include flag-icon(md);
+  @include flag-icon(me);
+  @include flag-icon(mf);
+  @include flag-icon(mg);
+  @include flag-icon(mh);
+  @include flag-icon(mk);
+  @include flag-icon(ml);
+  @include flag-icon(mm);
+  @include flag-icon(mn);
+  @include flag-icon(mo);
+  @include flag-icon(mp);
+  @include flag-icon(mq);
+  @include flag-icon(mr);
+  @include flag-icon(ms);
+  @include flag-icon(mt);
+  @include flag-icon(mu);
+  @include flag-icon(mv);
+  @include flag-icon(mw);
+  @include flag-icon(mx);
+  @include flag-icon(my);
+  @include flag-icon(mz);
+  @include flag-icon(na);
+  @include flag-icon(nc);
+  @include flag-icon(ne);
+  @include flag-icon(nf);
+  @include flag-icon(ng);
+  @include flag-icon(ni);
+  @include flag-icon(nl);
+  @include flag-icon(no);
+  @include flag-icon(np);
+  @include flag-icon(nr);
+  @include flag-icon(nu);
+  @include flag-icon(nz);
+  @include flag-icon(om);
+  @include flag-icon(pa);
+  @include flag-icon(pe);
+  @include flag-icon(pf);
+  @include flag-icon(pg);
+  @include flag-icon(ph);
+  @include flag-icon(pk);
+  @include flag-icon(pl);
+  @include flag-icon(pm);
+  @include flag-icon(pn);
+  @include flag-icon(pr);
+  @include flag-icon(ps);
+  @include flag-icon(pt);
+  @include flag-icon(pw);
+  @include flag-icon(py);
+  @include flag-icon(qa);
+  @include flag-icon(re);
+  @include flag-icon(ro);
+  @include flag-icon(rs);
+  @include flag-icon(ru);
+  @include flag-icon(rw);
+  @include flag-icon(sa);
+  @include flag-icon(sb);
+  @include flag-icon(sc);
+  @include flag-icon(sd);
+  @include flag-icon(se);
+  @include flag-icon(sg);
+  @include flag-icon(sh);
+  @include flag-icon(si);
+  @include flag-icon(sj);
+  @include flag-icon(sk);
+  @include flag-icon(sl);
+  @include flag-icon(sm);
+  @include flag-icon(sn);
+  @include flag-icon(so);
+  @include flag-icon(sr);
+  @include flag-icon(ss);
+  @include flag-icon(st);
+  @include flag-icon(sv);
+  @include flag-icon(sx);
+  @include flag-icon(sy);
+  @include flag-icon(sz);
+  @include flag-icon(tc);
+  @include flag-icon(td);
+  @include flag-icon(tf);
+  @include flag-icon(tg);
+  @include flag-icon(th);
+  @include flag-icon(tj);
+  @include flag-icon(tk);
+  @include flag-icon(tl);
+  @include flag-icon(tm);
+  @include flag-icon(tn);
+  @include flag-icon(to);
+  @include flag-icon(tr);
+  @include flag-icon(tt);
+  @include flag-icon(tv);
+  @include flag-icon(tw);
+  @include flag-icon(tz);
+  @include flag-icon(ua);
+  @include flag-icon(ug);
+  @include flag-icon(um);
+  @include flag-icon(us);
+  @include flag-icon(uy);
+  @include flag-icon(uz);
+  @include flag-icon(va);
+  @include flag-icon(vc);
+  @include flag-icon(ve);
+  @include flag-icon(vg);
+  @include flag-icon(vi);
+  @include flag-icon(vn);
+  @include flag-icon(vu);
+  @include flag-icon(wf);
+  @include flag-icon(ws);
+  @include flag-icon(ye);
+  @include flag-icon(yt);
+  @include flag-icon(za);
+  @include flag-icon(zm);
+  @include flag-icon(zw);
+
+  // Other flags
+  @include flag-icon(es-ca);
+  @include flag-icon(eu);
+  @include flag-icon(gb-eng);
+  @include flag-icon(gb-nir);
+  @include flag-icon(gb-sct);
+  @include flag-icon(gb-wls);
+  @include flag-icon(un);
+  @include flag-icon(xk);
+}

data/app/assets/stylesheets/spree/frontend/flags/_variables.scss

@@ -0,0 +1,2 @@
+$flag-icon-css-path: 'flags' !default;
+$flag-icon-rect-path: '/4x3' !default;

data/app/assets/stylesheets/spree/frontend/flags/flag-icon.scss

@@ -0,0 +1,3 @@
+@import 'variables';
+@import 'flag-icon-base';
+@import 'flag-icon-list';

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/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;
+    }
+  }
+}