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

118 lines
1.9 KiB
SCSS
Raw Normal View History

2022-12-17 22:34:02 +01:00
/* Menu handling */
.menu {
display: flex;
flex-direction: column;
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
a,
a:visited {
@include shape-style($lineheight_half);
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;
@include shape-style($lineheight_half);
//@include button-hover();
@include prefer-no-borders();
.badge {
margin: 0;
}
}
&.fg-light,
.fg-light & {
a {
color: $color-font-light;
2023-04-24 20:14:42 +02:00
outline-color: $color-font-light;
2022-12-17 22:34:02 +01:00
&:hover,
&:active {
background-color: transparentize($color-font-light, 0.7);
}
}
2023-04-24 20:14:42 +02:00
input {
outline-color: $color-font-light;
}
2022-12-17 22:34:02 +01:00
}
&.fg-dark,
.fg-dark & {
a {
color: $color-font;
2023-04-24 20:14:42 +02:00
outline-color: $color-font;
2022-12-17 22:34:02 +01:00
&:hover,
&:active {
background-color: transparentize($color-font, 0.85);
}
}
2023-04-24 20:14:42 +02:00
input {
outline-color: $color-font;
}
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;
a,
span,
em,
strong,
&.toolbar-element {
display: block;
2023-05-02 11:51:10 +02:00
padding: $lineheight_rel/3;
padding-left: $lineheight_rel/2;
padding-right: $lineheight_rel/2;
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-05-02 11:20:14 +02:00
font-size:1em;
2023-05-02 11:51:10 +02:00
line-height:$lineheight_rel;
2022-12-17 22:34:02 +01:00
}
.menu-label {
@include shape-style($button_small);
@include button-hover();
padding-left: $button_small;
padding-right: $button_small;
}