feat: adiciona responsividade mobile

This commit is contained in:
Vitor Soares 2023-02-03 20:23:39 -03:00
parent 4ecde7b8d7
commit e9adb8d3f7
13 changed files with 95 additions and 4 deletions

View File

@ -17,3 +17,14 @@
width: 100%; width: 100%;
} }
} }
@media only screen and (max-width: 768px) {
[class*="html--buy-button"] {
flex-direction: column;
margin-bottom: 16px;
}
[class*="html--buy-button"] :global(.vtex-button) {
height: 74px;
}
}

View File

@ -29,7 +29,7 @@ const Pix = () => {
<img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" /> <img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
</div> </div>
<div className={styles["discount"]}> <div className={styles["discount"]}>
<p className={styles["value"]}>R${totalValue.toFixed(2)}</p> <p className={styles["value"]}>R${totalValue.toFixed(2).replace(".", ",")}</p>
<p className={styles["text"]}>10 % de desconto</p> <p className={styles["text"]}>10 % de desconto</p>
</div> </div>
</div> </div>

View File

@ -43,6 +43,11 @@
:global(.vtex-flex-layout-0-x-flexCol--image-description) { :global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px; padding-right: 32px;
} }
@media only screen and (max-width: 1025px) {
:global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 0;
}
}
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {

View File

@ -6,7 +6,12 @@
1800px + : Big desktop 1800px + : Big desktop
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Fontes */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Cores */
/* Grid breakpoints */ /* Grid breakpoints */
.numeric-stepper__input { @media only screen and (max-width: 767px) {
background: black; .quantitySelectorContainer {
margin-bottom: 0;
}
} }

View File

@ -16,6 +16,12 @@
max-height: unset; max-height: unset;
max-width: 314px; max-width: 314px;
} }
@media only screen and (max-width: 1025px) {
.imageNormal {
height: 291.2px;
max-width: 291.2px;
}
}
.brandName { .brandName {
font-weight: 400; font-weight: 400;
@ -23,6 +29,12 @@
line-height: 25px; line-height: 25px;
color: #000000; color: #000000;
} }
@media only screen and (max-width: 1025px) {
.brandName {
font-size: 14px;
line-height: 19px;
}
}
.nameContainer { .nameContainer {
padding: 16px 0 8px 0; padding: 16px 0 8px 0;
@ -37,6 +49,12 @@
line-height: 19px; line-height: 19px;
color: #bababa; color: #bababa;
} }
@media only screen and (max-width: 1025px) {
.priceContainer .listPriceContainer {
font-size: 12px;
line-height: 16px;
}
}
.priceContainer .listPriceContainer::after { .priceContainer .listPriceContainer::after {
content: "por"; content: "por";
} }
@ -55,6 +73,12 @@
line-height: 33px; line-height: 33px;
color: #000000; color: #000000;
} }
@media only screen and (max-width: 1025px) {
.priceContainer .price_sellingPrice {
font-size: 18px;
line-height: 25px;
}
}
.priceContainer .sellingPriceContainer { .priceContainer .sellingPriceContainer {
padding: 0 0 32px 0; padding: 0 0 32px 0;
} }

View File

@ -468,6 +468,7 @@
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.productDescriptionContainer .productDescriptionTitle { .productDescriptionContainer .productDescriptionTitle {
font-size: 20px;
padding-top: 16px; padding-top: 16px;
} }
} }
@ -485,6 +486,8 @@
} }
@media only screen and (max-width: 1025px) { @media only screen and (max-width: 1025px) {
.productDescriptionContainer .productDescriptionText { .productDescriptionContainer .productDescriptionText {
font-size: 14px;
line-height: 19px;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
padding-bottom: 16px; padding-bottom: 16px;
} }

View File

@ -24,6 +24,12 @@
padding: 16px 0 32px 0; padding: 16px 0 32px 0;
color: #575757; color: #575757;
} }
@media only screen and (max-width: 1025px) {
.container--structure::after {
font-size: 20px;
line-height: 32px;
}
}
.contentContainer { .contentContainer {
padding: 0 32px; padding: 0 32px;

View File

@ -29,6 +29,10 @@
:global(.vtex-flex-layout-0-x-flexCol--image-description) { :global(.vtex-flex-layout-0-x-flexCol--image-description) {
padding-right: 32px; padding-right: 32px;
@include mq(md, max) {
padding-right: 0;
}
} }
:global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) {

View File

@ -0,0 +1,5 @@
.quantitySelectorContainer {
@include mq(sm, max) {
margin-bottom: 0;
}
}

View File

@ -3,6 +3,11 @@
height: 314px; height: 314px;
max-height: unset; max-height: unset;
max-width: 314px; max-width: 314px;
@include mq(md, max) {
height: 291.2px;
max-width: 291.2px;
}
} }
.brandName { .brandName {
@ -11,6 +16,11 @@
line-height: 25px; line-height: 25px;
color: $black; color: $black;
@include mq(md, max) {
font-size: 14px;
line-height: 19px;
}
} }
.nameContainer { .nameContainer {
@ -27,6 +37,11 @@
color: $gray-700; color: $gray-700;
@include mq(md, max) {
font-size: 12px;
line-height: 16px;
}
&::after { &::after {
content: "por"; content: "por";
} }
@ -50,6 +65,11 @@
line-height: 33px; line-height: 33px;
color: $black; color: $black;
@include mq(md, max) {
font-size: 18px;
line-height: 25px;
}
} }
.sellingPriceContainer { .sellingPriceContainer {

View File

@ -561,6 +561,7 @@ margin-top: 16px;
} }
@include mq(md, max) { @include mq(md, max) {
font-size: 20px;
padding-top: 16px; padding-top: 16px;
} }
} }
@ -578,6 +579,8 @@ margin-top: 16px;
} }
@include mq(md, max) { @include mq(md, max) {
font-size: 14px;
line-height: 19px;
border-bottom: 1px solid $gray-400; border-bottom: 1px solid $gray-400;
padding-bottom: 16px; padding-bottom: 16px;
} }

View File

@ -11,6 +11,11 @@
padding: 16px 0 32px 0; padding: 16px 0 32px 0;
color: $gray-100; color: $gray-100;
@include mq(md, max) {
font-size: 20px;
line-height: 32px;
}
} }
} }

View File

@ -34,7 +34,7 @@ $color-green: #4caf50;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
cstm: 400, cstm: 400,
mobile: 768px, sm: 768px,
md: 1026px, md: 1026px,
xl: 1920px xl: 1920px
) !default; ) !default;