80 lines
1.3 KiB
SCSS
80 lines
1.3 KiB
SCSS
@use '../../styles/mixins' as *;
|
|
@use '../../styles/variables' as *;
|
|
@use 'sass:color';
|
|
|
|
.ui-dropdown {
|
|
$self: &;
|
|
|
|
position: relative;
|
|
display: inline-flex;
|
|
|
|
&__overlay {
|
|
position: fixed;
|
|
z-index: 6999;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
pointer-events: none;
|
|
transition: background-color .2s ease-out;
|
|
|
|
&.is-active {
|
|
background-color: color.change($clr-black, $alpha: 0.15);
|
|
}
|
|
}
|
|
|
|
&__popper {
|
|
min-width: 170px;
|
|
z-index: 7000;
|
|
}
|
|
|
|
&__dropdown {
|
|
//overflow: hidden;
|
|
border-radius: 12px;
|
|
background-color: $clr-white;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-dropdown-item {
|
|
@include txt-m-m('dropdown-item');
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--dropdown-item-padding, 12px 16px);
|
|
background-color: $clr-white;
|
|
transition: background-color .2s ease-out;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $clr-grey-200;
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
background-color: $clr-grey-300;
|
|
}
|
|
|
|
&__icon {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.ui-dropdown-separator {
|
|
height: 1px;
|
|
width: 100%;
|
|
background-color: $clr-grey-200;
|
|
margin-block: 12px;
|
|
}
|
|
|