plate-tool/plate-tool-web/assets/scss/default_theme/components/_upper_menu.scss

92 lines
1.2 KiB
SCSS

@use "sass:color";
@use "../variables" as *;
div.upper_menu {
position: absolute;
top: 0px;
left: 0px;
$menu-height: min(2.5vh, 25px);
height: $menu-height;
padding-left: 1vw;
visibility: inherit;
display: flex;
div.dropdown {
margin-right: 2px;
position: relative;
display: flex;
flex-direction: column;
button {
vertical-align: top;
border: none;
padding: 0px 0.4em 0px 0.4em;
margin: 0;
cursor: pointer;
font-size: calc($menu-height*0.7);
width: 100%;
}
* {
visibility: hidden;
}
& > *:first-child {
outline: 1px solid $color-dark;
visibility: visible;
}
&:hover {
outline: 2px solid $color-dark;
z-index: 2;
* {
visibility: visible;
outline: 1px solid $color-dark;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
z-index: 1;
}
}
}
div.dropdown-sub {
position: relative;
height: $menu-height;
* {
visibility: hidden;
}
div {
display: none;
visibility: hidden;
}
& > *:first-child {
visibility: inherit;
}
&:hover {
visibility: visible;
div {
position: absolute;
left: 100%;
top: 0;
visibility: hidden;
display: flex;
flex-direction: column;
width: max-content;
}
}
}
}