CSS / JS

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

@@ -78,7 +78,15 @@ $(document).ready((e) => {
     });
     
     // Add number to header basket
-    $("#header-basket-items").appendTo("header a.isotope-basket, header strong.isotope-basket");
+    $("#header-basket-items").appendTo("header #spwn-main-nav a.isotope-basket, header #spwn-main-nav strong.isotope-basket");
+    
+    // Mobile navigation
+    $(".spwn-nav-icon").on("click", function() {
+        $("body").addClass("mobile-nav-open");
+    });
+    $(".spwn-nav-close").on("click", function() {
+        $("body").removeClass("mobile-nav-open");
+    });
     
     // FAQ list toggle
     $(".mod_faqlist ul li h3").on("click", function() {

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

@@ -10,6 +10,7 @@
 @import 'components/blog';
 @import 'components/pagination';
 @import 'components/quantity';
+@import 'components/downloads';
 @import 'components/product';
 @import 'components/product-carousel';
 @import 'components/error';

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

@@ -21,6 +21,11 @@
       font-size: size(36);
       line-height: size(52);
       color: $tertiary;
+      
+      &.shipping,
+      &.payment {
+        display: none;
+      }
 
       &:before {
         content: "";

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

@@ -0,0 +1,3 @@
+.ce_downloads {
+  padding: 0 0 4rem 0;
+}

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

@@ -31,6 +31,41 @@
       justify-content: flex-end;
       width: 100%;
     }
+
+    &[data-name="shippingaddress_company"],
+    &[data-name="billingaddress_company"],
+    &[data-name="shippingaddress_country"],
+    &[data-name="billingaddress_country"] {
+      width: 100%;
+    }
+    &[data-name="shippingaddress_postal"],
+    &[data-name="billingaddress_postal"] {
+      width: calc(25% - 20px);
+      @media (max-width: 575px) {
+        width: 100%;
+      }
+    }
+    &[data-name="shippingaddress_city"],
+    &[data-name="billingaddress_city"] {
+      width: calc(75% - 20px);
+      @media (max-width: 575px) {
+        width: 100%;
+      }
+    }
+    &[data-name="shippingaddress_street_1"],
+    &[data-name="billingaddress_street_1"] {
+      width: calc(75% - 20px);
+      @media (max-width: 575px) {
+        width: 100%;
+      }
+    }
+    &[data-name="shippingaddress_street_2"],
+    &[data-name="billingaddress_street_2"] {
+      width: calc(25% - 20px);
+      @media (max-width: 575px) {
+        width: 100%;
+      }
+    }
   }
 
   label {
@@ -54,6 +89,14 @@
   select {
     padding-top: 10px;
     padding-bottom: 10px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: $white url("../images/elements/arrow-select.png") no-repeat calc(100% - 20px) 50%;
+    background-size: 10px auto;
+    &::-ms-expand {
+      display: none;
+    }
   }
 
   textarea {

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

@@ -50,4 +50,16 @@
     }
 
   }
-}
+}
+
+.ce_bs_grid_gallery {
+  @media (max-width: 768px) {
+    .row {
+      display: block;
+
+      .col {
+        padding: 0 0 2rem 0;
+      }
+    }
+  }
+}

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

@@ -216,6 +216,11 @@
           line-height: inherit;
         }
       }
+
+      .spwn-additional-information {
+        padding-top: 0.5rem;
+        text-align: center;
+      }
     }
 
     .image_container {
@@ -223,10 +228,13 @@
     }
 
     img {
-      width: 554px;
+      //width: 554px;
+      height: 600px;
+      width: auto;
       margin: 0 auto;
       @media (max-width: 768px) {
         width: 100%;
+        height: auto;
       }
     }
 
@@ -247,10 +255,21 @@
     }
   }
 
+  .spwn-downloads {
+    padding-top: 2rem;
+  }
+
+  .spwn-additional-info {
+    padding: 0 0 4rem 0;
+  }
+
   h1, h2 {
     width: 100%;
     text-align: center;
-    padding: 0 0 8rem 0;
+    padding: 0 0 6rem 0;
+    @media (max-width: 768px) {
+      padding-bottom: 4rem;
+    }
   }
 
   h3 {
@@ -276,7 +295,8 @@
       padding: 2rem 0 0 0;
 
       .spwn-inner {
-        max-width: calc(1280px - 24px - 190px - 190px);
+        overflow: hidden;
+        max-width: calc(1280px - 190px - 190px);
         margin: 0 auto;
         @media (max-width: 1280px) {
           max-width: calc(100% - 14.85vw - 14.85vw);
@@ -289,7 +309,10 @@
         }
       }
     }
+  }
 
