test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:48:55 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat：picker接入主题 (#6497)

Browse Source 
* feat: m

* feat: spinner删除propriety中css变量

* feat: 修改spinner变量

* feat: 删除多余代码

* fix: spinner css变量修改

* fix: spinner

* feat: toast接入主题

* feat: 去掉多余代码

* feat:timeline接入主题

* feat: 删除多余代码

* feat: 修改title margin

* feat: pick接入主题

---------

Co-authored-by: qiaoganggang <qiaoganggang@baidu.com>
This commit is contained in:
qiaoganggang 2023-03-29 21:18:35 +08:00 committed by hongyang03
parent 1620c6eb97
commit d7b95c6edc
4 changed files with 239 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
packages/amis-ui/scss/_components.scss
View File

@ -3537,6 +3537,103 @@
--Toast-title-display: inline;
--Toast-width: #{px2rem(400px)};
--Pick-base-top-border-color: var(--colors-neutral-line-8);
--Pick-base-top-border-width: var(--borders-width-2);
--Pick-base-top-border-style: var(--borders-style-2);
--Pick-base-right-border-color: var(--colors-neutral-line-8);
--Pick-base-right-border-width: var(--borders-width-2);
--Pick-base-right-border-style: var(--borders-style-2);
--Pick-base-bottom-border-color: var(--colors-neutral-line-8);
--Pick-base-bottom-border-width: var(--borders-width-2);
--Pick-base-bottom-border-style: var(--borders-style-2);
--Pick-base-left-border-color: var(--colors-neutral-line-8);
--Pick-base-left-border-width: var(--borders-width-2);
--Pick-base-left-border-style: var(--borders-style-2);
--Pick-base-top-right-border-radius: var(--borders-radius-3);
--Pick-base-top-left-border-radius: var(--borders-radius-3);
--Pick-base-bottom-right-border-radius: var(--borders-radius-3);
--Pick-base-bottom-left-border-radius: var(--borders-radius-3);
--Pick-base-placeholder-color: var(--colors-neutral-line-6);
--Pick-base-placeholder-fontSize: var(--fonts-size-7);
--Pick-base-placeholder-fontWeight: var(--fonts-weight-6);
--Pick-base-paddingTop: var(--sizes-size-3);
--Pick-base-paddingBottom: var(--sizes-size-3);
--Pick-base-paddingLeft: var(--sizes-size-6);
--Pick-base-paddingRight: var(--sizes-size-6);
--Pick-base-bgColor: var(--colors-neutral-line-11);
--Pick-base-value-color: var(--colors-other-5);
--Pick-base-value-fontSize: var(--fonts-size-8);
--Pick-base-value-fontWeight: var(--fonts-weight-6);
--Pick-base-value-top-border-color: var(--colors-other-7);
--Pick-base-value-top-border-width: var(--borders-width-2);
--Pick-base-value-top-border-style: var(--borders-style-2);
--Pick-base-value-right-border-color: var(--colors-other-7);
--Pick-base-value-right-border-width: var(--borders-width-2);
--Pick-base-value-right-border-style: var(--borders-style-2);
--Pick-base-value-bottom-border-color: var(--colors-other-7);
--Pick-base-value-bottom-border-width: var(--borders-width-2);
--Pick-base-value-bottom-border-style: var(--borders-style-2);
--Pick-base-value-left-border-color: var(--colors-other-7);
--Pick-base-value-left-border-width: var(--borders-width-2);
--Pick-base-value-left-border-style: var(--borders-style-2);
--Pick-base-value-bgColor: #cce5ff;
--Pick-base-top-right-border-radius: var(--borders-radius-3);
--Pick-base-top-left-border-radius: var(--borders-radius-3);
--Pick-base-bottom-right-border-radius: var(--borders-radius-3);
--Pick-base-bottom-left-border-radius: var(--borders-radius-3);
--Pick-base-icon-size: var(--sizes-size-9);
--Pick-base-icon-color: #84878c;
--Pick-base-value-hover-icon-color: #b3d7ff;
--Pick-base-value-icon-color: var(--colors-other-5);
--Picker-iconColor: var(--Pick-base-icon-color);
--Picker-onHover-iconColor: var(--icon-onHover-color);
--Pick-status-hover-top-border-color: var(--colors-other-5);
--Pick-status-hover-top-border-width: var(--borders-width-2);
--Pick-status-hover-top-border-style: var(--borders-style-2);
--Pick-status-hover-right-border-color: var(--colors-other-5);
--Pick-status-hover-right-border-width: var(--borders-width-2);
--Pick-status-hover-right-border-style: var(--borders-style-2);
--Pick-status-hover-bottom-border-color: var(--colors-other-5);
--Pick-status-hover-bottom-border-width: var(--borders-width-2);
--Pick-status-hover-bottom-border-style: var(--borders-style-2);
--Pick-status-hover-left-border-color: var(--colors-other-5);
--Pick-status-hover-left-border-width: var(--borders-width-2);
--Pick-status-hover-left-border-style: var(--borders-style-2);
--Pick-status-hover-bgColor: var(--colors-neutral-line-11);
--Pick-status-focus-top-border-color: var(--colors-other-7);
--Pick-status-focus-top-border-width: var(--borders-width-2);
--Pick-status-focus-top-border-style: var(--borders-style-2);
--Pick-status-focus-right-border-color: var(--colors-other-7);
--Pick-status-focus-right-border-width: var(--borders-width-2);
--Pick-status-focus-right-border-style: var(--borders-style-2);
--Pick-status-focus-bottom-border-color: var(--colors-other-7);
--Pick-status-focus-bottom-border-width: var(--borders-width-2);
--Pick-status-focus-bottom-border-style: var(--borders-style-2);
--Pick-status-focus-left-border-color: var(--colors-other-7);
--Pick-status-focus-left-border-width: var(--borders-width-2);
--Pick-status-focus-left-border-style: var(--borders-style-2);
--Pick-status-focus-shadow: var(--shadows-shadow-none);
--Pick-status-focus-bgColor: var(--colors-neutral-line-11);
--Pick-status-disabled-color: var(--colors-neutral-text-2);
--Pick-status-disabled-fontSize: var(--fonts-size-7);
--Pick-status-disabled-fontWeight: var(--fonts-weight-6);
--Pick-status-disabled-top-border-color: var(--colors-neutral-line-8);
--Pick-status-disabled-top-border-width: var(--borders-width-2);
--Pick-status-disabled-top-border-style: var(--borders-style-2);
--Pick-status-disabled-right-border-color: var(--colors-neutral-line-8);
--Pick-status-disabled-right-border-width: var(--borders-width-2);
--Pick-status-disabled-right-border-style: var(--borders-style-2);
--Pick-status-disabled-bottom-border-color: var(--colors-neutral-line-8);
--Pick-status-disabled-bottom-border-width: var(--borders-width-2);
--Pick-status-disabled-bottom-border-style: var(--borders-style-2);
--Pick-status-disabled-left-border-color: var(--colors-neutral-line-8);
--Pick-status-disabled-left-border-width: var(--borders-width-2);
--Pick-status-disabled-left-border-style: var(--borders-style-2);
--Pick-status-disabled-bgColor: var(--colors-neutral-text-10);
--Pick-status-disabled-color: var(--colors-neutral-line-6);
--Pick-status-disabled-fontSize: var(--fonts-size-7);
--Pick-status-disabled-fontWeight: var(--fonts-weight-6);
--Status-base-fontSize: var(--fonts-size-9);
--Status-base-icon-size: var(--sizes-size-8);
--Status-base-text-margin: var(--sizes-size-3);
@ -3610,7 +3707,7 @@
--Timeline-visible-border-radius: var(--gap-xs);
--Timeline-horizontal-content-margin-top: var(
--Timeline-horizontal-top-size
);
);
--TimelineItem--icon-radius: 50%;
--TimelineItem--round-radius: 50%;
--TimelineItem--content-radius: px2rem(2px);

