amis2/scss/components/form/_nested-select.scss
VitoBeijing ae905e12a4
feat: cascader-select 组件升级 (#3450)
* feat: cascader-select 组件升级

* fix:无结果文案参数展示

* fix: review建议,优化节点选中的判断逻辑,移动端样式适配

* fix: 代码rebase问题,clear icon覆盖
2022-02-18 14:04:48 +08:00

102 lines
2.3 KiB
SCSS

.#{$ns}NestedSelectControl {
position: relative;
}
.#{$ns}NestedSelect {
position: relative;
@include input-border();
&-optionArrowRight {
display: inline-block;
padding-right: px2rem(40px);
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;
height: px2rem(32px);
&.is-disabled {
cursor: not-allowed;
color: var(--text--muted-color);
}
}
.#{$ns}NestedSelect-optionLabel-highlight {
color: var(--Form-select-menu-onActive-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;
}
&.no-result {
justify-content: center;
cursor: default;
&:hover {
color: unset;
background: unset;
}
}
}
}
&-popup {
height: px2rem(460px);
}
}