css and js

.gitignore

@@ -0,0 +1,2 @@
+*.DS_Store
+*.idea

files/wash-n-roll/internal/images/elements/icon-delete.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0.25C5.58579 0.25 5.25 0.585786 5.25 1V1.75H1C0.585786 1.75 0.25 2.08579 0.25 2.5C0.25 2.91421 0.585786 3.25 1 3.25H15C15.4142 3.25 15.75 2.91421 15.75 2.5C15.75 2.08579 15.4142 1.75 15 1.75H10.75V1C10.75 0.585786 10.4142 0.25 10 0.25H6Z" fill="black"/>
+<path d="M9.06067 13L10.5303 14.4697C10.8232 14.7626 10.8232 15.2374 10.5303 15.5303C10.2374 15.8232 9.76256 15.8232 9.46967 15.5303L8.00001 14.0607L6.53034 15.5303C6.23744 15.8232 5.76257 15.8232 5.46968 15.5303C5.17678 15.2374 5.17678 14.7626 5.46968 14.4697L6.93935 13L5.46967 11.5303C5.17678 11.2374 5.17678 10.7626 5.46967 10.4697C5.76256 10.1768 6.23744 10.1768 6.53033 10.4697L8.00001 11.9393L9.46968 10.4697C9.76257 10.1768 10.2374 10.1768 10.5303 10.4697C10.8232 10.7626 10.8232 11.2374 10.5303 11.5303L9.06067 13Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99142 5.91718C2.03363 5.53735 2.35468 5.25 2.73684 5.25H13.2632C13.6453 5.25 13.9664 5.53735 14.0086 5.91718L14.2087 7.71852C14.5715 10.9838 14.5715 14.2793 14.2087 17.5446L14.189 17.722C14.045 19.0181 13.0404 20.0517 11.7489 20.2325C9.26176 20.5807 6.73823 20.5807 4.25108 20.2325C2.95954 20.0517 1.955 19.0181 1.81098 17.722L1.79128 17.5446C1.42846 14.2793 1.42846 10.9838 1.79128 7.71852L1.99142 5.91718ZM3.40812 6.75L3.2821 7.88417C2.93152 11.0394 2.93152 14.2238 3.2821 17.379L3.3018 17.5563C3.37011 18.171 3.84652 18.6612 4.45905 18.747C6.80822 19.0758 9.19177 19.0758 11.5409 18.747C12.1535 18.6612 12.6299 18.171 12.6982 17.5563L12.7179 17.379C13.0685 14.2238 13.0685 11.0394 12.7179 7.88417L12.5919 6.75H3.40812Z" fill="black"/>
+</svg>

files/wash-n-roll/internal/js/scripts.js

