78 lines
1.5 KiB
CSS
78 lines
1.5 KiB
CSS
|
.sui-dd {
|
||
|
|
position: relative;
|
||
|
|
display: inline-flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__menu {
|
||
|
|
position: absolute;
|
||
|
|
top: calc(100% + var(--space-1));
|
||
|
|
min-width: 12rem;
|
||
|
|
padding: var(--space-1);
|
||
|
|
background: var(--color-dropdown-bg);
|
||
|
|
border: 1px solid var(--color-dropdown-border);
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
box-shadow: var(--shadow-lg);
|
||
|
|
z-index: var(--z-dropdown);
|
||
|
|
animation: fadeInUp var(--motion-enter) both;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.0625rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__menu--start {
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
.sui-dd__menu--end {
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--space-2);
|
||
|
|
padding: var(--space-1_5) var(--space-2);
|
||
|
|
width: 100%;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 0.8125rem;
|
||
|
|
color: var(--color-text-2);
|
||
|
|
border-radius: var(--radius-sm);
|
||
|
|
transition:
|
||
|
|
background var(--motion-fast),
|
||
|
|
color var(--motion-fast);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__item:hover:not(.is-disabled) {
|
||
|
|
background: var(--color-dropdown-hover);
|
||
|
|
color: var(--color-text-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__item.is-active {
|
||
|
|
background: var(--color-nav-active);
|
||
|
|
color: var(--color-nav-active-text);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__item.is-disabled {
|
||
|
|
opacity: 0.4;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__item-leading,
|
||
|
|
.sui-dd__item-trailing {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__item-trailing {
|
||
|
|
margin-left: auto;
|
||
|
|
font-family: var(--font-mono);
|
||
|
|
font-size: 0.6875rem;
|
||
|
|
color: var(--color-text-5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sui-dd__divider {
|
||
|
|
height: 1px;
|
||
|
|
background: var(--color-divider);
|
||
|
|
margin: var(--space-1) 0;
|
||
|
|
}
|