65 lines
893 B
SCSS
65 lines
893 B
SCSS
.dropdown {
|
|
position: relative;
|
|
z-index: 20;
|
|
overflow: visible;
|
|
|
|
}
|
|
|
|
.dropdown-button > div {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
overflow: visible;
|
|
position: absolute;
|
|
border-radius: 12px;
|
|
z-index: 20;
|
|
background: var(--background);
|
|
filter: brightness(97%);
|
|
transition: 600ms;
|
|
flex-grow: 1;
|
|
top: 35px;
|
|
min-width: max-content;
|
|
|
|
&.orientation-right {
|
|
right: 0;
|
|
}
|
|
|
|
&.orientation-left {
|
|
left: 0;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.dropdown-header, .dropdown-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
text-wrap: nowrap;
|
|
|
|
|
|
}
|
|
|
|
.dropdown-header {
|
|
padding: 10px;
|
|
}
|
|
|
|
.dropdown-item {
|
|
font-size: 14px;
|
|
padding: 3px 10px;
|
|
&:hover{
|
|
background: var(--background);
|
|
filter: brightness(97%);
|
|
border-radius: 12px;
|
|
}
|
|
.button-icon {
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
} |