amis/scss/components/_dropdown.scss

105 lines
2.1 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: var(--DropDown-caret-marginLeft);
2020-06-08 18:23:56 +08:00
display: inline-block;
vertical-align: top;
transition: transform var(--animation-duration) 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: var(--DropDown-menu-bg);
2019-12-06 09:58:08 +08:00
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);
2019-12-06 09:58:08 +08:00
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: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
2019-12-06 09:58:08 +08:00
white-space: nowrap;
box-sizing: border-box;
height: var(--DropDown-menu-height);
2019-12-06 09:58:08 +08:00
vertical-align: middle;
user-select: none;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:hover {
background: var(--DropDown-menuItem-onHover-bg);
color: var(--DropDown-menuItem-onHover-color);
2019-04-30 11:11:25 +08:00
}
&.is-active {
color: var(--DropDown-menuItem-onActive-color);
}
2019-12-06 09:58:08 +08:00
&:not(.is-disabled),
&:not(.disabled) {
cursor: pointer;
2019-04-30 11:11:25 +08:00
}
&.is-disabled {
cursor: not-allowed;
pointer-events: none;
color: var(--DropDown-menuItem-onDisabled-color);
}
2019-12-06 09:58:08 +08:00
&.#{$ns}DropDown-divider {
height: px2rem(1px);
margin: px2rem(9px) 0;
overflow: hidden;
background: var(--DropDown-menu-borderColor);
2019-12-06 09:58:08 +08:00
padding: 0;
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-menu > li a {
color: inherit;
2019-12-06 09:58:08 +08:00
display: block;
text-decoration: none;
}
&-popover {
border: none;
box-shadow: none;
}
2020-06-16 14:30:25 +08:00
> .#{$ns}Button {
min-width: unset;
}
}