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

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

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

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

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

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

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

@ -1,5 +1,6 @@
import {PlainObject} from '../types';
import {uuid} from './helper';
import cloneDeep from 'lodash/cloneDeep';
export const valueMap: PlainObject = {
'marginTop': 'margin-top',
@ -27,6 +28,11 @@ export const valueMap: PlainObject = {
'lineHeight': 'line-height'
};
export const inheritValueMap: PlainObject = {
background: 'bg-color',
radius: 'border'
};
interface extra {
pre?: string;
suf?: string;
@ -55,8 +61,43 @@ export function addStyle(style: string, id: string) {
varStyleTag.innerHTML += style;
}
// 继承数据处理
function handleInheritData(statusMap: any, data: any) {
if (!data) {
return;
}
// 检查是否存在inherit
['hover', 'active'].forEach(status => {
for (let key in statusMap[status]) {
if (typeof statusMap[status][key] === 'object') {
for (let style in statusMap[status][key]) {
if (statusMap[status][key][style] === 'inherit') {
// 值为inherit时设置为default的值或者主题中的default值
if (statusMap['default'][key] && statusMap['default'][key][style]) {
statusMap[status][key][style] = statusMap.default[key][style];
} else {
const value = inheritValueMap[key] || key;
statusMap[status][key][style] =
data['default'].body[value][style];
}
}
}
} else {
if (statusMap[status][key] === 'inherit') {
if (statusMap['default'][key] && statusMap['default'][key]) {
statusMap[status][key] = statusMap.default[key];
} else {
const value = inheritValueMap[key] || key;
statusMap[status][key] = data['default'].body[value];
}
}
}
}
});
}
export function formatStyle(
css: any,
themeCss: any,
classNames: {
key: string;
value?: string;
@ -67,9 +108,10 @@ export function formatStyle(
disabled?: extra;
};
}[],
id?: string
id?: string,
defaultData?: any
) {
if (!css) {
if (!themeCss) {
return {value: '', origin: []};
}
const res = [];
@ -81,7 +123,7 @@ export function formatStyle(
};
for (let item of classNames) {
const body = css[item.key];
const body = themeCss[item.key];
const list = item.value?.split(' ');
const classNameList: string[] = [];
@ -129,6 +171,7 @@ export function formatStyle(
statusMap.default[key] = body[key];
}
}
handleInheritData(statusMap, defaultData);
for (let status in statusMap) {
const weights = weightsList[status];
@ -176,12 +219,13 @@ export function formatStyle(
'\n '
)}\n}`
});
if (['hover', 'active', 'disabled'].includes(status)) {
res.push({
className: cx + '.' + status,
content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}`
});
}
// TODO:切换状态暂时先不改变组件的样式
// if (['hover', 'active', 'disabled'].includes(status)) {
// res.push({
// className: cx + '.' + status,
// content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}`
// });
// }
}
}
}
@ -193,7 +237,7 @@ export function formatStyle(
}
export function insertCustomStyle(
css: any,
themeCss: any,
classNames: {
key: string;
value?: string;
@ -204,11 +248,33 @@ export function insertCustomStyle(
disabled?: extra;
};
}[],
id?: string
id?: string,
defaultData?: any
) {
if (!css) {
if (!themeCss) {
return;
}
const {value} = formatStyle(css, classNames, id);
insertStyle(value, id?.replace('u:', '') || uuid());
const {value} = formatStyle(themeCss, classNames, id, defaultData);
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 {
font-size: var(--Alert-fontSize);
font-weight: var(--alert-base-fontWeight);
box-shadow: var(--Alert-boxShadow);
padding: var(--Alert-paddingY) var(--Alert-paddingX);
padding: var(--alert-base-paddingTop) var(--alert-base-paddingRight)
var(--alert-base-paddingBottom) var(--alert-base-paddingLeft);
border: var(--Alert-borderWidth) solid var(--Alert-borderColor);
border-radius: var(--Alert-borderRadius);
margin-bottom: var(--Alert-marginBottom);
margin: var(--alert-base-marginTop) var(--alert-base-marginRight)
var(--Alert-marginBottom) var(--alert-base-marginLeft);
position: relative;
color: var(--Alert-fontColor);
display: flex;
@ -13,7 +16,9 @@
align-items: flex-start;
&-has-title {
padding: var(--Alert-paddingX);
padding: var(--alert-base-title-paddingTop)
var(--alert-base-title-paddingRight) var(--alert-base-title-paddingBottom)
var(--alert-base-title-paddingLeft);
.#{$ns}Alert-content {
.#{$ns}Alert-title {
@ -27,19 +32,19 @@
}
&-icon {
margin-right: var(--gap-sm);
font-size: var(--fontSizeLg);
margin-right: var(--alert-icon-margin-right);
font-size: var(--alert-icon-size);
}
&-content {
flex: 1;
.#{$ns}Alert-title {
color: var(--text-color);
font-size: var(--fontSizeBase);
font-weight: 500;
color: var(--alert-base-title-color);
font-size: var(--alert-base-title-fontSize);
font-weight: var(--alert-base-title-fontWeight);
line-height: #{px2rem(24px)};
margin-bottom: #{px2rem(4px)};
margin-bottom: var(--alert-base-title-margin-bottom);
}
.#{$ns}Alert-desc {
@ -74,23 +79,39 @@
color: var(--Alert--danger-color);
background: var(--Alert--danger-bg);
border-color: var(--Alert--danger-borderColor);
.#{$ns}Alert-icon .icon-alert-danger path {
fill: var(--alert-level-danger-icon-color);
}
}
&--info {
color: var(--Alert--info-color);
background: var(--Alert--info-bg);
border-color: var(--Alert--info-borderColor);
.#{$ns}Alert-icon .icon-alert-info path {
fill: var(--alert-level-info-icon-color);
}
}
&--success {
color: var(--Alert--success-color);
background: var(--Alert--success-bg);
border-color: var(--Alert--success-borderColor);
.#{$ns}Alert-icon .icon-alert-success path {
fill: var(--alert-level-success-icon-color);
}
}
&--warning {
color: var(--Alert--warning-color);
background: var(--Alert--warning-bg);
border-color: var(--Alert--warning-borderColor);
.#{$ns}Alert-icon .icon-alert-warning path {
fill: var(--alert-level-warning-icon-color);
}
}
}

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

