amis/scss/components/_dropdown.scss
2021-04-08 12:52:33 +08:00

107 lines
2.2 KiB
SCSS

.#{$ns}DropDown {
position: relative;
display: inline-block;
&-caret {
margin-left: var(--DropDown-caret-marginLeft);
display: inline-block;
vertical-align: top;
transition: transform var(--animation-duration) ease;
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0.125em;
}
}
&.is-opened &-caret {
transform: rotate(180deg);
}
&--block {
display: block;
.#{$ns}Button {
display: block;
}
}
&-menu {
position: absolute;
z-index: $zindex-dropdown;
top: 100%;
left: 0;
margin: px2rem(1px) 0 0;
background: var(--DropDown-menu-bg);
list-style: none;
padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
border: var(--DropDown-menu-borderWidth) solid
var(--DropDown-menu-borderColor);
border-radius: var(--DropDown-menu-borderRadius);
box-shadow: var(--DropDown-menu-boxShadow);
min-width: var(--DropDown-menu-minWidth);
text-align: left;
}
&--alignRight &-menu {
left: auto;
right: 0;
}
&-menuItem,
&-menu > li {
padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
white-space: nowrap;
box-sizing: border-box;
height: var(--DropDown-menu-height);
vertical-align: middle;
user-select: none;
color: var(--link-color);
text-decoration: var(--link-decoration);
&:hover {
background: var(--DropDown-menuItem-onHover-bg);
color: var(--DropDown-menuItem-onHover-color);
}
&.is-active {
color: var(--DropDown-menuItem-onActive-color);
}
&:not(.is-disabled),
&:not(.disabled) {
cursor: pointer;
}
&.is-disabled {
cursor: not-allowed;
pointer-events: none;
color: var(--DropDown-menuItem-onDisabled-color);
}
&.#{$ns}DropDown-divider {
height: px2rem(1px);
margin: px2rem(9px) 0;
overflow: hidden;
background: var(--DropDown-menu-borderColor);
padding: 0;
}
}
&-menu > li a {
color: inherit;
display: block;
text-decoration: none;
}
&-popover {
border: none;
box-shadow: none;
}
> .#{$ns}Button {
min-width: unset;
}
}