feat(header-desktop/header-mobile): adiciona header descktop e mobile na pagina
This commit is contained in:
amanda almeida
parent
81244d9edb
commit
98f937c702
BIN
assets/pix.png
BIN
assets/pix.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
@ -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;
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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");
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
.flexRow--main-header .flexRowContent--main-header {
|
||||
height: 33px;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 40em) {
|
||||
.flexRowContent--menu-link,
|
||||
.flexRowContent--main-header {
|
||||
padding: 0 1rem;
|
||||
.flexRow--login-card .flexRowContent--login-card {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 300px) {
|
||||
.flexRow--login-card .flexRowContent--login-card {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
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 {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:first-child {
|
||||
overflow-y: auto;
|
||||
height: 66% !important;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.flexColChild--quickviewDetails:last-child {
|
||||
height: 34% !important;
|
||||
}
|
||||
|
||||
.flexRow--addToCartRow {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flexRow--container-quantity-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
31
styles/css/vtex.menu.css
Normal file
31
styles/css/vtex.menu.css
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
27
styles/css/vtex.minicart.css
Normal file
27
styles/css/vtex.minicart.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
25
styles/css/vtex.store-drawer.css
Normal file
25
styles/css/vtex.store-drawer.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
74
styles/sass/pages/header/vtex.flex-layout.scss
Normal file
74
styles/sass/pages/header/vtex.flex-layout.scss
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
25
styles/sass/pages/header/vtex.menu.scss
Normal file
25
styles/sass/pages/header/vtex.menu.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
26
styles/sass/pages/header/vtex.minicart.scss
Normal file
26
styles/sass/pages/header/vtex.minicart.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
114
styles/sass/pages/header/vtex.store-components.scss
Normal file
114
styles/sass/pages/header/vtex.store-components.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
styles/sass/pages/header/vtex.store-drawer.scss
Normal file
20
styles/sass/pages/header/vtex.store-drawer.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user