diff --git a/bash.exe.stackdump b/bash.exe.stackdump
index 0dbf51a..512b978 100644
--- a/bash.exe.stackdump
+++ b/bash.exe.stackdump
@@ -2,7 +2,7 @@ Stack trace:
Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
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 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 5e34d3a..db385b4 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -8,13 +8,14 @@ export default class Footer {
async init() {
await this.selectors();
await this.carrinho();
- this.prateleira();
+ this.renderPrateleira();
this.onUpdate();
}
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
+ this.title = await waitElement("#cart-title");
this.checkoutVazio = await waitElement(".empty-cart-content");
//CARRINHO VAZIO
this.fraseCarrinhoVazio = await waitElement(".empty-cart-title");
@@ -25,12 +26,18 @@ export default class Footer {
this.footerPrateleira = await waitElement(".footerCheckout__prateleira");
//pagamento
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() {
if (this.checkoutVazio.style.display == "none") {
+ this.title.innerHTML = `MEU CARRINHO`;
this.requestApi();
this.addCarrossel();
+
window.addEventListener("hashchange", () => {
if (window.location.hash !== "#/cart") {
this.removePrateleira();
@@ -79,7 +86,7 @@ export default class Footer {
}
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) {
$(prateleira).slick({
@@ -88,6 +95,20 @@ export default class Footer {
infinite: 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;") {
this.prateleira();
} else if (display == "display: block;") {
+ this.title.innerHTML = ``;
this.removePrateleira();
}
});
@@ -113,10 +135,54 @@ export default class Footer {
observer.observe(target, config);
}
+ async renderPrateleira() {
+ if (window.location.hash == "#/cart") {
+ this.onUpdate();
+ this.prateleira();
+ }
+ }
+
carrinho() {
- this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
+ this.title.innerHTML = ``;
this.continuarCompra.innerHTML = `continuar comprando`;
this.frete.innerHTML = `Frete`;
this.unidade.innerHTML = `Unidade`;
+ //footer
+ this.creditcards.innerHTML = `
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+ `;
+ this.vtex.innerHTML = `
+ 
+ `;
+ this.developed.innerHTML = `
+
+ Powered By
+ 
+
+
+
+
+ Developed By
+ 
+
+ `;
}
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 2e7ce42..52e0607 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -5,14 +5,29 @@ h1#orderform-title {
line-height: 33px;
color: $color-black-500;
margin: 17px 0;
+
+ @include mq(tablet, max) {
+ margin: 17px 16px;
+ }
}
.checkout-container {
+ .link.link-cart.pull-right {
+ @include mq(tablet, max) {
+ margin-right: 16px;
+ }
+ }
+
.client-pre-email {
border-color: $color-black-500;
font-family: $font-family;
padding-top: 8px;
+ @include mq(tablet, max) {
+ padding-top: 0;
+ left: 0;
+ }
+
.link-cart {
a {
font-family: $font-family-secundary;
@@ -28,10 +43,19 @@ h1#orderform-title {
&:hover {
color: lighen($color-black-500, 10);
}
+
+ @include mq(tablet, max) {
+ font-size: 10px;
+ line-height: 12px;
+ }
}
}
.pre-email {
+ @include mq(md, max) {
+ margin-top: 100px;
+ }
+
flex-direction: column;
display: flex;
align-items: center;
@@ -48,6 +72,16 @@ h1#orderform-title {
line-height: 23px;
text-transform: uppercase;
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 {
@@ -58,16 +92,25 @@ h1#orderform-title {
line-height: 23px;
text-transform: uppercase;
font-family: $font-family-secundary;
+
+ @include mq(tablet, max) {
+ font-size: 12px;
+ line-height: 14px;
+ }
}
}
}
.client-email {
- /*left: -61px;*/
margin: 0 0 24.56px;
+ @include mq(tablet, max) {
+ width: 100%;
+ text-align: initial;
+ padding: 0 16px;
+ }
+
input {
- /*width: 65.8%;*/
width: 82%;
height: 50px;
box-shadow: none;
@@ -82,12 +125,12 @@ h1#orderform-title {
font-size: 12px;
line-height: 16px;
- &::placeholder {
- color: $color-black-500;
+ @include mq(tablet, max) {
+ width: 90% !important;
}
- @media (max-width: 490px) {
- width: auto;
+ &::placeholder {
+ color: $color-black-500;
}
}
@@ -108,6 +151,14 @@ h1#orderform-title {
letter-spacing: 0.05em;
text-transform: uppercase;
+ @include mq(tablet, max) {
+ right: 1.7%;
+ }
+
+ @include mq(md, max) {
+ right: 3.3%;
+ }
+
&:hover {
background: lighten($color-blue2, 5);
}
@@ -117,7 +168,6 @@ h1#orderform-title {
}
@media (max-width: 490px) {
- height: 48px;
margin: 0;
position: absolute;
}
@@ -130,6 +180,10 @@ h1#orderform-title {
font-size: 12px;
line-height: 16px;
text-transform: capitalize;
+
+ @include mq(tablet, max) {
+ text-align: center;
+ }
}
}
@@ -141,6 +195,19 @@ h1#orderform-title {
border: 1px solid $color-black-500;
border-radius: 5px;
+ @include mq(tablet, max) {
+ width: 309px;
+
+ i.icon-lock {
+ display: none;
+ }
+ }
+
+ @include mq(fold, max) {
+ width: 220px;
+ height: auto;
+ }
+
h3 {
color: $color-black-500;
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,
.payment-data,
.client-profile-data {
@@ -316,14 +531,13 @@ h1#orderform-title {
button.submit {
margin-top: 0;
- margin-bottom: 22px; /*tem 15de pad e 7 de p*/
+ margin-bottom: 22px;
width: 100%;
height: 42px;
text-transform: uppercase;
border: none;
border-radius: 8px;
background: $color-blue2;
-
outline: none;
transition: all 0.2s linear;
letter-spacing: 0.05em;
@@ -333,6 +547,10 @@ h1#orderform-title {
font-size: 14px;
line-height: 19px;
+ @include mq(tablet, max) {
+ margin-bottom: 13px;
+ }
+
&:hover {
background: lighten($color-blue2, 5);
}
@@ -385,6 +603,7 @@ h1#orderform-title {
}
.address-summary {
+ position: relative;
background: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png")
no-repeat;
background-size: 21.25px 20.07px;
@@ -393,13 +612,16 @@ h1#orderform-title {
border-color: $color-gray4;
border-radius: 0;
color: #303030;
- padding: 12px 12px 12px 43px;
+ padding: 12px 55px 12px 43px;
@include mq(md, max) {
background-position: 8px 9px;
}
a {
+ position: absolute;
+ right: 13px;
+ bottom: 14px;
font-style: normal;
font-weight: 400;
font-size: 12px;
@@ -435,11 +657,18 @@ h1#orderform-title {
.vtex-omnishipping-1-x-deliveryOptionActive {
text-shadow: 1.3px 1px lighten($color-black, 50);
}
+
+ .vtex-omnishipping-1-x-addressSummaryActive {
+ :nth-child(6) {
+ display: none;
+ }
+ }
}
}
}
/*IDENTIFICAÇÃO*/
+
.client-profile-data {
.accordion-group {
padding: 24px 17px;
@@ -733,6 +962,8 @@ h1#orderform-title {
.input.ship-postalCode {
label {
font-size: 0;
+ display: flex;
+ align-items: center;
&::before {
content: "CEP:";
@@ -952,9 +1183,9 @@ h1#orderform-title {
}
//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;
border: 1px solid $color-gray5;
margin-top: 10px;
@@ -1017,6 +1248,10 @@ h1#orderform-title {
.price {
margin-right: 0;
}
+
+ @include mq(fold, max) {
+ margin-top: 28px;
+ }
}
span.fn.product-name {
@@ -1030,6 +1265,16 @@ h1#orderform-title {
font-size: 12px;
line-height: 14px;
color: $color-black;
+
+ @include mq(md, max) {
+ top: 25%;
+ margin-left: 70px;
+ }
+
+ @include mq(fold, max) {
+ top: 0;
+ margin-left: 70px;
+ }
}
strong {
@@ -1055,6 +1300,10 @@ h1#orderform-title {
font-size: 12px;
line-height: 16px;
margin-right: 17px;
+
+ @include mq(tablet, max) {
+ margin-right: 0;
+ }
}
}
@@ -1068,9 +1317,6 @@ h1#orderform-title {
display: flex;
td {
- /*&.empty {
- }*/
-
&.info,
&.monetary {
font-family: $font-family;
@@ -1084,10 +1330,17 @@ h1#orderform-title {
&.info {
margin-left: 17px;
+
+ @include mq(tablet, max) {
+ margin-left: 0;
+ }
}
&.monetary {
margin-right: 17px;
+ @include mq(tablet, max) {
+ margin-right: 0;
+ }
}
}
}
@@ -1130,6 +1383,14 @@ h1#orderform-title {
height: 42px;
margin: 0;
+ &:hover {
+ background: lighten($color-green2, 5);
+ }
+
+ &:active {
+ background: darken($color-green2, 5);
+ }
+
i {
display: none;
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index b299a40..65a4b2b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -10,17 +10,74 @@
letter-spacing: 0.05em;
color: $color-black;
margin: 17px 0 16px;
- }
- .cart-template .cart-items th {
- font-family: $font-family-secundary;
- font-weight: 400;
- padding: 0 0 17px;
- text-align: start;
+ @include mq(xxl, min) {
+ font-size: 48px;
+ line-height: 65px;
+ }
+
+ @include mq(tablet, max) {
+ margin-left: 16px;
+ }
}
}
.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 {
font-weight: 700;
font-size: 24px;
@@ -60,6 +117,11 @@
border-radius: 5px;
padding: 16px;
+ @include mq(tablet, max) {
+ padding: 0;
+ border: none;
+ }
+
@include mq(md, max) {
margin: 0px 0 25px 0;
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 {
background-color: $color-white;
}
@@ -150,14 +242,24 @@
.cart-items {
tr.product-item {
position: relative;
+
+ @include mq(md, max) {
+ padding: 0;
+ margin: 0;
+ }
}
td {
text-align: start;
padding: 0;
+
+ @include mq(tablet, max) {
+ vertical-align: top;
+ }
}
th {
+ text-align: start;
color: $color-black;
padding: 0 0 16px;
font-style: normal;
@@ -165,6 +267,15 @@
font-size: 14px;
line-height: 16px;
+ @include mq(xxl, min) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+
+ @include mq(tablet, max) {
+ display: none;
+ }
+
@include mq(md, max) {
&.quantity-price,
&.shipping-date {
@@ -178,8 +289,15 @@
padding: 0;
width: 60px;
- @include mq(sm, max) {
- width: 72px;
+ @include mq(xxl, min) {
+ height: 146px;
+ width: 146px;
+ }
+
+ @include mq(md, max) {
+ /*width: 72px;*/
+ position: inherit !important;
+ width: 60px;
}
img {
@@ -188,9 +306,15 @@
width: 60px;
object-fit: cover;
+ @include mq(xxl, min) {
+ height: 146px;
+ width: 146px;
+ max-width: 146px;
+ }
+
@include mq(sm, max) {
- height: 72px;
- width: auto;
+ /*height: 72px;
+ width: auto;*/
}
}
}
@@ -198,8 +322,10 @@
.product-name {
padding: 0 0 0 16px;
- @include mq(lg, max) {
- width: 250px;
+ @include mq(md, max) {
+ /*width: 250px;*/
+ position: absolute;
+ top: 0;
}
a {
@@ -210,8 +336,13 @@
line-height: 14px;
transition: ease-in 0.22s all;
- @media (max-width: 490px) {
- margin-left: 23px;
+ @include mq(xxl, min) {
+ font-size: 24px;
+ line-height: 28px;
+ }
+
+ @include mq(md, max) {
+ margin-left: 15px;
}
}
@@ -226,6 +357,19 @@
font-size: 12px;
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) {
display: none;
}
@@ -235,6 +379,13 @@
min-width: 100px;
top: 13px;
+ @include mq(tablet, max) {
+ position: absolute;
+ right: 0;
+ top: 40%;
+ text-align: end;
+ }
+
@include mq(md, max) {
min-width: 78px;
}
@@ -248,6 +399,12 @@
font-size: 12px;
line-height: 14px;
text-decoration-line: line-through;
+
+ @include mq(xxl, min) {
+ font-size: 24px;
+ line-height: 28px;
+ }
+
@include mq(sm, max) {
font-size: 12px;
line-height: 14px;
@@ -263,8 +420,20 @@
}
}
+ .new-product-price {
+ @include mq(xxl, min) {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+
.new-product-price-label {
text-transform: lowercase;
+
+ @include mq(xxl, min) {
+ font-size: 28px;
+ line-height: 33px;
+ }
}
}
@@ -282,8 +451,27 @@
padding: 9px 0;
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) {
- margin-left: 84px !important;
+ /*margin-left: 84px !important;*/
}
input {
@@ -297,6 +485,12 @@
color: $color-black-500;
box-shadow: none;
+ @include mq(xxl, min) {
+ font-size: 28px;
+ line-height: 33px;
+ padding: 0px 10px;
+ }
+
@include mq(lg, max) {
width: 24px !important;
}
@@ -316,6 +510,10 @@
&:before {
font-size: 16px;
padding-right: 0;
+
+ @include mq(xxl, min) {
+ font-size: 30px;
+ }
}
}
@@ -323,17 +521,24 @@
&:before {
font-size: 14px;
padding-left: 0;
+
+ @include mq(xxl, min) {
+ font-size: 30px;
+ }
}
}
.item-quantity-change {
@media (max-width: 979px) and (min-width: 768px) {
- position: inherit;
+ height: unset;
+ width: unset;
+ position: unset;
+ /*position: inherit;
bottom: inherit;
left: inherit;
height: inherit;
width: inherit;
- top: inherit;
+ top: inherit;*/
}
@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,
.best-price {
.icon-question-sign {
@@ -366,12 +581,28 @@
font-weight: 700;
font-size: 14px;
line-height: 19px;
+
+ @include mq(xxl, min) {
+ font-size: 28px;
+ line-height: 38px;
+ }
}
}
.item-remove {
- @media (max-width: 490px) {
+ text-align: end;
+
+ @include mq(xxl, min) {
+ text-align: left;
+ }
+ @include mq(md, max) {
top: 0;
+ padding: 0;
+ }
+ a {
+ @include mq(md, max) {
+ padding-top: 0;
+ }
}
.icon::before {
color: $color-gray7;
@@ -379,6 +610,10 @@
width: 10px;
height: 10px;
+ @include mq(xxl, min) {
+ font-size: 32px;
+ }
+
@include mq(md, max) {
font-size: 18px;
}
@@ -401,6 +636,14 @@
.summary {
margin-top: 48px;
+ @include mq(md, max) {
+ margin-top: 0;
+ }
+
+ @include mq(tablet, max) {
+ display: flex;
+ flex-direction: column;
+ }
.cart-more-options {
padding: 0;
@@ -409,7 +652,7 @@
.srp-container {
@include mq(md, max) {
- padding: 0 16px;
+ max-width: 276px;
}
.srp-main-title {
@@ -420,6 +663,11 @@
line-height: 33px;
color: $color-black-500;
+ @include mq(xxl, min) {
+ font-size: 48px;
+ line-height: 65px;
+ }
+
@include mq(md, max) {
margin-top: 0;
}
@@ -433,6 +681,13 @@
margin: 0 0 10.65px;
width: 276px;
max-width: 276px;
+
+ @include mq(xxl, min) {
+ font-size: 28px;
+ line-height: 36px;
+ width: 552px;
+ max-width: 552px;
+ }
}
button.shp-open-options {
@@ -452,6 +707,12 @@
mix-blend-mode: normal;
margin-top: 0;
+ @include mq(xxl, min) {
+ font-size: 28px;
+ width: 230px;
+ height: 44px;
+ }
+
&:hover {
background-color: lighten($color-gray4, 5);
}
@@ -465,6 +726,10 @@
.srp-data {
width: 280px;
+ @include mq(tablet, max) {
+ width: 343px;
+ }
+
@include mq(cstm, max) {
width: calc(100vw - 32px);
}
@@ -557,6 +822,10 @@
height: 36px;
padding: 12px 8px;
width: 172px;
+
+ @include mq(tablet, max) {
+ width: 215px;
+ }
}
& ~ button {
@@ -586,6 +855,11 @@
&:active {
background-color: darken($color-blue2, 5);
}
+
+ @include mq(tablet, max) {
+ width: 120px;
+ right: -213px;
+ }
}
small a {
@@ -683,6 +957,11 @@
width: 354px;
margin-bottom: 5px;
+ @include mq(tablet, max) {
+ margin: 48px 0 0 0;
+ width: 100%;
+ }
+
.coupon-data {
margin-bottom: 8px;
@@ -701,11 +980,16 @@
line-height: 14px;
color: $color-black-500;
text-decoration: none;
+
+ @include mq(xxl, max) {
+ font-size: 24px;
+ line-height: 28px;
+ }
}
}
@include mq(md, max) {
- padding: 0 16px;
+ padding: 0;
width: 100%;
}
@@ -714,6 +998,10 @@
margin: 0;
width: 362px;
+ @include mq(tablet, max) {
+ width: 100%;
+ }
+
div {
text-align: start;
}
@@ -734,6 +1022,11 @@
line-height: 14px;
color: $color-gray2;
cursor: none;
+
+ @include mq(xxl, min) {
+ font-size: 24px;
+ line-height: 28px;
+ }
}
.coupon-fields {
@@ -764,6 +1057,12 @@
max-width: 204.32px;
padding: 0 12px;
+ @include mq(tablet, max) {
+ width: 86.2%;
+ box-sizing: border-box;
+ max-width: none;
+ }
+
&::placeholder {
color: $color-gray7;
font-family: $font-family-secundary;
@@ -796,6 +1095,14 @@
width: 133px;
text-transform: uppercase;
+ @include mq(tablet, max) {
+ width: 13.4%;
+ }
+
+ @include mq(tablet, max) {
+ margin-left: 0;
+ }
+
@include mq(md, max) {
width: 138px;
}
@@ -820,6 +1127,10 @@
font-size: 12px;
line-height: 14px;
color: $color-black-500;
+
+ @include mq(tablet, max) {
+ font-size: 0;
+ }
}
}
}
@@ -876,11 +1187,16 @@
flex-direction: column;
width: 352px;
+ @include mq(tablet, max) {
+ width: 100%;
+ padding-bottom: 0 !important;
+ }
+
@include mq(md, max) {
padding: 0 16px;
width: calc(100% - 32px);
float: none;
- margin-bottom: 50px;
+ /*margin-bottom: 50px;*/
}
@include mq(md, min) {
@@ -907,6 +1223,10 @@
}
}
+ .link-choose-more-products {
+ margin: 0;
+ }
+
.btn-place-order-wrapper {
a {
background: $color-blue2;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..0e231bd 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -1,38 +1,39 @@
.empty-cart {
- font-family: $font-family;
- &-content {
- color: $color-black;
- text-align: center;
+ font-family: $font-family;
- @include mq(md, max) {
- padding: 0 16px;
- }
- }
+ &-content {
+ color: $color-black;
+ text-align: center;
- &-title {
- font-size: 20px;
- }
+ @include mq(md, max) {
+ padding: 0 16px;
+ }
+ }
- &-links {
- .link-choose-products {
- background: $color-black;
- border: none;
- border-radius: 5px;
- transition: ease-in 0.22s all;
- outline: none;
- font-family: $font-family;
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 16px;
- text-align: center;
- letter-spacing: 0.05em;
- color: $color-white;
- text-transform: uppercase;
+ &-title {
+ font-size: 20px;
+ }
- &:hover {
- background: lighten($color-black, 5);
- }
- }
- }
+ &-links {
+ .link-choose-products {
+ background: $color-black;
+ border: none;
+ border-radius: 5px;
+ transition: ease-in 0.22s all;
+ outline: none;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ text-align: center;
+ letter-spacing: 0.05em;
+ color: $color-white;
+ text-transform: uppercase;
+
+ &:hover {
+ background: lighten($color-black, 5);
+ }
+ }
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index b8e5e08..3f9a975 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -18,10 +18,6 @@ header {
width: 79.53125%;
margin: 0 auto 56px auto;
}
-
- @include mq(tablet, max) {
- margin: 0 16px;
- }
}
body {
@@ -55,7 +51,13 @@ body {
}
.container-order-form,
.container-cart {
+ box-sizing: border-box;
width: 80%;
+
+ @include mq(tablet, max) {
+ width: 100%;
+ padding: 0;
+ }
}
}
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 5446c03..3776b83 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -1,5 +1,9 @@
.footerCheckout {
&__prateleira {
+ @include mq(tablet, max) {
+ padding: 0 16px;
+ margin-bottom: 54px;
+ }
h2 {
font-family: $font-family-secundary;
font-style: normal;
@@ -9,6 +13,11 @@
text-align: center;
color: $color-black-500;
margin-bottom: 20px;
+
+ @include mq(xxl, min) {
+ font-size: 48px;
+ line-height: 76px;
+ }
}
}
}
@@ -92,6 +101,7 @@
text-align: center;
img {
+ width: 100%;
display: block;
margin-bottom: 20px;
}
@@ -102,15 +112,31 @@
font-size: 13px;
line-height: 18px;
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 {
display: flex;
+ flex-wrap: wrap;
justify-content: center;
- margin-bottom: 20px;
+ align-items: center;
+ margin-bottom: 15px;
+
+ @include mq(xl, max) {
+ height: 66px;
+ }
&__variation {
- margin: 0 2.5px;
+ height: fit-content;
+ margin: 0 2.5px 5px;
background: $color-blue2;
border-radius: 8px;
padding: 5px;
@@ -124,6 +150,11 @@
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
+
+ @include mq(xxl, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
}
}
@@ -143,6 +174,11 @@
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
+
+ @include mq(xxl, min) {
+ font-size: 26px;
+ line-height: 35px;
+ }
}
}
@@ -178,18 +214,36 @@
border: none;
z-index: 4;
top: 45%;
+
+ @include mq(xxl, min) {
+ width: 26px;
+ height: 58px;
+ top: 50%;
+ }
+
+ @include mq(md, max) {
+ top: 50%;
+ }
}
.slick-prev {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg")
no-repeat center center;
background-size: contain;
left: 10px;
+
+ @include mq(md, max) {
+ left: 0px;
+ }
}
.slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg")
no-repeat center center;
background-size: contain;
right: 10px;
+
+ @include mq(md, max) {
+ right: 0;
+ }
}
.slick-arrow.slick-hidden {
display: none;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..61f1cac 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -2,25 +2,61 @@
.footerCheckout {
border-top: none;
color: $color-gray2;
+ display: contents; /*testar*/
&__wrapper {
+ border-top: 1px solid $color-black-500;
+ width: 100% !important;
align-items: center;
display: flex;
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 {
- color: $color-gray2;
+ margin-right: auto;
font-family: $font-family;
font-style: normal;
- font-weight: normal;
+ font-weight: 400;
font-size: 10px;
- line-height: 12px;
+ line-height: 14px;
+ color: $color-black;
text-transform: capitalize;
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) {
- margin-bottom: 24px;
+ margin-bottom: 16px;
max-width: 100%;
}
}
@@ -30,29 +66,102 @@
display: flex;
justify-self: center;
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) {
+ 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: center;
+ align-self: flex-start;
margin-bottom: 12px;
}
&__divider {
- background-color: $color-gray4;
+ background-color: $color-gray7;
display: inline-block;
height: 24px;
- margin: 0 8px;
+ margin: 0 10px 0 13px;
width: 1px;
+
+ @include mq(xxl, min) {
+ height: 43px;
+ }
}
}
&__developedBy {
+ margin: 0 0 0 auto;
align-items: center;
display: flex;
list-style-type: none;
- margin: 0;
+
+ @include mq(tablet, max) {
+ margin: 0 0 0 8px;
+
+ order: 2;
+ }
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 {
@@ -67,7 +176,33 @@
text-decoration: none;
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;
+ }
}
}
}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 81acfde..d4874d7 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -5,6 +5,14 @@
.container {
width: 79.53125% !important;
+
+ @include mq(tablet, max) {
+ width: 96.875% !important;
+ }
+
+ @include mq(md, max) {
+ width: 91.46% !important;
+ }
}
&__wrapper {
align-items: center;
@@ -25,6 +33,10 @@
margin: 16px 0;
}
+ @include mq(cstm, max) {
+ margin-right: 50px;
+ }
+
img {
width: 100%;
}
@@ -32,6 +44,11 @@
&__safeBuy {
display: flex;
+ width: 15.2829%;
+
+ @include mq(tablet, max) {
+ width: auto;
+ }
img {
width: 12px;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index de298d1..296bc65 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -38,6 +38,7 @@ $color-green2: #298541;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
+ fold: 350,
cstm: 400,
sm: 576px,
md: 768px,