From b717d60be9b9482e1b39197cadee42d9a56db5be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Fri, 24 Feb 2023 14:48:15 +0800 Subject: [PATCH 01/25] =?UTF-8?q?style:Tpl=E6=96=87=E5=AD=97=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20=E7=BB=84=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20(#6250)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xujiahao01 --- packages/amis-ui/scss/_components.scss | 9 +++++++++ packages/amis-ui/scss/components/_tpl.scss | 13 +++++++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 1dea9c112..a286663de 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1295,6 +1295,15 @@ --Form-input-onHover-borderColor: var(--colors-brand-5); --Form-input-onFocused-borderColor: var(--colors-brand-5); + // tpl 文字 + --tpl-base-default-color: var(--colors-neutral-text-2); + --tpl-base-default-bgColor: transparent; + --tpl-base-hover-color: var(--colors-neutral-text-2); + --tpl-base-hover-bgColor: transparent; + --tpl-base-active-color: var(--colors-neutral-text-2); + --tpl-base-active-bgColor: transparent; + --tpl-base-font-fontSize: var(--fonts-size-7); + // 勾选框 --checkbox-checkbox-default-height: var(--sizes-size-9); --checkbox-checkbox-default-bg-color: var(--colors-neutral-fill-11); diff --git a/packages/amis-ui/scss/components/_tpl.scss b/packages/amis-ui/scss/components/_tpl.scss index a2f296018..834987aa0 100644 --- a/packages/amis-ui/scss/components/_tpl.scss +++ b/packages/amis-ui/scss/components/_tpl.scss @@ -2,4 +2,17 @@ &.is-inline { display: inline; } + + font-size: var(--tpl-base-font-fontSize); + + color: var(--tpl-base-default-color); + background: var(--tpl-base-default-bgColor); + &:hover { + color: var(--tpl-base-hover-color); + background: var(--tpl-base-hover-bgColor); + } + &:active { + color: var(--tpl-base-active-color); + background: var(--tpl-base-active-bgColor); + } } From b61971eb3eb4d8fc6486ab62688d66e59643d4e3 Mon Sep 17 00:00:00 2001 From: HongYang <33488114+hy993658052@users.noreply.github.com> Date: Tue, 28 Feb 2023 11:10:54 +0800 Subject: [PATCH 02/25] =?UTF-8?q?feat:=E9=A1=B5=E9=9D=A2=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E5=80=BC=E7=BB=A7=E6=89=BF=20(#6274)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hongyang03 --- packages/amis-core/src/utils/style-helper.ts | 69 ++++++++++++++++++- packages/amis-ui/scss/_components.scss | 4 ++ .../amis-ui/scss/components/form/_text.scss | 7 ++ .../amis/src/renderers/Form/InputText.tsx | 11 ++- 4 files changed, 85 insertions(+), 6 deletions(-) diff --git a/packages/amis-core/src/utils/style-helper.ts b/packages/amis-core/src/utils/style-helper.ts index cbfb39eaa..0902078a3 100644 --- a/packages/amis-core/src/utils/style-helper.ts +++ b/packages/amis-core/src/utils/style-helper.ts @@ -1,5 +1,6 @@ import {PlainObject} from '../types'; import {uuid} from './helper'; +import cloneDeep from 'lodash/cloneDeep'; export const valueMap: PlainObject = { 'marginTop': 'margin-top', @@ -27,6 +28,11 @@ export const valueMap: PlainObject = { 'lineHeight': 'line-height' }; +export const inheritValueMap: PlainObject = { + background: 'bg-color', + radius: 'border' +}; + interface extra { pre?: string; suf?: string; @@ -55,6 +61,41 @@ export function addStyle(style: string, id: string) { varStyleTag.innerHTML += style; } +// 继承数据处理 +function handleInheritData(statusMap: any, data: any) { + if (!data) { + return; + } + // 检查是否存在inherit + ['hover', 'active'].forEach(status => { + for (let key in statusMap[status]) { + if (typeof statusMap[status][key] === 'object') { + for (let style in statusMap[status][key]) { + if (statusMap[status][key][style] === 'inherit') { + // 值为inherit时设置为default的值或者主题中的default值 + if (statusMap['default'][key] && statusMap['default'][key][style]) { + statusMap[status][key][style] = statusMap.default[key][style]; + } else { + const value = inheritValueMap[key] || key; + statusMap[status][key][style] = + data['default'].body[value][style]; + } + } + } + } else { + if (statusMap[status][key] === 'inherit') { + if (statusMap['default'][key] && statusMap['default'][key]) { + statusMap[status][key] = statusMap.default[key]; + } else { + const value = inheritValueMap[key] || key; + statusMap[status][key] = data['default'].body[value]; + } + } + } + } + }); +} + export function formatStyle( css: any, classNames: { @@ -67,7 +108,8 @@ export function formatStyle( disabled?: extra; }; }[], - id?: string + id?: string, + defaultData?: any ) { if (!css) { return {value: '', origin: []}; @@ -129,6 +171,7 @@ export function formatStyle( statusMap.default[key] = body[key]; } } + handleInheritData(statusMap, defaultData); for (let status in statusMap) { const weights = weightsList[status]; @@ -204,11 +247,31 @@ export function insertCustomStyle( disabled?: extra; }; }[], - id?: string + id?: string, + defaultData?: any ) { if (!css) { return; } - const {value} = formatStyle(css, classNames, id); + const {value} = formatStyle(css, classNames, id, defaultData); insertStyle(value, id?.replace('u:', '') || uuid()); } + +/** + * 根据路径获取默认值 + */ +export function getValueByPath(path: string, data: any) { + try { + if (!path || !data) { + return null; + } + const keys = path.split('.'); + let value = cloneDeep(data.component); + for (let i = 0; i < keys.length; i++) { + value = value[keys[i]]; + } + return value; + } catch (e) { + return null; + } +} diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index a286663de..cadb9060a 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -913,6 +913,10 @@ --input-default-default-top-left-border-radius: var(--borders-radius-3); --input-default-default-bottom-right-border-radius: var(--borders-radius-3); --input-default-default-bottom-left-border-radius: var(--borders-radius-3); + --input-default-default-color: var(--colors-neutral-fill-2); + --input-default-default-fontSize: var(--fonts-size-7); + --input-default-default-fontWeight: var(--fonts-weight-6); + --input-default-default-lineHeight: var(--fonts-lineHeight-2); --input-default-default-paddingTop: var(--sizes-size-3); --input-default-default-paddingBottom: var(--sizes-size-3); --input-default-default-paddingLeft: var(--sizes-size-6); diff --git a/packages/amis-ui/scss/components/form/_text.scss b/packages/amis-ui/scss/components/form/_text.scss index 0829f0669..9961c5d47 100644 --- a/packages/amis-ui/scss/components/form/_text.scss +++ b/packages/amis-ui/scss/components/form/_text.scss @@ -46,6 +46,13 @@ background: var(--input-default-default-bg-color); height: var(--input-size-default-height); + input { + color: var(--input-default-default-color); + font-size: var(--input-default-default-fontSize); + font-weight: var(--input-default-default-fontWeight); + line-height: var(--input-default-default-lineHeight); + } + &:hover, &.hover { border-width: var(--input-default-hover-top-border-width) diff --git a/packages/amis/src/renderers/Form/InputText.tsx b/packages/amis/src/renderers/Form/InputText.tsx index 4250358d8..11f137047 100644 --- a/packages/amis/src/renderers/Form/InputText.tsx +++ b/packages/amis/src/renderers/Form/InputText.tsx @@ -5,7 +5,8 @@ import { highlight, FormOptionsControl, resolveEventData, - insertCustomStyle + insertCustomStyle, + getValueByPath } from 'amis-core'; import {ActionObject} from 'amis-core'; import Downshift, {StateChangeOptions} from 'downshift'; @@ -1060,8 +1061,11 @@ export default class TextControl extends React.PureComponent< css, inputControlClassName, id, - addOnClassName + addOnClassName, + editorPath, + themeConfig } = this.props; + const editorDefaultData = getValueByPath(editorPath, themeConfig); let input = autoComplete !== false && (source || options?.length || autoComplete) ? this.renderSugestMode() @@ -1080,7 +1084,8 @@ export default class TextControl extends React.PureComponent< } } ], - id + id, + editorDefaultData ); insertCustomStyle( From 77a9817b5251f262ee15759c2902f2369fcc366d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Mon, 6 Mar 2023 20:22:04 +0800 Subject: [PATCH 03/25] =?UTF-8?q?style:inputTree=E6=A0=91=E5=BD=A2?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E6=A1=86=E7=BB=84=E4=BB=B6=E5=8F=98=E9=87=8F?= =?UTF-8?q?=20(#6307)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xujiahao01 --- packages/amis-ui/scss/_components.scss | 19 ++++++ .../amis-ui/scss/components/form/_tree.scss | 66 ++++++++++++++----- 2 files changed, 69 insertions(+), 16 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index cadb9060a..50072d813 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1496,6 +1496,25 @@ --Checkbox-button-line-height: #{px2rem(28px)}; --Checkbox-button-min-width: #{px2rem(80px)}; + // 树形选择框 + --inputTree-base-default-color: var(--colors-neutral-text-2); + --inputTree-base-default-expandColor: var(--default-icon-color); + --inputTree-base-hover-color: var(--colors-neutral-text-2); + --inputTree-base-hover-expandColor: var(--default-icon-color); + --inputTree-base-active-color: var(--colors-neutral-text-2); + --inputTree-base-active-expandColor: var(--default-icon-color); + --inputTree-base-disabled-color: var(--colors-neutral-text-6); + --inputTree-base-disabled-expandColor: var(--default-icon-color); + --inputTree-base-size-expandMarginRight: var(--sizes-size-5); + --inputTree-base-size-nodeMarginRight: var(--sizes-size-5); + --inputTree-checkboxes-size-marginRight: var(--sizes-size-5); + --inputTree-border-color: var(--colors-neutral-line-8); + --inputTree-border-radius: var(--borders-radius-3); + --inputTree-input-lineHeight: var(--fonts-lineHeight-2); + --inputTree-item-disabled-color: var(--colors-neutral-text-6); + --inputTree-fontSize: var(--fontSizeBase); + --inputTree-placeholder-color: var(--colors-neutral-text-6); + // 列表 --listSelect-base-default-top-border-color: var(--colors-neutral-line-8); --listSelect-base-default-top-border-width: var(--borders-width-2); diff --git a/packages/amis-ui/scss/components/form/_tree.scss b/packages/amis-ui/scss/components/form/_tree.scss index 21aed508a..be45e6f68 100644 --- a/packages/amis-ui/scss/components/form/_tree.scss +++ b/packages/amis-ui/scss/components/form/_tree.scss @@ -1,5 +1,5 @@ .#{$ns}TreeControl { - border: 1px solid var(--Form-input-borderColor); + border: 1px solid var(--inputTree-border-color); padding: 6px 12px; border-radius: 2px; max-height: var(--Tree-max-height); @@ -54,6 +54,15 @@ position: relative; > div { + color: var(--inputTree-base-default-color); + + &:hover { + color: var(--inputTree-base-hover-color); + } + + &:active { + color: var(--inputTree-base-active-color); + } &:hover { text-decoration: none; @@ -76,6 +85,12 @@ &.is-disabled { pointer-events: none; + .#{$ns}Tree-itemLabel.is-disabled { + color: var(--inputTree-base-disabled-color); + .#{$ns}Tree-itemArrow > svg { + color: var(--inputTree-base-disabled-expandColor); + } + } } &.is-draggable { @@ -142,6 +157,10 @@ } } } + + .#{$ns}Checkbox { + margin-right: var(--inputTree-checkboxes-size-marginRight); + } } &-item { @@ -157,7 +176,7 @@ } } .is-disabled { - color: var(--text--muted-color); + color: var(--inputTree-item-disabled-color); background: none; &:hover { background: none; @@ -215,20 +234,20 @@ width: 100%; outline: none; background: var(--Form-input-bg); - border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); - border-radius: var(--Form-input-borderRadius); - line-height: var(--Form-input-lineHeight); + border: var(--Form-input-borderWidth) solid var(--inputTree-border-color); + border-radius: var(--inputTree-border-radius); + line-height: var(--inputTree-input-lineHeight); padding: calc( ( - var(--Tree-inputHeight) - var(--Form-input-lineHeight) * - var(--Form-input-fontSize) - #{px2rem(2px)} + var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) * + var(--inputTree-fontSize) - #{px2rem(2px)} ) / 2 ) var(--Form-input-paddingX); - font-size: var(--Form-input-fontSize); + font-size: var(--inputTree-fontSize); &::placeholder { - color: var(--Form-input-placeholderColor); + color: var(--inputTree-placeholder-color); user-select: none; } @@ -252,7 +271,7 @@ &.is-disabled { pointer-events: none; - color: var(--text--muted-color); + color: var(--inputTree-item-disabled-color); } > svg { @@ -268,7 +287,7 @@ cursor: pointer; width: var(--Tree-itemArrowWidth); display: inline-flex; - margin-right: var(--Tree-icon-margin-right); + margin-right: var(--inputTree-base-size-expandMarginRight); // &:before { // font-style: normal; @@ -281,7 +300,15 @@ display: block; transition: transform var(--animation-duration); top: 0; - color: var(--Tree-item-arrow-color); + color: var(--inputTree-base-default-expandColor); + + &:hover { + color: var(--inputTree-base-hover-expandColor); + } + + &:active { + color: var(--inputTree-base-hover-expandColor); + } } &.is-folded > svg { @@ -305,7 +332,7 @@ &-itemIcon { display: inline-flex; - margin-right: var(--Tree-icon-margin-right); + margin-right: var(--inputTree-base-size-nodeMarginRight); } &-rootIcon, @@ -322,19 +349,26 @@ cursor: pointer; flex: 1 auto; display: inline-block; - color: var(--select-tree-color); + color: var(--inputTree-base-default-color); font-size: var(--select-tree-fontSize); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + &:hover { + color: var(--inputTree-base-hover-color); + } + &:active { + color: var(--inputTree-base-active-color); + } } .is-disabled &-itemText { - color: var(--text--muted-color); + color: var(--inputTree-base-disabled-color); } &-placeholder { - color: var(--text--muted-color); + color: var(--inputTree-placeholder-color); } &-dropIndicator { From 785ce176d71a886f5e558285e7dd70740db12819 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Wed, 8 Mar 2023 20:39:22 +0800 Subject: [PATCH 04/25] =?UTF-8?q?style:=20Dialog=20=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E6=A1=86=E7=BB=84=E4=BB=B6=E5=8F=98=E9=87=8F=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=8C=96=20(#6324)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: Dialog 对话框组件变量配置化 * style: 迁移Dialog对话框组件变量properties.scss=>component.scss --------- Co-authored-by: xujiahao01 --- packages/amis-ui/scss/_components.scss | 51 ++++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 36 -------------- packages/amis-ui/scss/components/_modal.scss | 23 +++++---- 3 files changed, 64 insertions(+), 46 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 50072d813..d4d63087e 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1764,6 +1764,57 @@ --InputRange-clearIcon-color: var(--colors-neutral-text-4); --InputRange-clearIcon-hoverColor: var(--colors-brand-5); + // 对话框 + --dialog-default-border-width: var(--sizes-size-0); + --dialog-default-border-radius: var(--sizes-size-4); + --dialog-default-padding-y: var(--sizes-base-12); + --dialog-header-height: var(--sizes-size-1); + --dialog-header-color: var(--colors-neutral-text-2); + --dialog-header-fontSize: var(--fonts-size-7); + --dialog-header-fontWeight: var(--fonts-weight-5); + --dialog-footer-height: var(--sizes-size-1); + --dialog-footer-margin-left: var(--sizes-size-5); + --dialog-size-sm-width: 21.875rem; + --dialog-size-normal-width: 31.25rem; + --dialog-size-lg-width: 68.75rem; + --dialog-size-xl-width: 90%; + + --Modal-bg: var(--background); + --Modal-body--noHeader-paddingTop: var(--gap-base); + --Modal-body-borderBottom: var(--borders-style-1) solid + var(--colors-neutral-line-10); + --Modal-body-borderTop: var(--borders-style-1) solid + var(--colors-neutral-line-10); + --Modal-body-paddingX: var(--sizes-size-0); + --Modal-body-paddingY: var(--sizes-base-12); + --Modal-close-color: var(--text--muted-color); + --Modal-close-width: #{px2rem(16px)}; + --Modal-content-borderColor: var(--borderColor); + --Modal-content-borderRadius: var(--borders-radius-4); + --Modal-content-borderWidth: var(--borders-width-1); + --Modal-content-minHeight: #{px2rem(193px)}; + --Modal-content-startMarginTop: #{px2rem(60px)}; + --Modal-content-stepMarginTop: #{px2rem(30px)}; + --Modal-footer-button-width: #{px2rem(72px)}; + --Modal-footer-marginX: var(--sizes-size-0); + --Modal-footer-marginY: var(--sizes-size-0); + --Modal-footer-padding: var(--sizes-size-0); + --Modal-header-bg: var(--colors-neutral-fill-11); + --Modal-header-height: #{px2rem(40px)}; + --Modal-header-paddingX: var(--sizes-size-0); + --Modal-header-paddingY: var(--sizes-size-0); + --Modal-overlay-bg: rgba(0, 0, 0, 0.7); + --Modal-title-color: var(--colors-neutral-text-2); + --Modal-title-fontSize: var(--fonts-size-7); + --Modal-title-fontWeight: var(--fonts-weight-5); + --Modal-title-lineHeight: var(--lineHeightBase); + --Modal-widthBase: #{px2rem(500px)}; + --Modal-widthLg: #{px2rem(1100px)}; + --Modal-widthMd: #{px2rem(800px)}; + --Modal-widthSm: #{px2rem(350px)}; + --Modal-widthXl: 90%; + --Model-close-onHover-color: var(--text-color); + // 评分 --Rating-star-margin: var(--sizes-size-5); --Rating-star-size: var(--sizes-base-12); diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index a115d6a88..ac7f641c6 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -617,42 +617,6 @@ $remFactor: 16px; --Log-color: #f1f1f1; --Log-line--onHover-bg: #444; - --Modal-bg: var(--background); - --Modal-body--noHeader-paddingTop: var(--gap-base); - --Modal-body-borderBottom: var(--borders-style-1) solid - var(--colors-neutral-line-10); - --Modal-body-borderTop: var(--borders-style-1) solid - var(--colors-neutral-line-10); - --Modal-body-paddingX: var(--sizes-size-0); - --Modal-body-paddingY: var(--sizes-base-12); - --Modal-close-color: var(--text--muted-color); - --Modal-close-width: #{px2rem(16px)}; - --Modal-content-borderColor: var(--borderColor); - --Modal-content-borderRadius: var(--borders-radius-4); - --Modal-content-borderWidth: var(--borders-width-1); - --Modal-content-minHeight: #{px2rem(193px)}; - --Modal-content-startMarginTop: #{px2rem(60px)}; - --Modal-content-stepMarginTop: #{px2rem(30px)}; - --Modal-footer-button-width: #{px2rem(72px)}; - --Modal-footer-marginX: var(--sizes-size-0); - --Modal-footer-marginY: var(--sizes-size-0); - --Modal-footer-padding: var(--sizes-size-0); - --Modal-header-bg: var(--colors-neutral-fill-11); - --Modal-header-height: #{px2rem(40px)}; - --Modal-header-paddingX: var(--sizes-size-0); - --Modal-header-paddingY: var(--sizes-size-0); - --Modal-overlay-bg: rgba(0, 0, 0, 0.7); - --Modal-title-color: var(--colors-neutral-text-2); - --Modal-title-fontSize: var(--fonts-size-7); - --Modal-title-fontWeight: var(--fonts-weight-5); - --Modal-title-lineHeight: var(--lineHeightBase); - --Modal-widthBase: #{px2rem(500px)}; - --Modal-widthLg: #{px2rem(1100px)}; - --Modal-widthMd: #{px2rem(800px)}; - --Modal-widthSm: #{px2rem(350px)}; - --Modal-widthXl: 90%; - --Model-close-onHover-color: var(--text-color); - --Nav-item-bg: transparent; --Nav-item-borderRadius: var(--borders-radius-1); --Nav-item-color: var(--text-color); diff --git a/packages/amis-ui/scss/components/_modal.scss b/packages/amis-ui/scss/components/_modal.scss index b9b69816a..88260e5db 100644 --- a/packages/amis-ui/scss/components/_modal.scss +++ b/packages/amis-ui/scss/components/_modal.scss @@ -45,10 +45,10 @@ margin-right: auto; margin-top: var(--Modal-content-startMarginTop); margin-bottom: var(--gap-md); - padding: var(--Modal-body-paddingY) var(--Modal-body-paddingX); + padding: var(--dialog-default-padding-y) var(--Modal-body-paddingX); border: var(--Modal-content-borderWidth) solid var(--Modal-content-borderColor); - border-radius: var(--Modal-content-borderRadius); + border-radius: var(--dialog-default-border-radius); &.in, &.out { @@ -96,9 +96,10 @@ } &-title { - font-size: var(--Modal-title-fontSize); - color: var(--Modal-title-color); - font-weight: var(--Modal-title-fontWeight); + font-size: var(--dialog-header-fontSize); + color: var(--dialog-header-color); + font-weight: var(--dialog-header-fontWeight); + height: var(--dialog-header-height); } &-close { @@ -147,6 +148,7 @@ &-footer { // @include clearfix(); + height: var(--dialog-footer-height); display: flex; align-items: center; justify-content: flex-end; @@ -158,7 +160,7 @@ .#{$ns}Button { min-width: var(--Modal-footer-button-width); - margin-left: var(--gap-sm); + margin-left: var(--dialog-footer-margin-left); } } } @@ -177,11 +179,12 @@ @include media-breakpoint-up(sm) { .#{$ns}Modal-content { - max-width: var(--Modal-widthBase); + max-width: var(--dialog-size-normal-width); + border-width: var(--dialog-default-border-width); } .#{$ns}Modal--sm .#{$ns}Modal-content { - max-width: var(--Modal-widthSm); + max-width: var(--dialog-size-sm-width); } .#{$ns}Modal--base .#{$ns}Modal-content { @@ -193,11 +196,11 @@ } .#{$ns}Modal--lg .#{$ns}Modal-content { - max-width: var(--Modal-widthLg); + max-width: var(--dialog-size-lg-width); } .#{$ns}Modal--xl .#{$ns}Modal-content { - max-width: var(--Modal-widthXl); + max-width: var(--dialog-size-xl-width); } } From 3c6fbb7b9af21c3bb415b3ac0b2047e46a2b1ffb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Thu, 9 Mar 2023 14:24:44 +0800 Subject: [PATCH 05/25] =?UTF-8?q?style:=20Drawer=E6=8A=BD=E5=B1=89=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8F=98=E9=87=8F=E9=85=8D=E7=BD=AE=20&=20?= =?UTF-8?q?=E8=BF=81=E7=A7=BB=20(#6331)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xujiahao01 --- packages/amis-ui/scss/_components.scss | 41 +++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 24 ----------- packages/amis-ui/scss/components/_drawer.scss | 23 ++++++----- 3 files changed, 54 insertions(+), 34 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index d4d63087e..791d82911 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1815,6 +1815,47 @@ --Modal-widthXl: 90%; --Model-close-onHover-color: var(--text-color); + // 抽屉 + --drawer-header-height: var(--sizes-size-1); + --drawer-header-color: var(--colors-neutral-text-2); + --drawer-header-fontSize: var(--fonts-size-7); + --drawer-header-fontWeight: var(--fonts-weight-5); + --drawer-content-paddingTop: var(--sizes-base-12); + --drawer-content-paddingBottom: var(--sizes-base-12); + --drawer-content-paddingLeft: var(--sizes-base-12); + --drawer-content-paddingRight: var(--sizes-base-12); + --drawer-footer-height: var(--sizes-size-1); + --drawer-footer-margin-left: var(--sizes-size-9); + --drawer-size-xs-width: 12.5rem; + --drawer-size-sm-width: 18.75rem; + --drawer-size-md-width: 31.25rem; + --drawer-size-lg-width: 50rem; + --drawer-size-xl-width: 90%; + + --Drawer-bg: var(--background); + --Drawer-body-padding: var(--sizes-base-12); + --Drawer-footer-margin: var(--sizes-size-9); + --Drawer-close-color: var(--colors-neutral-text-2); + --Drawer-close-onHover-color: var(--text-color); + --Drawer-close-size: #{px2rem(12px)}; + --Drawer-content-borderColor: var(--borderColor); + --Drawer-content-borderRadius: 0; + --Drawer-content-borderWidth: var(--borderWidth); + --Drawer-footer-borderColor: var(--colors-neutral-line-10); + --Drawer-footer-padding: var(--gap-base); + --Drawer-header-bg: var(--colors-neutral-fill-11); + --Drawer-header-borderColor: var(--colors-neutral-line-10); + --Drawer-header-padding: var(--sizes-size-9) var(--sizes-base-12); + --Drawer-overlay-bg: rgba(0, 0, 0, 0.6); + --Drawer-title-fontColor: var(--colors-neutral-text-2); + --Drawer-title-fontSize: var(--fontSizeMd); + --Drawer-widthBase: #{px2rem(400px)}; + --Drawer-widthLg: #{px2rem(800px)}; + --Drawer-widthMd: #{px2rem(500px)}; + --Drawer-widthSm: #{px2rem(300px)}; + --Drawer-widthXl: 90%; + --Drawer-widthXs: #{px2rem(200px)}; + // 评分 --Rating-star-margin: var(--sizes-size-5); --Rating-star-size: var(--sizes-base-12); diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index ac7f641c6..d4fb26d9a 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -326,30 +326,6 @@ $remFactor: 16px; --LocationPicker-borderRadius: var(--borders-radius-3); - --Drawer-bg: var(--background); - --Drawer-body-padding: var(--sizes-base-12); - --Drawer-footer-margin: var(--sizes-size-9); - --Drawer-close-color: var(--colors-neutral-text-2); - --Drawer-close-onHover-color: var(--text-color); - --Drawer-close-size: #{px2rem(12px)}; - --Drawer-content-borderColor: var(--borderColor); - --Drawer-content-borderRadius: 0; - --Drawer-content-borderWidth: var(--borderWidth); - --Drawer-footer-borderColor: var(--colors-neutral-line-10); - --Drawer-footer-padding: var(--gap-base); - --Drawer-header-bg: var(--colors-neutral-fill-11); - --Drawer-header-borderColor: var(--colors-neutral-line-10); - --Drawer-header-padding: var(--sizes-size-9) var(--sizes-base-12); - --Drawer-overlay-bg: rgba(0, 0, 0, 0.6); - --Drawer-title-fontColor: var(--colors-neutral-text-2); - --Drawer-title-fontSize: var(--fontSizeMd); - --Drawer-widthBase: #{px2rem(400px)}; - --Drawer-widthLg: #{px2rem(800px)}; - --Drawer-widthMd: #{px2rem(500px)}; - --Drawer-widthSm: #{px2rem(300px)}; - --Drawer-widthXl: 90%; - --Drawer-widthXs: #{px2rem(200px)}; - --DropDown-caret-marginLeft: var(--gap-sm); --DropDown-menu-bg: var(--colors-neutral-fill-11); --DropDown-menu-borderColor: var(--borderColor); diff --git a/packages/amis-ui/scss/components/_drawer.scss b/packages/amis-ui/scss/components/_drawer.scss index 9f5736793..223d160bd 100644 --- a/packages/amis-ui/scss/components/_drawer.scss +++ b/packages/amis-ui/scss/components/_drawer.scss @@ -50,9 +50,10 @@ } &-title { - font-size: var(--Drawer-title-fontSize); - font-weight: 500; - color: var(--Drawer-title-fontColor); + font-size: var(--drawer-header-fontSize); + font-weight: var(--drawer-header-fontWeight); + color: var(--drawer-header-color); + height: var(--drawer-header-height); } &-close { @@ -83,7 +84,8 @@ } &-body { - padding: var(--Drawer-body-padding); + padding: var(--drawer-content-paddingTop) var(--drawer-content-paddingRight) + var(--drawer-content-paddingBottom) var(--drawer-content-paddingLeft); flex-basis: 0; flex-grow: 1; overflow: auto; @@ -92,6 +94,7 @@ &-footer { display: flex; align-items: flex-end; + height: var(--drawer-footer-height); justify-content: flex-end; padding: var(--Drawer-footer-padding); border-top: var(--Drawer-content-borderWidth) solid @@ -140,27 +143,27 @@ } .#{$ns}Drawer--xs .#{$ns}Drawer-content { - width: var(--Drawer-widthXs); + width: var(--drawer-size-xs-width); height: var(--Drawer-widthXs); } .#{$ns}Drawer--sm .#{$ns}Drawer-content { - width: var(--Drawer-widthSm); + width: var(--drawer-size-sm-width); height: var(--Drawer-widthSm); } .#{$ns}Drawer--md .#{$ns}Drawer-content { - width: var(--Drawer-widthMd); + width: var(--drawer-size-md-width); height: var(--Drawer-widthMd); } .#{$ns}Drawer--lg .#{$ns}Drawer-content { - width: var(--Drawer-widthLg); + width: var(--drawer-size-lg-width); height: var(--Drawer-widthLg); } .#{$ns}Drawer--xl .#{$ns}Drawer-content { - width: var(--Drawer-widthXl); + width: var(--drawer-size-xl-width); height: var(--Drawer-widthXl); } @@ -283,7 +286,7 @@ justify-content: flex-end; .#{$ns}Button { - margin-left: var(--Drawer-footer-margin); + margin-left: var(--drawer-footer-margin-left); margin-right: var(--gap-xs); } From 617bf790dbf833f54e8b842489201bb7a209f7ec Mon Sep 17 00:00:00 2001 From: HongYang <33488114+hy993658052@users.noreply.github.com> Date: Thu, 9 Mar 2023 15:35:38 +0800 Subject: [PATCH 06/25] =?UTF-8?q?feat:=20steps&alert=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=80=82=E9=85=8D=20(#6323)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: steps组件主题适配 * feat: alert提示组件主题适配 * fix: 修复代码 * feat: steps支持简单模式 --------- Co-authored-by: hongyang03 --- docs/zh-CN/components/steps.md | 50 +++++++-- packages/amis-ui/scss/_components.scss | 109 +++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 39 ------- packages/amis-ui/scss/components/_alert.scss | 39 +++++-- packages/amis-ui/scss/components/_steps.scss | 80 ++++++++++---- packages/amis-ui/src/components/Steps.tsx | 13 ++- 6 files changed, 248 insertions(+), 82 deletions(-) diff --git a/docs/zh-CN/components/steps.md b/docs/zh-CN/components/steps.md index 4a6740203..07ed9f4f7 100644 --- a/docs/zh-CN/components/steps.md +++ b/docs/zh-CN/components/steps.md @@ -153,6 +153,32 @@ order: 68 } ``` +## 简单模式 + +```schema +{ + "type": "page", + "body": [ + { + "type": "steps", + "value": 1, + "mode": "simple", + "steps": [ + { + "title": "First" + }, + { + "title": "Second" + }, + { + "title": "Last" + } + ] + } + ] +} +``` + ## 数据映射 当前处于第几步统一通过 `name` 关联变量名，其他配置可通过 `"${xxx}"` 关联上下文变量。 @@ -356,18 +382,18 @@ order: 68 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------- | -| type | `string` | | `"steps"` 指定为 步骤条 渲染器 | -| steps | Array<[step](#step)> | [] | 数组，配置步骤信息 | -| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 | -| name | `string` | | 关联上下文变量 | -| value | `string` \| `number` | `-` | 设置默认值，注意不支持表达式 | -| status | [StepStatus](#StepStatus) \| {[propName: string]: stepStatus;} | `-` | 状态 | -| className | `string` | `-` | 自定义类名 | -| mode | `horizontal` \| `vertical` | `horizontal` | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | -| labelPlacement | `horizontal` \| `vertical` | `horizontal` | 指定标签放置位置，默认水平放图标右侧，可选 (vertical) 放图标下方 | -| progressDot | `boolean` | `false` | 点状步骤条 | +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------- | +| type | `string` | | `"steps"` 指定为 步骤条 渲染器 | +| steps | Array<[step](#step)> | [] | 数组，配置步骤信息 | +| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 | +| name | `string` | | 关联上下文变量 | +| value | `string` \| `number` | `-` | 设置默认值，注意不支持表达式 | +| status | [StepStatus](#StepStatus) \| {[propName: string]: stepStatus;} | `-` | 状态 | +| className | `string` | `-` | 自定义类名 | +| mode | `horizontal` \| `vertical` \| `simple` | `horizontal` | 指定步骤条模式。目前支持水平（horizontal）、竖直（vertical）和简单（simple）模式 | +| labelPlacement | `horizontal` \| `vertical` | `horizontal` | 指定标签放置位置，默认水平放图标右侧，可选 (vertical) 放图标下方 | +| progressDot | `boolean` | `false` | 点状步骤条 | ### step diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 791d82911..651437c6f 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3158,4 +3158,113 @@ --inputTime-hover-bg-color: var(--colors-neutral-fill-10); --inputTime-active-color: var(--colors-neutral-text-2); --inputTime-active-bg-color: var(--colors-brand-10); + + --steps-base-color: var(--colors-neutral-text-2); + --steps-base-fontSize: var(--fonts-size-7); + --steps-base-fontWeight: var(--fonts-weight-6); + --steps-base-subTitle-color: var(--colors-neutral-text-2); + --steps-base-subTitle-fontSize: var(--fonts-size-7); + --steps-base-subTitle-fontWeight: var(--fonts-weight-6); + --steps-base-des-color: var(--colors-neutral-text-5); + --steps-base-des-fontSize: var(--fonts-size-8); + --steps-base-des-fontWeight: var(--fonts-weight-6); + --steps-base-title-paddingRight: var(--sizes-size-5); + --steps-base-subTitle-paddingLeft: var(--sizes-size-6); + --steps-base-icon-size: var(--sizes-base-15); + --steps-base-icon-paddingRight: var(--sizes-size-6); + --steps-base-line-color: var(--colors-neutral-line-8); + --steps-base-line-active-color: var(--colors-brand-5); + --steps-status-wait-bg-color: var(--colors-neutral-fill-11); + --steps-status-wait-color: var(--colors-neutral-text-8); + --steps-status-process-bg-color: var(--colors-brand-5); + --steps-status-process-color: var(--colors-neutral-text-11); + --steps-status-finish-bg-color: var(--colors-brand-5); + --steps-status-finish-color: var(--colors-neutral-text-11); + --steps-status-error-bg-color: var(--colors-error-5); + --steps-status-error-color: var(--colors-neutral-text-11); + --steps-dot-icon-size: var(--sizes-size-5); + --steps-dot-wait-bg-color: var(--colors-neutral-fill-8); + --steps-dot-process-bg-color: var(--colors-brand-5); + --steps-dot-finish-bg-color: var(--colors-neutral-fill-11); + --steps-dot-error-bg-color: var(--colors-error-5); + --steps-simple-icon: ''; + --steps-simple-icon-size: var(--sizes-size-8); + + --Steps-bg: var(--steps-status-wait-color); + --Steps-status-success: var(--steps-status-finish-bg-color); + --Steps-status-error: var(--steps-status-error-bg-color); + --Steps-status-wait: var(--colors-neutral-text-5); + --Steps-icon-fontsize: var(--fonts-size-6); + --Steps-title-fontsize: var(--steps-base-fontSize); + --Steps-title-color: var(--steps-base-color); + --Steps-sub-title-fontsize: var(--steps-base-subTitle-fontSize); + --Steps-sub-title-color: var(--steps-base-subTitle-color); + --Steps-description-title-fontsize: var(--steps-base-des-fontSize); + --Steps-description-title-color: var(--steps-base-des-color); + --Steps-line-bg: var(--steps-base-line-color); + --Steps-line-success-bg: var(--steps-base-line-active-color); + + --alert-base-marginTop: var(--sizes-size-0); + --alert-base-marginBottom: var(--sizes-size-9); + --alert-base-marginLeft: var(--sizes-size-0); + --alert-base-marginRight: var(--sizes-size-0); + --alert-base-paddingTop: var(--sizes-size-3); + --alert-base-paddingBottom: var(--sizes-size-3); + --alert-base-paddingLeft: var(--sizes-size-9); + --alert-base-paddingRight: var(--sizes-size-9); + --alert-base-top-right-border-radius: var(--borders-radius-3); + --alert-base-top-left-border-radius: var(--borders-radius-3); + --alert-base-bottom-right-border-radius: var(--borders-radius-3); + --alert-base-bottom-left-border-radius: var(--borders-radius-3); + --alert-base-fontSize: var(--fonts-size-8); + --alert-base-fontWeight: var(--fonts-weight-6); + --alert-base-shadow: var(--shadows-shadow-none); + --alert-base-title-paddingTop: var(--sizes-size-9); + --alert-base-title-paddingBottom: var(--sizes-size-9); + --alert-base-title-paddingLeft: var(--sizes-size-9); + --alert-base-title-paddingRight: var(--sizes-size-9); + --alert-base-title-color: var(--colors-neutral-text-2); + --alert-base-title-fontSize: var(--fonts-size-7); + --alert-base-title-fontWeight: var(--fonts-weight-5); + --alert-base-title-margin-bottom: var(--sizes-size-3); + --alert-icon-size: var(--sizes-base-8); + --alert-icon-margin-right: var(--sizes-size-5); + --alert-level-info-color: var(--colors-neutral-text-2); + --alert-level-info-bg-color: var(--colors-brand-10); + --alert-level-info-icon-color: var(--colors-brand-5); + --alert-level-success-color: var(--colors-neutral-text-2); + --alert-level-success-bg-color: var(--colors-success-10); + --alert-level-success-icon-color: var(--colors-success-5); + --alert-level-warning-color: var(--colors-neutral-text-2); + --alert-level-warning-bg-color: var(--colors-warning-10); + --alert-level-warning-icon-color: var(--colors-warning-5); + --alert-level-danger-color: var(--colors-neutral-text-2); + --alert-level-danger-bg-color: var(--colors-error-10); + --alert-level-danger-icon-color: var(--colors-error-5); + --Alert--danger-bg: var(--alert-level-danger-bg-color); + --Alert--danger-borderColor: transparent; + --Alert--danger-color: var(--alert-level-danger-color); + --Alert--info-bg: var(--alert-level-info-bg-color); + --Alert--info-borderColor: transparent; + --Alert--info-color: var(--alert-level-info-color); + --Alert--success-bg: var(--alert-level-success-bg-color); + --Alert--success-borderColor: transparent; + --Alert--success-color: var(--alert-level-success-color); + --Alert--warning-bg: var(--alert-level-warning-bg-color); + --Alert--warning-borderColor: transparent; + --Alert--warning-color: var(--alert-level-warning-color); + --Alert-borderColor: transparent; + --Alert-borderRadius: var(--alert-base-top-left-border-radius) + var(--alert-base-top-right-border-radius) + var(--alert-base-bottom-right-border-radius) + var(--alert-base-bottom-left-border-radius); + --Alert-borderWidth: var(--borderWidth); + --Alert-boxShadow: var(--alert-base-shadow); + --Alert-fontSize: var(--alert-base-fontSize); + --Alert-marginBottom: var(--alert-base-marginBottom); + --Alert-paddingX: var(--sizes-size-9); + --Alert-paddingY: var(--gap-xs); + --Alert-fontColor: var(--colors-neutral-text-4); + --Alert-title-fontColor: var(--colors-neutral-text-2); + --Alert-height: var(--sizes-base-20); } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index d4fb26d9a..c84d33bba 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -108,31 +108,6 @@ $remFactor: 16px; --scrollbar-width: #{px2rem(17px)}; - // 以下是分组件的 - --Alert--danger-bg: var(--colors-error-10); - --Alert--danger-borderColor: transparent; - --Alert--danger-color: var(--colors-neutral-text-2); - --Alert--info-bg: var(--colors-info-10); - --Alert--info-borderColor: transparent; - --Alert--info-color: var(--colors-neutral-text-2); - --Alert--success-bg: var(--colors-success-10); - --Alert--success-borderColor: transparent; - --Alert--success-color: var(--colors-neutral-text-2); - --Alert--warning-bg: var(--colors-warning-10); - --Alert--warning-borderColor: transparent; - --Alert--warning-color: var(--colors-neutral-text-2); - --Alert-borderColor: transparent; - --Alert-borderRadius: var(--borders-radius-3); - --Alert-borderWidth: var(--borderWidth); - --Alert-boxShadow: none; - --Alert-fontSize: var(--fonts-size-8); - --Alert-marginBottom: var(--sizes-size-9); - --Alert-paddingX: var(--sizes-size-9); - --Alert-paddingY: var(--gap-xs); - --Alert-fontColor: var(--colors-neutral-text-4); - --Alert-title-fontColor: var(--colors-neutral-text-2); - --Alert-height: var(--sizes-base-20); - --Audio-border: #{px2rem(1px)} solid #dee2e6; --Audio-height: #{px2rem(50px)}; --Audio-input-width: #{px2rem(80px)}; @@ -973,20 +948,6 @@ $remFactor: 16px; --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0; --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)}; - --Steps-bg: var(--borderColorDarken); - --Steps-status-success: var(--info); - --Steps-status-error: var(--Tag-error-color); - --Steps-status-wait: #84868c; - --Steps-icon-fontsize: var(--fontSizeLg); - --Steps-title-fontsize: var(--fontSizeMd); - --Steps-title-color: #151b26; - --Steps-sub-title-fontsize: var(--fontSizeBase); - --Steps-sub-title-color: var(--text-color); - --Steps-description-title-fontsize: var(--fontSizeSm); - --Steps-description-title-color: #84868c; - --Steps-line-bg: var(--Steps-bg); - --Steps-line-success-bg: var(--Steps-status-success); - --Progress-borderRadius: var(--borderRadius); --Progress-animate-backgroundColor: #fff; --Progress-bar-backgroundColor: #d3d9e6; diff --git a/packages/amis-ui/scss/components/_alert.scss b/packages/amis-ui/scss/components/_alert.scss index 051866c7e..0e85ddb08 100644 --- a/packages/amis-ui/scss/components/_alert.scss +++ b/packages/amis-ui/scss/components/_alert.scss @@ -1,10 +1,13 @@ .#{$ns}Alert { font-size: var(--Alert-fontSize); + font-weight: var(--alert-base-fontWeight); box-shadow: var(--Alert-boxShadow); - padding: var(--Alert-paddingY) var(--Alert-paddingX); + padding: var(--alert-base-paddingTop) var(--alert-base-paddingRight) + var(--alert-base-paddingBottom) var(--alert-base-paddingLeft); border: var(--Alert-borderWidth) solid var(--Alert-borderColor); border-radius: var(--Alert-borderRadius); - margin-bottom: var(--Alert-marginBottom); + margin: var(--alert-base-marginTop) var(--alert-base-marginRight) + var(--Alert-marginBottom) var(--alert-base-marginLeft); position: relative; color: var(--Alert-fontColor); display: flex; @@ -13,7 +16,9 @@ align-items: flex-start; &-has-title { - padding: var(--Alert-paddingX); + padding: var(--alert-base-title-paddingTop) + var(--alert-base-title-paddingRight) var(--alert-base-title-paddingBottom) + var(--alert-base-title-paddingLeft); .#{$ns}Alert-content { .#{$ns}Alert-title { @@ -27,19 +32,19 @@ } &-icon { - margin-right: var(--gap-sm); - font-size: var(--fontSizeLg); + margin-right: var(--alert-icon-margin-right); + font-size: var(--alert-icon-size); } &-content { flex: 1; .#{$ns}Alert-title { - color: var(--text-color); - font-size: var(--fontSizeBase); - font-weight: 500; + color: var(--alert-base-title-color); + font-size: var(--alert-base-title-fontSize); + font-weight: var(--alert-base-title-fontWeight); line-height: #{px2rem(24px)}; - margin-bottom: #{px2rem(4px)}; + margin-bottom: var(--alert-base-title-margin-bottom); } .#{$ns}Alert-desc { @@ -74,23 +79,39 @@ color: var(--Alert--danger-color); background: var(--Alert--danger-bg); border-color: var(--Alert--danger-borderColor); + + .#{$ns}Alert-icon .icon-alert-danger path { + fill: var(--alert-level-danger-icon-color); + } } &--info { color: var(--Alert--info-color); background: var(--Alert--info-bg); border-color: var(--Alert--info-borderColor); + + .#{$ns}Alert-icon .icon-alert-info path { + fill: var(--alert-level-info-icon-color); + } } &--success { color: var(--Alert--success-color); background: var(--Alert--success-bg); border-color: var(--Alert--success-borderColor); + + .#{$ns}Alert-icon .icon-alert-success path { + fill: var(--alert-level-success-icon-color); + } } &--warning { color: var(--Alert--warning-color); background: var(--Alert--warning-bg); border-color: var(--Alert--warning-borderColor); + + .#{$ns}Alert-icon .icon-alert-warning path { + fill: var(--alert-level-warning-icon-color); + } } } diff --git a/packages/amis-ui/scss/components/_steps.scss b/packages/amis-ui/scss/components/_steps.scss index 1da4af021..739e6d22d 100644 --- a/packages/amis-ui/scss/components/_steps.scss +++ b/packages/amis-ui/scss/components/_steps.scss @@ -14,11 +14,11 @@ &Icon { vertical-align: top; display: inline-block; - margin-right: px2rem(10px); + padding-right: var(--steps-base-icon-paddingRight); .#{$ns}StepsItem-icon { display: inline-block; - width: px2rem(30px); - height: px2rem(30px); + width: var(--steps-base-icon-size); + height: var(--steps-base-icon-size); line-height: px2rem(28px); border-radius: 50%; font-size: var(--Steps-icon-fontsize); @@ -38,7 +38,8 @@ .#{$ns}StepsItem-title { font-size: var(--Steps-title-fontsize); color: var(--Steps-title-color); - padding-right: px2rem(8px); + font-weight: var(--steps-base-fontWeight); + padding-right: var(--steps-base-title-paddingRight); position: relative; display: inline-block; > span { @@ -68,9 +69,10 @@ white-space: nowrap; } .#{$ns}StepsItem-subTitle { - padding-left: px2rem(10px); + padding-left: var(--steps-base-subTitle-paddingLeft); font-size: var(--Steps-sub-title-fontsize); color: var(--Steps-sub-title-color); + font-weight: var(--steps-base-subTitle-fontWeight); } .#{$ns}StepsItem-description { max-width: px2rem(140px); @@ -80,6 +82,7 @@ > span { color: var(--Steps-description-title-color); font-size: var(--Steps-description-title-fontsize); + font-weight: var(--steps-base-des-fontWeight); } } } @@ -277,42 +280,43 @@ &ProgressDot { margin-top: px2rem(13px); margin-bottom: px2rem(5px); - width: px2rem(8px); - height: px2rem(8px); + width: var(--steps-dot-icon-size); + height: var(--steps-dot-icon-size); margin-left: px2rem(96px); - border: 1px solid var(--Steps-line-success-bg); + border: 1px solid var(--steps-dot-process-bg-color); border-radius: 100%; + background: var(--steps-dot-finish-bg-color); } } } .is-finish { .#{$ns}StepsItem-container { &Tail:after { - background: var(--Steps-status-success); + background: var(--Steps-line-success-bg); } } } .is-wait { .#{$ns}StepsItem-container { &ProgressDot { - background: var(--Steps-line-bg); - border: 1px solid var(--Steps-line-bg); + background: var(--steps-dot-wait-bg-color); + border: 1px solid var(--steps-dot-wait-bg-color); } } } .is-error { .#{$ns}StepsItem-container { &ProgressDot { - background: var(--Steps-status-error); - border: 1px solid var(--Steps-status-error); + background: var(--steps-dot-error-bg-color); + border: 1px solid var(--steps-dot-error-bg-color); } } } .is-process { .#{$ns}StepsItem-container { &ProgressDot { - border: 1px solid var(--Steps-status-success); - background: var(--Steps-status-success); + border: 1px solid var(--steps-dot-process-bg-color); + background: var(--steps-dot-process-bg-color); } } } @@ -320,7 +324,7 @@ .#{$ns}StepsItem.is-wait { .#{$ns}StepsItem-icon { - background-color: var(--white); + background-color: var(--steps-status-wait-bg-color); color: var(--Steps-bg); border: 1px solid var(--Steps-bg); } @@ -333,18 +337,54 @@ .#{$ns}StepsItem.is-error { .#{$ns}StepsItem-icon { background-color: var(--Steps-status-error); - color: var(--white); + color: var(--steps-status-error-color); border: 1px solid var(--Steps-status-error); } } - .#{$ns}StepsItem.is-finish, - .#{$ns}StepsItem.is-process { + .#{$ns}StepsItem.is-finish { .#{$ns}StepsItem-icon { background-color: var(--Steps-status-success); - color: var(--white); + color: var(--steps-status-finish-color); border: 1px solid var(--Steps-status-success); } } + .#{$ns}StepsItem.is-process { + .#{$ns}StepsItem-icon { + background-color: var(--steps-status-process-bg-color); + color: var(--steps-status-process-color); + border: 1px solid var(--steps-status-process-bg-color); + } + } + + &--simple { + justify-content: center; + + .#{$ns}StepsItem { + flex: none; + } + + .#{$ns}StepsItem-containerWrapper + .#{$ns}StepsItem-body + .#{$ns}StepsItem-title:after { + display: none; + } + + .#{$ns}StepsItem-icon-line { + display: inline-block; + vertical-align: top; + margin-left: px2rem(8px); + + svg { + width: var(--steps-simple-icon-size); + height: var(--steps-simple-icon-size); + font-size: var(--steps-simple-icon-size); + } + } + + .StepsItem-icon-line { + content: var(--steps-simple-icon); + } + } } .#{$ns}Steps-mobile.#{$ns}Steps--horizontal { diff --git a/packages/amis-ui/src/components/Steps.tsx b/packages/amis-ui/src/components/Steps.tsx index af7612eb5..9e0d9e3a7 100644 --- a/packages/amis-ui/src/components/Steps.tsx +++ b/packages/amis-ui/src/components/Steps.tsx @@ -70,7 +70,7 @@ export interface StepsObject { /** * 展示模式 */ - mode?: 'horizontal' | 'vertical'; + mode?: 'horizontal' | 'vertical' | 'simple'; /** * 标签放置位置 @@ -86,7 +86,7 @@ export interface StepsProps extends ThemeProps { | { [propName: string]: StepStatus; }; - mode?: 'horizontal' | 'vertical'; + mode?: 'horizontal' | 'vertical' | 'simple'; labelPlacement?: 'horizontal' | 'vertical'; progressDot?: boolean; useMobileUI?: boolean; @@ -219,6 +219,15 @@ export function Steps(props: StepsProps) { + {mode === 'simple' && i < stepsRow.length - 1 && ( +
+ +
+ )} ); From d27c0d04fcf9e22323e92a524766edb6075acce5 Mon Sep 17 00:00:00 2001 From: qiaoganggang <43558337+qiaogg@users.noreply.github.com> Date: Mon, 13 Mar 2023 14:05:55 +0800 Subject: [PATCH 07/25] =?UTF-8?q?feat:=20spinner=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=8E=A5=E5=85=A5=E4=B8=BB=E9=A2=98=20(#6340)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: m * feat: spinner删除propriety中css变量 * feat: 修改spinner变量 * feat: 删除多余代码 * fix: spinner css变量修改 * fix: spinner --------- Co-authored-by: qiaoganggang --- packages/amis-ui/scss/_components.scss | 21 +++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 11 ---------- .../amis-ui/scss/components/_spinner.scss | 10 +++++---- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 651437c6f..bdab01bdf 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3267,4 +3267,25 @@ --Alert-fontColor: var(--colors-neutral-text-4); --Alert-title-fontColor: var(--colors-neutral-text-2); --Alert-height: var(--sizes-base-20); + + --spinner-base-color: var(--colors-link-5); + --spinner-base-fontSize: var(--fonts-size-8); + --spinner-base-fontWeight: var(--fonts-weight-6); + --spinner-base-tip-size: var(--sizes-base-6); + --spinner-sm-size: var(--sizes-base-8); + --spinner-size-size: var(--sizes-base-16); + --spinner-lg-size: var(--sizes-base-24); + --spinner-overlay-bg: var(--colors-neutral-fill-11); + --spinner-color: var(--colors-brand-5); + + --Spinner--lg-height: var(--spinner-lg-size); + --Spinner--lg-width: var(--spinner-lg-size); + --Spinner--sm-height: var(--spinner-sm-size); + --Spinner--sm-width: var(--spinner-sm-size); + // 修改自 https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg + --Spinner-bg: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='); + --Spinner-height: var(--spinner-size-size); + --Spinner-overlay-bg: rgba(255, 255, 255, 0.4); + --Spinner-width: var(--spinner-size-size); + --Spinner-color: var(--spinner-base-color); } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index c84d33bba..26007e69a 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -700,17 +700,6 @@ $remFactor: 16px; --Sparkline-line-color: var(--info); --Sparkline-area-color: #{rgba($info, 0.1)}; - --Spinner--lg-height: #{px2rem(48px)}; - --Spinner--lg-width: #{px2rem(48px)}; - --Spinner--sm-height: #{px2rem(16px)}; - --Spinner--sm-width: #{px2rem(16px)}; - // 修改自 https://github.com/SamHerbert/SVG-Loaders/blob/master/svg-loaders/tail-spin.svg - --Spinner-bg: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=='); - --Spinner-height: #{px2rem(32px)}; - --Spinner-overlay-bg: rgba(255, 255, 255, 0.4); - --Spinner-width: #{px2rem(32px)}; - --Spinner-color: var(--colors-brand-5); - --Table--unsaved-heading-bg: #e8f0fe; --Table--unsaved-heading-color: #4285f4; --Table-bg: var(--colors-neutral-fill-11); diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss index b3de6f75f..3ab32d0b3 100644 --- a/packages/amis-ui/scss/components/_spinner.scss +++ b/packages/amis-ui/scss/components/_spinner.scss @@ -100,14 +100,16 @@ margin: px2rem(12px) 0 0 0; word-break: keep-all; white-space: nowrap; + font-size: var(--spinner-base-fontSize); color: var(--Spinner-color); + font-weight: var(--spinner-base-fontWeight); } &.#{$ns}Spinner-tip--top { flex-direction: column-reverse; .#{$ns}Spinner-tip { - margin: 0 0 px2rem(12px) 0; + margin: 0 0 var(--spinner-base-tip-size) 0; } } @@ -115,7 +117,7 @@ flex-direction: row; .#{$ns}Spinner-tip { - margin: 0 0 0 px2rem(12px); + margin: 0 0 0 var(--spinner-base-tip-size); } } @@ -123,7 +125,7 @@ flex-direction: column; .#{$ns}Spinner-tip { - margin: px2rem(12px) 0 0 0; + margin: var(--spinner-base-tip-size) 0 0 0; } } @@ -131,7 +133,7 @@ flex-direction: row-reverse; .#{$ns}Spinner-tip { - margin: 0 px2rem(12px) 0 0; + margin: 0 var(--spinner-base-tip-size) 0 0; } } From 72a0a571e866e8004449756fc2461618fd8b18fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Mon, 13 Mar 2023 14:13:26 +0800 Subject: [PATCH 08/25] =?UTF-8?q?feat:=20icon-select=20=E4=B8=8A=E4=BC=A0?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=20(#6339)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: icon-select 上传图标 * feat: icon-select 自定义schema * style:tpl组件变量去除 * 去掉无效内容 --------- Co-authored-by: xujiahao01 --- packages/amis-ui/scss/_components.scss | 9 --------- packages/amis-ui/scss/components/_tpl.scss | 13 ------------- .../amis-ui/scss/components/form/_icon-select.scss | 5 +++++ packages/amis/src/renderers/Form/IconSelect.tsx | 7 ++++++- 4 files changed, 11 insertions(+), 23 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index bdab01bdf..50a61e8ec 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1299,15 +1299,6 @@ --Form-input-onHover-borderColor: var(--colors-brand-5); --Form-input-onFocused-borderColor: var(--colors-brand-5); - // tpl 文字 - --tpl-base-default-color: var(--colors-neutral-text-2); - --tpl-base-default-bgColor: transparent; - --tpl-base-hover-color: var(--colors-neutral-text-2); - --tpl-base-hover-bgColor: transparent; - --tpl-base-active-color: var(--colors-neutral-text-2); - --tpl-base-active-bgColor: transparent; - --tpl-base-font-fontSize: var(--fonts-size-7); - // 勾选框 --checkbox-checkbox-default-height: var(--sizes-size-9); --checkbox-checkbox-default-bg-color: var(--colors-neutral-fill-11); diff --git a/packages/amis-ui/scss/components/_tpl.scss b/packages/amis-ui/scss/components/_tpl.scss index 834987aa0..a2f296018 100644 --- a/packages/amis-ui/scss/components/_tpl.scss +++ b/packages/amis-ui/scss/components/_tpl.scss @@ -2,17 +2,4 @@ &.is-inline { display: inline; } - - font-size: var(--tpl-base-font-fontSize); - - color: var(--tpl-base-default-color); - background: var(--tpl-base-default-bgColor); - &:hover { - color: var(--tpl-base-hover-color); - background: var(--tpl-base-hover-bgColor); - } - &:active { - color: var(--tpl-base-active-color); - background: var(--tpl-base-active-bgColor); - } } diff --git a/packages/amis-ui/scss/components/form/_icon-select.scss b/packages/amis-ui/scss/components/form/_icon-select.scss index 98096895c..94b792846 100644 --- a/packages/amis-ui/scss/components/form/_icon-select.scss +++ b/packages/amis-ui/scss/components/form/_icon-select.scss @@ -17,6 +17,11 @@ margin-left: var(--IconSelect-base-margin); } + &-func { + display: inline-block; + margin-left: 12px; + } + &-content { display: flex; position: relative; diff --git a/packages/amis/src/renderers/Form/IconSelect.tsx b/packages/amis/src/renderers/Form/IconSelect.tsx index be2250d85..a586ca302 100644 --- a/packages/amis/src/renderers/Form/IconSelect.tsx +++ b/packages/amis/src/renderers/Form/IconSelect.tsx @@ -285,7 +285,7 @@ export default class IconSelectControl extends React.PureComponent< @autobind renderModalContent() { - const {render, classPrefix: ns, loadingConfig} = this.props; + const {render, classPrefix: ns, loadingConfig, funcSchema} = this.props; const icons = this.getIconsByType(); @@ -317,6 +317,11 @@ export default class IconSelectControl extends React.PureComponent< )) || null} + {( + funcSchema + && render('func', funcSchema, {className: cx(`${ns}IconSelectControl-Modal-func`)}) + ) || null} +
Date: Tue, 14 Mar 2023 19:50:31 +0800 Subject: [PATCH 09/25] =?UTF-8?q?faeture:[amis-saas-10190]=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E7=BB=84=E4=BB=B6TAG=E5=BC=80=E5=8F=91=20(#6344)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * faeture:[amis-saas-10190]主题组件TAG开发 * faeture:[amis-saas-10190]主题组件TAG开发 * faeture:[amis-saas-10190]修改生成tag字段大小写 * faeture:[amis-saas-10190]修改tag配置 --------- Co-authored-by: zhangzheyu02 --- packages/amis-ui/scss/_components.scss | 147 ++++++++++++++++++++- packages/amis-ui/scss/_properties.scss | 13 -- packages/amis-ui/scss/components/_tag.scss | 74 ++++++----- 3 files changed, 186 insertions(+), 48 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 50a61e8ec..19ba859fe 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -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); + + +} \ No newline at end of file diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 26007e69a..a32a53051 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -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; diff --git a/packages/amis-ui/scss/components/_tag.scss b/packages/amis-ui/scss/components/_tag.scss index 4caecdf4a..20c4db126 100644 --- a/packages/amis-ui/scss/components/_tag.scss +++ b/packages/amis-ui/scss/components/_tag.scss @@ -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; From 5c0758a3884beabf9daa74aa4aa1540bf336ddb3 Mon Sep 17 00:00:00 2001 From: qiaoganggang <43558337+qiaogg@users.noreply.github.com> Date: Wed, 15 Mar 2023 18:47:17 +0800 Subject: [PATCH 10/25] =?UTF-8?q?feat:=20toast=E4=B8=BB=E9=A2=98=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=20(#6380)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: m * feat: spinner删除propriety中css变量 * feat: 修改spinner变量 * feat: 删除多余代码 * fix: spinner css变量修改 * fix: spinner * feat: toast接入主题 * feat: 去掉多余代码 --------- Co-authored-by: qiaoganggang --- packages/amis-ui/scss/_components.scss | 105 ++++++++++++++++++- packages/amis-ui/scss/_properties.scss | 34 ------ packages/amis-ui/scss/components/_toast.scss | 72 +++++++++++-- 3 files changed, 166 insertions(+), 45 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 19ba859fe..ab73a639d 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3280,8 +3280,6 @@ --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); @@ -3423,5 +3421,106 @@ var(--Tag-model-rounded-bottom-border-color) var(--Tag-model-rounded-left-border-color); + --Toast-color: var(--colors-neutral-text-11); + --Toast-paddingTop: var(--sizes-size-3); + --Toast-paddingBottom: var(--sizes-size-3); + --Toast-paddingLeft: var(--sizes-size-9); + --Toast-paddingRight: var(--sizes-size-9); + --Toast-top-right-border-radius: var(--borders-radius-3); + --Toast-top-left-border-radius: var(--borders-radius-3); + --Toast-bottom-right-border-radius: var(--borders-radius-3); + --Toast-bottom-left-border-radius: var(--borders-radius-3); + --Toast-icon-size: var(--sizes-size-9); -} \ No newline at end of file + --Toast--danger-color: var(--colors-neutral-text-2); + --Toast--danger-fontSize: var(--fonts-size-8); + --Toast--danger-fontWeight: var(--fonts-weight-6); + --Toast--danger-top-border-color: var(--colors-neutral-line-11); + --Toast--danger-top-border-width: var(--borders-width-2); + --Toast--danger-top-border-style: var(--borders-style-2); + --Toast--danger-right-border-color: var(--colors-neutral-line-11); + --Toast--danger-right-border-width: var(--borders-width-2); + --Toast--danger-right-border-style: var(--borders-style-2); + --Toast--danger-bottom-border-color: var(--colors-neutral-line-11); + --Toast--danger-bottom-border-width: var(--borders-width-2); + --Toast--danger-bottom-border-style: var(--borders-style-2); + --Toast--danger-left-border-color: var(--colors-neutral-line-11); + --Toast--danger-left-border-width: var(--borders-width-2); + --Toast--danger-left-border-style: var(--borders-style-2); + --Toast--danger-top-right-border-radius: var(--borders-radius-3); + --Toast--danger-top-left-border-radius: var(--borders-radius-3); + --Toast--danger-bottom-right-border-radius: var(--borders-radius-3); + --Toast--danger-bottom-left-border-radius: var(--borders-radius-3); + --Toast--danger-bgColor: var(--colors-neutral-fill-11); + --Toast--info-color: var(--colors-neutral-text-2); + --Toast--info-fontSize: var(--fonts-size-6); + --Toast--info-fontWeight: var(--fonts-weight-6); + --Toast--info-top-border-color: var(--colors-neutral-line-11); + --Toast--info-top-border-width: var(--borders-width-2); + --Toast--info-top-border-style: var(--borders-style-2); + --Toast--info-right-border-color: var(--colors-neutral-line-11); + --Toast--info-right-border-width: var(--borders-width-2); + --Toast--info-right-border-style: var(--borders-style-2); + --Toast--info-bottom-border-color: var(--colors-neutral-line-11); + --Toast--info-bottom-border-width: var(--borders-width-2); + --Toast--info-bottom-border-style: var(--borders-style-2); + --Toast--info-left-border-color: var(--colors-neutral-line-11); + --Toast--info-left-border-width: var(--borders-width-2); + --Toast--info-left-border-style: var(--borders-style-2); + --Toast--info-bgColor: var(--colors-neutral-fill-11); + --Toast--success-color: var(--colors-neutral-text-2); + --Toast--success-fontSize: var(--fonts-weight-6); + --Toast--success-fontWeight: var(--fonts-weight-6); + --Toast--success-fontSize: var(--fonts-size-8); + --Toast--success-fontWeight: var(--fonts-weight-6); + --Toast--success-top-border-color: var(--colors-neutral-line-11); + --Toast--success-top-border-width: var(--borders-width-2); + --Toast--success-top-border-style: var(--borders-style-2); + --Toast--success-right-border-color: var(--colors-neutral-line-11); + --Toast--success-right-border-width: var(--borders-width-2); + --Toast--success-right-border-style: var(--borders-style-2); + --Toast--success-bottom-border-color: var(--colors-neutral-line-11); + --Toast--success-bottom-border-width: var(--borders-width-2); + --Toast--success-bottom-border-style: var(--borders-style-2); + --Toast--success-left-border-color: var(--colors-neutral-line-11); + --Toast--success-left-border-width: var(--borders-width-2); + --Toast--success-left-border-style: var(--borders-style-2); + --Toast--success-top-right-border-radius: var(--borders-radius-3); + --Toast--success-top-left-border-radius: var(--borders-radius-3); + --Toast--success-bottom-right-border-radius: var(--borders-radius-3); + --Toast--success-bottom-left-border-radius: var(--borders-radius-3); + --Toast--success-bgColor: var(--colors-neutral-fill-11); + --Toast--warning-color: var(--colors-neutral-text-2); + --Toast--warning-fontSize: var(--fonts-size-8); + --Toast--warning-fontWeight: var(--fonts-weight-6); + --Toast--warning-top-border-color: var(--colors-neutral-line-11); + --Toast--warning-top-border-width: var(--borders-width-2); + --Toast--warning-top-border-style: var(--borders-style-2); + --Toast--warning-right-border-color: var(--colors-neutral-line-11); + --Toast--warning-right-border-width: var(--borders-width-2); + --Toast--warning-right-border-style: var(--borders-style-2); + --Toast--warning-bottom-border-color: var(--colors-neutral-line-11); + --Toast--warning-bottom-border-width: var(--borders-width-2); + --Toast--warning-bottom-border-style: var(--borders-style-2); + --Toast--warning-left-border-color: var(--colors-neutral-line-11); + --Toast--warning-left-border-width: var(--borders-width-2); + --Toast--warning-left-border-style: var(--borders-style-2); + --Toast--warning-top-right-border-radius: var(--borders-radius-3); + --Toast--warning-top-left-border-radius: var(--borders-radius-3); + --Toast--warning-bottom-right-border-radius: var(--borders-radius-3); + --Toast--warning-bottom-left-border-radius: var(--borders-radius-3); + --Toast--warning-bgColor: var(--colors-neutral-fill-11); + + --Toast-border-width: var(--borders-width-2); + --Toast-borderRadius: var(--borders-radius-3); + --Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06), + 0px 1px 10px 0px rgba(8, 14, 26, 0.05), + 0px 2px 4px -1px rgba(8, 14, 26, 0.04); + --Toast-close-color: var(--colors-neutral-text-5); + --Toast-close--onHover-color: var(--colors-brand-5); + --Toast-icon-width: var(--Toast-icon-size); + --Toast-icon-height: var(--Toast-icon-size); + --Toast-opacity: 1; + --Toast-title-display: inline; + --Toast-width: #{px2rem(400px)}; +} diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index a32a53051..89d438b86 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -826,40 +826,6 @@ $remFactor: 16px; ); --TagControl-sugTip-color: var(--colors-brand-5); - --Toast-color: var(--colors-neutral-text-11); - --Toast--danger-bgColor: var(--colors-neutral-fill-11); - --Toast--danger-borderColor: var(--colors-neutral-line-11); - --Toast--danger-color: var(--colors-neutral-text-2); - --Toast--info-bgColor: var(--colors-neutral-fill-11); - --Toast--info-borderColor: var(--colors-neutral-line-11); - --Toast--info-color: var(--colors-neutral-text-2); - --Toast--success-bgColor: var(--colors-neutral-fill-11); - --Toast--success-borderColor: var(--colors-neutral-line-11); - --Toast--success-color: var(--colors-neutral-text-2); - --Toast--warning-bgColor: var(--colors-neutral-fill-11); - --Toast--warning-borderColor: var(--colors-neutral-line-11); - --Toast--warning-color: var(--colors-neutral-text-2); - - --Toast-border-width: var(--borders-width-2); - --Toast-borderRadius: var(--borders-radius-3); - --Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06), - 0px 1px 10px 0px rgba(8, 14, 26, 0.05), - 0px 2px 4px -1px rgba(8, 14, 26, 0.04); - --Toast-close-color: var(--colors-neutral-text-5); - --Toast-close--onHover-color: var(--colors-brand-5); - - --Toast-icon-width: #{px2rem(16px)}; - --Toast-icon-height: var(--Toast-icon-width); - - --Toast-opacity: 1; - --Toast-paddingL: var(--sizes-base-13); - --Toast-paddingX: var(--sizes-size-9); - --Toast-paddingY: var(--gap-xs); - --Toast-title-display: inline; - --Toast-width: #{px2rem(400px)}; - - --Toast--info-paddingL: var(--sizes-size-0); - --Tooltip--attr-bg: rgba(0, 0, 0, 0.7); --Tooltip--attr-borderColor: var(--borderColor); --Tooltip--attr-borderRadius: var(--borderRadius); diff --git a/packages/amis-ui/scss/components/_toast.scss b/packages/amis-ui/scss/components/_toast.scss index 2a0e4018c..85e33989e 100644 --- a/packages/amis-ui/scss/components/_toast.scss +++ b/packages/amis-ui/scss/components/_toast.scss @@ -69,10 +69,13 @@ pointer-events: auto; margin-bottom: var(--gap-xs); - padding: var(--Toast-paddingY) var(--Toast-paddingX); - + padding: var(--Toast-paddingTop) var(--Toast-paddingRight) + var(--Toast-paddingBottom) var(--Toast-paddingLeft); box-shadow: var(--Toast-box-shadow); - border-radius: var(--Toast-borderRadius); + border-radius: var(--Toast-top-left-border-radius) + var(--Toast-top-right-border-radius) + var(--Toast-bottom-right-border-radius) + var(--Toast-bottom-left-border-radius); border: var(--Toast-border-width) solid; color: var(--Toast-color); position: relative; @@ -133,7 +136,6 @@ } .#{$ns}Toast-body { - font-size: var(--fontSizeSm); display: inline-block; vertical-align: middle; white-space: pre-wrap; @@ -166,26 +168,80 @@ // colors &--error { color: var(--Toast--danger-color); - border-color: var(--Toast--danger-borderColor); background: var(--Toast--danger-bgColor); + font-size: var(--Toast--danger-fontSize); + font-weight: var(--Toast--danger-fontWeight); + background: var(--Toast--danger-bgColor); + border-width: var(--Toast--danger-top-border-width) + var(--Toast--danger-right-border-width) + var(--Toast--danger-bottom-border-width) + var(--Toast--danger-left-border-width); + border-style: var(--Toast--danger-top-border-style) + var(--Toast--danger-right-border-style) + var(--Toast--danger-bottom-border-style) + var(--Toast--danger-left-border-style); + border-color: var(--Toast--danger-top-border-color) + var(--Toast--danger-right-border-color) + var(--Toast--danger-bottom-border-color) + var(--Toast--danger-left-border-color); } &--warning { color: var(--Toast--warning-color); - border-color: var(--Toast--warning-borderColor); background: var(--Toast--warning-bgColor); + font-size: var(--Toast--warning-fontSize); + font-weight: var(--Toast--warning-fontWeight); + background: var(--Toast--warning-bgColor); + border-width: var(--Toast--warning-top-border-width) + var(--Toast--warning-right-border-width) + var(--Toast--warning-bottom-border-width) + var(--Toast--warning-left-border-width); + border-style: var(--Toast--warning-top-border-style) + var(--Toast--warning-right-border-style) + var(--Toast--warning-bottom-border-style) + var(--Toast--warning-left-border-style); + border-color: var(--Toast--warning-top-border-color) + var(--Toast--warning-right-border-color) + var(--Toast--warning-bottom-border-color) + var(--Toast--warning-left-border-color); } &--info { color: var(--Toast--info-color); - border-color: var(--Toast--info-borderColor); + font-size: var(--Toast--info-fontSize); + font-weight: var(--Toast--info-fontWeight); background: var(--Toast--info-bgColor); + border-width: var(--Toast--info-top-border-width) + var(--Toast--info-right-border-width) + var(--Toast--info-bottom-border-width) + var(--Toast--info-left-border-width); + border-style: var(--Toast--info-top-border-style) + var(--Toast--info-right-border-style) + var(--Toast--info-bottom-border-style) + var(--Toast--info-left-border-style); + border-color: var(--Toast--info-top-border-color) + var(--Toast--info-right-border-color) + var(--Toast--info-bottom-border-color) + var(--Toast--info-left-border-color); } &--success { color: var(--Toast--success-color); - border-color: var(--Toast--success-borderColor); + font-size: var(--Toast--success-fontSize); + font-weight: var(--Toast--success-fontWeight); background: var(--Toast--success-bgColor); + border-width: var(--Toast--success-top-border-width) + var(--Toast--success-right-border-width) + var(--Toast--success-bottom-border-width) + var(--Toast--success-left-border-width); + border-style: var(--Toast--success-top-border-style) + var(--Toast--success-right-border-style) + var(--Toast--success-bottom-border-style) + var(--Toast--success-left-border-style); + border-color: var(--Toast--success-top-border-color) + var(--Toast--success-right-border-color) + var(--Toast--success-bottom-border-color) + var(--Toast--success-left-border-color); } // positions From 456f824eff74b73166924e8e62d8e5888ffa5b28 Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Thu, 16 Mar 2023 19:46:35 +0800 Subject: [PATCH 11/25] =?UTF-8?q?theme:=20=E4=B8=BB=E9=A2=98=E6=94=B9?= =?UTF-8?q?=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/renderers/Item.tsx | 5 +-- packages/amis-core/src/utils/style-helper.ts | 25 ++++++++------- .../amis-ui/src/components/NumberInput.tsx | 31 +++++++++++++------ packages/amis/src/renderers/Action.tsx | 3 +- .../amis/src/renderers/Form/InputNumber.tsx | 26 ++++++++++++++-- .../amis/src/renderers/Form/InputText.tsx | 10 +++--- 6 files changed, 70 insertions(+), 30 deletions(-) diff --git a/packages/amis-core/src/renderers/Item.tsx b/packages/amis-core/src/renderers/Item.tsx index 00617fa30..ece66d320 100644 --- a/packages/amis-core/src/renderers/Item.tsx +++ b/packages/amis-core/src/renderers/Item.tsx @@ -1456,6 +1456,7 @@ export class FormItemWrap extends React.Component { render, formItem: model, css, + themeCss, id, labelClassName, descriptionClassName @@ -1463,7 +1464,7 @@ export class FormItemWrap extends React.Component { const mode = this.props.mode || formMode; insertCustomStyle( - css, + themeCss || css, [ { key: 'labelClassName', @@ -1473,7 +1474,7 @@ export class FormItemWrap extends React.Component { id + '-label' ); insertCustomStyle( - css, + themeCss || css, [ { key: 'descriptionClassName', diff --git a/packages/amis-core/src/utils/style-helper.ts b/packages/amis-core/src/utils/style-helper.ts index 0902078a3..38846437d 100644 --- a/packages/amis-core/src/utils/style-helper.ts +++ b/packages/amis-core/src/utils/style-helper.ts @@ -97,7 +97,7 @@ function handleInheritData(statusMap: any, data: any) { } export function formatStyle( - css: any, + themeCss: any, classNames: { key: string; value?: string; @@ -111,7 +111,7 @@ export function formatStyle( id?: string, defaultData?: any ) { - if (!css) { + if (!themeCss) { return {value: '', origin: []}; } const res = []; @@ -123,7 +123,7 @@ export function formatStyle( }; for (let item of classNames) { - const body = css[item.key]; + const body = themeCss[item.key]; const list = item.value?.split(' '); const classNameList: string[] = []; @@ -219,12 +219,13 @@ export function formatStyle( '\n ' )}\n}` }); - if (['hover', 'active', 'disabled'].includes(status)) { - res.push({ - className: cx + '.' + status, - content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}` - }); - } + // TODO:切换状态暂时先不改变组件的样式 + // if (['hover', 'active', 'disabled'].includes(status)) { + // res.push({ + // className: cx + '.' + status, + // content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}` + // }); + // } } } } @@ -236,7 +237,7 @@ export function formatStyle( } export function insertCustomStyle( - css: any, + themeCss: any, classNames: { key: string; value?: string; @@ -250,10 +251,10 @@ export function insertCustomStyle( id?: string, defaultData?: any ) { - if (!css) { + if (!themeCss) { return; } - const {value} = formatStyle(css, classNames, id, defaultData); + const {value} = formatStyle(themeCss, classNames, id, defaultData); insertStyle(value, id?.replace('u:', '') || uuid()); } diff --git a/packages/amis-ui/src/components/NumberInput.tsx b/packages/amis-ui/src/components/NumberInput.tsx index e4b2981e1..b26703b9e 100644 --- a/packages/amis-ui/src/components/NumberInput.tsx +++ b/packages/amis-ui/src/components/NumberInput.tsx @@ -69,17 +69,22 @@ export interface NumberProps extends ThemeProps { * 是否在清空内容时从数据域中删除该表单项对应的值 */ clearValueOnEmpty?: boolean; + + /** + * 数字输入框类名 + */ + inputControlClassName?: string; } export class NumberInput extends React.Component { - static defaultProps: Pick< - NumberProps, - 'step' | 'readOnly' | 'borderMode' | 'resetValue' - > = { + static defaultProps: + | Pick + | {focused: boolean} = { step: 1, readOnly: false, borderMode: 'full', - resetValue: '' + resetValue: '', + focused: false }; /** @@ -216,12 +221,14 @@ export class NumberInput extends React.Component { @autobind handleFocus(e: React.SyntheticEvent) { const {onFocus} = this.props; + this.setState({focused: true}); onFocus && onFocus(e); } @autobind handleBlur(e: React.SyntheticEvent) { const {onBlur} = this.props; + this.setState({focused: false}); onBlur && onBlur(e); } @@ -292,7 +299,8 @@ export class NumberInput extends React.Component { readOnly, displayMode, inputRef, - keyboard + keyboard, + inputControlClassName } = this.props; const precisionProps: any = { precision: NumberInput.normalizePrecision(precision, step) @@ -303,7 +311,9 @@ export class NumberInput extends React.Component { className={cx( className, showSteps === false ? 'no-steps' : '', - displayMode === 'enhance' ? 'Number--enhance-input' : '', + displayMode === 'enhance' + ? 'Number--enhance-input' + : inputControlClassName, { [`Number--border${ucFirst(borderMode)}`]: borderMode } @@ -338,7 +348,8 @@ export class NumberInput extends React.Component { showSteps, borderMode, readOnly, - displayMode + displayMode, + inputControlClassName } = this.props; return ( @@ -351,7 +362,9 @@ export class NumberInput extends React.Component { showSteps === false ? 'Number--enhance-no-steps' : '', { [`Number--enhance-border${ucFirst(borderMode)}`]: borderMode - } + }, + inputControlClassName, + this.state?.focused && 'focused' )} >
{ classnames: cx, classPrefix: ns, loadingConfig, + themeCss, css, id } = this.props; insertCustomStyle( - css, + themeCss || css, [ { key: 'className', diff --git a/packages/amis/src/renderers/Form/InputNumber.tsx b/packages/amis/src/renderers/Form/InputNumber.tsx index e1a7d260e..6b64b5322 100644 --- a/packages/amis/src/renderers/Form/InputNumber.tsx +++ b/packages/amis/src/renderers/Form/InputNumber.tsx @@ -4,7 +4,8 @@ import { FormItem, FormControlProps, FormBaseControl, - resolveEventData + resolveEventData, + insertCustomStyle } from 'amis-core'; import cx from 'classnames'; import {NumberInput, Select} from 'amis-ui'; @@ -381,7 +382,11 @@ export default class NumberControl extends React.Component< displayMode, big, resetValue, - clearValueOnEmpty + clearValueOnEmpty, + css, + themeCss, + inputControlClassName, + id } = this.props; const finalPrecision = this.filterNum(precision); const unit = this.state?.unit; @@ -408,6 +413,22 @@ export default class NumberControl extends React.Component< ? value.replace(unit, '') : value; + insertCustomStyle( + themeCss || css, + [ + { + key: 'inputControlClassName', + value: inputControlClassName, + weights: { + active: { + pre: `${inputControlClassName}.focused, ` + } + } + } + ], + id + ); + return (
.${inputControlClassName}, ` } } } @@ -1089,7 +1091,7 @@ export default class TextControl extends React.PureComponent< ); insertCustomStyle( - css, + themeCss || css, [ { key: 'addOnClassName', From 89fbbff6bb74cb4561e79f9301b3555b564ba6cd Mon Sep 17 00:00:00 2001 From: zzy1415447829 <49521093+zzy1415447829@users.noreply.github.com> Date: Fri, 17 Mar 2023 10:29:49 +0800 Subject: [PATCH 12/25] =?UTF-8?q?faeture:[amis-saas-10191]status=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E4=B8=BB=E9=A2=98=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91?= =?UTF-8?q?=20(#6385)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * faeture:[amis-saas-10190]主题组件TAG开发 * faeture:[amis-saas-10190]主题组件TAG开发 * faeture:[amis-saas-10190]修改生成tag字段大小写 * faeture:[amis-saas-10190]修改tag配置 * faeture:[amis-saas-10191]status状态主题组件开发 --------- Co-authored-by: zhangzheyu02 --- packages/amis-ui/scss/_components.scss | 24 ++++++++++++ packages/amis-ui/scss/_properties.scss | 2 - packages/amis-ui/scss/components/_status.scss | 38 +++++++++++++------ 3 files changed, 51 insertions(+), 13 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index ab73a639d..92f63fbc1 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3523,4 +3523,28 @@ --Toast-opacity: 1; --Toast-title-display: inline; --Toast-width: #{px2rem(400px)}; + + --Status-base-fontSize: var(--fonts-size-9); + --Status-base-icon-size: var(--sizes-size-8); + --Status-base-text-margin: var(--sizes-size-3); + --Status-fail-color: var(--colors-error-5); + --Status-success-color: var(--colors-success-5); + --Status-queue-color: var(--colors-warning-5); + --Status-schedule-color: var(--colors-neutral-fill-2); + --Status-pending-before-color: var(--colors-error-5); + --Status-pending-after-color: var(--colors-brand-5); + + --Status-font-size: var(--Status-base-fontSize); + --Status-font-margin: var(--Status-base-text-margin); + + --Status-icon-width: var(--Status-base-icon-size); + --Status-icon-height: var(--Status-base-icon-size); + + --Status-pending-beforeColor: var(--Status-pending-before-color); + --Status-pending-afterColor: var(--Status-pending-after-color); + + --Status-schedule-color: var(--Status-schedule-color); + --Status-warning-color: var(--Status-queue-color); + --Status-fail-color: var(--Status-fail-color); + --Status-success-color: var(--Status-success-color); } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 89d438b86..75f2e0eea 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -694,8 +694,6 @@ $remFactor: 16px; --Remark-onHover-iconColor: var(--colors-neutral-text-11); --Remark-width: var(--sizes-size-9); - --Satus-icon-width: var(--sizes-size-8); - --Satus-icon-height: var(--Satus-icon-width); --Sparkline-line-color: var(--info); --Sparkline-area-color: #{rgba($info, 0.1)}; diff --git a/packages/amis-ui/scss/components/_status.scss b/packages/amis-ui/scss/components/_status.scss index e2fc08141..39a38a2dc 100644 --- a/packages/amis-ui/scss/components/_status.scss +++ b/packages/amis-ui/scss/components/_status.scss @@ -7,8 +7,8 @@ align-items: center; &-label { - font-size: var(--fontSizeSm); - margin-left: var(--gap-xs); + font-size: var(--Status-font-size); + margin-left: var(--Status-font-margin); } @keyframes animation-rolling_red { @@ -40,8 +40,8 @@ } svg.#{$ns}Status-icon { - width: var(--Satus-icon-width); - height: var(--Satus-icon-height); + width: var(--Status-icon-width); + height: var(--Status-icon-height); top: 0; } @@ -56,7 +56,7 @@ &::before { content: ''; display: inline-block; - border: 5px solid var(--danger); + border: 5px solid var(--Status-pending-beforeColor); border-radius: 500px; position: absolute; top: 0; @@ -68,7 +68,7 @@ &::after { content: ''; display: inline-block; - border: 5px solid var(--primary); + border: 5px solid var(--Status-pending-afterColor); border-radius: 500px; position: absolute; top: 0; @@ -80,23 +80,39 @@ } &.icon-warning { - color: var(--warning); + color: var(--Status-warning-color); + } + + &.icon-fail { + color: var(--Status-fail-color) + } + + &.icon-success { + color: var(--Status-success-color) + } + + &.icon-schedule { + color: var(--Status-schedule-color) } } .#{$ns}Status-icon.rolling + &-label { - color: var(--warning); + color: var(--Status-warning-color); } .#{$ns}Status-icon.icon-success + &-label { - color: var(--success); + color: var(--Status-success-color); } .#{$ns}Status-icon.icon-fail + &-label { - color: var(--danger); + color: var(--Status-fail-color); } .#{$ns}Status-icon.icon-warning + &-label { - color: var(--warning); + color: var(--Status-warning-color); + } + + .#{$ns}Status-icon.icon-schedule + &-label { + color: var(--Status-schedule-color); } } From 4b2635abbcf16a94ac5b6facf41160f3c104461c Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Fri, 17 Mar 2023 11:09:16 +0800 Subject: [PATCH 13/25] =?UTF-8?q?theme:=20=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/utils/style-helper.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/amis-core/src/utils/style-helper.ts b/packages/amis-core/src/utils/style-helper.ts index 38846437d..d9b7a169a 100644 --- a/packages/amis-core/src/utils/style-helper.ts +++ b/packages/amis-core/src/utils/style-helper.ts @@ -255,7 +255,9 @@ export function insertCustomStyle( return; } const {value} = formatStyle(themeCss, classNames, id, defaultData); - insertStyle(value, id?.replace('u:', '') || uuid()); + if (value) { + insertStyle(value, id?.replace('u:', '') || uuid()); + } } /** From 266e72e9cca0e9d6ce713f46dda397acaa327256 Mon Sep 17 00:00:00 2001 From: HongYang <33488114+hy993658052@users.noreply.github.com> Date: Tue, 21 Mar 2023 16:23:19 +0800 Subject: [PATCH 14/25] =?UTF-8?q?feat:=20transfer&inputTag&fieldset?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=80=82=E9=85=8D=20(#6429)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 穿梭框主题修改 * feat: 标签选择器inputTag主题适配 * feat: 字段集fieldset主题适配 --------- Co-authored-by: hongyang03 --- docs/zh-CN/components/form/fieldset.md | 2 +- packages/amis-ui/scss/_components.scss | 327 ++++++++++-------- .../scss/components/form/_fieldset.scss | 90 +++-- .../amis-ui/scss/components/form/_tag.scss | 50 ++- .../scss/components/form/_transfer.scss | 30 +- packages/amis/src/renderers/Form/FieldSet.tsx | 2 +- 6 files changed, 297 insertions(+), 204 deletions(-) diff --git a/docs/zh-CN/components/form/fieldset.md b/docs/zh-CN/components/form/fieldset.md index 20ea525eb..1a2356ab6 100755 --- a/docs/zh-CN/components/form/fieldset.md +++ b/docs/zh-CN/components/form/fieldset.md @@ -242,4 +242,4 @@ fieldSet 的另一种标题展现样式，不同的是展开的时候收起文 | collapsable | `boolean` | `false` | 是否可折叠 | | collapsed | `booelan` | `false` | 默认是否折叠 | | collapseTitle | [SchemaNode](../../../docs/types/schemanode) | `收起` | 收起的标题 | -| size | string | `` | 大小，支持 xs、sm、base、lg、xl | +| size | string | `` | 大小，支持 xs、sm、base、md、lg | diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 92f63fbc1..7ef476801 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -756,147 +756,123 @@ --button-size-lg-marginBottom: var(--sizes-size-0); --button-size-lg-paddingRight: var(--sizes-size-9); --button-size-lg-paddingBottom: var(--sizes-size-6); - --transfer-base-top-border-color: var(--colors-neutral-line-8); - --transfer-base-top-border-style: var(--borders-style-2); - --transfer-base-top-border-width: var(--borders-width-2); - --transfer-base-left-border-color: var(--colors-neutral-line-8); - --transfer-base-left-border-style: var(--borders-style-2); - --transfer-base-left-border-width: var(--borders-width-2); - --transfer-base-right-border-color: var(--colors-neutral-line-8); - --transfer-base-right-border-style: var(--borders-style-2); - --transfer-base-right-border-width: var(--borders-width-2); - --transfer-base-bottom-border-color: var(--colors-neutral-line-8); - --transfer-base-bottom-border-style: var(--borders-style-2); - --transfer-base-bottom-border-width: var(--borders-width-2); - --transfer-base-top-left-border-radius: var(--borders-radius-3); - --transfer-base-top-right-border-radius: var(--borders-radius-3); - --transfer-base-bottom-left-border-radius: var(--borders-radius-2); - --transfer-base-bottom-right-border-radius: var(--borders-radius-2); - --transfer-base-shadow: var(--shadows-shadow-none); --transfer-base-title-bg: var(--colors-neutral-fill-10); + --transfer-base-title-color: var(--colors-neutral-text-2); --transfer-base-title-fontSize: var(--fonts-size-7); - --transfer-base-content-fontSize: var(--fonts-size-7); - --transfer-base-title-font-color: var(--colors-neutral-text-2); --transfer-base-title-fontWeight: var(--fonts-weight-6); --transfer-base-title-lineHeight: var(--fonts-lineHeight-2); - --transfer-base-content-font-color: var(--colors-neutral-text-2); + --transfer-base-content-color: var(--colors-neutral-text-2); + --transfer-base-content-fontSize: var(--fonts-size-7); --transfer-base-content-fontWeight: var(--fonts-weight-6); --transfer-base-content-lineHeight: var(--fonts-lineHeight-2); - --transfer-base-body-marginTop: var(--sizes-size-1); - --transfer-base-body-marginLeft: var(--sizes-size-1); - --transfer-base-body-paddingTop: var(--sizes-size-1); - --transfer-base-body-marginRight: var(--sizes-size-1); - --transfer-base-body-paddingLeft: var(--sizes-size-1); - --transfer-base-body-marginBottom: var(--sizes-size-1); - --transfer-base-body-paddingRight: var(--sizes-size-1); - --transfer-base-body-paddingBottom: var(--sizes-size-1); - --transfer-base-header-marginTop: var(--sizes-size-1); - --transfer-base-header-marginLeft: var(--sizes-size-1); + --transfer-base-top-border-color: var(--colors-neutral-line-8); + --transfer-base-top-border-width: var(--borders-width-2); + --transfer-base-top-border-style: var(--borders-style-2); + --transfer-base-right-border-color: var(--colors-neutral-line-8); + --transfer-base-right-border-width: var(--borders-width-2); + --transfer-base-right-border-style: var(--borders-style-2); + --transfer-base-bottom-border-color: var(--colors-neutral-line-8); + --transfer-base-bottom-border-width: var(--borders-width-2); + --transfer-base-bottom-border-style: var(--borders-style-2); + --transfer-base-left-border-color: var(--colors-neutral-line-8); + --transfer-base-left-border-width: var(--borders-width-2); + --transfer-base-left-border-style: var(--borders-style-2); + --transfer-base-top-right-border-radius: var(--borders-radius-3); + --transfer-base-top-left-border-radius: var(--borders-radius-3); + --transfer-base-bottom-right-border-radius: var(--borders-radius-2); + --transfer-base-bottom-left-border-radius: var(--borders-radius-2); --transfer-base-header-paddingTop: var(--sizes-size-5); - --transfer-base-header-marginRight: var(--sizes-size-1); - --transfer-base-header-paddingLeft: var(--sizes-size-8); - --transfer-base-header-marginBottom: var(--sizes-size-1); - --transfer-base-header-paddingRight: var(--sizes-size-8); --transfer-base-header-paddingBottom: var(--sizes-size-5); - --transfer-base-option-marginTop: var(--sizes-size-1); - --transfer-base-option-marginLeft: var(--sizes-size-1); + --transfer-base-header-paddingLeft: var(--sizes-size-8); + --transfer-base-header-paddingRight: var(--sizes-size-8); + --transfer-base-body-paddingTop: var(--sizes-size-0); + --transfer-base-body-paddingBottom: var(--sizes-size-0); + --transfer-base-body-paddingLeft: var(--sizes-size-0); + --transfer-base-body-paddingRight: var(--sizes-size-0); --transfer-base-option-paddingTop: var(--sizes-size-5); - --transfer-base-option-marginRight: var(--sizes-size-1); - --transfer-base-option-paddingLeft: var(--sizes-size-8); - --transfer-base-option-marginBottom: var(--sizes-size-1); - --transfer-base-option-paddingRight: var(--sizes-size-8); --transfer-base-option-paddingBottom: var(--sizes-size-5); - --transfer-tree-top-left-border-radius: var(--borders-radius-2); - --transfer-tree-top-right-border-radius: var(--borders-radius-2); - --transfer-tree-bottom-left-border-radius: var(--borders-radius-2); - --transfer-tree-bottom-right-border-radius: var(--borders-radius-2); - --transfer-tree-bg-hover-color: var(--colors-neutral-fill-10); - --transfer-tree-bg-active-color: var(--colors-brand-10); - --transfer-tree-marginTop: var(--sizes-size-1); - --transfer-tree-marginLeft: var(--sizes-size-1); - --transfer-tree-paddingTop: var(--sizes-size-3); - --transfer-tree-marginRight: var(--sizes-size-1); - --transfer-tree-paddingLeft: var(--sizes-size-7); - --transfer-tree-marginBottom: var(--sizes-size-2); - --transfer-tree-paddingRight: var(--sizes-size-7); - --transfer-tree-paddingBottom: var(--sizes-size-3); - --transfer-tree-option-marginTop: var(--sizes-size-1); - --transfer-tree-option-marginLeft: var(--sizes-size-1); - --transfer-tree-option-paddingTop: var(--sizes-size-1); - --transfer-tree-option-marginRight: var(--sizes-size-1); - --transfer-tree-option-paddingLeft: var(--sizes-size-6); - --transfer-tree-option-marginBottom: var(--sizes-size-4); - --transfer-tree-option-paddingRight: var(--sizes-size-1); - --transfer-tree-option-paddingBottom: var(--sizes-size-1); - --transfer-group-fontSize: var(--fonts-size-7); - --transfer-group-font-color: var(--colors-neutral-text-5); - --transfer-group-fontWeight: var(--fonts-weight-6); - --transfer-group-lineHeight: var(--fonts-lineHeight-2); - --transfer-table-last-paddingRight: var(--sizes-base-9); - --transfer-table-header-marginTop: var(--sizes-size-1); - --transfer-table-header-marginLeft: var(--sizes-size-1); - --transfer-table-header-paddingTop: var(--sizes-size-5); - --transfer-table-header-marginRight: var(--sizes-size-1); - --transfer-table-header-paddingLeft: var(--sizes-size-7); - --transfer-table-header-marginBottom: var(--sizes-size-1); - --transfer-table-header-paddingRight: var(--sizes-size-7); - --transfer-table-header-paddingBottom: var(--sizes-size-5); - --transfer-table-option-marginTop: var(--sizes-size-1); - --transfer-table-option-marginLeft: var(--sizes-size-1); - --transfer-table-option-paddingTop: var(--sizes-size-4); - --transfer-table-option-marginRight: var(--sizes-size-1); - --transfer-table-option-paddingLeft: var(--sizes-size-7); - --transfer-table-option-marginBottom: var(--sizes-size-2); - --transfer-table-option-paddingRight: var(--sizes-size-7); - --transfer-table-option-paddingBottom: var(--sizes-size-5); - --transfer-search-top-border-color: var(--colors-neutral-line-8); - --transfer-search-top-border-style: var(--borders-style-2); - --transfer-search-top-border-width: var(--borders-width-2); - --transfer-search-left-border-color: var(--colors-neutral-line-8); - --transfer-search-left-border-style: var(--borders-style-2); - --transfer-search-left-border-width: var(--borders-width-2); - --transfer-search-right-border-color: var(--colors-neutral-line-8); - --transfer-search-right-border-style: var(--borders-style-2); - --transfer-search-right-border-width: var(--borders-width-2); - --transfer-search-bottom-border-color: var(--colors-neutral-line-8); - --transfer-search-bottom-border-style: var(--borders-style-2); - --transfer-search-bottom-border-width: var(--borders-width-2); - --transfer-search-top-left-border-radius: var(--borders-radius-3); - --transfer-search-top-right-border-radius: var(--borders-radius-3); - --transfer-search-bottom-left-border-radius: var(--borders-radius-3); - --transfer-search-bottom-right-border-radius: var(--borders-radius-3); - --transfer-search-shadow: var(--shadows-shadow-none); + --transfer-base-option-paddingLeft: var(--sizes-size-8); + --transfer-base-option-paddingRight: var(--sizes-size-8); + --transfer-base-option-marginTop: var(--sizes-size-0); + --transfer-base-option-marginBottom: var(--sizes-size-0); + --transfer-base-option-marginLeft: var(--sizes-size-0); + --transfer-base-option-marginRight: var(--sizes-size-0); + --transfer-base-shadow: var(--shadows-shadow-none); + --transfer-search-color: var(--colors-neutral-text-2); --transfer-search-fontSize: var(--fonts-size-7); - --transfer-search-font-color: var(--colors-neutral-text-2); --transfer-search-fontWeight: var(--fonts-weight-6); --transfer-search-lineHeight: var(--fonts-lineHeight-2); - --transfer-search-border-hover-color: var(--colors-brand-4); - --transfer-search-marginTop: var(--sizes-size-1); - --transfer-search-marginLeft: var(--sizes-size-1); - --transfer-search-paddingTop: var(--sizes-size-6); - --transfer-search-marginRight: var(--sizes-size-1); - --transfer-search-paddingLeft: var(--sizes-size-6); - --transfer-search-marginBottom: var(--sizes-size-1); - --transfer-search-paddingRight: var(--sizes-size-6); - --transfer-search-paddingBottom: var(--sizes-size-6); - --transfer-search-border-active-color: var(--colors-brand-4); --transfer-search-placeholder-font-color: var(--colors-neutral-text-6); - --transfer-search-input-marginTop: var(--sizes-size-1); - --transfer-search-input-marginLeft: var(--sizes-size-1); + --transfer-search-top-border-color: var(--colors-neutral-line-8); + --transfer-search-top-border-width: var(--borders-width-2); + --transfer-search-top-border-style: var(--borders-style-2); + --transfer-search-right-border-color: var(--colors-neutral-line-8); + --transfer-search-right-border-width: var(--borders-width-2); + --transfer-search-right-border-style: var(--borders-style-2); + --transfer-search-bottom-border-color: var(--colors-neutral-line-8); + --transfer-search-bottom-border-width: var(--borders-width-2); + --transfer-search-bottom-border-style: var(--borders-style-2); + --transfer-search-left-border-color: var(--colors-neutral-line-8); + --transfer-search-left-border-width: var(--borders-width-2); + --transfer-search-left-border-style: var(--borders-style-2); + --transfer-search-top-right-border-radius: var(--borders-radius-3); + --transfer-search-top-left-border-radius: var(--borders-radius-3); + --transfer-search-bottom-right-border-radius: var(--borders-radius-3); + --transfer-search-bottom-left-border-radius: var(--borders-radius-3); + --transfer-search-border-hover-color: var(--colors-brand-4); + --transfer-search-border-active-color: var(--colors-brand-4); + --transfer-search-paddingTop: var(--sizes-size-6); + --transfer-search-paddingBottom: var(--sizes-size-6); + --transfer-search-paddingLeft: var(--sizes-size-6); + --transfer-search-paddingRight: var(--sizes-size-6); --transfer-search-input-paddingTop: var(--sizes-size-4); - --transfer-search-input-marginRight: var(--sizes-size-1); - --transfer-search-input-paddingLeft: var(--sizes-size-7); - --transfer-search-input-marginBottom: var(--sizes-size-1); - --transfer-search-input-paddingRight: var(--sizes-size-7); --transfer-search-input-paddingBottom: var(--sizes-size-4); - --transfer-chained-marginTop: var(--sizes-size-1); - --transfer-chained-marginLeft: var(--sizes-size-1); + --transfer-search-input-paddingLeft: var(--sizes-size-7); + --transfer-search-input-paddingRight: var(--sizes-size-7); + --transfer-search-shadow: var(--shadows-shadow-none); + --transfer-group-color: var(--colors-neutral-text-5); + --transfer-group-fontSize: var(--fonts-size-7); + --transfer-group-fontWeight: var(--fonts-weight-6); + --transfer-group-lineHeight: var(--fonts-lineHeight-2); + --transfer-table-header-paddingTop: var(--sizes-size-5); + --transfer-table-header-paddingBottom: var(--sizes-size-5); + --transfer-table-header-paddingLeft: var(--sizes-size-7); + --transfer-table-header-paddingRight: var(--sizes-size-7); + --transfer-table-option-paddingTop: var(--sizes-size-4); + --transfer-table-option-paddingBottom: var(--sizes-size-5); + --transfer-table-option-paddingLeft: var(--sizes-size-7); + --transfer-table-option-paddingRight: var(--sizes-size-7); + --transfer-table-last-paddingRight: var(--sizes-base-9); + --transfer-tree-bg-hover-color: var(--colors-neutral-fill-10); + --transfer-tree-bg-active-color: var(--colors-brand-10); + --transfer-tree-top-right-border-radius: var(--borders-radius-2); + --transfer-tree-top-left-border-radius: var(--borders-radius-2); + --transfer-tree-bottom-right-border-radius: var(--borders-radius-2); + --transfer-tree-bottom-left-border-radius: var(--borders-radius-2); + --transfer-tree-paddingTop: var(--sizes-size-3); + --transfer-tree-paddingBottom: var(--sizes-size-3); + --transfer-tree-paddingLeft: var(--sizes-size-7); + --transfer-tree-paddingRight: var(--sizes-size-7); + --transfer-tree-marginTop: var(--sizes-size-0); + --transfer-tree-marginBottom: var(--sizes-size-2); + --transfer-tree-marginLeft: var(--sizes-size-0); + --transfer-tree-marginRight: var(--sizes-size-0); + --transfer-tree-option-paddingTop: var(--sizes-size-0); + --transfer-tree-option-paddingBottom: var(--sizes-size-0); + --transfer-tree-option-paddingLeft: var(--sizes-size-6); + --transfer-tree-option-paddingRight: var(--sizes-size-0); + --transfer-tree-option-marginTop: var(--sizes-size-0); + --transfer-tree-option-marginBottom: var(--sizes-size-4); + --transfer-tree-option-marginLeft: var(--sizes-size-0); + --transfer-tree-option-marginRight: var(--sizes-size-0); --transfer-chained-paddingTop: var(--sizes-size-5); - --transfer-chained-marginRight: var(--sizes-size-1); - --transfer-chained-paddingLeft: var(--sizes-size-6); - --transfer-chained-marginBottom: var(--sizes-size-1); - --transfer-chained-paddingRight: var(--sizes-size-6); --transfer-chained-paddingBottom: var(--sizes-size-5); + --transfer-chained-paddingLeft: var(--sizes-size-6); + --transfer-chained-paddingRight: var(--sizes-size-6); + --transfer-chained-marginTop: var(--sizes-size-0); + --transfer-chained-marginBottom: var(--sizes-size-0); + --transfer-chained-marginLeft: var(--sizes-size-0); + --transfer-chained-marginRight: var(--sizes-size-0); --input-default-default-top-border-color: var(--colors-neutral-line-8); --input-default-default-top-border-width: var(--borders-width-2); --input-default-default-top-border-style: var(--borders-style-2); @@ -3365,14 +3341,14 @@ --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-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); + 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); @@ -3385,41 +3361,41 @@ --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-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-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); + 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); + 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); + 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); + 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); --Toast-color: var(--colors-neutral-text-11); --Toast-paddingTop: var(--sizes-size-3); @@ -3547,4 +3523,57 @@ --Status-warning-color: var(--Status-queue-color); --Status-fail-color: var(--Status-fail-color); --Status-success-color: var(--Status-success-color); + + --inputTag-option-height: var(--sizes-base-15); + --inputTag-option-color: var(--colors-neutral-text-2); + --inputTag-option-fontSize: var(--fonts-size-7); + --inputTag-option-fontWeight: var(--fonts-weight-6); + --inputTag-option-lineHeight: var(--fonts-lineHeight-2); + --inputTag-option-paddingTop: var(--sizes-size-3); + --inputTag-option-paddingBottom: var(--sizes-size-6); + --inputTag-option-paddingLeft: var(--sizes-size-3); + --inputTag-option-paddingRight: var(--sizes-size-6); + --inputTag-option-bg-color: var(--colors-neutral-fill-11); + --inputTag-option-hover-color: var(--colors-brand-5); + --inputTag-option-hover-bg-color: var(--colors-brand-10); + + --fieldSet-legend-height: var(--sizes-size-9); + --fieldSet-legend-color: var(--colors-neutral-text-2); + --fieldSet-legend-fontSize: var(--fonts-size-7); + --fieldSet-legend-fontWeight: var(--fonts-weight-6); + --fieldSet-legend-paddingTop: var(--sizes-size-0); + --fieldSet-legend-paddingBottom: var(--sizes-size-0); + --fieldSet-legend-paddingLeft: var(--sizes-size-8); + --fieldSet-legend-paddingRight: var(--sizes-size-0); + --fieldSet-legend-marginTop: var(--sizes-size-7); + --fieldSet-legend-marginBottom: var(--sizes-size-7); + --fieldSet-legend-marginLeft: var(--sizes-size-0); + --fieldSet-legend-marginRight: var(--sizes-size-0); + --fieldSet-legend-border-color: var(--colors-brand-5); + --fieldSet-legend-border-width: var(--sizes-size-3); + --fieldSet-size-xs-paddingTop: var(--sizes-base-10); + --fieldSet-size-xs-paddingRight: var(--sizes-size-3); + --fieldSet-size-xs-paddingBottom: var(--sizes-size-3); + --fieldSet-size-xs-paddingLeft: var(--sizes-size-3); + --fieldSet-size-xs-fontSize: var(--fonts-size-8); + --fieldSet-size-sm-paddingTop: var(--sizes-base-12); + --fieldSet-size-sm-paddingRight: var(--sizes-size-6); + --fieldSet-size-sm-paddingBottom: var(--sizes-size-6); + --fieldSet-size-sm-paddingLeft: var(--sizes-size-6); + --fieldSet-size-sm-fontSize: var(--fonts-size-8); + --fieldSet-size-base-paddingTop: var(--sizes-base-15); + --fieldSet-size-base-paddingRight: var(--sizes-size-9); + --fieldSet-size-base-paddingBottom: var(--sizes-size-9); + --fieldSet-size-base-paddingLeft: var(--sizes-size-9); + --fieldSet-size-base-fontSize: var(--fonts-size-7); + --fieldSet-size-md-paddingTop: var(--sizes-base-15); + --fieldSet-size-md-paddingRight: var(--sizes-base-10); + --fieldSet-size-md-paddingBottom: var(--sizes-base-10); + --fieldSet-size-md-paddingLeft: var(--sizes-base-10); + --fieldSet-size-md-fontSize: var(--fonts-size-7); + --fieldSet-size-lg-paddingTop: var(--sizes-base-20); + --fieldSet-size-lg-paddingRight: var(--sizes-base-15); + --fieldSet-size-lg-paddingBottom: var(--sizes-base-15); + --fieldSet-size-lg-paddingLeft: var(--sizes-base-15); + --fieldSet-size-lg-fontSize: var(--fonts-size-6); } diff --git a/packages/amis-ui/scss/components/form/_fieldset.scss b/packages/amis-ui/scss/components/form/_fieldset.scss index 28ca71824..bd5f768df 100644 --- a/packages/amis-ui/scss/components/form/_fieldset.scss +++ b/packages/amis-ui/scss/components/form/_fieldset.scss @@ -33,14 +33,15 @@ fieldset.#{$ns}Collapse { border: none; > legend { - font-weight: var(--fontWeightNormal); - padding: var(--gap-xs) 0; - font-size: var(--fontSizeMd); - color: var(--text--loud-color); - border-left: var(--primary) px2rem(4px) solid; - line-height: 1.2; - margin: var(--gap-base) 0; - padding: 0 0 0 14px; + border-left: var(--fieldSet-legend-border-color) + var(--fieldSet-legend-border-width) solid; + height: var(--fieldSet-legend-height); + line-height: var(--fieldSet-legend-height); + margin: var(--fieldSet-legend-marginTop) var(--fieldSet-legend-marginRight) + var(--fieldSet-legend-marginBottom) var(--fieldSet-legend-marginLeft); + padding: var(--fieldSet-legend-paddingTop) + var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom) + var(--fieldSet-legend-paddingLeft); cursor: pointer; border-bottom: none !important; background: transparent; @@ -48,6 +49,13 @@ fieldset.#{$ns}Collapse { flex-direction: row-reverse; justify-content: flex-end; // width: 100%; + + .#{$ns}TplField { + font-weight: var(--fieldSet-legend-fontWeight); + font-size: var(--fieldSet-legend-fontSize); + color: var(--fieldSet-legend-color); + } + &:hover { background: transparent; } @@ -55,103 +63,129 @@ fieldset.#{$ns}Collapse { &--xs { @extend %fieldSetBase; - padding: 20px 5px 5px 5px; + padding: var(--fieldSet-size-xs-paddingTop) + var(--fieldSet-size-xs-paddingRight) var(--fieldSet-size-xs-paddingBottom) + var(--fieldSet-size-xs-paddingLeft); > legend { - left: 5px; - font-size: var(--fontSizeXs); + left: var(--fieldSet-size-xs-paddingLeft); padding: 0 3px; margin: 0 0 0 -3px; + .#{$ns}TplField { + font-size: var(--fieldSet-size-xs-fontSize); + } + &:hover { background-color: var(--white); } } &:after { - top: 6px; + top: calc(var(--fieldSet-size-xs-fontSize) / 2); } } &--sm { @extend %fieldSetBase; - padding: 25px 10px 10px 10px; + padding: var(--fieldSet-size-sm-paddingTop) + var(--fieldSet-size-sm-paddingRight) var(--fieldSet-size-sm-paddingBottom) + var(--fieldSet-size-sm-paddingLeft); > legend { - left: 10px; - font-size: var(--fontSizeSm); + left: var(--fieldSet-size-sm-paddingLeft); padding: 0 5px; margin: 0 0 0 -5px; + .#{$ns}TplField { + font-size: var(--fieldSet-size-sm-fontSize); + } + &:hover { background-color: var(--white); } } &:after { - top: 6px; + top: calc(var(--fieldSet-size-sm-fontSize) / 2); } } &--base { @extend %fieldSetBase; - padding: 30px var(--gap-md) var(--gap-md) var(--gap-md); + padding: var(--fieldSet-size-base-paddingTop) + var(--fieldSet-size-base-paddingRight) + var(--fieldSet-size-base-paddingBottom) + var(--fieldSet-size-base-paddingLeft); > legend { - left: var(--gap-md); - font-size: var(--fontSizeBase); + left: var(--fieldSet-size-base-paddingLeft); padding: 0 8px; margin: 0 0 0 -8px; + .#{$ns}TplField { + font-size: var(--fieldSet-size-base-fontSize); + } + &:hover { background-color: var(--white); } } &:after { - top: 7px; + top: calc(var(--fieldSet-size-base-fontSize) / 2); } } &--md { @extend %fieldSetBase; - padding: 30px 20px 20px 20px; + padding: var(--fieldSet-size-md-paddingTop) + var(--fieldSet-size-md-paddingRight) var(--fieldSet-size-md-paddingBottom) + var(--fieldSet-size-md-paddingLeft); > legend { - left: 20px; - font-size: var(--fontSizeMd); + left: var(--fieldSet-size-md-paddingLeft); padding: 0 10px; margin: 0 0 0 -10px; + .#{$ns}TplField { + font-size: var(--fieldSet-size-md-fontSize); + } + &:hover { background-color: var(--white); } } &:after { - top: 7px; + top: calc(var(--fieldSet-size-md-fontSize) / 2); } } &--lg { @extend %fieldSetBase; - padding: 40px 30px 30px 30px; + padding: var(--fieldSet-size-lg-paddingTop) + var(--fieldSet-size-lg-paddingRight) var(--fieldSet-size-lg-paddingBottom) + var(--fieldSet-size-lg-paddingLeft); > legend { - left: 30px; - font-size: var(--fontSizeLg); + left: var(--fieldSet-size-lg-paddingLeft); padding: 0 var(--gap-md); margin: 0 0 0 calc(var(--gap-md) * -1); + .#{$ns}TplField { + font-size: var(--fieldSet-size-lg-fontSize); + } + &:hover { background-color: var(--white); } } &:after { - top: 9px; + top: calc(var(--fieldSet-size-lg-fontSize) / 2); } } } diff --git a/packages/amis-ui/scss/components/form/_tag.scss b/packages/amis-ui/scss/components/form/_tag.scss index 1b83bbcb9..a0ee84c43 100644 --- a/packages/amis-ui/scss/components/form/_tag.scss +++ b/packages/amis-ui/scss/components/form/_tag.scss @@ -63,14 +63,41 @@ @include button-variant( var(--TagControl-sugBtn-bg), - var(--TagControl-sugBtn-border), var(--TagControl-sugBtn-color), + var(--TagControl-sugBtn-border), + var(--TagControl-sugBtn-border), + var(--TagControl-sugBtn-border), + var(--TagControl-sugBtn-border), + var(--TagControl-sugBtn-borderWidth), + var(--TagControl-sugBtn-borderWidth), + var(--TagControl-sugBtn-borderWidth), + var(--TagControl-sugBtn-borderWidth), + solid, + solid, + solid, + solid, + none, var(--TagControl-sugBtn-onHover-bg), - var(--TagControl-sugBtn-onHover-border), var(--TagControl-sugBtn-onHover-color), + var(--TagControl-sugBtn-onHover-border), + var(--TagControl-sugBtn-onHover-border), + var(--TagControl-sugBtn-onHover-border), + var(--TagControl-sugBtn-onHover-border), + var(--TagControl-sugBtn-borderWidth), + var(--TagControl-sugBtn-borderWidth), + var(--TagControl-sugBtn-borderWidth), + var(--TagControl-sugBtn-borderWidth), + solid, + solid, + solid, + solid, + none, var(--TagControl-sugBtn-onActive-bg), + var(--TagControl-sugBtn-onActive-color), var(--TagControl-sugBtn-onActive-border), - var(--TagControl-sugBtn-onActive-color) + var(--TagControl-sugBtn-onActive-border), + var(--TagControl-sugBtn-onActive-border), + var(--TagControl-sugBtn-onActive-border) ); &.is-disabled { @@ -91,4 +118,21 @@ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } + + .#{$ns}ListMenu-item { + height: var(--inputTag-option-height); + color: var(--inputTag-option-color); + font-size: var(--inputTag-option-fontSize); + line-height: var(--inputTag-option-lineHeight); + font-weight: var(--inputTag-option-fontWeight); + padding: var(--inputTag-option-paddingTop) + var(--inputTag-option-paddingRight) var(--inputTag-option-paddingBottom) + var(--inputTag-option-paddingLeft); + background: var(--inputTag-option-bg-color); + + &:hover { + color: var(--inputTag-option-hover-color); + background: var(--inputTag-option-hover-bg-color); + } + } } diff --git a/packages/amis-ui/scss/components/form/_transfer.scss b/packages/amis-ui/scss/components/form/_transfer.scss index 9cc78f296..76bed9c7e 100644 --- a/packages/amis-ui/scss/components/form/_transfer.scss +++ b/packages/amis-ui/scss/components/form/_transfer.scss @@ -18,7 +18,7 @@ display: flex; align-items: center; background: var(--transfer-base-title-bg); - color: var(--transfer-base-title-font-color); + color: var(--transfer-base-title-color); line-height: var(--transfer-base-title-lineHeight); font-size: var(--transfer-base-title-fontSize); font-weight: var(--transfer-base-title-fontWeight); @@ -27,10 +27,6 @@ var(--transfer-base-header-paddingRight) var(--transfer-base-header-paddingBottom) var(--transfer-base-header-paddingLeft); - margin: var(--transfer-base-header-marginTop) - var(--transfer-base-header-marginRight) - var(--transfer-base-header-marginBottom) - var(--transfer-base-header-marginLeft); flex-direction: row; width: 100%; @@ -80,10 +76,6 @@ var(--transfer-base-body-paddingRight) var(--transfer-base-body-paddingBottom) var(--transfer-base-body-paddingLeft); - margin: var(--transfer-base-body-marginTop) - var(--transfer-base-body-marginRight) - var(--transfer-base-body-marginBottom) - var(--transfer-base-body-marginLeft); width: 100%; } @@ -101,7 +93,7 @@ font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); - color: var(--transfer-base-content-font-color); + color: var(--transfer-base-content-color); } .#{$ns}ChainedSelection-item { @@ -115,7 +107,7 @@ font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); - color: var(--transfer-base-content-font-color); + color: var(--transfer-base-content-color); } .#{$ns}GroupedSelection-group > .#{$ns}GroupedSelection-itemLabel { @@ -123,7 +115,7 @@ font-weight: var(--transfer-group-font-weight); line-height: var(--transfer-group-font-lineHeight); font-family: var(--transfer-group-font-family); - color: var(--transfer-group-font-color); + color: var(--transfer-group-color); } &-select > .#{$ns}ChainedSelection { @@ -197,14 +189,12 @@ padding: var(--transfer-search-paddingTop) var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom) var(--transfer-search-paddingLeft); - margin: var(--transfer-search-marginTop) var(--transfer-search-marginRight) - var(--transfer-search-marginBottom) var(--transfer-search-marginLeft); width: 100%; .#{$ns}InputBox { font-size: var(--transfer-search-fontSize); font-weight: var(--transfer-search-fontWeight); line-height: var(--transfer-search-lineHeight); - color: var(--transfer-search-font-color); + color: var(--transfer-search-color); border-width: var(--transfer-search-top-border-width) var(--transfer-search-right-border-width) var(--transfer-search-bottom-border-width) @@ -226,10 +216,6 @@ var(--transfer-search-input-paddingRight) var(--transfer-search-input-paddingBottom) var(--transfer-search-input-paddingLeft); - margin: var(--transfer-search-input-marginTop) - var(--transfer-search-input-marginRight) - var(--transfer-search-input-marginBottom) - var(--transfer-search-input-marginLeft); &:hover { border-color: var(--transfer-search-border-hover-color); @@ -240,7 +226,7 @@ } input { - color: var(--transfer-search-font-color); + color: var(--transfer-search-color); font-size: var(--transfer-search-fontSize); font-weight: var(--transfer-search-fontWeight); line-height: var(--transfer-search-lineHeight); @@ -327,7 +313,7 @@ font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); - color: var(--transfer-base-content-font-color); + color: var(--transfer-base-content-color); } } @@ -338,7 +324,7 @@ var(--transfer-table-header-paddingBottom) var(--transfer-table-header-paddingLeft); background: var(--transfer-base-title-bg); - color: var(--transfer-base-title-font-color); + color: var(--transfer-base-title-color); line-height: var(--transfer-base-title-lineHeight); font-size: var(--transfer-base-content-fontSize); diff --git a/packages/amis/src/renderers/Form/FieldSet.tsx b/packages/amis/src/renderers/Form/FieldSet.tsx index 9079205f1..5ce455612 100644 --- a/packages/amis/src/renderers/Form/FieldSet.tsx +++ b/packages/amis/src/renderers/Form/FieldSet.tsx @@ -117,7 +117,7 @@ export default class FieldSetControl extends React.Component< let props: any = { store, - data: store!.data, + data: store?.data, render, disabled, formMode: subFormMode || formMode, From 0d9a512d55e5d30c69d2c981ede021858bb4431c Mon Sep 17 00:00:00 2001 From: qiaoganggang <43558337+qiaogg@users.noreply.github.com> Date: Thu, 23 Mar 2023 10:03:57 +0800 Subject: [PATCH 15/25] =?UTF-8?q?feat=EF=BC=9Atimeline=E6=8E=A5=E5=85=A5?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=20(#6441)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: m * feat: spinner删除propriety中css变量 * feat: 修改spinner变量 * feat: 删除多余代码 * fix: spinner css变量修改 * fix: spinner * feat: toast接入主题 * feat: 去掉多余代码 * feat:timeline接入主题 * feat: 删除多余代码 * feat: 修改title margin --------- Co-authored-by: qiaoganggang --- packages/amis-ui/scss/_components.scss | 68 +++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 49 ------------- .../amis-ui/scss/components/_timeline.scss | 29 +++++--- 3 files changed, 88 insertions(+), 58 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 7ef476801..651285087 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3523,6 +3523,74 @@ --Status-warning-color: var(--Status-queue-color); --Status-fail-color: var(--Status-fail-color); --Status-success-color: var(--Status-success-color); + // timeline + --Timeline-time-color: var(--colors-neutral-text-5); + --Timeline-time-fontSize: var(--fonts-size-7); + --Timeline-time-fontWeight: var(--fonts-weight-6); + --Timeline-title-color: var(--colors-neutral-text-2); + --Timeline-title-fontSize: var(--fonts-size-7); + --Timeline-title-fontWeight: var(--fonts-weight-6); + --Timeline-type-info-color: var(--colors-info-5); + --Timeline-type-success-color: var(--colors-success-5); + --Timeline-type-warning-color: var(--colors-warning-5); + --Timeline-type-danger-color: var(--colors-error-5); + --Timeline-detail-label-color: var(--colors-brand-5); + --Timeline-detail-label-fontSize: var(--fonts-size-7); + --Timeline-detail-label-fontWeight: var(--fonts-weight-6); + --Timeline-detail-content-color: var(--colors-neutral-text-2); + --Timeline-detail-content-fontSize: var(--fonts-size-7); + --Timeline-detail-content-fontWeight: var(--fonts-weight-6); + --Timeline-shadow: var(--shadows-shadow-normal); + --Timeline-detail-icon-size: var(--sizes-base-8); + --Timeline-detail-icon-color: var(--colors-brand-5); + --Timeline-left-size: var(--sizes-size-2); + --Timeline-horizontal-top-size: var(--sizes-size-0); + --Timeline-line-bg: #e6e6e8; + --Timeline-round-bg: #dadbdd; + + --TimelineItem--axle-flex: 0 0 #{px2rem(24px)}; + --TimelineItem--left-line-width: #{px2rem(2px)}; + --TimelineItem--left-line-left: #{px2rem(13px)}; + --TimelineItem--left-line-top: #{px2rem(20px)}; + --TimelineItem--horizontal-left-line-top: #{px2rem(18px)}; + --TimelineItem--icon-left-line-left: #{px2rem(12px)}; + --TimelineItem--round-width: #{px2rem(8px)}; + --TimelineItem--round-height: #{px2rem(8px)}; + --TimelineItem--round-left: #{px2rem(10px)}; + --TimelineItem--round-top: #{px2rem(8px)}; + --TimelineItem--icon-width: #{px2rem(16px)}; + --TimelineItem--icon-height: #{px2rem(16px)}; + --TimelineItem--icon-left: #{px2rem(6px)}; + --TimelineItem--content-padding-bottom: var(--gap-md); + --TimelineItem--content-margin-left: var(--Timeline-left-size); + --TimelineItem--content-time-margin-bottom: var(--gap-xs); + --TimelineItem--content-title-margin-bottom: var(--gap-xs); + --TimelineItem--detail-button-margin-bottom: var(--gap-base); + --TimelineItem-detail-arrow-width: var(--Timeline-detail-icon-size); + --TimelineItem-detail-visible-padding: #{px2rem(10px)}; + --TimelineItem-detail-visible-max-width: #{px2rem(300px)}; + --Timeline-alternate-margin-left: var(--gap-xl); + --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); + --TimelineItem-detail-visible-shadow: var(--Timeline-shadow); + --TimelineItem--font-size: var(--fontSizeSm); + --TimelineItem--text-primary-color: var(--Timeline-title-color); + --TimelineItem--text-secondary-color: var(--Timeline-time-color); + --TimelineItem--detail-button-color: var(--Timeline-detail-label-color); + --TimelineItem--line-bg: var(--Timeline-line-bg); + --TimelineItem--content-bg: #f2f2f4; + --TimelineItem-custem-button-margin-left: var(--fontSizeSm); + --TimelineItem-custem-time-padding-right: var(--fontSizeSm); + --TimelineItem-round-bg: var(--Timeline-round-bg); + --Timeline--success-bg: var(--Timeline-type-success-color); + --Timeline--info-bg: var(--Timeline-type-info-color); + --Timeline--warning-bg: var(--Timeline-type-warning-color); + --Timeline--danger-bg: var(--Timeline-type-danger-color); --inputTag-option-height: var(--sizes-base-15); --inputTag-option-color: var(--colors-neutral-text-2); diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 75f2e0eea..4440a940f 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -922,55 +922,6 @@ $remFactor: 16px; --InputFormula-icon-color-onActive: var(--colors-brand-5); --InputFormula-code-bgColor: var(--colors-neutral-fill-10); - // timeline - --TimelineItem--axle-flex: 0 0 #{px2rem(24px)}; - --TimelineItem--left-line-width: #{px2rem(2px)}; - --TimelineItem--left-line-left: #{px2rem(13px)}; - --TimelineItem--left-line-top: #{px2rem(20px)}; - --TimelineItem--horizontal-left-line-top: #{px2rem(18px)}; - --TimelineItem--icon-left-line-left: #{px2rem(12px)}; - --TimelineItem--round-width: #{px2rem(8px)}; - --TimelineItem--round-height: #{px2rem(8px)}; - --TimelineItem--round-left: #{px2rem(10px)}; - --TimelineItem--round-top: #{px2rem(8px)}; - --TimelineItem--icon-width: #{px2rem(16px)}; - --TimelineItem--icon-height: #{px2rem(16px)}; - --TimelineItem--icon-left: #{px2rem(6px)}; - --TimelineItem--content-padding-bottom: var(--gap-md); - --TimelineItem--content-margin-left: #{px2rem(2px)}; - --TimelineItem--content-time-margin-bottom: var(--gap-xs); - --TimelineItem--content-title-margin-bottom: var(--gap-xs); - --TimelineItem--detail-button-margin-bottom: var(--gap-base); - --TimelineItem-detail-arrow-width: #{px2rem(16px)}; - --TimelineItem-detail-visible-padding: #{px2rem(10px)}; - --TimelineItem-detail-visible-max-width: #{px2rem(300px)}; - --Timeline-alternate-margin-left: var(--gap-xl); - --Timeline-visible-border-radius: var(--gap-xs); - --Timeline-horizontal-content-margin-top: #{px2rem(-3px)}; - - --TimelineItem--icon-radius: 50%; - --TimelineItem--round-radius: 50%; - --TimelineItem--content-radius: px2rem(2px); - - --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 - rgba(0 0 0 / 10%); - - --TimelineItem--font-size: var(--fontSizeSm); - - --TimelineItem--text-primary-color: #151a26; - --TimelineItem--text-secondary-color: #83868c; - --TimelineItem--detail-button-color: var(--colors-brand-5); - --TimelineItem--line-bg: #e6e6e8; - --TimelineItem--content-bg: #f2f2f4; - --TimelineItem-custem-button-margin-left: var(--fontSizeSm); - --TimelineItem-custem-time-padding-right: var(--fontSizeSm); - --TimelineItem-round-bg: #dadbdd; - - --Timeline--success-bg: var(--success); - --Timeline--info-bg: var(--info); - --Timeline--warning-bg: var(--warning); - --Timeline--danger-bg: var(--danger); - --UserSelect--post-bg: var(--colors-brand-6); --UserSelect--department-bg: #ffab52; --UserSelect--role-bg: #0bc286; diff --git a/packages/amis-ui/scss/components/_timeline.scss b/packages/amis-ui/scss/components/_timeline.scss index db21da0fb..9b9f4b1da 100644 --- a/packages/amis-ui/scss/components/_timeline.scss +++ b/packages/amis-ui/scss/components/_timeline.scss @@ -70,14 +70,16 @@ .#{$ns}TimelineItem-time { color: var(--TimelineItem--text-secondary-color); - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-time-fontSize); + font-weight: var(--Timeline-time-fontWeight); margin-bottom: var(--TimelineItem--content-time-margin-bottom); } .#{$ns}TimelineItem-title { display: flex; color: var(--TimelineItem--text-primary-color); - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-title-fontSize); + font-weight: var(--Timeline-title-fontWeight); margin-bottom: var(--TimelineItem--content-title-margin-bottom); .#{$ns}PlainField { padding-right: var(--TimelineItem-custem-time-padding-right); @@ -92,12 +94,13 @@ display: flex; cursor: pointer; align-items: center; - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-detail-label-fontSize); color: var(--TimelineItem--detail-button-color); + font-weight: var(--Timeline-detail-label-fontWeight); margin-bottom: var(--TimelineItem--detail-button-margin-bottom); } - .#{$ns}TimelineItem-detail-arrow { + color: var(--Timeline-detail-icon-color); width: var(--TimelineItem-detail-arrow-width); height: var(--TimelineItem-detail-arrow-width); } @@ -110,7 +113,9 @@ display: block; border-radius: var(--Timeline-visible-border-radius); max-width: var(--TimelineItem-detail-visible-max-width); - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-detail-content-fontSize); + font-weight: var(--Timeline-detail-content-fontWeight); + color: var(--Timeline-detail-content-color); padding: var(--TimelineItem-detail-visible-padding); box-shadow: var(--TimelineItem-detail-visible-shadow); } @@ -212,13 +217,15 @@ .#{$ns}TimelineItem-time { color: var(--TimelineItem--text-secondary-color); - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-time-fontSize); + font-weight: var(--Timeline-time-fontWeight); margin-bottom: var(--TimelineItem--content-time-margin-bottom); } .#{$ns}TimelineItem-title { color: var(--TimelineItem--text-primary-color); - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-title-fontSize); + font-weight: var(--Timeline-title-fontWeight); margin-bottom: var(--TimelineItem--content-title-margin-bottom); } @@ -227,12 +234,14 @@ display: flex; cursor: pointer; align-items: center; - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-detail-label-fontSize); color: var(--TimelineItem--detail-button-color); + font-weight: var(--Timeline-detail-label-fontWeight); margin-bottom: var(--TimelineItem--detail-button-margin-bottom); } .#{$ns}TimelineItem-detail-arrow { + color: var(--Timeline-detail-icon-color); width: var(--TimelineItem-detail-arrow-width); height: var(--TimelineItem-detail-arrow-width); } @@ -245,7 +254,9 @@ display: block; border-radius: var(--Timeline-visible-border-radius); max-width: var(--TimelineItem-detail-visible-max-width); - font-size: var(--Timeline--font-size); + font-size: var(--Timeline-detail-content-fontSize); + font-weight: var(--Timeline-detail-content-fontWeight); + color: var(--Timeline-detail-content-color); padding: var(--TimelineItem-detail-visible-padding); box-shadow: var(--TimelineItem-detail-visible-shadow); } From 33526bdd3d049b741a1f291861ed9d85f4e72373 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Thu, 23 Mar 2023 10:36:57 +0800 Subject: [PATCH 16/25] =?UTF-8?q?style:=20progress=20&=20image=20&=20image?= =?UTF-8?q?s=E7=BB=84=E4=BB=B6=E4=B8=BB=E9=A2=98=E5=8F=98=E9=87=8F?= =?UTF-8?q?=E6=9B=BF=E6=8D=A2=20(#6446)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: xujiahao01 --- packages/amis-ui/scss/_components.scss | 37 +++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 5 --- .../scss/components/_image-gallery.scss | 15 +++++--- packages/amis-ui/scss/components/_images.scss | 16 +++++--- .../amis-ui/scss/components/_progress.scss | 8 +++- 5 files changed, 63 insertions(+), 18 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 651285087..c2dbdddf8 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -1731,6 +1731,20 @@ --InputRange-clearIcon-color: var(--colors-neutral-text-4); --InputRange-clearIcon-hoverColor: var(--colors-brand-5); + // 进度条 + --Progress-line-bg: var(--colors-neutral-fill-8); + --Progress-line-theme-color: var(--colors-brand-5); + --Progress-line-color: var(--colors-neutral-text-2); + --Progress-line-fontSize: var(--fonts-size-8); + --Progress-circle-bg: var(--colors-neutral-fill-8); + --Progress-circle-theme-color: red; + --Progress-circle-color: var(--colors-neutral-text-2); + --Progress-circle-fontSize: var(--fonts-size-8); + + --Progress-borderRadius: var(--borderRadius); + --Progress-animate-backgroundColor: #fff; + --Progress-bar-backgroundColor: var(--colors-neutral-fill-8); + // 对话框 --dialog-default-border-width: var(--sizes-size-0); --dialog-default-border-radius: var(--sizes-size-4); @@ -3256,6 +3270,29 @@ --Spinner-width: var(--spinner-size-size); --Spinner-color: var(--spinner-base-color); + // Image + --image-image-normal-paddingTop: var(--sizes-size-3); + --image-image-normal-paddingBottom: var(--sizes-size-3); + --image-image-normal-paddingLeft: var(--sizes-size-3); + --image-image-normal-paddingRight: var(--sizes-size-3); + --image-image-normal-color: var(--colors-neutral-text-2); + --image-image-normal-fontSize: var(--fonts-size-7); + --image-image-description-color: var(--colors-neutral-text-2); + --image-image-description-fontSize: var(--fonts-size-8); + + --image-images-item-marginTop: var(--sizes-size-3); + --image-images-item-marginBottom: var(--sizes-size-3); + --image-images-item-marginLeft: var(--sizes-size-3); + --image-images-item-marginRight: var(--sizes-size-3); + --image-images-item-size: 3rem; + --image-images-item-color: var(--colors-neutral-text-5); + --image-images-preview-radius: var(--sizes-size-3); + --image-images-preview-bgColor: var(--colors-neutral-text-11); + --image-images-preview-paddingTop: var(--sizes-size-3); + --image-images-preview-paddingBottom: var(--sizes-size-3); + --image-images-preview-paddingLeft: var(--sizes-size-9); + --image-images-preview-paddingRight: var(--sizes-size-9); + --Tag-base-fontSize: var(--fonts-size-8); --Tag-base-fontWeight: var(--fonts-weight-6); --Tag-base-height: var(--sizes-base-12); diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index 4440a940f..b7a9b3876 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -694,7 +694,6 @@ $remFactor: 16px; --Remark-onHover-iconColor: var(--colors-neutral-text-11); --Remark-width: var(--sizes-size-9); - --Sparkline-line-color: var(--info); --Sparkline-area-color: #{rgba($info, 0.1)}; @@ -901,10 +900,6 @@ $remFactor: 16px; --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0; --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)}; - --Progress-borderRadius: var(--borderRadius); - --Progress-animate-backgroundColor: #fff; - --Progress-bar-backgroundColor: #d3d9e6; - --ColumnToggler-backgroundColor: var(--colors-neutral-fill-11); --ColumnToggler-borderRadius: #{px2rem(4px)}; --ColumnToggler-lineHeight: #{px2rem(24px)}; diff --git a/packages/amis-ui/scss/components/_image-gallery.scss b/packages/amis-ui/scss/components/_image-gallery.scss index 9e01601d5..85f3951d9 100644 --- a/packages/amis-ui/scss/components/_image-gallery.scss +++ b/packages/amis-ui/scss/components/_image-gallery.scss @@ -66,15 +66,15 @@ &-prevBtn, &-nextBtn { > svg { - width: px2rem(48px); - height: px2rem(48px); + width: var(--image-images-item-size); + height: var(--image-images-item-size); } position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; - color: #999; + color: var(--image-images-item-color); text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px; &:hover { @@ -206,11 +206,14 @@ } .#{$ns}ImageGallery-toolbar { - background-color: var(--white); - border-radius: px2rem(4px); + background-color: var(--image-images-preview-bgColor); + border-radius: var(--image-images-preview-radius); display: flex; align-items: flex-start; - padding: px2rem(4px) px2rem(16px); + padding: var(--image-images-preview-paddingTop) + var(--image-images-preview-paddingRight) + var(--image-images-preview-paddingBottom) + var(--image-images-preview-paddingLeft); position: absolute; bottom: px2rem(20px); left: 50%; diff --git a/packages/amis-ui/scss/components/_images.scss b/packages/amis-ui/scss/components/_images.scss index b1b271a62..46f20208a 100644 --- a/packages/amis-ui/scss/components/_images.scss +++ b/packages/amis-ui/scss/components/_images.scss @@ -7,7 +7,9 @@ &-item { display: flex; - margin: var(--gap-xs); + margin: var(--image-images-item-marginTop) + var(--image-images-item-marginRight) var(--image-images-item-marginBottom) + var(--image-images-item-marginLeft); } } @@ -16,7 +18,10 @@ &--thumb { display: inline-block; - padding: var(--gap-xs); + padding: var(--image-image-normal-paddingTop) + var(--image-image-normal-paddingRight) + var(--image-image-normal-paddingBottom) + var(--image-image-normal-paddingLeft); } &-thumbWrap { @@ -132,12 +137,13 @@ } &-caption { - font-size: var(--fontSizeSm); + font-size: var(--image-image-description-fontSize); + color: var(--image-image-description-color); } &-title { - font-size: var(--fontSizeBase); - color: var(--text--loud-color); + font-size: var(--image-image-normal-fontSize); + color: var(--image-image-normal-color); } &-overlay { diff --git a/packages/amis-ui/scss/components/_progress.scss b/packages/amis-ui/scss/components/_progress.scss index b74b4efcf..c4b43fa86 100644 --- a/packages/amis-ui/scss/components/_progress.scss +++ b/packages/amis-ui/scss/components/_progress.scss @@ -22,7 +22,7 @@ &-inter { height: 100%; - background-color: var(--Progress-bar-backgroundColor); + background-color: var(--Progress-line-bg); overflow: hidden; border-radius: var(--Progress-borderRadius); } @@ -34,6 +34,8 @@ white-space: nowrap; text-align: left; word-break: normal; + color: var(--Progress-line-color); + font-size: var(--Progress-line-fontSize); .icon { font-size: 15px; } @@ -43,7 +45,7 @@ float: left; width: 0; height: 8px; - background: var(--primary); + background: var(--Progress-line-theme-color); transition: width var(--animation-duration) ease; border-radius: var(--Progress-borderRadius); @@ -97,6 +99,8 @@ white-space: normal; text-align: center; transform: translate(-50%, -50%); + color: var(--Progress-circle-color); + font-size: var(--Progress-circle-fontSize); .icon { font-size: 1.2em; } From 8dcbfb5fc9dc062274fe2cc53a75660b8b03e8fd Mon Sep 17 00:00:00 2001 From: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com> Date: Mon, 27 Mar 2023 16:58:23 +0800 Subject: [PATCH 17/25] =?UTF-8?q?styles:=20=E5=AF=BC=E5=87=BAstyle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx index 49ba29cbb..7c43dabb2 100644 --- a/packages/amis-core/src/index.tsx +++ b/packages/amis-core/src/index.tsx @@ -97,6 +97,7 @@ import PopOver from './components/PopOver'; import {FormRenderer} from './renderers/Form'; import type {FormHorizontal} from './renderers/Form'; import {enableDebug, promisify, replaceText, wrapFetcher} from './utils/index'; +import {valueMap as styleMap} from './utils/style-helper'; // @ts-ignore export const version = '__buildVersion'; @@ -174,7 +175,8 @@ export { FormBaseControl, extendDefaultEnv, addRootWrapper, - RendererConfig + RendererConfig, + styleMap }; export function render( From b6e5fd556f452c88718d982767a76461210f2819 Mon Sep 17 00:00:00 2001 From: HongYang <33488114+hy993658052@users.noreply.github.com> Date: Mon, 27 Mar 2023 17:06:50 +0800 Subject: [PATCH 18/25] =?UTF-8?q?feat:=20=E5=AF=8C=E6=96=87=E6=9C=AC&?= =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E7=BB=84=E5=90=88=E7=BB=84=E4=BB=B6=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=80=82=E9=85=8D=20(#6475)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hongyang03 --- packages/amis-ui/scss/_components.scss | 83 +++++++++++++ .../scss/components/_condition-builder.scss | 60 +++++---- .../scss/components/form/_rich-text.scss | 116 ++++++++++++------ 3 files changed, 202 insertions(+), 57 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index c2dbdddf8..2d749b97b 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3681,4 +3681,87 @@ --fieldSet-size-lg-paddingBottom: var(--sizes-base-15); --fieldSet-size-lg-paddingLeft: var(--sizes-base-15); --fieldSet-size-lg-fontSize: var(--fonts-size-6); + + --inputRichText-default-top-border-color: var(--colors-neutral-line-8); + --inputRichText-default-top-border-width: var(--borders-width-2); + --inputRichText-default-top-border-style: var(--borders-style-2); + --inputRichText-default-right-border-color: var(--colors-neutral-line-8); + --inputRichText-default-right-border-width: var(--borders-width-2); + --inputRichText-default-right-border-style: var(--borders-style-2); + --inputRichText-default-bottom-border-color: var(--colors-neutral-line-8); + --inputRichText-default-bottom-border-width: var(--borders-width-2); + --inputRichText-default-bottom-border-style: var(--borders-style-2); + --inputRichText-default-left-border-color: var(--colors-neutral-line-8); + --inputRichText-default-left-border-width: var(--borders-width-2); + --inputRichText-default-left-border-style: var(--borders-style-2); + --inputRichText-default-top-left-border-radius: var(--borders-radius-1); + --inputRichText-default-top-right-border-radius: var(--borders-radius-1); + --inputRichText-default-bottom-right-border-radius: var(--borders-radius-1); + --inputRichText-default-bottom-left-border-radius: var(--borders-radius-1); + --inputRichText-hover-top-border-color: var(--colors-neutral-line-8); + --inputRichText-hover-top-border-width: var(--borders-width-2); + --inputRichText-hover-top-border-style: var(--borders-style-2); + --inputRichText-hover-right-border-color: var(--colors-neutral-line-8); + --inputRichText-hover-right-border-width: var(--borders-width-2); + --inputRichText-hover-right-border-style: var(--borders-style-2); + --inputRichText-hover-bottom-border-color: var(--colors-neutral-line-8); + --inputRichText-hover-bottom-border-width: var(--borders-width-2); + --inputRichText-hover-bottom-border-style: var(--borders-style-2); + --inputRichText-hover-left-border-color: var(--colors-neutral-line-8); + --inputRichText-hover-left-border-width: var(--borders-width-2); + --inputRichText-hover-left-border-style: var(--borders-style-2); + --inputRichText-hover-top-left-border-radius: var(--borders-radius-1); + --inputRichText-hover-top-right-border-radius: var(--borders-radius-1); + --inputRichText-hover-bottom-right-border-radius: var(--borders-radius-1); + --inputRichText-hover-bottom-left-border-radius: var(--borders-radius-1); + --inputRichText-active-top-border-color: var(--colors-brand-5); + --inputRichText-active-top-border-width: var(--borders-width-2); + --inputRichText-active-top-border-style: var(--borders-style-2); + --inputRichText-active-right-border-color: var(--colors-brand-5); + --inputRichText-active-right-border-width: var(--borders-width-2); + --inputRichText-active-right-border-style: var(--borders-style-2); + --inputRichText-active-bottom-border-color: var(--colors-brand-5); + --inputRichText-active-bottom-border-width: var(--borders-width-2); + --inputRichText-active-bottom-border-style: var(--borders-style-2); + --inputRichText-active-left-border-color: var(--colors-brand-5); + --inputRichText-active-left-border-width: var(--borders-width-2); + --inputRichText-active-left-border-style: var(--borders-style-2); + --inputRichText-active-top-left-border-radius: var(--borders-radius-1); + --inputRichText-active-top-right-border-radius: var(--borders-radius-1); + --inputRichText-active-bottom-right-border-radius: var(--borders-radius-1); + --inputRichText-active-bottom-left-border-radius: var(--borders-radius-1); + --inputRichText-disabled-top-border-color: var(--colors-neutral-line-8); + --inputRichText-disabled-top-border-width: var(--borders-width-2); + --inputRichText-disabled-top-border-style: var(--borders-style-2); + --inputRichText-disabled-right-border-color: var(--colors-neutral-line-8); + --inputRichText-disabled-right-border-width: var(--borders-width-2); + --inputRichText-disabled-right-border-style: var(--borders-style-2); + --inputRichText-disabled-bottom-border-color: var(--colors-neutral-line-8); + --inputRichText-disabled-bottom-border-width: var(--borders-width-2); + --inputRichText-disabled-bottom-border-style: var(--borders-style-2); + --inputRichText-disabled-left-border-color: var(--colors-neutral-line-8); + --inputRichText-disabled-left-border-width: var(--borders-width-2); + --inputRichText-disabled-left-border-style: var(--borders-style-2); + --inputRichText-disabled-top-left-border-radius: var(--borders-radius-1); + --inputRichText-disabled-top-right-border-radius: var(--borders-radius-1); + --inputRichText-disabled-bottom-right-border-radius: var(--borders-radius-1); + --inputRichText-disabled-bottom-left-border-radius: var(--borders-radius-1); + + --conditionBuilder-toolbar-width: var(--sizes-base-14); + --conditionBuilder-toolbar-height: var(--sizes-base-14); + --conditionBuilder-toolbar-color: var(--colors-brand-3); + --conditionBuilder-toolbar-fontSize: var(--fonts-size-8); + --conditionBuilder-toolbar-fontWeight: var(--fonts-weight-5); + --conditionBuilder-toolbar-bg-color: var(--colors-brand-9); + --conditionBuilder-toolbar-hover-color: var(--colors-neutral-text-11); + --conditionBuilder-toolbar-hover-fontSize: var(--fonts-size-8); + --conditionBuilder-toolbar-hover-fontWeight: var(--fonts-weight-5); + --conditionBuilder-toolbar-hover-bg-color: var(--colors-brand-5); + --conditionBuilder-line-width: var(--sizes-size-2); + --conditionBuilder-line-bg-color: var(--colors-brand-9); + --conditionBuilder-body-bg-color: var(--colors-neutral-line-10); + --conditionBuilder-body-paddingTop: var(--sizes-size-7); + --conditionBuilder-body-paddingRight: var(--sizes-size-7); + --conditionBuilder-body-paddingBottom: var(--sizes-size-7); + --conditionBuilder-body-paddingLeft: var(--sizes-base-14); } diff --git a/packages/amis-ui/scss/components/_condition-builder.scss b/packages/amis-ui/scss/components/_condition-builder.scss index 5380d6574..c777f56a5 100644 --- a/packages/amis-ui/scss/components/_condition-builder.scss +++ b/packages/amis-ui/scss/components/_condition-builder.scss @@ -28,9 +28,9 @@ width: px2rem(20px); height: px2rem(20px); border-radius: 50%; - background: #d4e5ff; + background: var(--conditionBuilder-toolbar-bg-color); text-align: center; - color: #0832a6; + color: var(--conditionBuilder-toolbar-color); cursor: pointer; transition: transform 0.3s ease; @@ -39,26 +39,39 @@ } &:hover { - background: #2468f2; - color: $white; + background: var(--conditionBuilder-toolbar-hover-bg-color); + color: var(--conditionBuilder-toolbar-hover-color); } } .#{$ns}Select { - font-size: px2rem(12px); - height: px2rem(28px); - width: px2rem(28px); - background: #d4e5ff; + font-size: var(--conditionBuilder-toolbar-fontSize); + height: var(--conditionBuilder-toolbar-height); + width: var(--conditionBuilder-toolbar-width); + background: var(--conditionBuilder-toolbar-bg-color); border: none; - color: #0832a6; - font-weight: 500; + color: var(--conditionBuilder-toolbar-color); + font-weight: var(--conditionBuilder-toolbar-fontWeight); padding: 0; - padding-left: px2rem(8px); - min-height: px2rem(28px); + text-align: center; + min-height: var(--conditionBuilder-toolbar-height); + + &.is-focused { + color: var(--conditionBuilder-toolbar-color) !important; + font-size: var(--conditionBuilder-toolbar-fontSize); + font-weight: var(--conditionBuilder-toolbar-fontWeight); + background: var(--conditionBuilder-toolbar-bg-color) !important; + border: none !important; + box-shadow: none !important; + } &:hover { - color: $white; - background: #2468f2; + color: var(--conditionBuilder-toolbar-hover-color) !important; + font-size: var(--conditionBuilder-toolbar-hover-fontSize); + font-weight: var(--conditionBuilder-toolbar-hover-fontWeight); + background: var(--conditionBuilder-toolbar-hover-bg-color) !important; + border: none !important; + box-shadow: none !important; } &-arrow { @@ -83,8 +96,8 @@ position: absolute; top: px2rem(5px); bottom: px2rem(5px); - width: 2px; - background-color: #d4e5ff; + width: var(--conditionBuilder-line-width); + background-color: var(--conditionBuilder-line-bg-color); } } @@ -193,9 +206,10 @@ &-placeholder { color: var(--text--muted-color); position: relative; - padding: 10px; - background: rgba(0, 0, 0, 0.03); - border-radius: 5px; + padding: var(--conditionBuilder-body-paddingTop) + var(--conditionBuilder-body-paddingRight) + var(--conditionBuilder-body-paddingBottom) px2rem(10px); + background: var(--conditionBuilder-body-bg-color); &.simple { margin-left: 0; } @@ -276,10 +290,12 @@ } &-item { - background-color: #f7f7f9; + background-color: var(--conditionBuilder-body-bg-color); width: 100%; - padding: px2rem(12px); - padding-left: px2rem(28px); + padding: var(--conditionBuilder-body-paddingTop) + var(--conditionBuilder-body-paddingRight) + var(--conditionBuilder-body-paddingBottom) + var(--conditionBuilder-body-paddingLeft); display: flex; flex-direction: row; align-items: center; diff --git a/packages/amis-ui/scss/components/form/_rich-text.scss b/packages/amis-ui/scss/components/form/_rich-text.scss index 55698c2d8..3867f1174 100644 --- a/packages/amis-ui/scss/components/form/_rich-text.scss +++ b/packages/amis-ui/scss/components/form/_rich-text.scss @@ -13,7 +13,22 @@ min-height: px2rem(200px); height: auto; - border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); + border-width: var(--inputRichText-default-top-border-width) + var(--inputRichText-default-right-border-width) + var(--inputRichText-default-bottom-border-width) + var(--inputRichText-default-left-border-width); + border-style: var(--inputRichText-default-top-border-style) + var(--inputRichText-default-right-border-style) + var(--inputRichText-default-bottom-border-style) + var(--inputRichText-default-left-border-style); + border-color: var(--inputRichText-default-top-border-color) + var(--inputRichText-default-right-border-color) + var(--inputRichText-default-bottom-border-color) + var(--inputRichText-default-left-border-color); + border-radius: var(--inputRichText-default-top-left-border-radius) + var(--inputRichText-default-top-right-border-radius) + var(--inputRichText-default-bottom-right-border-radius) + var(--inputRichText-default-bottom-left-border-radius); width: 100%; @include input-border(); @@ -36,41 +51,42 @@ border: none; } - .fr-toolbar .fr-command.fr-btn, - .fr-popup .fr-command.fr-btn { - color: var(--Button--default-color); - } - - .fr-toolbar .fr-command.fr-btn.fr-active, - .fr-popup .fr-command.fr-btn.fr-active { - color: var(--info); - background: var(--Form-select-onHover-bg); - } - - .fr-desktop .fr-command:hover, - .fr-desktop .fr-command:focus { - background: var(--Form-select-onHover-bg); - } - - .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, - .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active { - background: var(--Form-select-onHover-bg); - } - - .fr-command.fr-btn - + .fr-dropdown-menu - .fr-dropdown-wrapper - .fr-dropdown-content - ul.fr-dropdown-list - li - a.fr-active { - background: var(--info); - color: #fff; + &:hover { + border-width: var(--inputRichText-hover-top-border-width) + var(--inputRichText-hover-right-border-width) + var(--inputRichText-hover-bottom-border-width) + var(--inputRichText-hover-left-border-width); + border-style: var(--inputRichText-hover-top-border-style) + var(--inputRichText-hover-right-border-style) + var(--inputRichText-hover-bottom-border-style) + var(--inputRichText-hover-left-border-style); + border-color: var(--inputRichText-hover-top-border-color) + var(--inputRichText-hover-right-border-color) + var(--inputRichText-hover-bottom-border-color) + var(--inputRichText-hover-left-border-color); + border-radius: var(--inputRichText-hover-top-left-border-radius) + var(--inputRichText-hover-top-right-border-radius) + var(--inputRichText-hover-bottom-right-border-radius) + var(--inputRichText-hover-bottom-left-border-radius); } &.is-focused { - border: var(--Form-input-borderWidth) solid - var(--Form-input-onFocused-borderColor); + border-width: var(--inputRichText-active-top-border-width) + var(--inputRichText-active-right-border-width) + var(--inputRichText-active-bottom-border-width) + var(--inputRichText-active-left-border-width); + border-style: var(--inputRichText-active-top-border-style) + var(--inputRichText-active-right-border-style) + var(--inputRichText-active-bottom-border-style) + var(--inputRichText-active-left-border-style); + border-color: var(--inputRichText-active-top-border-color) + var(--inputRichText-active-right-border-color) + var(--inputRichText-active-bottom-border-color) + var(--inputRichText-active-left-border-color); + border-radius: var(--inputRichText-active-top-left-border-radius) + var(--inputRichText-active-top-right-border-radius) + var(--inputRichText-active-bottom-right-border-radius) + var(--inputRichText-active-bottom-left-border-radius); } .fr-box.fr-basic .fr-element { @@ -82,12 +98,42 @@ } &.is-disabled { - border-color: var(--Form-input-onDisabled-borderColor); + border-width: var(--inputRichText-disabled-top-border-width) + var(--inputRichText-disabled-right-border-width) + var(--inputRichText-disabled-bottom-border-width) + var(--inputRichText-disabled-left-border-width); + border-style: var(--inputRichText-disabled-top-border-style) + var(--inputRichText-disabled-right-border-style) + var(--inputRichText-disabled-bottom-border-style) + var(--inputRichText-disabled-left-border-style); + border-color: var(--inputRichText-disabled-top-border-color) + var(--inputRichText-disabled-right-border-color) + var(--inputRichText-disabled-bottom-border-color) + var(--inputRichText-disabled-left-border-color); + border-radius: var(--inputRichText-disabled-top-left-border-radius) + var(--inputRichText-disabled-top-right-border-radius) + var(--inputRichText-disabled-bottom-right-border-radius) + var(--inputRichText-disabled-bottom-left-border-radius); pointer-events: none; opacity: 0.6; .fr-box.fr-basic.fr-top .fr-wrapper { - border-color: var(--Form-input-onDisabled-borderColor); + border-width: var(--inputRichText-disabled-top-border-width) + var(--inputRichText-disabled-right-border-width) + var(--inputRichText-disabled-bottom-border-width) + var(--inputRichText-disabled-left-border-width); + border-style: var(--inputRichText-disabled-top-border-style) + var(--inputRichText-disabled-right-border-style) + var(--inputRichText-disabled-bottom-border-style) + var(--inputRichText-disabled-left-border-style); + border-color: var(--inputRichText-disabled-top-border-color) + var(--inputRichText-disabled-right-border-color) + var(--inputRichText-disabled-bottom-border-color) + var(--inputRichText-disabled-left-border-color); + border-radius: var(--inputRichText-disabled-top-left-border-radius) + var(--inputRichText-disabled-top-right-border-radius) + var(--inputRichText-disabled-bottom-right-border-radius) + var(--inputRichText-disabled-bottom-left-border-radius); } } From 1620c6eb97c6a2a6d5edebd33b7f4b3269c01217 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Wed, 29 Mar 2023 14:01:55 +0800 Subject: [PATCH 19/25] =?UTF-8?q?feat:=20icon-select=E7=BB=84=E4=BB=B6=20?= =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=9E=E8=B0=83=20(#6471)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: icon-select组件 上传回调 * icon-select组件修改 * 自定义上传图标 回显 * 重新触发test --------- Co-authored-by: xujiahao01 --- .../amis/src/renderers/Form/IconSelect.tsx | 53 ++++++++++++++----- 1 file changed, 40 insertions(+), 13 deletions(-) diff --git a/packages/amis/src/renderers/Form/IconSelect.tsx b/packages/amis/src/renderers/Form/IconSelect.tsx index a586ca302..834444b17 100644 --- a/packages/amis/src/renderers/Form/IconSelect.tsx +++ b/packages/amis/src/renderers/Form/IconSelect.tsx @@ -86,9 +86,12 @@ export default class IconSelectControl extends React.PureComponent< let findItem: IconSelectStore.SvgIcon | undefined = undefined; if (IconSelectStore.svgIcons && IconSelectStore.svgIcons.length) { for (let i = 0; i < IconSelectStore.svgIcons.length; i++) { - findItem = find(IconSelectStore.svgIcons[i].children, i => i.svg === svg); + findItem = find( + IconSelectStore.svgIcons[i].children, + i => i.svg === svg + ); if (findItem) { - break; + break; } } } @@ -118,9 +121,10 @@ export default class IconSelectControl extends React.PureComponent< disabled, value: valueTemp, placeholder, - clearable + clearable, } = this.props; - const value = typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp; + const value = + typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp; const pureValue = (value?.id && String(value.id).replace(/^svg-/, '')) || ''; @@ -128,12 +132,14 @@ export default class IconSelectControl extends React.PureComponent< return (
- {pureValue && ( + {pureValue ? (
+ ) : ( + )} {iconName} @@ -196,7 +202,7 @@ export default class IconSelectControl extends React.PureComponent< const checkedIcon = this.state.tmpCheckIconId; if (this.props.returnSvg) { this.props.onChange && - this.props.onChange(checkedIcon && checkedIcon.svg || ''); + this.props.onChange((checkedIcon && checkedIcon.svg) || ''); } else { this.props.onChange && this.props.onChange( @@ -209,6 +215,13 @@ export default class IconSelectControl extends React.PureComponent< this.toggleModel(false); } + @autobind + async handleLocalUpload(icon: string) { + this.props.onChange && this.props.onChange(icon); + + this.toggleModel(false); + } + handleClickIconInModal(icon: IconChecked) { this.setState({ tmpCheckIconId: icon?.id === this.state.tmpCheckIconId?.id ? null : icon @@ -285,7 +298,13 @@ export default class IconSelectControl extends React.PureComponent< @autobind renderModalContent() { - const {render, classPrefix: ns, loadingConfig, funcSchema} = this.props; + const { + render, + classPrefix: ns, + loadingConfig, + funcSchema, + funcCom: FuncCom + } = this.props; const icons = this.getIconsByType(); @@ -317,10 +336,11 @@ export default class IconSelectControl extends React.PureComponent< )) || null} - {( - funcSchema - && render('func', funcSchema, {className: cx(`${ns}IconSelectControl-Modal-func`)}) - ) || null} + {FuncCom ? ( +
+ +
+ ) : null}
Date: Wed, 29 Mar 2023 21:18:35 +0800 Subject: [PATCH 20/25] =?UTF-8?q?feat=EF=BC=9Apicker=E6=8E=A5=E5=85=A5?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=20(#6497)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- packages/amis-ui/scss/_components.scss | 99 +++++++++++++++- packages/amis-ui/scss/components/_crud.scss | 26 +++- packages/amis-ui/scss/components/_crud2.scss | 26 +++- .../amis-ui/scss/components/form/_picker.scss | 111 ++++++++++++++++-- 4 files changed, 239 insertions(+), 23 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index 2d749b97b..c2e42d8b0 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -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); diff --git a/packages/amis-ui/scss/components/_crud.scss b/packages/amis-ui/scss/components/_crud.scss index 9146ace31..219d4ae82 100644 --- a/packages/amis-ui/scss/components/_crud.scss +++ b/packages/amis-ui/scss/components/_crud.scss @@ -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; diff --git a/packages/amis-ui/scss/components/_crud2.scss b/packages/amis-ui/scss/components/_crud2.scss index 72ae0aa2c..d2f4a5d4f 100644 --- a/packages/amis-ui/scss/components/_crud2.scss +++ b/packages/amis-ui/scss/components/_crud2.scss @@ -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; diff --git a/packages/amis-ui/scss/components/form/_picker.scss b/packages/amis-ui/scss/components/form/_picker.scss index 96d16491c..4ab62a200 100644 --- a/packages/amis-ui/scss/components/form/_picker.scss +++ b/packages/amis-ui/scss/components/form/_picker.scss @@ -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); } From 467259286d91c1cee52c8d50fbed3c694ffab3c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E4=BD=B3=E8=B1=AA?= <1440054388@qq.com> Date: Tue, 4 Apr 2023 09:59:18 +0800 Subject: [PATCH 21/25] =?UTF-8?q?style:=20progress=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D=20(#6515)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: progress主题样式修复 * 空白修改 --------- Co-authored-by: xujiahao01 --- packages/amis-ui/scss/components/_progress.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/amis-ui/scss/components/_progress.scss b/packages/amis-ui/scss/components/_progress.scss index c4b43fa86..51d1f551f 100644 --- a/packages/amis-ui/scss/components/_progress.scss +++ b/packages/amis-ui/scss/components/_progress.scss @@ -49,6 +49,11 @@ transition: width var(--animation-duration) ease; border-radius: var(--Progress-borderRadius); + + &.bg-info { + background: var(--Progress-line-theme-color); + } + &--stripe { background-image: linear-gradient( 45deg, From 67e196793a88f9b7528936e5655d41032125f432 Mon Sep 17 00:00:00 2001 From: HongYang <33488114+hy993658052@users.noreply.github.com> Date: Tue, 4 Apr 2023 11:32:31 +0800 Subject: [PATCH 22/25] =?UTF-8?q?feat:=20table2&combo=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=20(#6523)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: table2主题适配 * feat: combo组件主题适配 * feat: table2增加图标和自定义列主题配置 --------- Co-authored-by: hongyang03 --- packages/amis-ui/scss/_components.scss | 268 +++++++++++++++++- packages/amis-ui/scss/_properties.scss | 135 --------- .../scss/components/_column-toggler.scss | 7 +- packages/amis-ui/scss/components/_table2.scss | 124 +++++--- .../amis-ui/scss/components/form/_combo.scss | 46 +-- .../src/components/table/HeadCellFilter.tsx | 8 +- .../src/components/table/HeadCellSort.tsx | 16 +- .../Table2/HeadCellSearchDropdown.tsx | 8 +- 8 files changed, 408 insertions(+), 204 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index c2e42d8b0..bd1ab69bb 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3705,9 +3705,7 @@ --TimelineItem-detail-visible-max-width: #{px2rem(300px)}; --Timeline-alternate-margin-left: var(--gap-xl); --Timeline-visible-border-radius: var(--gap-xs); - --Timeline-horizontal-content-margin-top: var( - --Timeline-horizontal-top-size - ); + --Timeline-horizontal-content-margin-top: var(--Timeline-horizontal-top-size); --TimelineItem--icon-radius: 50%; --TimelineItem--round-radius: 50%; --TimelineItem--content-radius: px2rem(2px); @@ -3861,4 +3859,268 @@ --conditionBuilder-body-paddingRight: var(--sizes-size-7); --conditionBuilder-body-paddingBottom: var(--sizes-size-7); --conditionBuilder-body-paddingLeft: var(--sizes-base-14); + + --table-border-width: var(--borders-width-2); + --table-border-color: var(--colors-neutral-line-8); + --table-paddingTop: var(--sizes-size-6); + --table-paddingRight: var(--sizes-size-6); + --table-paddingBottom: var(--sizes-size-6); + --table-paddingLeft: var(--sizes-size-6); + --table-paddingX: var(--sizes-size-7); + --table-header-color: var(--colors-neutral-text-2); + --table-header-fontSize: var(--fonts-size-7); + --table-header-fontWeight: var(--fonts-weight-6); + --table-header-lineHeight: var(--fonts-lineHeight-2); + --table-header-bg-color: var(--colors-neutral-fill-10); + --table-header-separate-line-color: var(--colors-neutral-fill-11); + --table-header-separate-line-width: var(--borders-width-2); + --table-body-color: var(--colors-neutral-text-2); + --table-body-fontSize: var(--fonts-size-8); + --table-body-fontWeight: var(--fonts-weight-6); + --table-body-lineHeight: var(--fonts-lineHeight-2); + --table-body-bg-color: var(--colors-neutral-fill-11); + --table-body-hover-color: var(--colors-neutral-text-2); + --table-body-hover-bg-color: var(--colors-brand-10); + --table-body-hover-border-color: var(--colors-neutral-line-8); + --table-body-disabled-color: var(--colors-neutral-text-6); + --table-body-disabled-bg-color: var(--colors-neutral-fill-10); + --table-title-color: var(--colors-neutral-text-2); + --table-title-fontSize: var(--fonts-size-7); + --table-title-fontWeight: var(--fonts-weight-6); + --table-title-lineHeight: var(--fonts-lineHeight-2); + --table-title-bg-color: var(--colors-neutral-fill-11); + --table-title-paddingTop: var(--sizes-size-6); + --table-title-paddingRight: var(--sizes-size-5); + --table-title-paddingBottom: var(--sizes-size-6); + --table-title-paddingLeft: var(--sizes-size-5); + --table-icon-color: var(--colors-neutral-text-6); + --table-icon-hover-color: var(--colors-neutral-text-2); + --table-icon-active-color: var(--colors-brand-5); + --table-icon-marginLeft: var(--sizes-size-5); + --table-sort-icon: ''; + --table-sort-up-icon: ''; + --table-sort-down-icon: ''; + --table-filter-icon: ''; + --table-search-icon: ''; + --table-togglable-paddingTop: var(--sizes-size-4); + --table-togglable-paddingRight: var(--sizes-size-5); + --table-togglable-paddingBottom: var(--sizes-size-4); + --table-togglable-paddingLeft: var(--sizes-size-5); + --table-togglable-bg-color: var(--colors-neutral-fill-11); + --table-togglable-hover-bg-color: var(--colors-neutral-fill-8); + --table-size-large-paddingTop: var(--sizes-base-10); + --table-size-large-paddingRight: var(--sizes-size-7); + --table-size-large-paddingBottom: var(--sizes-base-10); + --table-size-large-paddingLeft: var(--sizes-size-7); + --table-size-small-paddingTop: var(--sizes-size-4); + --table-size-small-paddingRight: var(--sizes-size-3); + --table-size-small-paddingBottom: var(--sizes-size-4); + --table-size-small-paddingLeft: var(--sizes-size-3); + + --Table--unsaved-heading-bg: #e8f0fe; + --Table--unsaved-heading-color: #4285f4; + --Table-bg: var(--colors-neutral-fill-11); + --Table-borderColor: var(--table-border-color); + --Table-borderRadius: var(--borderRadius); + --Table-borderWidth: var(--table-border-width); + --Table-color: var(--table-body-color); + --Table-expandBtn-color: var(--colors-neutral-text-5); + --Table-fixed-zIndex: 5; + --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); + --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); + --Table-fixedTop-boxShadow: var(--shadows-shadow-normal); + --Table-fontSize: var(--table-body-fontSize); + --Table-heading-bg: var(--table-title-bg-color); + --Table-heading-height: #{px2rem(40px)}; + --Table-lineHeight: var(--fonts-lineHeight-2); + --Table-onChecked-bg: var(--colors-neutral-fill-10); + --Table-onChecked-borderColor: var(--colors-neutral-line-8); + --Table-onChecked-color: var(--colors-neutral-text-6); + --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10); + --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8); + --Table-onChecked-onHover-color: var(--colors-neutral-line-4); + --Table-onDragging-opacity: 0.1; + // 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了 + --Table-onHover-bg-rgb: 245, 251, 255; + --Table-onHover-bg: var(--table-body-hover-bg-color); + --Table-onHover-borderColor: var(--table-border-color); + --Table-onHover-boxShadow: var(--shadows-shadow-normal); + --Table-onHover-color: var(--table-body-hover-color); + --Table-onModified-bg: #e8f0fe; + --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)}; + --Table-onModified-color: #4285f4; + --Table-placeholder-height: #{px2rem(200px)}; + --Table-strip-bg: transparent; + --Table-tbody-borderTopColor: var(--colors-neutral-line-9); + --Table-thead-bg: var(--table-header-bg-color); + --Table-thead-borderColor: var(--table-header-separate-line-color); + --Table-thead-borderWidth: var(--table-header-separate-line-width); + --Table-thead-color: var(--table-header-color); + --Table-thead-fontSize: var(--table-header-fontSize); + --Table-thead-iconColor: var(--colors-neutral-text-5); + --Table-toolbar-marginX: #{px2rem(4px)}; + --Table-toolbar-marginY: var(--gap-base); + --Table-tree-borderColor: var(--colors-neutral-line-8); + --Table-searchableForm-backgroundColor: #f6f7f8; + --Table-searchableForm-borderRadius: #{px2rem(4px)}; + --Table-empty-icon-size: #{px2rem(74px)}; + --TableRow-onDisabled-bg: var(--table-body-disabled-bg-color); + --TableRow-onDisabled-color: var(--table-body-disabled-color); + --TableCell--edge-paddingX: var(--gap-md); + --TableCell--edge-paddingX-default: var(--table-paddingX); + --TableCell-filterBtn--onActive-color: var(--colors-brand-5); + --TableCell-filterBtn-width: #{px2rem(16px)}; + --TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-15); + --TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0) + var(--sizes-size-6); + --TableCell-line-height-large: #{px2rem(40px)}; + --TableCell-line-height-middle: #{px2rem(30px)}; + --TableCell-height: #{px2rem(40px)}; + --TableCell-height-default: #{px2rem(41px)}; + --TableCell-height-large: #{px2rem(61px)}; + --TableCell-height-small: #{px2rem(33px)}; + --TableCell-paddingX: var(--sizes-size-6); + --TableCell-paddingX-large: var(--gap-base); + --TableCell-paddingX-small: var(--gap-xs); + --TableCell-paddingY: calc( + (var(--TableCell-height) - var(--Table-fontSize) * var(--Table-lineHeight)) / + 2 + ); + --TableCell-paddingY-default: calc( + ( + var(--TableCell-height-default) - var(--Table-fontSize) * + var(--Table-lineHeight) + ) / 2 + ); + --TableCell-paddingY-large: calc( + ( + var(--TableCell-height-large) - var(--Table-fontSize) * + var(--Table-lineHeight) + ) / 2 + ); + --TableCell-paddingY-small: calc( + ( + var(--TableCell-height-small) - var(--Table-fontSize) * + var(--Table-lineHeight) + ) / 2 + ); + --TableCell-searchBtn--onActive-color: var(--table-icon-active-color); + --TableCell-searchBtn-width: #{px2rem(16px)}; + --TableCell-sortBtn--default-onActive-opacity: 1; + --TableCell-sortBtn--default-opacity: 0; + --TableCell-sortBtn--onActive-color: var(--table-icon-active-color); + --TableCell-sortBtn-width: var(--sizes-size-8); + --TableCell-icon-gap: var(--table-icon-marginLeft); + + --combo-bg-color: var(--colors-neutral-fill-11); + --combo-vertical-top-border-color: var(--colors-neutral-line-8); + --combo-vertical-top-border-width: var(--borders-width-2); + --combo-vertical-top-border-style: var(--borders-style-3); + --combo-vertical-right-border-color: var(--colors-neutral-line-8); + --combo-vertical-right-border-width: var(--borders-width-2); + --combo-vertical-right-border-style: var(--borders-style-3); + --combo-vertical-bottom-border-color: var(--colors-neutral-line-8); + --combo-vertical-bottom-border-width: var(--borders-width-2); + --combo-vertical-bottom-border-style: var(--borders-style-3); + --combo-vertical-left-border-color: var(--colors-neutral-line-8); + --combo-vertical-left-border-width: var(--borders-width-2); + --combo-vertical-left-border-style: var(--borders-style-3); + --combo-vertical-top-left-border-radius: var(--borders-radius-1); + --combo-vertical-top-right-border-radius: var(--borders-radius-1); + --combo-vertical-bottom-right-border-radius: var(--borders-radius-1); + --combo-vertical-bottom-left-border-radius: var(--borders-radius-1); + --combo-vertical-hover-top-border-color: var(--colors-brand-5); + --combo-vertical-hover-top-border-width: var(--borders-width-2); + --combo-vertical-hover-top-border-style: var(--borders-style-3); + --combo-vertical-hover-right-border-color: var(--colors-brand-5); + --combo-vertical-hover-right-border-width: var(--borders-width-2); + --combo-vertical-hover-right-border-style: var(--borders-style-3); + --combo-vertical-hover-bottom-border-color: var(--colors-brand-5); + --combo-vertical-hover-bottom-border-width: var(--borders-width-2); + --combo-vertical-hover-bottom-border-style: var(--borders-style-3); + --combo-vertical-hover-left-border-color: var(--colors-brand-5); + --combo-vertical-hover-left-border-width: var(--borders-width-2); + --combo-vertical-hover-left-border-style: var(--borders-style-3); + --combo-vertical-paddingTop: var(--sizes-size-6); + --combo-vertical-paddingRight: var(--sizes-size-6); + --combo-vertical-paddingBottom: var(--sizes-size-6); + --combo-vertical-paddingLeft: var(--sizes-size-6); + --combo-multi-addBtn-color: var(--colors-neutral-text-11); + --combo-multi-addBtn-fontSize: var(--fonts-size-8); + --combo-multi-addBtn-fontWeight: var(--fonts-weight-6); + --combo-multi-addBtn-lineHeight: var(--fonts-lineHeight-2); + --combo-multi-addBtn-top-left-border-radius: var(--borders-radius-3); + --combo-multi-addBtn-top-right-border-radius: var(--borders-radius-3); + --combo-multi-addBtn-bottom-right-border-radius: var(--borders-radius-3); + --combo-multi-addBtn-bottom-left-border-radius: var(--borders-radius-3); + --combo-multi-addBtn-bg-color: var(--colors-brand-5); + --combo-multi-addBtn-height: var(--sizes-base-13); + --combo-multi-addBtn-paddingTop: var(--sizes-size-3); + --combo-multi-addBtn-paddingRight: var(--sizes-size-5); + --combo-multi-addBtn-paddingBottom: var(--sizes-size-3); + --combo-multi-addBtn-paddingLeft: var(--sizes-size-5); + --combo-multi-addBtn-hover-color: var(--colors-neutral-text-11); + --combo-multi-addBtn-hover-bg-color: var(--colors-brand-6); + --combo-multi-addBtn-active-color: var(--colors-neutral-text-11); + --combo-multi-addBtn-active-bg-color: var(--colors-brand-4); + --combo-multi-delBtn-color: var(--colors-neutral-text-5); + --combo-multi-delBtn-hover-color: var(--colors-neutral-text-2); + + --Combo--horizontal-dragger-top: var(--sizes-size-3); + --Combo--horizontal-item-gap: var(--gap-xs); + --Combo--vertical-item-borderColor: var(--combo-vertical-top-border-color) + var(--combo-vertical-right-border-color) + var(--combo-vertical-bottom-border-color) + var(--combo-vertical-left-border-color); + --Combo--vertical-item-borderRadius: var( + --combo-vertical-top-left-border-radius + ) + var(--combo-vertical-top-right-border-radius) + var(--combo-vertical-bottom-right-border-radius) + var(--combo-vertical-bottom-left-border-radius); + --Combo--vertical-item-borderStyle: var(--combo-vertical-top-border-style) + var(--combo-vertical-right-border-style) + var(--combo-vertical-bottom-border-style) + var(--combo-vertical-left-border-style); + --Combo--vertical-item-borderWidth: var(--combo-vertical-top-border-width) + var(--combo-vertical-right-border-width) + var(--combo-vertical-bottom-border-width) + var(--combo-vertical-left-border-width); + --Combo--vertical-item-gap: var(--gap-xs); + --Combo--vertical-item-onHover-borderColor: var( + --combo-vertical-hover-top-border-color + ) + var(--combo-vertical-hover-right-border-color) + var(--combo-vertical-hover-bottom-border-color) + var(--combo-vertical-hover-left-border-color); + --Combo--vertical-item-paddingX: #{px2rem(10px)}; + --Combo--vertical-item-paddingY: #{px2rem(10px)}; + --Combo-addBtn-bg: var(--combo-multi-addBtn-bg-color); + --Combo-addBtn-border: var(--colors-neutral-line-11); + --Combo-addBtn-borderRadius: var(--borders-radius-3); + --Combo-addBtn-color: var(--combo-multi-addBtn-color); + --Combo-addBtn-fontSize: var(--combo-multi-addBtn-fontSize); + --Combo-addBtn-fontWeight: var(--combo-multi-addBtn-fontWeight); + --Combo-addBtn-height: var(--combo-multi-addBtn-height); + --Combo-addBtn-lineHeight: var(--combo-multi-addBtn-lineHeight); + --Combo-addBtn-onActive-bg: var(--combo-multi-addBtn-active-bg-color); + --Combo-addBtn-onActive-border: var(--combo-multi-addBtn-active-bg-color); + --Combo-addBtn-onActive-color: var(--combo-multi-addBtn-active-color); + --Combo-addBtn-onHover-bg: var(--combo-multi-addBtn-hover-bg-color); + --Combo-addBtn-onHover-border: var(--combo-multi-addBtn-hover-bg-color); + --Combo-addBtn-onHover-color: var(--combo-multi-addBtn-hover-color); + --Combo-addBtn-paddingX: var(--sizes-size-5); + --Combo-addBtn-paddingY: calc( + ( + var(--Combo-addBtn-height) - var(--borders-width-2) * 2 - + var(--Combo-addBtn-lineHeight) * var(--Combo-addBtn-fontSize) + ) / 2 + ); + --Combo-items-marginBottom: var(--gap-sm); + --Combo-toolbarBtn-color: var(--icon-color); + --Combo-toolbarBtn-height: var(--gap-md); + --Combo-toolbarBtn-lineHeight: 1; + --Combo-toolbarBtn-onHover-color: var(--colors-neutral-text-4); + --Combo-toolbarBtn-paddingX: var(--gap-xs); + --Combo-toolbarBtn-paddingY: #{px2rem(2px)}; } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index b7a9b3876..c81bdc3da 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -254,44 +254,6 @@ $remFactor: 16px; --ColorPicker-placeholderColor: var(--colors-neutral-text-6); --ColorPicker-boxShadow: var(--shadows-shadow-normal); - --Combo--horizontal-dragger-top: var(--sizes-size-3); - --Combo--horizontal-item-gap: var(--gap-xs); - --Combo--vertical-item-borderColor: var(--borderColor); - --Combo--vertical-item-borderRadius: var(--borderRadius); - --Combo--vertical-item-borderWidth: var(--borderWidth); - --Combo--vertical-item-gap: var(--gap-xs); - --Combo--vertical-item-onHover-borderColor: var(--info); - --Combo--vertical-item-paddingX: #{px2rem(10px)}; - --Combo--vertical-item-paddingY: #{px2rem(10px)}; - - --Combo-addBtn-bg: var(--colors-brand-5); - --Combo-addBtn-border: var(--colors-neutral-line-11); - --Combo-addBtn-borderRadius: var(--borders-radius-3); - --Combo-addBtn-color: var(--colors-neutral-text-11); - --Combo-addBtn-fontSize: var(--fonts-size-8); - --Combo-addBtn-fontWeight: var(--fonts-weight-6); - --Combo-addBtn-height: var(--sizes-base-13); - --Combo-addBtn-lineHeight: var(--fonts-lineHeight-2); - --Combo-addBtn-onActive-bg: var(--colors-brand-4); - --Combo-addBtn-onActive-border: var(--colors-neutral-line-4); - --Combo-addBtn-onActive-color: var(--Combo-addBtn-color); - --Combo-addBtn-onHover-bg: var(--colors-brand-6); - --Combo-addBtn-onHover-color: var(--Combo-addBtn-color); - --Combo-addBtn-paddingX: var(--sizes-size-5); - --Combo-addBtn-paddingY: calc( - ( - var(--Combo-addBtn-height) - var(--borders-width-2) * 2 - - var(--Combo-addBtn-lineHeight) * var(--Combo-addBtn-fontSize) - ) / 2 - ); - --Combo-items-marginBottom: var(--gap-sm); - --Combo-toolbarBtn-color: var(--icon-color); - --Combo-toolbarBtn-height: var(--gap-md); - --Combo-toolbarBtn-lineHeight: 1; - --Combo-toolbarBtn-onHover-color: var(--colors-neutral-text-4); - --Combo-toolbarBtn-paddingX: var(--gap-xs); - --Combo-toolbarBtn-paddingY: #{px2rem(2px)}; - --Copyable-iconColor: var(--icon-color); --Copyable-onHover-iconColor: var(--icon-onHover-color); @@ -697,103 +659,6 @@ $remFactor: 16px; --Sparkline-line-color: var(--info); --Sparkline-area-color: #{rgba($info, 0.1)}; - --Table--unsaved-heading-bg: #e8f0fe; - --Table--unsaved-heading-color: #4285f4; - --Table-bg: var(--colors-neutral-fill-11); - --Table-borderColor: var(--colors-neutral-line-8); - --Table-borderRadius: var(--borderRadius); - --Table-borderWidth: var(--borderWidth); - --Table-color: var(--colors-neutral-text-2); - --Table-expandBtn-color: var(--colors-neutral-text-5); - --Table-fixed-zIndex: 5; - --Table-fixedLeft-boxShadow: 0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); - --Table-fixedRight-boxShadow: -0.42rem 0 0.42rem -0.28rem rgba(0, 0, 0, 0.15); - --Table-fixedTop-boxShadow: var(--shadows-shadow-normal); - --Table-fontSize: var(--fonts-size-8); - --Table-heading-bg: var(--colors-neutral-fill-11); - --Table-heading-height: #{px2rem(40px)}; - --Table-lineHeight: var(--fonts-lineHeight-2); - --Table-onChecked-bg: var(--colors-neutral-fill-10); - --Table-onChecked-borderColor: var(--colors-neutral-line-8); - --Table-onChecked-color: var(--colors-neutral-text-6); - --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10); - --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8); - --Table-onChecked-onHover-color: var(--colors-neutral-line-4); - --Table-onDragging-opacity: 0.1; - // 背景用到了 rgba，所以必须再提供这种写法，搜一下这个变量就知道为什么了 - --Table-onHover-bg-rgb: 245, 251, 255; - --Table-onHover-bg: var(--colors-brand-10); - --Table-onHover-borderColor: var(--colors-neutral-line-8); - --Table-onHover-boxShadow: var(--shadows-shadow-normal); - --Table-onHover-color: var(--text-color); - --Table-onModified-bg: #e8f0fe; - --Table-onModified-borderColor: #{darken(#e8f0fe, 5%)}; - --Table-onModified-color: #4285f4; - --Table-placeholder-height: #{px2rem(200px)}; - --Table-strip-bg: transparent; - --Table-tbody-borderTopColor: var(--colors-neutral-line-9); - --Table-thead-bg: var(--colors-neutral-fill-10); - --Table-thead-borderColor: var(--colors-neutral-line-11); - --Table-thead-borderWidth: var(--Table-borderWidth); - --Table-thead-color: var(--colors-neutral-text-2); - --Table-thead-fontSize: var(--fontSizeBase); - --Table-thead-iconColor: var(--colors-neutral-text-5); - --Table-toolbar-marginX: #{px2rem(4px)}; - --Table-toolbar-marginY: var(--gap-base); - --Table-tree-borderColor: var(--colors-neutral-line-8); - --Table-searchableForm-backgroundColor: #f6f7f8; - --Table-searchableForm-borderRadius: #{px2rem(4px)}; - --Table-empty-icon-size: #{px2rem(74px)}; - - --TableRow-onDisabled-bg: var(--colors-neutral-fill-10); - --TableRow-onDisabled-color: var(--colors-neutral-text-6); - - --TableCell--edge-paddingX: var(--gap-md); - --TableCell--edge-paddingX-default: var(--gap-base); - --TableCell-filterBtn--onActive-color: var(--colors-brand-5); - --TableCell-filterBtn-width: #{px2rem(16px)}; - --TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-15); - --TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0) - var(--sizes-size-6); - --TableCell-line-height-large: #{px2rem(40px)}; - --TableCell-line-height-middle: #{px2rem(30px)}; - --TableCell-height: #{px2rem(40px)}; - --TableCell-height-default: #{px2rem(41px)}; - --TableCell-height-large: #{px2rem(61px)}; - --TableCell-height-small: #{px2rem(33px)}; - --TableCell-paddingX: var(--sizes-size-6); - --TableCell-paddingX-large: var(--gap-base); - --TableCell-paddingX-small: var(--gap-xs); - --TableCell-paddingY: calc( - (var(--TableCell-height) - var(--Table-fontSize) * var(--Table-lineHeight)) / - 2 - ); - --TableCell-paddingY-default: calc( - ( - var(--TableCell-height-default) - var(--Table-fontSize) * - var(--Table-lineHeight) - ) / 2 - ); - --TableCell-paddingY-large: calc( - ( - var(--TableCell-height-large) - var(--Table-fontSize) * - var(--Table-lineHeight) - ) / 2 - ); - --TableCell-paddingY-small: calc( - ( - var(--TableCell-height-small) - var(--Table-fontSize) * - var(--Table-lineHeight) - ) / 2 - ); - --TableCell-searchBtn--onActive-color: var(--colors-brand-5); - --TableCell-searchBtn-width: #{px2rem(16px)}; - --TableCell-sortBtn--default-onActive-opacity: 1; - --TableCell-sortBtn--default-opacity: 0; - --TableCell-sortBtn--onActive-color: var(--colors-brand-5); - --TableCell-sortBtn-width: var(--sizes-size-8); - --TableCell-icon-gap: var(--gap-sm); - --Table-fixedLeftLast-boxShadow: inset 10px 0 8px -8px #00000026; --Table-fixedRightFirst-boxShadow: inset -10px 0 8px -8px #00000026; --Table-loading-padding: 30px 0px; diff --git a/packages/amis-ui/scss/components/_column-toggler.scss b/packages/amis-ui/scss/components/_column-toggler.scss index 064e67ea5..32edf7fc0 100644 --- a/packages/amis-ui/scss/components/_column-toggler.scss +++ b/packages/amis-ui/scss/components/_column-toggler.scss @@ -55,7 +55,9 @@ &-menuItem, &-menu > li { - padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX); + padding: var(--table-togglable-paddingTop) + var(--table-togglable-paddingRight) var(--table-togglable-paddingBottom) + var(--table-togglable-paddingLeft); white-space: nowrap; box-sizing: border-box; height: var(--DropDown-menu-height); @@ -63,9 +65,10 @@ user-select: none; color: var(--link-color); text-decoration: var(--link-decoration); + background: var(--table-togglable-bg-color); &:hover { - background: var(--DropDown-menuItem-onHover-bg); + background: var(--table-togglable-hover-bg-color); color: var(--DropDown-menuItem-onHover-color); } diff --git a/packages/amis-ui/scss/components/_table2.scss b/packages/amis-ui/scss/components/_table2.scss index e5dce365b..0455f68ae 100644 --- a/packages/amis-ui/scss/components/_table2.scss +++ b/packages/amis-ui/scss/components/_table2.scss @@ -34,30 +34,37 @@ .#{$ns}Table-table { > thead > tr { > th { - padding: var(--TableCell-paddingY-large) - var(--TableCell-paddingX-large); + padding: var(--table-size-large-paddingTop) + var(--table-size-large-paddingRight) + var(--table-size-large-paddingBottom) + var(--table-size-large-paddingLeft); } } > tbody > tr { > td, > th { - padding: var(--TableCell-paddingY-large) - var(--TableCell-paddingX-large); + padding: var(--table-size-large-paddingTop) + var(--table-size-large-paddingRight) + var(--table-size-large-paddingBottom) + var(--table-size-large-paddingLeft); } } > tfoot > tr { > td { - padding: var(--TableCell-paddingY-large) - var(--TableCell-paddingX-large); + padding: var(--table-size-large-paddingTop) + var(--table-size-large-paddingRight) + var(--table-size-large-paddingBottom) + var(--table-size-large-paddingLeft); } } } .#{$ns}TableCell-filterBtn { right: calc( - var(--TableCell-paddingX-large) - var(--TableCell-filterBtn-width) / 2 + var(--table-size-large-paddingRight) - var(--TableCell-filterBtn-width) / + 2 ); } } @@ -66,44 +73,50 @@ .#{$ns}Table-table { > thead > tr { > th { - padding: var(--TableCell-paddingY-small) - var(--TableCell-paddingX-small); + padding: var(--table-size-small-paddingTop) + var(--table-size-small-paddingRight) + var(--table-size-small-paddingBottom) + var(--table-size-small-paddingLeft); } } > tbody > tr { > td, > th { - padding: var(--TableCell-paddingY-small) - var(--TableCell-paddingX-small); + padding: var(--table-size-small-paddingTop) + var(--table-size-small-paddingRight) + var(--table-size-small-paddingBottom) + var(--table-size-small-paddingLeft); } } > tfoot > tr { > td { - padding: var(--TableCell-paddingY-small) - var(--TableCell-paddingX-small); + padding: var(--table-size-small-paddingTop) + var(--table-size-small-paddingRight) + var(--table-size-small-paddingBottom) + var(--table-size-small-paddingLeft); } } } .#{$ns}TableCell-filterBtn { right: calc( - var(--TableCell-paddingX-small) - var(--TableCell-filterBtn-width) / 2 + var(--table-size-small-paddingRight) - var(--TableCell-filterBtn-width) / + 2 ); } } .#{$ns}Table-title, .#{$ns}Table-footer { + color: var(--table-title-color); + font-size: var(--table-title-fontSize); + font-weight: var(--table-title-fontWeight); + line-height: var(--table-title-lineHeight); background: var(--Table-heading-bg); - padding: calc( - ( - var(--Table-heading-height) - var(--Table-fontSize) * - var(--lineHeightBase) - ) / 2 - ) - var(--gap-sm); + padding: var(--table-title-paddingTop) var(--table-title-paddingRight) + var(--table-title-paddingBottom) var(--table-title-paddingLeft); } .#{$ns}Table-header { @@ -154,6 +167,8 @@ margin-bottom: 0; font-size: var(--Table-fontSize); color: var(--Table-color); + font-weight: var(--table-body-fontWeight); + line-height: var(--table-body-lineHeight); background: var(--Table-bg); border-spacing: 0; border-collapse: collapse; @@ -179,7 +194,8 @@ > thead > tr { > th { background: var(--Table-thead-bg); - padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX); + padding: var(--table-paddingTop) var(--table-paddingRight) + var(--table-paddingBottom) var(--table-paddingLeft); &:first-child { padding-left: var(--TableCell--edge-paddingX-default); @@ -200,7 +216,8 @@ font-size: var(--Table-thead-fontSize); color: var(--Table-thead-color); - font-weight: var(--fontWeightNormal); + font-weight: var(--table-header-fontWeight); + line-height: var(--table-header-lineHeight); white-space: nowrap; .#{$ns}Remark { @@ -232,7 +249,8 @@ > th { background: var(--Table-thead-bg); color: var(--Table-thead-color); - font-weight: var(--fontWeightNormal); + font-weight: var(--table-header-fontWeight); + line-height: var(--table-header-lineHeight); white-space: nowrap; border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); @@ -240,7 +258,8 @@ > td, > th { - padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX); + padding: var(--table-paddingTop) var(--table-paddingRight) + var(--table-paddingBottom) var(--table-paddingLeft); &:first-child { padding-left: var(--TableCell--edge-paddingX-default); @@ -272,7 +291,7 @@ } @if var(--Table-strip-bg) !=transparent { - background: transparent; + background: var(--table-body-bg-color); &.#{$ns}Table-tr--odd { background: var(--Table-strip-bg); @@ -318,7 +337,8 @@ &.is-summary { background: var(--Table-thead-bg); color: var(--Table-thead-color); - font-weight: var(--fontWeightNormal); + font-weight: var(--table-header-fontWeight); + line-height: var(--table-header-lineHeight); } &.bg-light { @@ -562,7 +582,8 @@ border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); > td { - padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX); + padding: var(--table-paddingTop) var(--table-paddingRight) + var(--table-paddingBottom) var(--table-paddingLeft); background: var(--Table-thead-bg); } } @@ -671,7 +692,8 @@ .#{$ns}TableCell-sortBtn { cursor: pointer; width: var(--TableCell-sortBtn-width); - height: var(--gap-md); + height: 100%; + vertical-align: middle; position: static; display: inline-block; transform: none; @@ -682,9 +704,9 @@ color: var(--icon-onHover-color); } - &--up > svg, - &--down > svg, - &--default > svg { + &--up svg, + &--down svg, + &--default svg { color: inherit; width: 13px; height: 13px; @@ -704,9 +726,9 @@ &--default { &.is-active { - color: var(--text--muted-color); + color: var(--table-icon-color); &:hover { - color: var(--text-color); + color: var(--table-icon-hover-color); } } } @@ -720,16 +742,16 @@ .#{$ns}TableCell-searchBtn { cursor: pointer; - color: var(--text--muted-color); + color: var(--table-icon-color); margin-left: var(--TableCell-icon-gap); - svg.icon { + svg { width: 12px; height: 12px; } &:hover { - color: var(--text-color); + color: var(--table-icon-hover-color); } &.is-active { color: var(--TableCell-searchBtn--onActive-color); @@ -749,19 +771,21 @@ .#{$ns}TableCell-filterBtn { cursor: pointer; width: var(--TableCell-filterBtn-width); + height: 100%; + vertical-align: middle; position: static; display: inline-block; transform: none; - color: var(--text--muted-color); + color: var(--table-icon-color); margin-left: var(--TableCell-icon-gap); - svg.icon { + svg { width: 13px; height: 13px; } &:hover { - color: var(--text-color); + color: var(--table-icon-hover-color); } &.is-active { @@ -886,6 +910,26 @@ top: 0; left: 0; } + + .table-sort-default { + content: var(--table-sort-icon); + } + + .table-sort-up { + content: var(--table-sort-up-icon); + } + + .table-sort-down { + content: var(--table-sort-down-icon); + } + + .table-filter-icon { + content: var(--table-filter-icon); + } + + .table-search-icon { + content: var(--table-search-icon); + } } .#{$ns}InputTable-toolbar { diff --git a/packages/amis-ui/scss/components/form/_combo.scss b/packages/amis-ui/scss/components/form/_combo.scss index 2b55bc8e5..6cfdb4290 100644 --- a/packages/amis-ui/scss/components/form/_combo.scss +++ b/packages/amis-ui/scss/components/form/_combo.scss @@ -32,15 +32,15 @@ var(--Combo-addBtn-fontSize), var(--Combo-addBtn-fontWeight), var(--Combo-addBtn-lineHeight), - var(--Combo-addBtn-borderRadius), - var(--Combo-addBtn-borderRadius), - var(--Combo-addBtn-borderRadius), - var(--Combo-addBtn-borderRadius), + var(--combo-multi-addBtn-top-left-border-radius), + var(--combo-multi-addBtn-top-right-border-radius), + var(--combo-multi-addBtn-bottom-right-border-radius), + var(--combo-multi-addBtn-bottom-left-border-radius), var(--Combo-addBtn-height), - var(--Combo-addBtn-paddingY), - var(--Combo-addBtn-paddingY), - var(--Combo-addBtn-paddingX), - var(--Combo-addBtn-paddingX) + var(--combo-multi-addBtn-paddingTop), + var(--combo-multi-addBtn-paddingBottom), + var(--combo-multi-addBtn-paddingLeft), + var(--combo-multi-addBtn-paddingRight) ); @include button-variant( @@ -98,16 +98,16 @@ } &-delBtn { - color: var(--icon-color); + color: var(--combo-multi-delBtn-color); cursor: pointer; &:hover { - color: var(--icon-onHover-color); + color: var(--combo-multi-delBtn-hover-color); } } &-tab-delBtn { - color: var(--icon-color); + color: var(--combo-multi-delBtn-color); cursor: pointer; margin-left: var(--gap-sm); display: inline-block; @@ -118,7 +118,7 @@ } &:hover { - color: var(--icon-onHover-color); + color: var(--combo-multi-delBtn-hover-color); } } @@ -137,7 +137,7 @@ } &-item { - background: var(--Page-main-bg); + background: var(--combo-bg-color); } &-itemDrager { @@ -239,10 +239,13 @@ // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad. > .#{$ns}Combo-item, > .#{$ns}Combo-items > .#{$ns}Combo-item { - border: var(--Combo--vertical-item-borderWidth) dashed - var(--Combo--vertical-item-borderColor); - padding: var(--Combo--vertical-item-paddingY) - var(--Combo--vertical-item-paddingX); + border-color: var(--Combo--vertical-item-borderColor); + border-width: var(--Combo--vertical-item-borderWidth); + border-style: var(--Combo--vertical-item-borderStyle); + border-radius: var(--Combo--vertical-item-borderRadius); + padding: var(--combo-vertical-paddingTop) + var(--combo-vertical-paddingRight) var(--combo-vertical-paddingBottom) + var(--combo-vertical-paddingLeft); position: relative; } @@ -260,7 +263,14 @@ &:not(.is-disabled) > .#{$ns}Combo-item:hover, &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover { border-color: var(--Combo--vertical-item-onHover-borderColor); - // border-style: solid; + border-width: var(--combo-vertical-hover-top-border-width) + var(--combo-vertical-hover-right-border-width) + var(--combo-vertical-hover-bottom-border-width) + var(--combo-vertical-hover-left-border-width); + border-style: var(--combo-vertical-hover-top-border-style) + var(--combo-vertical-hover-right-border-style) + var(--combo-vertical-hover-bottom-border-style) + var(--combo-vertical-hover-left-border-style); > .#{$ns}Combo-delBtn, > .#{$ns}Combo-delController { diff --git a/packages/amis-ui/src/components/table/HeadCellFilter.tsx b/packages/amis-ui/src/components/table/HeadCellFilter.tsx index 1a54413a5..832f64cd6 100644 --- a/packages/amis-ui/src/components/table/HeadCellFilter.tsx +++ b/packages/amis-ui/src/components/table/HeadCellFilter.tsx @@ -164,7 +164,13 @@ export class HeadCellFilter extends React.Component { } + filterIcon={ + + } active={ column.filtered || (options && options.some((item: any) => item.selected)) diff --git a/packages/amis-ui/src/components/table/HeadCellSort.tsx b/packages/amis-ui/src/components/table/HeadCellSort.tsx index 88d6e7acb..91f86bf8d 100644 --- a/packages/amis-ui/src/components/table/HeadCellSort.tsx +++ b/packages/amis-ui/src/components/table/HeadCellSort.tsx @@ -54,7 +54,7 @@ export class HeadCellSort extends React.Component { return ( { let sortPayload: State = { orderBy: '', @@ -92,7 +92,11 @@ export class HeadCellSort extends React.Component { active && this.state.order === 'desc' ? 'is-active' : '' )} > - + { active && this.state.order === 'asc' ? 'is-active' : '' )} > - + { active ? '' : 'is-active' )} > - + ); diff --git a/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx b/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx index 82e9b0170..c26986793 100644 --- a/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx +++ b/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx @@ -271,7 +271,13 @@ export class HeadCellSearchDropDown extends React.Component< (searchable as any).className )} active={isActive} - filterIcon={} + filterIcon={ + + } popOverContainer={ popOverContainer ? popOverContainer : () => findDOMNode(this) } From 68785165e544758bb06ecc3ded15a44b846544a6 Mon Sep 17 00:00:00 2001 From: zzy1415447829 <49521093+zzy1415447829@users.noreply.github.com> Date: Tue, 4 Apr 2023 15:45:41 +0800 Subject: [PATCH 23/25] =?UTF-8?q?feature:[amis-saas-10368]=E5=90=91?= =?UTF-8?q?=E5=AF=BC=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=20(#6532)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: zhangzheyu02 --- packages/amis-ui/scss/_components.scss | 54 +++++++++++++++++++ packages/amis-ui/scss/_properties.scss | 25 --------- packages/amis-ui/scss/components/_wizard.scss | 14 ++--- 3 files changed, 62 insertions(+), 31 deletions(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index bd1ab69bb..e9cc9d9f4 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -4123,4 +4123,58 @@ --Combo-toolbarBtn-onHover-color: var(--colors-neutral-text-4); --Combo-toolbarBtn-paddingX: var(--gap-xs); --Combo-toolbarBtn-paddingY: #{px2rem(2px)}; + + --Wizard-badge-size: var(--sizes-base-13); + --Wizard-badge-fontSize: var(--fonts-size-7); + --Wizard-badge-color: var(--colors-neutral-text-6); + --Wizard-badge-border-width: var(--borders-width-2); + --Wizard-badge-border-color: var(--colors-neutral-line-6); + --Wizard-badge-bg-color: var(--colors-neutral-fill-11); + --Wizard-badge-onActive-color: var(--colors-neutral-text-11); + --Wizard-badge-onActive-bg-color: var(--colors-neutral-fill-3); + --Wizard-badge-onComplete-color: var(--colors-neutral-text-11); + --Wizard-badge-onComplete-bg-color: var(--colors-neutral-fill-3); + --Wizard-badge-text-margin: var(--sizes-size-4); + --Wizard-step-fontSize: var(--fonts-size-7); + --Wizard-step-color: var(--colors-neutral-text-6); + --Wizard-step-paddingTop: var(--sizes-size-6); + --Wizard-step-paddingRight: var(--sizes-size-0); + --Wizard-step-paddingBottom: var(--sizes-size-6); + --Wizard-step-paddingLeft: var(--sizes-size-0); + --Wizard-step-bg-color: var(--colors-neutral-fill-11); + --Wizard-step-li-onActive-color: var(--colors-neutral-text-3); + --Wizard-step-li-onActive-bg-color: var(--colors-neutral-fill-11); + --Wizard-after-color: var(--colors-neutral-text-11); + --Wizard-after-onActive-color: var(--colors-neutral-fill-11); + --Wizard-stepContent-paddingTop: var(--sizes-size-7); + --Wizard-stepContent-paddingRight: var(--sizes-size-7); + --Wizard-stepContent-paddingBottom: var(--sizes-size-7); + --Wizard-stepContent-paddingLeft: var(--sizes-size-7); + + --Wizard-badge-bg: var(--Wizard-badge-bg-color); + --Wizard-badge-border: var( --Wizard-badge-border-width) var(--borders-style-2) + var(--Wizard-badge-border-color); + --Wizard-badge-borderRadius: var(--borders-radius-7); + --Wizard-badge-marginRight: var(--Wizard-badge-text-margin); + --Wizard-badge-onActive-backgroundColor: var(--Wizard-badge-onActive-bg-color); + --Wizard-badge-onComplete-backgroundColor: var(--Wizard-badge-onComplete-bg-color); + --Wizard-badge-onActive-color: var(--Wizard-badge-onActive-color); + --Wizard-badge-onComplete-color: var(--Wizard-badge-onComplete-color); + + --Wizard-steps-bg--isComplete: var(--colors-neutral-fill-11); + --Wizard-steps-bg: var(--Wizard-step-bg-color); + --Wizard-steps-borderWidth: var(--borders-width-1); + --Wizard-steps-height: var(--sizes-base-30); + --Wizard-steps-li-onActive-arrow-bg: var(--Wizard-after-onActive-color); + --Wizard-steps-li-onActive-bg: var(--Wizard-step-li-onActive-bg-color); + --Wizard-steps-li-onActive-color: var(--Wizard-step-li-onActive-color); + + --Wizard-steps-liAfterContent: '\e6ee'; + --Wizard-steps-liVender: 'iconfont'; + --Wizard-steps-padding: var(--Wizard-step-paddingTop) var(--Wizard-step-paddingRight) + var(--Wizard-step-paddingBottom) var(--Wizard-step-paddingLeft); + --Wizard-steps-textAlign: center; + --Wizard-steps-ulDisplay: inline-block; + --Wizard-stepsContent-padding: var(--Wizard-stepContent-paddingTop) var(--Wizard-stepContent-paddingRight) + var(--Wizard-stepContent-paddingBottom) var(--Wizard-stepContent-paddingLeft); } diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss index c81bdc3da..c07c868b7 100644 --- a/packages/amis-ui/scss/_properties.scss +++ b/packages/amis-ui/scss/_properties.scss @@ -737,31 +737,6 @@ $remFactor: 16px; --TabsTransfer-title-bg: #f7f7f9; --TabsTransfer-border-color: #e8e9eb; - --Wizard-badge-bg: var(--colors-neutral-fill-11); - --Wizard-badge-border: var(--borders-width-2) var(--borders-style-2) - var(--colors-neutral-fill-6); - --Wizard-badge-borderRadius: var(--borders-radius-7); - --Wizard-badge-color: var(--colors-neutral-text-6); - --Wizard-badge-fontSize: var(--fonts-size-7); - --Wizard-badge-marginRight: var(--sizes-size-4); - --Wizard-badge-onActive-backgroundColor: var(--colors-neutral-text-3); - --Wizard-badge-onComplete-backgroundColor: var(--colors-neutral-text-3); - --Wizard-badge-size: var(--sizes-base-13); - --Wizard-steps-bg--isComplete: var(--colors-neutral-fill-11); - --Wizard-steps-bg: var(--colors-neutral-fill-11); - --Wizard-steps-borderWidth: var(--borders-width-1); - --Wizard-steps-height: var(--sizes-base-30); - --Wizard-steps-li-onActive-arrow-bg: var(--colors-neutral-text-11); - --Wizard-steps-li-onActive-bg: var(--colors-neutral-fill-11); - --Wizard-steps-li-onActive-color: var(--colors-neutral-text-3); - - --Wizard-steps-liAfterContent: '\e6ee'; - --Wizard-steps-liVender: 'iconfont'; - --Wizard-steps-padding: var(--sizes-size-6) var(--sizes-size-0); - --Wizard-steps-textAlign: center; - --Wizard-steps-ulDisplay: inline-block; - --Wizard-stepsContent-padding: var(--gap-base); - --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0; --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)}; diff --git a/packages/amis-ui/scss/components/_wizard.scss b/packages/amis-ui/scss/components/_wizard.scss index 9a42b6ad5..4bbf1c3c2 100644 --- a/packages/amis-ui/scss/components/_wizard.scss +++ b/packages/amis-ui/scss/components/_wizard.scss @@ -56,11 +56,11 @@ // background: var(--dark); // } &.is-active { - color: var(--white); + color: var(--Wizard-badge-onActive-color); background: var(--Wizard-badge-onActive-backgroundColor); } &.is-complete { - color: var(--white); + color: var(--Wizard-badge-onComplete-color); background: var(--Wizard-badge-onComplete-backgroundColor); } } @@ -84,7 +84,7 @@ float: left; padding: 0 var(--gap-md) 0 px2rem(25px); margin: 0; - color: #999999; + color: var(--Wizard-step-color); cursor: pointer; height: var(--Wizard-steps-height); line-height: var(--Wizard-steps-height); @@ -127,7 +127,7 @@ &.is-active { color: var(--Wizard-steps-li-onActive-color); - background: #fff; + background: var(--Wizard-steps-li-onActive-bg); } &.is-active:after { @@ -160,7 +160,7 @@ float: left; padding: 0 var(--gap-md) 0 px2rem(25px); margin: 0; - color: #999999; + color: var(--Wizard-step-color); cursor: default; height: var(--Wizard-steps-height); line-height: var(--Wizard-steps-height); @@ -182,6 +182,7 @@ &:after { right: px2rem(-9px); + color: var(--Wizard-after-color); border-left-color: var(--Wizard-steps-bg); z-index: 2; } @@ -192,6 +193,7 @@ } &.is-active:after { + color: var(--Wizard-after-onActive-color); border-left-color: var(--Wizard-steps-li-onActive-arrow-bg); } @@ -248,7 +250,7 @@ padding-left: var(--gap-md); &.is-active { - background: #fff; + background: var(--Wizard-steps-li-onActive-bg); } } } From 202696b86735194e89d7b7ff9dfb0b69273ed0ed Mon Sep 17 00:00:00 2001 From: zzy1415447829 <49521093+zzy1415447829@users.noreply.github.com> Date: Tue, 4 Apr 2023 18:54:57 +0800 Subject: [PATCH 24/25] Theme 0224 optmize (#6534) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature:[amis-saas-10368]向导组件样式 * feature:[amis-saas-10190]优化标签组件 --------- Co-authored-by: zhangzheyu02 --- packages/amis-ui/scss/_components.scss | 4 ++++ packages/amis-ui/scss/components/_tag.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss index e9cc9d9f4..f9db219ed 100644 --- a/packages/amis-ui/scss/_components.scss +++ b/packages/amis-ui/scss/_components.scss @@ -3433,6 +3433,10 @@ var(--Tag-model-rounded-right-border-color) var(--Tag-model-rounded-bottom-border-color) var(--Tag-model-rounded-left-border-color); + --Tag-rounded-borderStyle: var(--Tag-model-rounded-top-border-style) + var(--Tag-model-rounded-right-border-style) + var(--Tag-model-rounded-bottom-border-style) + var(--Tag-model-rounded-left-border-style); --Toast-color: var(--colors-neutral-text-11); --Toast-paddingTop: var(--sizes-size-3); diff --git a/packages/amis-ui/scss/components/_tag.scss b/packages/amis-ui/scss/components/_tag.scss index 20c4db126..bfc9c3829 100644 --- a/packages/amis-ui/scss/components/_tag.scss +++ b/packages/amis-ui/scss/components/_tag.scss @@ -61,7 +61,7 @@ &--rounded { background-color: var(--white); - border-style: solid; + border-style: var(--Tag-rounded-borderStyle); border-width: var(--Tag-rounded-borderWidth); border-radius: var(--Tag-rounded-borderRadius); border-color: var(--Tag-rounded-borderColor); From dd8906b80aa95b7215a0ec83280e68d2dd0447ab Mon Sep 17 00:00:00 2001 From: HongYang <33488114+hy993658052@users.noreply.github.com> Date: Tue, 4 Apr 2023 19:01:38 +0800 Subject: [PATCH 25/25] =?UTF-8?q?fix:=20=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E5=88=97=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D=20(#6535)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: hongyang03 --- packages/amis/src/renderers/Table2/ColumnToggler.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/amis/src/renderers/Table2/ColumnToggler.tsx b/packages/amis/src/renderers/Table2/ColumnToggler.tsx index cca417b38..42d7aaf84 100644 --- a/packages/amis/src/renderers/Table2/ColumnToggler.tsx +++ b/packages/amis/src/renderers/Table2/ColumnToggler.tsx @@ -75,6 +75,7 @@ export class ColumnTogglerRenderer extends React.Component {toggableColumns?.length ? (