From 14f3177d732ea54a73f4bc631719055d8e99f649 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 7 Feb 2023 22:08:34 -0300 Subject: [PATCH] feat: css mobile --- react/components/Html/style.css | 21 ++++++- store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.flex-layout.css | 16 +++++ styles/css/vtex.product-identifier.css | 7 ++- styles/css/vtex.store-components.css | 63 +++++++++++++++++-- styles/css/vtex.tab-layout.css | 39 +++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 19 ++++++ .../product/vtex.product-identifier.scss | 8 ++- .../pages/product/vtex.store-components.scss | 56 +++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 37 ++++++++++- 10 files changed, 250 insertions(+), 19 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index b04928c..36dde0c 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,6 +1,5 @@ [class*='html--Quantity-Button'] { display: flex; - align-items: center; gap: 10px; margin-bottom: 16px; } @@ -22,3 +21,23 @@ display: flex; flex-direction: column; } + +[class*='html--codigo'] { + margin-bottom: 16px; +} + +[class*='html--product-installments'] { + margin-bottom: 8px; +} + +@media (max-width: 576px) { + [class*='html--Quantity-Button'] { + flex-direction: column; + } +} + +@media (min-width: 577px) { + [class*='html--Quantity-Button'] { + align-items: center; + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ae85142..15e6c60 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -130,7 +130,8 @@ "html#product-installments": { "props": { - "testId": "product-installments" + "testId": "product-installments", + "blockClass": "product-installments" }, "children": ["product-installments"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 487946c..083e71e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -16,6 +16,9 @@ flex-direction: column; } } +:global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; +} :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-productImageTag) { max-height: none; } @@ -30,7 +33,20 @@ display: flex; } +@media (max-width: 1024px) { + .flexColChild--image-description :global(.vtex-store-components-3-x-imageElement) { + width: 100%; + } +} + .flexRowContent { margin-bottom: 0; padding-bottom: 0; +} + +@media (max-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 35e807c..7adbacc 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -9,7 +9,7 @@ /* Grid breakpoints */ .product-identifier { display: flex; - justify-content: flex-end; + justify-content: flex-start; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -18,6 +18,11 @@ text-align: right; color: rgba(146, 146, 146, 0.48); } +@media (min-width: 1025px) { + .product-identifier { + justify-content: flex-end; + } +} .product-identifier .product-identifier__label, .product-identifier .product-identifier__separator { display: none; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a7c5c0e..5a58407 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -92,22 +92,30 @@ } } -.carouselGaleryThumbs :first-child { - height: 90px; +.carouselGaleryThumbs { + width: 47.67%; +} +@media (min-width: 1025px) { + .carouselGaleryThumbs { + width: 68.02%; + } } .carouselGaleryThumbs :first-child :first-child { gap: 16px !important; } .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 13.605%; height: fit-content !important; max-height: 90px; margin: 0; } +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { + border-radius: 8px; + min-height: 90px; +} .productBrand { display: flex; - justify-content: flex-end; + justify-content: flex-start; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 300; @@ -115,10 +123,16 @@ line-height: 34px; color: #575757; } +@media (min-width: 1025px) { + .productBrand { + justify-content: flex-end; + } +} .skuSelectorContainer { display: flex; flex-direction: column-reverse; + margin: 16px 0; } .skuSelectorContainer .frameAround { width: 43px; @@ -133,12 +147,18 @@ .skuSelectorContainer .skuSelectorInternalBox { border-radius: 50%; } +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin: 0; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer { margin: 0; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList { margin-left: 0 !important; } +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + margin: 0; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { font-size: 0; @@ -235,6 +255,11 @@ display: flex; padding-bottom: 16px; } +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { display: flex; flex-direction: column; @@ -280,6 +305,12 @@ left: 312px; top: 41.5px; } +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: unset; + justify-content: right; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: #000; } @@ -325,7 +356,6 @@ margin-bottom: 15px; font-family: "Open Sans", sans-serif; font-style: normal; - font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; @@ -333,6 +363,7 @@ } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { order: 2; + font-weight: 400 !important; } .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { font-size: 0; @@ -344,6 +375,11 @@ font-weight: 400; line-height: 19px; } +.shippingTable .shippingTableBody { + display: flex; + flex-direction: column; + gap: 15px; +} .shippingTable .shippingTableBody .shippingTableRow { display: flex; } @@ -355,7 +391,6 @@ line-height: 16px; align-items: center; color: #afafaf; - margin-bottom: 15px; } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { order: 2; @@ -443,4 +478,20 @@ line-height: 25px; text-transform: uppercase; padding: 12px; +} + +@media (max-width: 1024px) { + .productDescriptionContainer { + position: relative; + padding: 16px 0; + } + .productDescriptionContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2358719..7a7ef75 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -23,6 +23,25 @@ position: relative; bottom: 9px; } +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + } + .listContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + .listContainer::after { + bottom: 0px; + } +} .listItem :global(.vtex-button) { background-color: white; @@ -37,14 +56,32 @@ border-radius: 0; } +@media (max-width: 1024px) { + .listItem { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + } +} + .listItemActive :global(.vtex-button) { background-color: white; color: black; border: 0; - border-bottom: 2px black solid; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 38px; +} +@media (min-width: 1025px) { + .listItemActive :global(.vtex-button) { + border-bottom: 2px black solid; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 2785ab7..a413ca1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -8,6 +8,10 @@ } } + :global(.vtex-store-components-3-x-carouselContainer) { + margin-bottom: 32px; + } + :global(.vtex-store-components-3-x-productImageTag) { max-height: none; } @@ -27,7 +31,22 @@ } } +.flexColChild--image-description { + :global(.vtex-store-components-3-x-imageElement) { + @media (max-width: 1024px) { + width: 100%; + } + } +} + .flexRowContent { margin-bottom: 0; padding-bottom: 0; } + +.stretchChildrenWidth { + @media (max-width: 1024px) { + width: 100% !important; + padding: 0; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 8bcca6b..301439e 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,8 +1,8 @@ .product-identifier { display: flex; - justify-content: flex-end; + justify-content: flex-start; - font-family: "Open Sans", sans-serif; + font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; @@ -11,6 +11,10 @@ color: rgba(146, 146, 146, 0.48); + @media (min-width: 1025px) { + justify-content: flex-end; + } + .product-identifier__label, .product-identifier__separator { display: none; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f3172d8..4215edc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -87,17 +87,25 @@ } .carouselGaleryThumbs { + width: 47.67%; + @media (min-width: 1025px) { + width: 68.02%; + } :first-child { - height: 90px; - :first-child { gap: 16px !important; .productImagesThumb { - width: 13.605%; height: fit-content !important; max-height: 90px; margin: 0; + + .figure { + .thumbImg { + border-radius: 8px; + min-height: 90px; + } + } } } } @@ -105,7 +113,7 @@ .productBrand { display: flex; - justify-content: flex-end; + justify-content: flex-start; font-family: 'Open Sans', sans-serif; font-style: normal; @@ -114,11 +122,16 @@ line-height: 34px; color: #575757; + + @media (min-width: 1025px) { + justify-content: flex-end; + } } .skuSelectorContainer { display: flex; flex-direction: column-reverse; + margin: 16px 0; .frameAround { width: 43px; @@ -136,10 +149,14 @@ } .skuSelectorSubcontainer--cor { + margin: 0; .skuSelectorNameContainer { margin: 0; .skuSelectorOptionsList { margin-left: 0 !important; + .skuSelectorItem { + margin: 0; + } } .skuSelectorTextContainer { .skuSelectorName, @@ -252,6 +269,10 @@ display: flex; padding-bottom: 16px; + @media (max-width: 376px) { + flex-direction: column; + } + :global(.vtex-input) { display: flex; flex-direction: column; @@ -303,6 +324,10 @@ padding: 0; left: 312px; top: 41.5px; + @media (max-width: 376px) { + position: unset; + justify-content: right; + } :last-child { color: #000; @@ -359,7 +384,6 @@ font-family: 'Open Sans', sans-serif; font-style: normal; - font-weight: 400; font-size: 14px; line-height: 19px; color: #202020; @@ -367,6 +391,7 @@ .shippingTableHeadDeliveryEstimate { order: 2; + font-weight: 400 !important; } .shippingTableHeadDeliveryPrice { font-size: 0; @@ -382,6 +407,10 @@ } .shippingTableBody { + display: flex; + flex-direction: column; + gap: 15px; + .shippingTableRow { display: flex; @@ -393,7 +422,6 @@ line-height: 16px; align-items: center; color: #afafaf; - margin-bottom: 15px; } .shippingTableCellDeliveryEstimate { @@ -502,3 +530,19 @@ } } } + +.productDescriptionContainer { + @media (max-width: 1024px) { + position: relative; + padding: 16px 0; + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: absolute; + bottom: 0; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index a1f9c43..9c689eb 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -14,6 +14,24 @@ position: relative; bottom: 9px; } + @media (max-width: 1024px) { + flex-direction: column; + padding: 0 40px 16px; + margin-bottom: 0px; + + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + &::after { + bottom: 0px; + } + } } .listItem :global(.vtex-button) { background-color: white; @@ -27,14 +45,31 @@ text-transform: capitalize; border-radius: 0; } +.listItem { + @media (max-width: 1024px) { + margin: 0; + padding: 0; + :global(.vtex-button) { + margin: 0; + padding: 0; + :global(.vtex-button__label) { + padding: 0; + } + } + } +} + .listItemActive :global(.vtex-button) { background-color: white; color: black; border: 0; - border-bottom: 2px black solid; font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 38px; + + @media (min-width: 1025px) { + border-bottom: 2px black solid; + } }