mirror of
https://github.com/zoriya/flood.git
synced 2025-12-20 14:15:15 +00:00
90 lines
1.9 KiB
SCSS
90 lines
1.9 KiB
SCSS
$menu--background: rgba(#fff, 0.98);
|
|
$menu--container--border: rgba($background, 0.075);
|
|
$menu--container--shadow: rgba($background, 0.15);
|
|
$menu--label: #abbac7;
|
|
$menu--value: #8899a8;
|
|
$menu--value--active: #4e6a7c;
|
|
$menu--header--border: rgba($background, 0.05);
|
|
$menu--item--background--hover: rgba($main-content--background, 0.4);
|
|
$menu--item--foreground: #95a2ad;
|
|
$menu--item--foreground--hover: darken($menu--item--foreground, 10%);
|
|
$menu--item--secondary--foreground: lighten($menu--item--foreground, 20%);
|
|
$menu--item--foreground--active: $blue;
|
|
$menu--item--separator--background: $menu--container--border;
|
|
|
|
.menu {
|
|
background: $menu--background;
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
0 0 0 1px $menu--container--border,
|
|
0 1px 4px $menu--container--shadow,
|
|
0 3px 15px $menu--container--shadow;
|
|
color: $menu--item--foreground;
|
|
text-align: left;
|
|
|
|
&__item {
|
|
padding: 5px 15px;
|
|
|
|
&__label {
|
|
|
|
&--primary {
|
|
|
|
&.has-action {
|
|
display: flex;
|
|
|
|
.menu {
|
|
|
|
&__item {
|
|
|
|
&__label {
|
|
flex: 1 1 auto;
|
|
|
|
&__action {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
color: $menu--item--secondary--foreground;
|
|
display: block;
|
|
font-size: 0.85em;
|
|
}
|
|
}
|
|
|
|
&--separator {
|
|
background: $menu--item--separator--background;
|
|
height: 1px;
|
|
margin: 5px 0;
|
|
padding: 0;
|
|
}
|
|
|
|
&.is-selectable {
|
|
cursor: pointer;
|
|
display: block;
|
|
font-size: 0.9em;
|
|
transition: background 0.25s, color 0.25s;
|
|
|
|
&:hover {
|
|
background: $menu--item--background--hover;
|
|
color: $menu--item--foreground--hover;
|
|
}
|
|
|
|
&.is-selected {
|
|
color: $menu--item--foreground--active;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-enter {
|
|
animation: fade-in 0.25s both;
|
|
}
|
|
|
|
&-leave {
|
|
animation: fade-out 0.25s both;
|
|
}
|
|
}
|