feat: Adiciona layout 2500

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

View File

@ -2,7 +2,7 @@ Stack trace:
Frame Function Args
000FFFFCD30 00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
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 0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
000FFFFCD30 002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)

View File

@ -10,8 +10,6 @@ export default class Footer {
await this.carrinho();
this.renderPrateleira();
this.onUpdate();
//this.prateleira();
//this.onUpdate();
}
async selectors() {
@ -146,7 +144,6 @@ export default class Footer {
carrinho() {
this.title.innerHTML = ``;
//this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
this.continuarCompra.innerHTML = `continuar comprando`;
this.frete.innerHTML = `Frete`;
this.unidade.innerHTML = `Unidade`;

View File

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

View File

@ -11,6 +11,11 @@
color: $color-black;
margin: 17px 0 16px;
@include mq(xxl, min) {
font-size: 48px;
line-height: 65px;
}
@include mq(tablet, max) {
margin-left: 16px;
}
@ -22,6 +27,10 @@
.empty-cart-content {
margin-top: 100px;
@include mq(md, max) {
margin-top: 150px;
}
.empty-cart-title {
font-weight: 700;
font-size: 24px;
@ -30,6 +39,11 @@
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;
@ -54,6 +68,11 @@
font-size: 14px;
line-height: 16px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(tablet, max) {
padding: 16px 26px;
}
@ -197,17 +216,6 @@
margin: 16px 0;
border-top: 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;
line-height: 16px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 33px;
}
@include mq(tablet, max) {
display: none;
}
@ -276,6 +289,11 @@
padding: 0;
width: 60px;
@include mq(xxl, min) {
height: 146px;
width: 146px;
}
@include mq(md, max) {
/*width: 72px;*/
position: inherit !important;
@ -288,6 +306,12 @@
width: 60px;
object-fit: cover;
@include mq(xxl, min) {
height: 146px;
width: 146px;
max-width: 146px;
}
@include mq(sm, max) {
/*height: 72px;
width: auto;*/
@ -312,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;
}
}
@ -328,6 +357,15 @@
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;
}
@ -361,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;
@ -376,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;
}
}
}
@ -395,14 +451,23 @@
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: 7.7%;
top: 20%;
left: 75px;
margin-left: 0 !important;
top: 25%;
}
@include mq(md, max) {
left: 6%;
left: 75px;
}
@media (max-width: 490px) {
@ -420,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;
}
@ -439,6 +510,10 @@
&:before {
font-size: 16px;
padding-right: 0;
@include mq(xxl, min) {
font-size: 30px;
}
}
}
@ -446,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) {
@ -469,6 +551,10 @@
@include mq(tablet, max) {
display: none;
}
@include mq(xxl, min) {
width: 150px;
}
}
.quantity-price,
@ -495,11 +581,20 @@
font-weight: 700;
font-size: 14px;
line-height: 19px;
@include mq(xxl, min) {
font-size: 28px;
line-height: 38px;
}
}
}
.item-remove {
text-align: end;
@include mq(xxl, min) {
text-align: left;
}
@include mq(md, max) {
top: 0;
padding: 0;
@ -515,6 +610,10 @@
width: 10px;
height: 10px;
@include mq(xxl, min) {
font-size: 32px;
}
@include mq(md, max) {
font-size: 18px;
}
@ -564,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;
}
@ -577,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 {
@ -596,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);
}
@ -863,6 +980,11 @@
line-height: 14px;
color: $color-black-500;
text-decoration: none;
@include mq(xxl, max) {
font-size: 24px;
line-height: 28px;
}
}
}
@ -900,6 +1022,11 @@
line-height: 14px;
color: $color-gray2;
cursor: none;
@include mq(xxl, min) {
font-size: 24px;
line-height: 28px;
}
}
.coupon-fields {

View File

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

View File

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

View File

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

View File

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

View File

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