From c083a131e7ea0d543dc89335ba5d77bf8751cc53 Mon Sep 17 00:00:00 2001 From: Florian Eisenmenger Date: Thu, 7 Jul 2022 13:49:22 +0200 Subject: [PATCH] css and js --- .gitignore | 2 + .../internal/images/elements/icon-delete.svg | 5 + files/wash-n-roll/internal/js/scripts.js | 20 +- files/wash-n-roll/internal/scss/.DS_Store | Bin 6148 -> 6148 bytes .../internal/scss/abstracts/_mixins.scss | 9 + .../internal/scss/base/_basic.scss | 32 +++ .../internal/scss/base/_components.scss | 9 +- .../internal/scss/components/_cart.scss | 135 +++++++++++++ .../internal/scss/components/_checkout.scss | 182 ++++++++++++++++++ .../scss/components/_checkout_cart_table.scss | 92 +++++++++ .../internal/scss/components/_error.scss | 4 + .../internal/scss/components/_form.scss | 10 +- .../internal/scss/components/_gallery.scss | 7 +- .../internal/scss/components/_product.scss | 28 --- .../internal/scss/components/_quantity.scss | 30 +++ .../internal/scss/layout/_forms.scss | 77 -------- 16 files changed, 525 insertions(+), 117 deletions(-) create mode 100644 .gitignore create mode 100644 files/wash-n-roll/internal/images/elements/icon-delete.svg create mode 100644 files/wash-n-roll/internal/scss/components/_cart.scss create mode 100644 files/wash-n-roll/internal/scss/components/_checkout.scss create mode 100644 files/wash-n-roll/internal/scss/components/_checkout_cart_table.scss create mode 100644 files/wash-n-roll/internal/scss/components/_error.scss create mode 100644 files/wash-n-roll/internal/scss/components/_quantity.scss delete mode 100644 files/wash-n-roll/internal/scss/layout/_forms.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e329f0a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.DS_Store +*.idea \ No newline at end of file diff --git a/files/wash-n-roll/internal/images/elements/icon-delete.svg b/files/wash-n-roll/internal/images/elements/icon-delete.svg new file mode 100644 index 0000000..9c2224e --- /dev/null +++ b/files/wash-n-roll/internal/images/elements/icon-delete.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/files/wash-n-roll/internal/js/scripts.js b/files/wash-n-roll/internal/js/scripts.js index b398eb9..86edf9a 100644 --- a/files/wash-n-roll/internal/js/scripts.js +++ b/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 + $("
").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("()"); + $(this).appendTo(h3.find(".edit-span span")); + }); }); jQuery(function ($) { diff --git a/files/wash-n-roll/internal/scss/.DS_Store b/files/wash-n-roll/internal/scss/.DS_Store index b0e59d6689c70075e56d4b77ef6c46b80a266262..a3a45a9041553a9c9baf38a7ca3dfd7e916d1a14 100644 GIT binary patch delta 23 fcmZoMXfc?uijiUBYK4s#&DbY4ux)1N_{$FfYF`MX delta 25 hcmZoMXfc?uiji^RY6V8djTg<>CpNHdX6N|J4*+t82&Mo4 diff --git a/files/wash-n-roll/internal/scss/abstracts/_mixins.scss b/files/wash-n-roll/internal/scss/abstracts/_mixins.scss index 06c49c5..975b822 100644 --- a/files/wash-n-roll/internal/scss/abstracts/_mixins.scss +++ b/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; diff --git a/files/wash-n-roll/internal/scss/base/_basic.scss b/files/wash-n-roll/internal/scss/base/_basic.scss index 74868a7..d8833ad 100644 --- a/files/wash-n-roll/internal/scss/base/_basic.scss +++ b/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; +} diff --git a/files/wash-n-roll/internal/scss/base/_components.scss b/files/wash-n-roll/internal/scss/base/_components.scss index 2ab52d9..473d8d0 100644 --- a/files/wash-n-roll/internal/scss/base/_components.scss +++ b/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'; diff --git a/files/wash-n-roll/internal/scss/components/_cart.scss b/files/wash-n-roll/internal/scss/components/_cart.scss new file mode 100644 index 0000000..2647c26 --- /dev/null +++ b/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); + } + } + } + } + } +} \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_checkout.scss b/files/wash-n-roll/internal/scss/components/_checkout.scss new file mode 100644 index 0000000..0dc1cee --- /dev/null +++ b/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; + } + } + } + } + } +} \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_checkout_cart_table.scss b/files/wash-n-roll/internal/scss/components/_checkout_cart_table.scss new file mode 100644 index 0000000..505398e --- /dev/null +++ b/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 { + + } + } + +} \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_error.scss b/files/wash-n-roll/internal/scss/components/_error.scss new file mode 100644 index 0000000..1bf47c6 --- /dev/null +++ b/files/wash-n-roll/internal/scss/components/_error.scss @@ -0,0 +1,4 @@ +.error { + color: #f00; + font-weight: 700; +} \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_form.scss b/files/wash-n-roll/internal/scss/components/_form.scss index b3ac214..a22c82e 100644 --- a/files/wash-n-roll/internal/scss/components/_form.scss +++ b/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); diff --git a/files/wash-n-roll/internal/scss/components/_gallery.scss b/files/wash-n-roll/internal/scss/components/_gallery.scss index 61cbe61..23697bc 100644 --- a/files/wash-n-roll/internal/scss/components/_gallery.scss +++ b/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; diff --git a/files/wash-n-roll/internal/scss/components/_product.scss b/files/wash-n-roll/internal/scss/components/_product.scss index 9f6ae79..caea71d 100644 --- a/files/wash-n-roll/internal/scss/components/_product.scss +++ b/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; diff --git a/files/wash-n-roll/internal/scss/components/_quantity.scss b/files/wash-n-roll/internal/scss/components/_quantity.scss new file mode 100644 index 0000000..a1f4e24 --- /dev/null +++ b/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; + } +} diff --git a/files/wash-n-roll/internal/scss/layout/_forms.scss b/files/wash-n-roll/internal/scss/layout/_forms.scss deleted file mode 100644 index ceb8b91..0000000 --- a/files/wash-n-roll/internal/scss/layout/_forms.scss +++ /dev/null @@ -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(); - } - } -}