diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index f3463a8..944866e 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -17,3 +17,14 @@ 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; + } +} diff --git a/react/components/Pix-bloco/Pix.tsx b/react/components/Pix-bloco/Pix.tsx index ce55d3f..6aff3ed 100644 --- a/react/components/Pix-bloco/Pix.tsx +++ b/react/components/Pix-bloco/Pix.tsx @@ -29,7 +29,7 @@ const Pix = () => { desconto
-

R${totalValue.toFixed(2)}

+

R${totalValue.toFixed(2).replace(".", ",")}

10 % de desconto

diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index de19421..6b102dd 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -43,6 +43,11 @@ :global(.vtex-flex-layout-0-x-flexCol--image-description) { 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) { :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 5f0389d..06b8643 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -6,7 +6,12 @@ 1800px + : Big desktop */ /* 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 */ -.numeric-stepper__input { - background: black; +@media only screen and (max-width: 767px) { + .quantitySelectorContainer { + margin-bottom: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index cf24fad..f1c2740 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -16,6 +16,12 @@ max-height: unset; max-width: 314px; } +@media only screen and (max-width: 1025px) { + .imageNormal { + height: 291.2px; + max-width: 291.2px; + } +} .brandName { font-weight: 400; @@ -23,6 +29,12 @@ line-height: 25px; color: #000000; } +@media only screen and (max-width: 1025px) { + .brandName { + font-size: 14px; + line-height: 19px; + } +} .nameContainer { padding: 16px 0 8px 0; @@ -37,6 +49,12 @@ line-height: 19px; color: #bababa; } +@media only screen and (max-width: 1025px) { + .priceContainer .listPriceContainer { + font-size: 12px; + line-height: 16px; + } +} .priceContainer .listPriceContainer::after { content: "por"; } @@ -55,6 +73,12 @@ line-height: 33px; color: #000000; } +@media only screen and (max-width: 1025px) { + .priceContainer .price_sellingPrice { + font-size: 18px; + line-height: 25px; + } +} .priceContainer .sellingPriceContainer { padding: 0 0 32px 0; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 882850c..238f3ad 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -468,6 +468,7 @@ } @media only screen and (max-width: 1025px) { .productDescriptionContainer .productDescriptionTitle { + font-size: 20px; padding-top: 16px; } } @@ -485,6 +486,8 @@ } @media only screen and (max-width: 1025px) { .productDescriptionContainer .productDescriptionText { + font-size: 14px; + line-height: 19px; border-bottom: 1px solid #bfbfbf; padding-bottom: 16px; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4e3fcbb..e86e4af 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,6 +24,12 @@ padding: 16px 0 32px 0; color: #575757; } +@media only screen and (max-width: 1025px) { + .container--structure::after { + font-size: 20px; + line-height: 32px; + } +} .contentContainer { padding: 0 32px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index edf6b53..82b2f97 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -29,6 +29,10 @@ :global(.vtex-flex-layout-0-x-flexCol--image-description) { padding-right: 32px; + + @include mq(md, max) { + padding-right: 0; + } } :global(.vtex-flex-layout-0-x-flexRowContent--container-main-content) { diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..d243d3f --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,5 @@ +.quantitySelectorContainer { + @include mq(sm, max) { + margin-bottom: 0; + } +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 0a03754..a8ac20e 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -3,6 +3,11 @@ height: 314px; max-height: unset; max-width: 314px; + + @include mq(md, max) { + height: 291.2px; + max-width: 291.2px; + } } .brandName { @@ -11,6 +16,11 @@ line-height: 25px; color: $black; + + @include mq(md, max) { + font-size: 14px; + line-height: 19px; + } } .nameContainer { @@ -27,6 +37,11 @@ color: $gray-700; + @include mq(md, max) { + font-size: 12px; + line-height: 16px; + } + &::after { content: "por"; } @@ -50,6 +65,11 @@ line-height: 33px; color: $black; + + @include mq(md, max) { + font-size: 18px; + line-height: 25px; + } } .sellingPriceContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6643104..1b8ba22 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -561,6 +561,7 @@ margin-top: 16px; } @include mq(md, max) { + font-size: 20px; padding-top: 16px; } } @@ -578,6 +579,8 @@ margin-top: 16px; } @include mq(md, max) { + font-size: 14px; + line-height: 19px; border-bottom: 1px solid $gray-400; padding-bottom: 16px; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4d8c9f4..e641240 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -11,6 +11,11 @@ padding: 16px 0 32px 0; color: $gray-100; + + @include mq(md, max) { + font-size: 20px; + line-height: 32px; + } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 7670dd6..3c6ea2e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -34,7 +34,7 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - mobile: 768px, + sm: 768px, md: 1026px, xl: 1920px ) !default;