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

Merge pull request #6562 from hy993658052/theme-0224-final-2

Browse Source 
feat: 主题配置合并master
This commit is contained in:
qkiroc 2023-04-10 11:38:49 +08:00 committed by GitHub
commit 021c8b036a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 2405 additions and 905 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/zh-CN/components/form/fieldset.md
View File

@ -242,4 +242,4 @@ fieldSet 的另一种标题展现样式，不同的是展开的时候收起文
| collapsable | `boolean` | `false` | 是否可折叠 | | collapsable | `boolean` | `false` | 是否可折叠 |
| collapsed | `booelan` | `false` | 默认是否折叠 | | collapsed | `booelan` | `false` | 默认是否折叠 |
| collapseTitle | [SchemaNode](../../../docs/types/schemanode) | `收起` | 收起的标题 | | collapseTitle | [SchemaNode](../../../docs/types/schemanode) | `收起` | 收起的标题 |
| size | string | `` | 大小，支持 xs、sm、base、lg、xl | | size | string | `` | 大小，支持 xs、sm、base、md、lg |

50
docs/zh-CN/components/steps.md
View File

@ -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}"` 关联上下文变量。 当前处于第几步统一通过 `name` 关联变量名，其他配置可通过 `"${xxx}"` 关联上下文变量。
@ -356,18 +382,18 @@ order: 68
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------- | | -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------- |
| type | `string` | | `"steps"` 指定为 步骤条 渲染器 | | type | `string` | | `"steps"` 指定为 步骤条 渲染器 |
| steps | Array<[step](#step)> | [] | 数组，配置步骤信息 | | steps | Array<[step](#step)> | [] | 数组，配置步骤信息 |
| source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 | | source | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |
| name | `string` | | 关联上下文变量 | | name | `string` | | 关联上下文变量 |
| value | `string` \| `number` | `-` | 设置默认值，注意不支持表达式 | | value | `string` \| `number` | `-` | 设置默认值，注意不支持表达式 |
| status | [StepStatus](#StepStatus) \| {[propName: string]: stepStatus;} | `-` | 状态 | | status | [StepStatus](#StepStatus) \| {[propName: string]: stepStatus;} | `-` | 状态 |
| className | `string` | `-` | 自定义类名 | | className | `string` | `-` | 自定义类名 |
| mode | `horizontal` \| `vertical` | `horizontal` | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | | mode | `horizontal` \| `vertical` \| `simple` | `horizontal` | 指定步骤条模式。目前支持水平（horizontal）、竖直（vertical）和简单（simple）模式 |
| labelPlacement | `horizontal` \| `vertical` | `horizontal` | 指定标签放置位置，默认水平放图标右侧，可选 (vertical) 放图标下方 | | labelPlacement | `horizontal` \| `vertical` | `horizontal` | 指定标签放置位置，默认水平放图标右侧，可选 (vertical) 放图标下方 |
| progressDot | `boolean` | `false` | 点状步骤条 | | progressDot | `boolean` | `false` | 点状步骤条 |
### step ### step

4
packages/amis-core/src/index.tsx
View File

@ -97,6 +97,7 @@ import PopOver from './components/PopOver';
import {FormRenderer} from './renderers/Form'; import {FormRenderer} from './renderers/Form';
import type {FormHorizontal} from './renderers/Form'; import type {FormHorizontal} from './renderers/Form';
import {enableDebug, promisify, replaceText, wrapFetcher} from './utils/index'; import {enableDebug, promisify, replaceText, wrapFetcher} from './utils/index';
import {valueMap as styleMap} from './utils/style-helper';
// @ts-ignore // @ts-ignore
export const version = '__buildVersion'; export const version = '__buildVersion';
@ -174,7 +175,8 @@ export {
FormBaseControl, FormBaseControl,
extendDefaultEnv, extendDefaultEnv,
addRootWrapper, addRootWrapper,
RendererConfig RendererConfig,
styleMap
}; };
export function render( export function render(

5
packages/amis-core/src/renderers/Item.tsx
View File

@ -1456,6 +1456,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
render, render,
formItem: model, formItem: model,
css, css,
themeCss,
id, id,
labelClassName, labelClassName,
descriptionClassName descriptionClassName
@ -1463,7 +1464,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
const mode = this.props.mode || formMode; const mode = this.props.mode || formMode;
insertCustomStyle( insertCustomStyle(
css, themeCss || css,
[ [
{ {
key: 'labelClassName', key: 'labelClassName',
@ -1473,7 +1474,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
id + '-label' id + '-label'
); );
insertCustomStyle( insertCustomStyle(
css, themeCss || css,
[ [
{ {
key: 'descriptionClassName', key: 'descriptionClassName',

96
packages/amis-core/src/utils/style-helper.ts
View File

@ -1,5 +1,6 @@
import {PlainObject} from '../types'; import {PlainObject} from '../types';
import {uuid} from './helper'; import {uuid} from './helper';
import cloneDeep from 'lodash/cloneDeep';
export const valueMap: PlainObject = { export const valueMap: PlainObject = {
'marginTop': 'margin-top', 'marginTop': 'margin-top',
@ -27,6 +28,11 @@ export const valueMap: PlainObject = {
'lineHeight': 'line-height' 'lineHeight': 'line-height'
}; };
export const inheritValueMap: PlainObject = {
background: 'bg-color',
radius: 'border'
};
interface extra { interface extra {
pre?: string; pre?: string;
suf?: string; suf?: string;
@ -55,8 +61,43 @@ export function addStyle(style: string, id: string) {
varStyleTag.innerHTML += style; 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( export function formatStyle(
css: any, themeCss: any,
classNames: { classNames: {
key: string; key: string;
value?: string; value?: string;
@ -67,9 +108,10 @@ export function formatStyle(
disabled?: extra; disabled?: extra;
}; };
}[], }[],
id?: string id?: string,
defaultData?: any
) { ) {
if (!css) { if (!themeCss) {
return {value: '', origin: []}; return {value: '', origin: []};
} }
const res = []; const res = [];
@ -81,7 +123,7 @@ export function formatStyle(
}; };
for (let item of classNames) { for (let item of classNames) {
const body = css[item.key]; const body = themeCss[item.key];
const list = item.value?.split(' '); const list = item.value?.split(' ');
const classNameList: string[] = []; const classNameList: string[] = [];
@ -129,6 +171,7 @@ export function formatStyle(
statusMap.default[key] = body[key]; statusMap.default[key] = body[key];
} }
} }
handleInheritData(statusMap, defaultData);
for (let status in statusMap) { for (let status in statusMap) {
const weights = weightsList[status]; const weights = weightsList[status];
@ -176,12 +219,13 @@ export function formatStyle(
'\n ' '\n '
)}\n}` )}\n}`
}); });
if (['hover', 'active', 'disabled'].includes(status)) { // TODO:切换状态暂时先不改变组件的样式
res.push({ // if (['hover', 'active', 'disabled'].includes(status)) {
className: cx + '.' + status, // res.push({
content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}` // className: cx + '.' + status,
}); // content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}`
} // });
// }
} }
} }
} }
@ -193,7 +237,7 @@ export function formatStyle(
} }
export function insertCustomStyle( export function insertCustomStyle(
css: any, themeCss: any,
classNames: { classNames: {
key: string; key: string;
value?: string; value?: string;
@ -204,11 +248,33 @@ export function insertCustomStyle(
disabled?: extra; disabled?: extra;
}; };
}[], }[],
id?: string id?: string,
defaultData?: any
) { ) {
if (!css) { if (!themeCss) {
return; return;
} }
const {value} = formatStyle(css, classNames, id); const {value} = formatStyle(themeCss, classNames, id, defaultData);
insertStyle(value, id?.replace('u:', '') || uuid()); if (value) {
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;
}
} }

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

39
packages/amis-ui/scss/components/_alert.scss
View File

@ -1,10 +1,13 @@
.#{$ns}Alert { .#{$ns}Alert {
font-size: var(--Alert-fontSize); font-size: var(--Alert-fontSize);
font-weight: var(--alert-base-fontWeight);
box-shadow: var(--Alert-boxShadow); 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: var(--Alert-borderWidth) solid var(--Alert-borderColor);
border-radius: var(--Alert-borderRadius); 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; position: relative;
color: var(--Alert-fontColor); color: var(--Alert-fontColor);
display: flex; display: flex;
@ -13,7 +16,9 @@
align-items: flex-start; align-items: flex-start;
&-has-title { &-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-content {
.#{$ns}Alert-title { .#{$ns}Alert-title {
@ -27,19 +32,19 @@
} }
&-icon { &-icon {
margin-right: var(--gap-sm); margin-right: var(--alert-icon-margin-right);
font-size: var(--fontSizeLg); font-size: var(--alert-icon-size);
} }
&-content { &-content {
flex: 1; flex: 1;
.#{$ns}Alert-title { .#{$ns}Alert-title {
color: var(--text-color); color: var(--alert-base-title-color);
font-size: var(--fontSizeBase); font-size: var(--alert-base-title-fontSize);
font-weight: 500; font-weight: var(--alert-base-title-fontWeight);
line-height: #{px2rem(24px)}; line-height: #{px2rem(24px)};
margin-bottom: #{px2rem(4px)}; margin-bottom: var(--alert-base-title-margin-bottom);
} }
.#{$ns}Alert-desc { .#{$ns}Alert-desc {
@ -74,23 +79,39 @@
color: var(--Alert--danger-color); color: var(--Alert--danger-color);
background: var(--Alert--danger-bg); background: var(--Alert--danger-bg);
border-color: var(--Alert--danger-borderColor); border-color: var(--Alert--danger-borderColor);
.#{$ns}Alert-icon .icon-alert-danger path {
fill: var(--alert-level-danger-icon-color);
}
} }
&--info { &--info {
color: var(--Alert--info-color); color: var(--Alert--info-color);
background: var(--Alert--info-bg); background: var(--Alert--info-bg);
border-color: var(--Alert--info-borderColor); border-color: var(--Alert--info-borderColor);
.#{$ns}Alert-icon .icon-alert-info path {
fill: var(--alert-level-info-icon-color);
}
} }
&--success { &--success {
color: var(--Alert--success-color); color: var(--Alert--success-color);
background: var(--Alert--success-bg); background: var(--Alert--success-bg);
border-color: var(--Alert--success-borderColor); border-color: var(--Alert--success-borderColor);
.#{$ns}Alert-icon .icon-alert-success path {
fill: var(--alert-level-success-icon-color);
}
} }
&--warning { &--warning {
color: var(--Alert--warning-color); color: var(--Alert--warning-color);
background: var(--Alert--warning-bg); background: var(--Alert--warning-bg);
border-color: var(--Alert--warning-borderColor); border-color: var(--Alert--warning-borderColor);
.#{$ns}Alert-icon .icon-alert-warning path {
fill: var(--alert-level-warning-icon-color);
}
} }
} }

