From 98f937c702fb227b0845968e87707e3da2d292a8 Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Tue, 7 Feb 2023 19:18:27 -0300 Subject: [PATCH] feat(header-desktop/header-mobile): adiciona header descktop e mobile na pagina --- assets/pix.png | Bin 1437 -> 0 bytes react/components/Html/styles.css | 6 + store/blocks/header/header.jsonc | 72 ++++----- store/blocks/minicart.jsonc | 4 +- store/blocks/pdp/product.jsonc | 7 - styles/configs/font-faces.css | 4 - styles/configs/style.json | 26 +-- styles/css/vtex.flex-layout.css | 148 ++++++------------ styles/css/vtex.menu.css | 31 ++++ styles/css/vtex.minicart.css | 27 ++++ styles/css/vtex.store-components.css | 96 ++++++++++++ styles/css/vtex.store-drawer.css | 25 +++ styles/css/vtex.store-header.css | 25 +-- .../sass/pages/header/vtex.flex-layout.scss | 74 +++++++++ styles/sass/pages/header/vtex.menu.scss | 25 +++ styles/sass/pages/header/vtex.minicart.scss | 26 +++ .../pages/header/vtex.store-components.scss | 114 ++++++++++++++ .../sass/pages/header/vtex.store-drawer.scss | 20 +++ 18 files changed, 552 insertions(+), 178 deletions(-) delete mode 100644 assets/pix.png delete mode 100644 styles/configs/font-faces.css create mode 100644 styles/css/vtex.menu.css create mode 100644 styles/css/vtex.minicart.css create mode 100644 styles/css/vtex.store-drawer.css create mode 100644 styles/sass/pages/header/vtex.flex-layout.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.store-components.scss create mode 100644 styles/sass/pages/header/vtex.store-drawer.scss diff --git a/assets/pix.png b/assets/pix.png deleted file mode 100644 index e52663df64d8b6e21631f88cf4fe5a1494da8466..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1437 zcmV;O1!DS%P)K=X)!0_Y*<`HQ70M;P3w-N&*Tag=opa>C9Ao>Ip!!U}o5w!{sB$2hsA`ZwC zSmP6zIf2KBkx=AxSE@#&L{al0ZNZ*(V&T&Hl1w?RRE^53AMAw0! zySe$OFYnszAJ&M_jmETs&4>3}C%T%h;}lj-#{kyC5!L3&inSrnHrO*8Vu_fL(1WvZ zNWxNNhyhOicrX0CP^;H!L7Hs4z1!er_BS^lJe_^tYX7)n!$PB8kDuS^JlP(N?0ym% zkqrg50f|MJ~exHV5g^nUh1szY&D1XAj{wdy*-Mc18zBu|j_NNbPna%C=L zfY^uU4M>HhmNSXrMNzNUgK+d;Esl&$kAM;C_avPv7X z$JbJ##4H)$Z)kG`32k`D33?|jfeI7>u4HOtGIY-FX=R%kBus#-a2W`h z)I7d|x4?JbKiLW)JgjeQ_!1IQtxm{@_g2XfnF&ln!hm{eEbOOMk{S6-nML3rRL4Xw zU`YrG2E)FPFnxDM#_?Vp8QkF6R+`djUeF?})wQHba()hW;T_RzcFNrD4VEgm5KqDs zX=FIoadyzqDgs@o*R#oyBqT^05(RdoJjmG|#^n}*$NrtK_95#>cN5~(YS#gK3kmU? zjRy@_RF8xa;2M+AjU!HaHcon8GNan^cAMe zu306d^~9Ot89Cl-uoqbUPyfiPE!8!CY;a=U1s2pcDq5t+uUhsE->W@^PaGF^pW+#$ zkt+jc9&$uE;r6{Mya&u@d1;PL4`tHkvCO<&oUXKk85emYg$Z3J?<9SCqdmV;SvVx7 zIU>sRQXTlzNj6q6ECzB~<=C*q4tAnXlN%y02Fn$d3C4(5&6vKBQz|I(Fef?8aXBaK zBiRaH2grN$+3#&`JZ#CKP8c5db>XvZL=4ElYnHpki+G5Z&r=kvaJ6xrB%`Bh^2b4J znS2`(1l)(5dKqVbauf_gd64xPnjlmYFB}d72#fr-DEfn;o0GOL;B$!A63kHv>~wqx zc{l6e-<+?yFjh>ab-^kZlntUQNL6KGonqM-I%N4lq(5)_0IV}KfiCDC7=xLIw@gL} rwP~Qjb?GaZ{g!>>>?}*d$BzF2shJucJm38m00000NkvXXu0mjf)_IWV diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 736de39..1192bc5 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); + [class*="html--product-main"] { display: flex; gap: 32px; @@ -38,6 +40,10 @@ margin-top: 16px; } +[class*="html--header-mobile"] { + position: relative; +} + @media screen and (min-width: 1920px) { [class*="html--product-main"] { padding: 16px 360px 0; diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc index ce2dbd6..1214d35 100644 --- a/store/blocks/header/header.jsonc +++ b/store/blocks/header/header.jsonc @@ -6,24 +6,22 @@ "blocks": ["header-layout.desktop", "header-layout.mobile"] }, "header-layout.desktop": { - "children": ["header-row#1", "sticky-layout#2-desktop"] - }, - "flex-layout.col#spacer": { - "props": { - "width": "grow" - } - }, - "header-row#1": { - "children": ["header-border", "notification.bar#home"], - "props": { - "fullWidth": "true" - } + "children": ["notification.bar#home", "sticky-layout#2-desktop"] }, "notification.bar#home": { "props": { - "content": "Desconto na primeira compra" + "content": "Desconto na primeira compra", + "fullWidth": "true" } }, + + "flex-layout.row#1": { + "props": { + "blockClass": "login-card" + }, + "children": ["login", "minicart.v2"] + }, + "sticky-layout#2-desktop": { "props": { "blockClass": "sticky-header" @@ -42,17 +40,16 @@ "children": [ "flex-layout.col#logo-desktop", "flex-layout.col#category-menu", - "flex-layout.col#spacer", "search-bar", - "login", - "minicart.v2" + "flex-layout.row#1" ] }, "flex-layout.col#logo-desktop": { "props": { + "blockClass": "logo", "verticalAlign": "middle" }, - "children": ["logo#desktop"] + "children": ["logo"] }, "flex-layout.col#category-menu": { "props": { @@ -60,7 +57,7 @@ }, "children": ["vtex.menu@2.x:menu#category-menu"] }, - "logo#desktop": { + "logo": { "props": { "title": "Logo", "href": "/", @@ -69,6 +66,18 @@ "height": "33" } }, + + "search-bar": { + "props": { + "placeholder": "Faça sua busca" + } + }, + "login": { + "props": { + "blockClass": "login", + "hideIconLabel": true + } + }, "header-layout.mobile": { "children": ["sticky-layout#1-mobile"] }, @@ -77,17 +86,18 @@ }, "html#mobile": { - "children": ["header-row#1", "flex-layout.row#1-mobile", "search-bar"] + "props": { + "blockClass": "header-mobile" + }, + "children": [ + "notification.bar#home", + "flex-layout.row#1-mobile", + "search-bar" + ] }, "flex-layout.row#1-mobile": { - "children": [ - "drawer", - "logo#mobile", - "flex-layout.col#spacer", - "login", - "minicart.v2" - ], + "children": ["drawer", "logo", "flex-layout.row#1"], "props": { "blockClass": "main-header-mobile", "preventHorizontalStretch": true, @@ -112,15 +122,5 @@ "props": { "orientation": "vertical" } - }, - - "logo#mobile": { - "props": { - "title": "Logo", - "href": "/", - "url": "https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/d3007954-7fdd-4d38-956c-58286fa1a732___b77dbe0e7dea0eadd46b6ce55b80b74b.svg", - "width": "140", - "height": "33" - } } } diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..72a5325 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", + "blockClass": "add-to-cart-button", + "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 99fe3c7..020de70 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -190,13 +190,6 @@ "width": 128 } }, - "add-to-cart-button": { - "props": { - "blockClass": "add-to-cart-button", - "text": "ADICIONAR À SACOLA" - } - }, - "html#product-availability": { "props": { "blockClass": "product-main", diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css deleted file mode 100644 index 03ab4a7..0000000 --- a/styles/configs/font-faces.css +++ /dev/null @@ -1,4 +0,0 @@ -@font-face { - font-family: "Open Sans", sans-serif; - src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap"); -} diff --git a/styles/configs/style.json b/styles/configs/style.json index f1383ea..410357f 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -79,7 +79,7 @@ "semanticColors": { "background": { "base": "#ffffff", - "base--inverted": "#03044e", + "base--inverted": "#1f1f1f", "action-primary": "#000000", "action-secondary": "#eef3f7", "emphasis": "#f71963", @@ -113,7 +113,7 @@ "muted-5": "#f2f4f5" }, "active-background": { - "action-primary": "#0c389f", + "action-primary": "#3f3f40", "action-secondary": "#d2defc", "emphasis": "#dd1659", "success": "#8bc34a", @@ -129,9 +129,9 @@ "muted-5": "#f2f4f5" }, "text": { - "action-primary": "#0F3E99", + "action-primary": "#3f3f40", "action-secondary": "#eef3f7", - "link": "#0F3E99", + "link": "#3f3f40", "emphasis": "#f71963", "disabled": "#979899", "success": "#8bc34a", @@ -147,12 +147,12 @@ "muted-5": "#f2f4f5" }, "visited-text": { - "link": "#0c389f" + "link": "#3f3f40" }, "hover-text": { - "action-primary": "#072c75", + "action-primary": "#3f3f40", "action-secondary": "#dbe9fd", - "link": "#0c389f", + "link": "#3f3f40", "emphasis": "#dd1659", "success": "#8bc34a", "success--faded": "#eafce3", @@ -162,7 +162,7 @@ "warning--faded": "#fff6e0" }, "active-text": { - "link": "#0c389f", + "link": "#3f3f40", "emphasis": "#dd1659", "success": "#8bc34a", "success--faded": "#eafce3", @@ -205,7 +205,7 @@ "muted-5": "#f2f4f5" }, "active-border": { - "action-primary": "#0c389f", + "action-primary": "#3f3f40", "action-secondary": "#d2defc", "emphasis": "#dd1659", "success": "#8bc34a", @@ -224,7 +224,7 @@ "base": "#3f3f40", "base--inverted": "#ffffff", "action-primary": "#ffffff", - "action-secondary": "#0F3E99", + "action-secondary": "#3f3f40", "emphasis": "#ffffff", "disabled": "#979899", "success": "#ffffff", @@ -241,7 +241,7 @@ }, "hover-on": { "action-primary": "#ffffff", - "action-secondary": "#0F3E99", + "action-secondary": "#3f3f40", "emphasis": "#ffffff", "success": "#ffffff", "success--faded": "#3f3f40", @@ -252,7 +252,7 @@ }, "active-on": { "action-primary": "#ffffff", - "action-secondary": "#0F3E99", + "action-secondary": "#3f3f40", "emphasis": "#ffffff", "success": "#ffffff", "success--faded": "#3f3f40", @@ -431,4 +431,4 @@ 0.025, 0 ] -} +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a6b5ec9..2b6490a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,107 +1,59 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRow--main-header { + padding: 32px 40px; + background-color: #FFFFFF; } - -@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 { - padding: 0; - margin-top: 0; -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { +.flexRow--main-header .flexRowContent--main-header { + height: 33px; align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; + justify-content: space-between; +} +.flexRow--main-header .flexRowContent--main-header .flexCol--logo { + width: 140px; +} +.flexRow--main-header .flexRowContent--main-header :global(.vtex-button__label) { + padding: 0 !important; } -.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 { +.flexRow--login-card .flexRowContent--login-card { display: flex; - max-height: 100%; + gap: 39.95px; +} +.flexRow--login-card :global(.vtex-login-2-x-container) :global(.vtex-button__label)::after { + content: ""; + width: 20.37px; + height: 18px; + background-image: url(https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/92c546f2-6a91-4652-897e-03df8399a787___eef36bf5508e9b5e72228afa4b539d99.svg); + background-size: cover; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRow--main-header-mobile { + height: 128px; +} +.flexRow--main-header-mobile :global(.vtex-button__label) { + padding: 0 !important; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile { + padding: 32px 40px; + justify-content: space-between; + align-items: center; + height: 33px; +} +.flexRow--main-header-mobile .flexRowContent--main-header-mobile .flexRowContent { + justify-content: space-between; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} - -.flexRow--container-quantity-button { - display: flex; -} +@media screen and (max-width: 300px) { + .flexRow--login-card .flexRowContent--login-card { + display: flex; + gap: 10px; + } +} \ 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..cbf41fc --- /dev/null +++ b/styles/css/vtex.menu.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 */ +.menuContainer { + display: flex; + gap: 15px; +} +.menuContainer .styledLinkContainer { + margin: 0; + padding: 0; +} +.menuContainer .styledLinkContainer .styledLink { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + color: #929292; +} + +@media screen and (max-width: 1024px) { + .menuContainerNav { + margin-left: 20px; + } +} \ 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..f8d4a34 --- /dev/null +++ b/styles/css/vtex.minicart.css @@ -0,0 +1,27 @@ +/* +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 */ +.openIconContainer { + padding: 0; +} + +.minicartContainer :global(.vtex-button__label)::after { + content: ""; + width: 22.92px; + height: 20px; + background-size: cover; + background-image: url(https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/cac15af6-1cf1-4abd-8b86-16be35389922___23cb41edf57081b55d5f7dfe717aa5e8.svg); +} +.minicartContainer .minicartIconContainer .cartIcon { + width: 0; +} +.minicartContainer .minicartQuantityBadge { + right: -1.8rem; + background-color: black; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0cab2b8..556db07 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,6 +8,102 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.notificationBarContainer { + background-color: black; + height: 34px; +} +.notificationBarContainer .notificationBarInner { + min-height: 34px; +} +.notificationBarContainer .notificationContent { + display: flex; + align-items: center; + gap: 54px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; +} +.notificationBarContainer .notificationContent::before { + content: ""; + display: flex; + width: 6px; + height: 6px; + padding: 1px; + box-shadow: 1px -1px 0 0px #fff inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(45deg); +} +.notificationBarContainer .notificationContent::after { + content: ""; + display: flex; + width: 6px; + height: 6px; + padding: 1px; + box-shadow: 1px -1px 0 0px #fff inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(-135deg); +} + +.logoContainer { + padding: 0; +} + +.searchBarContainer { + padding: 0; +} +.searchBarContainer :global(.vtex-input-prefix__group) { + width: 243px; + border: 1px solid #AEAEAE; + border-width: 0 0 1px; + border-radius: 0; + flex-direction: row-reverse; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + background: transparent; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding-left: 12px; + font-weight: 300; + font-size: 12px; + line-height: 16px; + background: transparent; + color: #AEAEAE; +} +.searchBarContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + padding: 0; +} +.searchBarContainer .searchBarIcon { + padding: 0; +} +.searchBarContainer .searchBarIcon .searchIcon, +.searchBarContainer .searchBarIcon .closeIcon { + width: 10px; + height: 10px; + color: #AEAEAE; +} + +@media screen and (max-width: 1024px) { + .searchBarContainer { + max-width: 100%; + position: absolute; + bottom: 32px; + } + .searchBarContainer .autoCompleteOuterContainer { + max-width: 100%; + padding: 8px 40px 0; + } + .searchBarContainer .autoCompleteOuterContainer :global(.vtex-input-prefix__group) { + width: 100%; + } +} +@media screen and (max-width: 300px) { + .notificationBarContainer .notificationContent { + gap: 34px; + } +} .newsletter { background: red; } diff --git a/styles/css/vtex.store-drawer.css b/styles/css/vtex.store-drawer.css new file mode 100644 index 0000000..bb8de90 --- /dev/null +++ b/styles/css/vtex.store-drawer.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 */ +.openIconContainer { + display: flex; + padding: 0; + width: 27.93px; + height: 19.5px; +} +.openIconContainer::after { + content: ""; + width: 27.93px; + height: 19.5px; + background-size: cover; + background-image: url(https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/9ea5471c-474a-45f7-b9ea-d489b69054ca___1f13b7a9c350667423fb6b597b1b199f.svg); +} +.openIconContainer .menuIcon { + width: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-header.css b/styles/css/vtex.store-header.css index c240fd1..5c95ca8 100644 --- a/styles/css/vtex.store-header.css +++ b/styles/css/vtex.store-header.css @@ -9,24 +9,11 @@ display: block; } -/* desktop/mobile main header padding and background transitions */ -:global(.vtex-flex-layout-0-x-flexRowContent--main-header), -:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { - transition: background 0.3s ease; - will-change: padding, background; -} - -/* main header desktop has a bigger padding when not stuck */ -:global(.vtex-flex-layout-0-x-flexRowContent--main-header) { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - /* add a box-shadow to desktop/mobile header when stuck */ :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header), + :global(.vtex-flex-layout-0-x-flexRow--main-header), :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { + :global(.vtex-flex-layout-0-x-flexRow--main-header-mobile) { box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); } @@ -44,17 +31,17 @@ /* if supported add some translucency to the desktop/mobile header background */ @supports (backdrop-filter: blur(5px)) { :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header), + :global(.vtex-flex-layout-0-x-flexRow--main-header), :global(.vtex-sticky-layout-0-x-wrapper--stuck) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { + :global(.vtex-flex-layout-0-x-flexRow--main-header-mobile) { backdrop-filter: blur(8px); } /* header background when stuck and not hovered */ :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header), + :global(.vtex-flex-layout-0-x-flexRow--main-header), :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) - :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) { + :global(.vtex-flex-layout-0-x-flexRow--main-header-mobile) { background: rgba(240, 240, 240, 0.8); } } 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..06493a9 --- /dev/null +++ b/styles/sass/pages/header/vtex.flex-layout.scss @@ -0,0 +1,74 @@ +.flexRow--main-header { + padding: 32px 40px; + background-color: #FFFFFF; + + + .flexRowContent--main-header { + height: 33px; + align-items: center; + justify-content: space-between; + + + + .flexCol--logo { + width: 140px; + } + + + + :global(.vtex-button__label) { + padding: 0 !important; + } + + + } +} + +.flexRow--login-card { + .flexRowContent--login-card { + display: flex; + gap: 39.95px + } + + :global(.vtex-login-2-x-container) { + :global(.vtex-button__label) { + + &::after { + content: ""; + width: 20.37px; + height: 18px; + background-image: url(https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/92c546f2-6a91-4652-897e-03df8399a787___eef36bf5508e9b5e72228afa4b539d99.svg); + background-size: cover; + } + } + } +} + + +.flexRow--main-header-mobile { + height: 128px; + + :global(.vtex-button__label) { + padding: 0 !important; + } + + .flexRowContent--main-header-mobile { + padding: 32px 40px; + justify-content: space-between; + align-items: center; + height: 33px; + + .flexRowContent { + justify-content: space-between; + } + } +} + +@media screen and (max-width: 300px) { + .flexRow--login-card { + .flexRowContent--login-card { + display: flex; + gap: 10px + } + } +} \ No newline at end of file diff --git a/styles/sass/pages/header/vtex.menu.scss b/styles/sass/pages/header/vtex.menu.scss new file mode 100644 index 0000000..73f61a2 --- /dev/null +++ b/styles/sass/pages/header/vtex.menu.scss @@ -0,0 +1,25 @@ +.menuContainer { + display: flex; + gap: 15px; + + .styledLinkContainer { + margin: 0; + padding: 0; + + .styledLink { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: -0.1em; + text-transform: uppercase; + + color: #929292; + } + } +} + +@media screen and (max-width: 1024px) { + .menuContainerNav { + margin-left: 20px; + } +} \ No newline at end of file diff --git a/styles/sass/pages/header/vtex.minicart.scss b/styles/sass/pages/header/vtex.minicart.scss new file mode 100644 index 0000000..9f66284 --- /dev/null +++ b/styles/sass/pages/header/vtex.minicart.scss @@ -0,0 +1,26 @@ +.openIconContainer { + padding: 0; +} + +.minicartContainer { + :global(.vtex-button__label) { + &::after { + content: ""; + width: 22.92px; + height: 20px; + background-size: cover; + background-image: url(https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/cac15af6-1cf1-4abd-8b86-16be35389922___23cb41edf57081b55d5f7dfe717aa5e8.svg); + } + } + + .minicartIconContainer { + .cartIcon { + width: 0; + } + } + + .minicartQuantityBadge { + right: -1.8rem; + background-color: black; + } +} \ No newline at end of file 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..2295fbf --- /dev/null +++ b/styles/sass/pages/header/vtex.store-components.scss @@ -0,0 +1,114 @@ +.notificationBarContainer { + background-color: black; + height: 34px; + + .notificationBarInner { + min-height: 34px; + } + + .notificationContent { + display: flex; + align-items: center; + gap: 54px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; + + &::before { + content: ""; + display: flex; + width: 6px; + height: 6px; + padding: 1px; + box-shadow: 1px -1px 0 0px #fff inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(45deg); + } + + &::after { + content: ""; + display: flex; + width: 6px; + height: 6px; + padding: 1px; + box-shadow: 1px -1px 0 0px #fff inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(-135deg); + } + + } +} + +.logoContainer { + padding: 0; +} + +.searchBarContainer { + padding: 0; + + :global(.vtex-input-prefix__group) { + width: 243px; + border: 1px solid #AEAEAE; + border-width: 0 0 1px; + border-radius: 0; + flex-direction: row-reverse; + + :global(.vtex-input__suffix) { + background: transparent; + } + + :global(.vtex-styleguide-9-x-input) { + padding-left: 12px; + font-weight: 300; + font-size: 12px; + line-height: 16px; + background: transparent; + color: #AEAEAE; + } + + :global(.vtex-input__suffix) { + padding: 0; + } + } + + .searchBarIcon { + padding: 0; + + .searchIcon, + .closeIcon { + width: 10px; + height: 10px; + + color: #AEAEAE; + } + } +} + +@media screen and (max-width: 1024px) { + .searchBarContainer { + max-width: 100%; + position: absolute; + bottom: 32px; + + .autoCompleteOuterContainer { + max-width: 100%; + padding: 8px 40px 0; + + :global(.vtex-input-prefix__group) { + width: 100%; + + } + } + } +} + +@media screen and (max-width: 300px) { + .notificationBarContainer { + .notificationContent { + gap: 34px; + } + } +} \ No newline at end of file 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..12f5124 --- /dev/null +++ b/styles/sass/pages/header/vtex.store-drawer.scss @@ -0,0 +1,20 @@ +.openIconContainer { + display: flex; + padding: 0; + width: 27.93px; + height: 19.5px; + + + &::after { + content: ""; + + width: 27.93px; + height: 19.5px; + background-size: cover; + background-image: url(https://agenciamagma.vtexassets.com/assets/vtex.file-manager-graphql/images/9ea5471c-474a-45f7-b9ea-d489b69054ca___1f13b7a9c350667423fb6b597b1b199f.svg); + } + + .menuIcon { + width: 0; + } +} \ No newline at end of file