From 9dc80539b15713713806cffd1a3a6ff13db21c99 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 08:38:52 -0300 Subject: [PATCH] feat: sccs atualizado com novas classes, mais organizado. --- store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.flex-layout.css | 5 + styles/css/vtex.product-quantity.css | 12 + styles/css/vtex.rich-text.css | 3 +- styles/css/vtex.store-components.css | 300 +++++++++++++++++- styles/css/vtex.tab-layout.css | 1 - .../sass/pages/product/vtex.flex-layout.scss | 6 +- .../pages/product/vtex.product-quantity.scss | 5 + styles/sass/pages/product/vtex.rich-text.scss | 2 + .../pages/product/vtex.store-components.scss | 274 ++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 6 +- 11 files changed, 570 insertions(+), 47 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c47a827..252cd98 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -122,7 +122,6 @@ "html#pix", // "product-separator", "sku-selector", - "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", @@ -173,7 +172,7 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f505c51..9970461 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,6 +11,11 @@ padding: 0; } +.flexRowContent { + margin: 0; + padding: 0; +} + .flexRowContent--identifier { display: flex; flex-direction: column; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..e0f5ca1 --- /dev/null +++ b/styles/css/vtex.product-quantity.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 */ +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..e484bd9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22"); \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 567fbca..7b3b0a0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,35 +7,301 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.container { - padding: 0 40px; -} - .productNameContainer { - text-align: end; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #292929; } -.productDescriptionContainer { - width: 43.89%; +.productNameContainer--quickview { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; } -.productImagesContainer { - width: 43.89%; -} - -.productImage { +.skuSelectorContainer { display: flex; + flex-direction: column-reverse; } -.produto-carrossel .swiper-wrapper { - gap: 16px; +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; } -.discountInsideContainer { +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorItem { + height: 50px; + width: 50px; +} + +.shippingContainer { + display: flex; + position: relative; +} + +.shippingContainer :global(.vtex-button) { + background-color: #000; + width: 70px; + height: 45px; + color: #fff; + margin-top: 23px; + margin-left: -4px; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} + +.shippingContainer :global(.vtex-input__label)::before { + 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-address-form__postalCode) { + width: 280px; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: #000; + position: absolute; + right: 32px; + top: 25px; +} + +.shareContainer { display: none; } +.shippingTable { + border: none; + bottom: 110px; + position: relative; + font-size: 14px; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} + +.shippingTable .shippingTableHead { + display: contents; +} + +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans", sans-serif; + color: #afafaf; +} + +.shippingTable .shippingTableRow { + text-align: left; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} + +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +.carouselGaleryThumbs { + height: 200px; +} + +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} + +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; + margin: 2px; +} + +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans", sans-serif; + 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(213, 213, 213) 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: #989898; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} + +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: #B9B9B9; +} + +.productImagesContainer { + width: 45%; +} + .newsletter { - color: #FFFFFF; - background: #000000; + background: #000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid #929292; +} + +.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", sans-serif; + 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", sans-serif; + 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 #929292; + border-radius: 0; +} + +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000; +} + +.newsletter .inputGroup .buttonContainer { + padding: 0; +} + +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-bottom: 2px solid #fff; + border-radius: 0; +} + +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000; + border-bottom: 4px solid #fff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 746e3a9..770fb6b 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -35,6 +35,5 @@ .contentItem { display: flex; - padding: 0px 40px; margin-bottom: 16px; } \ 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 40b284f..fe8f3bd 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -4,10 +4,14 @@ } +.flexRowContent{ + margin: 0; + padding: 0; +} + .flexRowContent--identifier{ display: flex; flex-direction: column; align-items: end; } - 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..b723602 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,5 @@ +.quantitySelectorContainer { + .quantitySelectorTitle { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..3c1295a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,2 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22"); + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 42d6696..7df76b6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,36 +1,268 @@ -.container { - padding: 0 40px; +.productNameContainer { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #292929; } -.productNameContainer{ - text-align: end; +.productNameContainer--quickview { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; } -.productDescriptionContainer{ - width: 43.89%; -} - -.productImagesContainer{ - width: 43.89%; -} - -.productImage{ +.skuSelectorContainer { display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; } -.produto-carrossel{ - .swiper-wrapper{ - gap: 16px - } +.skuSelectorItem { + height: 50px; + width: 50px; } +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + background-color: #000; + width: 70px; + height: 45px; + color: #fff; + margin-top: 23px; + margin-left: -4px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} -.discountInsideContainer{ +.shippingContainer :global(.vtex-input__label)::before { + 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-address-form__postalCode) { + width: 280px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: #000; + position: absolute; + right: 32px; + top: 25px; +} + +.shareContainer { display: none; } -.newsletter{ - color: #FFFFFF; - background: #000000; +.shippingTable { + border: none; + bottom: 110px; + position: relative; + font-size: 14px; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHead { + display: contents; +} +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans", sans-serif; + color: #afafaf; +} +.shippingTable .shippingTableRow { + text-align: left; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +.carouselGaleryThumbs { + height: 200px; +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; + margin: 2px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans", sans-serif; + 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(213, 213, 213) 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: #989898; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: #B9B9B9; +} + +.productImagesContainer{ + width: 45%; +} + + +.newsletter { + background: #000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid #929292; +} +.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", sans-serif; + 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", sans-serif; + 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 #929292; + border-radius: 0; +} +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000; +} +.newsletter .inputGroup .buttonContainer { + padding: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-bottom: 2px solid #fff; + border-radius: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000; + border-bottom: 4px solid #fff; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index fc7c793..c44a9cd 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -19,17 +19,15 @@ } } -.listItemActive { - :global(.vtex-button) { +.listItemActive :global(.vtex-button) { border: 0; border-bottom: 1px solid #000000 !important; } -} + .contentItem{ display: flex; - padding: 0px 40px; margin-bottom: 16px; }