7
packages/amis-ui/scss/components/_column-toggler.scss
View File

@ -55,7 +55,9 @@
&-menuItem, &-menuItem,
&-menu > li { &-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; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
height: var(--DropDown-menu-height); height: var(--DropDown-menu-height);
@ -63,9 +65,10 @@
user-select: none; user-select: none;
color: var(--link-color); color: var(--link-color);
text-decoration: var(--link-decoration); text-decoration: var(--link-decoration);
background: var(--table-togglable-bg-color);
&:hover { &:hover {
background: var(--DropDown-menuItem-onHover-bg); background: var(--table-togglable-hover-bg-color);
color: var(--DropDown-menuItem-onHover-color); color: var(--DropDown-menuItem-onHover-color);
} }

60
packages/amis-ui/scss/components/_condition-builder.scss
View File

@ -28,9 +28,9 @@
width: px2rem(20px); width: px2rem(20px);
height: px2rem(20px); height: px2rem(20px);
border-radius: 50%; border-radius: 50%;
background: #d4e5ff; background: var(--conditionBuilder-toolbar-bg-color);
text-align: center; text-align: center;
color: #0832a6; color: var(--conditionBuilder-toolbar-color);
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease; transition: transform 0.3s ease;
@ -39,26 +39,39 @@
} }
&:hover { &:hover {
background: #2468f2; background: var(--conditionBuilder-toolbar-hover-bg-color);
color: $white; color: var(--conditionBuilder-toolbar-hover-color);
} }
} }
.#{$ns}Select { .#{$ns}Select {
font-size: px2rem(12px); font-size: var(--conditionBuilder-toolbar-fontSize);
height: px2rem(28px); height: var(--conditionBuilder-toolbar-height);
width: px2rem(28px); width: var(--conditionBuilder-toolbar-width);
background: #d4e5ff; background: var(--conditionBuilder-toolbar-bg-color);
border: none; border: none;
color: #0832a6; color: var(--conditionBuilder-toolbar-color);
font-weight: 500; font-weight: var(--conditionBuilder-toolbar-fontWeight);
padding: 0; padding: 0;
padding-left: px2rem(8px); text-align: center;
min-height: px2rem(28px); 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 { &:hover {
color: $white; color: var(--conditionBuilder-toolbar-hover-color) !important;
background: #2468f2; 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 { &-arrow {
@ -83,8 +96,8 @@
position: absolute; position: absolute;
top: px2rem(5px); top: px2rem(5px);
bottom: px2rem(5px); bottom: px2rem(5px);
width: 2px; width: var(--conditionBuilder-line-width);
background-color: #d4e5ff; background-color: var(--conditionBuilder-line-bg-color);
} }
} }
@ -193,9 +206,10 @@
&-placeholder { &-placeholder {
color: var(--text--muted-color); color: var(--text--muted-color);
position: relative; position: relative;
padding: 10px; padding: var(--conditionBuilder-body-paddingTop)
background: rgba(0, 0, 0, 0.03); var(--conditionBuilder-body-paddingRight)
border-radius: 5px; var(--conditionBuilder-body-paddingBottom) px2rem(10px);
background: var(--conditionBuilder-body-bg-color);
&.simple { &.simple {
margin-left: 0; margin-left: 0;
} }
@ -276,10 +290,12 @@
} }
&-item { &-item {
background-color: #f7f7f9; background-color: var(--conditionBuilder-body-bg-color);
width: 100%; width: 100%;
padding: px2rem(12px); padding: var(--conditionBuilder-body-paddingTop)
padding-left: px2rem(28px); var(--conditionBuilder-body-paddingRight)
var(--conditionBuilder-body-paddingBottom)
var(--conditionBuilder-body-paddingLeft);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;

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

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

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

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

23
packages/amis-ui/scss/components/_drawer.scss
View File

@ -50,9 +50,10 @@
} }
&-title { &-title {
font-size: var(--Drawer-title-fontSize); font-size: var(--drawer-header-fontSize);
font-weight: 500; font-weight: var(--drawer-header-fontWeight);
color: var(--Drawer-title-fontColor); color: var(--drawer-header-color);
height: var(--drawer-header-height);
} }
&-close { &-close {
@ -83,7 +84,8 @@
} }
&-body { &-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-basis: 0;
flex-grow: 1; flex-grow: 1;
overflow: auto; overflow: auto;
@ -92,6 +94,7 @@
&-footer { &-footer {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
height: var(--drawer-footer-height);
justify-content: flex-end; justify-content: flex-end;
padding: var(--Drawer-footer-padding); padding: var(--Drawer-footer-padding);
border-top: var(--Drawer-content-borderWidth) solid border-top: var(--Drawer-content-borderWidth) solid
@ -140,27 +143,27 @@
} }
.#{$ns}Drawer--xs .#{$ns}Drawer-content { .#{$ns}Drawer--xs .#{$ns}Drawer-content {
width: var(--Drawer-widthXs); width: var(--drawer-size-xs-width);
height: var(--Drawer-widthXs); height: var(--Drawer-widthXs);
} }
.#{$ns}Drawer--sm .#{$ns}Drawer-content { .#{$ns}Drawer--sm .#{$ns}Drawer-content {
width: var(--Drawer-widthSm); width: var(--drawer-size-sm-width);
height: var(--Drawer-widthSm); height: var(--Drawer-widthSm);
} }
.#{$ns}Drawer--md .#{$ns}Drawer-content { .#{$ns}Drawer--md .#{$ns}Drawer-content {
width: var(--Drawer-widthMd); width: var(--drawer-size-md-width);
height: var(--Drawer-widthMd); height: var(--Drawer-widthMd);
} }
.#{$ns}Drawer--lg .#{$ns}Drawer-content { .#{$ns}Drawer--lg .#{$ns}Drawer-content {
width: var(--Drawer-widthLg); width: var(--drawer-size-lg-width);
height: var(--Drawer-widthLg); height: var(--Drawer-widthLg);
} }
.#{$ns}Drawer--xl .#{$ns}Drawer-content { .#{$ns}Drawer--xl .#{$ns}Drawer-content {
width: var(--Drawer-widthXl); width: var(--drawer-size-xl-width);
height: var(--Drawer-widthXl); height: var(--Drawer-widthXl);
} }
@ -283,7 +286,7 @@
justify-content: flex-end; justify-content: flex-end;
.#{$ns}Button { .#{$ns}Button {
margin-left: var(--Drawer-footer-margin); margin-left: var(--drawer-footer-margin-left);
margin-right: var(--gap-xs); margin-right: var(--gap-xs);
} }

15
packages/amis-ui/scss/components/_image-gallery.scss
View File

