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.
qdouze2-wordpress-theme/scss/components/_menus.scss

122 lines
2 KiB
SCSS
Raw Normal View History

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