@ -55,7 +55,9 @@
&-menuItem,
&-menu > li {
padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
padding: var(--table-togglable-paddingTop)
var(--table-togglable-paddingRight) var(--table-togglable-paddingBottom)
var(--table-togglable-paddingLeft);
white-space: nowrap;
box-sizing: border-box;
height: var(--DropDown-menu-height);
@ -63,9 +65,10 @@
user-select: none;
color: var(--link-color);
text-decoration: var(--link-decoration);
background: var(--table-togglable-bg-color);
&:hover {
background: var(--DropDown-menuItem-onHover-bg);
background: var(--table-togglable-hover-bg-color);
color: var(--DropDown-menuItem-onHover-color);
}

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

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

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

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

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

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

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

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

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

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

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

@ -7,7 +7,9 @@
&-item {
display: flex;
margin: var(--gap-xs);
margin: var(--image-images-item-marginTop)
var(--image-images-item-marginRight) var(--image-images-item-marginBottom)
var(--image-images-item-marginLeft);
}
}
@ -16,7 +18,10 @@
&--thumb {
display: inline-block;
padding: var(--gap-xs);
padding: var(--image-image-normal-paddingTop)
var(--image-image-normal-paddingRight)
var(--image-image-normal-paddingBottom)
var(--image-image-normal-paddingLeft);
}
&-thumbWrap {
@ -132,12 +137,13 @@
}
&-caption {
font-size: var(--fontSizeSm);
font-size: var(--image-image-description-fontSize);
color: var(--image-image-description-color);
}
&-title {
font-size: var(--fontSizeBase);
color: var(--text--loud-color);
font-size: var(--image-image-normal-fontSize);
color: var(--image-image-normal-color);
}
&-overlay {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -69,10 +69,13 @@
pointer-events: auto;
margin-bottom: var(--gap-xs);
padding: var(--Toast-paddingY) var(--Toast-paddingX);
padding: var(--Toast-paddingTop) var(--Toast-paddingRight)
var(--Toast-paddingBottom) var(--Toast-paddingLeft);
box-shadow: var(--Toast-box-shadow);
border-radius: var(--Toast-borderRadius);
border-radius: var(--Toast-top-left-border-radius)
var(--Toast-top-right-border-radius)
var(--Toast-bottom-right-border-radius)
var(--Toast-bottom-left-border-radius);
border: var(--Toast-border-width) solid;
color: var(--Toast-color);
position: relative;
@ -133,7 +136,6 @@
}
.#{$ns}Toast-body {
font-size: var(--fontSizeSm);
display: inline-block;
vertical-align: middle;
white-space: pre-wrap;
@ -166,26 +168,80 @@
// colors
&--error {
color: var(--Toast--danger-color);
border-color: var(--Toast--danger-borderColor);
background: var(--Toast--danger-bgColor);
font-size: var(--Toast--danger-fontSize);
font-weight: var(--Toast--danger-fontWeight);
background: var(--Toast--danger-bgColor);
border-width: var(--Toast--danger-top-border-width)
var(--Toast--danger-right-border-width)
var(--Toast--danger-bottom-border-width)
var(--Toast--danger-left-border-width);
border-style: var(--Toast--danger-top-border-style)
var(--Toast--danger-right-border-style)
var(--Toast--danger-bottom-border-style)
var(--Toast--danger-left-border-style);
border-color: var(--Toast--danger-top-border-color)
var(--Toast--danger-right-border-color)
var(--Toast--danger-bottom-border-color)
var(--Toast--danger-left-border-color);
}
&--warning {
color: var(--Toast--warning-color);
border-color: var(--Toast--warning-borderColor);
background: var(--Toast--warning-bgColor);
font-size: var(--Toast--warning-fontSize);
font-weight: var(--Toast--warning-fontWeight);
background: var(--Toast--warning-bgColor);
border-width: var(--Toast--warning-top-border-width)
var(--Toast--warning-right-border-width)
var(--Toast--warning-bottom-border-width)
var(--Toast--warning-left-border-width);
border-style: var(--Toast--warning-top-border-style)
var(--Toast--warning-right-border-style)
var(--Toast--warning-bottom-border-style)
var(--Toast--warning-left-border-style);
border-color: var(--Toast--warning-top-border-color)
var(--Toast--warning-right-border-color)
var(--Toast--warning-bottom-border-color)
var(--Toast--warning-left-border-color);
}
&--info {
color: var(--Toast--info-color);
border-color: var(--Toast--info-borderColor);
font-size: var(--Toast--info-fontSize);
font-weight: var(--Toast--info-fontWeight);
background: var(--Toast--info-bgColor);
border-width: var(--Toast--info-top-border-width)
var(--Toast--info-right-border-width)
var(--Toast--info-bottom-border-width)
var(--Toast--info-left-border-width);
border-style: var(--Toast--info-top-border-style)
var(--Toast--info-right-border-style)
var(--Toast--info-bottom-border-style)
var(--Toast--info-left-border-style);
border-color: var(--Toast--info-top-border-color)
var(--Toast--info-right-border-color)
var(--Toast--info-bottom-border-color)
var(--Toast--info-left-border-color);
}
&--success {
color: var(--Toast--success-color);
border-color: var(--Toast--success-borderColor);
font-size: var(--Toast--success-fontSize);
font-weight: var(--Toast--success-fontWeight);
background: var(--Toast--success-bgColor);
border-width: var(--Toast--success-top-border-width)
var(--Toast--success-right-border-width)
var(--Toast--success-bottom-border-width)
var(--Toast--success-left-border-width);
border-style: var(--Toast--success-top-border-style)
var(--Toast--success-right-border-style)
var(--Toast--success-bottom-border-style)
var(--Toast--success-left-border-style);
border-color: var(--Toast--success-top-border-color)
var(--Toast--success-right-border-color)
var(--Toast--success-bottom-border-color)
var(--Toast--success-left-border-color);
}
// positions

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -63,14 +63,41 @@
@include button-variant(
var(--TagControl-sugBtn-bg),
var(--TagControl-sugBtn-border),
var(--TagControl-sugBtn-color),
var(--TagControl-sugBtn-border),
var(--TagControl-sugBtn-border),
var(--TagControl-sugBtn-border),
var(--TagControl-sugBtn-border),
var(--TagControl-sugBtn-borderWidth),
var(--TagControl-sugBtn-borderWidth),
var(--TagControl-sugBtn-borderWidth),
var(--TagControl-sugBtn-borderWidth),
solid,
solid,
solid,
solid,
none,
var(--TagControl-sugBtn-onHover-bg),
var(--TagControl-sugBtn-onHover-border),
var(--TagControl-sugBtn-onHover-color),
var(--TagControl-sugBtn-onHover-border),
var(--TagControl-sugBtn-onHover-border),
var(--TagControl-sugBtn-onHover-border),
var(--TagControl-sugBtn-onHover-border),
var(--TagControl-sugBtn-borderWidth),
var(--TagControl-sugBtn-borderWidth),
var(--TagControl-sugBtn-borderWidth),
var(--TagControl-sugBtn-borderWidth),
solid,
solid,
solid,
solid,
none,
var(--TagControl-sugBtn-onActive-bg),
var(--TagControl-sugBtn-onActive-color),
var(--TagControl-sugBtn-onActive-border),
var(--TagControl-sugBtn-onActive-color)
var(--TagControl-sugBtn-onActive-border),
var(--TagControl-sugBtn-onActive-border),
var(--TagControl-sugBtn-onActive-border)
);
&.is-disabled {
@ -91,4 +118,21 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.#{$ns}ListMenu-item {
height: var(--inputTag-option-height);
color: var(--inputTag-option-color);
font-size: var(--inputTag-option-fontSize);
line-height: var(--inputTag-option-lineHeight);
font-weight: var(--inputTag-option-fontWeight);
padding: var(--inputTag-option-paddingTop)
var(--inputTag-option-paddingRight) var(--inputTag-option-paddingBottom)
var(--inputTag-option-paddingLeft);
background: var(--inputTag-option-bg-color);
&:hover {
color: var(--inputTag-option-hover-color);
background: var(--inputTag-option-hover-bg-color);
}
}
}

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

