mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
d841acf5d7
* 单测范围修改 (#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>
411 lines
8.8 KiB
SCSS
411 lines
8.8 KiB
SCSS
.#{$ns}Selection {
|
|
> .#{$ns}Checkbox {
|
|
display: block;
|
|
// height: var(--Form-input-height);
|
|
line-height: var(--Form-input-lineHeight);
|
|
font-size: var(--Form-input-fontSize);
|
|
padding: calc(
|
|
(
|
|
var(--Form-input-height) - var(--Form-input-lineHeight) *
|
|
var(--Form-input-fontSize)
|
|
) / 2
|
|
)
|
|
var(--gap-sm)
|
|
calc(
|
|
(
|
|
var(--Form-input-height) - var(--Form-input-lineHeight) *
|
|
var(--Form-input-fontSize)
|
|
) / 2
|
|
)
|
|
calc(var(--gap-sm) + var(--Checkbox-size));
|
|
}
|
|
|
|
&--inline > .#{$ns}Checkbox {
|
|
display: inline-block;
|
|
}
|
|
|
|
&-addBtn {
|
|
display: block;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
> svg {
|
|
width: px2rem(14px);
|
|
height: px2rem(14px);
|
|
margin-right: var(--Checkbox-gap);
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}GroupedSelection {
|
|
max-height: px2rem(300px);
|
|
height: 100%;
|
|
overflow: auto;
|
|
user-select: none;
|
|
padding: var(--gap-xs) 0;
|
|
|
|
&-group > &-itemLabel {
|
|
padding: var(--select-group-paddingTop) var(--select-group-paddingRight)
|
|
var(--select-group-paddingBottom) var(--select-group-paddingLeft);
|
|
color: var(--select-group-color);
|
|
font-size: var(--select-group-fontSize);
|
|
font-weight: var(--select-group-fontWeight);
|
|
line-height: var(--select-group-lineHeight);
|
|
}
|
|
|
|
&-item {
|
|
display: flex;
|
|
color: var(--select-base-default-option-color);
|
|
background: var(--select-base-default-option-bg-color);
|
|
line-height: var(--select-base-default-option-line-height);
|
|
font-size: var(--select-base-default-option-fontSize);
|
|
font-weight: var(--select-base-default-option-fontWeight);
|
|
padding: var(--select-base-default-option-paddingTop)
|
|
var(--select-base-default-option-paddingRight)
|
|
var(--select-base-default-option-paddingBottom)
|
|
var(--select-base-default-option-paddingLeft);
|
|
flex-direction: row;
|
|
|
|
> .#{$ns}Checkbox {
|
|
margin-right: px2rem(10px);
|
|
}
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
color: var(--Form-select-menu-onHover-color);
|
|
background: var(--Form-select-menu-onHover-bg);
|
|
|
|
i {
|
|
border: 1px solid var(--menu-active-color);
|
|
}
|
|
}
|
|
|
|
&.is-active,
|
|
&.is-focused,
|
|
&.is-opened {
|
|
color: var(--Form-select-menu-onActive-color);
|
|
background: var(--Form-select-menu-onActive-bg);
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: var(--Form-select-menu-onDisabled-color);
|
|
background: var(--Form-select-menu-onDisabled-bg);
|
|
}
|
|
}
|
|
|
|
&-group > &-items > &-item {
|
|
padding-left: calc(var(--gap-base) * 2);
|
|
}
|
|
|
|
&-itemLabel {
|
|
flex-grow: 1;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
white-space: nowrap; // 避免在条件组合中折行
|
|
|
|
&.is-invalid {
|
|
color: var(--Form-selectValue-onInvalid-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-placeholder {
|
|
@include checkboxes-placeholder();
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.#{$ns}TableSelection {
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
.#{$ns}Table-content {
|
|
border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
|
|
|
|
&.is-virtual {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.#{$ns}Table-content-virtual {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Table-table > tbody > tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th,
|
|
.#{$ns}Table-table > tbody > tr > td {
|
|
color: var(--select-table-color);
|
|
font-size: var(--select-table-fontSize);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th {
|
|
padding: var(--select-table-header-paddingTop)
|
|
var(--select-table-header-paddingLeft)
|
|
var(--select-table-header-paddingBottom)
|
|
var(--select-table-header-paddingLeft);
|
|
}
|
|
|
|
.#{$ns}Table-table > tbody > tr > td {
|
|
padding: var(--select-table-option-paddingTop)
|
|
var(--select-table-option-paddingLeft)
|
|
var(--select-table-option-paddingBottom)
|
|
var(--select-table-option-paddingLeft);
|
|
}
|
|
|
|
.#{$ns}Table-table > thead > tr > th:last-child {
|
|
padding-right: var(--select-table-header-paddingRight);
|
|
}
|
|
|
|
.#{$ns}Table-table > tbody > tr > td:last-child {
|
|
padding-right: var(--select-table-option-paddingRight);
|
|
}
|
|
|
|
.#{$ns}Table-table > tbody > tr.is-active > td {
|
|
color: var(--Form-select-menu-onActive-color);
|
|
background: var(--Form-select-menu-onActive-bg);
|
|
}
|
|
|
|
.#{$ns}Table-table > tbody > tr:hover > td,
|
|
.#{$ns}Table-table > tbody > tr.is-hovered > td {
|
|
color: var(--Form-select-menu-onHover-color);
|
|
background: var(--Form-select-menu-onHover-bg);
|
|
}
|
|
}
|
|
|
|
.#{$ns}TreeSelection {
|
|
.#{$ns}Table-expandBtn {
|
|
color: var(--icon-color);
|
|
margin-right: var(--gap-xs);
|
|
}
|
|
|
|
&-sublist {
|
|
position: relative;
|
|
margin: 0 0 0 px2rem(35px);
|
|
display: none;
|
|
}
|
|
|
|
&-item {
|
|
position: relative;
|
|
}
|
|
&-item.is-expanded > &-sublist {
|
|
display: block;
|
|
}
|
|
|
|
&-item:not(:last-child) > &-sublist:before {
|
|
bottom: 0;
|
|
}
|
|
|
|
&-item.is-disabled > .#{$ns}TreeSelection-itemInner {
|
|
cursor: not-allowed;
|
|
color: var(--text--muted-color);
|
|
}
|
|
|
|
&-item .#{$ns}TreeSelection-itemLabel {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&-itemInner {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: var(--Tree-itemHeight);
|
|
position: relative;
|
|
font-size: var(--Form-input-fontSize);
|
|
padding: 0 var(--gap-sm);
|
|
flex-direction: row;
|
|
|
|
> .#{$ns}Checkbox {
|
|
margin-right: var(--gap-sm);
|
|
}
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&:hover {
|
|
background: var(--Tree-item-onHover-bg);
|
|
}
|
|
|
|
&.is-active {
|
|
color: var(--Form-select-menu-onActive-color);
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: var(--text--muted-color);
|
|
}
|
|
|
|
.#{$ns}TreeSelection-itemLabel {
|
|
margin-left: var(--gap-xs);
|
|
}
|
|
}
|
|
|
|
&-itemLabel {
|
|
flex-grow: 1;
|
|
|
|
span {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
&-placeholder {
|
|
@include checkboxes-placeholder();
|
|
}
|
|
}
|
|
|
|
.#{$ns}ChainedSelection {
|
|
display: flex;
|
|
flex-direction: row;
|
|
min-height: 100%;
|
|
|
|
&-col {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
&-col:not(:last-child) {
|
|
border-right: 1px solid var(--borderColor);
|
|
}
|
|
|
|
&-subTitle {
|
|
font-size: var(--fontSizeSm);
|
|
padding: var(--gap-xs) var(--gap-xs);
|
|
color: var(--text--muted-color);
|
|
}
|
|
|
|
&-item {
|
|
display: flex;
|
|
// height: var(--Form-input-height);
|
|
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);
|
|
line-height: var(--select-base-default-option-line-height);
|
|
padding: var(--select-base-default-option-paddingTop)
|
|
var(--select-base-default-option-paddingRight)
|
|
var(--select-base-default-option-paddingBottom)
|
|
var(--select-base-default-option-paddingLeft);
|
|
flex-direction: row;
|
|
|
|
> .#{$ns}Checkbox {
|
|
margin-right: 0;
|
|
}
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&.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);
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: var(--Form-select-menu-onDisabled-color);
|
|
background: var(--Form-select-menu-onDisabled-bg);
|
|
}
|
|
}
|
|
|
|
&-itemLabel {
|
|
flex-grow: 1;
|
|
|
|
span {
|
|
margin-left: px2rem(10px);
|
|
vertical-align: middle;
|
|
|
|
&.is-invalid {
|
|
color: var(--Form-selectValue-onInvalid-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-placeholder {
|
|
@include checkboxes-placeholder();
|
|
}
|
|
}
|
|
|
|
.#{$ns}AssociatedSelection {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&-left,
|
|
&-right {
|
|
position: relative;
|
|
flex-grow: 1;
|
|
width: 0;
|
|
min-height: px2rem(200px);
|
|
max-height: px2rem(400px);
|
|
overflow: auto;
|
|
|
|
> .#{$ns}GroupedSelection {
|
|
padding: 0;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
&-left {
|
|
border-right: 1px solid var(--borderColor);
|
|
}
|
|
|
|
&-reload {
|
|
text-align: center;
|
|
color: var(--info);
|
|
margin: 20px 0 0;
|
|
|
|
&.is-clickable {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
&-box {
|
|
line-height: var(--Form-input-lineHeight);
|
|
font-size: var(--fontSizeSm);
|
|
color: var(--text--muted-color);
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
> p {
|
|
text-align: center;
|
|
margin: 10px 0 20px;
|
|
color: var(--text--muted-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}ResultTreeList {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.#{$ns}ResultTableList {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
&-close-btn {
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
}
|