This repository has been archived on 2024-04-03. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-wordpress-theme/scss/components/_menus.scss

121 lines
2 KiB
SCSS
Raw Normal View History

.menu {
display: flex;
flex-direction: column;
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
a,
a:visited {
display: flex;
line-height: $lineheight_rel;
padding: $lineheight_rel / 4;
margin: 0;
justify-content: space-between;
align-items: center;
text-decoration: none;
word-wrap: none;
text-overflow: ellipsis;
overflow: hidden;
.badge {
margin: 0;
}
}
2023-10-13 09:11:42 +02:00
a {
color: var(--text-color);
outline-color: var(--text-color);
2023-10-13 09:11:42 +02:00
&:hover,
&:active,
&.submenu:focus {
background-color: var(--link-color-hover);
}
}
}
.submenu .fa-caret-down {
position: relative;
top: 2px;
font-size:0.8em;
}
.toolbar {
flex-direction: row;
padding: $lineheight_rel/4;
ul {
display: flex;
flex-direction: row;
flex-grow: 1;
}
li {
text-align: center;
position: relative;
a,
span,
em,
strong,
&.toolbar-element {
display: block;
2023-10-13 09:11:42 +02:00
padding: $lineheight_rel/3 $lineheight_rel/2;
}
ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 0rem;
left: 0;
display: none;
padding:0.33rem;
z-index:2;
2023-10-13 09:11:42 +02:00
background-color: $color-background-alt;
}
&:hover ul,
ul:hover,
&:focus-within ul {
visibility: visible;
opacity: 1;
display: flex;
flex-direction: column;
border-radius: $card-radius;
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
width: max-content;
li {
text-align:left;
}
}
}
}
.menu-divider,
.menu ul h1,
ul.menu h1,
.menu h2,
ul.menu h2 {
position: relative;
left: -$lineheight_rel / 4;
font-weight: $fontweight_hyper;
padding-top: $lineheight_rel / 4;
padding-bottom: $lineheight_rel / 4;
font-size:1em;
line-height:$lineheight_rel;
}
.menu-label {
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;
}