@@ -83,7 +83,7 @@ $(document).ready((e) => {
         spwnJsImg.hide();
     }
     
-    // Product detail: Add and remove amount
+    // Product detail: Add amount
     $(".spwn-add-amount").on("click", function() {
         let amountInput = $(this).parents(".quantity_container").find("input");
         let newAmount = parseInt(amountInput.val()) + 1;
@@ -93,14 +93,28 @@ $(document).ready((e) => {
         amountInput.val(newAmount);
     });
 
+    // Product detail: Remove amount
     $(".spwn-remove-amount").on("click", function() {
         let amountInput = $(this).parents(".quantity_container").find("input");
         let newAmount = parseInt(amountInput.val()) - 1;
-        if (amountInput.val() <= 2) {
-            newAmount = "";
+        if (amountInput.val() <= 1) {
+            newAmount = "1";
         }
         amountInput.val(newAmount);
     });
+    
+    // Move cart voucher box
+    $(".mod_iso_coupons h2").prependTo($(".spwn-coupons"));
+    $(".mod_iso_coupons").appendTo($(".voucher-box"));
+    
+    // Hack checkout
+    $("<div id='spwn-info-boxes'></div>").insertBefore(".review .clear");
+    $(".review .info_container").appendTo($("#spwn-info-boxes"));
+    $(".review .info_container .edit").each(function() {
+        let h3 = $(this).parents(".info_container").find("h3");
+        h3.append("<span class='edit-span'>(<span></span>)</span>");
+        $(this).appendTo(h3.find(".edit-span span"));
+    });
 });
 
 jQuery(function ($) {

files/wash-n-roll/internal/scss/abstracts/_mixins.scss

@@ -7,6 +7,15 @@ $base-size: 16;
   transition: all 0.3s ease-out;
 }
 
+@mixin fullwidth {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin: 0 -50vw 5rem -50vw;
+  background: #f5f5f5;
+}
+
 @mixin button {
   display: inline-block;
   padding: 8px 28px;

files/wash-n-roll/internal/scss/base/_basic.scss

@@ -83,3 +83,35 @@ img {
   margin: auto;
   max-width: 1640px;
 }
+
+#container {
+  padding: 5rem 0 0 0;
+  .nopadding & {
+    padding-top: 0;
+  }
+}
+
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: $font;
+  opacity: 1;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: $font;
+  opacity: 1;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: $font;
+  opacity: 1;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: $font;
+  opacity: 1;
+}

files/wash-n-roll/internal/scss/base/_components.scss

@@ -1,8 +1,6 @@
 @import 'components/slider';
 @import 'components/text';
 @import 'components/youtube';
-@import 'components/product';
-@import 'components/product-carousel';
 @import 'components/category-navigation';
 @import 'components/teaser-large';
 @import 'components/gallery';
@@ -10,3 +8,10 @@
 @import 'components/faq';
 @import 'components/blog';
 @import 'components/pagination';
+@import 'components/quantity';
+@import 'components/product';
+@import 'components/product-carousel';
+@import 'components/error';
+@import 'components/cart';
+@import 'components/checkout';
+@import 'components/checkout_cart_table';

files/wash-n-roll/internal/scss/components/_cart.scss

@@ -0,0 +1,135 @@
+.mod_iso_cart {
+  padding: 0 190px 3rem 190px;
+
+  .spwn-qc {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 164px;
+  }
+
+  .quantity {
+    a {
+      position: relative;
+      display: inline-block;
+      margin: 0 auto;
+      padding: 0 0 0 22px;
+      font-size: size(12);
+      font-weight: 700;
+      color: $font;
+      text-decoration: underline;
+      @include transition();
+
+      &:hover {
+        color: $primary;
+      }
+
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate(0, -50%);
+        width: 16px;
+        height: 21px;
+        background: transparent url("../images/elements/icon-delete.svg") no-repeat left top;
+        background-size: 100% auto;
+      }
+    }
+  }
+
+  .quantity_container {
+    max-width: 162px;
+    margin: 0 0 20px 0;
+
+    input {
+      width: 60px;
+    }
+  }
+
+  .voucher-box {
+    .mod_iso_coupons {
+      @include fullwidth();
+      margin-top: 50px;
+      margin-bottom: 80px;
+    }
+
+    .spwn-coupons {
+      margin: 0 auto;
+      padding: 40px 0 20px 0;
+      max-width: calc(1280px - 24px - 190px - 190px);
+
+      h2 {
+        padding: 0 0 16px 0;
+        color: $primary;
+        font-family: 'Lato', sans-serif;
+        font-weight: 400;
+        font-size: size(24);
+        line-height: size(32);
+      }
+
+      p {
+        font-weight: 300;
+      }
+
+      .formbody {
+        border: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 4px 0 10px 0;
+      }
+
+      .widget {
+        &.widget-text {
+          width: 70%;
+        }
+
+        &.widget-submit {
+          width: calc(30% - 20px);
+        }
+
+        input {
+          width: 100%;
+          padding: 7px 25px;
+          border: 1px solid #aaa;
+          border-radius: 25px;
+        }
+      }
+
+      .submit {
+        @include button();
+        width: 100%;
+        border: 2px solid #fff;
+        background-color: #b0b0b0;
+        color: #fff;
+        font-size: size(22);
+        font-weight: 400;
+
+        &:hover {
+          color: rgba(255, 255, 255, .7);
+        }
+      }
+
+      ul {
+        li {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0 0 10px 0;
+
+          .coupon {
+            width: 70%;
+            margin: 0;
+            text-align: right;
+          }
+
+          .action {
+            width: calc(30% - 20px);
+          }
+        }
+      }
+    }
+  }
+}

files/wash-n-roll/internal/scss/components/_checkout.scss

@@ -0,0 +1,182 @@
+.mod_iso_checkout {
+  padding: 0 190px 3rem 190px;
+
+  .steps {
+    padding: 0 0 5.5rem 0;
+
+    ol {
+      display: flex;
+      justify-content: flex-start;
+      align-items: baseline;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      position: relative;
+      padding: 0 11px 0 24px;
+      list-style: none;
+      font-family: 'Mohave', sans-serif;
+      font-weight: 300;
+      font-size: size(36);
+      line-height: size(52);
+      color: $tertiary;
+
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 21px;
+        width: 13px;
+        height: 10px;
+        background: transparent url("../images/elements/icon-breadcrumb-arrow.svg") no-repeat left top;
+        background-size: 100% auto;
+      }
+
+      &.active {
+        font-weight: 700;
+        font-size: size(64);
+        color: $font;
+
+        &:before {
+          bottom: 13px;
+        }
+      }
+
+      &:first-child {
+        padding-left: 0;
+
+        &:before {
+          display: none;
+        }
+      }
+
+      a {
+        color: $tertiary;
+      }
+
+      span {
+
+      }
+    }
+  }
+
+  h2:not(.review h2, .process h2) {
+    padding: 0 0 16px 0;
+    color: $primary;
+    font-family: 'Lato', sans-serif;
+    font-weight: 400;
+    font-size: size(24);
+    line-height: size(32);
+  }
+
+  p {
+    margin-bottom: 2rem;
+  }
+
+  .address:not(li.address),
+  .payment:not(li.payment),
+  .review:not(li.review) {
+    width: 100%;
+  }
+
+  .shippingaddress,
+  .paymentmethod {
+    padding-top: 40px;
+
+    .widget-radio {
+      width: 100%;
+
+      fieldset {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      span {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: calc(50% - 20px);
+      }
+
+      input {
+        width: auto;
+        padding: 0;
+        border: none;
+        border-radius: 0;
+      }
+
+      label {
+        padding: 0 0 0 0.5rem;
+      }
+    }
+  }
+
+  .formbody {
+    .widget {
+      position: relative;
+
+      label {
+
+      }
+
+      input {
+        display: block;
+      }
+    }
+
+    .review {
+      &.orderinfo {
+
+      }
+
+      &.orderproducts {
+
+      }
+
+      .info_container {
+
+      }
+    }
+  }
+
+  #spwn-info-boxes {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    padding: 20px 0 0 0;
+
+    .info_container {
+      width: 50%;
+      padding: 0 0 5rem 0;
+
+      .edit {
+      }
+
+      h3 {
+        padding: 0 0 16px 0;
+        color: $primary;
+        font-family: 'Lato', sans-serif;
+        font-weight: 400;
+        font-size: size(24);
+        line-height: size(32);
+        .edit-span {
+          padding: 0 0 0 4px;
+          color: $font;
+          font-size: size(12);
+          span {
+            
+          }
+        }
+        a {
+          color: $font;
+          @include transition();
+          &:hover {
+            color: $primary;
+          }
+        }
+      }
+    }
+  }
+}

