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

feat: Adiciona layout 2500

Browse Source
This commit is contained in:
Cainã Milech 2022-12-18 23:33:34 -03:00
parent b4024af7fe
commit d8692d739c
9 changed files with 243 additions and 86 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 (000007B0000, 000007D2501, 00000000001, E2F524F93905) 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)

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

@ -10,8 +10,6 @@ export default class Footer {
await this.carrinho(); await this.carrinho();
this.renderPrateleira(); this.renderPrateleira();
this.onUpdate(); this.onUpdate();
//this.prateleira();
//this.onUpdate();
} }
async selectors() { async selectors() {
@ -146,7 +144,6 @@ export default class Footer {
carrinho() { carrinho() {
this.title.innerHTML = ``; this.title.innerHTML = ``;
//this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
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`;

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

@ -28,10 +28,6 @@ h1#orderform-title {
left: 0; left: 0;
} }
@include mq(md, max) {
/*width: unset;*/
}
.link-cart { .link-cart {
a { a {
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -86,9 +82,6 @@ h1#orderform-title {
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }
font-size: 12px;
line-height: 14px;
} }
small { small {
@ -109,7 +102,6 @@ h1#orderform-title {
} }
.client-email { .client-email {
/*left: -61px;*/
margin: 0 0 24.56px; margin: 0 0 24.56px;
@include mq(tablet, max) { @include mq(tablet, max) {
@ -119,7 +111,6 @@ h1#orderform-title {
} }
input { input {
/*width: 65.8%;*/
width: 82%; width: 82%;
height: 50px; height: 50px;
box-shadow: none; box-shadow: none;
@ -141,10 +132,6 @@ h1#orderform-title {
&::placeholder { &::placeholder {
color: $color-black-500; color: $color-black-500;
} }
/*@media (max-width: 490px) {
width: auto;
}*/
} }
button { button {
@ -181,7 +168,6 @@ h1#orderform-title {
} }
@media (max-width: 490px) { @media (max-width: 490px) {
/*height: 48px;*/
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
@ -222,11 +208,6 @@ h1#orderform-title {
height: auto; height: auto;
} }
/*@include mq(md, max) {
display: table-cell;
width: 100%;
}*/
h3 { h3 {
color: $color-black-500; color: $color-black-500;
font-style: normal; font-style: normal;
@ -305,13 +286,18 @@ h1#orderform-title {
.client-last-name, .client-last-name,
.client-document, .client-document,
.client-phone { .client-phone {
float: left !important;
width: 47.4%; width: 47.4%;
@include mq(tablet, max) { @include mq(tablet, max) {
width: 49.4%; width: 49.4%;
} }
@include mq(md, max) {
width: 47.5%;
}
input { input {
width: 100%; width: 100% !important;
} }
} }
@ -321,6 +307,9 @@ h1#orderform-title {
@include mq(tablet, max) { @include mq(tablet, max) {
margin-right: 1.2%; margin-right: 1.2%;
} }
@include mq(md, max) {
margin-right: 5%;
}
} }
} }
@ -357,7 +346,7 @@ h1#orderform-title {
@include mq(tablet, max) { @include mq(tablet, max) {
position: absolute; position: absolute;
bottom: 1%; bottom: 1%;
left: 14%; left: 140px;
} }
} }
} }
@ -399,6 +388,7 @@ h1#orderform-title {
.cart-fixed.cart-fixed-transition.affix { .cart-fixed.cart-fixed-transition.affix {
@include mq(tablet, max) { @include mq(tablet, max) {
padding-bottom: 4px; padding-bottom: 4px;
left: -0.5px;
} }
#payment-data-submit { #payment-data-submit {
@include mq(tablet, max) { @include mq(tablet, max) {
@ -541,7 +531,7 @@ 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;
@ -680,28 +670,6 @@ h1#orderform-title {
/*IDENTIFICAÇÃO*/ /*IDENTIFICAÇÃO*/
.client-profile-data { .client-profile-data {
//INDENTIFICACAO INPUTS PORCENTAGEM
/*.span6.client-profile-data {
width: 100%;
box-sizing: border-box;
.client-first-name,
.client-last-name,
.client-document,
.client-phone {
width: 49.4%;
input {
width: 100%;
}
}
.client-first-name,
.client-document {
margin-right: 1.2%;
}
}*/
.accordion-group { .accordion-group {
padding: 24px 17px; padding: 24px 17px;
@ -1215,15 +1183,9 @@ h1#orderform-title {
} }
//RESUMO DO PEDIDO (MINI CART CARRINHO) //RESUMO DO PEDIDO (MINI CART CARRINHO)
/*.summary-cart-template-holder {
@include mq(tablet, max) {
height: unset;
}
} TESTE */
.cart-fixed.cart-fixed-transition { .cart-fixed.cart-fixed-transition {
height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO 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;
@ -1286,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 {
@ -1299,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 {
@ -1341,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;

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

@ -11,6 +11,11 @@
color: $color-black; color: $color-black;
margin: 17px 0 16px; margin: 17px 0 16px;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin-left: 16px; margin-left: 16px;
} }
@ -22,6 +27,10 @@
.empty-cart-content { .empty-cart-content {
margin-top: 100px; margin-top: 100px;
@include mq(md, max) {
margin-top: 150px;
}
.empty-cart-title { .empty-cart-title {
font-weight: 700; font-weight: 700;
font-size: 24px; font-size: 24px;
@ -30,6 +39,11 @@
text-transform: uppercase; text-transform: uppercase;
margin: 0 0 32px; margin: 0 0 32px;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(tablet, max) { @include mq(tablet, max) {
margin-bottom: 22px; margin-bottom: 22px;
font-size: 18px; font-size: 18px;
@ -54,6 +68,11 @@
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) { @include mq(tablet, max) {
padding: 16px 26px; padding: 16px 26px;
} }
@ -197,17 +216,6 @@
margin: 16px 0; margin: 16px 0;
border-top: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
/*.product-image {
@include mq(tablet, max) {
margin-left: 16px;
}
.quantity {
@include mq(tablet, max) {
margin-left: 16px;
}
}
}*/
} }
} }
} }
@ -259,6 +267,11 @@
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) { @include mq(tablet, max) {
display: none; display: none;
} }
@ -276,6 +289,11 @@
padding: 0; padding: 0;
width: 60px; width: 60px;
@include mq(xxl, min) {
height: 146px;
width: 146px;
}
@include mq(md, max) { @include mq(md, max) {
/*width: 72px;*/ /*width: 72px;*/
position: inherit !important; position: inherit !important;
@ -288,6 +306,12 @@
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;*/
@ -312,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;
} }
} }
@ -328,6 +357,15 @@
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) { @include mq(tablet, max) {
display: none; display: none;
} }
@ -361,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;
@ -376,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;
}
} }
} }
@ -395,14 +451,23 @@
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) { @include mq(tablet, max) {
position: absolute; position: absolute;
left: 7.7%; left: 75px;
top: 20%; margin-left: 0 !important;
top: 25%;
} }
@include mq(md, max) { @include mq(md, max) {
left: 6%; left: 75px;
} }
@media (max-width: 490px) { @media (max-width: 490px) {
@ -420,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;
} }
@ -439,6 +510,10 @@
&:before { &:before {
font-size: 16px; font-size: 16px;
padding-right: 0; padding-right: 0;
@include mq(xxl, min) {
font-size: 30px;
}
} }
} }
@ -446,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) {
@ -469,6 +551,10 @@
@include mq(tablet, max) { @include mq(tablet, max) {
display: none; display: none;
} }
@include mq(xxl, min) {
width: 150px;
}
} }
.quantity-price, .quantity-price,
@ -495,11 +581,20 @@
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 {
text-align: end; text-align: end;
@include mq(xxl, min) {
text-align: left;
}
@include mq(md, max) { @include mq(md, max) {
top: 0; top: 0;
padding: 0; padding: 0;
@ -515,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;
} }
@ -564,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;
} }
@ -577,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 {
@ -596,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);
} }
@ -863,6 +980,11 @@
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;
}
} }
} }
@ -900,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 {

8
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,12 +51,12 @@ body {
} }
.container-order-form, .container-order-form,
.container-cart { .container-cart {
box-sizing: border-box; /*teste*/ box-sizing: border-box;
width: 80%; width: 80%;
@include mq(tablet, max) { @include mq(tablet, max) {
width: 100%; width: 100%;
padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/ padding: 0;
} }
} }
} }

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

@ -13,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;
}
} }
} }
} }
@ -96,6 +101,7 @@
text-align: center; text-align: center;
img { img {
width: 100%;
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -107,6 +113,11 @@
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) { @media (min-width: 1025px) and (max-width: 1110px) {
height: 36px; height: 36px;
} }
@ -119,8 +130,8 @@
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
@include mq(md, max) { @include mq(xl, max) {
height: 56px; height: 66px;
} }
&__variation { &__variation {
@ -139,7 +150,11 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: $color-white; color: $color-white;
/*white-space: nowrap;*/
@include mq(xxl, min) {
font-size: 26px;
line-height: 35px;
}
} }
} }
@ -159,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;
}
} }
} }
@ -195,6 +215,12 @@
z-index: 4; z-index: 4;
top: 45%; top: 45%;
@include mq(xxl, min) {
width: 26px;
height: 58px;
top: 50%;
}
@include mq(md, max) { @include mq(md, max) {
top: 50%; top: 50%;
} }

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

@ -44,6 +44,11 @@
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) { @include mq(tablet, max) {
margin-bottom: 16px; margin-bottom: 16px;
margin-left: 8px; margin-left: 8px;
@ -83,6 +88,11 @@
width: 35px; width: 35px;
height: 20px; height: 20px;
@include mq(xxl, min) {
width: 69px;
height: 39px;
}
img { img {
width: 100%; width: 100%;
vertical-align: unset; vertical-align: unset;
@ -98,6 +108,11 @@
width: 53px; width: 53px;
height: 33px; height: 33px;
@include mq(xxl, min) {
width: 103px;
height: 64px;
}
img { img {
width: 100%; width: 100%;
vertical-align: unset; vertical-align: unset;
@ -117,6 +132,10 @@
height: 24px; height: 24px;
margin: 0 10px 0 13px; margin: 0 10px 0 13px;
width: 1px; width: 1px;
@include mq(xxl, min) {
height: 43px;
}
} }
} }
@ -137,6 +156,11 @@
figure { figure {
width: 28.66px; width: 28.66px;
height: 15.65px; height: 15.65px;
@include mq(xxl, min) {
width: 55px;
height: 30px;
}
} }
} }
@ -158,6 +182,11 @@
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
color: $color-black; color: $color-black;
@include mq(xxl, min) {
font-size: 18px;
line-height: 25px;
}
} }
figure { figure {
@ -165,6 +194,11 @@
width: 44.92px; width: 44.92px;
height: 16px; height: 16px;
@include mq(xxl, min) {
width: 87px;
height: 31px;
}
img { img {
width: 100%; width: 100%;
vertical-align: unset; vertical-align: unset;

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

@ -9,6 +9,10 @@
@include mq(tablet, max) { @include mq(tablet, max) {
width: 96.875% !important; width: 96.875% !important;
} }
@include mq(md, max) {
width: 91.46% !important;
}
} }
&__wrapper { &__wrapper {
align-items: center; align-items: center;

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

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