From fb773d6f672372265c0fc2d536c50e98d31b9ace Mon Sep 17 00:00:00 2001 From: vitorsoaresdev Date: Thu, 9 Feb 2023 12:17:44 -0300 Subject: [PATCH] feat: adiciona responsividade mobile --- styles/css/vtex.slider-layout.css | 21 +++++++++ styles/css/vtex.store-components.css | 43 +++++++++++++++++-- styles/css/vtex.tab-layout.css | 3 +- .../pages/product/vtex.slider-layout.scss | 17 ++++++++ .../pages/product/vtex.store-components.scss | 37 ++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 3 +- 6 files changed, 112 insertions(+), 12 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 0cbad80..d1c8ac2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -14,6 +14,17 @@ margin-bottom: 64px; padding: 0 67px; } +@media only screen and (max-width: 1025px) { + .sliderLayoutContainer { + padding: 0 63px; + } +} +@media only screen and (max-width: 767px) { + .sliderLayoutContainer { + padding: 0 59px; + margin-bottom: 32px; + } +} .sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { gap: 16px; } @@ -51,6 +62,11 @@ content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); padding: 0 40px 0 0; } +@media only screen and (max-width: 767px) { + .sliderRightArrow::after { + padding: 0 48px 0 0; + } +} .sliderLeftArrow { visibility: hidden; @@ -64,4 +80,9 @@ .sliderLeftArrow::before { display: block; } +} +@media only screen and (max-width: 767px) { + .sliderLeftArrow::before { + padding: 0 0 0 48px; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 173a5f8..3688634 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -402,7 +402,7 @@ @media only screen and (max-width: 399px) { .shippingTable .shippingTableRow .shippingTableHeadDeliveryName { width: auto; - margin-right: 32px; + margin-right: 48px; } } .shippingTable .shippingTableRow .shippingTableHeadDeliveryEstimate { @@ -428,7 +428,7 @@ @media only screen and (max-width: 399px) { .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice { width: auto; - margin-right: 32px; + margin-right: 40px; } } .shippingTable .shippingTableRow .shippingTableHeadDeliveryPrice::after { @@ -479,12 +479,13 @@ } @media only screen and (max-width: 399px) { .shippingTableBody .shippingTableCellDeliveryName { - width: 82px; - margin-right: 20px; + width: 97px; + margin-right: 21px; } } @media only screen and (max-width: 399px) { .shippingTableBody .shippingTableCellDeliveryPrice { + width: 55px; margin-right: 32px; } } @@ -614,6 +615,11 @@ background: #000000; color: #fff; } +@media only screen and (max-width: 767px) { + .newsletter { + height: 220px; + } +} .newsletter .container { display: flex; justify-content: center; @@ -631,6 +637,11 @@ max-width: 1024px; } } +@media only screen and (max-width: 767px) { + .newsletter .container .form { + padding-bottom: 32px; + } +} .newsletter .container .form .label { display: flex; flex-direction: column; @@ -647,11 +658,23 @@ line-height: 25px; color: #929292; } +@media only screen and (max-width: 767px) { + .newsletter .container .form .label::after { + font-size: 16px; + line-height: 22px; + } +} @media only screen and (max-width: 1025px) { .newsletter :global(.vtex-store-components-3-x-inputGroup) { padding: 16px 16px 0; } } +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-store-components-3-x-inputGroup) { + display: flex; + padding: 0; + } +} .newsletter .buttonContainer { padding: 0; } @@ -665,6 +688,12 @@ line-height: 19px; color: #fff; } +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-button) { + font-size: 14px; + line-height: 19px; + } +} .newsletter :global(.vtex-input-prefix__group) { border: none; border-radius: 0; @@ -677,4 +706,10 @@ font-size: 18px; line-height: 25px; color: #929292; +} +@media only screen and (max-width: 767px) { + .newsletter :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0130c89..9db8182 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,10 +24,9 @@ padding: 16px 0 32px 0; color: #575757; } -@media only screen and (max-width: 1025px) { +@media only screen and (max-width: 767px) { .container--structure::after { font-size: 20px; - line-height: 32px; } } .container--structure :global(.vtex-store-components-3-x-productImageTag--img-description--main) { diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 575d622..1312782 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,6 +2,15 @@ margin-bottom: 64px; padding: 0 67px; + @include mq(md, max) { + padding: 0 63px; + } + + @include mq(sm, max) { + padding: 0 59px; + margin-bottom: 32px; + } + :global(.vtex-slider-layout-0-x-sliderTrack--carousel) { gap: 16px; } @@ -40,6 +49,10 @@ visibility: visible; content: url(https://agenciamagma.vtexassets.com/arquivos/right-arrow-vitor-soares.png); padding: 0 40px 0 0; + + @include mq(sm, max) { + padding: 0 48px 0 0; + } } } @@ -54,5 +67,9 @@ visibility: hidden; @include mq(md, max) { display: block; } + + @include mq(sm, max) { + padding: 0 0 0 48px; + } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e4edfcd..3ce4f72 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -461,7 +461,7 @@ @include mq(xs, max) { width: auto; - margin-right: 32px; + margin-right: 48px; } } @@ -490,7 +490,7 @@ @include mq(xs, max) { width: auto; - margin-right: 32px; + margin-right: 40px; } &::after { @@ -555,13 +555,14 @@ .shippingTableCellDeliveryName { @include mq(xs, max) { - width: 82px; - margin-right: 20px; + width: 97px; + margin-right: 21px; } } .shippingTableCellDeliveryPrice { @include mq(xs, max) { + width: 55px; margin-right: 32px; } } @@ -733,6 +734,10 @@ background: $black; color: $white; + @include mq(sm, max) { + height: 220px; + } + .container { display: flex; justify-content: center; @@ -751,6 +756,10 @@ max-width: 1024px; } + @include mq(sm, max) { + padding-bottom: 32px; + } + .label { display: flex; flex-direction: column; @@ -768,6 +777,11 @@ line-height: 25px; color: $gray; + + @include mq(sm, max) { + font-size: 16px; + line-height: 22px; + } } } } @@ -777,6 +791,11 @@ @include mq(md, max) { padding: 16px 16px 0; } + + @include mq(sm, max) { + display: flex; + padding: 0; + } } .buttonContainer { @@ -793,6 +812,11 @@ line-height: 19px; color: $white; + + @include mq(sm, max) { + font-size: 14px; + line-height: 19px; + } } :global(.vtex-input-prefix__group) { @@ -809,5 +833,10 @@ line-height: 25px; color: $gray; + + @include mq(sm, max) { + font-size: 12px; + line-height: 16px; + } } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index ada818a..199df68 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -12,9 +12,8 @@ color: $gray-100; - @include mq(md, max) { + @include mq(sm, max) { font-size: 20px; - line-height: 32px; } }