files/wash-n-roll/internal/scss/components/_checkout_cart_table.scss

@@ -0,0 +1,92 @@
+.mod_iso_cart,
+.mod_iso_checkout {
+
+  .formbody {
+    border-bottom: 1px solid #f2f2f2;
+
+    table {
+      width: 100%;
+
+      thead {
+        th {
+          padding: 0 0 40px 0;
+          vertical-align: top;
+          text-align: left;
+          font-weight: 700;
+          border-bottom: 1px solid #f2f2f2;
+
+          &.spwn-price {
+            text-align: right;
+          }
+        }
+      }
+
+      tbody {
+        td {
+          padding: 30px 0 10px 0;
+          vertical-align: top;
+
+          &.price.total {
+            text-align: right;
+          }
+        }
+
+        .row_last {
+          td {
+            padding-bottom: 40px;
+            border-bottom: 1px solid #f2f2f2;
+          }
+        }
+      }
+
+      tfoot {
+        td {
+          padding-bottom: 10px;
+        }
+
+        .foot_first {
+          td {
+            padding-top: 30px;
+          }
+        }
+
+        .foot_last {
+          td {
+            padding-bottom: 35px;
+          }
+        }
+
+        .price {
+          text-align: right;
+        }
+      }
+    }
+
+    .image_container {
+      img {
+        width: 100px;
+      }
+    }
+  }
+
+  .submit_container {
+    display: flex;
+    justify-content: flex-end;
+    padding: 35px 0 0 0;
+
+    .submit {
+      @include button();
+      width: auto;
+      margin-left: 20px;
+    }
+
+    .button_update {
+
+    }
+
+    .button_checkout {
+
+    }
+  }
+
+}

