From a3392fd35d3b5e2f1c2774da28dc48e319830ce5 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 18:09:03 -0300 Subject: [PATCH 1/5] fix: Consertado as margens principais do produto --- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.flex-layout.css | 13 +++++++++++++ styles/css/vtex.store-components.css | 11 +---------- styles/css/vtex.tab-layout.css | 2 +- styles/sass/pages/product/vtex.flex-layout.scss | 12 ++++++++++++ .../sass/pages/product/vtex.store-components.scss | 14 ++++---------- styles/sass/pages/product/vtex.tab-layout.scss | 2 +- 7 files changed, 33 insertions(+), 23 deletions(-) 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..c59897a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,6 +9,19 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ +.flexRow { + margin: 0 40px; +} + +:global(.vtex-stack-layout-0-x-stackItem) .flexRow { + margin: 0; +} + +.flexRowContent { + margin: 8px 0 0 0; + padding: 0; +} + .flexRowContent--cart { display: flex; align-items: center; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 55f8050..ff19d1c 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,19 +13,10 @@ margin: 0 0 0 0 !important; } -.productImageTag { +.carouselContainer .productImageTag { max-height: none !important; } -.thumbImg { - width: 86%; - margin: 0; -} - -.productImagesThumb { - height: auto !important; -} - .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d63cf56..79c6c7f 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 { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 4108e84..3d2f750 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,15 @@ +.flexRow { + margin: 0 40px; +} +:global(.vtex-stack-layout-0-x-stackItem) { + .flexRow { + margin: 0; + } +} +.flexRowContent { + margin: 8px 0 0 0; + padding: 0; +} .flexRowContent--cart { display: flex; align-items: center; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 756b124..828efdc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,18 +3,12 @@ margin: 0 0 0 0 !important; } -.productImageTag { - max-height: none !important; +.carouselContainer { + .productImageTag { + max-height: none !important; + } } -.thumbImg { - width: 86%; - margin: 0; -} - -.productImagesThumb { - height: auto !important; -} .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e91615b..d7ad334 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; -- 2.34.1 From 02fa36c2261d0640ac06ea8567dce97c47ec0cbb Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 20:14:30 -0300 Subject: [PATCH 2/5] fix: Consertado o tamanho da imagem --- styles/css/vtex.store-components.css | 13 ++++++++++++- .../pages/product/vtex.store-components.scss | 17 ++++++++++++++--- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ff19d1c..d66941f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,10 +13,21 @@ margin: 0 0 0 0 !important; } -.carouselContainer .productImageTag { +.productImageTag { max-height: none !important; } +/* +.productImagesGallerySlide { + .productImageTag { + width: 800px; + } +} +*/ +.productImagesThumb { + margin-right: 16px; +} + .productBrand { display: flex; justify-content: flex-end; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 828efdc..0dd1aef 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,12 +2,20 @@ max-width: 100%; margin: 0 0 0 0 !important; } - -.carouselContainer { +.productImageTag { + max-height: none !important; +} +/* +.productImagesGallerySlide { .productImageTag { - max-height: none !important; + width: 800px; } } +*/ + +.productImagesThumb { + margin-right: 16px; +} .productBrand { display: flex; @@ -246,3 +254,6 @@ } } } + +@media screen and (max-width: 1024px) { +} -- 2.34.1 From 8a5c9887e49f6aa05b6c43341bce9fcef763d5c1 Mon Sep 17 00:00:00 2001 From: Savio Date: Thu, 9 Feb 2023 21:34:14 -0300 Subject: [PATCH 3/5] feat: Adicionado estilo tablet do produto --- styles/css/vtex.flex-layout.css | 7 + styles/css/vtex.product-summary.css | 52 ++---- styles/css/vtex.store-components.css | 159 ++++++++++++------ styles/css/vtex.tab-layout.css | 16 ++ .../sass/pages/product/vtex.flex-layout.scss | 6 + .../pages/product/vtex.product-summary.scss | 2 + .../pages/product/vtex.slider-layout.scss | 2 + .../pages/product/vtex.store-components.scss | 71 +++++++- .../sass/pages/product/vtex.tab-layout.scss | 15 ++ 9 files changed, 234 insertions(+), 96 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c59897a..79d4bec 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -42,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-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 d66941f..75263f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -178,24 +178,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; @@ -203,49 +276,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 79c6c7f..2150530 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -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 3d2f750..e52a860 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -33,3 +33,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-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 0dd1aef..3a94064 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -181,14 +181,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 { @@ -254,6 +260,57 @@ } } } - -@media screen and (max-width: 1024px) { +*/ +.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 d7ad334..6678e7d 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -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; + } +} -- 2.34.1 From 92789c1daa54f3720e2d6d9451da34dbface444e Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 10:13:51 -0300 Subject: [PATCH 4/5] feat: Adicionado o estilo do frete --- styles/css/vtex.flex-layout.css | 6 +- styles/css/vtex.store-components.css | 95 ++++++++++++++++++- .../sass/pages/product/vtex.flex-layout.scss | 4 +- .../pages/product/vtex.store-components.scss | 87 ++++++++++++++++- 4 files changed, 183 insertions(+), 9 deletions(-) diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 79d4bec..065f1ad 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,16 +9,12 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); /* Grid breakpoints */ -.flexRow { - margin: 0 40px; -} - :global(.vtex-stack-layout-0-x-stackItem) .flexRow { margin: 0; } .flexRowContent { - margin: 8px 0 0 0; + margin: 8px 0 0 0px; padding: 0; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 75263f1..d86410a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -10,7 +10,7 @@ /* Grid breakpoints */ .container { max-width: 100%; - margin: 0 0 0 0 !important; + margin: 0 40px 0 40px !important; } .productImageTag { @@ -161,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; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e52a860..7db885a 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,13 +1,13 @@ .flexRow { - margin: 0 40px; } + :global(.vtex-stack-layout-0-x-stackItem) { .flexRow { margin: 0; } } .flexRowContent { - margin: 8px 0 0 0; + margin: 8px 0 0 0px; padding: 0; } .flexRowContent--cart { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3a94064..286cbfb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,6 +1,6 @@ .container { max-width: 100%; - margin: 0 0 0 0 !important; + margin: 0 40px 0 40px !important; } .productImageTag { max-height: none !important; @@ -161,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 { -- 2.34.1 From eb6440c499663c296e58f587217055757524daa6 Mon Sep 17 00:00:00 2001 From: Savio Date: Fri, 10 Feb 2023 11:00:00 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20Adicionado=20os=20estilos=20dos=20p?= =?UTF-8?q?re=C3=A7os=20e=20parcelados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.flex-layout.css | 14 ++- styles/css/vtex.product-price.css | 96 +++++-------------- .../sass/pages/product/vtex.flex-layout.scss | 20 ++-- .../pages/product/vtex.product-price.scss | 17 ++++ 4 files changed, 61 insertions(+), 86 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 065f1ad..c2619c5 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,18 +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 */ -:global(.vtex-stack-layout-0-x-stackItem) .flexRow { - margin: 0; -} - .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; } 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/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7db885a..8a1039d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,18 +1,24 @@ .flexRow { } - -:global(.vtex-stack-layout-0-x-stackItem) { - .flexRow { - margin: 0; - } -} .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 { 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; +} -- 2.34.1