diff --git a/store/blocks/header/category-menu.json b/store/blocks/header/category-menu.json index 97185f6..16bc64b 100644 --- a/store/blocks/header/category-menu.json +++ b/store/blocks/header/category-menu.json @@ -1,14 +1,86 @@ { "vtex.menu@2.x:menu#category-menu": { "props": { - "experimentalOptimizeRendering": true + "experimentalOptimizeRendering": true, + "blockClass": "header-menu" }, "children": [ + "menu-item#novidades", + "menu-item#sapatos", "menu-item#category-apparel", "menu-item#category-home", - "menu-item#more" + "menu-item#more", + "menu-item#category-lojas", + "menu-item#category-seja-franqueado" ] }, + + "menu-item#novidades": { + "props": { + "id": "menu-item-novidades", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/novidades/", + "noFollow": false, + "tagTitle": "Novidades", + "text": "Novidades" + } + }, + "blocks": ["vtex.menu@2.x:submenu#novidades"] + }, + "vtex.menu@2.x:submenu#novidades": { + "props": { + "width": "auto" + }, + "children": ["vtex.menu@2.x:menu#novidades"] + }, + "vtex.menu@2.x:menu#novidades": { + "props": { + "orientation": "vertical" + }, + "children": [ + "menu-item#category-apparel-am3academy", + "menu-item#category-apparel-accessories", + "menu-item#category-apparel-eyeglasses" + ] + }, + + "menu-item#sapatos": { + "props": { + "id": "menu-item-sapatos", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/sapatos/", + "noFollow": false, + "tagTitle": "Sapatos", + "text": "Sapatos" + } + }, + "blocks": ["vtex.menu@2.x:submenu#sapatos"] + }, + "vtex.menu@2.x:submenu#sapatos": { + "props": { + "width": "auto" + }, + "children": ["vtex.menu@2.x:menu#sapatos"] + }, + "vtex.menu@2.x:menu#sapatos": { + "props": { + "orientation": "vertical" + }, + "children": [ + "menu-item#category-apparel-am3academy", + "menu-item#category-apparel-accessories", + "menu-item#category-apparel-eyeglasses" + ] + }, + "menu-item#category-apparel": { "props": { "id": "menu-item-category-apparel", @@ -20,7 +92,7 @@ "href": "/apparel---accessories/", "noFollow": false, "tagTitle": "Apparel & Accessories", - "text": "Apparel & Accessories" + "text": "Bolsas" } }, "blocks": ["vtex.menu@2.x:submenu#category-apparel"] @@ -41,6 +113,7 @@ "menu-item#category-apparel-eyeglasses" ] }, + "menu-item#category-apparel-am3academy": { "props": { "id": "menu-item-category-apparel-am3academy", @@ -86,6 +159,7 @@ } } }, + "menu-item#category-home": { "props": { "id": "menu-item-category-home", @@ -96,11 +170,12 @@ "type": "internal", "href": "/home---decor/", "noFollow": false, - "tagTitle": "Home & Decor", - "text": "Home & Decor" + "tagTitle": "Acessorios", + "text": "Acessorios" } } }, + "menu-item#more": { "props": { "id": "menu-item-custom-trocas-e-devolucoes", @@ -111,8 +186,8 @@ "type": "internal", "href": "#", "noFollow": true, - "tagTitle": "More", - "text": "More" + "tagTitle": "Outlet", + "text": "Outlet" } }, "blocks": ["vtex.menu@2.x:submenu#more"] @@ -182,5 +257,39 @@ "text": "Contact Us" } } + }, + + + "menu-item#category-lojas": { + "props": { + "id": "menu-item-category-lojas", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/lojas/", + "noFollow": false, + "tagTitle": "Lojas", + "text": "Lojas" + } + } + }, + + + "menu-item#category-seja-franqueado": { + "props": { + "id": "menu-item-category-seja-franqueado", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/Seja---Franqueado/", + "noFollow": false, + "tagTitle": "Seja Franqueado", + "text": "Seja Franqueado" + } + } } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index bea9431..584df55 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -19,28 +19,17 @@ justify-content: space-between; align-items: center; padding: 32px 40px; + column-gap: 16px; } @media (max-width: 2561px) and (min-width: 1920px) { .flexRow--main-header .flexRowContent--main-header { - width: 71.858%; margin: 0 auto; - padding: 32px 0; + padding: 32px 14.0593%; } } .flexRow--main-header .flexRowContent--main-header :global(.vtex-minicart-2-x-minicartWrapperContainer) :global(.vtex-minicart-2-x-minicartContainer) :global(.vtex-minicart-2-x-openIconContainer) { padding-right: 0; } -.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { - visibility: hidden; -} -.flexRow--main-header .flexRowContent--main-header :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { - content: ""; - background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); - visibility: visible; - width: 22px; - height: 18px; - padding: 0; -} .flexRow--main-header-mobile .flexRowContent--main-header-mobile { display: flex; @@ -74,33 +63,6 @@ width: 27.93px; height: 21px; } -.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { - visibility: hidden; -} -.flexRow--main-header-mobile .flexRowContent--main-header-mobile :global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { - content: ""; - background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); - visibility: visible; - width: 22px; - height: 18px; - padding: 0; - left: 0; - position: absolute; -} - -@media (max-width: 2561px) and (min-width: 1920px) { - .flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) { - margin-left: 308.08px; - } -} -.flexColChild :global(.vtex-menu-2-x-menuContainerNav) :global(.vtex-menu-2-x-menuContainer) :global(.vtex-menu-2-x-menuItem) :global(.vtex-menu-2-x-styledLink) :global(.vtex-menu-2-x-styledLinkContent) { - font-weight: 400; - font-size: 12px; - line-height: 16px; - letter-spacing: -0.1em; - text-transform: uppercase; - color: #929292; -} .flexRowContent { padding: 0; diff --git a/styles/css/vtex.login.css b/styles/css/vtex.login.css index e680a11..7af1030 100644 --- a/styles/css/vtex.login.css +++ b/styles/css/vtex.login.css @@ -7,13 +7,31 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +:global(.vtex-login-2-x-container) { + width: 22px; +} +:global(.vtex-login-2-x-container) :global(.vtex-button) { + width: 22px; + border: 0; +} @media (max-width: 768px) and (min-width: 375px) { - .buttonLink { - position: relative; + :global(.vtex-login-2-x-container) :global(.vtex-button) { left: 30px; - width: 22px; - } - .buttonLink :global(.vtex-button) { - width: 22px; } +} +:global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) { + visibility: hidden; + padding: 0; + width: 22px; +} +:global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-login-2-x-label) { + display: none; +} +:global(.vtex-login-2-x-container) :global(.vtex-button) :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.menu.css b/styles/css/vtex.menu.css index 78a531b..cf50512 100644 --- a/styles/css/vtex.menu.css +++ b/styles/css/vtex.menu.css @@ -7,6 +7,23 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@media (max-width: 2561px) and (min-width: 1920px) { + .menuContainerNav--header-menu .menuContainer--header-menu { + margin-left: 308.08px; + } +} +.menuContainerNav--header-menu .menuContainer--header-menu .menuItem .styledLinkContainer { + margin-right: 15px; +} +.menuContainerNav--header-menu .menuContainer--header-menu .menuItem .styledLinkContainer .styledLink .styledLinkContent { + font-weight: 400 !important; + font-size: 12px !important; + line-height: 16px !important; + letter-spacing: -0.1em; + text-transform: uppercase; + color: #929292 !important; +} + @media (max-width: 1025px) and (min-width: 768px) { .menuContainerNav .menuContainer { margin-bottom: 14px; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 9243a0d..90e06a3 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -59,12 +59,13 @@ } .listPrice .listPriceValue { padding: 0; + text-decoration-thickness: 1px; + color: #bababa; } .listPrice .listPriceValue .currencyContainer { font-weight: 400; font-size: 14px; line-height: 19px; - text-decoration-line: line-through; color: #bababa; display: block; } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 30c47f9..c4b72e4 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -44,6 +44,12 @@ line-height: 20px; text-align: center; color: rgba(255, 255, 255, 0.45); + white-space: nowrap; +} +@media (max-width: 768px) and (min-width: 375px) { + .container .wrapper .paragraph { + white-space: unset; + } } .container .wrapper .paragraph--footer { font-weight: 700; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a15ef33..5f40621 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,11 +13,29 @@ } .autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) { + height: 19px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #aeaeae; border-radius: 0; + display: flex; + flex-direction: row-reverse; +} +.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + padding-left: 12px; + padding-bottom: 6px; + background: unset; +} +.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + padding: 0 0 8px; + background: unset; +} +.autoCompleteOuterContainer:first-child :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) :global(.vtex-store-components-3-x-suffixWrapper) :global(.vtex-store-components-3-x-searchBarIcon) :global(.vtex-store-components-3-x-searchIcon) { + width: 10px; + height: 10px; + filter: invert(79%) sepia(0%) saturate(1412%) hue-rotate(140deg) brightness(90%) contrast(83%); } .container { diff --git a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss index 0e8f3c9..9a99deb 100644 --- a/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtexFlexLayout/vtex.flex-layout.scss @@ -11,10 +11,10 @@ justify-content: space-between; align-items: center; padding: 32px 40px; + column-gap: 16px; @media (max-width: 2561px) and (min-width: 1920px) { - width: 71.858%; margin: 0 auto; - padding: 32px 0; + padding: 32px 14.0593%; } :global(.vtex-minicart-2-x-minicartWrapperContainer) { :global(.vtex-minicart-2-x-minicartContainer) { @@ -23,21 +23,6 @@ } } } - :global(.vtex-login-2-x-container) { - :global(.vtex-button) { - :global(.vtex-button__label) { - visibility: hidden; - } - :global(.vtex-button__label)::before { - content: ""; - background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); - visibility: visible; - width: 22px; - height: 18px; - padding: 0; - } - } - } } } @@ -71,47 +56,6 @@ width: 27.93px; height: 21px; } - :global(.vtex-login-2-x-container) { - :global(.vtex-button) { - :global(.vtex-button__label) { - visibility: hidden; - } - :global(.vtex-button__label)::before { - content: ""; - background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); - visibility: visible; - width: 22px; - height: 18px; - padding: 0; - left: 0; - position: absolute; - } - } - } - } -} - -//Menu - -.flexColChild { - :global(.vtex-menu-2-x-menuContainerNav) { - :global(.vtex-menu-2-x-menuContainer) { - @media (max-width: 2561px) and (min-width: 1920px) { - margin-left: 308.08px; - } - :global(.vtex-menu-2-x-menuItem) { - :global(.vtex-menu-2-x-styledLink) { - :global(.vtex-menu-2-x-styledLinkContent) { - font-weight: 400; - font-size: 12px; - line-height: 16px; - letter-spacing: -0.1em; - text-transform: uppercase; - color: $gray; - } - } - } - } } } diff --git a/styles/sass/pages/product/vtexLogin/vtex.login.scss b/styles/sass/pages/product/vtexLogin/vtex.login.scss index 5942ec3..65cd34c 100644 --- a/styles/sass/pages/product/vtexLogin/vtex.login.scss +++ b/styles/sass/pages/product/vtexLogin/vtex.login.scss @@ -1,10 +1,26 @@ -@media (max-width: 768px) and (min-width: 375px) { - .buttonLink { - position: relative; - left: 30px; +:global(.vtex-login-2-x-container) { + width: 22px; + :global(.vtex-button) { width: 22px; - :global(.vtex-button) { + border: 0; + @media (max-width: 768px) and (min-width: 375px) { + left: 30px; + } + :global(.vtex-button__label) { + visibility: hidden; + padding: 0; width: 22px; + :global(.vtex-login-2-x-label) { + display: none; + } + } + :global(.vtex-button__label)::before { + content: ""; + background: url("https://agenciamagma.vteximg.com.br/arquivos/user-icon-m3academy-anacarolinaduartecavalcante.svg"); + visibility: visible; + width: 22px; + height: 18px; + padding: 0; } } } diff --git a/styles/sass/pages/product/vtexMenu/vtex.menu.scss b/styles/sass/pages/product/vtexMenu/vtex.menu.scss index 4e7f0ac..deae3b5 100644 --- a/styles/sass/pages/product/vtexMenu/vtex.menu.scss +++ b/styles/sass/pages/product/vtexMenu/vtex.menu.scss @@ -1,3 +1,28 @@ +//Header + +.menuContainerNav--header-menu { + .menuContainer--header-menu { + @media (max-width: 2561px) and (min-width: 1920px) { + margin-left: 308.08px; + } + .menuItem { + .styledLinkContainer { + margin-right: 15px; + .styledLink{ + .styledLinkContent{ + font-weight: 400 !important; + font-size: 12px !important; + line-height: 16px !important; + letter-spacing: -0.1em; + text-transform: uppercase; + color: $gray !important; + } + } + } + } + } +} + //Footer .menuContainerNav { diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss index c2f638f..9a502a2 100644 --- a/styles/sass/pages/product/vtexProduct/vtex.product-price.scss +++ b/styles/sass/pages/product/vtexProduct/vtex.product-price.scss @@ -51,11 +51,12 @@ } .listPriceValue { padding: 0; + text-decoration-thickness: 1px; + color: #bababa; .currencyContainer { font-weight: 400; font-size: 14px; line-height: 19px; - text-decoration-line: line-through; color: $BABABA; display: block; @media (max-width: 1025px) and (min-width: 768px) { diff --git a/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss b/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss index 9fa5917..6323ce6 100644 --- a/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtexRichText/vtex.rich-text.scss @@ -37,6 +37,10 @@ line-height: 20px; text-align: center; color: rgba(255, 255, 255, 0.45); + white-space: nowrap; + @media (max-width: 768px) and (min-width: 375px) { + white-space: unset; + } } .paragraph--footer { font-weight: 700; diff --git a/styles/sass/pages/product/vtexStore/vtex.store-components.scss b/styles/sass/pages/product/vtexStore/vtex.store-components.scss index cf8ae10..46bfeca 100644 --- a/styles/sass/pages/product/vtexStore/vtex.store-components.scss +++ b/styles/sass/pages/product/vtexStore/vtex.store-components.scss @@ -10,11 +10,33 @@ &:first-child { :global(.vtex-input) { :global(.vtex-input-prefix__group) { + height: 19px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #aeaeae; border-radius: 0; + display: flex; + flex-direction: row-reverse; + :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + padding-left: 12px; + padding-bottom: 6px; + background: unset; + } + :global(.vtex-input__suffix) { + padding: 0 0 8px; + background: unset; + :global(.vtex-store-components-3-x-suffixWrapper) { + :global(.vtex-store-components-3-x-searchBarIcon) { + :global(.vtex-store-components-3-x-searchIcon) { + width: 10px; + height: 10px; + filter: invert(79%) sepia(0%) saturate(1412%) hue-rotate(140deg) brightness(90%) contrast(83%); + } + } + } + } } } } @@ -217,7 +239,7 @@ border: 1px solid #989898; border-radius: unset; padding: 12px 14px; - width: 100%; + width: 100%; } :global(.vtex-styleguide-9-x-input)::placeholder { font-weight: 400;