@ -66,15 +66,15 @@
&-prevBtn, &-prevBtn,
&-nextBtn { &-nextBtn {
> svg { > svg {
width: px2rem(48px); width: var(--image-images-item-size);
height: px2rem(48px); height: var(--image-images-item-size);
} }
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
cursor: pointer; cursor: pointer;
color: #999; color: var(--image-images-item-color);
text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px; text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
&:hover { &:hover {
@ -206,11 +206,14 @@
} }
.#{$ns}ImageGallery-toolbar { .#{$ns}ImageGallery-toolbar {
background-color: var(--white); background-color: var(--image-images-preview-bgColor);
border-radius: px2rem(4px); border-radius: var(--image-images-preview-radius);
display: flex; display: flex;
align-items: flex-start; 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; position: absolute;
bottom: px2rem(20px); bottom: px2rem(20px);
left: 50%; left: 50%;

16
packages/amis-ui/scss/components/_images.scss
View File

@ -7,7 +7,9 @@
&-item { &-item {
display: flex; 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 { &--thumb {
display: inline-block; 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 { &-thumbWrap {
@ -132,12 +137,13 @@
} }
&-caption { &-caption {
font-size: var(--fontSizeSm); font-size: var(--image-image-description-fontSize);
color: var(--image-image-description-color);
} }
&-title { &-title {
font-size: var(--fontSizeBase); font-size: var(--image-image-normal-fontSize);
color: var(--text--loud-color); color: var(--image-image-normal-color);
} }
&-overlay { &-overlay {

23
packages/amis-ui/scss/components/_modal.scss
View File

@ -45,10 +45,10 @@
margin-right: auto; margin-right: auto;
margin-top: var(--Modal-content-startMarginTop); margin-top: var(--Modal-content-startMarginTop);
margin-bottom: var(--gap-md); 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 border: var(--Modal-content-borderWidth) solid
var(--Modal-content-borderColor); var(--Modal-content-borderColor);
border-radius: var(--Modal-content-borderRadius); border-radius: var(--dialog-default-border-radius);
&.in, &.in,
&.out { &.out {
@ -96,9 +96,10 @@
} }
&-title { &-title {
font-size: var(--Modal-title-fontSize); font-size: var(--dialog-header-fontSize);
color: var(--Modal-title-color); color: var(--dialog-header-color);
font-weight: var(--Modal-title-fontWeight); font-weight: var(--dialog-header-fontWeight);
height: var(--dialog-header-height);
} }
&-close { &-close {
@ -147,6 +148,7 @@
&-footer { &-footer {
// @include clearfix(); // @include clearfix();
height: var(--dialog-footer-height);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@ -158,7 +160,7 @@
.#{$ns}Button { .#{$ns}Button {
min-width: var(--Modal-footer-button-width); 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) { @include media-breakpoint-up(sm) {
.#{$ns}Modal-content { .#{$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 { .#{$ns}Modal--sm .#{$ns}Modal-content {
max-width: var(--Modal-widthSm); max-width: var(--dialog-size-sm-width);
} }
.#{$ns}Modal--base .#{$ns}Modal-content { .#{$ns}Modal--base .#{$ns}Modal-content {
@ -193,11 +196,11 @@
} }
.#{$ns}Modal--lg .#{$ns}Modal-content { .#{$ns}Modal--lg .#{$ns}Modal-content {
max-width: var(--Modal-widthLg); max-width: var(--dialog-size-lg-width);
} }
.#{$ns}Modal--xl .#{$ns}Modal-content { .#{$ns}Modal--xl .#{$ns}Modal-content {
max-width: var(--Modal-widthXl); max-width: var(--dialog-size-xl-width);
} }
} }

13
packages/amis-ui/scss/components/_progress.scss
View File

@ -22,7 +22,7 @@
&-inter { &-inter {
height: 100%; height: 100%;
background-color: var(--Progress-bar-backgroundColor); background-color: var(--Progress-line-bg);
overflow: hidden; overflow: hidden;
border-radius: var(--Progress-borderRadius); border-radius: var(--Progress-borderRadius);
} }
@ -34,6 +34,8 @@
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: left;
word-break: normal; word-break: normal;
color: var(--Progress-line-color);
font-size: var(--Progress-line-fontSize);
.icon { .icon {
font-size: 15px; font-size: 15px;
} }
@ -43,10 +45,15 @@
float: left; float: left;
width: 0; width: 0;
height: 8px; height: 8px;
background: var(--primary); background: var(--Progress-line-theme-color);
transition: width var(--animation-duration) ease; transition: width var(--animation-duration) ease;
border-radius: var(--Progress-borderRadius); border-radius: var(--Progress-borderRadius);
&.bg-info {
background: var(--Progress-line-theme-color);
}
&--stripe { &--stripe {
background-image: linear-gradient( background-image: linear-gradient(
45deg, 45deg,
@ -97,6 +104,8 @@
white-space: normal; white-space: normal;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: var(--Progress-circle-color);
font-size: var(--Progress-circle-fontSize);
.icon { .icon {
font-size: 1.2em; font-size: 1.2em;
} }

10
packages/amis-ui/scss/components/_spinner.scss
View File

@ -100,14 +100,16 @@
margin: px2rem(12px) 0 0 0; margin: px2rem(12px) 0 0 0;
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
font-size: var(--spinner-base-fontSize);
color: var(--Spinner-color); color: var(--Spinner-color);
font-weight: var(--spinner-base-fontWeight);
} }
&.#{$ns}Spinner-tip--top { &.#{$ns}Spinner-tip--top {
flex-direction: column-reverse; flex-direction: column-reverse;
.#{$ns}Spinner-tip { .#{$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; flex-direction: row;
.#{$ns}Spinner-tip { .#{$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; flex-direction: column;
.#{$ns}Spinner-tip { .#{$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; flex-direction: row-reverse;
.#{$ns}Spinner-tip { .#{$ns}Spinner-tip {
margin: 0 px2rem(12px) 0 0; margin: 0 var(--spinner-base-tip-size) 0 0;
} }
} }

38
packages/amis-ui/scss/components/_status.scss
View File

@ -7,8 +7,8 @@
align-items: center; align-items: center;
&-label { &-label {
font-size: var(--fontSizeSm); font-size: var(--Status-font-size);
margin-left: var(--gap-xs); margin-left: var(--Status-font-margin);
} }
@keyframes animation-rolling_red { @keyframes animation-rolling_red {
@ -40,8 +40,8 @@
} }
svg.#{$ns}Status-icon { svg.#{$ns}Status-icon {
width: var(--Satus-icon-width); width: var(--Status-icon-width);
height: var(--Satus-icon-height); height: var(--Status-icon-height);
top: 0; top: 0;
} }
@ -56,7 +56,7 @@
&::before { &::before {
content: ''; content: '';
display: inline-block; display: inline-block;
border: 5px solid var(--danger); border: 5px solid var(--Status-pending-beforeColor);
border-radius: 500px; border-radius: 500px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -68,7 +68,7 @@
&::after { &::after {
content: ''; content: '';
display: inline-block; display: inline-block;
border: 5px solid var(--primary); border: 5px solid var(--Status-pending-afterColor);
border-radius: 500px; border-radius: 500px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -80,23 +80,39 @@
} }
&.icon-warning { &.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 { .#{$ns}Status-icon.rolling + &-label {
color: var(--warning); color: var(--Status-warning-color);
} }
.#{$ns}Status-icon.icon-success + &-label { .#{$ns}Status-icon.icon-success + &-label {
color: var(--success); color: var(--Status-success-color);
} }
.#{$ns}Status-icon.icon-fail + &-label { .#{$ns}Status-icon.icon-fail + &-label {
color: var(--danger); color: var(--Status-fail-color);
} }
.#{$ns}Status-icon.icon-warning + &-label { .#{$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);
} }
} }

80
packages/amis-ui/scss/components/_steps.scss
View File

