amis/scss/components/_dropdown.scss

93 lines
1.8 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}DropDown {
2019-12-06 09:58:08 +08:00
position: relative;
display: inline-block;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-caret {
margin-left: $DropDown-caret-marginLeft;
2020-06-08 18:23:56 +08:00
display: inline-block;
vertical-align: top;
transition: transform 0.2s ease;
2020-06-08 15:49:45 +08:00
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0.125em;
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2020-06-08 18:23:56 +08:00
&.is-opened &-caret {
transform: rotate(180deg);
}
2019-12-06 09:58:08 +08:00
&--block {
display: block;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
.#{$ns}Button {
display: block;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-menu {
position: absolute;
z-index: $zindex-dropdown;
top: 100%;
left: 0;
margin: px2rem(1px) 0 0;
background-color: $DropDown-menu-bg;
list-style: none;
padding: $DropDown-menu-paddingY $DropDown-menu-paddingX;
border: $DropDown-menu-borderWidth solid $DropDown-menu-borderColor;
border-radius: $DropDown-menu-borderRadius;
box-shadow: $DropDown-menu-boxShadow;
min-width: $DropDown-menu-minWidth;
text-align: left;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&--alignRight &-menu {
left: auto;
right: 0;
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-menuItem,
&-menu > li {
padding: $DropDown-menuItem-paddingY $DropDown-menuItem-paddingX;
white-space: nowrap;
box-sizing: border-box;
height: $DropDown-menu-height;
vertical-align: middle;
user-select: none;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:hover {
background-color: $DropDown-menuItem-onHover-bg;
color: $DropDown-menuItem-onHover-color;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&:not(.is-disabled),
&:not(.disabled) {
cursor: pointer;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&.#{$ns}DropDown-divider {
height: px2rem(1px);
margin: px2rem(9px) 0;
overflow: hidden;
background-color: $DropDown-menu-borderColor;
padding: 0;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-menu > li a {
display: block;
text-decoration: none;
}
&-popover {
border: none;
box-shadow: none;
}
2020-06-16 14:30:25 +08:00
> .#{$ns}Button {
min-width: unset;
}
}