forked from M3-Academy/m3-academy-template-checkout
feat(meu carrinho): layout tem tamanhos desktop
This commit is contained in:
parent
f4f8f80d19
commit
cf6515f4c9
@ -31,20 +31,28 @@ export default class Footer {
|
||||
|
||||
async selectors() {
|
||||
this.checkoutVazio = await waitElement(".empty-cart-content");
|
||||
this.checkoutAtivo = await waitElement(".checkout-container");
|
||||
this.payments = await waitElement(".footerCheckout__payments");
|
||||
this.vtexpci = await waitElement(".footerCheckout__vtexpci");
|
||||
this.devIncons = await waitElement(".footerCheckout__developedBy");
|
||||
this.listaPrateleira = await waitElement(".footerCheckout__prateleira");
|
||||
this.titulo = await waitElement(".transactions-container");
|
||||
this.cartTitulo = await waitElement("#cart-title");
|
||||
this.titleSlick = await waitElement(".transactions-container");
|
||||
}
|
||||
|
||||
onUpdate() {
|
||||
let target = this.checkoutVazio;
|
||||
let list = this.listaPrateleira;
|
||||
let cartTitle = this.cartTitulo;
|
||||
let slickTitle = this.titleSlick;
|
||||
|
||||
if (target.style.display == "none" && window.location.hash == "#/cart") {
|
||||
list.style.display = "flex";
|
||||
list.style.display = "block";
|
||||
this.fetchApi();
|
||||
} else {
|
||||
this.cartTitulo.style.display = "none";
|
||||
list.style.display = "none";
|
||||
}
|
||||
let config = { childList: true, attributes: true };
|
||||
@ -55,11 +63,18 @@ export default class Footer {
|
||||
mutations.forEach(function (mutation) {
|
||||
if (target.style.display != "none") {
|
||||
list.style.display = "none";
|
||||
} else list.style.display = "flex";
|
||||
cartTitle.style.display = "none";
|
||||
if (list.style.display == "none") {
|
||||
slickTitle.style.display = "none";
|
||||
}
|
||||
} else {
|
||||
cartTitle.style.display = "block";
|
||||
list.style.display = "flex";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(target, config);
|
||||
observer.observe(target, config, cartTitle, slickTitle);
|
||||
}
|
||||
|
||||
async addCarrossel() {
|
||||
|
||||
@ -10,9 +10,15 @@
|
||||
@include mq(md, max) {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
.cart-template-holder {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.item-unit-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid $gray-100;
|
||||
box-sizing: border-box;
|
||||
@ -75,6 +81,10 @@
|
||||
.summary-template-holder {
|
||||
border-top: none;
|
||||
background: $white;
|
||||
|
||||
.row-fluid summary {
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
#go-to-cart-button a {
|
||||
@ -95,13 +105,6 @@
|
||||
color: $white;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
background: lighten($black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: darken($black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -168,7 +171,6 @@
|
||||
transition: ease-in 0.22s all;
|
||||
|
||||
&:hover {
|
||||
color: darken($black, 10);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -390,14 +392,10 @@
|
||||
outline: none;
|
||||
padding: 12px 40px;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($gray-50, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($gray-50, 5);
|
||||
}
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -413,26 +411,19 @@
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $black;
|
||||
background-color: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $white;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($black, 5);
|
||||
}
|
||||
padding: 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -442,6 +433,7 @@
|
||||
&__wrapper {
|
||||
background-color: $white;
|
||||
border-radius: 100px;
|
||||
border: 1px solid $gray-125;
|
||||
width: 100%;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
@ -449,15 +441,19 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
color: $gray-125;
|
||||
}
|
||||
|
||||
&__current {
|
||||
border: 1px solid $color-blue;
|
||||
border: 1px solid $black;
|
||||
border-radius: 100px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
label {
|
||||
@ -471,6 +467,10 @@
|
||||
|
||||
.srp-postal-code {
|
||||
.ship-postalCode {
|
||||
.ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
@ -482,7 +482,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid $gray-125;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $color-gray3;
|
||||
@ -493,9 +493,9 @@
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: $black;
|
||||
background-color: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
@ -507,14 +507,6 @@
|
||||
transition: all 0.2s linear;
|
||||
width: 96px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($black, 5);
|
||||
}
|
||||
}
|
||||
|
||||
small a {
|
||||
@ -523,11 +515,16 @@
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
color: $color-blue;
|
||||
color: $black;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
small:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
display: none;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
@ -552,7 +549,7 @@
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -606,7 +603,6 @@
|
||||
#cart-link-coupon-add {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -638,14 +634,16 @@
|
||||
}
|
||||
|
||||
.coupon-label label {
|
||||
text-align: left;
|
||||
font-family: $font-family-secundary !important;
|
||||
cursor: default;
|
||||
margin-bottom: 12px;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $gray-150;
|
||||
cursor: none;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.coupon-fields {
|
||||
@ -668,11 +666,15 @@
|
||||
border: 2px solid $color-gray3;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $gray-200;
|
||||
font-family: $font-family-secundary !important;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $gray-200;
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
max-width: 160px;
|
||||
padding: 0 16px;
|
||||
width: 51%;
|
||||
|
||||
@include mq(sm, max) {
|
||||
max-width: 100%;
|
||||
@ -681,30 +683,28 @@
|
||||
}
|
||||
|
||||
button {
|
||||
background: $black;
|
||||
text-align: center;
|
||||
background: $blue;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $white;
|
||||
font-size: 12px;
|
||||
color: $black;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
margin-left: 6px;
|
||||
outline: none;
|
||||
transition: all 0.2s linear;
|
||||
width: 94px;
|
||||
width: 35%;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
margin-left: 5px;
|
||||
|
||||
@include mq(md, max) {
|
||||
width: 138px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($black, 5);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken($black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -800,10 +800,6 @@
|
||||
padding: 12px 19px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($blue, 5);
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "finalizar compra";
|
||||
font-family: $font-family;
|
||||
|
||||
@ -11,29 +11,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-family: $font-family;
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
margin-top: 170px;
|
||||
}
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: ease-in 0.22s all;
|
||||
background: $white;
|
||||
border: 1px solid $black;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
font-family: $font-family-secundary;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $white;
|
||||
padding: 15px 65px;
|
||||
color: $black;
|
||||
text-transform: uppercase;
|
||||
|
||||
a {
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: "Continuar comprando";
|
||||
color: $black;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($black, 5);
|
||||
background: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,13 +84,14 @@ body {
|
||||
|
||||
#cart-title,
|
||||
#orderform-title {
|
||||
color: $gray-500;
|
||||
font-family: $font-family;
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
color: $gray-500;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin: 40px 0 30px;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(md, max) {
|
||||
|
||||
@ -23,6 +23,7 @@ footer .footerCheckout__prateleira {
|
||||
|
||||
.img-container {
|
||||
margin: 0;
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
.itemtName {
|
||||
|
||||
@ -15,6 +15,7 @@ $gray-125: #c4c4c4;
|
||||
$gray-150: #989898;
|
||||
$gray-200: #8d8d8d;
|
||||
$gray-500: #292929;
|
||||
$gray-600: #7d7d7d;
|
||||
|
||||
$blue: #00c8ff;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user