files/wash-n-roll/internal/scss/components/_error.scss

@@ -0,0 +1,4 @@
+.error {
+  color: #f00;
+  font-weight: 700;
+}

files/wash-n-roll/internal/scss/components/_form.scss

@@ -1,11 +1,19 @@
 .ce_form {
   padding: 0 190px 3rem 190px;
+}
 
-  .formbody {
+.mod_iso_checkout form,
+.ce_form {
+
+  .formbody,
+  .address_new {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
   }
+  .address_new[style="display: block;"] {
+    display: flex !important;
+  }
 
   .widget {
     width: calc(50% - 20px);

files/wash-n-roll/internal/scss/components/_gallery.scss

@@ -1,10 +1,5 @@
 .ce_gallery {
-  width: 100vw;
-  position: relative;
-  left: 50%;
-  right: 50%;
-  margin: 0 -50vw 5rem -50vw;
-  background: #f5f5f5;
+  @include fullwidth();
   ul {
     display: flex;
     justify-content: space-evenly;

files/wash-n-roll/internal/scss/components/_product.scss

@@ -278,34 +278,6 @@
     width: 100%;
     padding: 0 0 4rem 0;
 
-    .quantity_container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin: 0 12px;
-      font-size: 24px;
-      line-height: 28px;
-      background: #f2f2f2;
-      border-radius: 20px;
-      label {
-        display: none;
-      }
-      .spwn-amount {
-        display: block;
-        padding: 5px 20px;
-        cursor: pointer;
-      }
-      input {
-        width: 100px;
-        text-align: center;
-        font-size: 24px;
-        line-height: 28px;
-        font-weight: 700;
-        background: transparent;
-        border: none;
-      }
-    }
-
     .submit {
       @include button();
       margin: 0 12px;

files/wash-n-roll/internal/scss/components/_quantity.scss

@@ -0,0 +1,30 @@
+.quantity_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 12px;
+  font-size: 24px;
+  line-height: 28px;
+  background: #f2f2f2;
+  border-radius: 20px;
+
+  label {
+    display: none;
+  }
+
+  .spwn-amount {
+    display: block;
+    padding: 5px 20px;
+    cursor: pointer;
+  }
+
+  input {
+    width: 100px;
+    text-align: center;
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 700;
+    background: transparent;
+    border: none;
+  }
+}

files/wash-n-roll/internal/scss/layout/_forms.scss

@@ -1,77 +0,0 @@
-.ce_form {
-  .widget {
-    input.text,
-    textarea {
-      width: 100%;
-      font-size: size(15);
-      background: transparent;
-      border: none;
-      border-bottom: 1px solid #fff;
-      color: #fff;
-      margin-bottom: 15px;
-
-      &::placeholder {
-        color: inherit;
-      }
-    }
-
-    textarea {
-      border: 1px solid #fff;
-      margin-top: 15px;
-    }
-
-    .checkbox_container {
-      margin-bottom: 15px;
-
-      input {
-        padding: 0;
-        height: initial;
-        width: initial;
-        margin-bottom: 0;
-        display: none;
-        cursor: pointer;
-
-        &:checked + label:after {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 1px;
-          left: 7px;
-          width: 5px;
-          height: 13px;
-          border: solid $primary;
-          border-width: 0 2px 2px 0;
-          transform: rotate(45deg);
-        }
-      }
-
-      label {
-        position: relative;
-        cursor: pointer;
-        font-size: size(13);
-        line-height: size(23);
-
-        &:before {
-          content: '';
-          -webkit-appearance: none;
-          background-color: transparent;
-          border: 1px solid #ffff;
-          padding: 8px;
-          display: block;
-          width: 18px;
-          height: 18px;
-          position: relative;
-          vertical-align: middle;
-          cursor: pointer;
-          margin-right: 10px;
-          margin-bottom: 20px;
-          float: left;
-        }
-      }
-    }
-
-    button.submit {
-      @include button();
-    }
-  }
-}