amis/scss/components/_list-menu.scss
2020-05-15 16:47:08 +08:00

64 lines
1.6 KiB
SCSS

.#{$ns}ListMenu {
min-width: px2rem(200px);
border: $ListMenu-borderWidth solid $ListMenu-bordrColor;
border-radius: $ListMenu-borderRadius;
&-groupLabel {
font-size: $fontSizeXs;
color: $text--muted-color;
padding: (
$ListMenu-item-height - $Form-input-lineHeight * $Form-input-fontSize -
$gap-sm
)/2 0 0 ($Form-select-paddingX - $gap-xs);
}
&-group:not(:first-child) > &-groupLabel {
border-top: px2rem(1px) solid $ListMenu-divider-color;
}
&-item {
display: flex;
min-height: $ListMenu-item-height;
background: $ListMenu-item-bg;
color: $ListMenu-item-color;
line-height: $Form-input-lineHeight;
font-size: $Form-input-fontSize;
cursor: pointer;
padding: (
$ListMenu-item-height - $Form-input-lineHeight * $Form-input-fontSize
)/2 $Form-select-paddingX;
&.is-active {
color: $ListMenu-item--onActive-color;
background-color: $ListMenu-item--onActive-bg;
}
// &:hover,
&.is-highlight {
color: $ListMenu-item--onHover-color;
background-color: $ListMenu-item--onHover-bg;
}
&.is-disabled {
color: $ListMenu-item--onDisabled-color;
background-color: $ListMenu-item--onDisabled-bg;
}
}
&-placeholder {
display: block;
min-height: $ListMenu-item-height;
color: $text--muted-color;
line-height: $Form-input-lineHeight;
font-size: $Form-input-fontSize;
cursor: pointer;
padding: (
$ListMenu-item-height - $Form-input-lineHeight * $Form-input-fontSize
)/2 $Form-select-paddingX;
}
}
.#{$ns}PopOver > .#{$ns}ListMenu {
border-color: $listMenu--onActive-borderColor;
}