From 15b7fae3e1cd84fa120c41a61a38885b94cd402b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 8 Feb 2023 03:19:50 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20faz=20adapta=C3=A7=C3=B5es=20para=20tel?= =?UTF-8?q?as=20mobile,=20tablet=20e=20ultrawide?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 23 ++++++++ styles/css/vtex.store-components.css | 56 ++++++++++++++++++- styles/css/vtex.tab-layout.css | 31 ++++++++++ .../pages/product/vtex.store-components.scss | 46 ++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 26 +++++++++ 5 files changed, 180 insertions(+), 2 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index f1004bc..7ddc590 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -168,10 +168,28 @@ width: 100%; margin-left: 32px; } +@media screen and (max-width: 1024px) { + [class*="html--description"] { + margin-left: 0; + margin-top: 16px; + } +} [class*="html--product-description"] { display: flex; } +@media screen and ((min-width: 769) and (max-width: 1024px)) { + [class*="html--product-description"] { + margin-top: 16px; + } +} +@media screen and (max-width: 768px) { + [class*="html--product-description"] { + position: relative; + top: 9px; + margin-top: 16px; + } +} [class*="html--product-description"] .contentItem{ display: flex; @@ -187,6 +205,11 @@ color: #BFBFBF; height: 38px; } +@media screen and (min-width: 1920px) { + [class*="html--product-description"] button { + font-size: 24px; + } +} [class*="html--product-description"] button:hover { border: transparent; background-color: transparent; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 98c95e7..4c889a6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -271,6 +271,16 @@ padding: 0; border: none; } +@media screen and (max-width: 1024px) { + .shippingTable { + margin-top: 32px; + } +} +@media screen and (max-width: 768px) { + .shippingTable { + padding-top: 16px; + } +} .shippingTableHead { display: table-header-group; @@ -304,6 +314,21 @@ display: grid; grid-template-columns: 20% 15% 65%; } +@media screen and (min-width: 1025px) and (max-width: 1100px) { + .shippingTableRow { + grid-template-columns: 25% 20% 65%; + } +} +@media screen and (min-width: 461px) and (max-width: 768px) { + .shippingTableRow { + grid-template-columns: 32% 25% 43%; + } +} +@media screen and (max-width: 460px) { + .shippingTableRow { + grid-template-columns: 37% 25% 38%; + } +} .shippingTableCellDeliveryName, .shippingTableCellDeliveryName { @@ -329,7 +354,12 @@ display: flex; align-items: center; color: #AFAFAF; - padding: 0 0 15px 0; + padding: 0; +} + +.shippingTableBody { + display: grid; + gap: 16px; } .shippingTableRadioBtn { @@ -418,6 +448,17 @@ height: 40px; margin-bottom: 8px; } +@media screen and (min-width: 1920px) { + .productDescriptionTitle { + font-size: 32px; + margin-bottom: 16px; + } +} +@media screen and (max-width: 1024px) { + .productDescriptionTitle { + font-size: 20px; + } +} .productDescriptionText { font-weight: 400; @@ -425,6 +466,19 @@ line-height: 22px; color: #929292; } +@media screen and (min-width: 1920px) { + .productDescriptionText { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { + .productDescriptionText { + font-size: 14px; + line-height: 19px; + padding-bottom: 16px; + } +} .listContainer--list-product { display: flex; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c6007ff..4b2663d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,6 +10,11 @@ .contentItem { display: flex; } +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + } +} .listContainer--list-product { width: 94.4444%; @@ -28,6 +33,15 @@ width: 92.1875%; } } +@media screen and (max-width: 1024px) { + .listContainer--list-product { + flex-direction: column; + border-top: 1px solid #BFBFBF; + gap: 16px; + padding-top: 16px; + padding-bottom: 16px; + } +} @media screen and (max-width: 768px) { .listContainer--list-product { width: 79%; @@ -43,6 +57,7 @@ @media screen and (min-width: 1920px) { .contentContainer--content-product { width: 69.375%; + padding-top: 64px; } } @media screen and ((min-width: 769) and (max-width: 1024px)) { @@ -50,6 +65,12 @@ width: 92.1875%; } } +@media screen and (max-width: 1024px) { + .contentContainer--content-product { + padding-top: 16px; + border-bottom: 1px solid #BFBFBF; + } +} @media screen and (max-width: 768px) { .contentContainer--content-product { width: 79%; @@ -64,6 +85,11 @@ .listItemActive { border-bottom: 2px solid #000000; } +@media screen and (max-width: 1024px) { + .listItemActive { + border-bottom: none; + } +} .listItemActive :last-child { background-color: transparent; color: #000000; @@ -73,6 +99,11 @@ padding-top: 0 !important; padding-bottom: 0 !important; } +@media screen and (min-width: 1920px) { + .listItemActive :last-child { + font-size: 24px; + } +} .listItemActive :last-child:hover { border-bottom: none; color: #000000; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index c5bd2de..06e105c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -280,6 +280,13 @@ margin: 16px 0 0 0; padding: 0; border: none; + + @media screen and (max-width: 1024px) { + margin-top: 32px; + } + @media screen and (max-width: 768px) { + padding-top: 16px; + } } .shippingTableHead { @@ -314,6 +321,18 @@ .shippingTableRow { display: grid; grid-template-columns: 20% 15% 65%; + + @media screen and (min-width: 1025px) and (max-width: 1100px) { + grid-template-columns: 25% 20% 65%; + } + + @media screen and (min-width: 461px) and (max-width: 768px) { + grid-template-columns: 32% 25% 43%; + } + + @media screen and (max-width: 460px) { + grid-template-columns: 37% 25% 38%; + } } .shippingTableCellDeliveryName, @@ -340,7 +359,12 @@ display: flex; align-items: center; color: #AFAFAF; - padding: 0 0 15px 0; + padding: 0; +} + +.shippingTableBody { + display: grid; + gap: 16px; } .shippingTableRadioBtn { @@ -436,6 +460,15 @@ color: #575757; height: 40px; margin-bottom: 8px; + + @media screen and (min-width: 1920px) { + font-size: 32px; + margin-bottom: 16px; + } + + @media screen and (max-width: 1024px) { + font-size: 20px; + } } .productDescriptionText { @@ -443,6 +476,17 @@ font-size: 16px; line-height: 22px; color: #929292; + + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + padding-bottom: 16px; + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 3f25a22..ca01323 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,9 @@ .contentItem { display: flex; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } } .listContainer--list-product{ @@ -18,6 +22,14 @@ width: 92.1875%; } + @media screen and (max-width: 1024px) { + flex-direction: column; + border-top: 1px solid #BFBFBF; + gap: 16px; + padding-top: 16px; + padding-bottom: 16px; + } + @media screen and (max-width: 768px) { width: 79%; } @@ -32,12 +44,18 @@ @media screen and (min-width: 1920px) { width: 69.375%; + padding-top: 64px; } @media screen and ((min-width: 769) and (max-width: 1024px)) { width: 92.1875%; } + @media screen and (max-width: 1024px) { + padding-top: 16px; + border-bottom: 1px solid #BFBFBF; + } + @media screen and (max-width: 768px) { width: 79%; } @@ -51,6 +69,10 @@ .listItemActive { border-bottom: 2px solid #000000; + @media screen and (max-width: 1024px) { + border-bottom: none; + } + :last-child { background-color: transparent; color: #000000; @@ -60,6 +82,10 @@ padding-top: 0 !important; padding-bottom: 0 !important; + @media screen and (min-width: 1920px) { + font-size: 24px; + } + &:hover { border-bottom: none; color: #000000;