@ -14,11 +14,11 @@
&Icon { &Icon {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
margin-right: px2rem(10px); padding-right: var(--steps-base-icon-paddingRight);
.#{$ns}StepsItem-icon { .#{$ns}StepsItem-icon {
display: inline-block; display: inline-block;
width: px2rem(30px); width: var(--steps-base-icon-size);
height: px2rem(30px); height: var(--steps-base-icon-size);
line-height: px2rem(28px); line-height: px2rem(28px);
border-radius: 50%; border-radius: 50%;
font-size: var(--Steps-icon-fontsize); font-size: var(--Steps-icon-fontsize);
@ -38,7 +38,8 @@
.#{$ns}StepsItem-title { .#{$ns}StepsItem-title {
font-size: var(--Steps-title-fontsize); font-size: var(--Steps-title-fontsize);
color: var(--Steps-title-color); color: var(--Steps-title-color);
padding-right: px2rem(8px); font-weight: var(--steps-base-fontWeight);
padding-right: var(--steps-base-title-paddingRight);
position: relative; position: relative;
display: inline-block; display: inline-block;
> span { > span {
@ -68,9 +69,10 @@
white-space: nowrap; white-space: nowrap;
} }
.#{$ns}StepsItem-subTitle { .#{$ns}StepsItem-subTitle {
padding-left: px2rem(10px); padding-left: var(--steps-base-subTitle-paddingLeft);
font-size: var(--Steps-sub-title-fontsize); font-size: var(--Steps-sub-title-fontsize);
color: var(--Steps-sub-title-color); color: var(--Steps-sub-title-color);
font-weight: var(--steps-base-subTitle-fontWeight);
} }
.#{$ns}StepsItem-description { .#{$ns}StepsItem-description {
max-width: px2rem(140px); max-width: px2rem(140px);
@ -80,6 +82,7 @@
> span { > span {
color: var(--Steps-description-title-color); color: var(--Steps-description-title-color);
font-size: var(--Steps-description-title-fontsize); font-size: var(--Steps-description-title-fontsize);
font-weight: var(--steps-base-des-fontWeight);
} }
} }
} }
@ -277,42 +280,43 @@
&ProgressDot { &ProgressDot {
margin-top: px2rem(13px); margin-top: px2rem(13px);
margin-bottom: px2rem(5px); margin-bottom: px2rem(5px);
width: px2rem(8px); width: var(--steps-dot-icon-size);
height: px2rem(8px); height: var(--steps-dot-icon-size);
margin-left: px2rem(96px); margin-left: px2rem(96px);
border: 1px solid var(--Steps-line-success-bg); border: 1px solid var(--steps-dot-process-bg-color);
border-radius: 100%; border-radius: 100%;
background: var(--steps-dot-finish-bg-color);
} }
} }
} }
.is-finish { .is-finish {
.#{$ns}StepsItem-container { .#{$ns}StepsItem-container {
&Tail:after { &Tail:after {
background: var(--Steps-status-success); background: var(--Steps-line-success-bg);
} }
} }
} }
.is-wait { .is-wait {
.#{$ns}StepsItem-container { .#{$ns}StepsItem-container {
&ProgressDot { &ProgressDot {
background: var(--Steps-line-bg); background: var(--steps-dot-wait-bg-color);
border: 1px solid var(--Steps-line-bg); border: 1px solid var(--steps-dot-wait-bg-color);
} }
} }
} }
.is-error { .is-error {
.#{$ns}StepsItem-container { .#{$ns}StepsItem-container {
&ProgressDot { &ProgressDot {
background: var(--Steps-status-error); background: var(--steps-dot-error-bg-color);
border: 1px solid var(--Steps-status-error); border: 1px solid var(--steps-dot-error-bg-color);
} }
} }
} }
.is-process { .is-process {
.#{$ns}StepsItem-container { .#{$ns}StepsItem-container {
&ProgressDot { &ProgressDot {
border: 1px solid var(--Steps-status-success); border: 1px solid var(--steps-dot-process-bg-color);
background: var(--Steps-status-success); background: var(--steps-dot-process-bg-color);
} }
} }
} }
@ -320,7 +324,7 @@
.#{$ns}StepsItem.is-wait { .#{$ns}StepsItem.is-wait {
.#{$ns}StepsItem-icon { .#{$ns}StepsItem-icon {
background-color: var(--white); background-color: var(--steps-status-wait-bg-color);
color: var(--Steps-bg); color: var(--Steps-bg);
border: 1px solid var(--Steps-bg); border: 1px solid var(--Steps-bg);
} }
@ -333,18 +337,54 @@
.#{$ns}StepsItem.is-error { .#{$ns}StepsItem.is-error {
.#{$ns}StepsItem-icon { .#{$ns}StepsItem-icon {
background-color: var(--Steps-status-error); background-color: var(--Steps-status-error);
color: var(--white); color: var(--steps-status-error-color);
border: 1px solid var(--Steps-status-error); border: 1px solid var(--Steps-status-error);
} }
} }
.#{$ns}StepsItem.is-finish, .#{$ns}StepsItem.is-finish {
.#{$ns}StepsItem.is-process {
.#{$ns}StepsItem-icon { .#{$ns}StepsItem-icon {
background-color: var(--Steps-status-success); background-color: var(--Steps-status-success);
color: var(--white); color: var(--steps-status-finish-color);
border: 1px solid var(--Steps-status-success); 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 { .#{$ns}Steps-mobile.#{$ns}Steps--horizontal {

124
packages/amis-ui/scss/components/_table2.scss
View File

@ -34,30 +34,37 @@
.#{$ns}Table-table { .#{$ns}Table-table {
> thead > tr { > thead > tr {
> th { > th {
padding: var(--TableCell-paddingY-large) padding: var(--table-size-large-paddingTop)
var(--TableCell-paddingX-large); var(--table-size-large-paddingRight)
var(--table-size-large-paddingBottom)
var(--table-size-large-paddingLeft);
} }
} }
> tbody > tr { > tbody > tr {
> td, > td,
> th { > th {
padding: var(--TableCell-paddingY-large) padding: var(--table-size-large-paddingTop)
var(--TableCell-paddingX-large); var(--table-size-large-paddingRight)
var(--table-size-large-paddingBottom)
var(--table-size-large-paddingLeft);
} }
} }
> tfoot > tr { > tfoot > tr {
> td { > td {
padding: var(--TableCell-paddingY-large) padding: var(--table-size-large-paddingTop)
var(--TableCell-paddingX-large); var(--table-size-large-paddingRight)
var(--table-size-large-paddingBottom)
var(--table-size-large-paddingLeft);
} }
} }
} }
.#{$ns}TableCell-filterBtn { .#{$ns}TableCell-filterBtn {
right: calc( 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 { .#{$ns}Table-table {
> thead > tr { > thead > tr {
> th { > th {
padding: var(--TableCell-paddingY-small) padding: var(--table-size-small-paddingTop)
var(--TableCell-paddingX-small); var(--table-size-small-paddingRight)
var(--table-size-small-paddingBottom)
var(--table-size-small-paddingLeft);
} }
} }
> tbody > tr { > tbody > tr {
> td, > td,
> th { > th {
padding: var(--TableCell-paddingY-small) padding: var(--table-size-small-paddingTop)
var(--TableCell-paddingX-small); var(--table-size-small-paddingRight)
var(--table-size-small-paddingBottom)
var(--table-size-small-paddingLeft);
} }
} }
> tfoot > tr { > tfoot > tr {
> td { > td {
padding: var(--TableCell-paddingY-small) padding: var(--table-size-small-paddingTop)
var(--TableCell-paddingX-small); var(--table-size-small-paddingRight)
var(--table-size-small-paddingBottom)
var(--table-size-small-paddingLeft);
} }
} }
} }
.#{$ns}TableCell-filterBtn { .#{$ns}TableCell-filterBtn {
right: calc( 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-title,
.#{$ns}Table-footer { .#{$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); background: var(--Table-heading-bg);
padding: calc( padding: var(--table-title-paddingTop) var(--table-title-paddingRight)
( var(--table-title-paddingBottom) var(--table-title-paddingLeft);
var(--Table-heading-height) - var(--Table-fontSize) *
var(--lineHeightBase)
) / 2
)
var(--gap-sm);
} }
.#{$ns}Table-header { .#{$ns}Table-header {
@ -154,6 +167,8 @@
margin-bottom: 0; margin-bottom: 0;
font-size: var(--Table-fontSize); font-size: var(--Table-fontSize);
color: var(--Table-color); color: var(--Table-color);
font-weight: var(--table-body-fontWeight);
line-height: var(--table-body-lineHeight);
background: var(--Table-bg); background: var(--Table-bg);
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
@ -179,7 +194,8 @@
> thead > tr { > thead > tr {
> th { > th {
background: var(--Table-thead-bg); 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 { &:first-child {
padding-left: var(--TableCell--edge-paddingX-default); padding-left: var(--TableCell--edge-paddingX-default);
@ -200,7 +216,8 @@
font-size: var(--Table-thead-fontSize); font-size: var(--Table-thead-fontSize);
color: var(--Table-thead-color); color: var(--Table-thead-color);
font-weight: var(--fontWeightNormal); font-weight: var(--table-header-fontWeight);
line-height: var(--table-header-lineHeight);
white-space: nowrap; white-space: nowrap;
.#{$ns}Remark { .#{$ns}Remark {
@ -232,7 +249,8 @@
> th { > th {
background: var(--Table-thead-bg); background: var(--Table-thead-bg);
color: var(--Table-thead-color); color: var(--Table-thead-color);
font-weight: var(--fontWeightNormal); font-weight: var(--table-header-fontWeight);
line-height: var(--table-header-lineHeight);
white-space: nowrap; white-space: nowrap;
border-right: var(--Table-thead-borderWidth) solid border-right: var(--Table-thead-borderWidth) solid
var(--Table-thead-borderColor); var(--Table-thead-borderColor);
@ -240,7 +258,8 @@
> td, > td,
> th { > th {
padding: var(--TableCell-paddingY-default) var(--TableCell-paddingX); padding: var(--table-paddingTop) var(--table-paddingRight)
var(--table-paddingBottom) var(--table-paddingLeft);
&:first-child { &:first-child {
padding-left: var(--TableCell--edge-paddingX-default); padding-left: var(--TableCell--edge-paddingX-default);
@ -272,7 +291,7 @@
} }
@if var(--Table-strip-bg) !=transparent { @if var(--Table-strip-bg) !=transparent {
background: transparent; background: var(--table-body-bg-color);
&.#{$ns}Table-tr--odd { &.#{$ns}Table-tr--odd {
background: var(--Table-strip-bg); background: var(--Table-strip-bg);
@ -318,7 +337,8 @@
&.is-summary { &.is-summary {
background: var(--Table-thead-bg); background: var(--Table-thead-bg);
color: var(--Table-thead-color); color: var(--Table-thead-color);
font-weight: var(--fontWeightNormal); font-weight: var(--table-header-fontWeight);
line-height: var(--table-header-lineHeight);
} }
&.bg-light { &.bg-light {
@ -562,7 +582,8 @@
border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
> td { > 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); background: var(--Table-thead-bg);
} }
} }
@ -671,7 +692,8 @@
.#{$ns}TableCell-sortBtn { .#{$ns}TableCell-sortBtn {
cursor: pointer; cursor: pointer;
width: var(--TableCell-sortBtn-width); width: var(--TableCell-sortBtn-width);
height: var(--gap-md); height: 100%;
vertical-align: middle;
position: static; position: static;
display: inline-block; display: inline-block;
transform: none; transform: none;
@ -682,9 +704,9 @@
color: var(--icon-onHover-color); color: var(--icon-onHover-color);
} }
&--up > svg, &--up svg,
&--down > svg, &--down svg,
&--default > svg { &--default svg {
color: inherit; color: inherit;
width: 13px; width: 13px;
height: 13px; height: 13px;
@ -704,9 +726,9 @@
&--default { &--default {
&.is-active { &.is-active {
color: var(--text--muted-color); color: var(--table-icon-color);
&:hover { &:hover {
color: var(--text-color); color: var(--table-icon-hover-color);
} }
} }
} }
@ -720,16 +742,16 @@
.#{$ns}TableCell-searchBtn { .#{$ns}TableCell-searchBtn {
cursor: pointer; cursor: pointer;
color: var(--text--muted-color); color: var(--table-icon-color);
margin-left: var(--TableCell-icon-gap); margin-left: var(--TableCell-icon-gap);
svg.icon { svg {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
&:hover { &:hover {
color: var(--text-color); color: var(--table-icon-hover-color);
} }
&.is-active { &.is-active {
color: var(--TableCell-searchBtn--onActive-color); color: var(--TableCell-searchBtn--onActive-color);
@ -749,19 +771,21 @@
.#{$ns}TableCell-filterBtn { .#{$ns}TableCell-filterBtn {
cursor: pointer; cursor: pointer;
width: var(--TableCell-filterBtn-width); width: var(--TableCell-filterBtn-width);
height: 100%;
vertical-align: middle;
position: static; position: static;
display: inline-block; display: inline-block;
transform: none; transform: none;
color: var(--text--muted-color); color: var(--table-icon-color);
margin-left: var(--TableCell-icon-gap); margin-left: var(--TableCell-icon-gap);
svg.icon { svg {
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
&:hover { &:hover {
color: var(--text-color); color: var(--table-icon-hover-color);
} }
&.is-active { &.is-active {
@ -886,6 +910,26 @@
top: 0; top: 0;
left: 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 { .#{$ns}InputTable-toolbar {

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

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

29
packages/amis-ui/scss/components/_timeline.scss
View File

@ -70,14 +70,16 @@
.#{$ns}TimelineItem-time { .#{$ns}TimelineItem-time {
color: var(--TimelineItem--text-secondary-color); 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); margin-bottom: var(--TimelineItem--content-time-margin-bottom);
} }
.#{$ns}TimelineItem-title { .#{$ns}TimelineItem-title {
display: flex; display: flex;
color: var(--TimelineItem--text-primary-color); 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); margin-bottom: var(--TimelineItem--content-title-margin-bottom);
.#{$ns}PlainField { .#{$ns}PlainField {
padding-right: var(--TimelineItem-custem-time-padding-right); padding-right: var(--TimelineItem-custem-time-padding-right);
@ -92,12 +94,13 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
font-size: var(--Timeline--font-size); font-size: var(--Timeline-detail-label-fontSize);
color: var(--TimelineItem--detail-button-color); color: var(--TimelineItem--detail-button-color);
font-weight: var(--Timeline-detail-label-fontWeight);
margin-bottom: var(--TimelineItem--detail-button-margin-bottom); margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
} }
.#{$ns}TimelineItem-detail-arrow { .#{$ns}TimelineItem-detail-arrow {
color: var(--Timeline-detail-icon-color);
width: var(--TimelineItem-detail-arrow-width); width: var(--TimelineItem-detail-arrow-width);
height: var(--TimelineItem-detail-arrow-width); height: var(--TimelineItem-detail-arrow-width);
} }
@ -110,7 +113,9 @@
display: block; display: block;
border-radius: var(--Timeline-visible-border-radius); border-radius: var(--Timeline-visible-border-radius);
max-width: var(--TimelineItem-detail-visible-max-width); 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); padding: var(--TimelineItem-detail-visible-padding);
box-shadow: var(--TimelineItem-detail-visible-shadow); box-shadow: var(--TimelineItem-detail-visible-shadow);
} }
@ -212,13 +217,15 @@
.#{$ns}TimelineItem-time { .#{$ns}TimelineItem-time {
color: var(--TimelineItem--text-secondary-color); 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); margin-bottom: var(--TimelineItem--content-time-margin-bottom);
} }
.#{$ns}TimelineItem-title { .#{$ns}TimelineItem-title {
color: var(--TimelineItem--text-primary-color); 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); margin-bottom: var(--TimelineItem--content-title-margin-bottom);
} }
@ -227,12 +234,14 @@
display: flex; display: flex;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
font-size: var(--Timeline--font-size); font-size: var(--Timeline-detail-label-fontSize);
color: var(--TimelineItem--detail-button-color); color: var(--TimelineItem--detail-button-color);
font-weight: var(--Timeline-detail-label-fontWeight);
margin-bottom: var(--TimelineItem--detail-button-margin-bottom); margin-bottom: var(--TimelineItem--detail-button-margin-bottom);
} }
.#{$ns}TimelineItem-detail-arrow { .#{$ns}TimelineItem-detail-arrow {
color: var(--Timeline-detail-icon-color);
width: var(--TimelineItem-detail-arrow-width); width: var(--TimelineItem-detail-arrow-width);
height: var(--TimelineItem-detail-arrow-width); height: var(--TimelineItem-detail-arrow-width);
} }
@ -245,7 +254,9 @@
display: block; display: block;
border-radius: var(--Timeline-visible-border-radius); border-radius: var(--Timeline-visible-border-radius);
max-width: var(--TimelineItem-detail-visible-max-width); 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); padding: var(--TimelineItem-detail-visible-padding);
box-shadow: var(--TimelineItem-detail-visible-shadow); box-shadow: var(--TimelineItem-detail-visible-shadow);
} }