26
packages/amis-ui/scss/components/_crud.scss
View File

@ -25,11 +25,26 @@
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
);
display: inline-block;
font-size: var(--Form-selectValue-fontSize);
color: var(--Form-selectValue-color);
background: var(--Form-selectValue-bg);
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
border-radius: 2px;
font-size: var(--Pick-base-value-fontSize);
color: var(--Pick-base-value-color);
font-weight: var(--Pick-base-value-fontWeight);
background: var(--Pick-base-value-bgColor);
border-width: var(--Pick-base-value-top-border-width)
var(--Pick-base-value-right-border-width)
var(--Pick-base-value-bottom-border-width)
var(--Pick-base-value-left-border-width);
border-style: var(--Pick-base-value-top-border-style)
var(--Pick-base-value-right-border-style)
var(--Pick-base-value-bottom-border-style)
var(--Pick-base-value-left-border-style);
border-color: var(--Pick-base-value-top-border-color)
var(--Pick-base-value-right-border-color)
var(--Pick-base-value-bottom-border-color)
var(--Pick-base-value-left-border-color);
border-radius: var(--Pick-base-top-left-border-radius)
var(--Pick-base-top-right-border-radius)
var(--Pick-base-bottom-right-border-radius)
var(--Pick-base-bottom-left-border-radius);
margin-right: var(--gap-xs);
margin-top: var(--gap-xs);
@ -44,6 +59,7 @@
}
&-valueIcon {
color: var(--Pick-base-value-icon-color);
cursor: pointer;
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
padding: 1px 5px;

26
packages/amis-ui/scss/components/_crud2.scss
View File

@ -21,11 +21,26 @@
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
);
display: inline-block;
font-size: var(--Form-selectValue-fontSize);
color: var(--Form-selectValue-color);
background: var(--Form-selectValue-bg);
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
border-radius: 2px;
font-size: var(--Pick-base-value-fontSize);
color: var(--Pick-base-value-color);
font-weight: var(--Pick-base-value-fontWeight);
background: var(--Pick-base-value-bgColor);
border-width: var(--Pick-base-value-top-border-width)
var(--Pick-base-value-right-border-width)
var(--Pick-base-value-bottom-border-width)
var(--Pick-base-value-left-border-width);
border-style: var(--Pick-base-value-top-border-style)
var(--Pick-base-value-right-border-style)
var(--Pick-base-value-bottom-border-style)
var(--Pick-base-value-left-border-style);
border-color: var(--Pick-base-value-top-border-color)
var(--Pick-base-value-right-border-color)
var(--Pick-base-value-bottom-border-color)
var(--Pick-base-value-left-border-color);
border-radius: var(--Pick-base-top-left-border-radius)
var(--Pick-base-top-right-border-radius)
var(--Pick-base-bottom-right-border-radius)
var(--Pick-base-bottom-left-border-radius);
margin-right: var(--gap-xs);
margin-top: var(--gap-xs);
@ -40,6 +55,7 @@
}
&-valueIcon {
color: var(--Pick-base-value-icon-color);
cursor: pointer;
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
padding: 1px 5px;

111
packages/amis-ui/scss/components/form/_picker.scss
View File

@ -2,24 +2,80 @@
@include input-text();
outline: none;
&.is-focus > &-input {
border-color: var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-input-boxShadow);
background: var(--Form-input-onFocused-bg);
&-input:hover {
background: var(--Pick-status-hover-bgColor);
border-width: var(--Pick-status-hover-top-border-width)
var(--Pick-status-hover-right-border-width)
var(--Pick-status-hover-bottom-border-width)
var(--Pick-status-hover-left-border-width);
border-style: var(--Pick-status-hover-top-border-style)
var(--Pick-status-hover-right-border-style)
var(--Pick-status-hover-bottom-border-style)
var(--Pick-status-hover-left-border-style);
border-color: var(--Pick-status-hover-top-border-color)
var(--Pick-status-hover-right-border-color)
var(--Pick-status-hover-bottom-border-color)
var(--Pick-status-hover-left-border-color);
}
&.is-focused {
& > .#{$ns}Picker-input {
box-shadow: var(--Form-input-boxShadow);
background-color: var(--Pick-status-focus-bgColor);
border-width: var(--Pick-status-focus-top-border-width)
var(--Pick-status-focus-right-border-width)
var(--Pick-status-focus-bottom-border-width)
var(--Pick-status-focus-left-border-width);
border-style: var(--Pick-status-focus-top-border-style)
var(--Pick-status-focus-right-border-style)
var(--Pick-status-focus-bottom-border-style)
var(--Pick-status-focus-left-border-style);
border-color: var(--Pick-status-focus-top-border-color)
var(--Pick-status-focus-right-border-color)
var(--Pick-status-focus-bottom-border-color)
var(--Pick-status-focus-left-border-color);
}
}
&.is-disabled {
pointer-events: none;
opacity: var(--Button-onDisabled-opacity);
.#{$ns}Picker-placeholder {
color: var(--Pick-status-disabled-color);
font-size: var(--Pick-status-disabled-fontSize);
font-weight: var(--Pick-status-disabled-fontWeight);
}
& > .#{$ns}Picker-input {
color: var(--Pick-status-disabled-color);
font-size: var(--Pick-status-disabled-fontSize);
font-weight: var(--Pick-status-disabled-fontWeight);
background-color: var(--Pick-status-disabled-bgColor);
border-width: var(--Pick-status-disabled-top-border-width)
var(--Pick-status-disabled-right-border-width)
var(--Pick-status-disabled-bottom-border-width)
var(--Pick-status-disabled-left-border-width);
border-style: var(--Pick-status-disabled-top-border-style)
var(--Pick-status-disabled-right-border-style)
var(--Pick-status-disabled-bottom-border-style)
var(--Pick-status-disabled-left-border-style);
border-color: var(--Pick-status-disabled-top-border-color)
var(--Pick-status-disabled-right-border-color)
var(--Pick-status-disabled-bottom-border-color)
var(--Pick-status-disabled-left-border-color);
}
}
&-placeholder {
color: var(--Form-input-placeholderColor);
color: var(--Pick-base-placeholder-color);
font-size: var(--Pick-base-placeholder-fontSize);
font-weight: var(--Pick-base-placeholder-fontWeight);
user-select: none;
position: absolute;
// margin-top: 2 * var(--Form-input-borderWidth);
line-height: var(--Form-input-lineHeight);
padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight)
var(--Pick-base-paddingBottom) var(--Pick-base-paddingLeft);
}
&-input {
@ -27,6 +83,16 @@
height: auto;
padding: 0;
flex-wrap: nowrap;
background-color: var(--Pick-base-bgColor);
border-width: var(--Pick-base-top-border-width)
var(--Pick-base-right-border-width) var(--Pick-base-bottom-border-width)
var(--Pick-base-left-border-width);
border-style: var(--Pick-base-top-border-style)
var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style)
var(--Pick-base-left-border-style);
border-color: var(--Pick-base-top-border-color)
var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color)
var(--Pick-base-left-border-color);
}
.#{$ns}Picker-values {
@ -58,22 +124,38 @@
var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)}
);
display: inline-block;
font-size: var(--Form-selectValue-fontSize);
color: var(--Form-selectValue-color);
background: var(--Form-selectValue-bg);
border: px2rem(1px) solid var(--Form-selectValue-borderColor);
border-radius: 2px;
font-size: var(--Pick-base-value-fontSize);
color: var(--Pick-base-value-color);
font-weight: var(--Pick-base-value-fontWeight);
background: var(--Pick-base-value-bgColor);
border-width: var(--Pick-base-value-top-border-width)
var(--Pick-base-value-right-border-width)
var(--Pick-base-value-bottom-border-width)
var(--Pick-base-value-left-border-width);
border-style: var(--Pick-base-value-top-border-style)
var(--Pick-base-value-right-border-style)
var(--Pick-base-value-bottom-border-style)
var(--Pick-base-value-left-border-style);
border-color: var(--Pick-base-value-top-border-color)
var(--Pick-base-value-right-border-color)
var(--Pick-base-value-bottom-border-color)
var(--Pick-base-value-left-border-color);
border-radius: var(--Pick-base-top-left-border-radius)
var(--Pick-base-top-right-border-radius)
var(--Pick-base-bottom-right-border-radius)
var(--Pick-base-bottom-left-border-radius);
margin-right: var(--gap-xs);
margin-bottom: var(--gap-xs);
}
.#{$ns}Picker-valueIcon {
color: var(--Pick-base-value-icon-color);
cursor: pointer;
border-right: px2rem(1px) solid var(--Form-selectValue-borderColor);
padding: 1px 5px;
&:hover {
background: var(--Form-selectValue-onHover-bg);
background: var(--Pick-base-value-hover-icon-color);
}
}
@ -92,6 +174,11 @@
top: 0;
}
& > svg {
width: var(--Pick-base-icon-size);
height: var(--Pick-base-icon-size);
}
&:hover {
color: var(--Picker-onHover-iconColor);
}