@ -46,6 +46,13 @@
background: var(--input-default-default-bg-color);
height: var(--input-size-default-height);
input {
color: var(--input-default-default-color);
font-size: var(--input-default-default-fontSize);
font-weight: var(--input-default-default-fontWeight);
line-height: var(--input-default-default-lineHeight);
}
&:hover,
&.hover {
border-width: var(--input-default-hover-top-border-width)

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

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

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

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

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

@ -69,17 +69,22 @@ export interface NumberProps extends ThemeProps {
* 是否在清空内容时从数据域中删除该表单项对应的值
*/
clearValueOnEmpty?: boolean;
/**
* 数字输入框类名
*/
inputControlClassName?: string;
}
export class NumberInput extends React.Component<NumberProps, any> {
static defaultProps: Pick<
NumberProps,
'step' | 'readOnly' | 'borderMode' | 'resetValue'
> = {
static defaultProps:
| Pick<NumberProps, 'step' | 'readOnly' | 'borderMode' | 'resetValue'>
| {focused: boolean} = {
step: 1,
readOnly: false,
borderMode: 'full',
resetValue: ''
resetValue: '',
focused: false
};
/**
@ -216,12 +221,14 @@ export class NumberInput extends React.Component<NumberProps, any> {
@autobind
handleFocus(e: React.SyntheticEvent<HTMLElement>) {
const {onFocus} = this.props;
this.setState({focused: true});
onFocus && onFocus(e);
}
@autobind
handleBlur(e: React.SyntheticEvent<HTMLElement>) {
const {onBlur} = this.props;
this.setState({focused: false});
onBlur && onBlur(e);
}
@ -292,7 +299,8 @@ export class NumberInput extends React.Component<NumberProps, any> {
readOnly,
displayMode,
inputRef,
keyboard
keyboard,
inputControlClassName
} = this.props;
const precisionProps: any = {
precision: NumberInput.normalizePrecision(precision, step)
@ -303,7 +311,9 @@ export class NumberInput extends React.Component<NumberProps, any> {
className={cx(
className,
showSteps === false ? 'no-steps' : '',
displayMode === 'enhance' ? 'Number--enhance-input' : '',
displayMode === 'enhance'
? 'Number--enhance-input'
: inputControlClassName,
{
[`Number--border${ucFirst(borderMode)}`]: borderMode
}
@ -338,7 +348,8 @@ export class NumberInput extends React.Component<NumberProps, any> {
showSteps,
borderMode,
readOnly,
displayMode
displayMode,
inputControlClassName
} = this.props;
return (
@ -351,7 +362,9 @@ export class NumberInput extends React.Component<NumberProps, any> {
showSteps === false ? 'Number--enhance-no-steps' : '',
{
[`Number--enhance-border${ucFirst(borderMode)}`]: borderMode
}
},
inputControlClassName,
this.state?.focused && 'focused'
)}
>
<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;
};
mode?: 'horizontal' | 'vertical';
mode?: 'horizontal' | 'vertical' | 'simple';
labelPlacement?: 'horizontal' | 'vertical';
progressDot?: boolean;
useMobileUI?: boolean;
@ -219,6 +219,15 @@ export function Steps(props: StepsProps) {
</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>
</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
className={`${ns}TableCell-filterBtn`}
layerClassName={`${ns}TableCell-filterPopOver`}
filterIcon={<Icon icon="column-filter" className="icon" />}
filterIcon={
<Icon
icon="column-filter"
className="icon"
iconContent="table-filter-icon"
/>
}
active={
column.filtered ||
(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 (
<span
className={cx('TableCell-sortBtn')}
className={cx('TableCell-sortBtn', 'aaa')}
onClick={async () => {
let sortPayload: State = {
orderBy: '',
@ -92,7 +92,11 @@ export class HeadCellSort extends React.Component<Props, State> {
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
className={cx(
@ -100,7 +104,7 @@ export class HeadCellSort extends React.Component<Props, State> {
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
className={cx(
@ -108,7 +112,11 @@ export class HeadCellSort extends React.Component<Props, State> {
active ? '' : 'is-active'
)}
>
<Icon icon="sort-default" className="icon" />
<Icon
icon="sort-default"
className="icon"
iconContent="table-sort-default"
/>
</i>
</span>
);

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

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

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

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

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

@ -5,7 +5,8 @@ import {
highlight,
FormOptionsControl,
resolveEventData,
insertCustomStyle
insertCustomStyle,
getValueByPath
} from 'amis-core';
import {ActionObject} from 'amis-core';
import Downshift, {StateChangeOptions} from 'downshift';
@ -1057,34 +1058,40 @@ export default class TextControl extends React.PureComponent<
options,
source,
autoComplete,
themeCss,
css,
inputControlClassName,
id,
addOnClassName
addOnClassName,
editorPath,
themeConfig,
classPrefix: ns
} = this.props;
const editorDefaultData = getValueByPath(editorPath, themeConfig);
let input =
autoComplete !== false && (source || options?.length || autoComplete)
? this.renderSugestMode()
: this.renderNormal();
insertCustomStyle(
css,
themeCss || css,
[
{
key: 'inputControlClassName',
value: inputControlClassName,
weights: {
active: {
pre: 'is-focused .'
pre: `${ns}TextControl.is-focused > .${inputControlClassName}, `
}
}
}
],
id
id,
editorDefaultData
);
insertCustomStyle(
css,
themeCss || css,
[
{
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}
activeToggaleColumns={activeToggaleColumns}
data={data}
size={size || 'sm'}
>
{toggableColumns?.length ? (
<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
)}
active={isActive}
filterIcon={<Icon icon="search" className="icon" />}
filterIcon={
<Icon
icon="search"
className="icon"
iconContent="table-search-icon"
/>
}
popOverContainer={
popOverContainer ? popOverContainer : () => findDOMNode(this)
}