test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

faeture:[amis-saas-10190]主题组件TAG开发 (#6344)

Browse Source 
* faeture:[amis-saas-10190]主题组件TAG开发

* faeture:[amis-saas-10190]主题组件TAG开发

* faeture:[amis-saas-10190]修改生成tag字段大小写

* faeture:[amis-saas-10190]修改tag配置

---------

Co-authored-by: zhangzheyu02 <zhangzheyu02@baidu.com>
This commit is contained in:
zzy1415447829 2023-03-14 19:50:31 +08:00 committed by hongyang03
parent 72a0a571e8
commit ef32b32c09
3 changed files with 186 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3279,4 +3279,149 @@
--Spinner-overlay-bg: rgba(255, 255, 255, 0.4);
--Spinner-width: var(--spinner-size-size);
--Spinner-color: var(--spinner-base-color);
}
--Tag-base-fontSize: var(--fonts-size-8);
--Tag-base-fontWeight: var(--fonts-weight-6);
--Tag-base-height: var(--sizes-base-12);
--Tag-base-paddingTop: var(--sizes-size-0);
--Tag-base-paddingBottom: var(--sizes-size-0);
--Tag-base-paddingLeft: var(--sizes-size-5);
--Tag-base-paddingRight: var(--sizes-size-5);
--Tag-model-normal-top-border-color: var(--colors-neutral-line-6);
--Tag-model-normal-top-border-width: var(--borders-width-2);
--Tag-model-normal-top-border-style: var(--borders-style-1);
--Tag-model-normal-right-border-color: var(--colors-neutral-line-6);
--Tag-model-normal-right-border-width: var(--borders-width-2);
--Tag-model-normal-right-border-style: var(--borders-style-1);
--Tag-model-normal-bottom-border-color: var(--colors-neutral-line-6);
--Tag-model-normal-bottom-border-width: var(--borders-width-2);
--Tag-model-normal-bottom-border-style: var(--borders-style-1);
--Tag-model-normal-left-border-color: var(--colors-neutral-line-6);
--Tag-model-normal-left-border-width: var(--borders-width-2);
--Tag-model-normal-left-border-style: var(--borders-style-1);
--Tag-model-normal-top-right-border-radius: var(--borders-radius-1);
--Tag-model-normal-top-left-border-radius: var(--borders-radius-1);
--Tag-model-normal-bottom-right-border-radius: var(--borders-radius-1);
--Tag-model-normal-bottom-left-border-radius: var(--borders-radius-1);
--Tag-model-normal-status-size: var(--sizes-size-0);
--Tag-model-normal-status-margin: var(--sizes-size-0);
--Tag-model-normal-close-size: var(--sizes-size-0);
--Tag-model-normal-close-margin: var(--sizes-size-0);
--Tag-model-rounded-top-border-color: var(--colors-neutral-line-6);
--Tag-model-rounded-top-border-width: var(--borders-width-2);
--Tag-model-rounded-top-border-style: var(--borders-style-2);
--Tag-model-rounded-right-border-color: var(--colors-neutral-line-6);
--Tag-model-rounded-right-border-width: var(--borders-width-2);
--Tag-model-rounded-right-border-style: var(--borders-style-2);
--Tag-model-rounded-bottom-border-color: var(--colors-neutral-line-6);
--Tag-model-rounded-bottom-border-width: var(--borders-width-2);
--Tag-model-rounded-bottom-border-style: var(--borders-style-2);
--Tag-model-rounded-left-border-color: var(--colors-neutral-line-6);
--Tag-model-rounded-left-border-width: var(--borders-width-2);
--Tag-model-rounded-left-border-style: var(--borders-style-2);
--Tag-model-rounded-top-right-border-radius: 12px;
--Tag-model-rounded-top-left-border-radius: 12px;
--Tag-model-rounded-bottom-right-border-radius: 12px;
--Tag-model-rounded-bottom-left-border-radius: 12px;
--Tag-model-rounded-status-size: var(--sizes-size-0);
--Tag-model-rounded-status-margin: var(--sizes-size-0);
--Tag-model-rounded-close-size: var(--sizes-size-0);
--Tag-model-rounded-close-margin: var(--sizes-size-0);
--Tag-model-status-top-border-color: var(--colors-neutral-line-6);
--Tag-model-status-top-border-width: var(--borders-width-2);
--Tag-model-status-top-border-style: var(--borders-style-1);
--Tag-model-status-right-border-color: var(--colors-neutral-line-6);
--Tag-model-status-right-border-width: var(--borders-width-2);
--Tag-model-status-right-border-style: var(--borders-style-1);
--Tag-model-status-bottom-border-color: var(--colors-neutral-line-6);
--Tag-model-status-bottom-border-width: var(--borders-width-2);
--Tag-model-status-bottom-border-style: var(--borders-style-1);
--Tag-model-status-left-border-color: var(--colors-neutral-line-6);
--Tag-model-status-left-border-width: var(--borders-width-2);
--Tag-model-status-left-border-style: var(--borders-style-1);
--Tag-model-status-top-right-border-radius: var(--borders-radius-1);
--Tag-model-status-top-left-border-radius: var(--borders-radius-1);
--Tag-model-status-bottom-right-border-radius: var(--borders-radius-1);
--Tag-model-status-bottom-left-border-radius: var(--borders-radius-1);
--Tag-model-status-status-size: var(--sizes-size-5);
--Tag-model-status-status-margin: var(--sizes-size-5);
--Tag-model-status-close-size: var(--sizes-size-5);
--Tag-model-status-close-margin: var(--sizes-size-5);
--Tag-color-active-color: var(--colors-neutral-fill-11);
--Tag-color-active-bg-color: var(--colors-brand-5);
--Tag-color-inactive-color: var(--colors-neutral-fill-11);
--Tag-color-inactive-bg-color: var(--colors-neutral-fill-6);
--Tag-color-error-color: var(--colors-neutral-fill-11);
--Tag-color-error-bg-color: var(--colors-error-5);
--Tag-color-success-color: var(--colors-neutral-fill-11);
--Tag-color-success-bg-color: var(--colors-success-5);
--Tag-color-processing-color: var(--colors-neutral-fill-11);
--Tag-color-processing-bg-color: var(--colors-brand-6);
--Tag-color-warning-color: var(--colors-neutral-fill-11);
--Tag-color-warning-bg-color: var(--colors-warning-5);
// tag
--Tag-content-fontSize: var(--Tag-base-fontSize);
--Tag-height: var(--Tag-base-height);
--Tag-borderRadius: var(--Tag-model-normal-top-left-border-radius)
var(--Tag-model-normal-top-right-border-radius)
var(--Tag-model-normal-bottom-right-border-radius)
var(--Tag-model-normal-bottom-left-border-radius);
--Tag-fontColor: var(--Tag-base-color);
--Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
var(--Tag-model-rounded-top-right-border-radius)
var(--Tag-model-rounded-bottom-right-border-radius)
var(--Tag-model-rounded-bottom-left-border-radius);
--Tag-status-margin: var(--Tag-model-status-status-margin);
--Tag-status-size: var(--Tag-model-status-status-size);
--Tag-close-margin: var(--Tag-model-status-close-margin);
--Tag-close-size: var(--Tag-model-status-close-size);
--Tag-default-color: var(--colors-neutral-fill-9);
--Tag-inactive-color: var(--Tag-color-inactive-color);
--Tag-active-color: var(--Tag-color-active-color);
--Tag-processing-color: var(--Tag-color-processing-color);
--Tag-success-color: var(--Tag-color-success-color);
--Tag-error-color: var(--Tag-color-error-color);
--Tag-warning-color: var( --Tag-color-warning-color);
--Tag-inactive-bg-color: var(--Tag-color-inactive-bg-color);
--Tag-active-bg-color: var(--Tag-color-active-bg-color);
--Tag-processing-bg-color: var(--Tag-color-processing-bg-color);
--Tag-success-bg-color: var(--Tag-color-success-bg-color);
--Tag-error-bg-color: var(--Tag-color-error-bg-color);
--Tag-warning-bg-color: var( --Tag-color-warning-bg-color);
--Tag-normal-borderWidth: var(--Tag-model-normal-top-border-width)
var(--Tag-model-normal-right-border-width)
var(--Tag-model-normal-bottom-border-width)
var(--Tag-model-normal-left-border-width);
--Tag-normal-borderRadius: var(--Tag-model-normal-top-left-border-radius)
var(--Tag-model-normal-top-right-border-radius)
var(--Tag-model-normal-bottom-right-border-radius)
var(--Tag-model-normal-bottom-left-border-radius);
--Tag-normal-borderColor: var(--Tag-model-normal-top-border-color)
var(--Tag-model-normal-right-border-color)
var(--Tag-model-normal-bottom-border-color)
var(--Tag-model-normal-left-border-color);
--Tag-normal-status-size: var(--Tag-model-normal-status-size);
--Tag-normal-status-margin: var(--Tag-model-normal-status-margin);
--Tag-rounded-borderWidth: var(--Tag-model-rounded-top-border-width)
var(--Tag-model-rounded-right-border-width)
var(--Tag-model-rounded-bottom-border-width)
var(--Tag-model-rounded-left-border-width);
--Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
var(--Tag-model-rounded-top-right-border-radius)
var(--Tag-model-rounded-bottom-right-border-radius)
var(--Tag-model-rounded-bottom-left-border-radius);
--Tag-rounded-borderColor: var(--Tag-model-rounded-top-border-color)
var(--Tag-model-rounded-right-border-color)
var(--Tag-model-rounded-bottom-border-color)
var(--Tag-model-rounded-left-border-color);
}