72
packages/amis-ui/scss/components/_toast.scss
View File

@ -69,10 +69,13 @@
pointer-events: auto; pointer-events: auto;
margin-bottom: var(--gap-xs); 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); 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; border: var(--Toast-border-width) solid;
color: var(--Toast-color); color: var(--Toast-color);
position: relative; position: relative;
@ -133,7 +136,6 @@
} }
.#{$ns}Toast-body { .#{$ns}Toast-body {
font-size: var(--fontSizeSm);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
white-space: pre-wrap; white-space: pre-wrap;
@ -166,26 +168,80 @@
// colors // colors
&--error { &--error {
color: var(--Toast--danger-color); color: var(--Toast--danger-color);
border-color: var(--Toast--danger-borderColor);
background: var(--Toast--danger-bgColor); 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 { &--warning {
color: var(--Toast--warning-color); color: var(--Toast--warning-color);
border-color: var(--Toast--warning-borderColor);
background: var(--Toast--warning-bgColor); 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 { &--info {
color: var(--Toast--info-color); 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); 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 { &--success {
color: var(--Toast--success-color); 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); 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 // positions

14
packages/amis-ui/scss/components/_wizard.scss
View File

@ -56,11 +56,11 @@
// background: var(--dark); // background: var(--dark);
// } // }
&.is-active { &.is-active {
color: var(--white); color: var(--Wizard-badge-onActive-color);
background: var(--Wizard-badge-onActive-backgroundColor); background: var(--Wizard-badge-onActive-backgroundColor);
} }
&.is-complete { &.is-complete {
color: var(--white); color: var(--Wizard-badge-onComplete-color);
background: var(--Wizard-badge-onComplete-backgroundColor); background: var(--Wizard-badge-onComplete-backgroundColor);
} }
} }
@ -84,7 +84,7 @@
float: left; float: left;
padding: 0 var(--gap-md) 0 px2rem(25px); padding: 0 var(--gap-md) 0 px2rem(25px);
margin: 0; margin: 0;
color: #999999; color: var(--Wizard-step-color);
cursor: pointer; cursor: pointer;
height: var(--Wizard-steps-height); height: var(--Wizard-steps-height);
line-height: var(--Wizard-steps-height); line-height: var(--Wizard-steps-height);
@ -127,7 +127,7 @@
&.is-active { &.is-active {
color: var(--Wizard-steps-li-onActive-color); color: var(--Wizard-steps-li-onActive-color);
background: #fff; background: var(--Wizard-steps-li-onActive-bg);
} }
&.is-active:after { &.is-active:after {
@ -160,7 +160,7 @@
float: left; float: left;
padding: 0 var(--gap-md) 0 px2rem(25px); padding: 0 var(--gap-md) 0 px2rem(25px);
margin: 0; margin: 0;
color: #999999; color: var(--Wizard-step-color);
cursor: default; cursor: default;
height: var(--Wizard-steps-height); height: var(--Wizard-steps-height);
line-height: var(--Wizard-steps-height); line-height: var(--Wizard-steps-height);
@ -182,6 +182,7 @@
&:after { &:after {
right: px2rem(-9px); right: px2rem(-9px);
color: var(--Wizard-after-color);
border-left-color: var(--Wizard-steps-bg); border-left-color: var(--Wizard-steps-bg);
z-index: 2; z-index: 2;
} }
@ -192,6 +193,7 @@
} }
&.is-active:after { &.is-active:after {
color: var(--Wizard-after-onActive-color);
border-left-color: var(--Wizard-steps-li-onActive-arrow-bg); border-left-color: var(--Wizard-steps-li-onActive-arrow-bg);
} }
@ -248,7 +250,7 @@
padding-left: var(--gap-md); padding-left: var(--gap-md);
&.is-active { &.is-active {
background: #fff; background: var(--Wizard-steps-li-onActive-bg);
} }
} }
} }

46
packages/amis-ui/scss/components/form/_combo.scss
View File

@ -32,15 +32,15 @@
var(--Combo-addBtn-fontSize), var(--Combo-addBtn-fontSize),
var(--Combo-addBtn-fontWeight), var(--Combo-addBtn-fontWeight),
var(--Combo-addBtn-lineHeight), var(--Combo-addBtn-lineHeight),
var(--Combo-addBtn-borderRadius), var(--combo-multi-addBtn-top-left-border-radius),
var(--Combo-addBtn-borderRadius), var(--combo-multi-addBtn-top-right-border-radius),
var(--Combo-addBtn-borderRadius), var(--combo-multi-addBtn-bottom-right-border-radius),
var(--Combo-addBtn-borderRadius), var(--combo-multi-addBtn-bottom-left-border-radius),
var(--Combo-addBtn-height), var(--Combo-addBtn-height),
var(--Combo-addBtn-paddingY), var(--combo-multi-addBtn-paddingTop),
var(--Combo-addBtn-paddingY), var(--combo-multi-addBtn-paddingBottom),
var(--Combo-addBtn-paddingX), var(--combo-multi-addBtn-paddingLeft),
var(--Combo-addBtn-paddingX) var(--combo-multi-addBtn-paddingRight)
); );
@include button-variant( @include button-variant(
@ -98,16 +98,16 @@
} }
&-delBtn { &-delBtn {
color: var(--icon-color); color: var(--combo-multi-delBtn-color);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--icon-onHover-color); color: var(--combo-multi-delBtn-hover-color);
} }
} }
&-tab-delBtn { &-tab-delBtn {
color: var(--icon-color); color: var(--combo-multi-delBtn-color);
cursor: pointer; cursor: pointer;
margin-left: var(--gap-sm); margin-left: var(--gap-sm);
display: inline-block; display: inline-block;
@ -118,7 +118,7 @@
} }
&:hover { &:hover {
color: var(--icon-onHover-color); color: var(--combo-multi-delBtn-hover-color);
} }
} }
@ -137,7 +137,7 @@
} }
&-item { &-item {
background: var(--Page-main-bg); background: var(--combo-bg-color);
} }
&-itemDrager { &-itemDrager {
@ -239,10 +239,13 @@
// 不严格点会命中 combo 里面嵌套 combo 的情况，so sad. // 不严格点会命中 combo 里面嵌套 combo 的情况，so sad.
> .#{$ns}Combo-item, > .#{$ns}Combo-item,
> .#{$ns}Combo-items > .#{$ns}Combo-item { > .#{$ns}Combo-items > .#{$ns}Combo-item {
border: var(--Combo--vertical-item-borderWidth) dashed border-color: var(--Combo--vertical-item-borderColor);
var(--Combo--vertical-item-borderColor); border-width: var(--Combo--vertical-item-borderWidth);
padding: var(--Combo--vertical-item-paddingY) border-style: var(--Combo--vertical-item-borderStyle);
var(--Combo--vertical-item-paddingX); 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; position: relative;
} }
@ -260,7 +263,14 @@
&:not(.is-disabled) > .#{$ns}Combo-item:hover, &:not(.is-disabled) > .#{$ns}Combo-item:hover,
&:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover { &:not(.is-disabled) > .#{$ns}Combo-items > .#{$ns}Combo-item:hover {
border-color: var(--Combo--vertical-item-onHover-borderColor); 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-delBtn,
> .#{$ns}Combo-delController { > .#{$ns}Combo-delController {

90
packages/amis-ui/scss/components/form/_fieldset.scss
View File

@ -33,14 +33,15 @@
fieldset.#{$ns}Collapse { fieldset.#{$ns}Collapse {
border: none; border: none;
> legend { > legend {
font-weight: var(--fontWeightNormal); border-left: var(--fieldSet-legend-border-color)
padding: var(--gap-xs) 0; var(--fieldSet-legend-border-width) solid;
font-size: var(--fontSizeMd); height: var(--fieldSet-legend-height);
color: var(--text--loud-color); line-height: var(--fieldSet-legend-height);
border-left: var(--primary) px2rem(4px) solid; margin: var(--fieldSet-legend-marginTop) var(--fieldSet-legend-marginRight)
line-height: 1.2; var(--fieldSet-legend-marginBottom) var(--fieldSet-legend-marginLeft);
margin: var(--gap-base) 0; padding: var(--fieldSet-legend-paddingTop)
padding: 0 0 0 14px; var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom)
var(--fieldSet-legend-paddingLeft);
cursor: pointer; cursor: pointer;
border-bottom: none !important; border-bottom: none !important;
background: transparent; background: transparent;
@ -48,6 +49,13 @@ fieldset.#{$ns}Collapse {
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
// width: 100%; // width: 100%;
.#{$ns}TplField {
font-weight: var(--fieldSet-legend-fontWeight);
font-size: var(--fieldSet-legend-fontSize);
color: var(--fieldSet-legend-color);
}
&:hover { &:hover {
background: transparent; background: transparent;
} }
@ -55,103 +63,129 @@ fieldset.#{$ns}Collapse {
&--xs { &--xs {
@extend %fieldSetBase; @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 { > legend {
left: 5px; left: var(--fieldSet-size-xs-paddingLeft);
font-size: var(--fontSizeXs);
padding: 0 3px; padding: 0 3px;
margin: 0 0 0 -3px; margin: 0 0 0 -3px;
.#{$ns}TplField {
font-size: var(--fieldSet-size-xs-fontSize);
}
&:hover { &:hover {
background-color: var(--white); background-color: var(--white);
} }
} }
&:after { &:after {
top: 6px; top: calc(var(--fieldSet-size-xs-fontSize) / 2);
} }
} }
&--sm { &--sm {
@extend %fieldSetBase; @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 { > legend {
left: 10px; left: var(--fieldSet-size-sm-paddingLeft);
font-size: var(--fontSizeSm);
padding: 0 5px; padding: 0 5px;
margin: 0 0 0 -5px; margin: 0 0 0 -5px;
.#{$ns}TplField {
font-size: var(--fieldSet-size-sm-fontSize);
}
&:hover { &:hover {
background-color: var(--white); background-color: var(--white);
} }
} }
&:after { &:after {
top: 6px; top: calc(var(--fieldSet-size-sm-fontSize) / 2);
} }
} }
&--base { &--base {
@extend %fieldSetBase; @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 { > legend {
left: var(--gap-md); left: var(--fieldSet-size-base-paddingLeft);
font-size: var(--fontSizeBase);
padding: 0 8px; padding: 0 8px;
margin: 0 0 0 -8px; margin: 0 0 0 -8px;
.#{$ns}TplField {
font-size: var(--fieldSet-size-base-fontSize);
}
&:hover { &:hover {
background-color: var(--white); background-color: var(--white);
} }
} }
&:after { &:after {
top: 7px; top: calc(var(--fieldSet-size-base-fontSize) / 2);
} }
} }
&--md { &--md {
@extend %fieldSetBase; @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 { > legend {
left: 20px; left: var(--fieldSet-size-md-paddingLeft);
font-size: var(--fontSizeMd);
padding: 0 10px; padding: 0 10px;
margin: 0 0 0 -10px; margin: 0 0 0 -10px;
.#{$ns}TplField {
font-size: var(--fieldSet-size-md-fontSize);
}
&:hover { &:hover {
background-color: var(--white); background-color: var(--white);
} }
} }
&:after { &:after {
top: 7px; top: calc(var(--fieldSet-size-md-fontSize) / 2);
} }
} }
&--lg { &--lg {
@extend %fieldSetBase; @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 { > legend {
left: 30px; left: var(--fieldSet-size-lg-paddingLeft);
font-size: var(--fontSizeLg);
padding: 0 var(--gap-md); padding: 0 var(--gap-md);
margin: 0 0 0 calc(var(--gap-md) * -1); margin: 0 0 0 calc(var(--gap-md) * -1);
.#{$ns}TplField {
font-size: var(--fieldSet-size-lg-fontSize);
}
&:hover { &:hover {
background-color: var(--white); background-color: var(--white);
} }
} }
&:after { &:after {
top: 9px; top: calc(var(--fieldSet-size-lg-fontSize) / 2);
} }
} }
} }

