From ec95d20eaceefbbe995503d6e2483be467271a9c Mon Sep 17 00:00:00 2001 From: Izabela Balizardo Date: Mon, 6 Feb 2023 23:36:56 -0300 Subject: [PATCH] feat: Adiciona estilo text-descricao --- react/components/Html/styles.css | 56 +++++++++++++++++-- store/blocks/minicart.jsonc | 4 +- store/blocks/pdp/product.jsonc | 4 +- styles/css/vtex.flex-layout.css | 21 ++++++- styles/css/vtex.product-price.css | 35 +++++++++++- styles/css/vtex.tab-layout.css | 15 +++++ .../sass/pages/product/vtex.flex-layout.scss | 24 ++++++++ .../pages/product/vtex.product-price.scss | 40 ++++++++++++- .../pages/product/vtex.store-components.scss | 4 +- .../sass/pages/product/vtex.tab-layout.scss | 5 ++ 10 files changed, 193 insertions(+), 15 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 1d92b5e..20ffde1 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -95,15 +95,15 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 display: none; } */ -[class*="flexRowContent--btn-product"] button { +/* [class*="flexRowContent--btn-product"] button { background-color: black; border-color: black; - max-width: 526px; - width: 100%; + + width: 766px; height: 49px; display: flex; border-radius: 0px; - left: 158px; + bottom: 73px; } @@ -111,14 +111,24 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 font-size: 0px; } -[class*="flexRowContent--btn-product"] button span::after { - content: "ADICIONAR À SACOLA"; + [class*="flexRowContent--btn-product"] button span::after { + font-size: 14px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; font-family: "Open Sans", sans-serif; } [class*="flexRowContent--btn-product"] button:hover { background-color: #000000; +} */ + +[class*="vtex-add-to-cart-button-0-x-buttonText--botao-adicionar"] { + font-family: "Open Sans", sans-serif; + font-size: 14px; + bottom: 75px; } [class*="vtex-address-form__postalCode-forgottenURL"] a { @@ -133,4 +143,38 @@ button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 display: none; } +/*Description*/ +[class*="vtex-tab-layout-0-x-listItem"] { + margin: 0; + padding: 0; +} +[class*="vtex-tab-layout-0-x-listItem"] button { + color: gray; + text-transform: capitalize; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; +} + +[class*="vtex-tab-layout-0-x-listItem"] button:hover { + color: black; + border-bottom: 2px solid black; + background-color: white; + border-radius: 0; +} + +[class*="vtex-tab-layout-0-x-listItemActive"] button { + color: black; + background-color: white; + border: none; + border-bottom: 2px solid black; + border-radius: 0; +} + +[class*="vtex-tab-layout-0-x-listItemActive"] button:hover { + background-color: white; + border-bottom: 4px solid black; + color: black; +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..02837ba 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,7 +2,9 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "text": "Adicionar à sacola", + "blockClass": "botao-adicionar" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e33be5a..6281691 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -252,7 +252,9 @@ "phone": "16:9" }, "thumbnailsOrientation": "horizontal", - "displayThumbnailsArrows": false + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "showNavigationArrows": false } }, "flex-layout.col#right-col": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 32d6e49..9103249 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,4 +7,23 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +.flexRow--btn-product { + width: 100%; + max-width: 380px; + bottom: 75px; + position: relative; + left: 155px; +} +.flexRow--btn-product :global(.vtex-button) { + background-color: black; + border: 1px solid black; + border-radius: 0; + height: 49px; +} +.flexRow--btn-product :global(.vtex-button):hover { + background-color: rgb(36, 36, 36); +} +.flexRow--btn-product .flexRow--btn-product--botao-adicionar { + font-family: "Open Sans", sans-serif; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 329a85b..8110144 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -19,6 +19,7 @@ .sellingPrice { color: #3f3f40; font-size: 1.25rem; + margin-bottom: -12px; } .sellingPriceValue { @@ -27,8 +28,9 @@ } .installments { - color: #727273; - margin-bottom: 1rem; + color: #929292; + margin-bottom: 8px; + font-size: 0px; } .sellingPriceValue--summary { @@ -82,4 +84,33 @@ vertical-align: baseline; 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.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..25c94b8 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,15 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid gray; +} \ 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 c71f073..4b3a82b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -7,3 +7,27 @@ // display: flex; // border-radius: 0px; // } + +.flexRow--btn-product { + width: 100%; + + max-width: 380px; + bottom: 75px; + position: relative; + left: 155px; + + :global(.vtex-button) { + background-color: black; + border: 1px solid black; + border-radius: 0; + height: 49px; + + &:hover { + background-color: rgb(36, 36, 36); + } + } + + .flexRow--btn-product--botao-adicionar { + font-family: "Open Sans", sans-serif; + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 18551f6..4c27aac 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -9,6 +9,7 @@ .sellingPrice { color: #3f3f40; font-size: 1.25rem; + margin-bottom: -12px; } .sellingPriceValue { @@ -17,8 +18,9 @@ } .installments { - color: #727273; - margin-bottom: 1rem; + color: #929292; + margin-bottom: 8px; + font-size: 0px; } .sellingPriceValue--summary { @@ -74,3 +76,37 @@ 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.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8d9d2a9..db17ac8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,8 +3,6 @@ color: $color-white; } - - .productNameContainer { font-family: "Open Sans"; font-style: normal; @@ -116,3 +114,5 @@ text-align: left; } } + + 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..4ab423b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,5 @@ +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid gray; +}