13
packages/amis-ui/scss/_properties.scss
View File

@ -1013,19 +1013,6 @@ $remFactor: 16px;
--UserSelect--border-color: #f7f7f9;
--UserSelect--content-bg: #f5f7f8;
--UserSelect--bread-color: #5e626a;
// tag
--Tag-content-fontSize: var(--fontSizeSm);
--Tag-height: #{px2rem(24px)};
--Tag-borderRadius: #{px2rem(2px)};
--Tag-fontColor: #151a26;
--Tag-default-color: #f2f2f4;
--Tag-inactive-color: #b8babf;
--Tag-active-color: var(--colors-brand-5);
--Tag-processing-color: var(--colors-brand-6);
--Tag-success-color: var(--colors-success-5);
--Tag-error-color: var(--colors-error-5);
--Tag-warning-color: var(--colors-warning-5);
--Tag-checkable-bgColor: #f2f2f4;
--Tag-checkable-bgColor-onDisable: #e6e6e8;

74
packages/amis-ui/scss/components/_tag.scss
View File

@ -28,79 +28,85 @@
&--hasColor {
color: var(--white);
}
border-radius: var(--Tag-borderRadius);
border-width: var(--Tag-normal-borderWidth);
border-radius: var(--Tag-normal-borderRadius);
border-color: var(--Tag-normal-borderColor);
&--inactive {
background: var(--Tag-inactive-color);
color: var(--Tag-inactive-color);
background: var(--Tag-inactive-bg-color);
}
&--active {
background: var(--Tag-active-color);
color: var(--Tag-active-color);
background: var(--Tag-active-bg-color);
}
&--processing {
background: var(--Tag-processing-color);
color: var(--Tag-processing-color);
background: var(--Tag-processing-bg-color);
}
&--success {
background: var(--Tag-success-color);
color: var(--Tag-success-color);
background: var(--Tag-success-bg-color);
}
&--error {
background: var(--Tag-error-color);
color: var(--Tag-error-color);
background: var(--Tag-error-bg-color);
}
&--warning {
background: var(--Tag-warning-color);
color: var(--Tag-warning-color);
background: var(--Tag-warning-bg-color);
}
}
&--rounded {
background-color: var(--white);
border-radius: calc((var(--Tag-height) + 2px) / 2);
border: 1px solid var(--Tag-default-color);
border-style: solid;
border-width: var(--Tag-rounded-borderWidth);
border-radius: var(--Tag-rounded-borderRadius);
border-color: var(--Tag-rounded-borderColor);
color: var(--Tag-default-color);
line-height: 22px;
&--inactive {
border-color: var(--Tag-inactive-color);
color: var(--Tag-inactive-color);
color: var(--Tag-inactive-bg-color);
}
&--active {
border-color: var(--Tag-active-color);
color: var(--Tag-active-color);
color: var(--Tag-active-bg-color);
}
&--processing {
border-color: var(--Tag-processing-color);
color: var(--Tag-processing-color);
color: var(--Tag-processing-bg-color);
}
&--success {
border-color: var(--Tag-success-color);
color: var(--Tag-success-color);
color: var(--Tag-success-bg-color);
}
&--error {
border-color: var(--Tag-error-color);
color: var(--Tag-error-color);
color: var(--Tag-error-bg-color);
}
&--warning {
border-color: var(--Tag-warning-color);
color: var(--Tag-warning-color);
color: var(--Tag-warning-bg-color);
}
}
&--status {
background-color: var(--white);
&--inactive .#{$ns}Tag--prev {
color: var(--Tag-inactive-color);
color: var(--Tag-inactive-bg-color);
}
&--active .#{$ns}Tag--prev {
color: var(--Tag-active-color);
color: var(--Tag-active-bg-color);
}
&--processing .#{$ns}Tag--prev {
color: var(--Tag-processing-color);
color: var(--Tag-processing-bg-color);
}
&--success .#{$ns}Tag--prev {
color: var(--Tag-success-color);
color: var(--Tag-success-bg-color);
}
&--error .#{$ns}Tag--prev {
color: var(--Tag-error-color);
color: var(--Tag-error-bg-color);
}
&--warning .#{$ns}Tag--prev {
color: var(--Tag-warning-color);
color: var(--Tag-warning-bg-color);
}
&:not(&--processing):not(&--active) {
@ -114,26 +120,26 @@
&--prev {
color: var(--Tag-default-color);
margin-right: var(--gap-sm);
margin-right: var(--Tag-status-margin);
i {
font-size: #{px2rem(8px)};
}
.icon {
width: #{px2rem(8px)};
height: #{px2rem(8px)};
width: var(--Tag-status-size);
height: var(--Tag-status-size);
top: 0;
}
}
&--close {
margin-left: var(--gap-sm);
margin-right: var(--gap-xs);
margin-left: var(--Tag-close-margin);
margin-right: var(--Tag-close-margin);
i {
font-size: #{px2rem(8px)};
}
.icon {
width: #{px2rem(8px)};
height: #{px2rem(8px)};
width: var(--Tag-close-size);
height: var(--Tag-close-size);
position: inherit;
}
cursor: pointer;