m3-academy-template-vtexio-.../custom/react/components/Menu/MenuItem/MenuItem.css

86 lines
1.4 KiB
CSS
Raw Normal View History

2022-08-11 13:06:07 +00:00
.menuItem {
margin: 0 20px 0 0;
}
.menuItem:last-child {
margin: 0;
}
.menuItemLink {
display: inline-block;
font-size: 16px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
2022-08-11 13:33:06 +00:00
color: #4b4b4d;
transition: color 0.4s ease;
2022-08-11 13:06:07 +00:00
}
.menuItemLink::before {
content: "";
position: absolute;
width: 100px;
height: 50px;
top: 0;
}
.dynamicSubMenuContainer {
position: absolute;
background: #fff;
width: 100%;
left: 0;
bottom: 0;
transform: translateY(100%);
z-index: 1;
}
.dynamicSubMenuWrapper {
display: flex;
justify-content: space-between;
height: 100%;
padding: 45px;
margin: 0 auto;
}
2022-08-11 13:33:06 +00:00
.agenciamagma-m3-custom-0-x-nav {
2022-08-11 13:06:07 +00:00
width: 100%;
}
.dynamicSubMenuContainer::before {
content: "";
display: block;
height: 15px;
width: 100%;
left: 0;
position: absolute;
top: -14px;
}
.subMenuItem {
z-index: 2;
width: fit-content;
}
.subMenuLink {
display: block;
font-family: "Roboto", sans-serif;
font-size: 16px;
2022-08-11 13:33:06 +00:00
color: #4b4b4d;
2022-08-11 13:06:07 +00:00
text-decoration: none;
z-index: 2;
margin: 0 0 10px;
}
.dynamicSubMenuItems {
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
padding: 0;
}
.subMenuItemBreak {
width: 0px;
height: 100%;
margin-right: 40px;
}
.subMenuLastItem {
display: inline-block;
}