5
packages/amis-ui/scss/components/form/_icon-select.scss
View File

@ -17,6 +17,11 @@
margin-left: var(--IconSelect-base-margin); margin-left: var(--IconSelect-base-margin);
} }
&-func {
display: inline-block;
margin-left: 12px;
}
&-content { &-content {
display: flex; display: flex;
position: relative; position: relative;

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

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

116
packages/amis-ui/scss/components/form/_rich-text.scss
View File

@ -13,7 +13,22 @@
min-height: px2rem(200px); min-height: px2rem(200px);
height: auto; 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%; width: 100%;
@include input-border(); @include input-border();
@ -36,41 +51,42 @@
border: none; border: none;
} }
.fr-toolbar .fr-command.fr-btn, &:hover {
.fr-popup .fr-command.fr-btn { border-width: var(--inputRichText-hover-top-border-width)
color: var(--Button--default-color); var(--inputRichText-hover-right-border-width)
} var(--inputRichText-hover-bottom-border-width)
var(--inputRichText-hover-left-border-width);
.fr-toolbar .fr-command.fr-btn.fr-active, border-style: var(--inputRichText-hover-top-border-style)
.fr-popup .fr-command.fr-btn.fr-active { var(--inputRichText-hover-right-border-style)
color: var(--info); var(--inputRichText-hover-bottom-border-style)
background: var(--Form-select-onHover-bg); var(--inputRichText-hover-left-border-style);
} border-color: var(--inputRichText-hover-top-border-color)
var(--inputRichText-hover-right-border-color)
.fr-desktop .fr-command:hover, var(--inputRichText-hover-bottom-border-color)
.fr-desktop .fr-command:focus { var(--inputRichText-hover-left-border-color);
background: var(--Form-select-onHover-bg); border-radius: var(--inputRichText-hover-top-left-border-radius)
} var(--inputRichText-hover-top-right-border-radius)
var(--inputRichText-hover-bottom-right-border-radius)
.fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, var(--inputRichText-hover-bottom-left-border-radius);
.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;
} }
&.is-focused { &.is-focused {
border: var(--Form-input-borderWidth) solid border-width: var(--inputRichText-active-top-border-width)
var(--Form-input-onFocused-borderColor); 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 { .fr-box.fr-basic .fr-element {
@ -82,12 +98,42 @@
} }
&.is-disabled { &.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; pointer-events: none;
opacity: 0.6; opacity: 0.6;
.fr-box.fr-basic.fr-top .fr-wrapper { .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);
} }
} }

50
packages/amis-ui/scss/components/form/_tag.scss
View File

@ -63,14 +63,41 @@
@include button-variant( @include button-variant(
var(--TagControl-sugBtn-bg), var(--TagControl-sugBtn-bg),
var(--TagControl-sugBtn-border),
var(--TagControl-sugBtn-color), 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-bg),
var(--TagControl-sugBtn-onHover-border),
var(--TagControl-sugBtn-onHover-color), 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-bg),
var(--TagControl-sugBtn-onActive-color),
var(--TagControl-sugBtn-onActive-border), 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 { &.is-disabled {
@ -91,4 +118,21 @@
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-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);
}
}
} }

7
packages/amis-ui/scss/components/form/_text.scss
View File

@ -46,6 +46,13 @@
background: var(--input-default-default-bg-color); background: var(--input-default-default-bg-color);
height: var(--input-size-default-height); 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,
&.hover { &.hover {
border-width: var(--input-default-hover-top-border-width) border-width: var(--input-default-hover-top-border-width)

30
packages/amis-ui/scss/components/form/_transfer.scss
View File

@ -18,7 +18,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
background: var(--transfer-base-title-bg); 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); line-height: var(--transfer-base-title-lineHeight);
font-size: var(--transfer-base-title-fontSize); font-size: var(--transfer-base-title-fontSize);
font-weight: var(--transfer-base-title-fontWeight); font-weight: var(--transfer-base-title-fontWeight);
@ -27,10 +27,6 @@
var(--transfer-base-header-paddingRight) var(--transfer-base-header-paddingRight)
var(--transfer-base-header-paddingBottom) var(--transfer-base-header-paddingBottom)
var(--transfer-base-header-paddingLeft); 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; flex-direction: row;
width: 100%; width: 100%;
@ -80,10 +76,6 @@
var(--transfer-base-body-paddingRight) var(--transfer-base-body-paddingRight)
var(--transfer-base-body-paddingBottom) var(--transfer-base-body-paddingBottom)
var(--transfer-base-body-paddingLeft); 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%; width: 100%;
} }
@ -101,7 +93,7 @@
font-size: var(--transfer-base-content-fontSize); font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight); font-weight: var(--transfer-base-content-fontWeight);
color: var(--transfer-base-content-font-color); color: var(--transfer-base-content-color);
} }
.#{$ns}ChainedSelection-item { .#{$ns}ChainedSelection-item {
@ -115,7 +107,7 @@
font-size: var(--transfer-base-content-fontSize); font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight); 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 { .#{$ns}GroupedSelection-group > .#{$ns}GroupedSelection-itemLabel {
@ -123,7 +115,7 @@
font-weight: var(--transfer-group-font-weight); font-weight: var(--transfer-group-font-weight);
line-height: var(--transfer-group-font-lineHeight); line-height: var(--transfer-group-font-lineHeight);
font-family: var(--transfer-group-font-family); font-family: var(--transfer-group-font-family);
color: var(--transfer-group-font-color); color: var(--transfer-group-color);
} }
&-select > .#{$ns}ChainedSelection { &-select > .#{$ns}ChainedSelection {
@ -197,14 +189,12 @@
padding: var(--transfer-search-paddingTop) padding: var(--transfer-search-paddingTop)
var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom) var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom)
var(--transfer-search-paddingLeft); var(--transfer-search-paddingLeft);
margin: var(--transfer-search-marginTop) var(--transfer-search-marginRight)
var(--transfer-search-marginBottom) var(--transfer-search-marginLeft);
width: 100%; width: 100%;
.#{$ns}InputBox { .#{$ns}InputBox {
font-size: var(--transfer-search-fontSize); font-size: var(--transfer-search-fontSize);
font-weight: var(--transfer-search-fontWeight); font-weight: var(--transfer-search-fontWeight);
line-height: var(--transfer-search-lineHeight); 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) border-width: var(--transfer-search-top-border-width)
var(--transfer-search-right-border-width) var(--transfer-search-right-border-width)
var(--transfer-search-bottom-border-width) var(--transfer-search-bottom-border-width)
@ -226,10 +216,6 @@
var(--transfer-search-input-paddingRight) var(--transfer-search-input-paddingRight)
var(--transfer-search-input-paddingBottom) var(--transfer-search-input-paddingBottom)
var(--transfer-search-input-paddingLeft); 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 { &:hover {
border-color: var(--transfer-search-border-hover-color); border-color: var(--transfer-search-border-hover-color);
@ -240,7 +226,7 @@
} }
input { input {
color: var(--transfer-search-font-color); color: var(--transfer-search-color);
font-size: var(--transfer-search-fontSize); font-size: var(--transfer-search-fontSize);
font-weight: var(--transfer-search-fontWeight); font-weight: var(--transfer-search-fontWeight);
line-height: var(--transfer-search-lineHeight); line-height: var(--transfer-search-lineHeight);
@ -327,7 +313,7 @@
font-size: var(--transfer-base-content-fontSize); font-size: var(--transfer-base-content-fontSize);
font-weight: var(--transfer-base-content-fontWeight); 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-paddingBottom)
var(--transfer-table-header-paddingLeft); var(--transfer-table-header-paddingLeft);
background: var(--transfer-base-title-bg); 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); line-height: var(--transfer-base-title-lineHeight);
font-size: var(--transfer-base-content-fontSize); font-size: var(--transfer-base-content-fontSize);

