amis/packages/amis-ui/scss/components/form/_nested-select.scss
qkiroc d841acf5d7
styles: 下拉框、日期、时间组件主题样式 (#6184)
* 单测范围修改 (#6133)

* 单测范围修改

* 单测范围修改

* feat:下拉框&时间/日期选择器主题适配 (#6134)

* feat: select支持主题变量配置

* feat:下拉框&时间/日期选择器主题适配

* fix:更新测试用例

* fix:代码扫描修复

* fix:代码扫描修复

---------

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* feat:下拉框主题样式优化 (#6142)

* feat:下拉框主题样式优化

* fix:测试用例修复

---------

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix: 下拉框&日期测试修复 (#6183)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix:恢复测试用例 (#6189)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix:恢复测试用例 (#6191)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com>
Co-authored-by: hongyang03 <hongyang03@baidu.com>
2023-02-20 12:34:43 +08:00

117 lines
2.9 KiB
SCSS

.#{$ns}NestedSelectControl {
position: relative;
.#{$ns}NestedSelect-menu {
padding-top: px2rem(4px);
padding-bottom: px2rem(4px);
box-shadow: 0 px2rem(2px) px2rem(8px) 0 rgba(7, 12, 20, 0.12);
}
}
.#{$ns}NestedSelect {
position: relative;
@include input-border();
&-optionArrowRight {
display: inline-block;
padding-right: var(--Form-select-icon-rigin);
svg {
width: px2rem(12px);
height: px2rem(12px);
fill: var(--Form-input-iconColor);
color: var(--default-icon-color);
}
}
&-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);
min-height: px2rem(32px);
max-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(--select-base-default-option-line-height);
line-height: var(--select-base-default-option-line-height);
cursor: pointer;
display: flex;
font-size: var(--select-base-default-option-fontSize);
font-weight: var(--select-base-default-option-fontWeight);
color: var(--select-base-default-option-color);
background: var(--select-base-default-option-bg-color);
> .#{$ns}NestedSelect-optionLabel {
flex: 1;
height: px2rem(32px);
overflow: hidden;
text-overflow: ellipsis;
&.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;
color: var(--Form-select-placeholderColor);
&:hover {
color: unset;
background: unset;
}
}
}
}
&-popup {
height: px2rem(460px);
}
}