+  .description,
+  .spwn-additional-text {
     ul {
       li {
         position: relative;
@@ -320,6 +343,9 @@
     .submit {
       @include button();
       margin: 0 12px;
+      @media (max-width: 575px) {
+        margin-bottom: 1rem;
+      }
     }
   }
 }

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

@@ -7,6 +7,9 @@
   line-height: 28px;
   background: #f2f2f2;
   border-radius: 20px;
+  @media (max-width: 575px) {
+    margin-bottom: 1rem;
+  }
 
   label {
     display: none;

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

@@ -101,6 +101,15 @@
     top: 50%;
     text-align: right;
     max-width: 750px;
+    @media (max-width: 768px) {
+      right: auto;
+      left: 0;
+      top: auto;
+      bottom: 20px;
+      width: 100%;
+      max-width: none;
+      text-align: center;
+    }
 
     a {
       display: inline-block;
@@ -122,5 +131,17 @@
     color: $white;
     line-height: size(64);
     padding: 0 0 2rem 0;
+    @media (max-width: 768px) {
+      background: rgba(255,255,255, 0.4);
+      padding: 1rem;
+      margin-bottom: 1rem;
+      text-align: left;
+      span[style*="#bcd03c"] {
+        text-shadow: 0 0 8px $font;
+      }
+    }
+    @media (max-width: 575px) {
+      line-height: size(40);      
+    }
   }
 }

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

@@ -6,6 +6,44 @@
     padding-bottom: 56.25%;
     width: 100%;
     height: auto;
+
+    a {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 200;
+
+      &:after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 77px;
+        height: 78px;
+        -webkit-mask-image: url("../images/elements/youtube-play-icon.svg");
+        mask-image: url("../images/elements/youtube-play-icon.svg");
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: left top;
+        mask-position: left top;
+        -webkit-mask-size: 100% auto;
+        mask-size: 100% auto;
+        background-color: $white;
+        @media (max-width: 575px) {
+          transform: translate(-50%, -50%) scale(50%);
+        }
+      }
+
+      &:hover {
+        &:after {
+          background-color: $youtube-red;
+        }
+      }
+    }
   }
 
   img,
@@ -113,38 +151,6 @@
         height: auto;
       }
 
-      a {
-        display: block;
-
-        &:after {
-          content: "";
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          width: 77px;
-          height: 78px;
-          -webkit-mask-image: url("../images/elements/youtube-play-icon.svg");
-          mask-image: url("../images/elements/youtube-play-icon.svg");
-          -webkit-mask-repeat: no-repeat;
-          mask-repeat: no-repeat;
-          -webkit-mask-position: left top;
-          mask-position: left top;
-          -webkit-mask-size: 100% auto;
-          mask-size: 100% auto;
-          background-color: $white;
-          @media (max-width: 575px) {
-            transform: translate(-50%, -50%) scale(50%);
-          }
-        }
-
-        &:hover {
-          &:after {
-            background-color: $youtube-red;
-          }
-        }
-      }
-
       img,
       iframe {
         border-radius: 20px;
@@ -160,7 +166,7 @@
       font-size: size(24);
       line-height: size(30);
       color: $white;
-      background: rgba(0,0,0,0.7);
+      background: rgba(0, 0, 0, 0.7);
       border-bottom-left-radius: 20px;
       border-bottom-right-radius: 20px;
       @media (max-width: 575px) {

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

@@ -37,8 +37,15 @@ header {
     }
   }
 
-  .mod_navigation {
-    @media (max-width: 768px) {
+  .spwn-navigations {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  #spwn-main-nav.mod_navigation {
+    .spwn-nav-icon,
+    .spwn-nav-close {
       display: none;
     }
 
@@ -49,6 +56,12 @@ header {
 
     li {
       margin-left: 22px;
+      @media (max-width: 768px) {
+        display: none;
+        &.isotope-basket {
+          display: block;
+        }
+      }
 
       a, strong {
         display: block;
@@ -89,6 +102,10 @@ header {
           border-color: $tertiary;
           text-indent: -9999px;
           width: 78px;
+          @media (max-width: 1004px) {
+            line-height: 24px;
+            background-size: 18px auto;
+          }
 
           &:hover {
             background-color: #F5F5F5;
@@ -100,6 +117,109 @@ header {
     }
   }
 
+  #spwn-mobile-nav.mod_navigation {
+    display: none;
+    @media (max-width: 768px) {
+      display: block;
+    }
+
+    .spwn-nav-icon {
+      position: relative;
+      width: 24px;
+      height: 18px;
+      border-top: 2px solid $font;
+      cursor: pointer;
+      margin-left: 24px;
+
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background: $font;
+      }
+
+      &:before {
+        top: 5px;
+      }
+
+      &:after {
+        top: 12px;
+      }
+    }
+
+    .spwn-nav-close {
+      position: absolute;
+      right: 20px;
+      top: 70px;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+
+      &:before,
+      &:after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 2px;
+        height: 24px;
+        background: $font;
+      }
+
+      &:before {
+        transform: rotate(45deg) translate(-9px, 9px);
+      }
+
+      &:after {
+        transform: rotate(-45deg) translate(-9px, -9px);
+      }
+    }
+
+    .spwn-nav {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 200;
+      width: 50vw;
+      height: 100vh;
+      background: $white;
+      border-left: 2px solid $primary;
+      box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);
+      @include transition();
+      @media (max-width: 575px) {
+        width: 80vw;
+      }
+
+      .mobile-nav-open & {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    ul {
+      padding: 7rem 0 0 0;
+    }
+
+    li {
+      font-size: size(20);
+      line-height: size(24);
+      &.isotope-basket {
+        display: none;
+      }
+    }
+    a, 
+    strong {
+      display: block;
+      padding: 1rem 3rem;
+    }
+  }
+
   #header-basket-items {
     position: absolute;
     right: 15px;