66
packages/amis-ui/scss/components/form/_tree.scss
View File

@ -1,5 +1,5 @@
.#{$ns}TreeControl { .#{$ns}TreeControl {
border: 1px solid var(--Form-input-borderColor); border: 1px solid var(--inputTree-border-color);
padding: 6px 12px; padding: 6px 12px;
border-radius: 2px; border-radius: 2px;
max-height: var(--Tree-max-height); max-height: var(--Tree-max-height);
@ -54,6 +54,15 @@
position: relative; position: relative;
> div { > div {
color: var(--inputTree-base-default-color);
&:hover {
color: var(--inputTree-base-hover-color);
}
&:active {
color: var(--inputTree-base-active-color);
}
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -76,6 +85,12 @@
&.is-disabled { &.is-disabled {
pointer-events: none; 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 { &.is-draggable {
@ -142,6 +157,10 @@
} }
} }
} }
.#{$ns}Checkbox {
margin-right: var(--inputTree-checkboxes-size-marginRight);
}
} }
&-item { &-item {
@ -157,7 +176,7 @@
} }
} }
.is-disabled { .is-disabled {
color: var(--text--muted-color); color: var(--inputTree-item-disabled-color);
background: none; background: none;
&:hover { &:hover {
background: none; background: none;
@ -215,20 +234,20 @@
width: 100%; width: 100%;
outline: none; outline: none;
background: var(--Form-input-bg); background: var(--Form-input-bg);
border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border: var(--Form-input-borderWidth) solid var(--inputTree-border-color);
border-radius: var(--Form-input-borderRadius); border-radius: var(--inputTree-border-radius);
line-height: var(--Form-input-lineHeight); line-height: var(--inputTree-input-lineHeight);
padding: calc( padding: calc(
( (
var(--Tree-inputHeight) - var(--Form-input-lineHeight) * var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) *
var(--Form-input-fontSize) - #{px2rem(2px)} var(--inputTree-fontSize) - #{px2rem(2px)}
) / 2 ) / 2
) )
var(--Form-input-paddingX); var(--Form-input-paddingX);
font-size: var(--Form-input-fontSize); font-size: var(--inputTree-fontSize);
&::placeholder { &::placeholder {
color: var(--Form-input-placeholderColor); color: var(--inputTree-placeholder-color);
user-select: none; user-select: none;
} }
@ -252,7 +271,7 @@
&.is-disabled { &.is-disabled {
pointer-events: none; pointer-events: none;
color: var(--text--muted-color); color: var(--inputTree-item-disabled-color);
} }
> svg { > svg {
@ -268,7 +287,7 @@
cursor: pointer; cursor: pointer;
width: var(--Tree-itemArrowWidth); width: var(--Tree-itemArrowWidth);
display: inline-flex; display: inline-flex;
margin-right: var(--Tree-icon-margin-right); margin-right: var(--inputTree-base-size-expandMarginRight);
// &:before { // &:before {
// font-style: normal; // font-style: normal;
@ -281,7 +300,15 @@
display: block; display: block;
transition: transform var(--animation-duration); transition: transform var(--animation-duration);
top: 0; 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 { &.is-folded > svg {
@ -305,7 +332,7 @@
&-itemIcon { &-itemIcon {
display: inline-flex; display: inline-flex;
margin-right: var(--Tree-icon-margin-right); margin-right: var(--inputTree-base-size-nodeMarginRight);
} }
&-rootIcon, &-rootIcon,
@ -322,19 +349,26 @@
cursor: pointer; cursor: pointer;
flex: 1 auto; flex: 1 auto;
display: inline-block; display: inline-block;
color: var(--select-tree-color); color: var(--inputTree-base-default-color);
font-size: var(--select-tree-fontSize); font-size: var(--select-tree-fontSize);
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&:hover {
color: var(--inputTree-base-hover-color);
}
&:active {
color: var(--inputTree-base-active-color);
}
} }
.is-disabled &-itemText { .is-disabled &-itemText {
color: var(--text--muted-color); color: var(--inputTree-base-disabled-color);
} }
&-placeholder { &-placeholder {
color: var(--text--muted-color); color: var(--inputTree-placeholder-color);
} }
&-dropIndicator { &-dropIndicator {

31
packages/amis-ui/src/components/NumberInput.tsx
View File

@ -69,17 +69,22 @@ export interface NumberProps extends ThemeProps {
* 是否在清空内容时从数据域中删除该表单项对应的值 * 是否在清空内容时从数据域中删除该表单项对应的值
*/ */
clearValueOnEmpty?: boolean; clearValueOnEmpty?: boolean;
/**
* 数字输入框类名
*/
inputControlClassName?: string;
} }
export class NumberInput extends React.Component<NumberProps, any> { export class NumberInput extends React.Component<NumberProps, any> {
static defaultProps: Pick< static defaultProps:
NumberProps, | Pick<NumberProps, 'step' | 'readOnly' | 'borderMode' | 'resetValue'>
'step' | 'readOnly' | 'borderMode' | 'resetValue' | {focused: boolean} = {
> = {
step: 1, step: 1,
readOnly: false, readOnly: false,
borderMode: 'full', borderMode: 'full',
resetValue: '' resetValue: '',
focused: false
}; };
/** /**
@ -216,12 +221,14 @@ export class NumberInput extends React.Component<NumberProps, any> {
@autobind @autobind
handleFocus(e: React.SyntheticEvent<HTMLElement>) { handleFocus(e: React.SyntheticEvent<HTMLElement>) {
const {onFocus} = this.props; const {onFocus} = this.props;
this.setState({focused: true});
onFocus && onFocus(e); onFocus && onFocus(e);
} }
@autobind @autobind
handleBlur(e: React.SyntheticEvent<HTMLElement>) { handleBlur(e: React.SyntheticEvent<HTMLElement>) {
const {onBlur} = this.props; const {onBlur} = this.props;
this.setState({focused: false});
onBlur && onBlur(e); onBlur && onBlur(e);
} }
@ -292,7 +299,8 @@ export class NumberInput extends React.Component<NumberProps, any> {
readOnly, readOnly,
displayMode, displayMode,
inputRef, inputRef,
keyboard keyboard,
inputControlClassName
} = this.props; } = this.props;
const precisionProps: any = { const precisionProps: any = {
precision: NumberInput.normalizePrecision(precision, step) precision: NumberInput.normalizePrecision(precision, step)
@ -303,7 +311,9 @@ export class NumberInput extends React.Component<NumberProps, any> {
className={cx( className={cx(
className, className,
showSteps === false ? 'no-steps' : '', showSteps === false ? 'no-steps' : '',
displayMode === 'enhance' ? 'Number--enhance-input' : '', displayMode === 'enhance'
? 'Number--enhance-input'
: inputControlClassName,
{ {
[`Number--border${ucFirst(borderMode)}`]: borderMode [`Number--border${ucFirst(borderMode)}`]: borderMode
} }
@ -338,7 +348,8 @@ export class NumberInput extends React.Component<NumberProps, any> {
showSteps, showSteps,
borderMode, borderMode,
readOnly, readOnly,
displayMode displayMode,
inputControlClassName
} = this.props; } = this.props;
return ( return (
@ -351,7 +362,9 @@ export class NumberInput extends React.Component<NumberProps, any> {
showSteps === false ? 'Number--enhance-no-steps' : '', showSteps === false ? 'Number--enhance-no-steps' : '',
{ {
[`Number--enhance-border${ucFirst(borderMode)}`]: borderMode [`Number--enhance-border${ucFirst(borderMode)}`]: borderMode
} },
inputControlClassName,
this.state?.focused && 'focused'
)} )}
> >
<div <div

13
packages/amis-ui/src/components/Steps.tsx
View File

@ -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; [propName: string]: StepStatus;
}; };
mode?: 'horizontal' | 'vertical'; mode?: 'horizontal' | 'vertical' | 'simple';
labelPlacement?: 'horizontal' | 'vertical'; labelPlacement?: 'horizontal' | 'vertical';
progressDot?: boolean; progressDot?: boolean;
useMobileUI?: boolean; useMobileUI?: boolean;
@ -219,6 +219,15 @@ export function Steps(props: StepsProps) {
</div> </div>
</div> </div>
</div> </div>
{mode === 'simple' && i < stepsRow.length - 1 && (
<div className={cx('StepsItem-icon-line')}>
<Icon
icon="right-arrow"
className="icon"
iconContent="StepsItem-icon-line"
/>
</div>
)}
</div> </div>
</li> </li>
); );

8
packages/amis-ui/src/components/table/HeadCellFilter.tsx
View File

@ -164,7 +164,13 @@ export class HeadCellFilter extends React.Component<Props, State> {
<HeadCellDropDown <HeadCellDropDown
className={`${ns}TableCell-filterBtn`} className={`${ns}TableCell-filterBtn`}
layerClassName={`${ns}TableCell-filterPopOver`} layerClassName={`${ns}TableCell-filterPopOver`}
filterIcon={<Icon icon="column-filter" className="icon" />} filterIcon={
<Icon
icon="column-filter"
className="icon"
iconContent="table-filter-icon"
/>
}
active={ active={
column.filtered || column.filtered ||
(options && options.some((item: any) => item.selected)) (options && options.some((item: any) => item.selected))

16
packages/amis-ui/src/components/table/HeadCellSort.tsx
View File

@ -54,7 +54,7 @@ export class HeadCellSort extends React.Component<Props, State> {
return ( return (
<span <span
className={cx('TableCell-sortBtn')} className={cx('TableCell-sortBtn', 'aaa')}
onClick={async () => { onClick={async () => {
let sortPayload: State = { let sortPayload: State = {
orderBy: '', orderBy: '',
@ -92,7 +92,11 @@ export class HeadCellSort extends React.Component<Props, State> {
active && this.state.order === 'desc' ? 'is-active' : '' active && this.state.order === 'desc' ? 'is-active' : ''
)} )}
> >
<Icon icon="sort-desc" className="icon" /> <Icon
icon="sort-desc"
className="icon"
iconContent="table-sort-down"
/>
</i> </i>
<i <i
className={cx( className={cx(
@ -100,7 +104,7 @@ export class HeadCellSort extends React.Component<Props, State> {
active && this.state.order === 'asc' ? 'is-active' : '' active && this.state.order === 'asc' ? 'is-active' : ''
)} )}
> >
<Icon icon="sort-asc" className="icon" /> <Icon icon="sort-asc" className="icon" iconContent="table-sort-up" />
</i> </i>
<i <i
className={cx( className={cx(
@ -108,7 +112,11 @@ export class HeadCellSort extends React.Component<Props, State> {
active ? '' : 'is-active' active ? '' : 'is-active'
)} )}
> >
<Icon icon="sort-default" className="icon" /> <Icon
icon="sort-default"
className="icon"
iconContent="table-sort-default"
/>
</i> </i>
</span> </span>
); );

3
packages/amis/src/renderers/Action.tsx
View File

@ -792,11 +792,12 @@ export class Action extends React.Component<ActionProps, ActionState> {
classnames: cx, classnames: cx,
classPrefix: ns, classPrefix: ns,
loadingConfig, loadingConfig,
themeCss,
css, css,
id id
} = this.props; } = this.props;
insertCustomStyle( insertCustomStyle(
css, themeCss || css,
[ [
{ {
key: 'className', key: 'className',

2
packages/amis/src/renderers/Form/FieldSet.tsx
View File

@ -117,7 +117,7 @@ export default class FieldSetControl extends React.Component<
let props: any = { let props: any = {
store, store,
data: store!.data, data: store?.data,
render, render,
disabled, disabled,
formMode: subFormMode || formMode, formMode: subFormMode || formMode,

50
packages/amis/src/renderers/Form/IconSelect.tsx
View File

@ -86,9 +86,12 @@ export default class IconSelectControl extends React.PureComponent<
let findItem: IconSelectStore.SvgIcon | undefined = undefined; let findItem: IconSelectStore.SvgIcon | undefined = undefined;
if (IconSelectStore.svgIcons && IconSelectStore.svgIcons.length) { if (IconSelectStore.svgIcons && IconSelectStore.svgIcons.length) {
for (let i = 0; i < IconSelectStore.svgIcons.length; i++) { 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) { if (findItem) {
break; break;
} }
} }
} }
@ -118,9 +121,10 @@ export default class IconSelectControl extends React.PureComponent<
disabled, disabled,
value: valueTemp, value: valueTemp,
placeholder, placeholder,
clearable clearable,
} = this.props; } = this.props;
const value = typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp; const value =
typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp;
const pureValue = const pureValue =
(value?.id && String(value.id).replace(/^svg-/, '')) || ''; (value?.id && String(value.id).replace(/^svg-/, '')) || '';
@ -128,12 +132,14 @@ export default class IconSelectControl extends React.PureComponent<
return ( return (
<div className={cx(`${ns}IconSelectControl-input-area`)}> <div className={cx(`${ns}IconSelectControl-input-area`)}>
{pureValue && ( {pureValue ? (
<div className={cx(`${ns}IconSelectControl-input-icon-show`)}> <div className={cx(`${ns}IconSelectControl-input-icon-show`)}>
<svg> <svg>
<use xlinkHref={`#${pureValue}`}></use> <use xlinkHref={`#${pureValue}`}></use>
</svg> </svg>
</div> </div>
) : (
<Icon icon={valueTemp} className="icon" />
)} )}
<span className={cx(`${ns}IconSelectControl-input-icon-id`)}> <span className={cx(`${ns}IconSelectControl-input-icon-id`)}>
{iconName} {iconName}
@ -196,7 +202,7 @@ export default class IconSelectControl extends React.PureComponent<
const checkedIcon = this.state.tmpCheckIconId; const checkedIcon = this.state.tmpCheckIconId;
if (this.props.returnSvg) { if (this.props.returnSvg) {
this.props.onChange && this.props.onChange &&
this.props.onChange(checkedIcon && checkedIcon.svg || ''); this.props.onChange((checkedIcon && checkedIcon.svg) || '');
} else { } else {
this.props.onChange && this.props.onChange &&
this.props.onChange( this.props.onChange(
@ -209,6 +215,13 @@ export default class IconSelectControl extends React.PureComponent<
this.toggleModel(false); this.toggleModel(false);
} }
@autobind
async handleLocalUpload(icon: string) {
this.props.onChange && this.props.onChange(icon);
this.toggleModel(false);
}
handleClickIconInModal(icon: IconChecked) { handleClickIconInModal(icon: IconChecked) {
this.setState({ this.setState({
tmpCheckIconId: icon?.id === this.state.tmpCheckIconId?.id ? null : icon tmpCheckIconId: icon?.id === this.state.tmpCheckIconId?.id ? null : icon
@ -285,7 +298,13 @@ export default class IconSelectControl extends React.PureComponent<
@autobind @autobind
renderModalContent() { renderModalContent() {
const {render, classPrefix: ns, loadingConfig} = this.props; const {
render,
classPrefix: ns,
loadingConfig,
funcSchema,
funcCom: FuncCom
} = this.props;
const icons = this.getIconsByType(); const icons = this.getIconsByType();
@ -317,6 +336,12 @@ export default class IconSelectControl extends React.PureComponent<
)) || )) ||
null} null}
{FuncCom ? (
<div className={cx(`${ns}IconSelectControl-Modal-func`)}>
<FuncCom onUpload={this.handleLocalUpload} />
</div>
) : null}
<div className={cx(`${ns}IconSelectControl-Modal-content`)}> <div className={cx(`${ns}IconSelectControl-Modal-content`)}>
<Spinner <Spinner
size="lg" size="lg"
@ -349,7 +374,8 @@ export default class IconSelectControl extends React.PureComponent<
@autobind @autobind
toggleModel(isShow?: boolean) { toggleModel(isShow?: boolean) {
const {value: valueTemp} = this.props; const {value: valueTemp} = this.props;
const value = typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp; const value =
typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp;
if (isShow === undefined) { if (isShow === undefined) {
this.setState({ this.setState({
@ -371,7 +397,13 @@ export default class IconSelectControl extends React.PureComponent<
} }
render() { render() {
const {className, style, classPrefix: ns, disabled, translate: __} = this.props; const {
className,
style,
classPrefix: ns,
disabled,
translate: __
} = this.props;
return ( return (
<div <div

26
packages/amis/src/renderers/Form/InputNumber.tsx
View File

@ -4,7 +4,8 @@ import {
FormItem, FormItem,
FormControlProps, FormControlProps,
FormBaseControl, FormBaseControl,
resolveEventData resolveEventData,
insertCustomStyle
} from 'amis-core'; } from 'amis-core';
import cx from 'classnames'; import cx from 'classnames';
import {NumberInput, Select} from 'amis-ui'; import {NumberInput, Select} from 'amis-ui';
@ -381,7 +382,11 @@ export default class NumberControl extends React.Component<
displayMode, displayMode,
big, big,
resetValue, resetValue,
clearValueOnEmpty clearValueOnEmpty,
css,
themeCss,
inputControlClassName,
id
} = this.props; } = this.props;
const finalPrecision = this.filterNum(precision); const finalPrecision = this.filterNum(precision);
const unit = this.state?.unit; const unit = this.state?.unit;
@ -408,6 +413,22 @@ export default class NumberControl extends React.Component<
? value.replace(unit, '') ? value.replace(unit, '')
: value; : value;
insertCustomStyle(
themeCss || css,
[
{
key: 'inputControlClassName',
value: inputControlClassName,
weights: {
active: {
pre: `${inputControlClassName}.focused, `
}
}
}
],
id
);
return ( return (
<div <div
className={cx( className={cx(
@ -419,6 +440,7 @@ export default class NumberControl extends React.Component<
)} )}
> >
<NumberInput <NumberInput
inputControlClassName={inputControlClassName}
inputRef={this.inputRef} inputRef={this.inputRef}
value={finalValue} value={finalValue}
resetValue={resetValue} resetValue={resetValue}

19
packages/amis/src/renderers/Form/InputText.tsx
View File

@ -5,7 +5,8 @@ import {
highlight, highlight,
FormOptionsControl, FormOptionsControl,
resolveEventData, resolveEventData,
insertCustomStyle insertCustomStyle,
getValueByPath
} from 'amis-core'; } from 'amis-core';
import {ActionObject} from 'amis-core'; import {ActionObject} from 'amis-core';
import Downshift, {StateChangeOptions} from 'downshift'; import Downshift, {StateChangeOptions} from 'downshift';
@ -1057,34 +1058,40 @@ export default class TextControl extends React.PureComponent<
options, options,
source, source,
autoComplete, autoComplete,
themeCss,
css, css,
inputControlClassName, inputControlClassName,
id, id,
addOnClassName addOnClassName,
editorPath,
themeConfig,
classPrefix: ns
} = this.props; } = this.props;
const editorDefaultData = getValueByPath(editorPath, themeConfig);
let input = let input =
autoComplete !== false && (source || options?.length || autoComplete) autoComplete !== false && (source || options?.length || autoComplete)
? this.renderSugestMode() ? this.renderSugestMode()
: this.renderNormal(); : this.renderNormal();
insertCustomStyle( insertCustomStyle(
css, themeCss || css,
[ [
{ {
key: 'inputControlClassName', key: 'inputControlClassName',
value: inputControlClassName, value: inputControlClassName,
weights: { weights: {
active: { active: {
pre: 'is-focused .' pre: `${ns}TextControl.is-focused > .${inputControlClassName}, `
} }
} }
} }
], ],
id id,
editorDefaultData
); );
insertCustomStyle( insertCustomStyle(
css, themeCss || css,
[ [
{ {
key: 'addOnClassName', key: 'addOnClassName',

1
packages/amis/src/renderers/Table2/ColumnToggler.tsx
View File

@ -75,6 +75,7 @@ export class ColumnTogglerRenderer extends React.Component<ColumnTogglerRenderer
columns={cols} columns={cols}
activeToggaleColumns={activeToggaleColumns} activeToggaleColumns={activeToggaleColumns}
data={data} data={data}
size={size || 'sm'}
> >
{toggableColumns?.length ? ( {toggableColumns?.length ? (
<li <li

8
packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx
View File

@ -271,7 +271,13 @@ export class HeadCellSearchDropDown extends React.Component<
(searchable as any).className (searchable as any).className
)} )}
active={isActive} active={isActive}
filterIcon={<Icon icon="search" className="icon" />} filterIcon={
<Icon
icon="search"
className="icon"
iconContent="table-search-icon"
/>
}
popOverContainer={ popOverContainer={
popOverContainer ? popOverContainer : () => findDOMNode(this) popOverContainer ? popOverContainer : () => findDOMNode(this)
} }