diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dad83ca..338f6a3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -16,10 +16,10 @@ "children": [ "stack-layout#prodsum", "product-summary-name", - "product-rating-inline", - "product-summary-space", - "product-summary-price", - "product-summary-buy-button" + /* "product-rating-inline", */ + /* "product-summary-space", */ + "product-summary-price" + /* "product-summary-buy-button" */ ] }, "list-context.product-list#relatedProduct": { diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index 1de300c..b5c254b 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -20,9 +20,9 @@ "stack-layout#prodsum": { "children": [ - "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc + "product-summary-image#shelf" + /* "vtex.product-highlights@2.x:product-highlights#collection", */ + /* "modal-trigger#quickview" */ // Check quickview.jsonc ] }, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..d8ee0f6 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,31 @@ -.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; - } -} - +/* +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 */ +/* Grid breakpoints */ .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + justify-content: center !important; + padding: 0; } .brandName { - font-weight: 600; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 18px; - color: #2E2E2E; + line-height: 25px; + color: #000000; + padding: 16px 0 8px !important; } -.container { - text-align: start; +.priceContainer { + padding: 0; } -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +.element { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 4bc9150..59af0e1 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -8,5 +9,21 @@ /* Media Query M3 */ /* Grid breakpoints */ .heading { - display: none; + font-size: 0; + margin-bottom: 32px; + margin-top: 0; +} +.heading::after { + content: "Você também pode gostar:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; +} + +.container { + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..6b63929 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,29 @@ -.sliderLayoutContainer { - justify-content: center; -} - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - +/* +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 */ +/* Grid breakpoints */ .sliderTrackContainer { - max-width: 100%; + background-color: white; + width: 1300px; + margin: auto; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; + align-items: center; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.paginationDot { + background-color: black; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.paginationDot--isActive { + width: 16px !important; + height: 16px !important; + border: 0.5px solid #000000; + background-color: white; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 146c478..1c7389e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -196,4 +196,46 @@ .carouselGaleryThumbs :global(.vtex-store-components-3-x-productImagesThumb) { margin-right: 16px; width: 90px !important; +} + +.installmentsPrice { + display: none; +} + +.listPrice { + margin: 8px; + padding: 0; +} + +.listPriceLabel { + font-size: 0; +} + +.listPriceValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; +} +.listPriceValue::before { + content: "de "; +} +.listPriceValue::after { + content: " por"; + text-decoration: line-through; +} + +.sellingPriceLabel { + font-size: 0; +} + +.sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 042683a..3407a99 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -8,7 +8,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .contentContainer { - padding: 32px 72px 16px 72px; + padding: 32px 72px 0 72px; } .contentContainer .contentItem { display: flex; 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..831ef79 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,22 @@ +.nameContainer { + justify-content: center !important; + padding: 0; +} + +.brandName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + padding: 16px 0 8px !important; +} + +.priceContainer { + padding: 0; +} + +.element { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 0be2b80..1f46e01 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,3 +1,20 @@ .heading { - display: none; + font-size: 0; + margin-bottom: 32px; + margin-top: 0; + + &::after { + content: "Você também pode gostar:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + } +} + +.container { + justify-content: center; + align-items: center; } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..e44ca8c --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,20 @@ +.sliderTrackContainer { + background-color: white; + width: 1300px; + margin: auto; +} + +.paginationDotsContainer { + align-items: center; +} + +.paginationDot { + background-color: black; +} + +.paginationDot--isActive { + width: 16px !important; + height: 16px !important; + border: 0.5px solid #000000; + background-color: white; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8d8ebaf..be2d5fa 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -195,3 +195,46 @@ width: 90px !important; } } + +.installmentsPrice { + display: none; +} +.listPrice { + margin: 8px; + padding: 0; +} + +.listPriceLabel { + font-size: 0; +} + +.listPriceValue { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + + &::before { + content: "de "; + } + + &::after { + content: " por"; + text-decoration: line-through; + } +} + +.sellingPriceLabel { + font-size: 0; +} + +.sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e0bbf49..285fb15 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,5 @@ .contentContainer { - padding: 32px 72px 16px 72px; + padding: 32px 72px 0 72px; .contentItem { display: flex;