diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..b25c15f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,144 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + // "flex-layout.row#description", + "tab-layout#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + // "shelf.relatedProducts", + "rich-text#carrouselText", + "list-context.product-list#carousel", "product-questions-and-answers" ] }, + + "rich-text#carrouselText": { + "props": { + "text": "Você também pode gostar:", + "textPosition": "CENTER" + } + }, + + "slider-layout#carouselSLider": { + "props": { + "itemsPerPage": { + "desktop": 4 + } + } + }, + + "list-context.product-list#carousel": { + "children": ["slider-layout#carouselSLider"], + "blocks": ["product-summary.shelf#productShelf"] + }, + + "product-summary.shelf#productShelf": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-space", + "product-summary-price" + ] + }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"] + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + + "tab-content.item#description1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "description1" + } + }, + + "tab-content.item#description2": { + "children": [], + "props": { + "tabId": "description2" + } + }, + + "tab-content.item#description3": { + "children": [], + "props": { + "tabId": "description3" + } + }, + + "tab-content.item#description4": { + "children": [], + "props": { + "tabId": "description4" + } + }, + + "tab-content.item#description5": { + "children": [], + "props": { + "tabId": "description5" + } + }, "html#breadcrumb": { "props": { "tag": "section", @@ -28,9 +159,23 @@ }, "flex-layout.row#description": { "props": { + "blockClass": "containerFlexRow", "marginBottom": 7 }, - "children": ["product-description"] + "children": ["product-images#description", "flex-layout.col#description"] + }, + "product-description#notitle": { + "props": { "showTitle": false } + }, + "flex-layout.col#description": { + "props": { + "preventVerticalStretch": true, + "rowGap": 5 + }, + "children": ["product-description", "product-description#notitle"] + }, + "product-images#description": { + "props": { "displayMode": "first-image" } }, "condition-layout.product#availability": { "props": { @@ -91,9 +236,28 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal", + "thumbnailMaxHeight": 90, + "showPaginationDots": false, + "showNavigationArrows": false } }, + + "flex-layout.col#skuCol": { + "props": { + "blockClass": "skuProduct" + }, + "children": ["product-identifier.product"] + }, + + "product-installments": { + "props": { + "message": "{installmentsNumber} {hasInterest, select, true {x} false {}} de {installmentValue} sem juros", + "blockClass": "installmentsPrice" + } + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -101,20 +265,17 @@ }, "children": [ "flex-layout.row#product-name", + "flex-layout.col#skuCol", "product-rating-summary", - "flex-layout.row#list-price-savings", + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + // "product-separator", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#cartPlus", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, @@ -135,11 +296,16 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buttonCart" }, "children": ["add-to-cart-button"] }, + "flex-layout.row#cartPlus": { + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..6586462 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..23e4983 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,53 @@ +@charset "UTF-8"; +/* +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 */ +.container { + display: flex; + font-size: 14px; + color: gray; + margin: 0 40px; +} +.container .homeIcon { + height: 0; + display: none; +} +.container .homeLink::before { + content: "Home"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .link--1 { + font-size: 0; +} +.container .link--1::before { + content: "Sapatos"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; +} +.container .link--2 { + font-size: 0; +} +.container .link--2::before { + content: "Sandália"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; +} +.container .termArrow, +.container .term { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..86dc184 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,21 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRow--containerFlexRow { + margin: 32px 72px 16px; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } +.flexColChild--skuProduct { + text-align: end; } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +.flexRowContent--buttonCart :global(.vtex-button) { + background: black; + border: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..49ed9b6 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,24 @@ -.product-identifier--productReference { - margin-bottom: 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 */ +/* Grid breakpoints */ +.product-identifier__label { + display: none; } + +.product-identifier__value { + text-align: end; + color: rgba(146, 146, 146, 0.48); + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..de9f116 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.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 */ +/* Grid breakpoints */ +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; font-weight: 700; -} - -.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-size: 25px; + line-height: 38px; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.product-sumary.css b/styles/css/vtex.product-sumary.css new file mode 100644 index 0000000..cde578d --- /dev/null +++ b/styles/css/vtex.product-sumary.css @@ -0,0 +1,12 @@ +/* +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 */ +.discountInsideContainer { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..719d659 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,55 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +.imageNormal { + width: 100vw; + height: 100vw; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; } -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.installmentContainer { + display: none; } -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; } .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + padding: 16px 16px 8px; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +.priceContainer { + margin: unset; + padding: unset; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..d7a012c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..98fc396 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,21 @@ -.sliderLayoutContainer { - justify-content: center; +/* +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 */ +.paginationDot { + background: #000000; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; -} - -.sliderTrackContainer { - max-width: 100%; +.paginationDot--isActive { + border: 0.5px solid #000000; + background: white; } .paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} + margin-top: 36px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..5543faa 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,99 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.vtex-flex-layout-0-x-stretchChildrenWidth { + width: 46.11% !important; +} + +.relative :first-child { + min-width: 100%; +} + +.productImage { + height: 664px; +} + +.productImageTag { + min-height: 100%; +} + +.productImageTag--main { + width: unset !important; + min-height: 100% !important; + max-height: unset !important; +} + +.figure { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin-right: 16px; +} + +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.thumbImg { + width: 90px; + height: 90px; + border-radius: 8px !important; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.discountInsideContainer { + display: none; +} + +.productBrand { + text-align: end; +} + +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorItemTextValue { + padding: unset; +} + +.skuSelectorItem { + border-radius: 50%; + width: 45px; + height: 45px; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} + +.frameAround { + border-radius: 50%; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..ea739c4 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,36 @@ +/* +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 */ +.listContainer { + width: 94.44%; + margin: 0 40px; + padding: 0 80px; + border-bottom: 1px solid #bfbfbf; + justify-content: space-between; +} + +.listContainer :global(.vtex-button) { + background: white; + border: 0; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-bottom: 0; +} + +.listItemActive :global(.vtex-button) { + color: black; + padding-bottom: 0; +} + +.listItemActive { + border-bottom: 2px solid black; + margin-bottom: unset; +} \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..5e004ae 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..5343fc8 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,49 @@ +.container { + display: flex; + font-size: 14px; + color: gray; + margin: 0 40px; + .homeIcon { + height: 0; + display: none; + } + + .homeLink { + &::before { + content: "Home"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + } + + .link--1 { + font-size: 0; + &::before { + content: "Sapatos"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; + } + } + + .link--2 { + font-size: 0; + &::before { + content: "Sandália"; + font-family: "Open sans", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 7px; + } + } + + .termArrow, + .term { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..c832a4d --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,12 @@ +.flexRow--containerFlexRow { + margin: 32px 72px 16px; +} + +.flexColChild--skuProduct { + text-align: end; +} + +.flexRowContent--buttonCart :global(.vtex-button) { + background: black; + border: 0; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..5b7a765 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,15 @@ +.product-identifier__label { + display: none; +} + +.product-identifier__value { + text-align: end; + color: rgba(146, 146, 146, 0.48); + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +.product-identifier__separator { + display: none; +} 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..0b631c8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,13 @@ +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} 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..c51bf62 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,45 @@ +.imageNormal { + width: 100vw; + height: 100vw; +} + +.productBrand { + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000000; +} + +.installmentContainer { + display: none; +} + +.listPriceContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #bababa; +} + +.sellingPrice { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +.sellingPriceLabel { + display: none; +} + +.nameContainer { + padding: 16px 16px 8px; +} +.priceContainer { + margin: unset; + padding: unset; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..1e50b8f 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,7 @@ +.container { + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} 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..1b25670 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,12 @@ +.paginationDot { + background: #000000; +} + +.paginationDot--isActive { + border: 0.5px solid #000000; + background: white; +} + +.paginationDotsContainer { + margin-top: 36px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..cd51ca2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,98 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.vtex-flex-layout-0-x-stretchChildrenWidth { + width: 46.11% !important; +} + +.relative { + :first-child { + min-width: 100%; + } +} + +.productImage { + height: 664px; +} + +.productImageTag { + min-height: 100%; +} + +.productImageTag--main { + width: unset !important; + min-height: 100% !important; + max-height: unset !important; +} + +.figure { + width: 90px; + height: 90px; +} + +.productImagesThumb { + width: 90px !important; + height: 90px !important; + margin-right: 16px; +} + +.carouselThumbBorder { + width: 90px; + height: 90px; +} + +.thumbImg { + width: 90px; + height: 90px; + border-radius: 8px !important; +} + +.productDescriptionTitle { + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} + +.productDescriptionText { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.discountInsideContainer { + display: none; +} + +.productBrand { + text-align: end; +} + +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorItemTextValue { + padding: unset; +} + +.skuSelectorItem { + border-radius: 50%; + width: 45px; + height: 45px; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} + +.frameAround { + border-radius: 50%; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..58f6761 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,27 @@ +.listContainer { + width: 94.44%; + margin: 0 40px; + padding: 0 80px; + border-bottom: 1px solid #bfbfbf; + justify-content: space-between; +} + +.listContainer :global(.vtex-button) { + background: white; + border: 0; + color: #bfbfbf; + font-weight: 400; + font-size: 18px; + line-height: 38px; + padding-bottom: 0; +} + +.listItemActive :global(.vtex-button) { + color: black; + padding-bottom: 0; +} + +.listItemActive { + border-bottom: 2px solid black; + margin-bottom: unset; +}