From 62c4042a25e9134e4189816eec65eae17b197eba Mon Sep 17 00:00:00 2001 From: ThiagoDuutra Date: Wed, 8 Feb 2023 11:20:15 -0300 Subject: [PATCH] feat:#3 Slider produtos --- store/blocks/pdp/product-assembly.jsonc | 34 +--- .../pdp/product-specifications-table.jsonc | 142 ++++++-------- store/blocks/product-price.jsonc | 9 +- .../product-summary-list.jsonc | 38 ++-- .../product-summary/product-summary.jsonc | 29 ++- store/blocks/search.jsonc | 25 +-- styles/css/vtex.button.css | 12 ++ styles/css/vtex.flex-layout.css | 181 +++++++++--------- styles/css/vtex.product-highlights.css | 24 +-- styles/css/vtex.product-summary.css | 54 ++---- styles/css/vtex.slider-layout.css | 47 ++--- styles/css/vtex.stack-layout.css | 22 ++- .../pages/product/vtex.product-quantity.scss | 42 ++++ styles/sass/pages/text/vtex.rich-text.scss | 76 ++++++++ 14 files changed, 390 insertions(+), 345 deletions(-) create mode 100644 styles/css/vtex.button.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss create mode 100644 styles/sass/pages/text/vtex.rich-text.scss diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..5460ee3 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,46 +3,26 @@ "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] - }, - "product-assembly-options": { - "children": [ - "flex-layout.row#product-assembly-options", - "assembly-option-input-values" - ] + "children": ["html#buy-button"] }, + "assembly-option-input-values": { "props": { "optionsDisplay": "box" } }, - "flex-layout.row#product-assembly-options": { - "props": { - "colGap": 2, - "preserveLayoutOnMobile": true, - "colSizing": "auto" - }, - "children": [ - "flex-layout.col#product-assembly-image", - "flex-layout.col#product-assembly-middle", - "flex-layout.col#product-assembly-quantity" - ] - }, + "flex-layout.col#product-assembly-quantity": { "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +76,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index add3a64..3a3b84f 100644 --- a/store/blocks/pdp/product-specifications-table.jsonc +++ b/store/blocks/pdp/product-specifications-table.jsonc @@ -1,83 +1,63 @@ { - "product-specification-group#table": { - "children": [ - "flex-layout.row#spec-group" - ] - }, - "flex-layout.row#spec-group": { - "props": { - "blockClass": "productSpecificationGroup" - }, - "children": [ - "flex-layout.col#spec-group" - ] - }, - "flex-layout.col#spec-group": { - "children": [ - "flex-layout.row#spec-group-name", - "product-specification" - ] - }, - "flex-layout.row#spec-group-name": { - "props": { - "blockClass": "productSpecificationGroupName" - }, - "children": [ - "product-specification-text#group" - ] - }, - "product-specification": { - "children": [ - "flex-layout.row#spec-item" - ] - }, - "flex-layout.row#spec-item": { - "props": { - "blockClass": "productSpecification" - }, - "children": [ - "flex-layout.col#spec-name", - "flex-layout.col#spec-value" - ] - }, - "flex-layout.col#spec-name": { - "props": { - "blockClass": "productSpecificationName", - "width": { - "mobile": "50%", - "desktop": "25%" - } - }, - "children": [ - "product-specification-text#specification" - ] - }, - "flex-layout.col#spec-value": { - "props": { - "blockClass": "productSpecificationValue" - }, - "children": [ - "product-specification-values" - ] - }, - "product-specification-values": { - "children": [ - "product-specification-text#value" - ] - }, - "product-specification-text#group": { - "props": { - "message": "{groupName}" - } - }, - "product-specification-text#specification": { - "props": { - "message": "{specificationName}" - } - }, - "product-specification-text#value": { - "props": { - "message": "{specificationValue}" - } - } + // "product-specification-group#table": { + // "children": ["flex-layout.row#spec-group"] + // }, + // "flex-layout.row#spec-group": { + // "props": { + // "blockClass": "productSpecificationGroup" + // }, + // "children": ["flex-layout.col#spec-group"] + // }, + // "flex-layout.col#spec-group": { + // "children": ["flex-layout.row#spec-group-name", "product-specification"] + // }, + // "flex-layout.row#spec-group-name": { + // "props": { + // "blockClass": "productSpecificationGroupName" + // }, + // "children": ["product-specification-text#group"] + // }, + // "product-specification": { + // "children": ["flex-layout.row#spec-item"] + // }, + // "flex-layout.row#spec-item": { + // "props": { + // "blockClass": "productSpecification" + // }, + // "children": ["flex-layout.col#spec-name", "flex-layout.col#spec-value"] + // }, + // "flex-layout.col#spec-name": { + // "props": { + // "blockClass": "productSpecificationName", + // "width": { + // "mobile": "50%", + // "desktop": "25%" + // } + // }, + // "children": ["product-specification-text#specification"] + // }, + // "flex-layout.col#spec-value": { + // "props": { + // "blockClass": "productSpecificationValue" + // }, + // "children": ["product-specification-values"] + // }, + // "product-specification-values": { + // "children": ["product-specification-text#value"] + // }, + // "product-specification-text#group": { + // "props": { + // "message": "{groupName}" + // } + // }, + // "product-specification-text#specification": { + // "props": { + // "message": "{specificationName}" + // } + // }, + // "product-specification-text#value": { + // "props": { + // "message": "{specificationValue}" + // } + // } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..779175f 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..ae0ece6 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -1,5 +1,5 @@ { - "product-summary.shelf#listLayout": { + "product-summary.shelf# Layout": { "props": { "blockClass": "listLayout" }, @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,16 +112,12 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ "product-summary-image#summaryListDesktop", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc + "vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc ] }, "product-summary-image#summaryListDesktop": { @@ -144,7 +129,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", @@ -158,8 +143,7 @@ "stack-layout#summaryListMobile": { "children": [ "product-summary-image#summaryListMobile", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc + "vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc ] }, "product-summary-image#summaryListMobile": { diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..d8041df 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -6,9 +6,7 @@ "flex-layout.col#productRating", "product-summary-space", "product-list-price#summary", - "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "flex-layout.row#selling-price-savings" ] }, "flex-layout.col#productRating": { @@ -21,8 +19,7 @@ "stack-layout#prodsum": { "children": [ "product-summary-image#shelf", - "vtex.product-highlights@2.x:product-highlights#collection", - "modal-trigger#quickview" // Check quickview.jsonc + "vtex.product-highlights@2.x:product-highlights#collection" // Check quickview.jsonc ] }, @@ -62,7 +59,8 @@ "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "marginBottom": 4, + "blockClass": "container-price-slider" }, "children": [ "product-selling-price#summary", @@ -81,10 +79,23 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } + }, + + "list-context.product-list#container-products": { + "blocks": ["product-summary.shelf"], + "children": ["html#slider-layout#demo-products"] + }, + + "rich-text#slider-text": { + "props": { + "text": "#### Você também pode gostar:", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "textColor": "#575757", + "blockClass": "slider-text" + } } } diff --git a/store/blocks/search.jsonc b/store/blocks/search.jsonc index 22be941..d6a2f7b 100644 --- a/store/blocks/search.jsonc +++ b/store/blocks/search.jsonc @@ -108,7 +108,10 @@ } }, "flex-layout.row#searchinfo": { - "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"] + "children": [ + "flex-layout.col#productCount", + "flex-layout.row#orderByAndSwitcher" + ] }, "flex-layout.row#orderByAndSwitcher": { "children": ["order-by.v2", "gallery-layout-switcher"], @@ -254,7 +257,7 @@ "itemsPerRow": 1 } ], - "ListSummary": "product-summary.shelf#listLayout", + // "ListSummary": "product-summary.shelf#listLayout", "GridSummary": "product-summary.shelf" } }, @@ -272,29 +275,19 @@ "props": { "name": "grid" }, - "children": [ - "icon-grid", - "responsive-layout.desktop#textOptionGrid" - ] + "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"] }, "gallery-layout-option#list": { "props": { "name": "list" }, - "children": [ - "icon-inline-grid", - "responsive-layout.desktop#textOptionList" - ] + "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"] }, "responsive-layout.desktop#textOptionGrid": { - "children": [ - "rich-text#option-grid" - ] + "children": ["rich-text#option-grid"] }, "responsive-layout.desktop#textOptionList": { - "children": [ - "rich-text#option-list" - ] + "children": ["rich-text#option-list"] }, "rich-text#option-grid": { "props": { diff --git a/styles/css/vtex.button.css b/styles/css/vtex.button.css new file mode 100644 index 0000000..0e7b6af --- /dev/null +++ b/styles/css/vtex.button.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 */ +.buttonText { + font-size: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 8edbfc4..c075329 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,99 @@ -.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; - } -} - -@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 { +@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 */ +.flexRowContent--container-main { display: flex; - max-height: 100%; + padding: 0; +} +@media only screen and (max-width: 1919px) { + .flexRowContent--container-main { + padding: 0 40px; + } +} +@media only screen and (max-width: 1023px) { + .flexRowContent--container-main { + display: block; + padding: 0; + } +} +.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding: 0; +} +@media only screen and (max-width: 1023px) { + .flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } +} +.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-flex-layout-0-x-flexCol--description-main) { + margin-left: 32px; +} +@media only screen and (max-width: 1023px) { + .flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-flex-layout-0-x-flexCol--description-main) { + margin-left: 0; + } +} +.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { + background-color: #000; + border: none; +} +.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) { + height: fit-content; +} +.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { + font-size: 0; +} +.flexRowContent--container-main :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { + font-family: "Open sans", sans-serif; + content: "ADICIONAR À SACOLA"; + font-size: 18px; + font-weight: 400; + line-height: 22px; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRow--container-price-slider { + display: flex; + justify-content: center; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; +@media only screen and (max-width: 1023px) { + .flexRowContent--product-description { + display: block; + } +} +@media only screen and (max-width: 1023px) { + .flexRowContent--product-description :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + display: block; + } } -.flexRow--addToCartRow { - padding-bottom: 1rem; +@media only screen and (max-width: 1023px) { + .flexRow--product-description :global(.vtex-store-components-3-x-container) { + padding: 0 !important; + margin: 0 !important; + } } + +.flexRow--container-newsletter { + margin-top: 64px; + width: 100%; + background-color: #000; +} +.flexRow--container-newsletter .flexRowContent--container-newsletter { + display: flex; + flex-direction: column; +} +.flexRow--container-newsletter .flexRowContent--container-newsletter .stretchChildrenWidth { + width: 100% !important; +} +.flexRow--container-newsletter .flexRowContent--container-newsletter .flexRowContent--text-newsletter { + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/styles/css/vtex.product-highlights.css b/styles/css/vtex.product-highlights.css index c08e8e4..e64dcdc 100644 --- a/styles/css/vtex.product-highlights.css +++ b/styles/css/vtex.product-highlights.css @@ -1,12 +1,12 @@ -.productHighlightWrapper--collection { - position: absolute; - top: 10px; - left: 5px; - width: 200px; -} - -.productHighlightText { - background: antiquewhite; - border-radius: 20px; - padding: 5px 10px; -} +/* +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 */ +.productHighlightWrapper { + 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..87fd9c0 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,18 @@ -.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; + padding: 16px 0 8px 0; } - -.brandName { - font-weight: 600; +.nameContainer .productNameContainer .productBrand { + font-family: "Open Sans", sans-serif; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} + font-weight: 400; + line-height: 24px; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..4d349c8 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,26 @@ +/* +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 { - justify-content: center; + padding: 0 67px 36px 67px; +} +.sliderLayoutContainer .slide--carousel { + margin-right: 16px; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #000; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderRightArrow { + margin-right: 25px; } -.sliderTrackContainer { - max-width: 100%; -} - -.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; -} +.sliderLeftArrow { + margin-left: 25px; +} \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..97d5220 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,10 +1,12 @@ -.stackItem--product { - width: 100%; - min-height: 257px -} - -.stackItem--quickview { - right: 0; - top: 0; - left: auto; -} +/* +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 */ +.stackItem--first .stackItem { + display: none; +} \ No newline at end of file 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..77fe24c --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,42 @@ +.quantitySelectorContainer { + margin-bottom: 0; + margin-right: 16px; + @include mq(sm, max) { + margin-bottom: 8px; + } + :global(.vtex-numeric-stepper__input) { + height: 49px; + width: 31px; + font-size: 16px; + line-height: 22px; + border-left: 0; + border-right: 0; + border-top: 1px solid $color-gray4; + border-bottom: 1px solid $color-gray4; + color: $color-gray6; + } + :global(.vtex-numeric-stepper__plus-button) { + height: 49px; + font-size: 16px; + line-height: 22px; + border-right: 1px solid $color-gray4; + border-bottom: 1px solid $color-gray4; + border-top: 1px solid $color-gray4; + background: $color-white; + color: $color-black; + } + :global(.vtex-numeric-stepper__minus-button) { + height: 49px; + width: 10px; + font-size: 16px; + line-height: 22px; + border-left: 1px solid $color-gray4; + border-bottom: 1px solid $color-gray4; + border-top: 1px solid $color-gray4; + background: $color-white; + color: $color-black; + } + .quantitySelectorTitle { + display: none; + } +} diff --git a/styles/sass/pages/text/vtex.rich-text.scss b/styles/sass/pages/text/vtex.rich-text.scss new file mode 100644 index 0000000..79322c0 --- /dev/null +++ b/styles/sass/pages/text/vtex.rich-text.scss @@ -0,0 +1,76 @@ +.heading { + margin: 16px 0 8px 0; +} + +.wrapper--message-newsletter { + margin-top: 16px; + + .paragraph--message-newsletter { + font-family: "Open Sans", sans-serif; + font-size: 24px; + font-weight: 400; + line-height: 38px; + color: $color-white; + margin-bottom: 0; + } +} + +.paragraph { + font-family: "Open Sans", sans-serif; + font-size: 18px; + color: $color-gray6; + line-height: 24px; + font-weight: 400; + @include mq(sm, max) { + font-size: 16px; + } +} + +.container--title-newsletter { + justify-content: center; + width: 100%; + margin: 32px 0 16px 0; + padding: 0 40px; + @include mq(md, max) { + margin: 64px 0 16px 0; + } + @include mq(sm, max) { + padding: 0; + } + .wrapper--title-newsletter { + align-items: center; + .paragraph--title-newsletter { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; + } + } +} + +.wrapper--email-phrase-newsletter { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 16px; + padding: 0 40px; + @include mq(sm, max) { + padding: 0; + } + .wrapper--email-phrase-newsletter { + display: flex; + align-items: center; + .paragraph--email-phrase-newsletter { + margin: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray6; + @include mq(md, max) { + font-size: 16px; + line-height: 22px; + } + } + } +}