You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.6 KiB
86 lines
1.6 KiB
@layer components { |
|
/** |
|
* @file |
|
* Visual styles for menu. |
|
*/ |
|
|
|
ul.menu { |
|
margin-left: 1em; /* LTR */ |
|
padding: 0; |
|
list-style: none outside; |
|
text-align: left; /* LTR */ |
|
} |
|
[dir="rtl"] ul.menu { |
|
margin-right: 1em; |
|
margin-left: 0; |
|
text-align: right; |
|
} |
|
.menu-item--expanded { |
|
list-style-type: circle; |
|
list-style-image: url(../../images/icons/menu-expanded.png); |
|
} |
|
.menu-item--collapsed { |
|
list-style-type: disc; |
|
list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */ |
|
} |
|
[dir="rtl"] .menu-item--collapsed { |
|
list-style-image: url(../../images/icons/menu-collapsed-rtl.png); |
|
} |
|
.menu-item { |
|
margin: 0; |
|
padding-top: 0.2em; |
|
} |
|
ul.menu a.is-active { |
|
color: #000; |
|
} |
|
/* dropdown behaviours */ |
|
|
|
/* add the region with a menu in it to convert to a dropdown */ |
|
/* check the menu js behaviour when adding new dropdowns */ |
|
header { |
|
.menu { |
|
display: flex; |
|
} |
|
.menu ul { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.menu > ul { |
|
display: flex; |
|
gap: 1rem; |
|
} |
|
|
|
.menu li { |
|
position: relative; |
|
} |
|
|
|
/* Hide submenus */ |
|
.menu li ul { |
|
position: absolute; |
|
top: 100%; |
|
left: 0; |
|
display: none; |
|
min-width: 200px; |
|
background: white; |
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
/* Show submenu on hover */ |
|
.menu li:hover > ul { |
|
display: block; |
|
} |
|
|
|
/* Optional styling */ |
|
.menu a { |
|
display: block; |
|
padding: 0.75rem 1rem; |
|
text-decoration: none; |
|
} |
|
|
|
.menu li ul li a { |
|
padding: 0.5rem 1rem; |
|
} |
|
} |
|
}
|
|
|