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

styles：主题二期合入 (#6023)

Browse Source 
* style: button主题适配 (#5780)

* feat: button增加font-weight (#5781)

* feat: button增加font-weight

* fix: button-fix

* fix: button-fix

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* style: font

* feat: input输入框变量样式&切换图标方案 (#5847)

* feat: input输入框变量样式&切换图标方案

* fix: 去掉多余代码

* fix: 去掉多余代码

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* style: input外观

* fix: 修复选择图标没选中 (#5858)

* fix: 修复选择图标没选中

* fix: 代码格式

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* style: link组件

* style: form

* inputNumber输入输入框 组件css变量 (#5874)

* inputNumber输入输入框 组件css变量

* inputNumber组件 兼容变量

* inputNumber组件 css变量文件迁移

* inputNumber组件 删除变量

* 去除无用变量

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* style: form

* style: form

* InputNumber组件 变量修改 (#5879)

* inputNumber输入输入框 组件css变量

* inputNumber组件 兼容变量

* inputNumber组件 css变量文件迁移

* inputNumber组件 删除变量

* 去除无用变量

* InputNumber组件 变量修改

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* style: form

* style: input

* inputNumber组件 加强版分别配置 (#5887)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* style: input-range

* inputNumber组件 加强版图标 (#5888)

* inputNumber组件 加强版分别配置

* inputNumber组件 加强版图标

* 修改图标变量

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* style: rating

* checkbox组件变量 (#5902)

* inputNumber组件 加强版分别配置

* inputNumber组件 加强版图标

* 修改图标变量

* checkbox组件变量

* 修改checkbox-size

* 修改checkbox-size变量

* 优化

* 优化

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* checkbox边框 背景分别配置变量 (#5904)

* inputNumber组件 加强版分别配置

* inputNumber组件 加强版图标

* 修改图标变量

* checkbox组件变量

* 修改checkbox-size

* 修改checkbox-size变量

* 优化

* 优化

* checkbox边框 背景分别配置变量

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* listSelect组件变量 (#5917)

* listSelect组件变量

* 优化

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* feat: radio&switch样式变量适配 (#5924)

* feat: radio&switch样式变量适配

* fix:修复变量

* fix: 变量修复

* fix: 变量修复

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* style: 兼容style

* feat: Collapse变量适配 (#5934)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* 组件自定义变量补充 (#5947)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* inputNumber加强版背景覆盖普通版 (#5951)

* 组件自定义变量补充

* inputNumber加强版背景覆盖普通版

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* pref: 已修改组件变量迁移到components (#5952)

* pref: 将变量冲properties迁移到components

* pref: 已修改组件变量迁移到components

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* pref: 优化变量位置 (#5953)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* theme: 面板\分割线\选项卡

* theme: 选项卡

* theme: link

* feat: inputFile&inputImage组件变量 (#5982)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* fix: 图标选择修复和兼容处理 (#5984)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* theme: bugfix

* theme: bugfix

* fix: 去掉input的size&修复collapse样式 (#5985)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* theme: 样式调整

* theme: 样式调整

* pref: 折叠器样式变量修改 (#5991)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* theme: 样式调整

* theme: 样式调整

* theme: 样式调整

* theme: 样式调整

* styles: 主题变量bugfix

* checkbox&number组件变量修复 (#6019)

Co-authored-by: xujiahao01 <xujiahao01@baidu.com>

* fix: 输入框图标样式修复 (#6021)

Co-authored-by: hongyang03 <hongyang03@baidu.com>

* 回滚注释

* 更新快照

* fix: 修复评分组件报错问题

Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com>
Co-authored-by: hongyang03 <hongyang03@baidu.com>
Co-authored-by: 徐佳豪 <1440054388@qq.com>
Co-authored-by: xujiahao01 <xujiahao01@baidu.com>
This commit is contained in:
qinhaoyan 2023-01-06 20:36:45 +08:00 committed by GitHub
parent b6e45f454a
commit 3ac4097dc4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
51 changed files with 4193 additions and 1068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
examples/style.scss
View File

@ -286,6 +286,7 @@ body {
padding: 0px 5px;
margin: 0 5px;
font-weight: 500;
line-height: inherit;
text-decoration: none;
&:hover,
@ -293,6 +294,8 @@ body {
color: var(--primary);
position: relative;
text-decoration: none;
font-weight: 500;
line-height: inherit;
&::before {
content: '';
@ -491,9 +494,13 @@ body {
color: #666;
cursor: pointer;
text-decoration: none !important;
font-size: 12px;
font-weight: 500;
&:hover {
color: #333;
font-size: 12px;
font-weight: 500;
}
}

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

@ -33,7 +33,7 @@ import {wrapControl} from './wrapControl';
import debounce from 'lodash/debounce';
import {isApiOutdated, isEffectiveApi} from '../utils/api';
import {findDOMNode} from 'react-dom';
import {dataMapping} from '../utils';
import {dataMapping, insertCustomStyle} from '../utils';
import Overlay from '../components/Overlay';
import PopOver from '../components/PopOver';
@ -1448,9 +1448,40 @@ export class FormItemWrap extends React.Component<FormItemProps> {
};
render() {
const {formMode, inputOnly, wrap, render, formItem: model} = this.props;
const {
formMode,
inputOnly,
wrap,
render,
formItem: model,
css,
id,
labelClassName,
descriptionClassName
} = this.props;
const mode = this.props.mode || formMode;
insertCustomStyle(
css,
[
{
key: 'labelClassName',
value: labelClassName
}
],
id + '-label'
);
insertCustomStyle(
css,
[
{
key: 'descriptionClassName',
value: descriptionClassName
}
],
id + '-description'
);
if (wrap === false || inputOnly) {
return this.renderControl();
}

1
packages/amis-core/src/utils/index.ts
View File

@ -51,6 +51,7 @@ export * from './uncontrollable';
export * from './validations';
export * from './toNumber';
export * from './decodeEntity';
export * from './style-helper';
import animation from './Animation';

214
packages/amis-core/src/utils/style-helper.ts Normal file
View File

@ -0,0 +1,214 @@
import {PlainObject} from '../types';
import {uuid} from './helper';
export const valueMap: PlainObject = {
'marginTop': 'margin-top',
'marginRight': 'margin-right',
'marginBottom': 'margin-bottom',
'marginLeft': 'margin-left',
'paddingTop': 'padding-top',
'paddingRight': 'padding-right',
'paddingBottom': 'padding-bottom',
'paddingLeft': 'padding-left',
'top-border-width': 'border-top-width',
'right-border-width': 'border-right-width',
'bottom-border-width': 'border-bottom-width',
'left-border-width': 'border-left-width',
'top-border-style': 'border-top-style',
'right-border-style': 'border-right-style',
'bottom-border-style': 'border-bottom-style',
'left-border-style': 'border-left-style',
'top-border-color': 'border-top-color',
'right-border-color': 'border-right-color',
'bottom-border-color': 'border-bottom-color',
'left-border-color': 'border-left-color',
'fontSize': 'font-size',
'fontWeight': 'font-weight',
'lineHeight': 'line-height'
};
interface extra {
pre?: string;
suf?: string;
}
export function findOrCreactStyle(id: string) {
let varStyleTag = document.getElementById(id);
if (!varStyleTag) {
varStyleTag = document.createElement('style');
varStyleTag.id = id;
document.body.appendChild(varStyleTag);
}
return varStyleTag;
}
export function insertStyle(style: string, id: string) {
const varStyleTag = findOrCreactStyle(id);
// bca-disable-line
varStyleTag.innerHTML = style;
}
export function addStyle(style: string, id: string) {
const varStyleTag = findOrCreactStyle(id);
// bca-disable-line
varStyleTag.innerHTML += style;
}
export function formatStyle(
css: any,
classNames: {
key: string;
value?: string;
weights?: {
default?: extra;
hover?: extra;
active?: extra;
disabled?: extra;
};
}[],
id?: string
) {
if (!css) {
return {value: '', origin: []};
}
const res = [];
const status2string: PlainObject = {
default: '',
hover: ':hover',
active: ':hover:active',
disabled: '.is-disabled'
};
for (let item of classNames) {
const body = css[item.key];
const list = item.value?.split(' ');
const classNameList: string[] = [];
if (!body) {
continue;
}
list?.forEach(n => {
if (
/(\S*[C|c]lassName-\S*)/.test(n) &&
!!~n.indexOf(
id
?.replace('u:', '')
.replace('-label', '')
.replace('-description', '')
.replace('-addOn', '') || ''
)
) {
classNameList.push(n);
}
});
const weightsList: PlainObject = item.weights || {};
for (let className of classNameList) {
// 没有具体的样式，或者没有对应的classname
const statusMap: PlainObject = {
default: {},
hover: {},
active: {},
disabled: {}
};
for (let key in body) {
if (key === '$$id') {
continue;
}
if (!!~key.indexOf(':default')) {
statusMap.default[key.replace(':default', '')] = body[key];
} else if (!!~key.indexOf(':hover')) {
statusMap.hover[key.replace(':hover', '')] = body[key];
} else if (!!~key.indexOf(':active')) {
statusMap.active[key.replace(':active', '')] = body[key];
} else if (!!~key.indexOf(':disabled')) {
statusMap.disabled[key.replace(':disabled', '')] = body[key];
} else {
statusMap.default[key] = body[key];
}
}
for (let status in statusMap) {
const weights = weightsList[status];
const styles: string[] = [];
const fn = (key: string, value: string) => {
key = valueMap[key] || key;
styles.push(`${key}: ${value};`);
};
for (let key in statusMap[status]) {
if (key === '$$id') {
continue;
}
const style = statusMap[status][key];
if (typeof style === 'object') {
// 圆角特殊处理
if (key === 'radius') {
fn(
'border-radius',
[
style['top-left-border-radius'],
style['top-right-border-radius'],
style['bottom-right-border-radius'],
style['bottom-left-border-radius']
].join(' ')
);
} else {
for (let k in style) {
if (k === '$$id') {
continue;
}
const value = style[k];
value && fn(k, value);
}
}
} else {
const value = style;
value && fn(key, value);
}
}
if (styles.length > 0) {
const cx = (weights?.pre || '') + className + (weights?.suf || '');
res.push({
className: cx + status2string[status],
content: `.${cx + status2string[status]} {\n ${styles.join(
'\n '
)}\n}`
});
if (['hover', 'active', 'disabled'].includes(status)) {
res.push({
className: cx + '.' + status,
content: `.${cx}.${status} {\n ${styles.join('\n ')}\n}`
});
}
}
}
}
}
return {
value: res.map(n => n.content).join('\n'),
origin: res
};
}
export function insertCustomStyle(
css: any,
classNames: {
key: string;
value?: string;
weights?: {
default?: extra;
hover?: extra;
active?: extra;
disabled?: extra;
};
}[],
id?: string
) {
if (!css) {
return;
}
const {value} = formatStyle(css, classNames, id);
insertStyle(value, id?.replace('u:', '') || uuid());
}

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

@ -5,6 +5,7 @@
import {resolveVariableAndFilter} from './tpl-builtin';
import mapValues from 'lodash/mapValues';
import camelCase from 'lodash/camelCase';
import {valueMap} from './style-helper';
function autoAddImageURL(image: string) {
// 只支持单个的情况，并简单滤掉 linear-gradient 等情况
@ -34,8 +35,19 @@ export function buildStyle(style: any, data: any) {
: mapValues(style, s => resolveVariableAndFilter(s, data, '| raw') || s);
Object.keys(styleVar).forEach((key: string) => {
if (key === 'radius') {
styleVar['borderRadius'] =
styleVar.radius['top-left-border-radius'] +
' ' +
styleVar.radius['top-right-border-radius'] +
' ' +
styleVar.radius['bottom-right-border-radius'] +
' ' +
styleVar.radius['bottom-left-border-radius'];
delete styleVar['radius'];
}
if (key.indexOf('-') !== -1) {
styleVar[camelCase(key)] = styleVar[key];
styleVar[camelCase(valueMap[key] || key)] = styleVar[key];
delete styleVar[key];
}
});

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

File diff suppressed because it is too large Load Diff

21
packages/amis-ui/scss/_mixins.scss
View File

@ -182,6 +182,9 @@
&:hover {
@content;
}
&.hover {
@content;
}
}
@mixin focus {
@ -200,11 +203,15 @@
&:hover:active {
@content;
}
&.active {
@content;
}
}
@mixin button-size(
$font-size: var(--button-size-default-font-size),
$line-height: var(--button-size-default-font-lineHeight),
$font-size: var(--button-size-default-fontSize),
$font-weight: var(--button-size-default-fontWeight),
$line-height: var(--button-size-default-lineHeight),
$border-radius-top-right: var(--button-size-default-top-right-border-radius),
$border-radius-top-left: var(--button-size-default-top-left-border-radius),
$border-radius-bottom-right:
@ -225,8 +232,9 @@
$iconMargin: var(--button-size-default-icon-margin)
) {
font-size: $font-size;
font-weight: $font-weight;
line-height: $line-height;
border-radius: $border-radius-top-right $border-radius-top-left
border-radius: $border-radius-top-left $border-radius-top-right
$border-radius-bottom-right $border-radius-bottom-left;
height: $height;
padding: $paddingTop $paddingRight $paddingBottom $paddingLeft;
@ -483,8 +491,8 @@
}
&.is-error > &-input {
border-color: var(--Form-input-onError-borderColor);
background: var(--Form-input-onError-bg);
border-color: var(--Form-item-onError-borderColor);
background: var(--Form-item-onError-bg);
transition: all var(--animation-duration);
}
@ -496,7 +504,8 @@
}
&.is-error.is-focused > &-input {
border-color: var(--Form-input-onError-borderColor);
border-color: var(--Form-item-onError-borderColor);
background: var(--Form-item-onError-bg);
}
&.is-disabled > &-input {

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

@ -79,12 +79,6 @@ $remFactor: 16px;
--code-color: var(--danger);
--code-background: var(--background);
--pre-background: var(--background);
--link-color: var(--info);
--link-decoration: none;
--link-onHover-color: var(--colors-brand-5);
--link-onClick-color: var(--colors-brand-4);
--link-onHover-decoration: none;
--body-bg: var(--light);
--body-size: var(--fontSizeBase);
@ -95,8 +89,8 @@ $remFactor: 16px;
--gap-sm: var(--sizes-size-5);
--gap-base: var(--sizes-size-7);
--gap-md: var(--sizes-size-9);
--gap-lg: var(--sizes-base-11);
--gap-xl: var(--sizes-base-13);
--gap-lg: var(--sizes-base-10);
--gap-xl: var(--sizes-base-12);
--icon-color: var(--colors-neutral-text-5);
--icon-onHover-color: var(--colors-brand-5);
@ -116,18 +110,18 @@ $remFactor: 16px;
// 以下是分组件的
--Alert--danger-bg: var(--colors-error-10);
--Alert--danger-borderColor: var(--colors-neutral-fill-none);
--Alert--danger-borderColor: transparent;
--Alert--danger-color: var(--colors-neutral-text-2);
--Alert--info-bg: var(--colors-info-10);
--Alert--info-borderColor: var(--colors-neutral-fill-none);
--Alert--info-borderColor: transparent;
--Alert--info-color: var(--colors-neutral-text-2);
--Alert--success-bg: var(--colors-success-10);
--Alert--success-borderColor: var(--colors-neutral-fill-none);
--Alert--success-borderColor: transparent;
--Alert--success-color: var(--colors-neutral-text-2);
--Alert--warning-bg: var(--colors-warning-10);
--Alert--warning-borderColor: var(--colors-neutral-fill-none);
--Alert--warning-borderColor: transparent;
--Alert--warning-color: var(--colors-neutral-text-2);
--Alert-borderColor: var(--colors-neutral-fill-none);
--Alert-borderColor: transparent;
--Alert-borderRadius: var(--borders-radius-3);
--Alert-borderWidth: var(--borderWidth);
--Alert-boxShadow: none;
@ -137,7 +131,7 @@ $remFactor: 16px;
--Alert-paddingY: var(--gap-xs);
--Alert-fontColor: var(--colors-neutral-text-4);
--Alert-title-fontColor: var(--colors-neutral-text-2);
--Alert-height: var(--sizes-base-21);
--Alert-height: var(--sizes-base-20);
--Audio-border: #{px2rem(1px)} solid #dee2e6;
--Audio-height: #{px2rem(50px)};
@ -280,9 +274,9 @@ $remFactor: 16px;
--Calendar-icon-height: var(--sizes-size-6);
--Calendar-borderWidth: var(--borders-width-2);
--Calendar-borderColor: var(--colors-brand-5);
--Calendar-rdt-day: var(--sizes-base-50);
--Calendar-rdt-day: var(--sizes-base-49);
--Calendar-schedule-content-padding: 0 var(--sizes-size-3);
--Calendar-schedule-content-height: var(--sizes-base-11);
--Calendar-schedule-content-height: var(--sizes-base-10);
--Calendar-schedule-content-color: var(--colors-neutral-text-11);
--Card-actions-borderColor: var(--colors-neutral-line-10);
@ -331,29 +325,6 @@ $remFactor: 16px;
--Carousel-svg-width: var(--gap-lg);
--Carousel-transitionDuration: var(--animation-duration);
--Checkbox--full-inner-size: var(--sizes-size-5);
--Checkbox--sm--full-inner-size: var(--sizes-size-5);
--Checkbox--sm-inner-size: var(--sizes-size-5);
--Checkbox--sm-size: var(--sizes-size-8);
--Checkbox-borderRadius: #{px2rem(2px)};
--Checkbox-color: var(--Form-input-borderColor);
--Checkbox-gap: var(--gap-xs);
--Checkbox-gb: #fff;
--Checkbox-size: #{px2rem(16px)};
--Checkbox-inner-size: var(--sizes-size-5);
--Checkbox-onHover-color: var(--info);
--Checkbox-onDisabled-bg: var(--colors-neutral-fill-10);
--Checkbox-onDisabled-color: var(--colors-neutral-text-6);
--Checkbox-inner-onDisabled-bg: #d4d6d9;
--Checkbox-inner-onDisabled-color: #ffffff;
--Checkbox-disabled-unchecked-bg: #f7f7f9;
--Checkbox-inner-disabled-checked-bg: #e8e9eb;
--Checkbox-border-width: var(--Form-input-borderWidth);
--Checkbox-paddingX: #{px2rem(12px)};
--Checkbox-button-height: #{px2rem(32px)};
--Checkbox-button-line-height: #{px2rem(28px)};
--Checkbox-button-min-width: #{px2rem(80px)};
--ColorPicker-bg: var(--colors-neutral-fill-11);
--ColorPicker-borderColor: var(--Form-input-borderColor);
--ColorPicker-borderRadius: var(--borders-radius-3);
@ -392,7 +363,8 @@ $remFactor: 16px;
--Combo-addBtn-borderRadius: var(--borders-radius-3);
--Combo-addBtn-color: var(--colors-neutral-text-11);
--Combo-addBtn-fontSize: var(--fonts-size-8);
--Combo-addBtn-height: var(--sizes-base-14);
--Combo-addBtn-fontWeight: var(--fonts-weight-6);
--Combo-addBtn-height: var(--sizes-base-13);
--Combo-addBtn-lineHeight: var(--fonts-lineHeight-2);
--Combo-addBtn-onActive-bg: var(--colors-brand-4);
--Combo-addBtn-onActive-border: var(--colors-neutral-line-4);
@ -417,24 +389,6 @@ $remFactor: 16px;
--Copyable-iconColor: var(--icon-color);
--Copyable-onHover-iconColor: var(--icon-onHover-color);
--Collapse-border: var(--borders-width-2) solid var(--colors-neutral-line-8);
--Collapse-border-color: var(--colors-neutral-line-8);
--Collapse-header-fontSize: var(--fonts-size-7);
--Collapse-header-fontWeight: var(--fonts-weight-6);
--Collapse-header-padding: var(--sizes-size-9);
--Collapse-header-bg: var(--colors-neutral-fill-10);
--Collapse-header-onHover-bg: var(--colors-neutral-fill-9);
--Collapse-header-collapsed-border: var(--borderWidth) solid
var(--Collapse-border-color);
--Collapse-header-collapsed-borderTop: none;
--Collapse-header-collapsed-borderBottom: none;
--Collapse-header-wrapper-direction: row-reverse;
--Collapse-header-bg-disabled-color: var(--colors-neutral-fill-6);
--Collapse-content-padding: var(--sizes-size-9);
--Collapse-content-color: var(--colors-neutral-text-4);
--Collapse-content-fontSize: var(--fonts-size-8);
--Collapse-content-fontWeight: var(--fonts-weight-6);
--Crud-toolbar-gap: var(--sizes-size-6);
--Crud-toolbar-height: #{px2rem(30px)};
--Crud-toolbar-lineHeight: var(--lineHeightBase);
@ -478,10 +432,8 @@ $remFactor: 16px;
--LocationPicker-borderRadius: var(--borders-radius-3);
--Divider-borderStyle: solid;
--Drawer-bg: var(--background);
--Drawer-body-padding: var(--sizes-base-13);
--Drawer-body-padding: var(--sizes-base-12);
--Drawer-footer-margin: var(--sizes-size-9);
--Drawer-close-color: var(--colors-neutral-text-2);
--Drawer-close-onHover-color: var(--text-color);
@ -493,7 +445,7 @@ $remFactor: 16px;
--Drawer-footer-padding: var(--gap-base);
--Drawer-header-bg: var(--colors-neutral-fill-11);
--Drawer-header-borderColor: var(--colors-neutral-line-10);
--Drawer-header-padding: var(--sizes-size-9) var(--sizes-base-13);
--Drawer-header-padding: var(--sizes-size-9) var(--sizes-base-12);
--Drawer-overlay-bg: rgba(0, 0, 0, 0.6);
--Drawer-title-fontColor: var(--colors-neutral-text-2);
--Drawer-title-fontSize: var(--fontSizeMd);
@ -531,11 +483,6 @@ $remFactor: 16px;
--Form--horizontal-gutterWidth: var(--gap-md);
--Form--horizontal-label-align: right;
--Form--horizontal-label-whiteSpace: normal;
--Form--horizontal-label-widthBase: var(--sizes-base-50);
--Form--horizontal-label-widthLg: #{px2rem(200px)};
--Form--horizontal-label-widthMd: #{px2rem(140px)};
--Form--horizontal-label-widthSm: var(--sizes-base-36);
--Form--horizontal-label-widthXs: var(--sizes-base-26);
--Form--horizontal-justify-label-align: left;
--Form--horizontal-justify-value-align: right;
@ -546,12 +493,7 @@ $remFactor: 16px;
--Form-control-widthSm: #{px2rem(160px)};
--Form-control-widthXs: #{px2rem(80px)};
--Form-description-color: var(--colors-neutral-text-5);
--Form-description-fontSize: var(--fontSizeSm);
--Form-fontSize: var(--fontSizeBase);
--Form-item-fontSize: var(--fontSizeBase);
--Form-item-fontColor: var(--colors-neutral-text-4);
--Form-group--lg-gutterWidth: #{px2rem(40px)};
--Form-group--md-gutterWidth: #{px2rem(30px)};
@ -569,7 +511,7 @@ $remFactor: 16px;
--Form-input-boxShadow: none;
--Form-input-color: var(--colors-neutral-text-2);
--Form-input-fontSize: var(--Form-fontSize);
--Form-input-height: var(--sizes-base-17);
--Form-input-height: var(--sizes-base-16);
--Form-input-iconColor: var(--colors-neutral-text-5);
--Form-input-lineHeight: var(--fonts-lineHeight-2);
--Form-input-marginBottom: var(--sizes-size-3);
@ -590,11 +532,6 @@ $remFactor: 16px;
--Form-input-password-icon-size: var(--sizes-size-9);
--Form-input-password-icon-color: var(--colors-neutral-text-5);
--Form-inputNumber-paddingX: #{px2rem(12px)};
--Form-inputNumber-base-width: #{px2rem(24px)};
--Form-inputNumber-base-height: #{px2rem(32px)};
--Form-inputNumber-strong-disabled-color: #b4b6ba;
--Form-input-paddingY: calc(
(
var(--Form-input-height) - var(--Form-input-lineHeight) *
@ -610,8 +547,6 @@ $remFactor: 16px;
--Form-input-clearBtn-color-onHover: var(--colors-neutral-text-4);
--Form-input-clearBtn-color-onActive: var(--colors-neutral-text-3);
--Form-item-gap: var(--sizes-base-13);
--Form-label-paddingTop: calc(
(
var(--Form-input-height) - var(--Form-input-lineHeight) *
@ -633,7 +568,7 @@ $remFactor: 16px;
--Form-select-input-fontSize: var(--fontSizeSm);
--Form-select-menu-bg: var(--colors-neutral-fill-11);
--Form-select-menu-color: var(--colors-neutral-text-2);
--Form-select-menu-height: var(--sizes-base-13);
--Form-select-menu-height: var(--sizes-base-12);
--Form-select-menu-onActive-bg: transparent;
--Form-select-menu-onActive-color: var(--colors-brand-5);
--Form-select-menu-onDisabled-bg: transparent;
@ -647,13 +582,13 @@ $remFactor: 16px;
--Form-select-onHover-bg: var(--colors-neutral-fill-11);
--Form-select-onHover-borderColor: var(--colors-brand-5);
--Form-select-outer-borderWidth: var(--borders-width-1);
--Form-select-outer-top: var(--sizes-base-17);
--Form-select-outer-top: var(--sizes-base-16);
--Form-select-outer-boxShadow: var(--shadows-shadow-normal);
--Form-select-paddingX: var(--Form-input-paddingX);
--Form-select-placeholderColor: var(--Form-input-placeholderColor);
--Form-select-popoverGap: var(--borders-radius-3);
--Form-select-icon-rigin: var(--sizes-size-9);
--Form-select-search-height: var(--sizes-base-16);
--Form-select-search-height: var(--sizes-base-15);
--Form-select-value-bgColor: var(--Form-input-onDisabled-bg);
--Form-select-value-bgColor--dark: var(--colors-neutral-fill-4);
--Form-select-value-borderColor: var(--colors-neutral-line-9);
@ -692,32 +627,6 @@ $remFactor: 16px;
--IconPicker-tab-padding: 0 #{px2rem(10px)};
--IconPicker-tabs-bg: #f0f3f4;
--ImageControl-addBtn-bg: var(--colors-neutral-fill-11);
--ImageControl-addBtn-border: var(--colors-neutral-line-7);
--ImageControl-addBtn-borderRadius: var(--borders-radius-3);
--ImageControl-addBtn-color: var(--colors-neutral-text-5);
--ImageControl-addBtn-onActive-bg: var(--colors-neutral-fill-8);
--ImageControl-addBtn-onActive-border: var(--colors-brand-5);
--ImageControl-addBtn-onActive-color: var(--colors-brand-5);
--ImageControl-addBtn-onDisabled-bg: var(--colors-neutral-fill-10);
--ImageControl-addBtn-onDisabled-border: var(--colors-neutral-line-8);
--ImageControl-addBtn-onDisabled-color: var(--colors-neutral-text-6);
--ImageControl-addBtn-onHover-bg: var(--colors-neutral-fill-11);
--ImageControl-addBtn-onHover-border: var(--colors-brand-5);
--ImageControl-addBtn-onHover-color: var(--colors-brand-5);
--ImageControl-addBtn-upload-color: var(--colors-neutral-text-3);
--ImageControl-progress-borderRadius: var(--borders-radius-2);
--FileControl-danger-color: var(--colors-error-5);
--FileControl-drag-color: var(--colors-neutral-text-3);
--FileControl-border-color: var(--colors-neutral-line-8);
--FileControl-onDisabled-color: var(--colors-neutral-text-6);
--FileControl-onDisabled-bg: var(--colors-neutral-fill-10);
--FileControl-onHover-bg: var(--colors-neutral-fill-9);
--FileControl-icon-color: var(--colors-neutral-text-5);
--FileControl-icon-onHover-color: var(--colors-neutral-text-4);
--FileControl-progress-borderRadius: var(--borders-radius-2);
--InputGroup-addOn-bg: var(--Form-input-addOnBg);
--InputGroup-addOn-borderColor: var(--Form-input-borderColor);
--InputGroup-addOn-borderRadius: var(--Form-input-borderRadius);
@ -746,47 +655,8 @@ $remFactor: 16px;
--InputGroup-select-onFocused-bg: var(--colors-brand-10);
--InputGroup-select-onFocused-color: var(--colors-brand-5);
--InputRange-padding: #{px2rem(20px)};
--InputRange-onDisabled-color: var(--light);
--InputRange-primaryColor: var(--colors-brand-5);
--InputRange-track-height: #{px2rem(6px)};
--InputRange-track-bg: var(--colors-neutral-fill-8);
--InputRange-track-onDisabled-bg: var(--InputRange-onDisabled-color);
--InputRange-track-onActive-bg: var(--InputRange-primaryColor);
--InputRange-track-onActive-onDisabled-bg: var(--colors-neutral-fill-6);
--InputRange-track-onActive-transition: transform var(--animation-duration)
ease-out left;
--InputRange-track-border-radius: #{px2rem(4px)};
--InputRange-track-dot-width: #{px2rem(6px)};
--InputRange-track-dot-height: #{px2rem(6px)};
--InputRange-track-dot-bg: var(--colors-neutral-fill-11);
--InputRange-track-transition: left var(--animation-duration) ease-out,
width var(--animation-duration) ease-out;
--InputRange-handle-height: #{px2rem(16px)};
--InputRange-handle-width: #{px2rem(16px)};
--InputRange-handle-bg: var(--colors-neutral-fill-11);
--InputRange-handle-border: #{px2rem(1px)} solid var(--InputRange-primaryColor);
--InputRange-handle-onDisabled-border-color: #ceced1;
--InputRange-handle-onActive-transform: scale(1.3);
--InputRange-handle-onDrage-border-width: #{px2rem(2px)};
--InputRange-handle-onDisabled-bg: var(--InputRange-onDisabled-color);
--InputRange-handle-onDisabled-border: #{px2rem(1px)} solid var(--InputRange-onDisabled-color);
--InputRange-handle-onFocus-borderRadius: var(--borderRadiusMd);
--InputRange-handele-onFocus-boxShadow: 0 0 0
var(--InputRange-slider-onFocus-borderRadius) #{transparentize($info, 0.8)};
--InputRange-handle-transition: transform var(--animation-duration) ease-out,
box-shadow var(--animation-duration) ease-out;
--InputRange-handle-icon-width: #{px2rem(8px)};
--InputRange-handle-icon-height: #{px2rem(8px)};
--InputRange-label-padding: #{px2rem(8px)};
--InputRange-label-bg: #000;
--InputRange-label-color: var(--colors-neutral-fill-11);
--InputRange-label-font-size: #{px2rem(14px)};
--InputRange-label-border-radius: #{px2rem(4px)};
--InputRange-label-position-bottom: calc(100% + 8px);
--Layout--offscreen-width: 75%;
--Layout-aside--folded-width: var(--sizes-base-31);
--Layout-aside--folded-width: var(--sizes-base-30);
--Layout-aside--lg-width: #{px2rem(300px)};
--Layout-aside--md-width: #{px2rem(250px)};
--Layout-aside--sm-width: #{px2rem(150px)};
@ -821,7 +691,7 @@ $remFactor: 16px;
--Layout-header-height: #{px2rem(50px)};
--Layout-headerBar-borderBottom: none;
--Layout-footer-height: #{px2rem(50px)};
--Layout-nav--folded-height: var(--sizes-base-21);
--Layout-nav--folded-height: var(--sizes-base-20);
--Layout-nav-height: #{px2rem(40px)};
--Layout-nav-lgHeight: #{px2rem(50px)};
--Layout-body-bg: var(--body-bg);
@ -891,7 +761,7 @@ $remFactor: 16px;
--ListMenu-item--onHover-color: var(--colors-neutral-text-2);
--ListMenu-item-bg: var(--colors-neutral-fill-11);
--ListMenu-item-color: var(--colors-neutral-text-2);
--ListMenu-item-height: var(--sizes-base-16);
--ListMenu-item-height: var(--sizes-base-15);
--Log-bg: #222;
--Log-padding: var(--gap-sm) 0;
@ -906,7 +776,7 @@ $remFactor: 16px;
--Modal-body-borderTop: var(--borders-style-1) solid
var(--colors-neutral-line-10);
--Modal-body-paddingX: var(--sizes-size-0);
--Modal-body-paddingY: var(--sizes-base-13);
--Modal-body-paddingY: var(--sizes-base-12);
--Modal-close-color: var(--text--muted-color);
--Modal-close-width: #{px2rem(16px)};
--Modal-content-borderColor: var(--borderColor);
@ -970,7 +840,7 @@ $remFactor: 16px;
--Number-handler-onDisabled-color: var(--text--muted-color);
--Number-handler-onHover-bg: var(--colors-neutral-fill-11);
--Number-handler-onHover-color: var(--colors-brand-5);
--Number-handler-width: var(--sizes-base-13);
--Number-handler-width: var(--sizes-base-12);
--Number-onDisabled-bg: var(--Form-input-bg);
--Page-aside-bg: var(--colors-neutral-fill-11);
@ -1002,31 +872,6 @@ $remFactor: 16px;
--Panel--default-badgeBg: var(--colors-neutral-fill-3);
--Panel--default-badgeColor: var(--colors-neutral-fill-10);
--Panel--default-bg: var(--colors-neutral-fill-10);
--Panel--default-color: var(--text-color);
--Panel--default-headingBorderColor: var(--borderColor);
--Panel-bg: var(--colors-neutral-fill-11);
--Panel-bodyPadding: var(--gap-base);
--Panel-border: var(--borderWidth) solid transparent;
--Panel-borderRadius: var(--borders-radius-3);
--Panel-borderWidth: #{px2rem(1px)};
--Panel-boxShadow: 0 #{px2rem(1px)} #{px2rem(1px)} rgba(0, 0, 0, 0.05);
--Panel-btnToolbarTextAlign: right;
--Panel-fixedBottom-borderTop: none;
--Panel-fixedBottom-boxShadow: var(--shadows-shadow-normal);
--Panel-footerBg: transparent;
--Panel-footerBorderColor: var(--borderColorLight);
--Panel-footerBorderRadius: 0 0 #{px2rem(2px)} #{px2rem(2px)};
--Panel-footerButtonMarginLeft: var(--gap-sm);
--Panel-footerPadding: var(--gap-sm) var(--gap-base);
--Panel-headingBorderBottom: var(--borderWidth) solid transparent;
--Panel-headingBorderRadius: var(--borderRadius) var(--borderRadius) 0 0;
--Panel-headingPadding: var(--gap-sm) var(--gap-base);
--Panel-marginBottom: var(--gap-lg);
--Panel-titleColor: inherit;
--Panel-titleFontSize: var(--fontSizeMd);
--Panel-titleMarginBottom: 0;
--Panel-titleMarginTop: 0;
--Picker-iconColor: var(--icon-color);
--Picker-onHover-iconColor: var(--icon-onHover-color);
@ -1066,15 +911,6 @@ $remFactor: 16px;
--QuickEdit-onFocus-borderWidth: var(--borderWidth);
--QuickEdit-onHover-iconColor: inherit;
--Radio--sm-size: var(--Checkbox--sm-size);
--Radio-color: var(--Checkbox-color);
--Radio-inner-size: var(--sizes-size-5);
--Radio-onHover-color: var(--Checkbox-onHover-color);
--Radio-size: var(--sizes-size-9);
--Radio-onDisabled-bg: #e5e7eb;
--Radio-onDisabled-color: var(--text--muted-color);
--Radio-onFocus-boxShadow: none;
--Remark-bg: var(--colors-neutral-text-11);
--Remark-borderColor: var(--colors-neutral-line-8);
--Remark-borderWidth: var(--borders-width-2);
@ -1099,11 +935,6 @@ $remFactor: 16px;
--ResultBox-value-clear-bg: var(--colors-neutral-fill-8);
--ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9);
--Rating-inactive-color: var(--colors-neutral-text-9);
--Rating-text-color: var(--colors-neutral-text-2);
--Rating-star-margin: #{px2rem(8px)};
--Rating-star-size: #{px2rem(24px)};
--Satus-icon-width: var(--sizes-size-8);
--Satus-icon-height: var(--Satus-icon-width);
@ -1121,39 +952,6 @@ $remFactor: 16px;
--Spinner-width: #{px2rem(32px)};
--Spinner-color: var(--colors-brand-5);
--Switch-bgColor: var(--colors-neutral-fill-7);
--Switch-borderColor: var(--colors-neutral-line-6);
--Switch-gap: var(--gap-sm);
--Switch-height: var(--sizes-base-11);
--Switch-onActive-bgColor: var(--colors-brand-5);
--Switch-onDisabled-bgColor: var(--colors-brand-9);
--Switch-onDisabled-circle-BackgroundColor: var(--colors-neutral-fill-11);
--Switch-onDisabled-color: var(--colors-neutral-text-11);
--Switch-onHover-bgColor: var(--colors-neutral-fill-6);
--Switch-valueColor: var(--colors-neutral-text-11);
--Switch-width: var(--sizes-base-23);
--Switch-slider-margin: #{px2rem(1px)};
--Switch-slider-width: calc(
var(--Switch-height) - var(--Switch-slider-margin) * 2
);
--Switch-slider-transition: margin-left var(--animation-duration);
--Switch-text-marginRight: #{px2rem(8px)};
--Switch-text-marginLeft: #{px2rem(25px)};
--Switch-width--sm: #{px2rem(28px)};
--Switch-height--sm: #{px2rem(16px)};
--Switch-slider-width--sm: calc(
var(--Switch-height--sm) - var(--Switch-slider-margin) * 2
);
--Switch-text-marginRight--sm: calc(
var(--Switch-slider-margin) * 2 + var(--Switch-text-marginRight) / 2
);
--Switch-text-marginLeft--sm: calc(
var(--Switch-slider-margin) * 2 + var(--Switch-text-marginLeft) / 2
);
--Switch-checked-bgColor: var(--colors-brand-5);
--Switch-checked-onHover-bgColor: var(--colors-brand-4);
--Switch-checked-onActive-bgColor: var(--colors-brand-4);
--Table--unsaved-heading-bg: #e8f0fe;
--Table--unsaved-heading-color: #4285f4;
--Table-bg: var(--colors-neutral-fill-11);
@ -1187,7 +985,7 @@ $remFactor: 16px;
--Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
--Table-onModified-color: #4285f4;
--Table-placeholder-height: #{px2rem(200px)};
--Table-strip-bg: var(--colors-neutral-fill-none);
--Table-strip-bg: transparent;
--Table-tbody-borderTopColor: var(--colors-neutral-line-9);
--Table-thead-bg: var(--colors-neutral-fill-10);
--Table-thead-borderColor: var(--colors-neutral-line-11);
@ -1209,7 +1007,7 @@ $remFactor: 16px;
--TableCell--edge-paddingX-default: var(--gap-base);
--TableCell-filterBtn--onActive-color: var(--colors-brand-5);
--TableCell-filterBtn-width: #{px2rem(16px)};
--TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-16);
--TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-15);
--TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0)
var(--sizes-size-6);
--TableCell-line-height-large: #{px2rem(40px)};
@ -1255,89 +1053,14 @@ $remFactor: 16px;
--Table-fixedRightFirst-boxShadow: inset -10px 0 8px -8px #00000026;
--Table-loading-padding: 30px 0px;
--Tabs--card-bg: var(--colors-neutral-fill-10);
--Tabs--card-borderTopColor: var(--borderColor);
--Tabs--card-linkMargin: 0 10px 0 0;
--Tabs--card-linkPadding: #{px2rem(10px)} #{px2rem(10px)};
--Tabs--card-onActive-bg: var(--background);
--Tabs--card-onActive-borderColor: var(--colors-neutral-line-11);
--Tabs--card-padding: #{px2rem(6px)} 0 0 #{px2rem(10px)};
--Tabs--card-add-gap: var(--gap-md);
--Tabs--card-add-gap-top: #{px2rem(7px)};
--Tabs--card-arrow-gap: var(--gap-sm);
--Tabs--line-borderColor: var(--borderColor);
--Tabs--line-borderWidth: #{px2rem(2px)};
--Tabs--line-content-bg: transparent;
--Tabs--line-content-padding: var(--gap-base) 0;
--Tabs--line-linkMargin: 0 32px 0 0;
--Tabs--line-linkPadding: 0 0 8px;
--Tabs--line-addPadding: 0 0 10px;
--Tabs--line-padding: var(--gap-md);
--Tabs--line-onHover-borderColor: var(--colors-brand-5);
--Tabs--line-onHover-color: var(--colors-brand-5);
--Tabs--radio-bg: var(--colors-neutral-fill-11);
--Tabs--vertical-onActive-borderColor: var(--colors-brand-5);
--Tabs--tiled-add-gap: var(--gap-base);
--Tabs--simple-split-width: #{px2rem(1px)};
--Tabs--strong-add-size: #{px2rem(32px)};
--Tabs--strong-arrow-size: #{px2rem(24px)};
--Tabs-borderColor: var(--colors-neutral-line-8);
--Tabs-link-disabled-color: var(--colors-neutral-text-6);
--Tabs--simple-split-size: var(--sizes-size-3) var(--sizes-size-9);
--Tabs--sidebar-iconColor: var(--colors-brand-5);
--Tabs--simple-split-color: var(--colors-neutral-text-8);
--Tabs-borderRadius: var(--borderRadius);
--Tabs-borderWidth: var(--borderWidth);
--Tabs-color: var(--text-color);
--Tabs-content-bg: var(--background);
--Tabs-linkFontSize: var(--fonts-size-7);
--Tabs-linkMargin: 0 #{px2rem(3px)} 0 0;
--Tabs-linkPadding: var(--gap-sm) var(--gap-base);
--Tabs-onActive-bg: var(--background);
--Tabs-onActive-borderColor: var(--borderColor);
--Tabs-onActive-color: var(--colors-neutral-text-2);
--Tabs-onDisabled-color: var(--colors-neutral-text-7);
--Tabs-onHover-borderColor: var(--colors-neutral-line-8);
--Tabs-add-icon-size: #{px2rem(15px)};
--Tabs-add-icon-padding: #{px2rem(1px)};
--Tabs-add-icon-margin: var(--gap-xs);
--Tabs-add-margin: var(--gap-lg);
--Tabs-gray-color: #83868c;
--Tabs-close-margin: #{var(--gap-xs)};
--Tabs-close-marginTop: #{px2rem(1px)};
--Tabs-close-size: #{px2rem(12px)};
--Tabs-link-maxWidth: #{px2rem(160px)};
--Tabs-icon-gap: var(--gap-sm);
--Tabs-animation-duration: var(--animation-duration);
--Tabs--sidebar-sideWidth: #{px2rem(62px)};
--Tabs--sidebar-sidePadding: #{px2rem(27px)};
--Tabs--sidebar-sideMargin: 0 0 #{px2rem(22px)} 0;
--Tabs--sidebar-iconSize: #{px2rem(24px)};
--Tabs--sidebar-iconMargin: #{px2rem(5px)};
--Tabs--vertical-bg: var(--Table-thead-bg);
--Tabs--vertical-width: #{px2rem(140px)};
--Tabs--vertical-onActive-color: var(--colors-brand-5);
--Tabs--vertical-onActive-border: var(--colors-brand-5);
--Tabs--vertical-onActive-bg: var(--Tabs--vertical-bg);
--Tabs--vertical-onActive-borderWidth: 0 0 0 #{px2rem(4px)};
--Tabs--vertical-onActive-container-borderRight: none;
--Tabs--vertical-onActive-container-bg: var(--Tabs--vertical-bg);
--Tabs--chrome-onHover-bg: var(--colors-neutral-fill-10);
--Tabs--chrome-bg: var(--colors-neutral-fill-10);
--Tabs--chrome-radius-size: #{px2rem(8px)};
--Tabs--chrome-right-border-color: var(--colors-neutral-line-5);
--TagControl-sugBtn-bg: var(--colors-neutral-fill-none);
--TagControl-sugBtn-bg: transparent;
--TagControl-sugBtn-border: var(--colors-neutral-line-7);
--TagControl-sugBtn-borderRadius: var(--borders-radius-2);
--TagControl-sugBtn-borderWidth: var(--borders-width-2);
--TagControl-sugBtn-color: var(--colors-neutral-text-2);
--TagControl-sugBtn-fontSize: var(--fonts-size-8);
--TagControl-sugBtn-height: var(--sizes-base-16);
--TagControl-sugBtn-fontWeight: var(--fonts-weight-6);
--TagControl-sugBtn-height: var(--sizes-base-15);
--TagControl-sugBtn-lineHeight: var(--fonts-lineHeight-2);
--TagControl-sugBtn-onActive-bg: var(--colors-neutral-fill-8);
--TagControl-sugBtn-onActive-border: var(--colors-neutral-line-5);
@ -1381,7 +1104,7 @@ $remFactor: 16px;
--Toast-icon-height: var(--Toast-icon-width);
--Toast-opacity: 1;
--Toast-paddingL: var(--sizes-base-14);
--Toast-paddingL: var(--sizes-base-13);
--Toast-paddingX: var(--sizes-size-9);
--Toast-paddingY: var(--gap-xs);
--Toast-title-display: inline;
@ -1445,7 +1168,7 @@ $remFactor: 16px;
--Tree-item-onHover-bg: var(--colors-neutral-fill-10);
--Tree-item-onHover-bg-pure: var(--colors-neutral-fill-10);
--Tree-itemArrowWidth: #{px2rem(16px)};
--Tree-itemHeight: var(--sizes-base-13);
--Tree-itemHeight: var(--sizes-base-12);
--Tree-itemLabel--onChecked-color: var(--Form-selectValue-color);
--TreeSelect-popover-bg: var(--colors-neutral-fill-11);
--Tree-item-text-max-height: #{px2rem(250px)};
@ -1464,11 +1187,11 @@ $remFactor: 16px;
--Wizard-badge-marginRight: var(--sizes-size-4);
--Wizard-badge-onActive-backgroundColor: var(--colors-neutral-text-3);
--Wizard-badge-onComplete-backgroundColor: var(--colors-neutral-text-3);
--Wizard-badge-size: var(--sizes-base-14);
--Wizard-badge-size: var(--sizes-base-13);
--Wizard-steps-bg--isComplete: var(--colors-neutral-fill-11);
--Wizard-steps-bg: var(--colors-neutral-fill-11);
--Wizard-steps-borderWidth: var(--borders-width-1);
--Wizard-steps-height: var(--sizes-base-31);
--Wizard-steps-height: var(--sizes-base-30);
--Wizard-steps-li-onActive-arrow-bg: var(--colors-neutral-text-11);
--Wizard-steps-li-onActive-bg: var(--colors-neutral-fill-11);
--Wizard-steps-li-onActive-color: var(--colors-neutral-text-3);
@ -1623,7 +1346,7 @@ $remFactor: 16px;
--SearchBox-enhonce-icon-color: var(--colors-neutral-text-11);
--SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
--SearchBox-clearable-icon-size: var(--sizes-size-9);
--SearchBox-height: var(--sizes-base-16);
--SearchBox-height: var(--sizes-base-15);
--SearchBox-disabled-color: var(--colors-neutral-text-10);
--SearchBox-enhonce-disabled-color: var(--colors-neutral-text-9);
--SearchBox-enhonce-disabled-search-color: var(--colors-neutral-text-6);

13
packages/amis-ui/scss/base/_typography.scss
View File

@ -18,15 +18,28 @@ body {
a {
color: var(--link-color);
font-size: var(--link-fontSize);
font-weight: var(--link-fontWeight);
text-decoration: var(--link-decoration);
font-style: var(--link-font-style);
background-color: var(--link-bg-color);
&:hover {
color: var(--link-onHover-color);
font-size: var(--link-onHover-fontSize);
font-weight: var(--link-onHover-fontWeight);
text-decoration: var(--link-onHover-decoration);
font-style: var(--link-onHover-font-style);
background-color: var(--link-onHover-bg-color);
}
&:active {
color: var(--link-onClick-color);
font-size: var(--link-onClick-fontSize);
font-weight: var(--link-onClick-fontWeight);
text-decoration: var(--link-onClick-text-decoration);
font-style: var(--link-onClick-font-style);
background-color: var(--link-onClick-bg-color);
}
}

6
packages/amis-ui/scss/components/_anchor-nav.scss
View File

@ -83,7 +83,7 @@
font-size: var(--Tabs-linkFontSize);
outline: 0;
border: var(--Tabs-borderWidth) solid transparent;
border-width: 0 0 var(--Tabs--line-borderWidth) 0;
border-width: 0 0 2px 0;
border-top-left-radius: var(--Tabs-borderRadius);
border-top-right-radius: var(--Tabs-borderRadius);
color: var(--Tabs-color);
@ -112,9 +112,9 @@
> a:first-child:hover,
> a:first-child:focus {
font-size: var(--Tabs-linkFontSize);
border-width: 0 0 var(--Tabs--line-borderWidth) 0;
border-width: 0 0 2px 0;
border-color: var(--Tabs--line-onHover-borderColor);
color: var(--Tabs--line-onHover-color);
color: var(--primary);
background: transparent;
}
}

1
packages/amis-ui/scss/components/_array-input.scss
View File

@ -14,6 +14,7 @@
@include button-size(
var(--Combo-addBtn-fontSize),
var(--Combo-addBtn-fontWeight),
var(--Combo-addBtn-lineHeight),
var(--Combo-addBtn-borderRadius),
var(--Combo-addBtn-borderRadius),

5
packages/amis-ui/scss/components/_button.scss
View File

@ -605,6 +605,7 @@
&--size-default {
@include button-size(
var(--button-size-default-fontSize),
var(--button-size-default-fontWeight),
var(--button-size-default-lineHeight),
var(--button-size-default-top-right-border-radius),
var(--button-size-default-top-left-border-radius),
@ -628,6 +629,7 @@
&--size-xs {
@include button-size(
var(--button-size-xs-fontSize),
var(--button-size-xs-fontWeight),
var(--button-size-xs-lineHeight),
var(--button-size-xs-top-right-border-radius),
var(--button-size-xs-top-left-border-radius),
@ -657,6 +659,7 @@
&--size-sm {
@include button-size(
var(--button-size-sm-fontSize),
var(--button-size-sm-fontWeight),
var(--button-size-sm-lineHeight),
var(--button-size-sm-top-right-border-radius),
var(--button-size-sm-top-left-border-radius),
@ -686,6 +689,7 @@
&--size-md {
@include button-size(
var(--button-size-md-fontSize),
var(--button-size-md-fontWeight),
var(--button-size-md-lineHeight),
var(--button-size-md-top-right-border-radius),
var(--button-size-md-top-left-border-radius),
@ -715,6 +719,7 @@
&--size-lg {
@include button-size(
var(--button-size-lg-fontSize),
var(--button-size-lg-fontWeight),
var(--button-size-lg-lineHeight),
var(--button-size-lg-top-right-border-radius),
var(--button-size-lg-top-left-border-radius),

3
packages/amis-ui/scss/components/_collapse-group.scss
View File

@ -30,8 +30,9 @@
&.icon-position-right {
.#{$ns}Collapse-header {
.#{$ns}Collapse-arrow {
.#{$ns}Collapse-arrow-wrap {
float: right;
margin-right: 0;
}
.#{$ns}Collapse-icon-tranform {

82
packages/amis-ui/scss/components/_collapse.scss
View File

@ -1,14 +1,29 @@
.#{$ns}Collapse {
border: var(--Collapse-border);
border-width: var(--collapse-default-top-border-width)
var(--collapse-default-right-border-width)
var(--collapse-default-bottom-border-width)
var(--collapse-default-left-border-width);
border-style: var(--collapse-default-top-border-style)
var(--collapse-default-right-border-style)
var(--collapse-default-bottom-border-style)
var(--collapse-default-left-border-style);
border-color: var(--collapse-default-top-border-color)
var(--collapse-default-right-border-color)
var(--collapse-default-bottom-border-color)
var(--collapse-default-left-border-color);
border-radius: var(--collapse-default-top-left-border-radius)
var(--collapse-default-top-right-border-radius)
var(--collapse-default-bottom-right-border-radius)
var(--collapse-default-bottom-left-border-radius);
padding: 0;
line-height: px2rem(20px);
border-radius: 4px;
// overflow: hidden;
&-header {
font-size: var(--Collapse-header-fontSize);
font-weight: var(--Collapse-header-fontWeight);
color: var(--text--loud-color);
color: var(--collapse-default-header-color);
line-height: var(--collapse-default-header-lineHeight);
padding: var(--Collapse-header-padding);
margin: 0;
cursor: pointer;
@ -25,28 +40,27 @@
&:hover {
background: var(--Collapse-header-onHover-bg);
color: var(--collapse-default-header-hover-color);
}
}
&-arrow {
display: inline-block;
.Collapse-arrow {
content: var(--collapse-icon-icon);
}
&-arrow-wrap {
width: px2rem(16px);
height: px2rem(16px);
text-align: center;
margin-right: var(--gap-sm);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: var(--collapse-icon-margin);
&:before {
content: '';
position: relative;
display: inline-block;
width: px2rem(6px);
height: px2rem(6px);
top: px2rem(-2px);
border-color: #84868c;
border-style: solid;
border-width: px2rem(1px) px2rem(1px) 0 0;
transform: rotate(45deg);
transform-origin: 50% 50%;
svg {
width: var(--collapse-icon-size);
height: var(--collapse-icon-size);
color: var(--collapse-icon-color);
top: 0;
}
}
@ -62,25 +76,23 @@
// display: inline-block;
// }
&.is-active > * > &-arrow:before {
transform: rotate(135deg);
transform-origin: 50% 30%;
&.is-active &-arrow {
transform: rotate(var(--collapse-icon-rotate));
transform-origin: 50% 50%;
}
&.is-active > * > &-icon-tranform {
transform: rotate(90deg);
transform: rotate(var(--collapse-icon-rotate));
}
&--disabled > &-header {
cursor: not-allowed;
user-select: none;
color: var(--text--muted-color);
&:hover {
background-color: var(--Collapse-header-bg-disabled-color);
}
color: var(--collapse-default-disabled-color);
background: var(--collapse-default-disabled-header-bg-color);
}
&--disabled > * > &-arrow:before {
border-color: var(--text--muted-color);
&--disabled &-arrow-wrap svg {
color: var(--collapse-default-disabled-color);
}
// title 显示在底部的模式
@ -95,14 +107,14 @@
border-top: none;
}
&--title-bottom &-arrow:before {
&--title-bottom &-arrow {
top: px2rem(-4px);
transform: rotate(135deg);
transform: rotate(var(--collapse-icon-rotate));
}
&--title-bottom.is-active &-arrow:before {
&--title-bottom.is-active &-arrow {
top: 0;
transform: rotate(-45deg);
transform: rotate(calc(-1 * var(--collapse-icon-rotate)));
}
&-contentWrapper {
@ -115,9 +127,11 @@
}
&-content {
padding: var(--Collapse-content-padding);
color: var(--body-color);
color: var(--Collapse-content-color);
font-size: var(--Collapse-content-fontSize);
font-weight: var(--Collapse-content-fontWeight);
line-height: var(--collapse-default-content-lineHeight);
background: var(--collapse-default-bg-color);
}
}

6
packages/amis-ui/scss/components/_divider.scss
View File

@ -1,7 +1,7 @@
.#{$ns}Divider {
margin: var(--gap-base) calc(var(--gap-base) * -1);
border-bottom: var(--borderWidth) var(--Divider-borderStyle)
var(--borderColor);
margin: var(--Divider-marginTop) var(--Divider-marginRight)
var(--Divider-marginBottom) var(--Divider-marginLeft);
border-bottom: var(--Divider-width) var(--Divider-style) var(--Divider-color);
height: px2rem(2px);
font-size: 0;

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

@ -1,6 +1,20 @@
.#{$ns}Link {
&.is-disabled {
cursor: not-allowed;
color: var(--text--muted-color);
color: var(--link-disabled-color);
font-size: var(--link-disabled-fontSize);
font-weight: var(--link-disabled-fontWeight);
text-decoration: var(--link-disabled-text-decoration);
font-style: var(--link-disabled-font-style);
background-color: var(--link-disabled-bg-color);
}
i {
font-size: var(--link-icon-size);
margin: 0 var(--link-icon-margin);
}
svg {
height: var(--link-icon-size);
width: var(--link-icon-size);
margin: 0 var(--link-icon-margin);
}
}

61
packages/amis-ui/scss/components/_panel.scss
View File

@ -1,7 +1,12 @@
.#{$ns}Panel {
margin-bottom: var(--Panel-marginBottom);
margin: var(--Panel-marginTop) var(--Panel-marginRight)
var(--Panel-marginBottom) var(--Panel-marginLeft);
background: var(--Panel-bg);
border: var(--Panel-border);
border-color: var(--Panel-top-border-color) var(--Panel-right-border-color)
var(--Panel-bottom-border-color) var(--Panel-left-border-color);
border-style: var(--Panel-top-border-style) var(--Panel-right-border-style)
var(--Panel-bottom-border-style) var(--Panel-left-border-style);
border-width: var(--Panel-borderWidth);
border-radius: var(--Panel-borderRadius);
-webkit-box-shadow: var(--Panel-boxShadow);
box-shadow: var(--Panel-boxShadow);
@ -25,11 +30,12 @@
/* 主题 */
&--default {
border-color: var(--borderColor);
border-color: var(--Panel-top-border-color) var(--Panel-right-border-color)
var(--Panel-bottom-border-color) var(--Panel-left-border-color);
> .#{$ns}Panel-heading {
background: var(--Panel--default-bg);
color: var(--Panel--default-color);
background: var(--Panel-heading-bg);
color: var(--Panel-heading-color);
.badge {
color: var(--Panel--default-badgeColor);
@ -38,7 +44,10 @@
}
> .#{$ns}Panel-heading {
border-color: var(--Panel--default-headingBorderColor);
border-color: var(--Panel-heading-top-border-color)
var(--Panel-heading-right-border-color)
var(--Panel-heading-bottom-border-color)
var(--Panel-heading-left-border-color);
}
}
@ -140,15 +149,27 @@
/* 子组件 */
&-heading {
padding: var(--Panel-headingPadding);
border-bottom: var(--Panel-headingBorderBottom);
border-color: var(--Panel-heading-top-border-color)
var(--Panel-heading-right-border-color)
var(--Panel-heading-bottom-border-color)
var(--Panel-heading-left-border-color);
border-style: var(--Panel-heading-top-border-style)
var(--Panel-heading-right-border-style)
var(--Panel-heading-bottom-border-style)
var(--Panel-heading-left-border-style);
border-width: var(--Panel-heading-top-border-width)
var(--Panel-heading-right-border-width)
var(--Panel-heading-bottom-border-width)
var(--Panel-heading-left-border-width);
border-radius: var(--Panel-headingBorderRadius);
}
&-title {
margin-top: var(--Panel-titleMarginTop);
margin-bottom: var(--Panel-titleMarginBottom);
font-size: var(--Panel-titleFontSize);
color: var(--Panel-titleColor);
margin: 0;
font-size: var(--Panel-heading-fontSize);
color: var(--Panel-heading-color);
font-weight: var(--Panel-heading-fontWeight);
line-height: var(--Panel-heading-lineHeight);
}
&-body {
@ -160,8 +181,14 @@
border-radius: var(--Panel-footerBorderRadius);
background: var(--Panel-footerBg);
padding: var(--Panel-footerPadding);
border-style: solid;
border-width: var(--Panel-borderWidth) 0 0 0;
border-style: var(--Panel-footer-top-border-style)
var(--Panel-footer-right-border-style)
var(--Panel-footer-bottom-border-style)
var(--Panel-footer-left-border-style);
border-width: var(--Panel-footer-top-border-width)
var(--Panel-footer-right-border-width)
var(--Panel-footer-bottom-border-width)
var(--Panel-footer-left-border-width);
clear: both;
.#{$ns}Button + .#{$ns}Button {
@ -189,7 +216,7 @@
border: none;
box-shadow: none;
margin: 0 calc(var(--Panel-bodyPadding) * -1)
margin: 0 calc(var(--Panel-body-paddingTop) * -1)
calc(var(--Panel-marginBottom) / 2);
.#{$ns}Panel-body {
@ -202,20 +229,20 @@
border-radius: 0;
.#{$ns}Panel-title {
padding-left: var(--Panel-bodyPadding);
padding-left: var(--Panel-body-paddingLeft);
border-left: px2rem(3px) solid var(--primary);
font-size: var(--fontSizeLg);
}
}
.#{$ns}Panel-footerWrap {
padding-bottom: var(--Panel-bodyPadding);
padding-bottom: var(--Panel-body-paddingBottom);
}
.#{$ns}Panel-footer {
border-top: none;
display: flex;
padding: 0 var(--Panel-bodyPadding);
padding: 0 var(--Panel-body-paddingLeft);
> .#{$ns}Button {
flex: 1;

550
packages/amis-ui/scss/components/_tabs.scss
View File

@ -7,7 +7,7 @@
display: flex;
align-items: center;
justify-content: flex-start;
border-bottom: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
}
&-linksContainer-wrapper {
@ -227,7 +227,6 @@
&.active > a:first-child,
&.is-active > a:first-child {
color: var(--Tabs-onActive-color);
background: var(--Tabs-onActive-bg);
border-color: var(--Tabs-onActive-borderColor);
border-bottom-color: transparent;
}
@ -277,7 +276,7 @@
background: var(--Tabs-content-bg);
border-style: solid;
border-width: 0 var(--Tabs-borderWidth) var(--Tabs-borderWidth);
border-color: var(--Tabs--simple-split-color);
border-color: var(--Tabs-borderColor);
}
&-pane {
@ -305,8 +304,8 @@
width: 100%;
left: 0;
bottom: 0;
border-bottom: var(--Tabs-borderWidth) solid
var(--Tabs--simple-split-color);
border-bottom: var(--Tabs--line-border-width)
var(--Tabs--line-border-style) var(--Tabs--line-border-color);
}
&--toolbar {
@ -333,11 +332,8 @@
> .#{$ns}Tabs-linksContainer
> .#{$ns}Tabs-linksContainer-main
> .#{$ns}Tabs-links {
border-bottom-color: var(--Tabs--line-borderColor);
> li {
padding-left: var(--Tabs--line-padding);
padding-right: var(--Tabs--line-padding);
padding: 0 calc(var(--Tabs--line-padding) / 2);
&:first-of-type {
padding-left: 0;
@ -348,30 +344,34 @@
}
> a:first-child {
border-width: 0 0 var(--Tabs--line-borderWidth) 0;
padding: var(--Tabs--line-linkPadding);
border-width: 0;
padding: 0 0 px2rem(8px);
color: var(--Tabs--line-color);
font-size: var(--Tabs--line-fontSize);
font-weight: var(--Tabs--line-fontWeight);
line-height: var(--Tabs--line-lineHeight);
}
&:not(.is-disabled):hover {
a:first-child {
color: var(--primary);
color: var(--Tabs--line-hover-color);
font-size: var(--Tabs--line-hover-fontSize);
font-weight: var(--Tabs--line-hover-fontWeight);
line-height: var(--Tabs--line-hover-lineHeight);
background: transparent;
// border-color: transparent;
}
.#{$ns}Tabs-link-close {
fill: var(--primary);
}
> a:first-child:hover:active {
color: #144bcc;
border-color: #144bcc;
fill: var(--Tabs--line-hover-color);
}
}
&:last-child {
> a {
margin: 0;
&.is-disabled {
a:first-child {
color: var(--Tabs--line-disabled-color);
font-size: var(--Tabs--line-disabled-fontSize);
font-weight: var(--Tabs--line-disabled-fontWeight);
line-height: var(--Tabs--line-disabled-lineHeight);
}
}
@ -379,8 +379,13 @@
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
border-color: var(--Tabs--line-onHover-borderColor);
color: var(--Tabs--line-onHover-color);
border-bottom: var(--Tabs--line-active-border-width)
var(--Tabs--line-active-border-style)
var(--Tabs--line-onHover-borderColor);
color: var(--Tabs--line-active-color);
font-size: var(--Tabs--line-active-fontSize);
font-weight: var(--Tabs--line-active-fontWeight);
line-height: var(--Tabs--line-active-lineHeight);
background: transparent;
}
}
@ -389,15 +394,10 @@
> .#{$ns}Tabs-content {
border-width: 0;
background: var(--Tabs--line-content-bg);
}
}
&--card {
> .#{$ns}Tabs-linksContainer {
background: var(--Tabs--card-bg);
}
> .#{$ns}Tabs-linksContainer-wrapper {
background: var(--Tabs--card-bg);
@ -420,36 +420,57 @@
> .#{$ns}Tabs-linksContainer-main > .#{$ns}Tabs-links {
padding: var(--Tabs--card-padding);
border-top: px2rem(1px) solid var(--Tabs--card-borderTopColor);
border-top: var(--Tabs--card-border-width)
var(--Tabs--card-border-style) var(--Tabs--card-borderTopColor);
> li {
padding: var(--Tabs--card-linkPadding);
margin: var(--Tabs--card-linkMargin);
border-top-left-radius: var(--Tabs-borderRadius);
border-top-right-radius: var(--Tabs-borderRadius);
margin-right: var(--Tabs--card-linkMargin);
border-top-left-radius: var(--Tabs--card-borderRadius);
border-top-right-radius: var(--Tabs--card-borderRadius);
background: var(--Tabs--card-linkBg);
cursor: pointer;
&.is-active {
border-color: var(--Tabs--card-onActive-borderColor);
color: var(--primary);
border-bottom-color: var(--Tabs--card-onActive-bg);
background: var(--Tabs--card-onActive-bg);
}
&.is-disabled {
cursor: not-allowed;
}
&:hover,
&:focus {
// color: #666;
background: var(--Tabs--card-onActive-bg);
border-bottom-color: transparent;
}
> a:first-child {
padding: 0;
border: none;
color: var(--Tabs--card-color);
font-size: var(--Tabs--card-fontSize);
font-weight: var(--Tabs--card-fontWeight);
line-height: var(--Tabs--card-lineHeight);
}
&.is-active {
color: var(--Tabs--card-active-color);
background: var(--Tabs--card-onActive-bg);
> a:first-child {
color: var(--Tabs--card-active-color);
font-size: var(--Tabs--card-active-fontSize);
font-weight: var(--Tabs--card-active-fontWeight);
line-height: var(--Tabs--card-active-lineHeight);
}
}
&.is-disabled {
cursor: not-allowed;
background: var(--Tabs--card-disabled-linkBg);
> a:first-child {
color: var(--Tabs--card-disabled-color);
font-size: var(--Tabs--card-disabled-fontSize);
font-weight: var(--Tabs--card-disabled-fontWeight);
line-height: var(--Tabs--card-disabled-lineHeight);
}
}
&:not(.is-disabled):hover,
&:not(.is-disabled):focus {
background: var(--Tabs--card-hover-linkBg);
> a:first-child {
color: var(--Tabs--card-hover-color);
font-size: var(--Tabs--card-hover-fontSize);
font-weight: var(--Tabs--card-hover-fontWeight);
line-height: var(--Tabs--card-hover-lineHeight);
}
}
}
}
@ -485,56 +506,119 @@
> li {
margin: 0;
align-items: center;
border-width: px2rem(1px);
border-color: var(--Tabs--simple-split-color);
justify-content: center;
text-align: center;
margin: 0;
padding: 0 px2rem(10px);
min-width: 68px;
height: px2rem(30px);
height: var(--Tabs--radio-height);
background: var(--Tabs--radio-bg);
border-style: solid;
border-style: var(--Tabs--radio-top-border-style)
var(--Tabs--radio-right-border-style)
var(--Tabs--radio-bottom-border-style)
var(--Tabs--radio-left-border-style);
border-color: var(--Tabs--radio-top-border-color)
var(--Tabs--radio-right-border-color)
var(--Tabs--radio-bottom-border-color)
var(--Tabs--radio-left-border-color);
border-width: var(--Tabs--radio-top-border-width)
var(--Tabs--radio-right-border-width)
var(--Tabs--radio-bottom-border-width)
var(--Tabs--radio-left-border-width);
&:hover,
&:focus {
color: var(--primary);
background: var(--Tabs--radio-hover-bg);
border-style: var(--Tabs--radio-hover-top-border-style)
var(--Tabs--radio-hover-right-border-style)
var(--Tabs--radio-hover-bottom-border-style)
var(--Tabs--radio-hover-left-border-style);
border-color: var(--Tabs--radio-hover-top-border-color)
var(--Tabs--radio-hover-right-border-color)
var(--Tabs--radio-hover-bottom-border-color)
var(--Tabs--radio-hover-left-border-color);
border-width: var(--Tabs--radio-hover-top-border-width)
var(--Tabs--radio-hover-right-border-width)
var(--Tabs--radio-hover-bottom-border-width)
var(--Tabs--radio-hover-left-border-width);
> a:first-child {
font-size: var(--Tabs--radio-hover-fontSize);
color: var(--Tabs--radio-hover-color);
font-weight: var(--Tabs--radio-hover-fontWeight);
line-height: var(--Tabs--radio-hover-lineHeight);
}
}
> a:first-child {
padding: 0;
border-radius: 0;
line-height: px2rem(30px);
font-size: var(--fontSizeSm);
font-size: var(--Tabs--radio-fontSize);
color: var(--Tabs--radio-color);
font-weight: var(--Tabs--radio-fontWeight);
line-height: var(--Tabs--radio-lineHeight);
border: none;
}
&.is-active {
background: var(--primary);
border-color: var(--primary);
position: relative;
z-index: 1;
background: var(--Tabs--radio-active-bg);
border-style: var(--Tabs--radio-active-top-border-style)
var(--Tabs--radio-active-right-border-style)
var(--Tabs--radio-active-bottom-border-style)
var(--Tabs--radio-active-left-border-style);
border-color: var(--Tabs--radio-active-top-border-color)
var(--Tabs--radio-active-right-border-color)
var(--Tabs--radio-active-bottom-border-color)
var(--Tabs--radio-active-left-border-color);
border-width: var(--Tabs--radio-active-top-border-width)
var(--Tabs--radio-active-right-border-width)
var(--Tabs--radio-active-bottom-border-width)
var(--Tabs--radio-active-left-border-width);
> a:first-child {
background: var(--primary);
color: var(--Tabs--radio-bg);
font-size: var(--Tabs--radio-active-fontSize);
color: var(--Tabs--radio-active-color);
font-weight: var(--Tabs--radio-active-fontWeight);
line-height: var(--Tabs--radio-active-lineHeight);
}
> .#{$ns}Tabs-link-close {
fill: var(--Tabs--radio-bg);
fill: var(--Tabs--radio-active-color);
}
}
&.is-disabled {
background: var(--Tabs--radio-disabled-bg);
border-style: var(--Tabs--radio-disabled-top-border-style)
var(--Tabs--radio-disabled-right-border-style)
var(--Tabs--radio-disabled-bottom-border-style)
var(--Tabs--radio-disabled-left-border-style);
border-color: var(--Tabs--radio-disabled-top-border-color)
var(--Tabs--radio-disabled-right-border-color)
var(--Tabs--radio-disabled-bottom-border-color)
var(--Tabs--radio-disabled-left-border-color);
border-width: var(--Tabs--radio-disabled-top-border-width)
var(--Tabs--radio-disabled-right-border-width)
var(--Tabs--radio-disabled-bottom-border-width)
var(--Tabs--radio-disabled-left-border-width);
> a:first-child {
font-size: var(--Tabs--radio-disabled-fontSize);
color: var(--Tabs--radio-disabled-color);
font-weight: var(--Tabs--radio-disabled-fontWeight);
line-height: var(--Tabs--radio-disabled-lineHeight);
}
}
}
> li + li {
margin-left: -1px;
margin-left: calc(var(--Tabs--radio-left-border-width) * -1);
}
}
}
}
> .#{$ns}Tabs-content {
border-top: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
border-top: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
}
}
@ -557,7 +641,7 @@
justify-content: center;
border-width: var(--Tabs-borderWidth);
border-style: solid;
border-color: var(--Tabs--simple-split-color);
border-color: var(--Tabs-borderColor);
}
&.#{$ns}Tabs-linksContainer--overflow
@ -578,7 +662,7 @@
margin-left: 0;
white-space: nowrap;
border-style: solid;
border-color: var(--Tabs--simple-split-color);
border-color: var(--Tabs-borderColor);
border-width: var(--Tabs-borderWidth);
border-left-width: 0;
}
@ -591,29 +675,60 @@
width: 100%;
display: flex;
flex-direction: row;
padding-left: var(--Tabs-borderWidth);
padding-left: var(--Tabs--tiled-left-border-width);
border-bottom: 0;
> li {
max-width: unset;
flex-grow: 1;
text-align: center;
margin: 0 0 0 calc(var(--Tabs-borderWidth) * -1);
border-style: solid;
border-color: var(--Tabs--simple-split-color);
border-width: var(--Tabs-borderWidth);
padding: var(--Tabs-linkPadding);
margin-left: calc(var(--Tabs--tiled-left-border-width) * -1);
border-style: var(--Tabs--tiled-top-border-style)
var(--Tabs--tiled-right-border-style)
var(--Tabs--tiled-bottom-border-style)
var(--Tabs--tiled-left-border-style);
border-color: var(--Tabs--tiled-top-border-color)
var(--Tabs--tiled-right-border-color)
var(--Tabs--tiled-bottom-border-color)
var(--Tabs--tiled-left-border-color);
border-width: var(--Tabs--tiled-top-border-width)
var(--Tabs--tiled-right-border-width)
var(--Tabs--tiled-bottom-border-width)
var(--Tabs--tiled-left-border-width);
padding: var(--Tabs--tiled-paddingTop) var(--Tabs--tiled-paddingRight)
var(--Tabs--tiled-paddingBottom) var(--Tabs--tiled-paddingLeft);
cursor: pointer;
&:hover,
&:focus {
position: relative;
z-index: 1;
border-color: var(--Tabs-onActive-borderColor);
color: var(--primary);
border-style: var(--Tabs--tiled-hover-top-border-style)
var(--Tabs--tiled-hover-right-border-style)
var(--Tabs--tiled-hover-bottom-border-style)
var(--Tabs--tiled-hover-left-border-style);
border-color: var(--Tabs--tiled-hover-top-border-color)
var(--Tabs--tiled-hover-right-border-color)
var(--Tabs--tiled-hover-bottom-border-color)
var(--Tabs--tiled-hover-left-border-color);
border-width: var(--Tabs--tiled-hover-top-border-width)
var(--Tabs--tiled-hover-right-border-width)
var(--Tabs--tiled-hover-bottom-border-width)
var(--Tabs--tiled-hover-left-border-width);
> a:first-child {
color: var(--Tabs--tiled-hover-color);
font-size: var(--Tabs--tiled-hover-fontSize);
font-weight: var(--Tabs--tiled-hover-fontWeight);
line-height: var(--Tabs--tiled-hover-lineHeight);
}
}
> a:first-child {
color: var(--Tabs--tiled-color);
font-size: var(--Tabs--tiled-fontSize);
font-weight: var(--Tabs--tiled-fontWeight);
line-height: var(--Tabs--tiled-lineHeight);
margin: 0;
border-radius: 0;
padding: 0;
@ -623,14 +738,51 @@
&.is-active {
cursor: default;
color: var(--primary);
border-color: var(--Tabs--simple-split-color);
border-top-color: var(--primary);
border-bottom-color: transparent;
border-style: var(--Tabs--tiled-active-top-border-style)
var(--Tabs--tiled-active-right-border-style)
var(--Tabs--tiled-active-bottom-border-style)
var(--Tabs--tiled-active-left-border-style);
border-color: var(--Tabs--tiled-active-top-border-color)
var(--Tabs--tiled-active-right-border-color)
var(--Tabs--tiled-active-bottom-border-color)
var(--Tabs--tiled-active-left-border-color);
border-width: var(--Tabs--tiled-active-top-border-width)
var(--Tabs--tiled-active-right-border-width)
var(--Tabs--tiled-active-bottom-border-width)
var(--Tabs--tiled-active-left-border-width);
> a:first-child {
color: var(--Tabs--tiled-active-color);
font-size: var(--Tabs--tiled-active-fontSize);
font-weight: var(--Tabs--tiled-active-fontWeight);
line-height: var(--Tabs--tiled-active-lineHeight);
}
}
&.is-disabled {
cursor: not-allowed;
color: var(--Tabs--tiled-disabled-color);
font-size: var(--Tabs--tiled-disabled-fontSize);
font-weight: var(--Tabs--tiled-disabled-fontWeight);
line-height: var(--Tabs--tiled-disabled-lineHeight);
border-style: var(--Tabs--tiled-disabled-top-border-style)
var(--Tabs--tiled-disabled-right-border-style)
var(--Tabs--tiled-disabled-bottom-border-style)
var(--Tabs--tiled-disabled-left-border-style);
border-color: var(--Tabs--tiled-disabled-top-border-color)
var(--Tabs--tiled-disabled-right-border-color)
var(--Tabs--tiled-disabled-bottom-border-color)
var(--Tabs--tiled-disabled-left-border-color);
border-width: var(--Tabs--tiled-disabled-top-border-width)
var(--Tabs--tiled-disabled-right-border-width)
var(--Tabs--tiled-disabled-bottom-border-width)
var(--Tabs--tiled-disabled-left-border-width);
> a:first-child {
color: var(--Tabs--tiled-disabled-color);
font-size: var(--Tabs--tiled-disabled-fontSize);
font-weight: var(--Tabs--tiled-disabled-fontWeight);
line-height: var(--Tabs--tiled-disabled-lineHeight);
}
}
}
}
@ -639,18 +791,18 @@
&--vertical {
display: flex;
min-height: px2rem(200px);
border: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
border: 1px solid var(--colors-neutral-text-8);
border-radius: 0;
> .#{$ns}Tabs-linksWrapper {
flex-direction: column;
background: var(--Tabs--vertical-onActive-container-bg);
background: var(--Tabs--vertical-bg);
border-bottom: 0;
}
> .#{$ns}Tabs-linksWrapper > .#{$ns}Tabs-links {
width: var(--Tabs--vertical-width);
border: none;
border-right: var(--Tabs--vertical-onActive-container-borderRight);
flex-direction: column;
> li {
@ -658,25 +810,47 @@
display: block;
> a:first-child {
border-color: transparent;
border-radius: 0;
border-width: var(--Tabs--vertical-onActive-borderWidth);
border: 0;
border-left-style: var(--Tabs--vertical-active-border-style);
border-left-width: var(--Tabs--vertical-onActive-borderWidth);
border-left-color: transparent;
margin: 0;
color: var(--Tabs--vertical-color);
font-size: var(--Tabs--vertical-fontSize);
font-weight: var(--Tabs--vertical-fontWeight);
line-height: var(--Tabs--vertical-lineHeight);
padding: var(--Tabs--vertical-paddingTop)
var(--Tabs--vertical-paddingRight)
var(--Tabs--vertical-paddingBottom)
var(--Tabs--vertical-paddingLeft);
&:hover,
&:focus {
color: var(--primary);
border-color: transparent;
color: var(--Tabs--vertical-hover-color);
font-size: var(--Tabs--vertical-hover-fontSize);
font-weight: var(--Tabs--vertical-hover-fontWeight);
line-height: var(--Tabs--vertical-hover-lineHeight);
}
}
&.is-disabled {
> a:first-child {
color: var(--Tabs--vertical-disabled-color);
font-size: var(--Tabs--vertical-disabled-fontSize);
font-weight: var(--Tabs--vertical-disabled-fontWeight);
line-height: var(--Tabs--vertical-disabled-lineHeight);
}
}
&.is-active {
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
> a:first-child {
color: var(--Tabs--vertical-onActive-color);
background: var(--Tabs--vertical-onActive-bg);
border-color: var(--Tabs--vertical-onActive-border);
font-size: var(--Tabs--vertical-active-fontSize);
font-weight: var(--Tabs--vertical-active-fontWeight);
line-height: var(--Tabs--vertical-active-lineHeight);
border-left-style: var(--Tabs--vertical-active-border-style);
border-left-color: var(--Tabs--vertical-onActive-border);
border-left-width: var(--Tabs--vertical-onActive-borderWidth);
}
}
}
@ -720,7 +894,7 @@
> .#{$ns}Tabs-linksWrapper > .#{$ns}Tabs-links {
position: relative;
margin: 0;
padding-top: var(--Tabs--sidebar-sidePadding);
padding-top: var(--Tabs--sidebar-sideMargin);
flex-grow: 1;
border: none;
flex-direction: column;
@ -728,15 +902,18 @@
> li {
display: flex;
margin: var(--Tabs--sidebar-sideMargin);
margin-bottom: var(--Tabs--sidebar-sideMargin);
padding: 0;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border: 0;
&:not(.is-disabled) > a:first-child {
color: var(--Tabs-gray-color);
&.is-disabled > a:first-child {
color: var(--Tabs--sidebar-disabled-color);
font-size: var(--Tabs--sidebar-disabled-fontSize);
font-weight: var(--Tabs--sidebar-disabled-fontWeight);
line-height: var(--Tabs--sidebar-disabled-lineHeight);
}
> a:first-child {
@ -746,6 +923,10 @@
display: flex;
flex-direction: column;
align-items: center;
color: var(--Tabs--sidebar-color);
font-size: var(--Tabs--sidebar-fontSize);
font-weight: var(--Tabs--sidebar-fontWeight);
line-height: var(--Tabs--sidebar-lineHeight);
.#{$ns}Icon {
font-size: var(--Tabs--sidebar-iconSize);
@ -755,10 +936,18 @@
top: 0;
}
}
&.is-active > a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: var(--Tabs--sidebar-iconColor);
color: var(--Tabs--sidebar-hover-color);
font-size: var(--Tabs--sidebar-hover-fontSize);
font-weight: var(--Tabs--sidebar-hover-fontWeight);
line-height: var(--Tabs--sidebar-hover-lineHeight);
}
&.is-active > a:first-child {
color: var(--Tabs--sidebar-active-color);
font-size: var(--Tabs--sidebar-active-fontSize);
font-weight: var(--Tabs--sidebar-active-fontWeight);
line-height: var(--Tabs--sidebar-active-lineHeight);
}
}
}
@ -916,16 +1105,46 @@
position: relative;
border: none;
padding: var(--Tabs--simple-split-size);
&:not(.is-disabled) > a {
font-size: var(--Tabs--simple-fontSize);
color: var(--Tabs--simple-color);
font-weight: var(--Tabs--simple-fontWeight);
line-height: var(--Tabs--simple-lineHeight);
}
&:not(.is-disabled):hover {
> a {
font-size: var(--Tabs--simple-hover-fontSize);
color: var(--Tabs--simple-hover-color) !important;
font-weight: var(--Tabs--simple-hover-fontWeight);
line-height: var(--Tabs--simple-hover-lineHeight);
}
}
&.is-disabled {
> a {
font-size: var(--Tabs--simple-disabled-fontSize);
color: var(--Tabs--simple-disabled-color) !important;
font-weight: var(--Tabs--simple-disabled-fontWeight);
line-height: var(--Tabs--simple-disabled-lineHeight);
}
}
&.is-active {
> a {
font-size: var(--Tabs--simple-active-fontSize);
color: var(--Tabs--simple-active-color) !important;
font-weight: var(--Tabs--simple-active-fontWeight);
line-height: var(--Tabs--simple-active-lineHeight);
}
}
&::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: var(--Tabs--simple-split-width);
height: var(--Tabs-add-icon-size);
height: var(--Tabs--simple-fontSize);
transform: translateY(-50%);
background-color: var(--Tabs--simple-split-color);
border: var(--Tabs--simple-split-width)
var(--Tabs--simple-split-style) var(--Tabs--simple-split-color);
}
& > .#{$ns}Tabs-link-close {
@ -936,21 +1155,6 @@
content: none;
}
&.is-active,
&:not(.is-disabled):hover {
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: var(--Tabs--line-onHover-color);
border: none;
}
> a:first-child:hover:active {
color: #144bcc;
border-color: #144bcc;
}
}
&:not(.is-disabled):hover .#{$ns}Tabs-link-close {
fill: var(--primary);
}
@ -977,8 +1181,7 @@
&--strong {
& > .#{$ns}Tabs-linksContainer-wrapper {
align-items: stretch;
border-bottom: var(--Tabs-borderWidth) solid
var(--Tabs--simple-split-color);
border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
.#{$ns}Tabs-addable {
width: var(--Tabs--strong-add-size);
@ -988,7 +1191,7 @@
align-items: center;
justify-content: center;
font-size: 0;
border: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
border-top-left-radius: var(--Tabs-borderRadius);
border-top-right-radius: var(--Tabs-borderRadius);
flex: none;
@ -1025,7 +1228,7 @@
margin-bottom: 0;
padding: 0;
justify-content: center;
border: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
border-top-right-radius: var(--Tabs-borderRadius);
box-sizing: border-box;
@ -1045,33 +1248,98 @@
> .#{$ns}Tabs-linksContainer-main
> .#{$ns}Tabs-links
> .#{$ns}Tabs-link {
margin-right: var(--Tabs--card-arrow-gap);
padding: var(--Tabs--card-arrow-gap) var(--Tabs--card-add-gap);
background: var(--Tabs-onActive-bg);
border-top-left-radius: var(--Tabs-borderRadius);
border-top-right-radius: var(--Tabs-borderRadius);
border: var(--Tabs-borderWidth) solid var(--Tabs--simple-split-color);
margin: var(--Tabs--strong-marginTop) var(--Tabs--strong-marginRight)
var(--Tabs--strong-marginBottom) var(--Tabs--strong-marginLeft);
padding: var(--Tabs--strong-paddingTop)
var(--Tabs--strong-paddingRight) var(--Tabs--strong-paddingBottom)
var(--Tabs--strong-paddingLeft);
background: var(--Tabs--strong-bg);
border-radius: var(--Tabs--strong-top-left-border-radius)
var(--Tabs--strong-top-right-border-radius)
var(--Tabs--strong-bottom-right-border-radius)
var(--Tabs--strong-bottom-left-border-radius);
border-color: var(--Tabs--strong-top-border-color)
var(--Tabs--strong-right-border-color)
var(--Tabs--strong-bottom-border-color)
var(--Tabs--strong-left-border-color);
border-style: var(--Tabs--strong-top-border-style)
var(--Tabs--strong-right-border-style)
var(--Tabs--strong-bottom-border-style)
var(--Tabs--strong-left-border-style);
border-width: var(--Tabs--strong-top-border-width)
var(--Tabs--strong-right-border-width)
var(--Tabs--strong-bottom-border-width)
var(--Tabs--strong-left-border-width);
cursor: pointer;
&.is-active {
border-bottom-color: var(--Tabs-onActive-bg);
&:not(.is-disabled) > a {
font-size: var(--Tabs--strong-fontSize);
color: var(--Tabs--strong-color);
font-weight: var(--Tabs--strong-fontWeight);
line-height: var(--Tabs--strong-lineHeight);
}
&:not(.is-disabled):hover {
background: var(--Tabs--strong-hover-bg);
border-color: var(--Tabs--strong-hover-top-border-color)
var(--Tabs--strong-hover-right-border-color)
var(--Tabs--strong-hover-bottom-border-color)
var(--Tabs--strong-hover-left-border-color);
border-style: var(--Tabs--strong-hover-top-border-style)
var(--Tabs--strong-hover-right-border-style)
var(--Tabs--strong-hover-bottom-border-style)
var(--Tabs--strong-hover-left-border-style);
border-width: var(--Tabs--strong-hover-top-border-width)
var(--Tabs--strong-hover-right-border-width)
var(--Tabs--strong-hover-bottom-border-width)
var(--Tabs--strong-hover-left-border-width);
> a {
font-size: var(--Tabs--strong-hover-fontSize);
color: var(--Tabs--strong-hover-color) !important;
font-weight: var(--Tabs--strong-hover-fontWeight);
line-height: var(--Tabs--strong-hover-lineHeight);
}
}
&.is-disabled {
cursor: not-allowed;
background: var(--Tabs--strong-disabled-bg);
border-color: var(--Tabs--strong-disabled-top-border-color)
var(--Tabs--strong-disabled-right-border-color)
var(--Tabs--strong-disabled-bottom-border-color)
var(--Tabs--strong-disabled-left-border-color);
border-style: var(--Tabs--strong-disabled-top-border-style)
var(--Tabs--strong-disabled-right-border-style)
var(--Tabs--strong-disabled-bottom-border-style)
var(--Tabs--strong-disabled-left-border-style);
border-width: var(--Tabs--strong-disabled-top-border-width)
var(--Tabs--strong-disabled-right-border-width)
var(--Tabs--strong-disabled-bottom-border-width)
var(--Tabs--strong-disabled-left-border-width);
> a {
font-size: var(--Tabs--strong-disabled-fontSize);
color: var(--Tabs--strong-disabled-color) !important;
font-weight: var(--Tabs--strong-disabled-fontWeight);
line-height: var(--Tabs--strong-disabled-lineHeight);
}
&.is-active,
&:not(.is-disabled):hover {
> a:first-child,
> a:first-child:hover,
> a:first-child:focus {
color: var(--Tabs--line-onHover-color);
}
> a:first-child:hover:active {
color: #144bcc;
border-color: #144bcc;
&.is-active {
background: var(--Tabs--strong-active-bg);
border-color: var(--Tabs--strong-active-top-border-color)
var(--Tabs--strong-active-right-border-color)
var(--Tabs--strong-active-bottom-border-color)
var(--Tabs--strong-active-left-border-color);
border-style: var(--Tabs--strong-active-top-border-style)
var(--Tabs--strong-active-right-border-style)
var(--Tabs--strong-active-bottom-border-style)
var(--Tabs--strong-active-left-border-style);
border-width: var(--Tabs--strong-active-top-border-width)
var(--Tabs--strong-active-right-border-width)
var(--Tabs--strong-active-bottom-border-width)
var(--Tabs--strong-active-left-border-width);
> a {
font-size: var(--Tabs--strong-active-fontSize);
color: var(--Tabs--strong-active-color) !important;
font-weight: var(--Tabs--strong-active-fontWeight);
line-height: var(--Tabs--strong-active-lineHeight);
}
}

188
packages/amis-ui/scss/components/form/_checks.scss
View File

@ -69,12 +69,48 @@
&--checkbox {
padding-left: var(--Checkbox-size);
font-size: var(--checkbox-checkbox-default-fontSize);
color: var(--checkbox-checkbox-default-color);
input {
margin-left: calc(var(--Checkbox-size) * -1);
&:checked + i {
border-color: var(--Checkbox-onHover-color);
border-width: var(--checkbox-checked-default-top-border-width)
var(--checkbox-checked-default-right-border-width)
var(--checkbox-checked-default-bottom-border-width)
var(--checkbox-checked-default-left-border-width);
border-style: var(--checkbox-checked-default-top-border-style)
var(--checkbox-checked-default-right-border-style)
var(--checkbox-checked-default-bottom-border-style)
var(--checkbox-checked-default-left-border-style);
border-color: var(--checkbox-checked-default-top-border-color)
var(--checkbox-checked-default-right-border-color)
var(--checkbox-checked-default-bottom-border-color)
var(--checkbox-checked-default-left-border-color);
border-radius: var(--checkbox-checked-default-top-left-border-radius)
var(--checkbox-checked-default-top-right-border-radius)
var(--checkbox-checked-default-bottom-right-border-radius)
var(--checkbox-checked-default-bottom-left-border-radius);
&:hover {
border-width: var(--checkbox-checkbox-hover-top-border-width)
var(--checkbox-checkbox-hover-right-border-width)
var(--checkbox-checkbox-hover-bottom-border-width)
var(--checkbox-checkbox-hover-left-border-width);
border-style: var(--checkbox-checkbox-hover-top-border-style)
var(--checkbox-checkbox-hover-right-border-style)
var(--checkbox-checkbox-hover-bottom-border-style)
var(--checkbox-checkbox-hover-left-border-style);
border-color: var(--checkbox-checkbox-hover-top-border-color)
var(--checkbox-checkbox-hover-right-border-color)
var(--checkbox-checkbox-hover-bottom-border-color)
var(--checkbox-checkbox-hover-left-border-color);
border-radius: var(--checkbox-checkbox-hover-top-left-border-radius)
var(--checkbox-checkbox-hover-top-right-border-radius)
var(--checkbox-checkbox-hover-bottom-right-border-radius)
var(--checkbox-checkbox-hover-bottom-left-border-radius);
}
&:before {
width: var(--Checkbox-inner-size);
@ -105,6 +141,63 @@
border: px2rem(1px) solid var(--Checkbox-color);
border-radius: var(--Checkbox-borderRadius);
margin-left: calc(var(--Checkbox-size) * -1);
border-width: var(--checkbox-checkbox-default-top-border-width)
var(--checkbox-checkbox-default-right-border-width)
var(--checkbox-checkbox-default-bottom-border-width)
var(--checkbox-checkbox-default-left-border-width);
border-style: var(--checkbox-checkbox-default-top-border-style)
var(--checkbox-checkbox-default-right-border-style)
var(--checkbox-checkbox-default-bottom-border-style)
var(--checkbox-checkbox-default-left-border-style);
border-color: var(--checkbox-checkbox-default-top-border-color)
var(--checkbox-checkbox-default-right-border-color)
var(--checkbox-checkbox-default-bottom-border-color)
var(--checkbox-checkbox-default-left-border-color);
border-radius: var(--checkbox-checkbox-default-top-left-border-radius)
var(--checkbox-checkbox-default-top-right-border-radius)
var(--checkbox-checkbox-default-bottom-right-border-radius)
var(--checkbox-checkbox-default-bottom-left-border-radius);
background: var(--checkbox-checkbox-default-bg-color);
&:hover {
border-width: var(--checkbox-checkbox-hover-top-border-width)
var(--checkbox-checkbox-hover-right-border-width)
var(--checkbox-checkbox-hover-bottom-border-width)
var(--checkbox-checkbox-hover-left-border-width);
border-style: var(--checkbox-checkbox-hover-top-border-style)
var(--checkbox-checkbox-hover-right-border-style)
var(--checkbox-checkbox-hover-bottom-border-style)
var(--checkbox-checkbox-hover-left-border-style);
border-color: var(--checkbox-checkbox-hover-top-border-color)
var(--checkbox-checkbox-hover-right-border-color)
var(--checkbox-checkbox-hover-bottom-border-color)
var(--checkbox-checkbox-hover-left-border-color);
border-radius: var(--checkbox-checkbox-hover-top-left-border-radius)
var(--checkbox-checkbox-hover-top-right-border-radius)
var(--checkbox-checkbox-hover-bottom-right-border-radius)
var(--checkbox-checkbox-hover-bottom-left-border-radius);
background: var(--checkbox-checkbox-hover-bg-color);
}
&:active {
border-width: var(--checkbox-checkbox-active-top-border-width)
var(--checkbox-checkbox-active-right-border-width)
var(--checkbox-checkbox-active-bottom-border-width)
var(--checkbox-checkbox-active-left-border-width);
border-style: var(--checkbox-checkbox-active-top-border-style)
var(--checkbox-checkbox-active-right-border-style)
var(--checkbox-checkbox-active-bottom-border-style)
var(--checkbox-checkbox-active-left-border-style);
border-color: var(--checkbox-checkbox-active-top-border-color)
var(--checkbox-checkbox-active-right-border-color)
var(--checkbox-checkbox-active-bottom-border-color)
var(--checkbox-checkbox-active-left-border-color);
border-radius: var(--checkbox-checkbox-active-top-left-border-radius)
var(--checkbox-checkbox-active-top-right-border-radius)
var(--checkbox-checkbox-active-bottom-right-border-radius)
var(--checkbox-checkbox-active-bottom-left-border-radius);
background: var(--checkbox-checkbox-active-bg-color);
}
}
&.#{$ns}Checkbox {
@ -119,7 +212,7 @@
&:active {
& > i:before {
background: var(--Switch-checked-onHover-bgColor);
background: var(--Checkbox-checked-onHover-bgColor);
}
}
}
@ -136,7 +229,7 @@
border-color: transparent;
&:before {
background: var(--button-primary-hover-bg-color);
background: var(--checkbox-checked-hover-bg-color);
}
}
@ -147,10 +240,10 @@
&:active {
input:checked + i {
background: var(--Switch-checked-onHover-bgColor);
background: var(--Checkbox-checked-onHover-bgColor);
&:before {
background: var(--Switch-checked-onHover-bgColor);
background: var(--Checkbox-checked-onHover-bgColor);
}
}
}
@ -159,6 +252,9 @@
&:checked + i {
border-color: var(--Checkbox-onHover-color);
background: var(--Checkbox-onHover-color);
&:hover {
background: var(--checkbox-checked-hover-bg-color);
}
&:before {
width: var(--Checkbox--full-inner-size);
@ -169,7 +265,7 @@
&[disabled] + i {
border-color: var(--Checkbox-color);
background: var(--Checkbox-onDisabled-bg);
background: var(--checkbox-checkbox-disabled-bg-color);
}
&[disabled]:checked + i {
@ -274,8 +370,8 @@
&:active {
input:checked + i {
background: transparent;
border-color: var(--Switch-checked-onHover-bgColor) transparent
transparent var(--Switch-checked-onHover-bgColor);
border-color: var(--Checkbox-checked-onHover-bgColor) transparent
transparent var(--Checkbox-checked-onHover-bgColor);
}
}
@ -352,9 +448,9 @@
box-shadow: -1px 0 0 0 var(--menu-active-color);
}
&:active {
border-color: var(--Switch-checked-onHover-bgColor);
color: var(--Switch-checked-onHover-bgColor);
box-shadow: -1px 0 0 0 var(--Switch-checked-onHover-bgColor);
border-color: var(--Checkbox-checked-onHover-bgColor);
color: var(--Checkbox-checked-onHover-bgColor);
box-shadow: -1px 0 0 0 var(--Checkbox-checked-onHover-bgColor);
}
}
&--button--disabled--unchecked.#{$ns}Checkbox--checkbox {
@ -379,6 +475,11 @@
&:checked + i {
border-color: var(--Radio-onHover-color);
background-color: var(--radio-default-active-bg-color);
+ span {
color: var(--radio-default-active-text-color);
}
&:before {
width: var(--Radio-inner-size);
@ -400,7 +501,7 @@
&[disabled] + i + span {
cursor: not-allowed;
color: var(--text--muted-color);
color: var(--radio-default-disabled-text-color);
}
&:focus + i {
@ -416,6 +517,28 @@
margin-left: calc(var(--Radio-size) * -1);
margin-top: px2rem(-2px);
border-radius: 50%;
background: var(--radio-default-default-bg-color);
+ span {
color: var(--radio-default-default-text-color);
font-size: var(--radio-default-default-fontSize);
font-weight: var(--radio-default-default-fontWeight);
line-height: var(--radio-default-default-lineHeight);
margin-left: var(--radio-default-default-distance);
}
}
&:hover input:not(:disabled) + i {
border-color: var(--radio-default-hover-color);
background-color: var(--radio-default-hover-bg-color);
&:before {
background: var(--radio-default-hover-color);
}
+ span {
color: var(--radio-default-hover-text-color);
}
}
&.#{$ns}Checkbox--button--disabled--unchecked.#{$ns}Checkbox--full {
@ -497,7 +620,44 @@
); // 3px 是空白的高度
}
.#{$ns}RadiosControl,
.#{$ns}RadiosControl {
.#{$ns}Checkbox {
display: block;
margin: var(--radio-default-vertical-marginTop)
var(--radio-default-vertical-marginRight)
var(--radio-default-vertical-marginBottom)
var(--radio-default-vertical-marginLeft);
}
.#{$ns}Checkbox--button {
margin-bottom: 0;
&--disabled--unchecked {
background: var(--FileControl-onDisabled-bg);
}
&-checked {
&:active {
border-color: var(--Checkbox-checked-onHover-bgColor);
}
}
}
&.is-inline .#{$ns}Checkbox {
display: inline-block;
margin: var(--radio-default-default-marginTop)
var(--radio-default-default-marginRight)
var(--radio-default-default-marginBottom)
var(--radio-default-default-marginLeft);
}
&.is-inline .#{$ns}Checkbox--button {
display: inline-block;
margin-right: 0;
margin-bottom: 0;
}
}
.#{$ns}CheckboxesControl {
.#{$ns}Checkbox {
display: block;
@ -513,7 +673,7 @@
&-checked {
&:active {
border-color: var(--Switch-checked-onHover-bgColor);
border-color: var(--Checkbox-checked-onHover-bgColor);
}
}
}

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

@ -30,6 +30,7 @@
@include button-size(
var(--Combo-addBtn-fontSize),
var(--Combo-addBtn-fontWeight),
var(--Combo-addBtn-lineHeight),
var(--Combo-addBtn-borderRadius),
var(--Combo-addBtn-borderRadius),

73
packages/amis-ui/scss/components/form/_file.scss
View File

@ -16,7 +16,7 @@
&-selectBtn {
display: inline-flex;
margin-right: 10px;
margin-right: var(--inputFile-base-des-margin);
> svg {
margin-right: 4px !important;
@ -47,8 +47,9 @@
// }
&-description {
color: #999;
font-size: 12px;
color: var(--inputFile-base-des-color);
font-size: var(--inputFile-base-des-fontSize);
font-weight: var(--inputFile-base-des-fontWeight);
}
&-sizeTip {
@ -60,7 +61,8 @@
&-list {
list-style: none;
margin: 8px 0;
margin: var(--inputFile-list-marginTop) var(--inputFile-list-marginRight)
var(--inputFile-list-marginBottom) var(--inputFile-list-marginLeft);
padding: 0;
max-height: 144px;
overflow-x: hidden;
@ -69,6 +71,7 @@
> li {
margin-bottom: 4px;
font-size: 12px;
background: var(--inputFile-list-bg-color);
&:hover {
border-radius: 2px;
@ -83,7 +86,8 @@
}
&-itemInfo {
padding: 2px 4px;
padding: var(--inputFile-list-paddingTop) var(--inputFile-list-paddingRight)
var(--inputFile-list-paddingBottom) var(--inputFile-list-paddingLeft);
display: flex;
line-height: 24px;
height: auto;
@ -105,7 +109,9 @@
}
&-itemInfoIcon {
margin-right: 4px;
margin-right: var(--inputFile-list-icon-margin);
font-size: var(--inputFile-list-icon-size);
color: var(--inputFile-list-icon-color);
}
&-itemInfoText {
@ -114,6 +120,17 @@
text-overflow: ellipsis;
vertical-align: middle;
color: var(--inputFile-list-color);
font-size: var(--inputFile-list-fontSize);
font-weight: var(--inputFile-list-fontWeight);
line-height: px2rem(24px);
&:hover {
color: var(--inputFile-list-color);
font-size: var(--inputFile-list-fontSize);
font-weight: var(--inputFile-list-fontWeight);
line-height: px2rem(24px);
}
}
&-clear {
@ -122,7 +139,11 @@
cursor: pointer;
margin-left: auto;
margin-right: var(--gap-xs);
font-size: var(--inputFile-list-delete-icon-size);
line-height: px2rem(24px);
&:hover {
font-size: var(--inputFile-list-delete-icon-size);
line-height: px2rem(24px);
color: var(--FileControl-icon-onHover-color);
}
}
@ -199,9 +220,20 @@
flex-flow: column;
height: 180px;
text-align: center;
border: 1px dashed var(--FileControl-border-color);
border-radius: var(--borderRadius);
background: var(--white);
border-style: var(--inputFile-drag-top-border-style)
var(--inputFile-drag-right-border-style)
var(--inputFile-drag-bottom-border-style)
var(--inputFile-drag-left-border-style);
border-color: var(--FileControl-border-color);
border-width: var(--inputFile-drag-top-border-width)
var(--inputFile-drag-right-border-width)
var(--inputFile-drag-bottom-border-width)
var(--inputFile-drag-left-border-width);
border-radius: var(--inputFile-drag-top-left-border-radius)
var(--inputFile-drag-top-right-border-radius)
var(--inputFile-drag-bottom-right-border-radius)
var(--inputFile-drag-bottom-left-border-radius);
background: var(--inputFile-drag-bg-color);
cursor: pointer;
&-click {
@ -216,20 +248,33 @@
}
&:hover {
border-color: var(--info);
border-style: var(--inputFile-drag-hover-top-border-style)
var(--inputFile-drag-hover-right-border-style)
var(--inputFile-drag-hover-bottom-border-style)
var(--inputFile-drag-hover-left-border-style);
border-color: var(--inputFile-drag-hover-top-border-color)
var(--inputFile-drag-hover-right-border-color)
var(--inputFile-drag-hover-bottom-border-color)
var(--inputFile-drag-hover-left-border-color);
border-width: var(--inputFile-drag-hover-top-border-width)
var(--inputFile-drag-hover-right-border-width)
var(--inputFile-drag-hover-bottom-border-width)
var(--inputFile-drag-hover-left-border-width);
background: var(--inputFile-drag-bg-color-hover);
}
> span {
margin-top: 8px;
margin-top: var(--inputFile-drag-icon-margin);
line-height: 20px;
font-size: var(--fontSizeSm);
font-size: var(--inputFile-drag-fontSize);
font-weight: var(--inputFile-drag-fontWeight);
color: var(--FileControl-drag-color);
}
> svg {
width: 48px;
height: 48px;
top: 0;
font-size: var(--inputFile-drag-icon-size);
color: var(--inputFile-drag-icon-color);
}
}

55
packages/amis-ui/scss/components/form/_form.scss
View File

@ -52,8 +52,9 @@
}
.#{$ns}Form-label {
font-weight: var(--fontWeightNormal);
margin-bottom: var(--gap-sm);
font-weight: var(--Form-item-fontWeight);
line-height: var(--Form-item-lineHeight);
margin-bottom: var(--Form-mode-default-labelGap);
position: relative;
font-size: var(--Form-item-fontSize);
color: var(--Form-item-fontColor);
@ -64,24 +65,27 @@
}
.#{$ns}Form-star {
color: var(--danger);
font-size: var(--fontSizeXs);
color: var(--Form-item-star-color);
font-size: var(--Form-item-star-size);
line-height: 1;
}
.#{$ns}Form-feedback {
color: var(--danger);
margin: var(--Form-input-marginBottom) 0 0;
padding-left: var(--gap-base);
font-size: var(--fontSizeSm);
position: var(--Form-feedback-position);
color: var(--Form-feedBack-color);
list-style-type: none;
margin: 0;
margin-top: var(--Form-feedBack-gap);
padding: 0;
font-size: var(--Form-feedBack-fontSize);
}
.#{$ns}Form-description {
display: block;
word-break: break-word;
color: var(--Form-description-color);
margin: var(--Form-input-marginBottom) 0 0;
font-weight: var(--Form-description-fontWeight);
line-height: var(--Form-description-lineHeight);
margin-top: var(--Form-description-gap);
font-size: var(--Form-description-fontSize);
}
@ -119,8 +123,7 @@
}
&--inline {
margin-bottom: calc(var(--Form-item-gap) / 2);
margin-right: calc(var(--Form-item-gap) / 2);
margin-right: var(--Form-mode-inline-item-gap);
}
&--horizontal {
@ -153,7 +156,7 @@
&--normal {
> .#{$ns}Form-label {
display: block;
width: var(--Form-mode-default-width);
.#{$ns}Form-star {
position: absolute;
left: px2rem(-6px);
@ -163,7 +166,7 @@
}
&.is-error > .#{$ns}Form-label {
color: var(--danger);
color: var(--Form-item-onError-color);
}
.#{$ns}Form-control--withSize {
@ -240,19 +243,12 @@
&--horizontal {
display: flex;
flex-wrap: nowrap;
margin-left: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
margin-right: calc(var(--Form--horizontal-gutterWidth) / 2 * -1);
> * {
padding-left: calc(var(--Form--horizontal-gutterWidth) / 2);
padding-right: calc(var(--Form--horizontal-gutterWidth) / 2);
}
> .#{$ns}Form-value {
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
min-width: 0;
max-width: var(--Form--horizontal-value-maxWidth);
min-width: var(--Form--horizontal-value-minWidth);
}
.#{$ns}Form-itemColumn--xs,
@ -266,8 +262,10 @@
}
> .#{$ns}Form-label {
padding-top: var(--Form-label-paddingTop);
margin-bottom: 0;
height: px2rem(32px);
line-height: px2rem(32px);
margin: 0;
margin-right: var(--Form--horizontal-label-gap);
flex-shrink: 0;
.#{$ns}Form-star {
@ -321,9 +319,10 @@
vertical-align: top;
> .#{$ns}Form-label {
padding-top: var(--Form-label-paddingTop);
margin-bottom: 0;
margin-right: calc(var(--Form-item-gap) / 2);
height: px2rem(32px);
line-height: px2rem(32px);
margin: 0;
margin-right: var(--Form-mode-inline-label-gap);
.#{$ns}Form-star {
position: absolute;

145
packages/amis-ui/scss/components/form/_image.scss
View File

@ -13,72 +13,108 @@
flex-direction: column;
justify-content: center;
align-items: center;
border: var(--borderWidth) solid var(--borderColor);
border-radius: var(--ImageControl-addBtn-borderRadius);
border-radius: var(--inputImage-base-default-top-left-border-radius)
var(--inputImage-base-default-top-right-border-radius)
var(--inputImage-base-default-bottom-right-border-radius)
var(--inputImage-base-default-bottom-left-border-radius);
cursor: pointer;
margin-right: var(--gap-base);
@include button-variant(
var(--ImageControl-addBtn-bg),
var(--ImageControl-addBtn-color),
var(--ImageControl-addBtn-border),
var(--ImageControl-addBtn-border),
var(--ImageControl-addBtn-border),
var(--ImageControl-addBtn-border),
var(--button-default-default-top-border-width),
var(--button-default-default-right-border-width),
var(--button-default-default-bottom-border-width),
var(--button-default-default-left-border-width),
var(--button-default-default-top-border-style),
var(--button-default-default-right-border-style),
var(--button-default-default-bottom-border-style),
var(--button-default-default-left-border-style),
var(--button-default-default-shadow),
var(--inputImage-base-default-top-border-color),
var(--inputImage-base-default-right-border-color),
var(--inputImage-base-default-bottom-border-color),
var(--inputImage-base-default-left-border-color),
var(--inputImage-base-default-top-border-width),
var(--inputImage-base-default-right-border-width),
var(--inputImage-base-default-bottom-border-width),
var(--inputImage-base-default-left-border-width),
var(--inputImage-base-default-top-border-style),
var(--inputImage-base-default-right-border-style),
var(--inputImage-base-default-bottom-border-style),
var(--inputImage-base-default-left-border-style),
var(--shadows-shadow-none),
var(--ImageControl-addBtn-onHover-bg),
var(--ImageControl-addBtn-onHover-color),
var(--ImageControl-addBtn-onHover-border),
var(--ImageControl-addBtn-onHover-border),
var(--ImageControl-addBtn-onHover-border),
var(--ImageControl-addBtn-onHover-border),
var(--button-default-hover-top-border-width),
var(--button-default-hover-right-border-width),
var(--button-default-hover-bottom-border-width),
var(--button-default-hover-left-border-width),
var(--button-default-hover-top-border-style),
var(--button-default-hover-right-border-style),
var(--button-default-hover-bottom-border-style),
var(--button-default-hover-left-border-style),
var(--button-default-hover-shadow),
var(--inputImage-base-hover-top-border-color),
var(--inputImage-base-hover-right-border-color),
var(--inputImage-base-hover-bottom-border-color),
var(--inputImage-base-hover-left-border-color),
var(--inputImage-base-hover-top-border-width),
var(--inputImage-base-hover-right-border-width),
var(--inputImage-base-hover-bottom-border-width),
var(--inputImage-base-hover-left-border-width),
var(--inputImage-base-hover-top-border-style),
var(--inputImage-base-hover-right-border-style),
var(--inputImage-base-hover-bottom-border-style),
var(--inputImage-base-hover-left-border-style),
var(--shadows-shadow-none),
var(--ImageControl-addBtn-onActive-bg),
var(--ImageControl-addBtn-onActive-color)
var(--ImageControl-addBtn-onActive-border),
var(--button-default-active-top-border-width),
var(--button-default-active-right-border-width),
var(--button-default-active-bottom-border-width),
var(--button-default-active-left-border-width),
var(--button-default-active-top-border-style),
var(--button-default-active-right-border-style),
var(--button-default-active-bottom-border-style),
var(--button-default-active-left-border-style),
var(--button-default-active-shadow)
var(--ImageControl-addBtn-onActive-color),
var(--inputImage-base-active-top-border-color),
var(--inputImage-base-active-right-border-color),
var(--inputImage-base-active-bottom-border-color),
var(--inputImage-base-active-left-border-color),
var(--inputImage-base-active-top-border-width),
var(--inputImage-base-active-right-border-width),
var(--inputImage-base-active-bottom-border-width),
var(--inputImage-base-active-left-border-width),
var(--inputImage-base-active-top-border-style),
var(--inputImage-base-active-right-border-style),
var(--inputImage-base-active-bottom-border-style),
var(--inputImage-base-active-left-border-style),
var(--shadows-shadow-none),
var(--ImageControl-addBtn-onDisabled-bg),
var(--ImageControl-addBtn-onDisabled-color),
var(--inputImage-base-disabled-top-border-color),
var(--inputImage-base-disabled-right-border-color),
var(--inputImage-base-disabled-bottom-border-color),
var(--inputImage-base-disabled-left-border-color),
var(--inputImage-base-disabled-top-border-width),
var(--inputImage-base-disabled-right-border-width),
var(--inputImage-base-disabled-bottom-border-width),
var(--inputImage-base-disabled-left-border-width),
var(--inputImage-base-disabled-top-border-style),
var(--inputImage-base-disabled-right-border-style),
var(--inputImage-base-disabled-bottom-border-style),
var(--inputImage-base-disabled-left-border-style),
var(--shadows-shadow-none)
);
> svg {
width: px2rem(24px);
height: px2rem(24px);
top: 0;
margin-bottom: px2rem(8px);
margin-bottom: var(--inputImage-base-default-icon-margin);
font-size: var(--inputImage-base-default-icon-size);
color: var(--inputImage-base-default-icon-color);
}
&-text {
color: var(--ImageControl-addBtn-upload-color);
font-size: var(--inputImage-base-default-fontSize);
font-weight: var(--inputImage-base-default-fontWeight);
}
&:not(:disabled):not(.is-disabled) {
&:hover {
> svg {
color: var(--inputImage-base-hover-icon-color);
}
}
&:hover:active {
> svg {
color: var(--inputImage-base-active-icon-color);
}
}
}
&.is-disabled {
pointer-events: none;
border: px2rem(1px) solid var(--ImageControl-addBtn-onDisabled-border);
background: var(--ImageControl-addBtn-onDisabled-bg);
color: var(--ImageControl-addBtn-onDisabled-color);
> svg {
color: var(--inputImage-base-disabled-icon-color);
}
}
}
@ -104,17 +140,26 @@
}
&-dropzone:focus &-addBtn {
border-color: var(--ImageControl-addBtn-onHover-border);
border-color: var(--inputImage-base-hover-top-border-color)
var(--inputImage-base-hover-right-border-color)
var(--inputImage-base-hover-bottom-border-color)
var(--inputImage-base-hover-left-border-color);
background: var(--ImageControl-addBtn-onHover-bg);
color: var(--ImageControl-addBtn-onHover-color) !important;
color: var(--ImageControl-addBtn-onHover-color);
> svg {
color: var(--inputImage-base-hover-icon-color);
}
}
&-dropzone:hover {
&-addBtn:not(.is-disabled) {
border-color: var(--ImageControl-addBtn-onHover-border);
border-color: var(--inputImage-base-hover-top-border-color)
var(--inputImage-base-hover-right-border-color)
var(--inputImage-base-hover-bottom-border-color)
var(--inputImage-base-hover-left-border-color);
background: var(--ImageControl-addBtn-onHover-bg);
color: var(--ImageControl-addBtn-onHover-color);
border-color: var(--ImageControl-addBtn-onHover-border);
.#{$ns}ImageControl-addBtn-text {
color: var(--ImageControl-addBtn-onHover-color);
}

83
packages/amis-ui/scss/components/form/_list.scss
View File

@ -10,6 +10,7 @@
}
&-item {
width: var(--listSelect-base-image-width);
position: relative;
user-select: none;
font-size: var(--ListControl-fontSize);
@ -24,10 +25,18 @@
transition: var(--ListControl-item-transition);
max-width: calc(#{px2rem(200px)} + 2 * var(--ListControl-item-paddingX));
border-radius: var(--ListControl-item-borderRadius);
padding: var(--listSelect-base-default-paddingTop)
var(--listSelect-base-default-paddingRight)
var(--listSelect-base-default-paddingBottom)
var(--listSelect-base-default-paddingLeft);
.b-inherit {
border-color: var(--ListControl-item-color);
}
&:hover {
color: var(--listSelect-base-hover-color);
}
}
&-itemImage {
@ -69,6 +78,44 @@
}
}
border-width: var(--listSelect-base-default-top-border-width)
var(--listSelect-base-default-right-border-width)
var(--listSelect-base-default-bottom-border-width)
var(--listSelect-base-default-left-border-width);
border-style: var(--listSelect-base-default-top-border-style)
var(--listSelect-base-default-right-border-style)
var(--listSelect-base-default-bottom-border-style)
var(--listSelect-base-default-left-border-style);
border-color: var(--listSelect-base-default-top-border-color)
var(--listSelect-base-default-right-border-color)
var(--listSelect-base-default-bottom-border-color)
var(--listSelect-base-default-left-border-color);
border-radius: var(--listSelect-base-default-top-left-border-radius)
var(--listSelect-base-default-top-right-border-radius)
var(--listSelect-base-default-bottom-right-border-radius)
var(--listSelect-base-default-bottom-left-border-radius);
background: var(--listSelect-base-default-bg-color);
&:hover {
border-width: var(--listSelect-base-hover-top-border-width)
var(--listSelect-base-hover-right-border-width)
var(--listSelect-base-hover-bottom-border-width)
var(--listSelect-base-hover-left-border-width);
border-style: var(--listSelect-base-hover-top-border-style)
var(--listSelect-base-hover-right-border-style)
var(--listSelect-base-hover-bottom-border-style)
var(--listSelect-base-hover-left-border-style);
border-color: var(--listSelect-base-hover-top-border-color)
var(--listSelect-base-hover-right-border-color)
var(--listSelect-base-hover-bottom-border-color)
var(--listSelect-base-hover-left-border-color);
border-radius: var(--listSelect-base-hover-top-left-border-radius)
var(--listSelect-base-hover-top-right-border-radius)
var(--listSelect-base-hover-bottom-right-border-radius)
var(--listSelect-base-hover-bottom-left-border-radius);
background: var(--listSelect-base-hover-bg-color);
}
&:hover:active,
&.is-active {
background: var(--ListControl-item-onActive-bg);
@ -83,6 +130,24 @@
border-color: var(--ListControl-item-onActive-color);
}
border-width: var(--listSelect-base-active-top-border-width)
var(--listSelect-base-active-right-border-width)
var(--listSelect-base-active-bottom-border-width)
var(--listSelect-base-active-left-border-width);
border-style: var(--listSelect-base-active-top-border-style)
var(--listSelect-base-active-right-border-style)
var(--listSelect-base-active-bottom-border-style)
var(--listSelect-base-active-left-border-style);
border-color: var(--listSelect-base-active-top-border-color)
var(--listSelect-base-active-right-border-color)
var(--listSelect-base-active-bottom-border-color)
var(--listSelect-base-active-left-border-color);
border-radius: var(--listSelect-base-active-top-left-border-radius)
var(--listSelect-base-active-top-right-border-radius)
var(--listSelect-base-active-bottom-right-border-radius)
var(--listSelect-base-active-bottom-left-border-radius);
background: var(--listSelect-base-active-bg-color);
&:before {
content: '';
position: absolute;
@ -122,6 +187,24 @@
.b-inherit {
border-color: var(--ListControl-item-onDisabled-borderColor);
}
border-width: var(--listSelect-base-disabled-top-border-width)
var(--listSelect-base-disabled-right-border-width)
var(--listSelect-base-disabled-bottom-border-width)
var(--listSelect-base-disabled-left-border-width);
border-style: var(--listSelect-base-disabled-top-border-style)
var(--listSelect-base-disabled-right-border-style)
var(--listSelect-base-disabled-bottom-border-style)
var(--listSelect-base-disabled-left-border-style);
border-color: var(--listSelect-base-disabled-top-border-color)
var(--listSelect-base-disabled-right-border-color)
var(--listSelect-base-disabled-bottom-border-color)
var(--listSelect-base-disabled-left-border-color);
border-radius: var(--listSelect-base-disabled-top-left-border-radius)
var(--listSelect-base-disabled-top-right-border-radius)
var(--listSelect-base-disabled-bottom-right-border-radius)
var(--listSelect-base-disabled-bottom-left-border-radius);
background: var(--listSelect-base-disabled-bg-color);
}
}
}

273
packages/amis-ui/scss/components/form/_number.scss
View File

@ -11,13 +11,87 @@
border-radius: var(--Number-borderRadius);
overflow: hidden;
@include input-border();
border-width: var(--inputNumber-base-default-top-border-width)
var(--inputNumber-base-default-right-border-width)
var(--inputNumber-base-default-bottom-border-width)
var(--inputNumber-base-default-left-border-width);
border-style: var(--inputNumber-base-default-top-border-style)
var(--inputNumber-base-default-right-border-style)
var(--inputNumber-base-default-bottom-border-style)
var(--inputNumber-base-default-left-border-style);
border-color: var(--inputNumber-base-default-top-border-color)
var(--inputNumber-base-default-right-border-color)
var(--inputNumber-base-default-bottom-border-color)
var(--inputNumber-base-default-left-border-color);
border-radius: var(--inputNumber-base-default-top-left-border-radius)
var(--inputNumber-base-default-top-right-border-radius)
var(--inputNumber-base-default-bottom-right-border-radius)
var(--inputNumber-base-default-bottom-left-border-radius);
background: var(--inputNumber-base-default-bg-color);
&:hover {
border-width: var(--inputNumber-base-hover-top-border-width)
var(--inputNumber-base-hover-right-border-width)
var(--inputNumber-base-hover-bottom-border-width)
var(--inputNumber-base-hover-left-border-width);
border-style: var(--inputNumber-base-hover-top-border-style)
var(--inputNumber-base-hover-right-border-style)
var(--inputNumber-base-hover-bottom-border-style)
var(--inputNumber-base-hover-left-border-style);
border-color: var(--inputNumber-base-hover-top-border-color)
var(--inputNumber-base-hover-right-border-color)
var(--inputNumber-base-hover-bottom-border-color)
var(--inputNumber-base-hover-left-border-color);
border-radius: var(--inputNumber-base-hover-top-left-border-radius)
var(--inputNumber-base-hover-top-right-border-radius)
var(--inputNumber-base-hover-bottom-right-border-radius)
var(--inputNumber-base-hover-bottom-left-border-radius);
background: var(--inputNumber-base-hover-bg-color);
}
&-focused {
border-color: var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-input-boxShadow);
border-width: var(--inputNumber-base-active-top-border-width)
var(--inputNumber-base-active-right-border-width)
var(--inputNumber-base-active-bottom-border-width)
var(--inputNumber-base-active-left-border-width);
border-style: var(--inputNumber-base-active-top-border-style)
var(--inputNumber-base-active-right-border-style)
var(--inputNumber-base-active-bottom-border-style)
var(--inputNumber-base-active-left-border-style);
border-color: var(--inputNumber-base-active-top-border-color)
var(--inputNumber-base-active-right-border-color)
var(--inputNumber-base-active-bottom-border-color)
var(--inputNumber-base-active-left-border-color);
border-radius: var(--inputNumber-base-active-top-left-border-radius)
var(--inputNumber-base-active-top-right-border-radius)
var(--inputNumber-base-active-bottom-right-border-radius)
var(--inputNumber-base-active-bottom-left-border-radius);
background: var(--inputNumber-base-active-bg-color);
box-shadow: var(--inputNumber-base-active-shadow);
}
&-disabled {
border-width: var(--inputNumber-base-disabled-top-border-width)
var(--inputNumber-base-disabled-right-border-width)
var(--inputNumber-base-disabled-bottom-border-width)
var(--inputNumber-base-disabled-left-border-width);
border-style: var(--inputNumber-base-disabled-top-border-style)
var(--inputNumber-base-disabled-right-border-style)
var(--inputNumber-base-disabled-bottom-border-style)
var(--inputNumber-base-disabled-left-border-style);
border-color: var(--inputNumber-base-disabled-top-border-color)
var(--inputNumber-base-disabled-right-border-color)
var(--inputNumber-base-disabled-bottom-border-color)
var(--inputNumber-base-disabled-left-border-color);
border-radius: var(--inputNumber-base-disabled-top-left-border-radius)
var(--inputNumber-base-disabled-top-right-border-radius)
var(--inputNumber-base-disabled-bottom-right-border-radius)
var(--inputNumber-base-disabled-bottom-left-border-radius);
background: var(--inputNumber-base-disabled-bg-color);
}
@include input-border();
&-handler {
text-align: center;
overflow: hidden;
@ -37,8 +111,6 @@
}
&:hover {
border-color: var(--Form-input-onFocused-borderColor);
.#{$ns}Number-handler-wrap {
display: block;
}
@ -70,7 +142,8 @@
border: 0;
border-radius: var(--Form-input-borderRadius);
color: var(--Form-input-color);
padding: 0 var(--Form-inputNumber-paddingX);
padding: 0 var(--inputNumber-base-default-paddingRight) 0
var(--inputNumber-base-default-paddingLeft);
&::placeholder {
color: var(--Form-input-placeholderColor);
@ -92,6 +165,7 @@
&:hover:active {
background: var(--Number-handler-onActive-bg);
color: var(--inputNumber-base-active-icon-color);
}
}
@ -196,10 +270,31 @@
}
}
.#{$ns}NumberControl:not(.is-inline) > .#{$ns}Number {
.#{$ns}Form-control--sizeSm > .#{$ns}Number {
height: var(--inputNumber-size-sm-height);
}
.#{$ns}Form-control--sizeMd > .#{$ns}Number {
height: var(--inputNumber-size-md-height);
}
.#{$ns}Form-control--sizeLg > .#{$ns}Number {
height: var(--inputNumber-size-lg-height);
}
.#{$ns}NumberControl {
&:not(.is-inline) > .#{$ns}Number {
display: block;
}
.#{$ns}Select {
padding: var(--inputNumber-base-default-unit-paddingTop)
var(--inputNumber-base-default-unit-paddingRight)
var(--inputNumber-base-default-unit-paddingBottom)
var(--inputNumber-base-default-unit-paddingLeft);
}
}
.#{$ns}Number--borderHalf,
.#{$ns}Number--borderNone {
.#{$ns}Number-handler-wrap {
@ -222,6 +317,100 @@
border: var(--Number-borderWidth) solid var(--Number-borderColor);
border-radius: var(--Number-borderRadius);
overflow: hidden;
border-width: var(--inputNumber-enhance-default-top-border-width)
var(--inputNumber-enhance-default-right-border-width)
var(--inputNumber-enhance-default-bottom-border-width)
var(--inputNumber-enhance-default-left-border-width);
border-style: var(--inputNumber-enhance-default-top-border-style)
var(--inputNumber-enhance-default-right-border-style)
var(--inputNumber-enhance-default-bottom-border-style)
var(--inputNumber-enhance-default-left-border-style);
border-color: var(--inputNumber-enhance-default-top-border-color)
var(--inputNumber-enhance-default-right-border-color)
var(--inputNumber-enhance-default-bottom-border-color)
var(--inputNumber-enhance-default-left-border-color);
border-radius: var(--inputNumber-enhance-default-top-left-border-radius)
var(--inputNumber-enhance-default-top-right-border-radius)
var(--inputNumber-enhance-default-bottom-right-border-radius)
var(--inputNumber-enhance-default-bottom-left-border-radius);
.#{$ns}Number--enhance-input {
background: var(--inputNumber-enhance-default-bg-color);
}
&:hover {
border-width: var(--inputNumber-enhance-hover-top-border-width)
var(--inputNumber-enhance-hover-right-border-width)
var(--inputNumber-enhance-hover-bottom-border-width)
var(--inputNumber-enhance-hover-left-border-width);
border-style: var(--inputNumber-enhance-hover-top-border-style)
var(--inputNumber-enhance-hover-right-border-style)
var(--inputNumber-enhance-hover-bottom-border-style)
var(--inputNumber-enhance-hover-left-border-style);
border-color: var(--inputNumber-enhance-hover-top-border-color)
var(--inputNumber-enhance-hover-right-border-color)
var(--inputNumber-enhance-hover-bottom-border-color)
var(--inputNumber-enhance-hover-left-border-color);
border-radius: var(--inputNumber-enhance-hover-top-left-border-radius)
var(--inputNumber-enhance-hover-top-right-border-radius)
var(--inputNumber-enhance-hover-bottom-right-border-radius)
var(--inputNumber-enhance-hover-bottom-left-border-radius);
.#{$ns}Number--enhance-input {
background: var(--inputNumber-enhance-hover-bg-color);
}
}
&:focus-within {
border-width: var(--inputNumber-enhance-active-top-border-width)
var(--inputNumber-enhance-active-right-border-width)
var(--inputNumber-enhance-active-bottom-border-width)
var(--inputNumber-enhance-active-left-border-width);
border-style: var(--inputNumber-enhance-active-top-border-style)
var(--inputNumber-enhance-active-right-border-style)
var(--inputNumber-enhance-active-bottom-border-style)
var(--inputNumber-enhance-active-left-border-style);
border-color: var(--inputNumber-enhance-active-top-border-color)
var(--inputNumber-enhance-active-right-border-color)
var(--inputNumber-enhance-active-bottom-border-color)
var(--inputNumber-enhance-active-left-border-color);
border-radius: var(--inputNumber-enhance-active-top-left-border-radius)
var(--inputNumber-enhance-active-top-right-border-radius)
var(--inputNumber-enhance-active-bottom-right-border-radius)
var(--inputNumber-enhance-active-bottom-left-border-radius);
.#{$ns}Number--enhance-input {
background: var(--inputNumber-enhance-active-bg-color);
}
}
&-disabled {
border-width: var(--inputNumber-enhance-disabled-top-border-width)
var(--inputNumber-enhance-disabled-right-border-width)
var(--inputNumber-enhance-disabled-bottom-border-width)
var(--inputNumber-enhance-disabled-left-border-width);
border-style: var(--inputNumber-enhance-disabled-top-border-style)
var(--inputNumber-enhance-disabled-right-border-style)
var(--inputNumber-enhance-disabled-bottom-border-style)
var(--inputNumber-enhance-disabled-left-border-style);
border-color: var(--inputNumber-enhance-disabled-top-border-color)
var(--inputNumber-enhance-disabled-right-border-color)
var(--inputNumber-enhance-disabled-bottom-border-color)
var(--inputNumber-enhance-disabled-left-border-color);
border-radius: var(--inputNumber-enhance-disabled-top-left-border-radius)
var(--inputNumber-enhance-disabled-top-right-border-radius)
var(--inputNumber-enhance-disabled-bottom-right-border-radius)
var(--inputNumber-enhance-disabled-bottom-left-border-radius);
.#{$ns}Number--enhance-input {
background: var(--inputNumber-enhance-disabled-bg-color);
}
}
.#{$ns}Number-input {
padding: var(--inputNumber-enhance-default-paddingTop)
var(--inputNumber-enhance-default-paddingRight)
var(--inputNumber-enhance-default-paddingBottom)
var(--inputNumber-enhance-default-paddingLeft);
}
.#{$ns}Number--enhance-left-icon,
.#{$ns}Number--enhance-right-icon {
display: inline-block;
@ -229,22 +418,60 @@
height: var(--Form-inputNumber-base-height);
line-height: var(--Form-inputNumber-base-height);
text-align: center;
color: var(--Form-input-color);
background: var(--Form-input-bg);
&:hover {
cursor: pointer;
background: var(--Form-input-bg);
color: var(--Form-input-onHover-borderColor);
}
&-focused {
background: var(--Form-input-bg);
color: var(--Form-input-onFocused-borderColor);
}
color: var(--inputNumber-enhance-leftIcon-default-color);
& > svg {
width: var(--fontSizeSm);
height: var(--fontSizeSm);
}
}
.#{$ns}Number--enhance-left-icon {
background: var(--inputNumber-enhance-leftIcon-default-bg-color);
&:hover {
cursor: pointer;
background: var(--inputNumber-enhance-leftIcon-hover-bg-color);
}
&-focused {
background: var(--inputNumber-enhance-leftIcon-active-bg-color);
}
.InputNumber-enhance-minus {
content: var(--inputNumber-enhance-leftIcon-default-icon);
}
svg {
width: var(--inputNumber-enhance-leftIcon-default-height);
height: var(--inputNumber-enhance-leftIcon-default-width);
color: var(--inputNumber-enhance-leftIcon-default-color);
&:hover {
color: var(--inputNumber-enhance-leftIcon-hover-color);
}
&:active {
color: var(--inputNumber-enhance-leftIcon-active-color);
}
}
}
.#{$ns}Number--enhance-right-icon {
cursor: pointer;
background: var(--inputNumber-enhance-rightIcon-default-bg-color);
&:hover {
background: var(--inputNumber-enhance-rightIcon-hover-bg-color);
}
&:active {
background: var(--inputNumber-enhance-rightIcon-active-bg-color);
}
.InputNumber-enhance-plus {
content: var(--inputNumber-enhance-rightIcon-default-icon);
}
svg {
width: var(--inputNumber-enhance-rightIcon-default-height);
height: var(--inputNumber-enhance-rightIcon-default-width);
color: var(--inputNumber-enhance-rightIcon-default-color);
&:hover {
color: var(--inputNumber-enhance-rightIcon-hover-color);
}
&:active {
color: var(--inputNumber-enhance-rightIcon-active-color);
}
}
}
.#{$ns}Number--enhance-left-icon {
border-top-left-radius: var(--Number-borderRadius);
border-bottom-left-radius: var(--Number-borderRadius);
@ -266,9 +493,6 @@
&:hover {
border-color: var(--Form-input-onFocused-borderColor);
}
&:focus-within {
border-color: var(--Form-input-onFocused-borderColor);
}
.#{$ns}Number--enhance-border-min,
.#{$ns}Number--enhance-border-max {
background: var(--Number-handler-onDisabled-bg);
@ -280,13 +504,11 @@
}
}
.#{$ns}Number--enhance-border-disabled {
background: var(--Form-input-onDisabled-bg);
color: var(--Form-inputNumber-strong-disabled-color);
background: var(--inputNumber-enhance-disabled-bg-color);
cursor: not-allowed;
&:hover {
cursor: not-allowed;
background: var(--Form-input-onDisabled-bg);
color: var(--Form-inputNumber-strong-disabled-color);
background: var(--inputNumber-enhance-disabled-bg-color);
}
}
.#{$ns}Number--enhance-border-readOnly,
@ -309,7 +531,6 @@
}
.#{$ns}Number--enhance-disabled {
border-color: var(--Form-input-onDisabled-borderColor);
.#{$ns}Number--enhance-input {
border-color: var(--Form-input-onDisabled-borderColor);
}

