From 9a1830025e962ede706bb3f04ffbb531dbe301fd Mon Sep 17 00:00:00 2001 From: Emerson Fully <63175980+emersonfully@users.noreply.github.com> Date: Wed, 8 Feb 2023 21:15:54 -0300 Subject: [PATCH] =?UTF-8?q?modifica=C3=A7=C3=B5es=20de=20estilo=20da=20pag?= =?UTF-8?q?ina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/style.css | 3 +- .../product-specification-list.jsonc | 8 +- .../product-summary/product-summary.jsonc | 4 +- store/blocks/product-summary/quickview.json | 28 +- styles/css/vtex.flex-layout.css | 121 ++----- styles/css/vtex.product-identifier.css | 18 +- styles/css/vtex.product-price.css | 70 +++- styles/css/vtex.product-quantity.css | 33 ++ styles/css/vtex.product-summary.css | 54 +-- styles/css/vtex.shelf.css | 23 ++ styles/css/vtex.slider-layout.css | 45 ++- styles/css/vtex.store-components.css | 258 +++++++++++++- styles/css/vtex.tab-layout.css | 31 ++ .../product/agenciamagma.store-theme.scss | 1 - .../sass/pages/product/vtex.flex-layout.scss | 36 ++ .../product/vtex.product-identifier.scss | 10 + .../pages/product/vtex.product-price.scss | 112 ++++++ .../pages/product/vtex.product-quantity.scss | 28 ++ .../pages/product/vtex.product-summary.scss | 3 + styles/sass/pages/product/vtex.shelf.scss | 16 + .../pages/product/vtex.slider-layout.scss | 15 + .../pages/product/vtex.store-components.scss | 323 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 20 ++ 23 files changed, 1050 insertions(+), 210 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.shelf.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.shelf.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 5f7e589..f131621 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,5 +1,5 @@ [class*="vtex-store-components-3-x-productImageTag--main"] { - max-height: 900px !important; + max-height: 664px !important; } .html--pdp-breadcrumb { @@ -60,6 +60,7 @@ [class*="vtex-address-form__postalCode-forgottenURL"] a:hover { color: black; + text-decoration: underline; } [class*="vtex-address-form__postalCode-forgottenURL"] span { diff --git a/store/blocks/product-summary/product-specification-list.jsonc b/store/blocks/product-summary/product-specification-list.jsonc index 57d44af..14ce810 100644 --- a/store/blocks/product-summary/product-specification-list.jsonc +++ b/store/blocks/product-summary/product-specification-list.jsonc @@ -1,13 +1,9 @@ { "product-specification-group#summary": { - "children": [ - "product-specification#summary" - ] + "children": ["product-specification#summary"] }, "product-specification#summary": { - "children": [ - "flex-layout.row#summarySpecificationValues" - ] + "children": ["flex-layout.row#summarySpecificationValues"] }, "flex-layout.row#summarySpecificationValues": { "props": { diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..bf4a718 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,43 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 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 */ +@media screen and (max-width: 1024px) { + .flexRowContent { + display: flex; + flex-direction: column; } } -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; +@media screen and (max-width: 1024px) { + .flexRowContent--main-header-mobile { + display: flex; + flex-direction: row; } } -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; +.flexCol { + position: relative; } -.flexRowContent--main-header { - background-color: #f0f0f0; +.flexRow--btn-product { + width: 100%; + max-width: 400px; + position: absolute; + top: 358px; + left: 158px; } - -.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; +.flexRow--btn-product :global(.vtex-button) { + background-color: black; + border: 1px solid black; + border-radius: 0; + font-family: "Open Sans"; } +.flexRow--btn-product :global(.vtex-button):hover { + background-color: rgb(36, 36, 36); +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..8084274 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,19 @@ +/* +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--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: right; + color: gray; } + +.product-identifier__label, +.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..b4e962e 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,12 +1,24 @@ +/* +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 */ .listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; + display: none; +} + +.savings { + display: none; } .sellingPrice { color: #3f3f40; font-size: 1.25rem; + margin-bottom: -12px; } .sellingPriceValue { @@ -15,47 +27,42 @@ } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; + color: #929292; + margin-bottom: 8px; + font-size: 0px; } .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; } .savings--summary { - background: #8BC34A; + 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; + color: #ffffff; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -74,6 +81,35 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +.installmentsNumber { + font-weight: bold; + font-size: 16px; + margin-right: 6px; +} +.installmentsNumber::after { + content: "x"; + font-size: 16px; + margin-left: 4px; +} + +.installmentValue { + font-size: 16px; + font-weight: bold; + margin-right: 6px; +} +.installmentValue::before { + content: "de"; + font-size: 16px; + font-weight: normal; + margin-right: 6px; +} + +.interestRate::after { + content: "sem juros"; + font-size: 16px; + font-weight: normal; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..5476938 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,33 @@ +/* +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 */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + border-top: 2px solid #cccccc; + border-left: none; + border-right: none; + border-bottom: 2px solid #cccccc; + color: black; + height: 50px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: black; + border-color: #cccccc; + border-radius: 0; + height: 50px; +} +.quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: white; + border-color: #cccccc; + border-radius: 0; + height: 50px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..daaf9b2 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,12 @@ -.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 */ +/* Grid breakpoints */ +.buyButton { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..95e48f5 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,23 @@ +@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 */ +.title { + font-size: 0px; +} +.title::after { + content: "Você também pode gostar:"; + font-family: "Open Sans"; + font-style: normal; + 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..a42c32e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,24 @@ -.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 */ .sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; + background-color: white; + padding: 0 40px; } -.sliderTrackContainer { - max-width: 100%; +.paginationDot { + background-color: black; } -.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; -} +.paginationDot--isActive { + background-color: white; + border: 1px solid black; + width: 17px; + height: 17px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..1ef7760 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,261 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/*Product name*/ +.productNameContainer--quickview { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +/* carouselThumbs*/ +.carouselGaleryThumbs { + height: 200px; + margin-top: 16px; +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +/*SKU*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: black; + z-index: 2; + margin: 2px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(0, 0, 0) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: gray; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: gray; +} + +/*not-Avaliable*/ +.subscriberContainer { + margin-top: 30px; + height: 180px; + position: relative; +} +.subscriberContainer .title { + font-size: 0px; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-size: 16px; +} +.subscriberContainer .subscribeLabel { + font-size: 0px; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-size: 16px; +} +.subscriberContainer .inputName :global(.vtex-input-prefix__group), +.subscriberContainer .inputEmail :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; +} +.subscriberContainer .submit { + width: 100%; + position: absolute; + bottom: 0; +} +.subscriberContainer .submit :global(.vtex-button) { + background-color: black; + color: white; + font-size: 0px; + width: 100%; + height: 100%; +} +.subscriberContainer .submit :global(.vtex-button)::after { + content: "Avise-me"; + font-size: 18px; +} + +/*Shipping*/ +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + background-color: black; + width: 50px; + height: 45px; + color: white; + margin-top: 22px; + margin-left: -4px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; +} +.shippingContainer :global(.vtex-input-prefix__group) { + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: black; + position: absolute; + right: 110px; + top: 25px; +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -60px; + } +} + +.shippingTable { + border: none; +} +.shippingTable .shippingTableHead { + display: contents; +} +.shippingTable .shippingTableCell { + padding: 7px 0; +} +.shippingTable .shippingTableRow { + text-align: left; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} + +/* Image and Text Description */ +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +/*newsletter*/ .newsletter { - background: red; + background: black; + color: white; + margin-top: 50px; + border-bottom: 2px solid lightgray; +} +.newsletter .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; +} +.newsletter .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.newsletter .label { + display: flex; + flex-direction: column; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: Open Sans; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + margin: 16px; +} +.newsletter .inputGroup { + width: 774px; +} +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid gray; + border-radius: 0; +} +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: black; +} +.newsletter .inputGroup .buttonContainer { + padding: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: black; + border: none; + border-bottom: 2px solid white; + border-radius: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: black; + border-bottom: 4px solid white; } \ 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..a92d01a --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,31 @@ +/* +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 { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #b9b9b9; + margin: auto; + width: 95%; +} +@media screen and (max-width: 1024px) { + .listContainer { + flex-direction: column; + } +} + +.contentItem { + display: flex; + padding: 62px 52px; +} +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + } +} \ 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..b053eac 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,4 +5,3 @@ .html--pdp-breadcrumb { background-color: green; } - 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..a252ba4 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,36 @@ +.flexRowContent { + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } +} + +.flexRowContent--main-header-mobile { + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: row; + } +} + +.flexCol { + position: relative; +} + +.flexRow--btn-product { + width: 100%; + max-width: 400px; + position: absolute; + top: 358px; + left: 158px; + + :global(.vtex-button) { + background-color: black; + border: 1px solid black; + border-radius: 0; + font-family: "Open Sans"; + + &:hover { + background-color: rgb(36, 36, 36); + } + } +} 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..41778e7 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,10 @@ +.product-identifier--productReference { + display: flex; + justify-content: right; + color: gray; +} + +.product-identifier__label, +.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..4c27aac --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,112 @@ +.listPrice { + display: none; +} + +.savings { + display: none; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; + margin-bottom: -12px; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #929292; + margin-bottom: 8px; + font-size: 0px; +} + +.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: 0.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; +} + +.installmentsNumber { + font-weight: bold; + font-size: 16px; + + margin-right: 6px; + + &::after { + content: "x"; + font-size: 16px; + margin-left: 4px; + } +} + +.installmentValue { + font-size: 16px; + font-weight: bold; + margin-right: 6px; + + &::before { + content: "de"; + font-size: 16px; + font-weight: normal; + margin-right: 6px; + } +} + +.interestRate { + &::after { + content: "sem juros"; + font-size: 16px; + font-weight: normal; + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..f423a93 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,28 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorStepper { + :global(.vtex-numeric-stepper__input) { + border-top: 2px solid #cccccc; + border-left: none; + border-right: none; + border-bottom: 2px solid #cccccc; + color: black; + height: 50px; + } + + :global(.vtex-numeric-stepper__plus-button) { + color: black; + border-color: #cccccc; + border-radius: 0; + height: 50px; + } + + :global(.vtex-numeric-stepper__minus-button) { + background-color: white; + border-color: #cccccc; + border-radius: 0; + height: 50px; + } +} 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..8b2a726 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,3 @@ +.buyButton { + display: none; +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..4c5aaf8 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,16 @@ +.title { + font-size: 0px; + + &::after { + content: "Você também pode gostar:"; + font-family: "Open Sans"; + font-style: normal; + 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..c7a75f9 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,15 @@ +.sliderLayoutContainer--carousel { + background-color: white; + padding: 0 40px; +} + +.paginationDot { + background-color: black; +} + +.paginationDot--isActive { + background-color: white; + border: 1px solid black; + width: 17px; + height: 17px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..b5b9835 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,320 @@ -.newsletter{ - background: red; -} \ No newline at end of file +/*Product name*/ +.productNameContainer--quickview { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +/* carouselThumbs*/ +.carouselGaleryThumbs { + height: 200px; + margin-top: 16px; + + .productImagesThumb { + margin: 0px 10px; + } + + .thumbImg { + border-radius: 8px; + } +} + +/*SKU*/ +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .frameAround { + border-radius: 50%; + border-color: black; + z-index: 2; + margin: 2px; + } + + .skuSelectorInternalBox { + border-radius: 50%; + } + + .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: rgba(185, 185, 185, 0.6); + } + + .diagonalCross { + background-image: linear-gradient( + to top left, + transparent 44%, + rgb(0, 0, 0) 48%, + currentColor 48%, + currentColor 52%, + transparent 52% + ); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; + } +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + font-size: 0px; + + &::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: gray; + } + } +} + +.skuSelectorSubcontainer--cor { + .skuSelectorName { + font-size: 0px; + + &::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: gray; + } + } +} + +/*not-Avaliable*/ +.subscriberContainer { + margin-top: 30px; + height: 180px; + position: relative; + .title { + font-size: 0px; + + &::after { + content: "Produto indisponível"; + font-size: 16px; + } + } + + .subscribeLabel { + font-size: 0px; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-size: 16px; + } + } + + .inputName, + .inputEmail { + :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + } + } + + .submit { + width: 100%; + position: absolute; + bottom: 0; + + :global(.vtex-button) { + background-color: black; + color: white; + font-size: 0px; + width: 100%; + height: 100%; + + &::after { + content: "Avise-me"; + font-size: 18px; + } + } + } +} + +/*Shipping*/ +.shippingContainer { + display: flex; + position: relative; + :global(.vtex-button) { + background-color: black; + width: 50px; + height: 45px; + color: white; + margin-top: 22px; + margin-left: -4px; + } + + :global(.vtex-input__label) { + font-size: 0px; + + &::after { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; + } + } + + :global(.vtex-button__label) { + font-size: 0px; + } + + :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; + } + + :global(.vtex-input-prefix__group) { + border-radius: 0; + } + + :global(.vtex-address-form__postalCode) { + width: 280px; + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + color: black; + position: absolute; + right: 110px; + top: 25px; + + @media screen and (max-width: 1024px) { + right: -60px; + } + } +} + +.shippingTable { + border: none; + .shippingTableHead { + display: contents; + } + + .shippingTableCell { + padding: 7px 0; + } + + .shippingTableRow { + text-align: left; + } + + .shippingTableRadioBtn { + display: none; + } +} + +/* Image and Text Description */ +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +/*newsletter*/ +.newsletter { + background: black; + color: white; + + margin-top: 50px; + border-bottom: 2px solid lightgray; + + .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; + } + + .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + } + + .label { + display: flex; + flex-direction: column; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + + color: #ffffff; + } + + .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: Open Sans; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + + margin: 16px; + } + + .inputGroup { + width: 774px; + :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid gray; + border-radius: 0; + } + + :global(.vtex-styleguide-9-x-input) { + background-color: black; + } + + .buttonContainer { + padding: 0; + + :global(.vtex-button) { + background-color: black; + border: none; + border-bottom: 2px solid white; + border-radius: 0; + + &:hover { + background-color: black; + border-bottom: 4px solid white; + } + } + } + } +} + +// .discountInsideContainer, +// .installmentsPrice { +// display: none; +// } + +// .sellingPriceLabel { +// display: none; +// } + +// .sellingPrice { +// font-weight: bolder; +// } 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..bc2e8cb --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,20 @@ +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #b9b9b9; + margin: auto; + width: 95%; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + +.contentItem { + display: flex; + padding: 62px 52px; + + @media screen and (max-width: 1024px) { + flex-direction: column; + } +}