From f535767a228c28949e38024f37ce48aa4c08e190 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 7 Feb 2023 15:41:49 -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 | 66 +++++++++++++++++-- styles/css/vtex.add-to-cart-button.css | 5 ++ styles/css/vtex.breadcrumb.css | 15 +++++ styles/css/vtex.product-identifier.css | 5 ++ styles/css/vtex.store-components.css | 34 ++++++++++ .../product/vtex.add-to-cart-button.scss | 4 ++ .../sass/pages/product/vtex.breadcrumb.scss | 10 +++ .../product/vtex.product-identifier.scss | 4 ++ .../pages/product/vtex.store-components.scss | 30 +++++++++ 9 files changed, 168 insertions(+), 5 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 632206c..f6dd5d4 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -10,6 +10,27 @@ grid-template-columns: 48.8% 51.2%; padding-bottom: 16px; } +@media screen and (min-width: 1920px) { + [class*="html--product-main"], + [class*="html--product-availability"] { + width: 71.2%; + grid-template-columns: 50.5% 49.5%; + } +} +@media screen and (max-width: 1024px) { + [class*="html--product-main"], + [class*="html--product-availability"] { + display: flex; + flex-direction: column; + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + [class*="html--product-main"], + [class*="html--product-availability"] { + width: 79%; + } +} [class*="html--stack"] { grid-area: 1/1; @@ -20,9 +41,10 @@ grid-area: 1/2; margin-left: 32px; } - -[class*="html--right-col"] .vtex-store-components-3-x-container { - padding: 0; +@media screen and (max-width: 1024px) { + [class*="html--right-col"] { + margin-left: 0; + } } [class*="html--buy-button"] { @@ -40,6 +62,12 @@ display: block !important; } +@media screen and (max-width: 768px) { + [class*="html--add-to-cart-button"] button { + height: 74px !important; + } +} + [class*="html--product-quantity-cart-button"] { display: flex; flex-direction: row; @@ -50,6 +78,12 @@ height: 49px; } +@media screen and (max-width: 768px){ + [class*="html--product-quantity-cart-button"] { + flex-direction: column; + } +} + [class*="html--product-quantity-cart-button"] input{ height: 49px; width: 32px; @@ -73,18 +107,35 @@ display: block !important; } +@media screen and (max-width: 768px) { + [class*="html--shipping-simulator"] { + padding-top: 81px; + } +} + [class*="html--shipping-simulator"] button { background-color: #000000; border-radius: 0; border: none; width: 49px; - height: 49px; + height: 49px !important; position: absolute; - left: 228px; display: block !important; } +@media screen and (min-width: 769px) { + [class*="html--shipping-simulator"] button { + left: 228px; + } +} + +@media screen and (max-width: 768px) { + [class*="html--shipping-simulator"] button { + right: 0; + } +} + [class*="html--shipping-simulator"] a { color: #000000; } @@ -112,3 +163,8 @@ margin-top: 8px; margin-bottom: 16px; } + +[class*="html--description"] { + position: relative; + top: 9px; +} diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css index cd1bd0d..d7b55f2 100644 --- a/styles/css/vtex.add-to-cart-button.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -12,4 +12,9 @@ font-size: 18px !important; line-height: 25px !important; color: #FFFFFF !important; +} +@media screen and (max-width: 768px) { + .buttonText { + width: 168px; + } } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 1a06a0b..c46f445 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -12,6 +12,21 @@ margin: 0 auto; padding: 0 0 16px 0; } +@media screen and (min-width: 1920px) { + .container { + width: 71.2%; + } +} +@media screen and ((min-width: 769) and (max-width: 1024px)) { + .container { + width: 92.1875%; + } +} +@media screen and (max-width: 768px) { + .container { + width: 79%; + } +} .container .homeIcon { display: none; } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 1453a03..09e7e42 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -24,4 +24,9 @@ justify-content: right; margin-top: 8px; margin-bottom: 24px; +} +@media screen and (max-width: 1024px) { + .product-identifier { + justify-content: left; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e4fd5f5..1fef91d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -12,6 +12,11 @@ background: red; } +.container { + padding-left: 0; + padding-right: 0; +} + .thumbImg, .figure, .carouselThumbBorder { @@ -28,6 +33,11 @@ .carouselGaleryThumbs { margin: 0 !important; } +@media screen and (max-width: 639px) { + .carouselGaleryThumbs { + display: inline-flex; + } +} .productImageTag, .productImageTag--main { @@ -47,6 +57,12 @@ .productNameContainer--quickview { text-align: right; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + padding-top: 32px; + } +} /* .productDescriptionTitle { @@ -227,6 +243,11 @@ align-items: center; padding: 0; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + width: 79vw; + } +} .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { font-weight: 400; font-size: 12px; @@ -237,11 +258,24 @@ top: 43px; left: 312px; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + top: 85px; + width: 79vw; + left: 0; + text-align: right; + } +} .shippingContainer :global(.vtex-input-prefix__group) { height: 49px; width: 231px; border-radius: 0; } +@media screen and (max-width: 768px) { + .shippingContainer :global(.vtex-input-prefix__group) { + width: 79vw; + } +} .shippingContainer :global(.vtex-input__error) { position: absolute; margin: 2px; diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss index e94a41b..7914ef6 100644 --- a/styles/sass/pages/product/vtex.add-to-cart-button.scss +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -3,4 +3,8 @@ font-size: 18px !important; line-height: 25px !important; color: #FFFFFF !important; + + @media screen and (max-width: 768px){ + width: 168px; + } } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 80548a9..9653a40 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -3,6 +3,16 @@ margin: 0 auto; padding: 0 0 16px 0; + @media screen and (min-width: 1920px) { + width: 71.2%; + } + @media screen and ((min-width: 769) and (max-width: 1024px)) { + width: 92.1875%; + } + @media screen and (max-width: 768px) { + width: 79%; + } + .homeIcon { display: none; } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 98022d1..cc67671 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -15,4 +15,8 @@ justify-content: right; margin-top: 8px; margin-bottom: 24px; + + @media screen and (max-width: 1024px) { + justify-content: left; + } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 64347d3..7a85604 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,6 +2,11 @@ background: red; } +.container { + padding-left: 0; + padding-right: 0; +} + .thumbImg, .figure, .carouselThumbBorder { @@ -17,6 +22,10 @@ .carouselGaleryThumbs { margin: 0 !important; + + @media screen and (max-width: 639px) { + display: inline-flex; + } } .productImageTag, @@ -36,7 +45,13 @@ .productNameContainer--quickview{ text-align: right; + + @media screen and (max-width: 1024px) { + text-align: left; + padding-top: 32px; + } } + /* .productDescriptionTitle { font-weight: 400; @@ -236,6 +251,10 @@ display: flex; align-items: center; padding: 0; + + @media screen and (max-width: 768px) { + width: 79vw; + } } :global(.vtex-address-form__postalCode-forgottenURL) { @@ -248,12 +267,23 @@ position: absolute; top: 43px; left: 312px; + + @media screen and (max-width: 768px) { + top: 85px; + width: 79vw; + left: 0; + text-align: right; + } } :global(.vtex-input-prefix__group ) { height: 49px; width: 231px; border-radius: 0; + + @media screen and (max-width: 768px) { + width: 79vw; + } } :global(.vtex-input__error) {