diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c85f564..1706b60 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -312,7 +312,7 @@ "props": { "itemsPerPage": { "desktop": 4, - "tablet": 1, + "tablet": 3, "phone": 1 }, "infinite": true, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c807690..c2619c5 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,9 +9,22 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ +.flexRowContent { + margin: 8px 0 0 0px; + padding: 0; +} + +:global(.vtex-stack-layout-0-x-stackItem) .flexRow { + margin: 0; +} + +.flexRow--buyButton .flexRowContent { + margin: 0 0 0 0 !important; + padding: 0; +} + .flexRowContent--cart { display: flex; - align-items: center; justify-content: center; margin-bottom: 25px; } @@ -29,4 +42,11 @@ font-size: 18px; line-height: 25px; color: #ffffff; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .flexRowContent { + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b8cd188 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,27 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans"; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..f5ba8ae 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,10 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 55f8050..d86410a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,20 +10,22 @@ /* Grid breakpoints */ .container { max-width: 100%; - margin: 0 0 0 0 !important; + margin: 0 40px 0 40px !important; } .productImageTag { max-height: none !important; } -.thumbImg { - width: 86%; - margin: 0; +/* +.productImagesGallerySlide { + .productImageTag { + width: 800px; + } } - +*/ .productImagesThumb { - height: auto !important; + margin-right: 16px; } .productBrand { @@ -159,6 +161,99 @@ top: 8px; } +.shippingTableRadioBtn { + display: none; +} + +.shippingTableHead { + display: grid; + position: relative; + right: 60px; +} + +.shippingTable { + border: none; + grid-template-columns: none !important; +} + +.shippingTableRow { + display: grid; + grid-template-columns: 200px 200px 200px; +} + +.shippingTableCellDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryPrice { + order: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableCellDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTableHeadDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} + +.shippingTableHeadDeliveryPrice { + order: 1; + font-size: 0; +} +.shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} + +.shippingTableHeadDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} + .productDescriptionContainer .productDescriptionTitle { font-family: "Open Sans"; font-style: normal; @@ -176,24 +271,97 @@ color: #929292; } +/* .newsletter { - margin-top: 64px; -} -.newsletter .container { - display: flex; - height: 175px; - padding: 0 0 0 0; background: black; - align-items: center; - justify-content: center; -} -.newsletter .container .label { + border-bottom: 1px solid #ffffff; + margin: 0; display: flex; flex-direction: column; - font-size: 0; + justify-content: center; + align-items: center; + .container { + display: flex; + //height: 175px; + //padding: 0 0 0 0; + //background: black; + align-items: center; + justify-content: center; + .label { + display: flex; + flex-direction: column; + font-size: 0; + &::before { + content: "Assine nossa Newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + } + &::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } + } + :global(.vtex-input-prefix__group) { + display: flex; + justify-content: center; + width: 774px; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + } + :global(.vtex-button) { + position: relative; + left: 145px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + + :global(.vtex-button__label) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + border: 1px solid #000000; + text-transform: uppercase; + } + } + } } -.newsletter .container .label::before { - content: "Assine nossa Newsletter"; +*/ +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.label { font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -201,49 +369,41 @@ line-height: 38px; text-align: center; color: #ffffff; + border: none; } -.newsletter .container .label::after { + +.label::after { content: "Receba ofertas e novidades por e-mail"; - font-family: "Open Sans"; + font-family: sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 25px; text-align: center; color: #929292; -} -.newsletter .container :global(.vtex-input-prefix__group) { display: flex; - justify-content: center; - width: 774px; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; + flex-direction: column; + gap: 16px; + margin-top: 16px; } -.newsletter .container :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; -} -.newsletter .container :global(.vtex-button) { - position: relative; - left: 145px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; -} -.newsletter .container :global(.vtex-button):hover { - border-bottom: 5px solid #bfbfbf; -} -.newsletter .container :global(.vtex-button) :global(.vtex-button__label) { - font-family: "Open Sans"; + +.productDescriptionTitle { + font-family: sans-serif; font-style: normal; - font-weight: 700; - font-size: 14px; - line-height: 19px; - text-align: center; - color: #ffffff; - border: 1px solid #000000; - text-transform: uppercase; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .container { + display: flex; + flex-direction: column; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d63cf56..2150530 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -9,7 +9,7 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ .container { - margin-bottom: 16px; + padding: 0 40px 16px 40px; } .listContainer { @@ -61,4 +61,20 @@ display: flex; flex-direction: row; gap: 32px; +} + +@media screen and (max-width: 1024px) and (min-width: 768px) { + .listContainer { + display: flex; + flex-direction: column; + } + .contentItem { + display: flex; + flex-direction: column; + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } + .productDescriptionText { + text-align: justify; + } } \ 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 4108e84..8a1039d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,6 +1,24 @@ +.flexRow { +} +.flexRowContent { + margin: 8px 0 0 0px; + padding: 0; +} +:global(.vtex-stack-layout-0-x-stackItem) { + .flexRow { + margin: 0; + } +} +.flexRow--buyButton { + .flexRowContent { + margin: 0 0 0 0 !important; + padding: 0; + } +} + .flexRowContent--cart { display: flex; - align-items: center; + justify-content: center; margin-bottom: 25px; .flexRow--buyButton { @@ -21,3 +39,9 @@ } } } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .flexRowContent { + display: flex; + flex-direction: column; + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..0d16003 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,17 @@ +.sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..595f5d8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,2 @@ +@media screen and (max-width: 1024px) and (min-width: 768px) { +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8052275..a233b64 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -10,3 +10,5 @@ display: flex; justify-content: center; } +@media screen and (max-width: 1024px) and (min-width: 768px) { +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 756b124..286cbfb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,20 +1,22 @@ .container { max-width: 100%; - margin: 0 0 0 0 !important; + margin: 0 40px 0 40px !important; } - .productImageTag { max-height: none !important; } - -.thumbImg { - width: 86%; - margin: 0; +/* +.productImagesGallerySlide { + .productImageTag { + width: 800px; + } } +*/ .productImagesThumb { - height: auto !important; + margin-right: 16px; } + .productBrand { display: flex; justify-content: flex-end; @@ -159,7 +161,92 @@ top: 8px; } } +.shippingTableRadioBtn { + display: none; +} +.shippingTableHead { + display: grid; + position: relative; + right: 60px; +} +.shippingTable { + //display: grid; + border: none; + //flex-direction: column; + grid-template-columns: none !important; +} +.shippingTableRow { + display: grid; + grid-template-columns: 200px 200px 200px; +} +.shippingTableCellDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTableCellDeliveryPrice { + order: 1; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTableCellDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingTableHeadDeliveryName { + order: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTableHeadDeliveryPrice { + order: 1; + font-size: 0; + &::before { + content: "FRETE"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + } +} +.shippingTableHeadDeliveryEstimate { + order: 2; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} //Estilização da descrição do produto .productDescriptionContainer { .productDescriptionTitle { @@ -179,14 +266,20 @@ color: #929292; } } - +/* .newsletter { - margin-top: 64px; + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; .container { display: flex; - height: 175px; - padding: 0 0 0 0; - background: black; + //height: 175px; + //padding: 0 0 0 0; + //background: black; align-items: center; justify-content: center; .label { @@ -252,3 +345,57 @@ } } } +*/ +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + border: none; +} +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; +} + +.productDescriptionTitle { + font-family: sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} + +.productDescriptionText { + text-align: left; +} +@media screen and (max-width: 1024px) and (min-width: 768px) { + .container { + display: flex; + flex-direction: column; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e91615b..6678e7d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,5 @@ .container { - margin-bottom: 16px; + padding: 0 40px 16px 40px; } .listContainer { display: flex; @@ -52,3 +52,18 @@ flex-direction: row; gap: 32px; } +@media screen and (max-width: 1024px) and (min-width: 768px) { + .listContainer { + display: flex; + flex-direction: column; + } + .contentItem { + display: flex; + flex-direction: column; + border-bottom: 1px solid #b9b9b9; + padding-bottom: 16px; + } + .productDescriptionText { + text-align: justify; + } +}