cainamilech/m3-academy-template-checkout-caina-milech
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/footer #3

Merged
cainamilech merged 6 commits from feature/footer into develop 2022-12-19 02:35:55 +00:00
Conversation 0 Commits 6 Files Changed 10 +945 -88
10 changed files with 945 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bash.exe.stackdump
View File

@ -2,7 +2,7 @@ Stack trace:
Frame Function Args Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710) 000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001) 000FFFFCD30 0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
000FFFFCD30 002100484A2 (000006E0000, 000006FF401, 00000000001, 87FE80A61CA3) 000FFFFCD30 002100484A2 (000007D0000, 000007D0101, 00000000001, 5C74DE1CAC3C)
000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D) 000FFFFCD30 0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910) 000FFFFCD30 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640) 000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)

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

@ -8,13 +8,14 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
await this.carrinho(); await this.carrinho();
this.prateleira(); this.renderPrateleira();
this.onUpdate(); this.onUpdate();
} }
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
this.title = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content"); this.checkoutVazio = await waitElement(".empty-cart-content");
//CARRINHO VAZIO //CARRINHO VAZIO
this.fraseCarrinhoVazio = await waitElement(".empty-cart-title"); this.fraseCarrinhoVazio = await waitElement(".empty-cart-title");
@ -25,12 +26,18 @@ export default class Footer {
this.footerPrateleira = await waitElement(".footerCheckout__prateleira"); this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
//pagamento //pagamento
this.notification = await waitElement(".notification"); this.notification = await waitElement(".notification");
//footer
this.creditcards = await waitElement(".footerCheckout__payments");
this.vtex = await waitElement(".footerCheckout__vtexpci");
this.developed = await waitElement(".footerCheckout__developedBy");
} }
async prateleira() { async prateleira() {
if (this.checkoutVazio.style.display == "none") { if (this.checkoutVazio.style.display == "none") {
this.title.innerHTML = `MEU CARRINHO`;
this.requestApi(); this.requestApi();
this.addCarrossel(); this.addCarrossel();
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
if (window.location.hash !== "#/cart") { if (window.location.hash !== "#/cart") {
this.removePrateleira(); this.removePrateleira();
@ -79,7 +86,7 @@ export default class Footer {
} }
async addCarrossel() { async addCarrossel() {
const prateleira = await waitElement(".carrosel-items", { timeout: 4000, interval: 500 }); const prateleira = await waitElement(".carrosel-items", { timeout: 5000, interval: 500 });
if (window.screen.width > 1024) { if (window.screen.width > 1024) {
$(prateleira).slick({ $(prateleira).slick({
@ -88,6 +95,20 @@ export default class Footer {
infinite: true, infinite: true,
arrows: true, arrows: true,
}); });
} else if (window.screen.width < 600) {
$(prateleira).slick({
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} else if (window.screen.width <= 1024) {
$(prateleira).slick({
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
arrows: true,
});
} }
} }
@ -105,6 +126,7 @@ export default class Footer {
if (display == "display: none;") { if (display == "display: none;") {
this.prateleira(); this.prateleira();
} else if (display == "display: block;") { } else if (display == "display: block;") {
this.title.innerHTML = ``;
this.removePrateleira(); this.removePrateleira();
} }
}); });
@ -113,10 +135,54 @@ export default class Footer {
observer.observe(target, config); observer.observe(target, config);
} }
async renderPrateleira() {
if (window.location.hash == "#/cart") {
this.onUpdate();
this.prateleira();
}
}
carrinho() { carrinho() {
this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`; this.title.innerHTML = ``;
this.continuarCompra.innerHTML = `continuar comprando`; this.continuarCompra.innerHTML = `continuar comprando`;
this.frete.innerHTML = `Frete`; this.frete.innerHTML = `Frete`;
this.unidade.innerHTML = `Unidade`; this.unidade.innerHTML = `Unidade`;
//footer
this.creditcards.innerHTML = `<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/masterCardM3Academy.png" alt="MasterCard" />
</figure>
<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/visaM3Academy.png" alt="VisaCard" />
</figure>
<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/amexM3Academy.png" alt="America Express" />
</figure>
<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/eloM3Academy.png" alt="Elo" />
</figure>
<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/hiperCardM3Academy.png" alt="HiperCard" />
</figure>
<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/payPalM3Academy.png" alt="Paypal" />
</figure>
<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/boletoM3Academy.png" alt="Boleto" />
</figure>`;
this.vtex.innerHTML = `<figure>
<img src="https://agenciamagma.vteximg.com.br/arquivos/vtexPCIM3Academy.png" alt="VTEX" />
</figure>`;
this.developed.innerHTML = `<li>
<a href="https://vtex.com/br-pt/">
<span>Powered By</span>
<figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoVTEXM3Academy.png" alt="VTEX" /></figure>
</a>
</li>
<li>
<a href="https://agenciam3.com/">
<span>Developed By</span>
<figure><img src="https://agenciamagma.vteximg.com.br/arquivos/logoM3M3Academy.png" alt="M3" /></figure>
</a>
</li>`;
} }
} }

291
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -5,14 +5,29 @@ h1#orderform-title {
line-height: 33px; line-height: 33px;
color: $color-black-500; color: $color-black-500;
margin: 17px 0; margin: 17px 0;
@include mq(tablet, max) {
margin: 17px 16px;
}
} }
.checkout-container { .checkout-container {
.link.link-cart.pull-right {
@include mq(tablet, max) {
margin-right: 16px;
}
}
.client-pre-email { .client-pre-email {
border-color: $color-black-500; border-color: $color-black-500;
font-family: $font-family; font-family: $font-family;
padding-top: 8px; padding-top: 8px;
@include mq(tablet, max) {
padding-top: 0;
left: 0;
}
.link-cart { .link-cart {
a { a {
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -28,10 +43,19 @@ h1#orderform-title {
&:hover { &:hover {
color: lighen($color-black-500, 10); color: lighen($color-black-500, 10);
} }
@include mq(tablet, max) {
font-size: 10px;
line-height: 12px;
}
} }
} }
.pre-email { .pre-email {
@include mq(md, max) {
margin-top: 100px;
}
flex-direction: column; flex-direction: column;
display: flex; display: flex;
align-items: center; align-items: center;
@ -48,6 +72,16 @@ h1#orderform-title {
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(tablet, max) {
font-size: 14px;
line-height: 16px;
}
@include mq(md, max) {
font-size: 12px;
line-height: 14px;
}
} }
small { small {
@ -58,16 +92,25 @@ h1#orderform-title {
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@include mq(tablet, max) {
font-size: 12px;
line-height: 14px;
}
} }
} }
} }
.client-email { .client-email {
/*left: -61px;*/
margin: 0 0 24.56px; margin: 0 0 24.56px;
@include mq(tablet, max) {
width: 100%;
text-align: initial;
padding: 0 16px;
}
input { input {
/*width: 65.8%;*/
width: 82%; width: 82%;
height: 50px; height: 50px;
box-shadow: none; box-shadow: none;
@ -82,12 +125,12 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
&::placeholder { @include mq(tablet, max) {
color: $color-black-500; width: 90% !important;
} }
@media (max-width: 490px) { &::placeholder {
width: auto; color: $color-black-500;
} }
} }
@ -108,6 +151,14 @@ h1#orderform-title {
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) {
right: 1.7%;
}
@include mq(md, max) {
right: 3.3%;
}
&:hover { &:hover {
background: lighten($color-blue2, 5); background: lighten($color-blue2, 5);
} }
@ -117,7 +168,6 @@ h1#orderform-title {
} }
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px;
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
@ -130,6 +180,10 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
text-transform: capitalize; text-transform: capitalize;
@include mq(tablet, max) {
text-align: center;
}
} }
} }
@ -141,6 +195,19 @@ h1#orderform-title {
border: 1px solid $color-black-500; border: 1px solid $color-black-500;
border-radius: 5px; border-radius: 5px;
@include mq(tablet, max) {
width: 309px;
i.icon-lock {
display: none;
}
}
@include mq(fold, max) {
width: 220px;
height: auto;
}
h3 { h3 {
color: $color-black-500; color: $color-black-500;
font-style: normal; font-style: normal;
@ -184,6 +251,154 @@ h1#orderform-title {
} }
} }
//DIV PAI DEIXAR TUDO FLEX COLLUM MOBILE
.row-fluid.orderform-template {
@include mq(tablet, max) {
padding: 0 16px;
display: flex;
flex-direction: column;
}
.input-xlarge {
max-width: unset;
}
.orderform-template-holder.span8 {
@include mq(tablet, max) {
width: 100% !important;
}
.row-fluid {
@include mq(tablet, max) {
width: 100%;
display: flex;
flex-direction: column;
}
//IDENTIFICAÇÃO
.span6.client-profile-data {
box-sizing: border-box;
@include mq(tablet, max) {
width: 100%;
}
.client-first-name,
.client-last-name,
.client-document,
.client-phone {
float: left !important;
width: 47.4%;
@include mq(tablet, max) {
width: 49.4%;
}
@include mq(md, max) {
width: 47.5%;
}
input {
width: 100% !important;
}
}
.client-first-name,
.client-document {
margin-right: 5.14%;
@include mq(tablet, max) {
margin-right: 1.2%;
}
@include mq(md, max) {
margin-right: 5%;
}
}
}
//ENTREGA
#shipping-data {
@include mq(tablet, max) {
width: 100%;
margin: 0;
}
.accordion-inner {
#postalCode-finished-loading {
@include mq(tablet, max) {
width: 309px;
height: 36px;
}
}
.ship-postalCode {
@include mq(tablet, max) {
margin-top: 25px;
}
}
.vtex-omnishipping-1-x-summaryPackage {
@include mq(tablet, max) {
justify-content: start;
}
}
.vtex-omnishipping-1-x-SummaryItemContent {
@include mq(tablet, max) {
position: relative;
}
.vtex-omnishipping-1-x-SummaryItemPrice {
@include mq(tablet, max) {
position: absolute;
bottom: 1%;
left: 140px;
}
}
}
}
}
//PAGAMENTO
#payment-data {
@include mq(tablet, max) {
width: 100%;
margin: 0;
}
.payment-group {
@include mq(tablet, max) {
width: 100%;
}
}
.steps-view {
@include mq(tablet, max) {
width: 100%;
box-sizing: border-box;
}
}
}
}
}
//MINICART
.cart-template.mini-cart.span4 {
@include mq(tablet, max) {
width: 100%;
}
.totalizers {
@include mq(tablet, max) {
margin-top: 0;
}
}
.cart-fixed.cart-fixed-transition.affix {
@include mq(tablet, max) {
padding-bottom: 4px;
left: -0.5px;
}
#payment-data-submit {
@include mq(tablet, max) {
position: inherit;
}
}
}
}
}
.shipping-data, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@ -316,14 +531,13 @@ h1#orderform-title {
button.submit { button.submit {
margin-top: 0; margin-top: 0;
margin-bottom: 22px; /*tem 15de pad e 7 de p*/ margin-bottom: 22px;
width: 100%; width: 100%;
height: 42px; height: 42px;
text-transform: uppercase; text-transform: uppercase;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background: $color-blue2; background: $color-blue2;
outline: none; outline: none;
transition: all 0.2s linear; transition: all 0.2s linear;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@ -333,6 +547,10 @@ h1#orderform-title {
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(tablet, max) {
margin-bottom: 13px;
}
&:hover { &:hover {
background: lighten($color-blue2, 5); background: lighten($color-blue2, 5);
} }
@ -385,6 +603,7 @@ h1#orderform-title {
} }
.address-summary { .address-summary {
position: relative;
background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png") background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png")
no-repeat; no-repeat;
background-size: 21.25px 20.07px; background-size: 21.25px 20.07px;
@ -393,13 +612,16 @@ h1#orderform-title {
border-color: $color-gray4; border-color: $color-gray4;
border-radius: 0; border-radius: 0;
color: #303030; color: #303030;
padding: 12px 12px 12px 43px; padding: 12px 55px 12px 43px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
} }
a { a {
position: absolute;
right: 13px;
bottom: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
@ -435,11 +657,18 @@ h1#orderform-title {
.vtex-omnishipping-1-x-deliveryOptionActive { .vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50); text-shadow: 1.3px 1px lighten($color-black, 50);
} }
.vtex-omnishipping-1-x-addressSummaryActive {
:nth-child(6) {
display: none;
}
}
} }
} }
} }
/*IDENTIFICAÇÃO*/ /*IDENTIFICAÇÃO*/
.client-profile-data { .client-profile-data {
.accordion-group { .accordion-group {
padding: 24px 17px; padding: 24px 17px;
@ -733,6 +962,8 @@ h1#orderform-title {
.input.ship-postalCode { .input.ship-postalCode {
label { label {
font-size: 0; font-size: 0;
display: flex;
align-items: center;
&::before { &::before {
content: "CEP:"; content: "CEP:";
@ -952,9 +1183,9 @@ h1#orderform-title {
} }
//RESUMO DO PEDIDO (MINI CART CARRINHO) //RESUMO DO PEDIDO (MINI CART CARRINHO)
.cart-fixed.cart-fixed-transition {
height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO
.cart-fixed.cart-fixed-transition {
height: auto !important;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $color-gray5; border: 1px solid $color-gray5;
margin-top: 10px; margin-top: 10px;
@ -1017,6 +1248,10 @@ h1#orderform-title {
.price { .price {
margin-right: 0; margin-right: 0;
} }
@include mq(fold, max) {
margin-top: 28px;
}
} }
span.fn.product-name { span.fn.product-name {
@ -1030,6 +1265,16 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black; color: $color-black;
@include mq(md, max) {
top: 25%;
margin-left: 70px;
}
@include mq(fold, max) {
top: 0;
margin-left: 70px;
}
} }
strong { strong {
@ -1055,6 +1300,10 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
margin-right: 17px; margin-right: 17px;
@include mq(tablet, max) {
margin-right: 0;
}
} }
} }
@ -1068,9 +1317,6 @@ h1#orderform-title {
display: flex; display: flex;
td { td {
/*&.empty {
}*/
&.info, &.info,
&.monetary { &.monetary {
font-family: $font-family; font-family: $font-family;
@ -1084,10 +1330,17 @@ h1#orderform-title {
&.info { &.info {
margin-left: 17px; margin-left: 17px;
@include mq(tablet, max) {
margin-left: 0;
}
} }
&.monetary { &.monetary {
margin-right: 17px; margin-right: 17px;
@include mq(tablet, max) {
margin-right: 0;
}
} }
} }
} }
@ -1130,6 +1383,14 @@ h1#orderform-title {
height: 42px; height: 42px;
margin: 0; margin: 0;
&:hover {
background: lighten($color-green2, 5);
}
&:active {
background: darken($color-green2, 5);
}
i { i {
display: none; display: none;
} }

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

@ -10,17 +10,74 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-black; color: $color-black;
margin: 17px 0 16px; margin: 17px 0 16px;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
} }
.cart-template .cart-items th { @include mq(tablet, max) {
font-family: $font-family-secundary; margin-left: 16px;
font-weight: 400; }
padding: 0 0 17px;
text-align: start;
} }
} }
.cart-template { .cart-template {
//CARRINHO VAZIO
.empty-cart-content {
margin-top: 100px;
@include mq(md, max) {
margin-top: 150px;
}
.empty-cart-title {
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
text-transform: uppercase;
margin: 0 0 32px;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(tablet, max) {
margin-bottom: 22px;
font-size: 18px;
line-height: 25px;
}
}
.empty-cart-message {
display: none;
}
#cart-choose-products {
color: $color-black-500;
border: 1px solid $color-black-500;
background: $color-white;
font-family: $font-family-secundary;
font-weight: 400;
letter-spacing: normal;
border-radius: 0%;
padding: 15px 64px 17px 65px;
margin: 0;
font-size: 14px;
line-height: 16px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(tablet, max) {
padding: 16px 26px;
}
}
}
.empty-cart-title { .empty-cart-title {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
@ -60,6 +117,11 @@
border-radius: 5px; border-radius: 5px;
padding: 16px; padding: 16px;
@include mq(tablet, max) {
padding: 0;
border: none;
}
@include mq(md, max) { @include mq(md, max) {
margin: 0px 0 25px 0; margin: 0px 0 25px 0;
border-left: none; border-left: none;
@ -143,6 +205,36 @@
} }
} }
//CART TABLET MOBILE
.cart-template-holder {
@include mq(tablet, max) {
}
.cart {
@include mq(tablet, max) {
padding: 16px;
margin: 16px 0;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
}
}
}
.summary-template-holder {
@include mq(tablet, max) {
margin: 0 16px;
width: auto;
}
}
.cart-links-bottom {
span {
@include mq(tablet, max) {
margin: 0 16px;
}
}
}
.lookatme { .lookatme {
background-color: $color-white; background-color: $color-white;
} }
@ -150,14 +242,24 @@
.cart-items { .cart-items {
tr.product-item { tr.product-item {
position: relative; position: relative;
@include mq(md, max) {
padding: 0;
margin: 0;
}
} }
td { td {
text-align: start; text-align: start;
padding: 0; padding: 0;
@include mq(tablet, max) {
vertical-align: top;
}
} }
th { th {
text-align: start;
color: $color-black; color: $color-black;
padding: 0 0 16px; padding: 0 0 16px;
font-style: normal; font-style: normal;
@ -165,6 +267,15 @@
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(tablet, max) {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
&.quantity-price, &.quantity-price,
&.shipping-date { &.shipping-date {
@ -178,8 +289,15 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(sm, max) { @include mq(xxl, min) {
width: 72px; height: 146px;
width: 146px;
}
@include mq(md, max) {
/*width: 72px;*/
position: inherit !important;
width: 60px;
} }
img { img {
@ -188,9 +306,15 @@
width: 60px; width: 60px;
object-fit: cover; object-fit: cover;
@include mq(xxl, min) {
height: 146px;
width: 146px;
max-width: 146px;
}
@include mq(sm, max) { @include mq(sm, max) {
height: 72px; /*height: 72px;
width: auto; width: auto;*/
} }
} }
} }
@ -198,8 +322,10 @@
.product-name { .product-name {
padding: 0 0 0 16px; padding: 0 0 0 16px;
@include mq(lg, max) { @include mq(md, max) {
width: 250px; /*width: 250px;*/
position: absolute;
top: 0;
} }
a { a {
@ -210,8 +336,13 @@
line-height: 14px; line-height: 14px;
transition: ease-in 0.22s all; transition: ease-in 0.22s all;
@media (max-width: 490px) { @include mq(xxl, min) {
margin-left: 23px; font-size: 24px;
line-height: 28px;
}
@include mq(md, max) {
margin-left: 15px;
} }
} }
@ -226,6 +357,19 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(tablet, min) {
min-width: 100px;
}
@include mq(tablet, max) {
display: none;
}
@include mq(md, max) { @include mq(md, max) {
display: none; display: none;
} }
@ -235,6 +379,13 @@
min-width: 100px; min-width: 100px;
top: 13px; top: 13px;
@include mq(tablet, max) {
position: absolute;
right: 0;
top: 40%;
text-align: end;
}
@include mq(md, max) { @include mq(md, max) {
min-width: 78px; min-width: 78px;
} }
@ -248,6 +399,12 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
text-decoration-line: line-through; text-decoration-line: line-through;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
@include mq(sm, max) { @include mq(sm, max) {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
@ -263,8 +420,20 @@
} }
} }
.new-product-price {
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
}
.new-product-price-label { .new-product-price-label {
text-transform: lowercase; text-transform: lowercase;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
} }
} }
@ -282,8 +451,27 @@
padding: 9px 0; padding: 9px 0;
width: max-content !important; width: max-content !important;
@include mq(xxl, min) {
height: 50px !important;
width: 135px !important;
max-height: 50px;
max-width: 135px;
margin-top: 40px;
}
@include mq(tablet, max) {
position: absolute;
left: 75px;
margin-left: 0 !important;
top: 25%;
}
@include mq(md, max) {
left: 75px;
}
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 84px !important; /*margin-left: 84px !important;*/
} }
input { input {
@ -297,6 +485,12 @@
color: $color-black-500; color: $color-black-500;
box-shadow: none; box-shadow: none;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
padding: 0px 10px;
}
@include mq(lg, max) { @include mq(lg, max) {
width: 24px !important; width: 24px !important;
} }
@ -316,6 +510,10 @@
&:before { &:before {
font-size: 16px; font-size: 16px;
padding-right: 0; padding-right: 0;
@include mq(xxl, min) {
font-size: 30px;
}
} }
} }
@ -323,17 +521,24 @@
&:before { &:before {
font-size: 14px; font-size: 14px;
padding-left: 0; padding-left: 0;
@include mq(xxl, min) {
font-size: 30px;
}
} }
} }
.item-quantity-change { .item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) { @media (max-width: 979px) and (min-width: 768px) {
position: inherit; height: unset;
width: unset;
position: unset;
/*position: inherit;
bottom: inherit; bottom: inherit;
left: inherit; left: inherit;
height: inherit; height: inherit;
width: inherit; width: inherit;
top: inherit; top: inherit;*/
} }
@media (max-width: 490px) { @media (max-width: 490px) {
@ -342,6 +547,16 @@
} }
} }
td.quantity-price {
@include mq(tablet, max) {
display: none;
}
@include mq(xxl, min) {
width: 150px;
}
}
.quantity-price, .quantity-price,
.best-price { .best-price {
.icon-question-sign { .icon-question-sign {
@ -366,12 +581,28 @@
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
} }
} }
.item-remove { .item-remove {
@media (max-width: 490px) { text-align: end;
@include mq(xxl, min) {
text-align: left;
}
@include mq(md, max) {
top: 0; top: 0;
padding: 0;
}
a {
@include mq(md, max) {
padding-top: 0;
}
} }
.icon::before { .icon::before {
color: $color-gray7; color: $color-gray7;
@ -379,6 +610,10 @@
width: 10px; width: 10px;
height: 10px; height: 10px;
@include mq(xxl, min) {
font-size: 32px;
}
@include mq(md, max) { @include mq(md, max) {
font-size: 18px; font-size: 18px;
} }
@ -401,6 +636,14 @@
.summary { .summary {
margin-top: 48px; margin-top: 48px;
@include mq(md, max) {
margin-top: 0;
}
@include mq(tablet, max) {
display: flex;
flex-direction: column;
}
.cart-more-options { .cart-more-options {
padding: 0; padding: 0;
@ -409,7 +652,7 @@
.srp-container { .srp-container {
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; max-width: 276px;
} }
.srp-main-title { .srp-main-title {
@ -420,6 +663,11 @@
line-height: 33px; line-height: 33px;
color: $color-black-500; color: $color-black-500;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(md, max) { @include mq(md, max) {
margin-top: 0; margin-top: 0;
} }
@ -433,6 +681,13 @@
margin: 0 0 10.65px; margin: 0 0 10.65px;
width: 276px; width: 276px;
max-width: 276px; max-width: 276px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 36px;
width: 552px;
max-width: 552px;
}
} }
button.shp-open-options { button.shp-open-options {
@ -452,6 +707,12 @@
mix-blend-mode: normal; mix-blend-mode: normal;
margin-top: 0; margin-top: 0;
@include mq(xxl, min) {
font-size: 28px;
width: 230px;
height: 44px;
}
&:hover { &:hover {
background-color: lighten($color-gray4, 5); background-color: lighten($color-gray4, 5);
} }
@ -465,6 +726,10 @@
.srp-data { .srp-data {
width: 280px; width: 280px;
@include mq(tablet, max) {
width: 343px;
}
@include mq(cstm, max) { @include mq(cstm, max) {
width: calc(100vw - 32px); width: calc(100vw - 32px);
} }
@ -557,6 +822,10 @@
height: 36px; height: 36px;
padding: 12px 8px; padding: 12px 8px;
width: 172px; width: 172px;
@include mq(tablet, max) {
width: 215px;
}
} }
& ~ button { & ~ button {
@ -586,6 +855,11 @@
&:active { &:active {
background-color: darken($color-blue2, 5); background-color: darken($color-blue2, 5);
} }
@include mq(tablet, max) {
width: 120px;
right: -213px;
}
} }
small a { small a {
@ -683,6 +957,11 @@
width: 354px; width: 354px;
margin-bottom: 5px; margin-bottom: 5px;
@include mq(tablet, max) {
margin: 48px 0 0 0;
width: 100%;
}
.coupon-data { .coupon-data {
margin-bottom: 8px; margin-bottom: 8px;
@ -701,11 +980,16 @@
line-height: 14px; line-height: 14px;
color: $color-black-500; color: $color-black-500;
text-decoration: none; text-decoration: none;
@include mq(xxl, max) {
font-size: 24px;
line-height: 28px;
}
} }
} }
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0;
width: 100%; width: 100%;
} }
@ -714,6 +998,10 @@
margin: 0; margin: 0;
width: 362px; width: 362px;
@include mq(tablet, max) {
width: 100%;
}
div { div {
text-align: start; text-align: start;
} }
@ -734,6 +1022,11 @@
line-height: 14px; line-height: 14px;
color: $color-gray2; color: $color-gray2;
cursor: none; cursor: none;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
} }
.coupon-fields { .coupon-fields {
@ -764,6 +1057,12 @@
max-width: 204.32px; max-width: 204.32px;
padding: 0 12px; padding: 0 12px;
@include mq(tablet, max) {
width: 86.2%;
box-sizing: border-box;
max-width: none;
}
&::placeholder { &::placeholder {
color: $color-gray7; color: $color-gray7;
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -796,6 +1095,14 @@
width: 133px; width: 133px;
text-transform: uppercase; text-transform: uppercase;
@include mq(tablet, max) {
width: 13.4%;
}
@include mq(tablet, max) {
margin-left: 0;
}
@include mq(md, max) { @include mq(md, max) {
width: 138px; width: 138px;
} }
@ -820,6 +1127,10 @@
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
color: $color-black-500; color: $color-black-500;
@include mq(tablet, max) {
font-size: 0;
}
} }
} }
} }
@ -876,11 +1187,16 @@
flex-direction: column; flex-direction: column;
width: 352px; width: 352px;
@include mq(tablet, max) {
width: 100%;
padding-bottom: 0 !important;
}
@include mq(md, max) { @include mq(md, max) {
padding: 0 16px; padding: 0 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
float: none; float: none;
margin-bottom: 50px; /*margin-bottom: 50px;*/
} }
@include mq(md, min) { @include mq(md, min) {
@ -907,6 +1223,10 @@
} }
} }
.link-choose-more-products {
margin: 0;
}
.btn-place-order-wrapper { .btn-place-order-wrapper {
a { a {
background: $color-blue2; background: $color-blue2;

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

@ -1,5 +1,6 @@
.empty-cart { .empty-cart {
font-family: $font-family; font-family: $font-family;
&-content { &-content {
color: $color-black; color: $color-black;
text-align: center; text-align: center;

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

@ -18,10 +18,6 @@ header {
width: 79.53125%; width: 79.53125%;
margin: 0 auto 56px auto; margin: 0 auto 56px auto;
} }
@include mq(tablet, max) {
margin: 0 16px;
}
} }
body { body {
@ -55,7 +51,13 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
box-sizing: border-box;
width: 80%; width: 80%;
@include mq(tablet, max) {
width: 100%;
padding: 0;
}
} }
} }

58
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -1,5 +1,9 @@
.footerCheckout { .footerCheckout {
&__prateleira { &__prateleira {
@include mq(tablet, max) {
padding: 0 16px;
margin-bottom: 54px;
}
h2 { h2 {
font-family: $font-family-secundary; font-family: $font-family-secundary;
font-style: normal; font-style: normal;
@ -9,6 +13,11 @@
text-align: center; text-align: center;
color: $color-black-500; color: $color-black-500;
margin-bottom: 20px; margin-bottom: 20px;
@include mq(xxl, min) {
font-size: 48px;
line-height: 76px;
}
} }
} }
} }
@ -92,6 +101,7 @@
text-align: center; text-align: center;
img { img {
width: 100%;
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -102,15 +112,31 @@
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: $color-black-500; color: $color-black-500;
@include mq(xxl, min) {
font-size: 26px;
line-height: 35px;
}
@media (min-width: 1025px) and (max-width: 1110px) {
height: 36px;
}
} }
.product-variation { .product-variation {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: center; justify-content: center;
margin-bottom: 20px; align-items: center;
margin-bottom: 15px;
@include mq(xl, max) {
height: 66px;
}
&__variation { &__variation {
margin: 0 2.5px; height: fit-content;
margin: 0 2.5px 5px;
background: $color-blue2; background: $color-blue2;
border-radius: 8px; border-radius: 8px;
padding: 5px; padding: 5px;
@ -124,6 +150,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: $color-white; color: $color-white;
@include mq(xxl, min) {
font-size: 26px;
line-height: 35px;
}
} }
} }
@ -143,6 +174,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: $color-white; color: $color-white;
@include mq(xxl, min) {
font-size: 26px;
line-height: 35px;
}
} }
} }
@ -178,18 +214,36 @@
border: none; border: none;
z-index: 4; z-index: 4;
top: 45%; top: 45%;
@include mq(xxl, min) {
width: 26px;
height: 58px;
top: 50%;
}
@include mq(md, max) {
top: 50%;
}
} }
.slick-prev { .slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center; no-repeat center center;
background-size: contain; background-size: contain;
left: 10px; left: 10px;
@include mq(md, max) {
left: 0px;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg") background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center; no-repeat center center;
background-size: contain; background-size: contain;
right: 10px; right: 10px;
@include mq(md, max) {
right: 0;
}
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;

155
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -2,25 +2,61 @@
.footerCheckout { .footerCheckout {
border-top: none; border-top: none;
color: $color-gray2; color: $color-gray2;
display: contents; /*testar*/
&__wrapper { &__wrapper {
border-top: 1px solid $color-black-500;
width: 100% !important;
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 0;
.container {
/*width: 91.40625%;*/
width: 100%;
margin: 16px 32px;
display: flex;
align-items: center;
justify-content: space-between;
@include mq(tablet, max) {
align-items: flex-start;
flex-direction: column;
padding: 16px 8px;
margin: 0;
}
@include mq(md, max) {
margin: 16px 0;
}
}
} }
&__address { &__address {
color: $color-gray2; margin-right: auto;
font-family: $font-family; font-family: $font-family;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 12px; line-height: 14px;
color: $color-black;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; max-width: 40%;
@include mq(xxl, min) {
font-size: 20px;
line-height: 27px;
}
@include mq(tablet, max) {
margin-bottom: 16px;
margin-left: 8px;
order: 1;
}
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; margin-bottom: 16px;
max-width: 100%; max-width: 100%;
} }
} }
@ -30,29 +66,102 @@
display: flex; display: flex;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
margin: 0;
@include mq(tablet, max) {
margin-bottom: 16px;
}
li {
display: flex;
.footerCheckout__payments {
display: flex;
column-gap: 13px;
@include mq(md, max) { @include mq(md, max) {
align-self: center; column-gap: 4px;
}
figure {
margin: 0;
width: 35px;
height: 20px;
@include mq(xxl, min) {
width: 69px;
height: 39px;
}
img {
width: 100%;
vertical-align: unset;
}
}
}
.footerCheckout__vtexpci {
display: flex;
figure {
margin: 0;
width: 53px;
height: 33px;
@include mq(xxl, min) {
width: 103px;
height: 64px;
}
img {
width: 100%;
vertical-align: unset;
}
}
}
}
@include mq(md, max) {
align-self: flex-start;
margin-bottom: 12px; margin-bottom: 12px;
} }
&__divider { &__divider {
background-color: $color-gray4; background-color: $color-gray7;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 8px; margin: 0 10px 0 13px;
width: 1px; width: 1px;
@include mq(xxl, min) {
height: 43px;
}
} }
} }
&__developedBy { &__developedBy {
margin: 0 0 0 auto;
align-items: center; align-items: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0;
@include mq(tablet, max) {
margin: 0 0 0 8px;
order: 2;
}
li:last-child { li:last-child {
margin-left: 16px; margin-left: 10.73px;
figure {
width: 28.66px;
height: 15.65px;
@include mq(xxl, min) {
width: 55px;
height: 30px;
}
}
} }
a { a {
@ -67,7 +176,33 @@
text-decoration: none; text-decoration: none;
span { span {
margin-right: 8px; margin-right: 10px;
font-style: normal;
font-weight: 400;
font-size: 9px;
line-height: 12px;
color: $color-black;
@include mq(xxl, min) {
font-size: 18px;
line-height: 25px;
}
}
figure {
margin: 0;
width: 44.92px;
height: 16px;
@include mq(xxl, min) {
width: 87px;
height: 31px;
}
img {
width: 100%;
vertical-align: unset;
}
} }
} }
} }

17
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -5,6 +5,14 @@
.container { .container {
width: 79.53125% !important; width: 79.53125% !important;
@include mq(tablet, max) {
width: 96.875% !important;
}
@include mq(md, max) {
width: 91.46% !important;
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;
@ -25,6 +33,10 @@
margin: 16px 0; margin: 16px 0;
} }
@include mq(cstm, max) {
margin-right: 50px;
}
img { img {
width: 100%; width: 100%;
} }
@ -32,6 +44,11 @@
&__safeBuy { &__safeBuy {
display: flex; display: flex;
width: 15.2829%;
@include mq(tablet, max) {
width: auto;
}
img { img {
width: 12px; width: 12px;

1
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -38,6 +38,7 @@ $color-green2: #298541;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
fold: 350,
cstm: 400, cstm: 400,
sm: 576px, sm: 576px,
md: 768px, md: 768px,