amis/scss/components/form/_nested-select.scss
qinhaoyan a64041efbe
feat:级联组件支持边框设置 (#2490)
Co-authored-by: qinhaoyan <qinhaoyan@baidu.com>
2021-09-01 21:15:34 +08:00

87 lines
2.0 KiB
SCSS

.#{$ns}NestedSelect {
position: relative;
@include input-border();
&-optionArrowRight {
display: inline-block;
padding-right: px2rem(10px);
svg {
width: px2rem(12px);
height: px2rem(12px);
fill: var(--Form-input-iconColor);
}
}
&-menuOuter {
display: flex;
}
&-noResult {
width: px2rem(160px);
padding: 0 var(--gap-xs);
color: var(--Form-select-placeholderColor);
line-height: var(--Form-input-lineHeight);
font-size: var(--Form-select-input-fontSize);
user-select: none;
padding: calc(
(
var(--Form-select-menu-height) - var(--Form-input-lineHeight) *
var(--Form-input-fontSize)
) / 2
)
var(--Form-select-paddingX);
}
&-menu {
width: px2rem(160px);
height: px2rem(175px); // 高度写死,否则有可能会上下闪动
background: var(--Form-select-menu-bg);
color: var(--Form-select-menu-color);
border: var(--Form-select-outer-borderWidth) solid
var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-select-outer-boxShadow);
overflow-y: auto;
overflow-x: hidden;
&:not(:first-child) {
border-left: 0;
}
.#{$ns}NestedSelect-option {
position: relative;
padding-left: var(--gap-md);
min-height: var(--Form-input-height);
line-height: var(--Form-input-height);
cursor: pointer;
display: flex;
> .#{$ns}NestedSelect-optionLabel {
flex: 1;
&.is-disabled {
cursor: not-allowed;
color: var(--text--muted-color);
}
}
&.is-active {
color: var(--Form-select-menu-onActive-color);
background: var(--Form-select-menu-onActive-bg);
}
&:hover {
color: var(--Form-select-menu-onHover-color);
background: var(--Form-select-menu-onHover-bg);
}
&:hover > .#{$ns}NestedSelect-childrenOuter {
display: block;
}
&.checkall {
border-bottom: px2rem(1px) solid #eceff8;
}
}
}
}