forked from M3-Academy/m3-academy-template-checkout
style(Checkout): modificando estilo para as telas 1280px ,2500px, 1024px e 375px
This commit is contained in:
parent
0dde80a886
commit
dfa072e687
@ -5,7 +5,7 @@ import waitForEl from "../helpers/waitForEl";
|
||||
export default class CheckoutUI {
|
||||
constructor() {
|
||||
this.init();
|
||||
|
||||
this.removeText();
|
||||
if (isSmallerThen768) {
|
||||
this.selectors();
|
||||
this.events();
|
||||
@ -66,4 +66,9 @@ export default class CheckoutUI {
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
removeText() {
|
||||
let textHtml = document.querySelector(".empty-cart-message");
|
||||
textHtml.remove();
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,7 @@ export default class Footer {
|
||||
await this.ListProducts();
|
||||
}
|
||||
|
||||
|
||||
async selectors() {
|
||||
//Para verificar se o carrinho está vazio e remover a prateleira de produtos:
|
||||
// vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
|
||||
@ -124,5 +125,7 @@ export default class Footer {
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -18,8 +18,10 @@
|
||||
border-radius: 5px;
|
||||
padding: 16px;
|
||||
margin-bottom: 48px;
|
||||
height: 125px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
padding: 16px 31px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
@ -143,6 +145,10 @@
|
||||
width: 146px;
|
||||
height: auto;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
width: 60px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 72px;
|
||||
@ -160,6 +166,11 @@
|
||||
width: 146px;
|
||||
height: auto;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -168,6 +179,11 @@
|
||||
@media (min-width: $checkout2500px) {
|
||||
padding-left: 31px;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
left: 145px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include mq(lg, max) {
|
||||
width: 250px;
|
||||
}
|
||||
@ -194,6 +210,17 @@
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 23px;
|
||||
}
|
||||
|
||||
@media (max-width: $checkout1024px) {
|
||||
top: -11px;
|
||||
position: relative;
|
||||
left: -61px;
|
||||
}
|
||||
@media (max-width: $checkout375px) {
|
||||
top: -30px;
|
||||
position: relative;
|
||||
left: -146px;
|
||||
}
|
||||
}
|
||||
|
||||
.brand,
|
||||
@ -209,6 +236,10 @@
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-gray6;
|
||||
padding-left: 0;
|
||||
@media (max-width: $checkout1024px) {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: $checkout2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
@ -220,6 +251,15 @@
|
||||
|
||||
.product-price {
|
||||
min-width: 100px;
|
||||
padding-left: 0;
|
||||
width: 148px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: auto;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
min-width: 78px;
|
||||
}
|
||||
@ -252,6 +292,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
th.quantity,
|
||||
th.quantity-price,
|
||||
td.quantity-price {
|
||||
@media (max-width: $checkout1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
td.quantity {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray3;
|
||||
@ -259,7 +307,7 @@
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 8px auto 0 0;
|
||||
margin: 14px auto 0 0;
|
||||
height: 34px;
|
||||
width: 99px;
|
||||
padding: 0;
|
||||
@ -268,10 +316,13 @@
|
||||
margin-left: 84px !important;
|
||||
}
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 135px;
|
||||
min-width: 135px;
|
||||
height: 50px;
|
||||
margin: 65px auto 0 0;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
margin: 26px auto 0 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
@ -400,14 +451,29 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
a#item-remove-2616 {
|
||||
@media (max-width: $checkout1024px) {
|
||||
top: -31px;
|
||||
position: relative;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-remove {
|
||||
@media (max-width: 490px) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
color: $color-gray4;
|
||||
font-size: 15px;
|
||||
color: $color-gray8;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
font-size: 10px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
font-size: 18px;
|
||||
@ -521,19 +587,28 @@
|
||||
}
|
||||
|
||||
.srp-pickup-my-location__button {
|
||||
background-color: $color-black;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
|
||||
height: 42px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
line-height: 19px;
|
||||
background: $color-blue2;
|
||||
border-radius: 8px;
|
||||
font-family: "Open Sans";
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 543.67px;
|
||||
height: 60.98px;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
@ -545,8 +620,10 @@
|
||||
}
|
||||
|
||||
.srp-toggle {
|
||||
margin: 0 0 34px;
|
||||
|
||||
margin: 0 0 20px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
margin: 0 0 21.33px;
|
||||
}
|
||||
&__wrapper {
|
||||
background-color: $color-white;
|
||||
border-radius: 100px;
|
||||
@ -557,6 +634,10 @@
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 543.67px;
|
||||
height: 57px;
|
||||
}
|
||||
}
|
||||
|
||||
&__current {
|
||||
@ -567,6 +648,16 @@
|
||||
|
||||
.blue {
|
||||
color: $color-black2;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
@media (min-width: $checkout2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@ -583,15 +674,20 @@
|
||||
label {
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: $color-black;
|
||||
line-height: 16px;
|
||||
color: $color-black2;
|
||||
margin-bottom: 12px;
|
||||
font-family: "Open Sans";
|
||||
@media (min-width: $checkout2500px) {
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $color-gray3;
|
||||
border: 1px solid color-gray8;
|
||||
border-radius: 5px;
|
||||
box-shadow: none;
|
||||
color: $color-gray3;
|
||||
@ -599,24 +695,39 @@
|
||||
height: 36px;
|
||||
padding: 12px 8px;
|
||||
width: 172px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 333.96px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ button {
|
||||
background-color: $color-black;
|
||||
background: $color-blue2;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
height: 36px;
|
||||
letter-spacing: 1px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: -150px;
|
||||
top: 36px;
|
||||
top: 39px;
|
||||
transition: all 0.2s linear;
|
||||
width: 96px;
|
||||
width: 100px;
|
||||
text-transform: uppercase;
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
letter-spacing: 0.05em;
|
||||
cursor: pointer;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 194.16px;
|
||||
height: 55px;
|
||||
right: -413px;
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
top: 55px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: lighten($color-black, 5);
|
||||
}
|
||||
@ -627,13 +738,25 @@
|
||||
}
|
||||
|
||||
small a {
|
||||
font-family: $font-family;
|
||||
margin-top: 4px;
|
||||
font-size: 0;
|
||||
color: $color-black2;
|
||||
cursor: pointer;
|
||||
&::before {
|
||||
content: "Não sei meu código postal";
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 10px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 12px;
|
||||
color: $color-blue;
|
||||
margin-top: 7px;
|
||||
text-decoration-line: underline;
|
||||
font-size: 10px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.help.error {
|
||||
@ -643,6 +766,9 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
top: 17px;
|
||||
@media (min-width: $checkout2500px) {
|
||||
top: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -713,6 +839,14 @@
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 688.35px;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
width: 98%;
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
margin: 0 16px;
|
||||
}
|
||||
.coupon-data {
|
||||
margin-top: 1px;
|
||||
#cart-link-coupon-add {
|
||||
@ -918,10 +1052,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cart-links-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 362px;
|
||||
width: 354px;
|
||||
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: 688.35px;
|
||||
@ -976,7 +1111,7 @@
|
||||
transition: ease-in 0.22s all;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
height: 42px;
|
||||
height: 41.67px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -1023,10 +1158,12 @@
|
||||
.item-quantity-change-decrement {
|
||||
left: 11px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-quantity-change-increment {
|
||||
right: 11px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: $checkout2500px) {
|
||||
@ -1053,6 +1190,14 @@
|
||||
width: 632px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-items .quantity-price {
|
||||
padding-left: 0;
|
||||
@media (min-width: $checkout2500px) {
|
||||
min-width: 149px;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-items .product-remove,
|
||||
.cart-items .product-price,
|
||||
.cart-items .shipping-date,
|
||||
@ -1060,16 +1205,87 @@
|
||||
.cart-items .quantity,
|
||||
.cart-items .monetary {
|
||||
text-align: left;
|
||||
@media (max-width: $checkout1024px) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
th.shipping-date {
|
||||
width: 147px;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
@media (min-width: $checkout2500px) {
|
||||
width: auto;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
display: none;
|
||||
}
|
||||
&::after {
|
||||
content: "Frete";
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@media (max-width: $checkout1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
th.product-price {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
@media (max-width: $checkout1024px) {
|
||||
display: none;
|
||||
}
|
||||
&::after {
|
||||
content: "Unidade";
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@media (max-width: $checkout1024px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onda-v1 .gray {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
color: #c4c4c4;
|
||||
@media (min-width: $checkout2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
th.quantity {
|
||||
@media (max-width: 2499px) {
|
||||
width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-item .product-price {
|
||||
@media (max-width: $checkout1024px) {
|
||||
right: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
@media (max-width: $checkout375px) {
|
||||
right: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.quantity {
|
||||
@media (max-width: $checkout1024px) {
|
||||
left: 90px;
|
||||
position: absolute;
|
||||
}
|
||||
@media (max-width: $checkout375px) {
|
||||
left: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,29 +10,64 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: $color-black2;
|
||||
}
|
||||
|
||||
&-links {
|
||||
.link-choose-products {
|
||||
background: $color-black;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 0;
|
||||
transition: ease-in 0.22s all;
|
||||
outline: none;
|
||||
font-family: $font-family;
|
||||
width: 327px;
|
||||
border: 1px solid $color-black2;
|
||||
font-family: "Tenor Sans";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-size: 0;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
text-transform: uppercase;
|
||||
color: $color-black2;
|
||||
cursor: pointer;
|
||||
&::before {
|
||||
content: "Continuar comprando";
|
||||
font-size: 14px;
|
||||
top: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width: $checkout2500px) {
|
||||
font-size: 0;
|
||||
width: 638.67px;
|
||||
height: 66px;
|
||||
&::before {
|
||||
content: "Continuar comprando";
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($color-black, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 11px 19px;
|
||||
}
|
||||
|
||||
.vtex-shipping-preview-0-x-pc .ship-country {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -62,6 +62,9 @@ body {
|
||||
@media (max-width: $checkout375px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
width: 96.375%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -94,6 +97,9 @@ body {
|
||||
font-size: 48px;
|
||||
line-height: 65px;
|
||||
}
|
||||
@media (max-width: $checkout1024px) {
|
||||
margin: 17px 16px 16px;
|
||||
}
|
||||
|
||||
@include mq(md, max) {
|
||||
margin-left: 30px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user