anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(Checkout): modificando estilo para as telas 1280px ,2500px, 1024px e 375px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-17 15:02:02 -03:00
parent 0dde80a886
commit dfa072e687
5 changed files with 330 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
checkout/src/arquivos/js/components/CheckoutUI.js
View File

@ -5,7 +5,7 @@ import waitForEl from "../helpers/waitForEl";
export default class CheckoutUI { export default class CheckoutUI {
constructor() { constructor() {
this.init(); this.init();
this.removeText();
if (isSmallerThen768) { if (isSmallerThen768) {
this.selectors(); this.selectors();
this.events(); this.events();
@ -66,4 +66,9 @@ export default class CheckoutUI {
); );
}); });
} }
removeText() {
let textHtml = document.querySelector(".empty-cart-message");
textHtml.remove();
}
} }

3
checkout/src/arquivos/js/components/Footer.js
View File

@ -13,6 +13,7 @@ export default class Footer {
await this.ListProducts(); await this.ListProducts();
} }
async selectors() { async selectors() {
//Para verificar se o carrinho está vazio e remover a prateleira de produtos: //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 // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement
@ -124,5 +125,7 @@ export default class Footer {
</li> </li>
`; `;
} }
} }

276
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -18,8 +18,10 @@
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
margin-bottom: 48px; margin-bottom: 48px;
height: 125px;
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
padding: 16px 31px; padding: 16px 31px;
height: auto;
} }
@include mq(md, max) { @include mq(md, max) {
@ -143,6 +145,10 @@
width: 146px; width: 146px;
height: auto; height: auto;
} }
@media (max-width: $checkout1024px) {
width: 60px;
height: auto;
}
@include mq(sm, max) { @include mq(sm, max) {
width: 72px; width: 72px;
@ -160,6 +166,11 @@
width: 146px; width: 146px;
height: auto; height: auto;
} }
@media (max-width: $checkout1024px) {
width: 60px;
height: 60px;
object-fit: cover;
}
} }
} }
@ -168,6 +179,11 @@
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
padding-left: 31px; padding-left: 31px;
} }
@media (max-width: $checkout1024px) {
left: 145px;
position: absolute;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 250px; width: 250px;
} }
@ -194,6 +210,17 @@
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 23px;
} }
@media (max-width: $checkout1024px) {
top: -11px;
position: relative;
left: -61px;
}
@media (max-width: $checkout375px) {
top: -30px;
position: relative;
left: -146px;
}
} }
.brand, .brand,
@ -209,6 +236,10 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-gray6; color: $color-gray6;
padding-left: 0;
@media (max-width: $checkout1024px) {
display: none;
}
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
@ -220,6 +251,15 @@
.product-price { .product-price {
min-width: 100px; min-width: 100px;
padding-left: 0;
width: 148px;
@media (min-width: $checkout2500px) {
width: auto;
}
@media (max-width: $checkout1024px) {
width: auto;
}
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -252,6 +292,14 @@
} }
} }
th.quantity,
th.quantity-price,
td.quantity-price {
@media (max-width: $checkout1024px) {
display: none;
}
}
td.quantity { td.quantity {
align-items: center; align-items: center;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
@ -259,7 +307,7 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 8px auto 0 0; margin: 14px auto 0 0;
height: 34px; height: 34px;
width: 99px; width: 99px;
padding: 0; padding: 0;
@ -268,10 +316,13 @@
margin-left: 84px !important; margin-left: 84px !important;
} }
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
width: 135px; min-width: 135px;
height: 50px; height: 50px;
margin: 65px auto 0 0; margin: 65px auto 0 0;
} }
@media (max-width: $checkout1024px) {
margin: 26px auto 0 0;
}
input { input {
background-color: $color-white; background-color: $color-white;
@ -400,14 +451,29 @@
display: none; display: none;
} }
} }
a#item-remove-2616 {
@media (max-width: $checkout1024px) {
top: -31px;
position: relative;
left: 12px;
}
}
.item-remove { .item-remove {
@media (max-width: 490px) { @media (max-width: 490px) {
top: 0; top: 0;
} }
.icon::before { .icon::before {
color: $color-gray4; color: $color-gray8;
font-size: 15px; width: 10px;
height: 10px;
font-size: 10px;
@media (min-width: $checkout2500px) {
width: 20px;
height: 20px;
font-size: 20px;
}
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
@ -521,19 +587,28 @@
} }
.srp-pickup-my-location__button { .srp-pickup-my-location__button {
background-color: $color-black;
border: none; border: none;
border-radius: 5px;
color: $color-white; color: $color-white;
outline: none; outline: none;
width: 100%; width: 100%;
height: 42px;
font-style: normal; font-style: normal;
font-weight: 500;
font-size: 14px; 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; 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 { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-black, 5);
} }
@ -545,8 +620,10 @@
} }
.srp-toggle { .srp-toggle {
margin: 0 0 34px; margin: 0 0 20px;
@media (min-width: $checkout2500px) {
margin: 0 0 21.33px;
}
&__wrapper { &__wrapper {
background-color: $color-white; background-color: $color-white;
border-radius: 100px; border-radius: 100px;
@ -557,6 +634,10 @@
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@media (min-width: $checkout2500px) {
width: 543.67px;
height: 57px;
}
} }
&__current { &__current {
@ -567,6 +648,16 @@
.blue { .blue {
color: $color-black2; 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 { label {
@ -583,15 +674,20 @@
label { label {
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 16px;
color: $color-black; color: $color-black2;
margin-bottom: 12px; margin-bottom: 12px;
font-family: "Open Sans";
@media (min-width: $checkout2500px) {
font-size: 24px;
line-height: 33px;
}
} }
input { input {
border: 1px solid $color-gray3; border: 1px solid color-gray8;
border-radius: 5px; border-radius: 5px;
box-shadow: none; box-shadow: none;
color: $color-gray3; color: $color-gray3;
@ -599,24 +695,39 @@
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@media (min-width: $checkout2500px) {
width: 333.96px;
height: 55px;
}
} }
& ~ button { & ~ button {
background-color: $color-black; background: $color-blue2;
border-radius: 8px;
border: none; border: none;
border-radius: 5px;
color: $color-white; color: $color-white;
font-size: 12px;
height: 36px; height: 36px;
letter-spacing: 1px;
outline: none; outline: none;
position: absolute; position: absolute;
right: -150px; right: -150px;
top: 36px; top: 39px;
transition: all 0.2s linear; transition: all 0.2s linear;
width: 96px; width: 100px;
text-transform: uppercase; 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 { &:hover {
background-color: lighten($color-black, 5); background-color: lighten($color-black, 5);
} }
@ -627,13 +738,25 @@
} }
small a { 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-style: normal;
font-weight: normal; font-style: normal;
font-size: 10px; font-weight: 400;
line-height: 12px; line-height: 12px;
color: $color-blue; text-decoration-line: underline;
margin-top: 7px; font-size: 10px;
@media (min-width: $checkout2500px) {
font-size: 20px;
line-height: 23px;
white-space: nowrap;
}
}
} }
span.help.error { span.help.error {
@ -643,6 +766,9 @@
left: 0; left: 0;
width: 100%; width: 100%;
top: 17px; top: 17px;
@media (min-width: $checkout2500px) {
top: 31px;
}
} }
} }
} }
@ -713,6 +839,14 @@
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
width: 688.35px; 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 { .coupon-data {
margin-top: 1px; margin-top: 1px;
#cart-link-coupon-add { #cart-link-coupon-add {
@ -918,10 +1052,11 @@
} }
} }
.cart-links-bottom { .cart-links-bottom {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 362px; width: 354px;
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
width: 688.35px; width: 688.35px;
@ -976,7 +1111,7 @@
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
padding-top: 0px; padding-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
height: 42px; height: 41.67px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -1023,10 +1158,12 @@
.item-quantity-change-decrement { .item-quantity-change-decrement {
left: 11px; left: 11px;
position: relative; position: relative;
cursor: pointer;
} }
.item-quantity-change-increment { .item-quantity-change-increment {
right: 11px; right: 11px;
position: relative; position: relative;
cursor: pointer;
} }
@media (min-width: $checkout2500px) { @media (min-width: $checkout2500px) {
@ -1053,6 +1190,14 @@
width: 632px; width: 632px;
} }
} }
.cart-items .quantity-price {
padding-left: 0;
@media (min-width: $checkout2500px) {
min-width: 149px;
}
}
.cart-items .product-remove, .cart-items .product-remove,
.cart-items .product-price, .cart-items .product-price,
.cart-items .shipping-date, .cart-items .shipping-date,
@ -1060,16 +1205,87 @@
.cart-items .quantity, .cart-items .quantity,
.cart-items .monetary { .cart-items .monetary {
text-align: left; text-align: left;
@media (max-width: $checkout1024px) {
text-align: right;
}
} }
th.shipping-date { th.shipping-date {
width: 147px;
visibility: hidden; visibility: hidden;
position: relative; position: relative;
@media (min-width: $checkout2500px) {
width: auto;
}
@media (max-width: $checkout1024px) {
display: none;
}
&::after { &::after {
content: "Frete"; content: "Frete";
visibility: visible; visibility: visible;
position: absolute; position: absolute;
top: 0; top: 0;
left: 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;
} }
} }

