2024-09-13 21:19:47 +00:00
|
|
|
:root {
|
2024-09-23 09:04:36 +00:00
|
|
|
--menu-bg-color: var(--body-color);
|
|
|
|
--menu-border-color: var(--gray-200);
|
|
|
|
--menu-border-radius: var(--border-radius);
|
|
|
|
--menu-box-shadow: var(--box-shadow);
|
|
|
|
--menu-item-color: var(--text-color);
|
|
|
|
--menu-item-hover-color: var(--primary-text-color);
|
|
|
|
--menu-item-bg-color: transparent;
|
|
|
|
--menu-item-hover-bg-color: var(--primary-color-shade);
|
2024-09-13 21:19:47 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Menus */
|
|
|
|
.menu {
|
2024-09-23 09:04:36 +00:00
|
|
|
background: var(--menu-bg-color);
|
|
|
|
border: solid 1px var(--menu-border-color);
|
|
|
|
border-radius: var(--menu-border-radius);
|
|
|
|
box-shadow: var(--menu-box-shadow);
|
|
|
|
list-style: none;
|
|
|
|
margin: 0;
|
|
|
|
min-width: var(--control-width-xs);
|
|
|
|
transform: translateY(var(--layout-spacing-sm));
|
|
|
|
z-index: var(--zindex-3);
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
&.menu-nav {
|
|
|
|
background: transparent;
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
.menu-item {
|
|
|
|
margin-top: 0;
|
|
|
|
padding: 0 var(--unit-4);
|
|
|
|
position: relative;
|
|
|
|
text-decoration: none;
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
&:first-of-type {
|
|
|
|
padding-top: var(--unit-2);
|
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
&:last-of-type {
|
|
|
|
padding-bottom: var(--unit-2);
|
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
& > a,
|
|
|
|
.btn.btn-link {
|
|
|
|
border-radius: var(--menu-border-radius);
|
|
|
|
color: var(--menu-item-color);
|
|
|
|
background: var(--menu-item-bg-color);
|
|
|
|
display: block;
|
|
|
|
margin: 0 calc(-1 * var(--unit-2));
|
|
|
|
padding: var(--unit-1) var(--unit-2);
|
|
|
|
text-decoration: none;
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
&:focus,
|
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&.active {
|
|
|
|
background: var(--menu-item-hover-bg-color);
|
|
|
|
color: var(--menu-item-hover-color);
|
|
|
|
}
|
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
.form-checkbox,
|
|
|
|
.form-radio,
|
|
|
|
.form-switch {
|
|
|
|
margin: var(--unit-h) 0;
|
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
& + .menu-item {
|
|
|
|
margin-top: var(--unit-1);
|
2024-09-13 21:19:47 +00:00
|
|
|
}
|
2024-09-23 09:04:36 +00:00
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
& .menu-badge {
|
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
.label {
|
|
|
|
margin-right: var(--unit-2);
|
2024-09-13 21:19:47 +00:00
|
|
|
}
|
2024-09-23 09:04:36 +00:00
|
|
|
}
|
2024-09-13 21:19:47 +00:00
|
|
|
|
2024-09-23 09:04:36 +00:00
|
|
|
& .divider {
|
|
|
|
border-bottom: solid 1px var(--secondary-border-color);
|
|
|
|
margin: var(--unit-2) 0;
|
|
|
|
}
|
|
|
|
}
|