From ad6d278bce05c6d0c60cc1e60a50ea67d6b4c4d7 Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Fri, 27 Jan 2023 08:32:52 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Finaliza=C3=A7=C3=A3o=20do=20header=20p?= =?UTF-8?q?ara=20todas=20as=20telas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/Installments.tsx | 3 - react/components/descont-pix/index.tsx | 2 +- react/components/installments/index.tsx | 16 --- react/components/installments/styles.css | 10 -- store/blocks/header/header.jsonc | 102 ++++++++++++++---- store/blocks/pdp/product.jsonc | 30 +++++- store/interfaces.json | 3 - styles/configs/style.json | 6 +- styles/css/vtex.flex-layout.css | 39 +++++++ styles/css/vtex.login.css | 32 ++++++ styles/css/vtex.menu.css | 25 +++++ styles/css/vtex.minicart.css | 31 ++++++ styles/css/vtex.product-price.css | 13 +++ styles/css/vtex.rich-text.css | 25 +++++ styles/css/vtex.sticky-layout.css | 16 +++ styles/css/vtex.store-components.css | 45 ++++++++ ...components-3.css => vtex.store-drawer.css} | 10 +- .../sass/pages/header/vtex.flex-layout.scss | 44 ++++++++ styles/sass/pages/header/vtex.login.scss | 27 +++++ styles/sass/pages/header/vtex.menu.scss | 17 +++ styles/sass/pages/header/vtex.minicart.scss | 29 +++++ styles/sass/pages/header/vtex.rich-text.scss | 29 +++++ .../sass/pages/header/vtex.sticky-layout.scss | 9 ++ .../pages/header/vtex.store-components.scss | 46 ++++++++ .../sass/pages/header/vtex.store-drawer.scss | 12 +++ .../pages/product/vtex.product-price.scss | 16 +++ .../pages/product/vtex.slider-layout.scss | 6 +- .../pages/product/vtex.store-components.scss | 11 ++ 28 files changed, 584 insertions(+), 70 deletions(-) delete mode 100644 react/Installments.tsx delete mode 100644 react/components/installments/index.tsx delete mode 100644 react/components/installments/styles.css create mode 100644 styles/css/vtex.login.css create mode 100644 styles/css/vtex.menu.css create mode 100644 styles/css/vtex.minicart.css rename styles/css/{vtex-store-components-3.css => vtex.store-drawer.css} (52%) create mode 100644 styles/sass/pages/header/vtex.flex-layout.scss create mode 100644 styles/sass/pages/header/vtex.login.scss create mode 100644 styles/sass/pages/header/vtex.menu.scss create mode 100644 styles/sass/pages/header/vtex.minicart.scss create mode 100644 styles/sass/pages/header/vtex.rich-text.scss create mode 100644 styles/sass/pages/header/vtex.sticky-layout.scss create mode 100644 styles/sass/pages/header/vtex.store-components.scss create mode 100644 styles/sass/pages/header/vtex.store-drawer.scss diff --git a/react/Installments.tsx b/react/Installments.tsx deleted file mode 100644 index 37b09f1..0000000 --- a/react/Installments.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { Installments } from "./components/installments"; - -export default Installments; diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx index ef6c288..d78e7a3 100644 --- a/react/components/descont-pix/index.tsx +++ b/react/components/descont-pix/index.tsx @@ -5,7 +5,7 @@ import styles from "./styles.css"; export const DescontPix: FC = () => { const productContextValue = useProduct(); - + console.log(productContextValue); // const fetchApi = async () => { // fetch("/api/checkout/pub/orderForms/simulation", { // method: "POST", diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx deleted file mode 100644 index 9ba7546..0000000 --- a/react/components/installments/index.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { FC } from 'react' -import { useProduct } from 'vtex.product-context' -import styles from "./styles.css"; - -export const Installments: FC = () => { - - const productContextValue = useProduct(); - - let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4; - - return ( -
- 4 x de R$ {sellingPrice.toFixed(2).replace(".", ",")} sem juros -
- ); -} diff --git a/react/components/installments/styles.css b/react/components/installments/styles.css deleted file mode 100644 index 5d7eba2..0000000 --- a/react/components/installments/styles.css +++ /dev/null @@ -1,10 +0,0 @@ -.sellingPrice{ - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; -} - -.sellingPriceBold{ - font-weight: 700; -} diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ab2c0c0..70159a6 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -7,19 +7,34 @@ }, "header-layout.desktop": { "children": [ - "flex-layout.row#1-desktop", - "flex-layout.row#3-desktop", + "flex-layout.row#top-menu-descont", "sticky-layout#4-desktop" ] }, + "flex-layout.row#top-menu-descont":{ + "props": { + "blockClass": "container-top-menu-descont" + }, + "children": [ + "rich-text#text-top-menu-descont" + ] + }, + + "rich-text#text-top-menu-descont": { + "props": { + "text": "Desconto na primeira compra", + "blockClass": "text-top-menu-descont" + } + }, + "flex-layout.row#1-desktop": { "children": ["telemarketing"], "props": { "fullWidth": true } }, - + "flex-layout.row#3-desktop": { "props": { "blockClass": "menu-link", @@ -57,47 +72,69 @@ "children": [ "flex-layout.col#logo-desktop", "flex-layout.col#category-menu", - "flex-layout.col#spacer", + // "flex-layout.col#spacer", "search-bar", - "locale-switcher", - "login", - "minicart.v2" + "flex-layout.row#login-and-cart" ] }, + + "search-bar":{ + "props": { + "placeholder": "Faça sua busca" + } + }, + "flex-layout.col#logo-desktop": { "props": { - "verticalAlign": "middle" + "verticalAlign": "middle", + "blockClass": "logo-desktop-m3academy" }, "children": ["logo#desktop"] }, "flex-layout.col#category-menu": { "props": { - "verticalAlign": "middle" + "verticalAlign": "middle", + "blockClass": "menu-header-container" }, "children": ["vtex.menu@2.x:menu#category-menu"] }, "logo#desktop": { "props": { - "title": "Logo", + "title": "Logo M3 Academy", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png", - "width": "180", - "height": "12" + "url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png", + "width": "100%", + "height": "auto" } }, "header-layout.mobile": { - "children": ["sticky-layout#1-mobile"] + "children": [ + "flex-layout.row#top-menu-descont", + "sticky-layout#1-mobile" + ], + "props": { + "sticky": false + } }, "sticky-layout#1-mobile": { - "children": ["flex-layout.row#1-mobile"] + "children": ["flex-layout.row#mobile-header-col"] }, + + "flex-layout.row#mobile-header-col": { + "children": [ + "flex-layout.row#1-mobile", + "search-bar#mobile" + ], + "props": { + "blockClass": "mobile-header-col" + } + }, + "flex-layout.row#1-mobile": { "children": [ "drawer", "logo#mobile", - "flex-layout.col#spacer", - "login", - "minicart.v2" + "flex-layout.row#login-and-cart" ], "props": { "blockClass": "main-header-mobile", @@ -106,8 +143,22 @@ "fullWidth": true } }, + + "flex-layout.row#login-and-cart":{ + "children": [ + "login", + "minicart.v2" + ], + "props": { + "blockClass": "login-and-cart-container" + } + }, + "drawer": { - "children": ["menu#drawer"] + "children": ["menu#drawer"], + "props": { + "blockClass": "drawer-header" + } }, "menu#drawer": { @@ -125,9 +176,16 @@ "props": { "title": "Logo", "href": "/", - "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png", - "width": "77.5", - "height": "27.5" + "url": "https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png", + "width": "140", + "height": "33", + "blockClass": "logo-mobile-header" + } + }, + + "search-bar#mobile": { + "props": { + "blockClass": "search-mobile-header" } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1f45afa..2d41dfe 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -49,6 +49,7 @@ "product-images#description": { "props":{ "displayMode": "first-image", + "zoomMode": "disabled", "blockClass": "image-description-pdp" } }, @@ -188,18 +189,27 @@ "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 2 + "mobile": 2 } } }, + "html#related-products-testid": { + "props": { + "testId": "vtex-product-summary" + }, + "children": [ + "rich-text#title-related-products", + "list-context.product-list#related-products-pdp" + ] + }, + "flex-layout.row#related-products-pdp":{ "props": { "blockClass": "container-related-products-pdp" }, "children": [ - "rich-text#title-related-products", - "list-context.product-list#related-products-pdp" + "html#related-products-testid" ] }, @@ -302,7 +312,7 @@ "flex-layout.row#product-name", "product-identifier.product", "flex-layout.row#selling-price", - "installments", + "product-installments#m3", "html#descont-pix", "html#sku-selector", "flex-layout.row#quantity-and-buy-button", @@ -311,6 +321,18 @@ ] }, + "product-installments#m3": { + "props": { + "markers": ["discount"], + "installmentOptionsFilter": { + "paymentSystemName": "Mastercard", + "installmentsQuantity": 4 + }, + "blockClass": "m3-custom-installments", + "message": "{installmentsNumber} x de {installmentValue} sem juros" + } + }, + "html#descont-pix":{ "props": { "testId": "pix-price" diff --git a/store/interfaces.json b/store/interfaces.json index eae6eb8..5092039 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,9 +2,6 @@ "example-component": { "component": "Example" }, - "installments": { - "component": "Installments" - }, "descont-pix": { "component": "DescontPix" }, diff --git a/styles/configs/style.json b/styles/configs/style.json index f486303..0b02dac 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -4,14 +4,14 @@ ], "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], "customMedia": [ - { "s": 20 }, + { "s": 48 }, { "ns": { - "value": 40, + "value": 48, "minWidth": true } }, { "m": { - "value": 40, + "value": 48, "minWidth": true } }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c25d216..27b3623 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,6 +8,45 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRowContent--main-header { + padding: 24.5px 40px !important; + justify-content: space-between; +} +.flexRowContent--main-header .flexCol--logo-desktop-m3academy { + width: 44.8717%; +} +.flexRowContent--main-header .flexCol--logo-desktop-m3academy :global(.vtex-store-components-3-x-logoContainer) { + max-width: 100%; + max-height: 100%; + min-width: auto; + padding: 0; +} + +.flexRowContent--main-header-mobile { + justify-content: space-between; +} + +.flexRowContent--mobile-header-col { + padding: 32px 40px; + flex-direction: column; + row-gap: 8px; +} +.flexRowContent--mobile-header-col .stretchChildrenWidth { + width: 100% !important; +} +.flexRowContent--mobile-header-col :global(.vtex-store-components-3-x-searchBarContainer) { + max-width: 100%; +} + +.flexRowContent--login-and-cart-container { + gap: 40px; +} + +@media screen and (min-width: 1920px) { + .flexRowContent--main-header { + padding: 24.5px 360px !important; + } +} .flexRow--container-product-main { padding: 0 40px; } diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css new file mode 100644 index 0000000..7bfe701 --- /dev/null +++ b/styles/css/vtex.login.css @@ -0,0 +1,32 @@ +/* +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 { + height: min-content; + align-self: flex-end; + padding: 3px 0px; +} +.container :global(.vtex-button) { + border: 0; +} +.container :global(.vtex-button):hover { + background: transparent; +} +.container :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 !important; + padding-left: 4px !important; +} + +.label { + font-size: 0; + padding: 0; +} +.label::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg"); +} \ No newline at end of file diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css new file mode 100644 index 0000000..fd7b46f --- /dev/null +++ b/styles/css/vtex.menu.css @@ -0,0 +1,25 @@ +/* +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 */ +:global(.vtex-menu-2-x-styledLink) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + color: #929292; +} + +:global(.vtex-menu-2-x-styledLinkContainer) { + margin: 0; +} + +:global(.vtex-menu-2-x-menuContainer) { + gap: 15px; +} \ No newline at end of file diff --git a/styles/css/vtex.minicart.css b/styles/css/vtex.minicart.css new file mode 100644 index 0000000..059e3da --- /dev/null +++ b/styles/css/vtex.minicart.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 */ +.minicartContainer { + align-self: flex-end; + padding: 3px 0; +} +.minicartContainer .openIconContainer { + padding: 0; +} +.minicartContainer .openIconContainer :global(.vtex-minicart-2-x-cartIcon) { + display: none; +} +.minicartContainer .openIconContainer .minicartIconContainer::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg"); +} +.minicartContainer .openIconContainer :global(.vtex-button) { + border: 0; +} +.minicartContainer .openIconContainer :global(.vtex-button):hover { + background: transparent; +} +.minicartContainer .openIconContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index cc015d0..eb058b7 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -19,4 +19,17 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.installments--m3-custom-installments .installments-discount--m3-custom-installments { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments--m3-custom-installments .currencyContainer--m3-custom-installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index ae08726..e52c13d 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,6 +7,31 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container--text-top-menu-descont { + justify-content: center; + background-color: #000000; +} + +.paragraph--text-top-menu-descont { + display: flex; + margin: 0; + padding: 10px 0; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; +} +.paragraph--text-top-menu-descont::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg"); + margin-left: 54px; + height: 14px; +} +.paragraph--text-top-menu-descont::before { + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg"); + margin-right: 54px; + height: 14px; +} + .container--title-related-products { justify-content: center; margin-top: 16px; diff --git a/styles/css/vtex.sticky-layout.css b/styles/css/vtex.sticky-layout.css index e69de29..adeca97 100644 --- a/styles/css/vtex.sticky-layout.css +++ b/styles/css/vtex.sticky-layout.css @@ -0,0 +1,16 @@ +/* +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 */ +.wrapper--sticky-header { + background-color: #ffffff !important; +} + +.wrapper--stuck .container { + position: relative !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c981d28..8a98a83 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,6 +8,43 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.searchBarContainer { + padding: 0; + align-self: center; +} +.searchBarContainer :global(.vtex-input-prefix__group) { + display: flex; + flex-direction: row-reverse; + border: 0; + border-radius: 0; + border-bottom: 1px solid #AEAEAE; + height: auto; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 300; + font-size: 12px; + line-height: 16px; + color: #AEAEAE; + border: 0; + padding: 0; + background: transparent; + padding-bottom: 8px; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + padding: 0; + padding-bottom: 8px; + background: transparent; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search) { + padding-right: 12px; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchBarIcon--search)::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg"); +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-searchIcon) { + display: none; +} + .newsletter { background: red; } @@ -363,4 +400,12 @@ .carouselGaleryThumbs--product-images-pdp { display: block !important; } +} +@media screen and (max-width: 416px) { + .shippingTable { + width: 100%; + } + .shippingTable .shippingTableBody .shippingTableRow { + align-items: center; + } } \ No newline at end of file diff --git a/styles/css/vtex-store-components-3.css b/styles/css/vtex.store-drawer.css similarity index 52% rename from styles/css/vtex-store-components-3.css rename to styles/css/vtex.store-drawer.css index 3afa73c..e01aebf 100644 --- a/styles/css/vtex-store-components-3.css +++ b/styles/css/vtex.store-drawer.css @@ -7,8 +7,12 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.container { - margin: 0; +.openIconContainer { padding: 0; - max-width: max-content; +} +.openIconContainer .menuIcon { + display: none; +} +.openIconContainer::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg"); } \ No newline at end of file diff --git a/styles/sass/pages/header/vtex.flex-layout.scss b/styles/sass/pages/header/vtex.flex-layout.scss new file mode 100644 index 0000000..2dfa7c6 --- /dev/null +++ b/styles/sass/pages/header/vtex.flex-layout.scss @@ -0,0 +1,44 @@ +.flexRowContent--main-header{ + padding: 24.5px 40px !important; + justify-content: space-between; + + .flexCol--logo-desktop-m3academy{ + width: 44.8717%; + + :global(.vtex-store-components-3-x-logoContainer){ + max-width: 100%; + max-height: 100%; + min-width: auto; + padding: 0; + } + } +} + +.flexRowContent--main-header-mobile{ +justify-content: space-between; +} + +.flexRowContent--mobile-header-col{ + padding: 32px 40px; + + flex-direction: column; + row-gap: 8px; + + .stretchChildrenWidth{ + width: 100% !important; + } + + :global(.vtex-store-components-3-x-searchBarContainer){ + max-width: 100%; + } +} + +.flexRowContent--login-and-cart-container{ + gap: 40px; +} + +@media screen and (min-width: 1920px) { + .flexRowContent--main-header{ + padding: 24.5px 360px !important; + } +} diff --git a/styles/sass/pages/header/vtex.login.scss b/styles/sass/pages/header/vtex.login.scss new file mode 100644 index 0000000..c5f656d --- /dev/null +++ b/styles/sass/pages/header/vtex.login.scss @@ -0,0 +1,27 @@ +.container{ + height: min-content; + align-self: flex-end; + padding: 3px 0px; + + :global(.vtex-button){ + border: 0; + + &:hover{ + background: transparent; + } + + :global(.vtex-button__label){ + padding: 0 !important; + padding-left: 4px !important; + } + } +} + +.label{ + font-size: 0; + padding: 0; + + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/loginChallegeVtexT4.svg"); + } +} diff --git a/styles/sass/pages/header/vtex.menu.scss b/styles/sass/pages/header/vtex.menu.scss new file mode 100644 index 0000000..e1e2bad --- /dev/null +++ b/styles/sass/pages/header/vtex.menu.scss @@ -0,0 +1,17 @@ +:global(.vtex-menu-2-x-styledLink){ + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + + color: #929292; +} + +:global(.vtex-menu-2-x-styledLinkContainer){ + margin: 0; +} + +:global(.vtex-menu-2-x-menuContainer){ + gap: 15px; +} diff --git a/styles/sass/pages/header/vtex.minicart.scss b/styles/sass/pages/header/vtex.minicart.scss new file mode 100644 index 0000000..2130e5a --- /dev/null +++ b/styles/sass/pages/header/vtex.minicart.scss @@ -0,0 +1,29 @@ +.minicartContainer{ + align-self: flex-end; + padding: 3px 0; + .openIconContainer{ + padding: 0; + + :global(.vtex-minicart-2-x-cartIcon){ + display: none; + } + + .minicartIconContainer{ + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/cartChallegeVtexT4.svg"); + } + } + + :global(.vtex-button){ + border: 0; + + &:hover{ + background: transparent; + } + + :global(.vtex-button__label){ + padding: 0 !important; + } + } + } +} diff --git a/styles/sass/pages/header/vtex.rich-text.scss b/styles/sass/pages/header/vtex.rich-text.scss new file mode 100644 index 0000000..3f08016 --- /dev/null +++ b/styles/sass/pages/header/vtex.rich-text.scss @@ -0,0 +1,29 @@ +.container--text-top-menu-descont{ + justify-content: center; + background-color: #000000; +} + +.paragraph--text-top-menu-descont{ + display: flex; + margin: 0; + padding: 10px 0; + + font-weight: 400; + font-size: 12px; + line-height: 14px; + + + color: #FFFFFF; + + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightWhiteChalengeVtex.svg"); + margin-left: 54px; + height: 14px; + } + + &::before{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftWhiteChalengeVtex.svg"); + margin-right: 54px; + height: 14px; + } +} diff --git a/styles/sass/pages/header/vtex.sticky-layout.scss b/styles/sass/pages/header/vtex.sticky-layout.scss new file mode 100644 index 0000000..fdd20a6 --- /dev/null +++ b/styles/sass/pages/header/vtex.sticky-layout.scss @@ -0,0 +1,9 @@ +.wrapper--sticky-header { + background-color: #ffffff !important; +} + +.wrapper--stuck{ + .container{ + position: relative !important; + } +} diff --git a/styles/sass/pages/header/vtex.store-components.scss b/styles/sass/pages/header/vtex.store-components.scss new file mode 100644 index 0000000..26c0033 --- /dev/null +++ b/styles/sass/pages/header/vtex.store-components.scss @@ -0,0 +1,46 @@ +.searchBarContainer{ + padding: 0; + align-self: center; + + :global(.vtex-input-prefix__group){ + display: flex; + flex-direction: row-reverse; + + border: 0; + border-radius: 0; + border-bottom: 1px solid #AEAEAE; + + height: auto; + + :global(.vtex-styleguide-9-x-input){ + + font-weight: 300; + font-size: 12px; + line-height: 16px; + color: #AEAEAE; + border: 0; + padding: 0; + + background: transparent; + + padding-bottom: 8px; + } + + :global(.vtex-input__suffix){ + padding: 0; + padding-bottom: 8px; + background: transparent; + :global(.vtex-store-components-3-x-searchBarIcon--search){ + + padding-right: 12px; + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/searchChallengeVtexT4.svg"); + } + } + + :global(.vtex-store-components-3-x-searchIcon){ + display: none; + } + } + } +} diff --git a/styles/sass/pages/header/vtex.store-drawer.scss b/styles/sass/pages/header/vtex.store-drawer.scss new file mode 100644 index 0000000..b6c8431 --- /dev/null +++ b/styles/sass/pages/header/vtex.store-drawer.scss @@ -0,0 +1,12 @@ +.openIconContainer{ + + padding: 0; + + .menuIcon{ + display: none; + } + + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/drawerChallegeVtexT4.svg"); + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 7870d4e..900a12d 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -11,3 +11,19 @@ line-height: 22px; color: #929292; } + +.installments--m3-custom-installments{ + .installments-discount--m3-custom-installments{ + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + } + + .currencyContainer--m3-custom-installments{ + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 137edb4..eb8cc72 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -68,9 +68,5 @@ right: -20px; } } - - // .sliderTrack--container-slider-related-products-pdp{ - // width: 700% !important; - // } - } + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 246e15f..351c927 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -425,3 +425,14 @@ display: block !important; } } + +@media screen and (max-width: 416px) { + .shippingTable { + width: 100%; + .shippingTableBody{ + .shippingTableRow{ + align-items: center; + } + } + } +}