51
checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
View File

@ -10,29 +10,64 @@
} }
&-title { &-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 { &-links {
.link-choose-products { .link-choose-products {
background: $color-black; background: transparent;
border: none; border: none;
border-radius: 5px; border-radius: 0;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
outline: none; outline: none;
font-family: $font-family; width: 327px;
border: 1px solid $color-black2;
font-family: "Tenor Sans";
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 400;
font-size: 14px; font-size: 0;
line-height: 16px; line-height: 16px;
text-align: center; text-align: center;
letter-spacing: 0.05em;
color: $color-white;
text-transform: uppercase; 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 { &:hover {
background: lighten($color-black, 5); background: lighten($color-black, 5);
} }
} }
} }
} }
.btn-large {
padding: 11px 19px;
}
.vtex-shipping-preview-0-x-pc .ship-country {
display: none;
}

6
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -62,6 +62,9 @@ body {
@media (max-width: $checkout375px) { @media (max-width: $checkout375px) {
width: 100%; width: 100%;
} }
@media (max-width: $checkout1024px) {
width: 96.375%;
}
} }
} }
@ -94,6 +97,9 @@ body {
font-size: 48px; font-size: 48px;
line-height: 65px; line-height: 65px;
} }
@media (max-width: $checkout1024px) {
margin: 17px 16px 16px;
}
@include mq(md, max) { @include mq(md, max) {
margin-left: 30px; margin-left: 30px;