48
packages/amis-ui/scss/components/form/_range.scss
View File

@ -10,9 +10,10 @@
}
&-input {
width: 20 * 4px;
height: 8 * 4px;
margin: 0 2 * 4px;
width: var(--InputRange-input-width);
margin: var(--InputRange-input-marginTop)
var(--InputRange-input-marginRight) var(--InputRange-input-marginBottom)
var(--InputRange-input-marginLeft);
.#{$ns}Number {
overflow: hidden;
@ -38,9 +39,12 @@
cursor: pointer;
svg {
height: px2rem(12px);
width: px2rem(12px);
fill: #999;
height: var(--InputRange-clearIcon-height);
width: var(--InputRange-clearIcon-width);
fill: var(--InputRange-clearIcon-color);
}
&:hover svg {
fill: var(--InputRange-clearIcon-hoverColor);
}
}
@ -57,11 +61,18 @@
.#{$ns}InputRange-handle-icon {
border-color: var(--InputRange-handle-onDisabled-border-color);
background-color: var(--InputRange-handle-onDisabled-bg);
cursor: not-allowed;
&:hover {
transform: none;
}
.icon-slider-handle {
g path {
fill: var(--InputRange-handle-icon-onDisabled-color);
}
}
}
.#{$ns}Number-handler {
@ -98,7 +109,7 @@
justify-content: center;
align-items: center;
outline: none;
border-radius: 50%;
border-radius: var(--InputRange-handle-border-radius);
transition: var(--InputRange-handle-transition);
&:hover {
@ -134,7 +145,7 @@
top: 0;
g path {
fill: var(--colors-brand-9);
fill: var(--InputRange-handle-icon-color);
}
}
}
@ -155,7 +166,7 @@
}
&-dot {
width: var(--InputRange-track-dot-height);
width: var(--InputRange-track-dot-width);
height: var(--InputRange-track-dot-height);
border-radius: 50%;
background-color: var(--InputRange-track-dot-bg);
@ -188,6 +199,8 @@
background-color: var(--InputRange-label-bg);
color: var(--InputRange-label-color);
font-size: var(--InputRange-label-font-size);
font-weight: var(--InputRange-label-fontWeight);
line-height: var(--InputRange-label-lineHeight);
border-radius: var(--InputRange-label-border-radius);
visibility: hidden;
@ -208,7 +221,8 @@
bottom: -4px;
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #000 transparent transparent transparent;
border-color: var(--InputRange-label-bg) transparent transparent
transparent;
}
}
@ -225,7 +239,8 @@
top: -4px;
border-width: 0 4px 4px 4px;
border-style: solid;
border-color: transparent transparent #000 transparent;
border-color: transparent transparent var(--InputRange-label-bg)
transparent;
}
}
@ -241,7 +256,8 @@
right: -4px;
border-width: 4px 0 4px 4px;
border-style: solid;
border-color: transparent transparent transparent #000;
border-color: transparent transparent transparent
var(--InputRange-label-bg);
}
}
@ -257,7 +273,8 @@
left: -4px;
border-width: 4px 4px 4px 0;
border-style: solid;
border-color: transparent #000 transparent transparent;
border-color: transparent var(--InputRange-label-bg) transparent
transparent;
}
}
}
@ -266,6 +283,11 @@
&-marks {
position: relative;
top: 8px;
color: var(--InputRange-marks-color);
font-size: var(--InputRange-marks-fontSize);
font-weight: var(--InputRange-marks-fontWeight);
line-height: var(--InputRange-marks-lineHeight);
margin-top: var(--InputRange-marks-marginTop);
div {
position: absolute;
top: 0;

10
packages/amis-ui/scss/components/form/_rating.scss
View File

@ -4,6 +4,7 @@
align-items: center;
justify-content: flex-start;
flex-flow: row wrap;
content: var(--Rating-colors);
& > ul {
display: flex;
@ -54,9 +55,10 @@
}
&-text {
font-size: var(--fontSizeMd);
font-size: var(--Rating-text-fontSize);
color: var(--Rating-text-color);
font-weight: var(--fontWeightNormal);
font-weight: var(--Rating-text-fontWeight);
line-height: var(--Rating-text-lineHeight);
&--left {
margin-right: var(--Rating-star-margin);
@ -68,6 +70,10 @@
}
}
.Rating-star-icon {
content: var(--Rating-star-icon);
}
.#{$ns}RatingControl {
position: relative;
overflow: hidden;

92
packages/amis-ui/scss/components/form/_switch.scss
View File

@ -5,7 +5,10 @@
height: var(--Switch-height);
min-width: var(--Switch-width);
overflow: hidden;
border-radius: px2rem(30px);
border-radius: var(--switch-size-default-top-left-border-radius)
var(--switch-size-default-top-right-border-radius)
var(--switch-size-default-bottom-right-border-radius)
var(--switch-size-default-bottom-left-border-radius);
background: var(--Switch-bgColor);
margin: 0;
vertical-align: middle;
@ -18,21 +21,24 @@
}
.text {
margin: 0 var(--Switch-text-marginRight) 0 var(--Switch-text-marginLeft);
margin: var(--switch-text-off-marginTop) var(--Switch-text-marginRight)
var(--switch-text-off-marginBottom) var(--Switch-text-marginLeft);
color: var(--Switch-valueColor);
text-indent: var(--gap-xs);
text-transform: uppercase;
font-size: var(--fontSizeSm);
font-size: var(--switch-text-off-fontSize);
font-weight: var(--switch-text-off-fontWeight);
line-height: var(--Switch-height);
vertical-align: super;
font-style: normal;
font-weight: bold;
transition: all var(--animation-duration);
> svg {
width: var(--fontSizeSm);
height: var(--fontSizeSm);
margin-top: calc((var(--Switch-height) - var(--fontSizeSm)) / 2);
width: var(--switch-text-off-fontSize);
height: var(--switch-text-off-fontSize);
margin-top: calc(
(var(--Switch-height) - var(--switch-text-off-fontSize)) / 2
);
}
}
@ -40,7 +46,7 @@
&:before {
content: '';
position: absolute;
background: var(--white);
background: var(--switch-default-off-slider-color);
width: var(--Switch-slider-width);
top: var(--Switch-slider-margin);
bottom: var(--Switch-slider-margin);
@ -55,17 +61,23 @@
}
&.is-checked {
background: var(--Switch-onActive-bgColor);
background: var(--Switch-checked-bgColor);
.slider::before {
left: auto;
left: calc(
100% - var(--Switch-slider-width) - var(--Switch-slider-margin)
);
right: var(--Switch-slider-margin);
border-width: 0;
background: var(--switch-default-on-slider-color);
}
.text {
color: var(--white);
margin: 0 var(--Switch-text-marginLeft) 0 var(--Switch-text-marginRight);
margin: var(--switch-text-on-marginTop) var(--switch-text-on-marginRight)
var(--switch-text-on-marginBottom) var(--switch-text-on-marginLeft);
color: var(--switch-text-on-color);
font-size: var(--switch-text-on-fontSize);
font-weight: var(--switch-text-on-fontWeight);
}
&:hover {
@ -100,10 +112,15 @@
&--sm {
height: var(--Switch-height--sm);
min-width: var(--Switch-width--sm);
border-radius: var(--switch-size-sm-top-left-border-radius)
var(--switch-size-sm-top-right-border-radius)
var(--switch-size-sm-bottom-right-border-radius)
var(--switch-size-sm-bottom-left-border-radius);
.text {
line-height: var(--Switch-height--sm);
margin: 0 var(--Switch-text-marginRight--sm) 0
margin: var(--switch-text-off-marginTop)
var(--Switch-text-marginRight--sm) var(--switch-text-off-marginBottom)
var(--Switch-text-marginLeft--sm);
> svg {
@ -113,58 +130,39 @@
.slider::before {
width: var(--Switch-slider-width--sm);
top: var(--switch-size-sm-slider-margin);
bottom: var(--switch-size-sm-slider-margin);
left: var(--switch-size-sm-slider-margin);
right: auto;
}
&.is-checked {
.slider::before {
right: var(--Switch-slider-margin);
}
.text {
margin: 0 var(--Switch-text-marginLeft--sm) 0
var(--Switch-text-marginRight--sm);
left: calc(
100% - var(--Switch-slider-width--sm) -
var(--switch-size-sm-slider-margin)
);
right: var(--switch-size-sm-slider-margin);
}
}
}
.text {
margin: 0 px2rem(8px) 0 px2rem(25px);
vertical-align: super;
}
.slider {
&:before {
width: calc(var(--Switch-height) - #{px2rem(4px)});
top: px2rem(2px);
bottom: px2rem(2px);
left: px2rem(2px);
transition: all 0.5s ease;
}
}
&:active {
.slider::before {
width: calc(var(--Switch-height) + #{px2rem(2px)});
border-radius: 10px;
}
}
&.is-checked {
background: var(--Switch-checked-bgColor);
.slider::before {
right: auto;
left: calc(
100% - (var(--Switch-height) - #{px2rem(4px)}) - #{px2rem(2px)}
);
}
.text {
margin: 0 px2rem(25px) 0 px2rem(8px);
}
}
}
.#{$ns}Switch-option {
vertical-align: middle;
margin-left: var(--Switch-gap);
font-size: var(--switch-option-fontSize);
font-weight: var(--switch-option-fontWeight);
line-height: var(--switch-option-lineHeight);
color: var(--switch-option-color);
margin: var(--switch-option-marginTop) var(--switch-option-marginRight)
var(--switch-option-marginBottom) var(--Switch-gap);
&:first-child {
margin-left: 0;

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

@ -52,6 +52,7 @@
@include button-size(
var(--TagControl-sugBtn-fontSize),
var(--TagControl-sugBtn-fontWeight),
var(--TagControl-sugBtn-lineHeight),
var(--TagControl-sugBtn-borderRadius),
var(--TagControl-sugBtn-borderRadius),

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

@ -1,6 +1,127 @@
.#{$ns}TextControl {
@include input-text();
.InputText-clear {
content: var(--input-clearable-icon);
}
&-clear {
padding: 0 var(--Form-input-clearBtn-padding);
}
.#{$ns}TextControl-clear svg {
font-size: var(--input-clearable-icon-size);
fill: var(--input-clearable-default-color);
width: var(--input-clearable-icon-size);
height: var(--input-clearable-icon-size);
&:hover {
fill: var(--input-clearable-hover-color);
}
&:active {
fill: var(--input-clearable-active-color);
}
}
&-input {
border-width: var(--input-default-default-top-border-width)
var(--input-default-default-right-border-width)
var(--input-default-default-bottom-border-width)
var(--input-default-default-left-border-width);
border-style: var(--input-default-default-top-border-style)
var(--input-default-default-right-border-style)
var(--input-default-default-bottom-border-style)
var(--input-default-default-left-border-style);
border-color: var(--input-default-default-top-border-color)
var(--input-default-default-right-border-color)
var(--input-default-default-bottom-border-color)
var(--input-default-default-left-border-color);
border-radius: var(--input-default-default-top-left-border-radius)
var(--input-default-default-top-right-border-radius)
var(--input-default-default-bottom-right-border-radius)
var(--input-default-default-bottom-left-border-radius);
padding: var(--input-default-default-paddingTop)
var(--input-default-default-paddingRight)
var(--input-default-default-paddingBottom)
var(--input-default-default-paddingLeft);
background: var(--input-default-default-bg-color);
height: var(--input-size-default-height);
&:hover,
&.hover {
border-width: var(--input-default-hover-top-border-width)
var(--input-default-hover-right-border-width)
var(--input-default-hover-bottom-border-width)
var(--input-default-hover-left-border-width);
border-style: var(--input-default-hover-top-border-style)
var(--input-default-hover-right-border-style)
var(--input-default-hover-bottom-border-style)
var(--input-default-hover-left-border-style);
border-color: var(--input-default-hover-top-border-color)
var(--input-default-hover-right-border-color)
var(--input-default-hover-bottom-border-color)
var(--input-default-hover-left-border-color);
border-radius: var(--input-default-hover-top-left-border-radius)
var(--input-default-hover-top-right-border-radius)
var(--input-default-hover-bottom-right-border-radius)
var(--input-default-hover-bottom-left-border-radius);
padding: var(--input-default-hover-paddingTop)
var(--input-default-hover-paddingRight)
var(--input-default-hover-paddingBottom)
var(--input-default-hover-paddingLeft);
background: var(--input-default-hover-bg-color);
}
}
&.is-focused > &-input,
&-input.active {
border-width: var(--input-default-active-top-border-width)
var(--input-default-active-right-border-width)
var(--input-default-active-bottom-border-width)
var(--input-default-active-left-border-width);
border-style: var(--input-default-active-top-border-style)
var(--input-default-active-right-border-style)
var(--input-default-active-bottom-border-style)
var(--input-default-active-left-border-style);
border-color: var(--input-default-active-top-border-color)
var(--input-default-active-right-border-color)
var(--input-default-active-bottom-border-color)
var(--input-default-active-left-border-color);
border-radius: var(--input-default-active-top-left-border-radius)
var(--input-default-active-top-right-border-radius)
var(--input-default-active-bottom-right-border-radius)
var(--input-default-active-bottom-left-border-radius);
padding: var(--input-default-active-paddingTop)
var(--input-default-active-paddingRight)
var(--input-default-active-paddingBottom)
var(--input-default-active-paddingLeft);
background: var(--input-default-active-bg-color);
box-shadow: var(--input-default-active-shadow);
}
&.is-disabled > &-input {
border-width: var(--input-default-disabled-top-border-width)
var(--input-default-disabled-right-border-width)
var(--input-default-disabled-bottom-border-width)
var(--input-default-disabled-left-border-width);
border-style: var(--input-default-disabled-top-border-style)
var(--input-default-disabled-right-border-style)
var(--input-default-disabled-bottom-border-style)
var(--input-default-disabled-left-border-style);
border-color: var(--input-default-disabled-top-border-color)
var(--input-default-disabled-right-border-color)
var(--input-default-disabled-bottom-border-color)
var(--input-default-disabled-left-border-color);
border-radius: var(--input-default-disabled-top-left-border-radius)
var(--input-default-disabled-top-right-border-radius)
var(--input-default-disabled-bottom-right-border-radius)
var(--input-default-disabled-bottom-left-border-radius);
padding: var(--input-default-disabled-paddingTop)
var(--input-default-disabled-paddingRight)
var(--input-default-disabled-paddingBottom)
var(--input-default-disabled-paddingLeft);
background: var(--input-default-disabled-bg-color);
}
&-input input {
overflow: hidden;
white-space: nowrap;
@ -77,18 +198,29 @@
justify-content: center;
padding-left: px2rem(10px);
padding-right: px2rem(10px);
background: var(--Form-input-addOnBg);
background: var(--input-addon-text-bg-color-default);
color: var(--Form-input-addOnColor);
border-color: var(--Form-input-borderColor);
border-style: solid;
border-width: px2rem(1px) 0;
border-width: var(--input-addon-text-top-border-width) 0
var(--input-addon-text-bottom-border-width) 0;
border-style: var(--input-addon-text-top-border-style)
var(--input-addon-text-right-border-style)
var(--input-addon-text-bottom-border-style)
var(--input-addon-text-left-border-style);
border-color: var(--input-addon-text-top-border-color)
var(--input-addon-text-right-border-color)
var(--input-addon-text-bottom-border-color)
var(--input-addon-text-left-border-color);
&:hover {
background: var(--input-addon-text-bg-color-hover);
}
&:first-child {
border-left-width: px2rem(1px);
border-left-width: var(--input-addon-text-left-border-width);
}
&:last-child {
border-right-width: px2rem(1px);
border-right-width: var(--input-addon-text-right-border-width);
border-top-right-radius: var(--Form-input-borderRadius);
border-bottom-right-radius: var(--Form-input-borderRadius);
}
@ -275,7 +407,14 @@
}
&-counter {
color: var(--text--muted-color);
color: var(--input-count-single-color);
font-size: var(--input-count-single-fontSize);
}
&-inputPrefix,
&-inputSuffix {
color: var(--input-prefix-color);
font-size: var(--input-prefix-fontSize);
}
.has-error--maxLength &-counter {
@ -290,15 +429,52 @@
}
&-revealPassword {
font-size: 0;
display: inline-flex;
align-items: center;
.icon {
width: var(--Form-input-password-icon-size);
height: var(--Form-input-password-icon-size);
color: var(--Form-input-password-icon-color);
padding: 0 var(--Form-input-clearBtn-padding);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
text-decoration: none;
svg {
cursor: pointer;
}
}
.InputText-invisible {
content: var(--input-password-invisible-icon);
}
.InputText-view {
content: var(--input-password-view-icon);
}
&-icon-view {
font-size: var(--input-password-view-icon-size);
fill: var(--input-password-view-icon-color);
color: var(--input-password-view-icon-color);
width: var(--input-password-view-icon-size);
height: var(--input-password-view-icon-size);
display: flex;
align-items: center;
svg {
width: var(--input-password-view-icon-size);
height: var(--input-password-view-icon-size);
}
}
&-icon-invisible {
font-size: var(--input-password-invisible-icon-size);
fill: var(--input-password-invisible-icon-color);
color: var(--input-password-invisible-icon-color);
width: var(--input-password-invisible-icon-size);
height: var(--input-password-invisible-icon-size);
display: flex;
align-items: center;
svg {
width: var(--input-password-invisible-icon-size);
height: var(--input-password-invisible-icon-size);
}
}
}

16
packages/amis-ui/scss/components/form/_textarea.scss
View File

@ -15,9 +15,10 @@
border: 1px solid var(--Form-input-borderColor);
border-radius: var(--Form-input-borderRadius);
background: var(--Form-input-bg);
padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
/* 避免和clear btn 重叠 */
padding-right: calc(var(--Form-input-paddingX) + var(--Form-fontSize));
padding: var(--input-textarea-paddingTop)
var(--input-textarea-paddingRight)
var(--input-textarea-paddingBottom)
var(--input-textarea-paddingLeft);
font-size: var(--Form-input-fontSize);
display: block;
width: 100%;
@ -43,15 +44,12 @@
padding-bottom: var(--Form-input-paddingY);
background-color: #fff;
text-align: right;
// right: var(--Form-input-paddingX);
// bottom: var(--Form-input-paddingY);
font-size: var(--fontSizeSm);
// padding: 0 5px;
border-radius: 3px;
color: #84868c;
color: var(--input-count-multi-color);
font-size: var(--input-count-multi-fontSize);
&.is-empty {
color: #84868c;
color: var(--input-count-multi-color);
}
}

100
packages/amis-ui/scss/themes/_ang-variables.scss
View File

@ -158,56 +158,56 @@ $ns: 'a-';
--sizes-size-7: 0.75rem;
--sizes-size-8: 0.875rem;
--sizes-size-9: 1rem;
--sizes-base-2: 0.125rem;
--sizes-base-3: 0.25rem;
--sizes-base-4: 0.375rem;
--sizes-base-5: 0.5rem;
--sizes-base-6: 0.625rem;
--sizes-base-7: 0.75rem;
--sizes-base-8: 0.875rem;
--sizes-base-9: 1rem;
--sizes-base-10: 1.125rem;
--sizes-base-11: 1.25rem;
--sizes-base-12: 1.375rem;
--sizes-base-13: 1.5rem;
--sizes-base-14: 1.625rem;
--sizes-base-15: 1.75rem;
--sizes-base-16: 1.875rem;
--sizes-base-17: 2rem;
--sizes-base-18: 2.125rem;
--sizes-base-19: 2.25rem;
--sizes-base-20: 2.375rem;
--sizes-base-21: 2.5rem;
--sizes-base-22: 2.625rem;
--sizes-base-23: 2.75rem;
--sizes-base-24: 2.875rem;
--sizes-base-25: 3rem;
--sizes-base-26: 3.125rem;
--sizes-base-27: 3.25rem;
--sizes-base-28: 3.375rem;
--sizes-base-29: 3.5rem;
--sizes-base-30: 3.625rem;
--sizes-base-31: 3.75rem;
--sizes-base-32: 3.875rem;
--sizes-base-33: 4rem;
--sizes-base-34: 4.125rem;
--sizes-base-35: 4.25rem;
--sizes-base-36: 4.375rem;
--sizes-base-37: 4.5rem;
--sizes-base-38: 4.625rem;
--sizes-base-39: 4.75rem;
--sizes-base-40: 4.875rem;
--sizes-base-41: 5rem;
--sizes-base-42: 5.125rem;
--sizes-base-43: 5.25rem;
--sizes-base-44: 5.375rem;
--sizes-base-45: 5.5rem;
--sizes-base-46: 5.625rem;
--sizes-base-47: 5.75rem;
--sizes-base-48: 5.875rem;
--sizes-base-49: 6rem;
--sizes-base-50: 6.125rem;
--sizes-base-51: 6.25rem;
--sizes-base-1: 0.125rem;
--sizes-base-2: 0.25rem;
--sizes-base-3: 0.375rem;
--sizes-base-4: 0.5rem;
--sizes-base-5: 0.625rem;
--sizes-base-6: 0.75rem;
--sizes-base-7: 0.875rem;
--sizes-base-8: 1rem;
--sizes-base-9: 1.125rem;
--sizes-base-10: 1.25rem;
--sizes-base-11: 1.375rem;
--sizes-base-12: 1.5rem;
--sizes-base-13: 1.625rem;
--sizes-base-14: 1.75rem;
--sizes-base-15: 1.875rem;
--sizes-base-16: 2rem;
--sizes-base-17: 2.125rem;
--sizes-base-18: 2.25rem;
--sizes-base-19: 2.375rem;
--sizes-base-20: 2.5rem;
--sizes-base-21: 2.625rem;
--sizes-base-22: 2.75rem;
--sizes-base-23: 2.875rem;
--sizes-base-24: 3rem;
--sizes-base-25: 3.125rem;
--sizes-base-26: 3.25rem;
--sizes-base-27: 3.375rem;
--sizes-base-28: 3.5rem;
--sizes-base-29: 3.625rem;
--sizes-base-30: 3.75rem;
--sizes-base-31: 3.875rem;
--sizes-base-32: 4rem;
--sizes-base-33: 4.125rem;
--sizes-base-34: 4.25rem;
--sizes-base-35: 4.375rem;
--sizes-base-36: 4.5rem;
--sizes-base-37: 4.625rem;
--sizes-base-38: 4.75rem;
--sizes-base-39: 4.875rem;
--sizes-base-40: 5rem;
--sizes-base-41: 5.125rem;
--sizes-base-42: 5.25rem;
--sizes-base-43: 5.375rem;
--sizes-base-44: 5.5rem;
--sizes-base-45: 5.625rem;
--sizes-base-46: 5.75rem;
--sizes-base-47: 5.875rem;
--sizes-base-48: 6rem;
--sizes-base-49: 6.125rem;
--sizes-base-50: 6.25rem;
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

100
packages/amis-ui/scss/themes/_antd-variables.scss
View File

@ -158,56 +158,56 @@ $ns: 'antd-';
--sizes-size-7: 0.75rem;
--sizes-size-8: 0.875rem;
--sizes-size-9: 1rem;
--sizes-base-2: 0.125rem;
--sizes-base-3: 0.25rem;
--sizes-base-4: 0.375rem;
--sizes-base-5: 0.5rem;
--sizes-base-6: 0.625rem;
--sizes-base-7: 0.75rem;
--sizes-base-8: 0.875rem;
--sizes-base-9: 1rem;
--sizes-base-10: 1.125rem;
--sizes-base-11: 1.25rem;
--sizes-base-12: 1.375rem;
--sizes-base-13: 1.5rem;
--sizes-base-14: 1.625rem;
--sizes-base-15: 1.75rem;
--sizes-base-16: 1.875rem;
--sizes-base-17: 2rem;
--sizes-base-18: 2.125rem;
--sizes-base-19: 2.25rem;
--sizes-base-20: 2.375rem;
--sizes-base-21: 2.5rem;
--sizes-base-22: 2.625rem;
--sizes-base-23: 2.75rem;
--sizes-base-24: 2.875rem;
--sizes-base-25: 3rem;
--sizes-base-26: 3.125rem;
--sizes-base-27: 3.25rem;
--sizes-base-28: 3.375rem;
--sizes-base-29: 3.5rem;
--sizes-base-30: 3.625rem;
--sizes-base-31: 3.75rem;
--sizes-base-32: 3.875rem;
--sizes-base-33: 4rem;
--sizes-base-34: 4.125rem;
--sizes-base-35: 4.25rem;
--sizes-base-36: 4.375rem;
--sizes-base-37: 4.5rem;
--sizes-base-38: 4.625rem;
--sizes-base-39: 4.75rem;
--sizes-base-40: 4.875rem;
--sizes-base-41: 5rem;
--sizes-base-42: 5.125rem;
--sizes-base-43: 5.25rem;
--sizes-base-44: 5.375rem;
--sizes-base-45: 5.5rem;
--sizes-base-46: 5.625rem;
--sizes-base-47: 5.75rem;
--sizes-base-48: 5.875rem;
--sizes-base-49: 6rem;
--sizes-base-50: 6.125rem;
--sizes-base-51: 6.25rem;
--sizes-base-1: 0.125rem;
--sizes-base-2: 0.25rem;
--sizes-base-3: 0.375rem;
--sizes-base-4: 0.5rem;
--sizes-base-5: 0.625rem;
--sizes-base-6: 0.75rem;
--sizes-base-7: 0.875rem;
--sizes-base-8: 1rem;
--sizes-base-9: 1.125rem;
--sizes-base-10: 1.25rem;
--sizes-base-11: 1.375rem;
--sizes-base-12: 1.5rem;
--sizes-base-13: 1.625rem;
--sizes-base-14: 1.75rem;
--sizes-base-15: 1.875rem;
--sizes-base-16: 2rem;
--sizes-base-17: 2.125rem;
--sizes-base-18: 2.25rem;
--sizes-base-19: 2.375rem;
--sizes-base-20: 2.5rem;
--sizes-base-21: 2.625rem;
--sizes-base-22: 2.75rem;
--sizes-base-23: 2.875rem;
--sizes-base-24: 3rem;
--sizes-base-25: 3.125rem;
--sizes-base-26: 3.25rem;
--sizes-base-27: 3.375rem;
--sizes-base-28: 3.5rem;
--sizes-base-29: 3.625rem;
--sizes-base-30: 3.75rem;
--sizes-base-31: 3.875rem;
--sizes-base-32: 4rem;
--sizes-base-33: 4.125rem;
--sizes-base-34: 4.25rem;
--sizes-base-35: 4.375rem;
--sizes-base-36: 4.5rem;
--sizes-base-37: 4.625rem;
--sizes-base-38: 4.75rem;
--sizes-base-39: 4.875rem;
--sizes-base-40: 5rem;
--sizes-base-41: 5.125rem;
--sizes-base-42: 5.25rem;
--sizes-base-43: 5.375rem;
--sizes-base-44: 5.5rem;
--sizes-base-45: 5.625rem;
--sizes-base-46: 5.75rem;
--sizes-base-47: 5.875rem;
--sizes-base-48: 6rem;
--sizes-base-49: 6.125rem;
--sizes-base-50: 6.25rem;
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

100
packages/amis-ui/scss/themes/_cxd-variables.scss
View File

@ -154,56 +154,56 @@ $ns: 'cxd-';
--sizes-size-7: 0.75rem;
--sizes-size-8: 0.875rem;
--sizes-size-9: 1rem;
--sizes-base-2: 0.125rem;
--sizes-base-3: 0.25rem;
--sizes-base-4: 0.375rem;
--sizes-base-5: 0.5rem;
--sizes-base-6: 0.625rem;
--sizes-base-7: 0.75rem;
--sizes-base-8: 0.875rem;
--sizes-base-9: 1rem;
--sizes-base-10: 1.125rem;
--sizes-base-11: 1.25rem;
--sizes-base-12: 1.375rem;
--sizes-base-13: 1.5rem;
--sizes-base-14: 1.625rem;
--sizes-base-15: 1.75rem;
--sizes-base-16: 1.875rem;
--sizes-base-17: 2rem;
--sizes-base-18: 2.125rem;
--sizes-base-19: 2.25rem;
--sizes-base-20: 2.375rem;
--sizes-base-21: 2.5rem;
--sizes-base-22: 2.625rem;
--sizes-base-23: 2.75rem;
--sizes-base-24: 2.875rem;
--sizes-base-25: 3rem;
--sizes-base-26: 3.125rem;
--sizes-base-27: 3.25rem;
--sizes-base-28: 3.375rem;
--sizes-base-29: 3.5rem;
--sizes-base-30: 3.625rem;
--sizes-base-31: 3.75rem;
--sizes-base-32: 3.875rem;
--sizes-base-33: 4rem;
--sizes-base-34: 4.125rem;
--sizes-base-35: 4.25rem;
--sizes-base-36: 4.375rem;
--sizes-base-37: 4.5rem;
--sizes-base-38: 4.625rem;
--sizes-base-39: 4.75rem;
--sizes-base-40: 4.875rem;
--sizes-base-41: 5rem;
--sizes-base-42: 5.125rem;
--sizes-base-43: 5.25rem;
--sizes-base-44: 5.375rem;
--sizes-base-45: 5.5rem;
--sizes-base-46: 5.625rem;
--sizes-base-47: 5.75rem;
--sizes-base-48: 5.875rem;
--sizes-base-49: 6rem;
--sizes-base-50: 6.125rem;
--sizes-base-51: 6.25rem;
--sizes-base-1: 0.125rem;
--sizes-base-2: 0.25rem;
--sizes-base-3: 0.375rem;
--sizes-base-4: 0.5rem;
--sizes-base-5: 0.625rem;
--sizes-base-6: 0.75rem;
--sizes-base-7: 0.875rem;
--sizes-base-8: 1rem;
--sizes-base-9: 1.125rem;
--sizes-base-10: 1.25rem;
--sizes-base-11: 1.375rem;
--sizes-base-12: 1.5rem;
--sizes-base-13: 1.625rem;
--sizes-base-14: 1.75rem;
--sizes-base-15: 1.875rem;
--sizes-base-16: 2rem;
--sizes-base-17: 2.125rem;
--sizes-base-18: 2.25rem;
--sizes-base-19: 2.375rem;
--sizes-base-20: 2.5rem;
--sizes-base-21: 2.625rem;
--sizes-base-22: 2.75rem;
--sizes-base-23: 2.875rem;
--sizes-base-24: 3rem;
--sizes-base-25: 3.125rem;
--sizes-base-26: 3.25rem;
--sizes-base-27: 3.375rem;
--sizes-base-28: 3.5rem;
--sizes-base-29: 3.625rem;
--sizes-base-30: 3.75rem;
--sizes-base-31: 3.875rem;
--sizes-base-32: 4rem;
--sizes-base-33: 4.125rem;
--sizes-base-34: 4.25rem;
--sizes-base-35: 4.375rem;
--sizes-base-36: 4.5rem;
--sizes-base-37: 4.625rem;
--sizes-base-38: 4.75rem;
--sizes-base-39: 4.875rem;
--sizes-base-40: 5rem;
--sizes-base-41: 5.125rem;
--sizes-base-42: 5.25rem;
--sizes-base-43: 5.375rem;
--sizes-base-44: 5.5rem;
--sizes-base-45: 5.625rem;
--sizes-base-46: 5.75rem;
--sizes-base-47: 5.875rem;
--sizes-base-48: 6rem;
--sizes-base-49: 6.125rem;
--sizes-base-50: 6.25rem;
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

100
packages/amis-ui/scss/themes/_dark-variables.scss
View File

@ -166,56 +166,56 @@ $ns: 'dark-';
--sizes-size-7: 0.75rem;
--sizes-size-8: 0.875rem;
--sizes-size-9: 1rem;
--sizes-base-2: 0.125rem;
--sizes-base-3: 0.25rem;
--sizes-base-4: 0.375rem;
--sizes-base-5: 0.5rem;
--sizes-base-6: 0.625rem;
--sizes-base-7: 0.75rem;
--sizes-base-8: 0.875rem;
--sizes-base-9: 1rem;
--sizes-base-10: 1.125rem;
--sizes-base-11: 1.25rem;
--sizes-base-12: 1.375rem;
--sizes-base-13: 1.5rem;
--sizes-base-14: 1.625rem;
--sizes-base-15: 1.75rem;
--sizes-base-16: 1.875rem;
--sizes-base-17: 2rem;
--sizes-base-18: 2.125rem;
--sizes-base-19: 2.25rem;
--sizes-base-20: 2.375rem;
--sizes-base-21: 2.5rem;
--sizes-base-22: 2.625rem;
--sizes-base-23: 2.75rem;
--sizes-base-24: 2.875rem;
--sizes-base-25: 3rem;
--sizes-base-26: 3.125rem;
--sizes-base-27: 3.25rem;
--sizes-base-28: 3.375rem;
--sizes-base-29: 3.5rem;
--sizes-base-30: 3.625rem;
--sizes-base-31: 3.75rem;
--sizes-base-32: 3.875rem;
--sizes-base-33: 4rem;
--sizes-base-34: 4.125rem;
--sizes-base-35: 4.25rem;
--sizes-base-36: 4.375rem;
--sizes-base-37: 4.5rem;
--sizes-base-38: 4.625rem;
--sizes-base-39: 4.75rem;
--sizes-base-40: 4.875rem;
--sizes-base-41: 5rem;
--sizes-base-42: 5.125rem;
--sizes-base-43: 5.25rem;
--sizes-base-44: 5.375rem;
--sizes-base-45: 5.5rem;
--sizes-base-46: 5.625rem;
--sizes-base-47: 5.75rem;
--sizes-base-48: 5.875rem;
--sizes-base-49: 6rem;
--sizes-base-50: 6.125rem;
--sizes-base-51: 6.25rem;
--sizes-base-1: 0.125rem;
--sizes-base-2: 0.25rem;
--sizes-base-3: 0.375rem;
--sizes-base-4: 0.5rem;
--sizes-base-5: 0.625rem;
--sizes-base-6: 0.75rem;
--sizes-base-7: 0.875rem;
--sizes-base-8: 1rem;
--sizes-base-9: 1.125rem;
--sizes-base-10: 1.25rem;
--sizes-base-11: 1.375rem;
--sizes-base-12: 1.5rem;
--sizes-base-13: 1.625rem;
--sizes-base-14: 1.75rem;
--sizes-base-15: 1.875rem;
--sizes-base-16: 2rem;
--sizes-base-17: 2.125rem;
--sizes-base-18: 2.25rem;
--sizes-base-19: 2.375rem;
--sizes-base-20: 2.5rem;
--sizes-base-21: 2.625rem;
--sizes-base-22: 2.75rem;
--sizes-base-23: 2.875rem;
--sizes-base-24: 3rem;
--sizes-base-25: 3.125rem;
--sizes-base-26: 3.25rem;
--sizes-base-27: 3.375rem;
--sizes-base-28: 3.5rem;
--sizes-base-29: 3.625rem;
--sizes-base-30: 3.75rem;
--sizes-base-31: 3.875rem;
--sizes-base-32: 4rem;
--sizes-base-33: 4.125rem;
--sizes-base-34: 4.25rem;
--sizes-base-35: 4.375rem;
--sizes-base-36: 4.5rem;
--sizes-base-37: 4.625rem;
--sizes-base-38: 4.75rem;
--sizes-base-39: 4.875rem;
--sizes-base-40: 5rem;
--sizes-base-41: 5.125rem;
--sizes-base-42: 5.25rem;
--sizes-base-43: 5.375rem;
--sizes-base-44: 5.5rem;
--sizes-base-45: 5.625rem;
--sizes-base-46: 5.75rem;
--sizes-base-47: 5.875rem;
--sizes-base-48: 6rem;
--sizes-base-49: 6.125rem;
--sizes-base-50: 6.25rem;
--shadows-shadow-none: 0px 0px 0px 0px transparent;
--shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),

10
packages/amis-ui/src/components/Collapse.tsx
View File

@ -14,6 +14,7 @@ import Transition, {
import {autobind} from 'amis-core';
import {isClickOnInput} from 'amis-core';
import {TranslateFn} from 'amis-core';
import {Icon} from './icons';
const collapseStyles: {
[propName: string]: string;
@ -191,7 +192,14 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
)
})
) : (
<span className={cx('Collapse-arrow')} />
<span className={cx('Collapse-arrow-wrap')}>
<Icon
icon="right-arrow-bold"
className={cx('Collapse-arrow', 'icon')}
wrapClassName={cx('Collapse-arrow')}
iconContent="Collapse-arrow"
/>
</span>
)
) : (
''

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

@ -356,7 +356,12 @@ export class NumberInput extends React.Component<NumberProps, any> {
)}
onClick={() => this.handleEnhanceModeChange('subtract')}
>
<Icon icon="minus" className="icon" />
<Icon
icon="minus"
className="icon"
wrapClassName={cx('InputNumber-enhance-minus icon')}
iconContent="InputNumber-enhance-minus"
/>
</div>
{this.renderBase()}
<div
@ -368,7 +373,12 @@ export class NumberInput extends React.Component<NumberProps, any> {
)}
onClick={() => this.handleEnhanceModeChange('add')}
>
<Icon icon="plus" className="icon " />
<Icon
icon="plus"
className="icon"
wrapClassName={cx('InputNumber-enhance-plus icon')}
iconContent="InputNumber-enhance-plus"
/>
</div>
</div>
) : (

46
packages/amis-ui/src/components/Rating.tsx
View File

@ -10,6 +10,7 @@ import {isObject} from 'amis-core';
import {validations} from 'amis-core';
import {Icon} from './icons';
import {isObjectShallowModified} from 'amis-core';
import {isEmpty} from 'lodash';
export type textPositionType = 'left' | 'right';
@ -46,14 +47,11 @@ export class Rating extends React.Component<RatingProps, any> {
allowClear: true,
value: 0,
count: 5,
char: <Icon icon="star" className="icon" />,
colors: {
'2': '#abadb1',
'3': '#787b81',
'5': '#ffa900'
},
char: <Icon icon="star" className="icon" iconContent="Rating-star-icon" />,
colors: '',
textPosition: 'right' as textPositionType
};
ratingRef = React.createRef<HTMLDivElement>();
starsNode: Record<string, any>;
@ -139,7 +137,25 @@ export class Rating extends React.Component<RatingProps, any> {
getShowColorAndText(value: number) {
const {colors, texts, half} = this.props;
let tempColor = colors;
if (this.ratingRef.current) {
const style = getComputedStyle(this.ratingRef.current);
let defaultColors = [];
try {
defaultColors = JSON.parse(
JSON.parse(style.getPropertyValue('content'))
);
} catch (e) {
console.warn(e);
}
const obj: any = {};
defaultColors.forEach((item: any) => {
obj[item.id] = item.value;
});
if (isEmpty(colors) && !isEmpty(obj)) {
tempColor = obj;
}
}
if (!value)
return this.setState({
showText: null
@ -152,21 +168,21 @@ export class Rating extends React.Component<RatingProps, any> {
value = Math.floor(value);
}
if (colors && typeof colors !== 'string') {
const keys: string[] = this.sortKeys(colors);
if (tempColor && typeof tempColor !== 'string') {
const keys: string[] = this.sortKeys(tempColor);
const showKey = keys.filter(item => Number(item) < value).length;
const showColor = keys[showKey] !== undefined && colors[keys[showKey]];
const showColor = keys[showKey] !== undefined && tempColor[keys[showKey]];
// 取最大 key 的颜色，避免如下情况：colors 只设置了 1-4，value 为 5，导致取不到颜色而无法显示
const lastColor = keys.length && colors[keys[keys.length - 1]];
// 取最大 key 的颜色，避免如下情况：tempColor 只设置了 1-4，value 为 5，导致取不到颜色而无法显示
const lastColor = keys.length && tempColor[keys[keys.length - 1]];
this.setState({
showColor: showColor || lastColor || ''
});
} else if (colors && typeof colors === 'string') {
} else if (tempColor && typeof tempColor === 'string') {
this.setState({
showColor: colors
showColor: tempColor
});
}
@ -418,7 +434,7 @@ export class Rating extends React.Component<RatingProps, any> {
const {className, textPosition, classnames: cx} = this.props;
return (
<div className={cx('Rating', className)}>
<div className={cx('Rating', className)} ref={this.ratingRef}>
{textPosition === 'left' ? (
<>
{this.renderText()}

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

@ -321,6 +321,7 @@ interface SelectProps
searchable?: boolean;
}
) => JSX.Element;
renderValueLabel?: (item: Option) => JSX.Element;
searchable?: boolean;
options: Array<Option>;
value: any;
@ -749,6 +750,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
maxTagCount,
overflowTagPopover,
showInvalidMatch,
renderValueLabel,
translate: __
} = this.props;
const selection = this.state.selection;
@ -807,7 +809,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
})}
>
<span className={cx('Select-valueLabel')}>
{item[labelField || 'label']}
{renderValueLabel
? renderValueLabel(item)
: item[labelField || 'label']}
</span>
<span
className={cx('Select-valueIcon', {
@ -834,7 +838,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
} /** 避免点击查看浮窗时呼出下拉菜单 */
>
<span className={cx('Select-valueLabel')}>
{item[labelField || 'label']}
{renderValueLabel
? renderValueLabel(item)
: item[labelField || 'label']}
</span>
</div>
</TooltipWrapper>
@ -855,7 +861,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
})}
>
<span className={cx('Select-valueLabel')}>
{item[labelField || 'label']}
{renderValueLabel ? renderValueLabel(item) : item[labelField || 'label']}
</span>
<span
className={cx('Select-valueIcon', {
@ -881,7 +887,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
})}
key={index}
>
{item[labelField || 'label']}
{renderValueLabel ? renderValueLabel(item) : item[labelField || 'label']}
</div>
);
}
@ -904,7 +910,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
})}
>
<span className={cx('Select-valueLabel')}>
{item[labelField || 'label']}
{renderValueLabel ? renderValueLabel(item) : item[labelField || 'label']}
</span>
<span
className={cx('Select-valueIcon', {

40
packages/amis-ui/src/components/icons.tsx
View File

@ -3,7 +3,7 @@
* @description
* @author fex
*/
import React from 'react';
import React, {useState, useEffect, useRef} from 'react';
import cx from 'classnames';
import CloseIcon from '../icons/close.svg';
import CloseSmallIcon from '../icons/close-small.svg';
@ -243,21 +243,59 @@ registerIcon('scale-origin', ScaleOrigin);
export function Icon({
icon,
className,
wrapClassName,
classPrefix = '',
iconContent,
...rest
}: {
icon: string;
iconContent?: string;
} & React.ComponentProps<any>) {
// jest 运行环境下，把指定的 icon 也输出到 snapshot 中。
if (typeof jest !== 'undefined') {
rest.icon = icon;
}
const [showCssIcon, setShowCssIcon] = useState(false);
function refFn(dom: any) {
if (dom) {
const style = getComputedStyle(dom);
const svgStr = style.getPropertyValue('content');
const svg = /(<svg.*<\/svg>)/.exec(svgStr);
if (svg) {
const svgHTML = svg[0].replaceAll('\\"', '"');
if (dom.svgHTMLClone !== svgHTML) {
dom.innerHTML = svgHTML;
// 存储svg，不直接用innerHTML是防止<circle />渲染后变成<circle></circle>的情况
dom.svgHTMLClone = svgHTML;
dom.style.display = '';
setShowCssIcon(true);
}
} else {
// 当传入svg为空时，隐藏div，展示原icon
dom.style.display = 'none';
setShowCssIcon(false);
}
}
}
const Component = getIcon(icon);
const isURLIcon = typeof icon === 'string' && icon?.indexOf('.') !== -1;
return Component ? (
<>
{iconContent ? (
<div
className={`${wrapClassName || ''}` + ' ' + iconContent}
ref={refFn}
></div>
) : null}
{!showCssIcon ? (
<Component {...rest} className={`${className || ''} icon-${icon}`} />
) : null}
</>
) : isURLIcon ? (
<img className={cx(`${classPrefix}Icon`, className)} src={icon} />
) : (

4
packages/amis-ui/src/icons/cloud-upload.svg
View File

@ -9,10 +9,10 @@
<g id="13-上传-Upload" transform="translate(-279.000000, -4033.000000)">
<g id="3.数据输入/4.上传/2.拖拽上传/1.未上传" transform="translate(120.000000, 3986.000000)">
<g id="编组-2" transform="translate(101.000000, 40.000000)">
<g id="图标-2" transform="translate(55.000000, 0.000000)" filter="url(#filter-1)">
<g id="图标-2" transform="translate(55.000000, 0.000000)">
<g id="图标">
<rect id="矩形" stroke="#979797" stroke-width="3" fill="#D8D8D8" opacity="0" x="1.5" y="1.5" width="45" height="45"></rect>
<path d="M23.8719,22.49754 L28.3839,28.50054 L25.3719,28.50054 L25.3719,37.50054 L22.3719,37.50054 L22.3719,28.50054 L19.3809,28.50054 L23.8719,22.49754 Z M23.8716,7.49904 C30.3426,7.49904 35.8176,11.64204 37.9176,17.39604 C41.8746,18.34104 44.8356,21.88704 44.8356,26.12904 C44.8356,31.09104 40.7976,35.12904 35.8356,35.12904 C34.7916,35.12904 33.8016,34.91604 32.8716,34.58304 L32.8716,34.58304 L32.8716,31.26804 C33.6096,31.69404 34.4226,32.00004 35.3166,32.07804 C35.4906,32.09004 35.6586,32.12904 35.8356,32.12904 C39.1446,32.12904 41.8356,29.43804 41.8356,26.12904 C41.8356,23.86704 40.5636,21.91704 38.7096,20.89404 C37.8516,20.42304 36.8826,20.12904 35.8356,20.12904 C35.7666,20.12904 35.7036,20.14704 35.6346,20.15004 C35.4276,19.12404 35.0586,18.16704 34.6116,17.25204 C32.6586,13.27104 28.5996,10.49904 23.8716,10.49904 C19.1466,10.49904 15.0936,13.26804 13.1346,17.24304 C12.6846,18.15804 12.3156,19.11504 12.1086,20.14104 L12.1086,20.14104 L12.0006,20.12904 C10.9146,20.12904 9.9066,20.44404 9.0276,20.95104 C7.2276,21.98604 6.0006,23.90904 6.0006,26.12904 C6.0006,29.43804 8.6916,32.12904 12.0006,32.12904 C12.1476,32.12904 12.2856,32.09604 12.4326,32.08404 C13.3206,32.02104 14.1306,31.72704 14.8716,31.32504 L14.8716,31.32504 L14.8716,34.61004 C13.9656,34.92504 13.0116,35.12904 12.0006,35.12904 C7.0386,35.12904 3.0006,31.09104 3.0006,26.12904 C3.0006,21.92604 5.9106,18.41304 9.8136,17.42904 C11.9046,11.66004 17.3886,7.49904 23.8716,7.49904 Z" id="形状结合" fill="#151B26"></path>
<path d="M23.8719,22.49754 L28.3839,28.50054 L25.3719,28.50054 L25.3719,37.50054 L22.3719,37.50054 L22.3719,28.50054 L19.3809,28.50054 L23.8719,22.49754 Z M23.8716,7.49904 C30.3426,7.49904 35.8176,11.64204 37.9176,17.39604 C41.8746,18.34104 44.8356,21.88704 44.8356,26.12904 C44.8356,31.09104 40.7976,35.12904 35.8356,35.12904 C34.7916,35.12904 33.8016,34.91604 32.8716,34.58304 L32.8716,34.58304 L32.8716,31.26804 C33.6096,31.69404 34.4226,32.00004 35.3166,32.07804 C35.4906,32.09004 35.6586,32.12904 35.8356,32.12904 C39.1446,32.12904 41.8356,29.43804 41.8356,26.12904 C41.8356,23.86704 40.5636,21.91704 38.7096,20.89404 C37.8516,20.42304 36.8826,20.12904 35.8356,20.12904 C35.7666,20.12904 35.7036,20.14704 35.6346,20.15004 C35.4276,19.12404 35.0586,18.16704 34.6116,17.25204 C32.6586,13.27104 28.5996,10.49904 23.8716,10.49904 C19.1466,10.49904 15.0936,13.26804 13.1346,17.24304 C12.6846,18.15804 12.3156,19.11504 12.1086,20.14104 L12.1086,20.14104 L12.0006,20.12904 C10.9146,20.12904 9.9066,20.44404 9.0276,20.95104 C7.2276,21.98604 6.0006,23.90904 6.0006,26.12904 C6.0006,29.43804 8.6916,32.12904 12.0006,32.12904 C12.1476,32.12904 12.2856,32.09604 12.4326,32.08404 C13.3206,32.02104 14.1306,31.72704 14.8716,31.32504 L14.8716,31.32504 L14.8716,34.61004 C13.9656,34.92504 13.0116,35.12904 12.0006,35.12904 C7.0386,35.12904 3.0006,31.09104 3.0006,26.12904 C3.0006,21.92604 5.9106,18.41304 9.8136,17.42904 C11.9046,11.66004 17.3886,7.49904 23.8716,7.49904 Z" id="形状结合" fill="currentColor"></path>
</g>
</g>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

22
packages/amis/__tests__/renderers/Form/__snapshots__/fieldSet.test.tsx.snap
View File

@ -39,8 +39,17 @@ exports[`Renderer:fieldSet 1`] = `
class="cxd-Collapse-header bg-dark"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>
@ -825,8 +834,17 @@ exports[`Renderer:fieldSet with titlePosition & collapseTitle & title 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>

8
packages/amis/__tests__/renderers/Form/__snapshots__/number.test.tsx.snap
View File

@ -996,6 +996,10 @@ exports[`Renderer:number with step & precision & displayMode & keyboard 1`] = `
<div
class="cxd-Number--enhance-left-icon"
>
<div
class="cxd-InputNumber-enhance-minus icon InputNumber-enhance-minus"
style="display: none;"
/>
<icon-mock
classname="icon icon-minus"
icon="minus"
@ -1048,6 +1052,10 @@ exports[`Renderer:number with step & precision & displayMode & keyboard 1`] = `
<div
class="cxd-Number--enhance-right-icon"
>
<div
class="cxd-InputNumber-enhance-plus icon InputNumber-enhance-plus"
style="display: none;"
/>
<icon-mock
classname="icon icon-plus"
icon="plus"

136
packages/amis/__tests__/renderers/Form/__snapshots__/rating.test.tsx.snap
View File

@ -58,17 +58,11 @@ exports[`Renderer:rating with allowClear 1`] = `
<ul>
<li
class="cxd-Rating-star"
style=""
>
<icon-mock
classname="icon icon-star"
icon="star"
<div
class=" Rating-star-icon"
style="display: none;"
/>
</li>
<li
class="cxd-Rating-star"
style=""
>
<icon-mock
classname="icon icon-star"
icon="star"
@ -77,6 +71,10 @@ exports[`Renderer:rating with allowClear 1`] = `
<li
class="cxd-Rating-star"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -85,6 +83,10 @@ exports[`Renderer:rating with allowClear 1`] = `
<li
class="cxd-Rating-star"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -93,6 +95,22 @@ exports[`Renderer:rating with allowClear 1`] = `
<li
class="cxd-Rating-star"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
/>
</li>
<li
class="cxd-Rating-star"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -274,13 +292,11 @@ exports[`Renderer:rating with char & charClassName 1`] = `
<ul>
<li
class="cxd-Rating-star test-rating-char is-active"
style="color: rgb(171, 173, 177);"
>
X
</li>
<li
class="cxd-Rating-star test-rating-char is-active"
style="color: rgb(171, 173, 177);"
>
X
</li>
@ -424,6 +440,10 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
class="cxd-Rating-star is-active"
style="color: rgb(119, 168, 141);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -433,6 +453,10 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
class="cxd-Rating-star is-active"
style="color: rgb(119, 168, 141);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -442,6 +466,10 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
class="cxd-Rating-star is-active"
style="color: rgb(119, 168, 141);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -451,6 +479,10 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
class="cxd-Rating-star"
style="color: yellow;"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -460,6 +492,10 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
class="cxd-Rating-star"
style="color: yellow;"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -654,8 +690,11 @@ exports[`Renderer:rating with count & half 1`] = `
<ul>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -663,8 +702,11 @@ exports[`Renderer:rating with count & half 1`] = `
</li>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -672,8 +714,11 @@ exports[`Renderer:rating with count & half 1`] = `
</li>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -684,13 +729,20 @@ exports[`Renderer:rating with count & half 1`] = `
>
<div
class="cxd-Rating-star-half"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
/>
</div>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -699,6 +751,10 @@ exports[`Renderer:rating with count & half 1`] = `
<li
class="cxd-Rating-star"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -827,8 +883,11 @@ exports[`Renderer:rating with readOnly 1`] = `
<ul>
<li
class="cxd-Rating-star is-active is-disabled"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -836,8 +895,11 @@ exports[`Renderer:rating with readOnly 1`] = `
</li>
<li
class="cxd-Rating-star is-active is-disabled"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -845,8 +907,11 @@ exports[`Renderer:rating with readOnly 1`] = `
</li>
<li
class="cxd-Rating-star is-active is-disabled"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -854,8 +919,11 @@ exports[`Renderer:rating with readOnly 1`] = `
</li>
<li
class="cxd-Rating-star is-active is-disabled"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -863,8 +931,11 @@ exports[`Renderer:rating with readOnly 1`] = `
</li>
<li
class="cxd-Rating-star is-active is-disabled"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -1051,8 +1122,11 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
<ul>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -1060,8 +1134,11 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
</li>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -1069,8 +1146,11 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
</li>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -1078,8 +1158,11 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
</li>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"
@ -1087,8 +1170,11 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
</li>
<li
class="cxd-Rating-star is-active"
style="color: rgb(255, 169, 0);"
>
<div
class=" Rating-star-icon"
style="display: none;"
/>
<icon-mock
classname="icon icon-star"
icon="star"

16
packages/amis/__tests__/renderers/Form/__snapshots__/text.test.tsx.snap
View File

@ -586,8 +586,12 @@ exports[`Renderer:text type is password: password invisible 1`] = `
<a
class="cxd-TextControl-revealPassword"
>
<div
class="cxd-TextControl-icon-invisible InputText-invisible"
style="display: none;"
/>
<icon-mock
classname="icon icon-invisible"
classname="cxd-TextControl-icon-invisible icon-invisible"
icon="invisible"
/>
</a>
@ -722,8 +726,12 @@ exports[`Renderer:text type is password: password visible 1`] = `
<a
class="cxd-TextControl-revealPassword"
>
<div
class="cxd-TextControl-icon-view InputText-view"
style="display: none;"
/>
<icon-mock
classname="icon icon-view"
classname="cxd-TextControl-icon-view icon-view"
icon="view"
/>
</a>
@ -1261,6 +1269,10 @@ exports[`Renderer:text with clearable 1`] = `
<a
class="cxd-TextControl-clear"
>
<div
class=" InputText-clear"
style="display: none;"
/>
<icon-mock
classname="icon icon-input-clear"
icon="input-clear"

66
packages/amis/__tests__/renderers/__snapshots__/Collapse.test.tsx.snap
View File

@ -12,8 +12,17 @@ exports[`Renderer:Collapse 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>
@ -49,8 +58,17 @@ exports[`Renderer:Collapse 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>
@ -86,8 +104,17 @@ exports[`Renderer:Collapse 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>
@ -133,8 +160,17 @@ exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>
@ -162,8 +198,17 @@ exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>
@ -204,8 +249,17 @@ exports[`Renderer:Collapse with disabled & panel nesting 1`] = `
class="cxd-Collapse-header"
>
<span
class="cxd-Collapse-arrow"
class="cxd-Collapse-arrow-wrap"
>
<div
class="cxd-Collapse-arrow Collapse-arrow"
style="display: none;"
/>
<icon-mock
classname="cxd-Collapse-arrow icon icon-right-arrow-bold"
icon="right-arrow-bold"
/>
</span>
<span
class="cxd-TplField"
>

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

@ -3,6 +3,7 @@ import hotkeys from 'hotkeys-js';
import {
ActionObject,
extendObject,
insertCustomStyle,
IScopedContext,
isObject,
Renderer,
@ -780,8 +781,26 @@ export class Action extends React.Component<ActionProps, ActionState> {
onMouseLeave,
classnames: cx,
classPrefix: ns,
loadingConfig
loadingConfig,
css,
id
} = this.props;
insertCustomStyle(
css,
[
{
key: 'className',
value: className,
weights: {
hover: {
suf: ':not(:disabled):not(.is-disabled)'
},
active: {suf: ':not(:disabled):not(.is-disabled)'}
}
}
],
id
);
if (actionType !== 'email' && body) {
return (

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

@ -12,6 +12,7 @@ import {
} from 'amis-ui';
import debounce from 'lodash/debounce';
import find from 'lodash/find';
import {FormBaseControlSchema} from '../../Schema';
import * as IconSelectStore from './IconSelectStore';
@ -36,6 +37,7 @@ export interface IconSelectProps extends FormControlProps, SpinnerExtraProps {
export interface IconChecked {
id: string;
name?: string;
svg?: string;
}
export interface IconSelectState {
@ -77,6 +79,22 @@ export default class IconSelectControl extends React.PureComponent<
);
}
getValueBySvg(svg: string | undefined): IconSelectStore.SvgIcon | null {
if (!svg || typeof svg !== 'string') {
return null;
}
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);
if (findItem) {
break;
}
}
}
return findItem || null;
}
@autobind
handleClick() {
if (this.props.disabled) {
@ -98,10 +116,11 @@ export default class IconSelectControl extends React.PureComponent<
const {
classPrefix: ns,
disabled,
value,
value: valueTemp,
placeholder,
clearable
} = this.props;
const value = typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp;
const pureValue =
(value?.id && String(value.id).replace(/^svg-/, '')) || '';
@ -175,12 +194,17 @@ export default class IconSelectControl extends React.PureComponent<
@autobind
handleConfirm() {
const checkedIcon = this.state.tmpCheckIconId;
if (this.props.returnSvg) {
this.props.onChange &&
this.props.onChange(checkedIcon && checkedIcon.svg || '');
} else {
this.props.onChange &&
this.props.onChange(
checkedIcon && checkedIcon.id
? {...checkedIcon, id: 'svg-' + checkedIcon.id}
: ''
);
}
this.toggleModel(false);
}
@ -324,7 +348,8 @@ export default class IconSelectControl extends React.PureComponent<
@autobind
toggleModel(isShow?: boolean) {
const {value} = this.props;
const {value: valueTemp} = this.props;
const value = typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp;
if (isShow === undefined) {
this.setState({

1
packages/amis/src/renderers/Form/IconSelectStore.tsx
View File

@ -4,6 +4,7 @@ import {TranslateFn, makeTranslator, getDefaultLocale} from 'amis-core';
export interface SvgIcon {
name: string;
id: string;
svg?: string;
}
export interface SvgIconGroup {

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

@ -4,7 +4,8 @@ import {
OptionsControlProps,
highlight,
FormOptionsControl,
resolveEventData
resolveEventData,
insertCustomStyle
} from 'amis-core';
import {ActionObject} from 'amis-core';
import Downshift, {StateChangeOptions} from 'downshift';
@ -792,11 +793,13 @@ export default class TextControl extends React.PureComponent<
</>
{clearable && !disabled && !readOnly && value ? (
<a
onClick={this.clearValue}
className={cx('TextControl-clear')}
>
<Icon icon="input-clear" className="icon" />
<a onClick={this.clearValue}>
<Icon
icon="input-clear"
className="icon"
wrapClassName={cx('TextControl-clear')}
iconContent="InputBox-clear"
/>
</a>
) : null}
@ -937,19 +940,33 @@ export default class TextControl extends React.PureComponent<
})}
/>
{clearable && !disabled && !readOnly && value ? (
<a onClick={this.clearValue} className={`${ns}TextControl-clear`}>
<Icon icon="input-clear" className="icon" />
<a onClick={this.clearValue} className={cx('TextControl-clear')}>
<Icon
icon="input-clear"
className="icon"
iconContent="InputText-clear"
/>
</a>
) : null}
{type === 'password' && revealPassword && !disabled ? (
<a
onClick={this.toggleRevealPassword}
className={`${ns}TextControl-revealPassword`}
className={cx('TextControl-revealPassword')}
>
{this.state.revealPassword ? (
<Icon icon="view" className="icon" />
<Icon
icon="view"
className={cx('TextControl-icon-view')}
wrapClassName={cx('TextControl-icon-view')}
iconContent="InputText-view"
/>
) : (
<Icon icon="invisible" className="icon" />
<Icon
icon="invisible"
className={cx('TextControl-icon-invisible')}
wrapClassName={cx('TextControl-icon-invisible')}
iconContent="InputText-invisible"
/>
)}
</a>
) : null}
@ -980,7 +997,8 @@ export default class TextControl extends React.PureComponent<
data,
disabled,
inputOnly,
static: isStatic
static: isStatic,
addOnClassName
} = this.props;
const addOn: any =
@ -997,13 +1015,13 @@ export default class TextControl extends React.PureComponent<
addOn && !isStatic ? (
addOn.actionType ||
~['button', 'submit', 'reset', 'action'].indexOf(addOn.type) ? (
<div className={cx(`${ns}TextControl-button`, addOn.className)}>
<div className={cx(`${ns}TextControl-button`, addOnClassName)}>
{render('addOn', addOn, {
disabled
})}
</div>
) : (
<div className={cx(`${ns}TextControl-addOn`, addOn.className)}>
<div className={cx(`${ns}TextControl-addOn`, addOnClassName)}>
{iconElement}
{addOn.label ? filter(addOn.label, data) : null}
</div>
@ -1035,13 +1053,47 @@ export default class TextControl extends React.PureComponent<
@supportStatic()
render(): JSX.Element {
const {options, source, autoComplete} = this.props;
const {
options,
source,
autoComplete,
css,
inputControlClassName,
id,
addOnClassName
} = this.props;
let input =
autoComplete !== false && (source || options?.length || autoComplete)
? this.renderSugestMode()
: this.renderNormal();
insertCustomStyle(
css,
[
{
key: 'inputControlClassName',
value: inputControlClassName,
weights: {
active: {
pre: 'is-focused .'
}
}
}
],
id
);
insertCustomStyle(
css,
[
{
key: 'addOnClassName',
value: addOnClassName
}
],
id + '-addOn'
);
return this.renderBody(input);
}
}