mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
feat: transfer&inputTag&fieldset主题适配 (#6429)
* feat: 穿梭框主题修改 * feat: 标签选择器inputTag主题适配 * feat: 字段集fieldset主题适配 --------- Co-authored-by: hongyang03 <hongyang03@baidu.com>
This commit is contained in:
HongYang
hongyang03
parent
4b2635abbc
commit
266e72e9cc
@ -242,4 +242,4 @@ fieldSet 的另一种标题展现样式，不同的是展开的时候收起文
|
||||
| collapsable | `boolean` | `false` | 是否可折叠 |
|
||||
| collapsed | `booelan` | `false` | 默认是否折叠 |
|
||||
| collapseTitle | [SchemaNode](../../../docs/types/schemanode) | `收起` | 收起的标题 |
|
||||
| size | string | `` | 大小，支持 xs、sm、base、lg、xl |
|
||||
| size | string | `` | 大小，支持 xs、sm、base、md、lg |
|
||||
|
||||
@ -756,147 +756,123 @@
|
||||
--button-size-lg-marginBottom: var(--sizes-size-0);
|
||||
--button-size-lg-paddingRight: var(--sizes-size-9);
|
||||
--button-size-lg-paddingBottom: var(--sizes-size-6);
|
||||
--transfer-base-top-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-top-border-style: var(--borders-style-2);
|
||||
--transfer-base-top-border-width: var(--borders-width-2);
|
||||
--transfer-base-left-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-left-border-style: var(--borders-style-2);
|
||||
--transfer-base-left-border-width: var(--borders-width-2);
|
||||
--transfer-base-right-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-right-border-style: var(--borders-style-2);
|
||||
--transfer-base-right-border-width: var(--borders-width-2);
|
||||
--transfer-base-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-bottom-border-style: var(--borders-style-2);
|
||||
--transfer-base-bottom-border-width: var(--borders-width-2);
|
||||
--transfer-base-top-left-border-radius: var(--borders-radius-3);
|
||||
--transfer-base-top-right-border-radius: var(--borders-radius-3);
|
||||
--transfer-base-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--transfer-base-bottom-right-border-radius: var(--borders-radius-2);
|
||||
--transfer-base-shadow: var(--shadows-shadow-none);
|
||||
--transfer-base-title-bg: var(--colors-neutral-fill-10);
|
||||
--transfer-base-title-color: var(--colors-neutral-text-2);
|
||||
--transfer-base-title-fontSize: var(--fonts-size-7);
|
||||
--transfer-base-content-fontSize: var(--fonts-size-7);
|
||||
--transfer-base-title-font-color: var(--colors-neutral-text-2);
|
||||
--transfer-base-title-fontWeight: var(--fonts-weight-6);
|
||||
--transfer-base-title-lineHeight: var(--fonts-lineHeight-2);
|
||||
--transfer-base-content-font-color: var(--colors-neutral-text-2);
|
||||
--transfer-base-content-color: var(--colors-neutral-text-2);
|
||||
--transfer-base-content-fontSize: var(--fonts-size-7);
|
||||
--transfer-base-content-fontWeight: var(--fonts-weight-6);
|
||||
--transfer-base-content-lineHeight: var(--fonts-lineHeight-2);
|
||||
--transfer-base-body-marginTop: var(--sizes-size-1);
|
||||
--transfer-base-body-marginLeft: var(--sizes-size-1);
|
||||
--transfer-base-body-paddingTop: var(--sizes-size-1);
|
||||
--transfer-base-body-marginRight: var(--sizes-size-1);
|
||||
--transfer-base-body-paddingLeft: var(--sizes-size-1);
|
||||
--transfer-base-body-marginBottom: var(--sizes-size-1);
|
||||
--transfer-base-body-paddingRight: var(--sizes-size-1);
|
||||
--transfer-base-body-paddingBottom: var(--sizes-size-1);
|
||||
--transfer-base-header-marginTop: var(--sizes-size-1);
|
||||
--transfer-base-header-marginLeft: var(--sizes-size-1);
|
||||
--transfer-base-top-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-top-border-width: var(--borders-width-2);
|
||||
--transfer-base-top-border-style: var(--borders-style-2);
|
||||
--transfer-base-right-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-right-border-width: var(--borders-width-2);
|
||||
--transfer-base-right-border-style: var(--borders-style-2);
|
||||
--transfer-base-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-bottom-border-width: var(--borders-width-2);
|
||||
--transfer-base-bottom-border-style: var(--borders-style-2);
|
||||
--transfer-base-left-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-base-left-border-width: var(--borders-width-2);
|
||||
--transfer-base-left-border-style: var(--borders-style-2);
|
||||
--transfer-base-top-right-border-radius: var(--borders-radius-3);
|
||||
--transfer-base-top-left-border-radius: var(--borders-radius-3);
|
||||
--transfer-base-bottom-right-border-radius: var(--borders-radius-2);
|
||||
--transfer-base-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--transfer-base-header-paddingTop: var(--sizes-size-5);
|
||||
--transfer-base-header-marginRight: var(--sizes-size-1);
|
||||
--transfer-base-header-paddingLeft: var(--sizes-size-8);
|
||||
--transfer-base-header-marginBottom: var(--sizes-size-1);
|
||||
--transfer-base-header-paddingRight: var(--sizes-size-8);
|
||||
--transfer-base-header-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-base-option-marginTop: var(--sizes-size-1);
|
||||
--transfer-base-option-marginLeft: var(--sizes-size-1);
|
||||
--transfer-base-header-paddingLeft: var(--sizes-size-8);
|
||||
--transfer-base-header-paddingRight: var(--sizes-size-8);
|
||||
--transfer-base-body-paddingTop: var(--sizes-size-0);
|
||||
--transfer-base-body-paddingBottom: var(--sizes-size-0);
|
||||
--transfer-base-body-paddingLeft: var(--sizes-size-0);
|
||||
--transfer-base-body-paddingRight: var(--sizes-size-0);
|
||||
--transfer-base-option-paddingTop: var(--sizes-size-5);
|
||||
--transfer-base-option-marginRight: var(--sizes-size-1);
|
||||
--transfer-base-option-paddingLeft: var(--sizes-size-8);
|
||||
--transfer-base-option-marginBottom: var(--sizes-size-1);
|
||||
--transfer-base-option-paddingRight: var(--sizes-size-8);
|
||||
--transfer-base-option-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-tree-top-left-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-top-right-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-bottom-right-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-bg-hover-color: var(--colors-neutral-fill-10);
|
||||
--transfer-tree-bg-active-color: var(--colors-brand-10);
|
||||
--transfer-tree-marginTop: var(--sizes-size-1);
|
||||
--transfer-tree-marginLeft: var(--sizes-size-1);
|
||||
--transfer-tree-paddingTop: var(--sizes-size-3);
|
||||
--transfer-tree-marginRight: var(--sizes-size-1);
|
||||
--transfer-tree-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-tree-marginBottom: var(--sizes-size-2);
|
||||
--transfer-tree-paddingRight: var(--sizes-size-7);
|
||||
--transfer-tree-paddingBottom: var(--sizes-size-3);
|
||||
--transfer-tree-option-marginTop: var(--sizes-size-1);
|
||||
--transfer-tree-option-marginLeft: var(--sizes-size-1);
|
||||
--transfer-tree-option-paddingTop: var(--sizes-size-1);
|
||||
--transfer-tree-option-marginRight: var(--sizes-size-1);
|
||||
--transfer-tree-option-paddingLeft: var(--sizes-size-6);
|
||||
--transfer-tree-option-marginBottom: var(--sizes-size-4);
|
||||
--transfer-tree-option-paddingRight: var(--sizes-size-1);
|
||||
--transfer-tree-option-paddingBottom: var(--sizes-size-1);
|
||||
--transfer-group-fontSize: var(--fonts-size-7);
|
||||
--transfer-group-font-color: var(--colors-neutral-text-5);
|
||||
--transfer-group-fontWeight: var(--fonts-weight-6);
|
||||
--transfer-group-lineHeight: var(--fonts-lineHeight-2);
|
||||
--transfer-table-last-paddingRight: var(--sizes-base-9);
|
||||
--transfer-table-header-marginTop: var(--sizes-size-1);
|
||||
--transfer-table-header-marginLeft: var(--sizes-size-1);
|
||||
--transfer-table-header-paddingTop: var(--sizes-size-5);
|
||||
--transfer-table-header-marginRight: var(--sizes-size-1);
|
||||
--transfer-table-header-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-table-header-marginBottom: var(--sizes-size-1);
|
||||
--transfer-table-header-paddingRight: var(--sizes-size-7);
|
||||
--transfer-table-header-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-table-option-marginTop: var(--sizes-size-1);
|
||||
--transfer-table-option-marginLeft: var(--sizes-size-1);
|
||||
--transfer-table-option-paddingTop: var(--sizes-size-4);
|
||||
--transfer-table-option-marginRight: var(--sizes-size-1);
|
||||
--transfer-table-option-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-table-option-marginBottom: var(--sizes-size-2);
|
||||
--transfer-table-option-paddingRight: var(--sizes-size-7);
|
||||
--transfer-table-option-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-search-top-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-top-border-style: var(--borders-style-2);
|
||||
--transfer-search-top-border-width: var(--borders-width-2);
|
||||
--transfer-search-left-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-left-border-style: var(--borders-style-2);
|
||||
--transfer-search-left-border-width: var(--borders-width-2);
|
||||
--transfer-search-right-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-right-border-style: var(--borders-style-2);
|
||||
--transfer-search-right-border-width: var(--borders-width-2);
|
||||
--transfer-search-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-bottom-border-style: var(--borders-style-2);
|
||||
--transfer-search-bottom-border-width: var(--borders-width-2);
|
||||
--transfer-search-top-left-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-top-right-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-shadow: var(--shadows-shadow-none);
|
||||
--transfer-base-option-paddingLeft: var(--sizes-size-8);
|
||||
--transfer-base-option-paddingRight: var(--sizes-size-8);
|
||||
--transfer-base-option-marginTop: var(--sizes-size-0);
|
||||
--transfer-base-option-marginBottom: var(--sizes-size-0);
|
||||
--transfer-base-option-marginLeft: var(--sizes-size-0);
|
||||
--transfer-base-option-marginRight: var(--sizes-size-0);
|
||||
--transfer-base-shadow: var(--shadows-shadow-none);
|
||||
--transfer-search-color: var(--colors-neutral-text-2);
|
||||
--transfer-search-fontSize: var(--fonts-size-7);
|
||||
--transfer-search-font-color: var(--colors-neutral-text-2);
|
||||
--transfer-search-fontWeight: var(--fonts-weight-6);
|
||||
--transfer-search-lineHeight: var(--fonts-lineHeight-2);
|
||||
--transfer-search-border-hover-color: var(--colors-brand-4);
|
||||
--transfer-search-marginTop: var(--sizes-size-1);
|
||||
--transfer-search-marginLeft: var(--sizes-size-1);
|
||||
--transfer-search-paddingTop: var(--sizes-size-6);
|
||||
--transfer-search-marginRight: var(--sizes-size-1);
|
||||
--transfer-search-paddingLeft: var(--sizes-size-6);
|
||||
--transfer-search-marginBottom: var(--sizes-size-1);
|
||||
--transfer-search-paddingRight: var(--sizes-size-6);
|
||||
--transfer-search-paddingBottom: var(--sizes-size-6);
|
||||
--transfer-search-border-active-color: var(--colors-brand-4);
|
||||
--transfer-search-placeholder-font-color: var(--colors-neutral-text-6);
|
||||
--transfer-search-input-marginTop: var(--sizes-size-1);
|
||||
--transfer-search-input-marginLeft: var(--sizes-size-1);
|
||||
--transfer-search-top-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-top-border-width: var(--borders-width-2);
|
||||
--transfer-search-top-border-style: var(--borders-style-2);
|
||||
--transfer-search-right-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-right-border-width: var(--borders-width-2);
|
||||
--transfer-search-right-border-style: var(--borders-style-2);
|
||||
--transfer-search-bottom-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-bottom-border-width: var(--borders-width-2);
|
||||
--transfer-search-bottom-border-style: var(--borders-style-2);
|
||||
--transfer-search-left-border-color: var(--colors-neutral-line-8);
|
||||
--transfer-search-left-border-width: var(--borders-width-2);
|
||||
--transfer-search-left-border-style: var(--borders-style-2);
|
||||
--transfer-search-top-right-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-top-left-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-bottom-right-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-bottom-left-border-radius: var(--borders-radius-3);
|
||||
--transfer-search-border-hover-color: var(--colors-brand-4);
|
||||
--transfer-search-border-active-color: var(--colors-brand-4);
|
||||
--transfer-search-paddingTop: var(--sizes-size-6);
|
||||
--transfer-search-paddingBottom: var(--sizes-size-6);
|
||||
--transfer-search-paddingLeft: var(--sizes-size-6);
|
||||
--transfer-search-paddingRight: var(--sizes-size-6);
|
||||
--transfer-search-input-paddingTop: var(--sizes-size-4);
|
||||
--transfer-search-input-marginRight: var(--sizes-size-1);
|
||||
--transfer-search-input-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-search-input-marginBottom: var(--sizes-size-1);
|
||||
--transfer-search-input-paddingRight: var(--sizes-size-7);
|
||||
--transfer-search-input-paddingBottom: var(--sizes-size-4);
|
||||
--transfer-chained-marginTop: var(--sizes-size-1);
|
||||
--transfer-chained-marginLeft: var(--sizes-size-1);
|
||||
--transfer-search-input-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-search-input-paddingRight: var(--sizes-size-7);
|
||||
--transfer-search-shadow: var(--shadows-shadow-none);
|
||||
--transfer-group-color: var(--colors-neutral-text-5);
|
||||
--transfer-group-fontSize: var(--fonts-size-7);
|
||||
--transfer-group-fontWeight: var(--fonts-weight-6);
|
||||
--transfer-group-lineHeight: var(--fonts-lineHeight-2);
|
||||
--transfer-table-header-paddingTop: var(--sizes-size-5);
|
||||
--transfer-table-header-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-table-header-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-table-header-paddingRight: var(--sizes-size-7);
|
||||
--transfer-table-option-paddingTop: var(--sizes-size-4);
|
||||
--transfer-table-option-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-table-option-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-table-option-paddingRight: var(--sizes-size-7);
|
||||
--transfer-table-last-paddingRight: var(--sizes-base-9);
|
||||
--transfer-tree-bg-hover-color: var(--colors-neutral-fill-10);
|
||||
--transfer-tree-bg-active-color: var(--colors-brand-10);
|
||||
--transfer-tree-top-right-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-top-left-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-bottom-right-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-bottom-left-border-radius: var(--borders-radius-2);
|
||||
--transfer-tree-paddingTop: var(--sizes-size-3);
|
||||
--transfer-tree-paddingBottom: var(--sizes-size-3);
|
||||
--transfer-tree-paddingLeft: var(--sizes-size-7);
|
||||
--transfer-tree-paddingRight: var(--sizes-size-7);
|
||||
--transfer-tree-marginTop: var(--sizes-size-0);
|
||||
--transfer-tree-marginBottom: var(--sizes-size-2);
|
||||
--transfer-tree-marginLeft: var(--sizes-size-0);
|
||||
--transfer-tree-marginRight: var(--sizes-size-0);
|
||||
--transfer-tree-option-paddingTop: var(--sizes-size-0);
|
||||
--transfer-tree-option-paddingBottom: var(--sizes-size-0);
|
||||
--transfer-tree-option-paddingLeft: var(--sizes-size-6);
|
||||
--transfer-tree-option-paddingRight: var(--sizes-size-0);
|
||||
--transfer-tree-option-marginTop: var(--sizes-size-0);
|
||||
--transfer-tree-option-marginBottom: var(--sizes-size-4);
|
||||
--transfer-tree-option-marginLeft: var(--sizes-size-0);
|
||||
--transfer-tree-option-marginRight: var(--sizes-size-0);
|
||||
--transfer-chained-paddingTop: var(--sizes-size-5);
|
||||
--transfer-chained-marginRight: var(--sizes-size-1);
|
||||
--transfer-chained-paddingLeft: var(--sizes-size-6);
|
||||
--transfer-chained-marginBottom: var(--sizes-size-1);
|
||||
--transfer-chained-paddingRight: var(--sizes-size-6);
|
||||
--transfer-chained-paddingBottom: var(--sizes-size-5);
|
||||
--transfer-chained-paddingLeft: var(--sizes-size-6);
|
||||
--transfer-chained-paddingRight: var(--sizes-size-6);
|
||||
--transfer-chained-marginTop: var(--sizes-size-0);
|
||||
--transfer-chained-marginBottom: var(--sizes-size-0);
|
||||
--transfer-chained-marginLeft: var(--sizes-size-0);
|
||||
--transfer-chained-marginRight: var(--sizes-size-0);
|
||||
--input-default-default-top-border-color: var(--colors-neutral-line-8);
|
||||
--input-default-default-top-border-width: var(--borders-width-2);
|
||||
--input-default-default-top-border-style: var(--borders-style-2);
|
||||
@ -3365,14 +3341,14 @@
|
||||
--Tag-height: var(--Tag-base-height);
|
||||
--Tag-borderRadius: var(--Tag-model-normal-top-left-border-radius)
|
||||
var(--Tag-model-normal-top-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-left-border-radius);
|
||||
--Tag-fontColor: var(--Tag-base-color);
|
||||
|
||||
--Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
|
||||
var(--Tag-model-rounded-top-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-left-border-radius);
|
||||
var(--Tag-model-rounded-top-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-left-border-radius);
|
||||
|
||||
--Tag-status-margin: var(--Tag-model-status-status-margin);
|
||||
--Tag-status-size: var(--Tag-model-status-status-size);
|
||||
@ -3385,41 +3361,41 @@
|
||||
--Tag-processing-color: var(--Tag-color-processing-color);
|
||||
--Tag-success-color: var(--Tag-color-success-color);
|
||||
--Tag-error-color: var(--Tag-color-error-color);
|
||||
--Tag-warning-color: var( --Tag-color-warning-color);
|
||||
--Tag-warning-color: var(--Tag-color-warning-color);
|
||||
--Tag-inactive-bg-color: var(--Tag-color-inactive-bg-color);
|
||||
--Tag-active-bg-color: var(--Tag-color-active-bg-color);
|
||||
--Tag-processing-bg-color: var(--Tag-color-processing-bg-color);
|
||||
--Tag-success-bg-color: var(--Tag-color-success-bg-color);
|
||||
--Tag-error-bg-color: var(--Tag-color-error-bg-color);
|
||||
--Tag-warning-bg-color: var( --Tag-color-warning-bg-color);
|
||||
--Tag-warning-bg-color: var(--Tag-color-warning-bg-color);
|
||||
|
||||
--Tag-normal-borderWidth: var(--Tag-model-normal-top-border-width)
|
||||
var(--Tag-model-normal-right-border-width)
|
||||
var(--Tag-model-normal-bottom-border-width)
|
||||
var(--Tag-model-normal-left-border-width);
|
||||
var(--Tag-model-normal-right-border-width)
|
||||
var(--Tag-model-normal-bottom-border-width)
|
||||
var(--Tag-model-normal-left-border-width);
|
||||
--Tag-normal-borderRadius: var(--Tag-model-normal-top-left-border-radius)
|
||||
var(--Tag-model-normal-top-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-left-border-radius);
|
||||
var(--Tag-model-normal-top-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-right-border-radius)
|
||||
var(--Tag-model-normal-bottom-left-border-radius);
|
||||
--Tag-normal-borderColor: var(--Tag-model-normal-top-border-color)
|
||||
var(--Tag-model-normal-right-border-color)
|
||||
var(--Tag-model-normal-bottom-border-color)
|
||||
var(--Tag-model-normal-left-border-color);
|
||||
var(--Tag-model-normal-right-border-color)
|
||||
var(--Tag-model-normal-bottom-border-color)
|
||||
var(--Tag-model-normal-left-border-color);
|
||||
--Tag-normal-status-size: var(--Tag-model-normal-status-size);
|
||||
--Tag-normal-status-margin: var(--Tag-model-normal-status-margin);
|
||||
|
||||
--Tag-rounded-borderWidth: var(--Tag-model-rounded-top-border-width)
|
||||
var(--Tag-model-rounded-right-border-width)
|
||||
var(--Tag-model-rounded-bottom-border-width)
|
||||
var(--Tag-model-rounded-left-border-width);
|
||||
--Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
|
||||
var(--Tag-model-rounded-top-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-left-border-radius);
|
||||
--Tag-rounded-borderColor: var(--Tag-model-rounded-top-border-color)
|
||||
var(--Tag-model-rounded-right-border-color)
|
||||
var(--Tag-model-rounded-bottom-border-color)
|
||||
var(--Tag-model-rounded-left-border-color);
|
||||
var(--Tag-model-rounded-right-border-width)
|
||||
var(--Tag-model-rounded-bottom-border-width)
|
||||
var(--Tag-model-rounded-left-border-width);
|
||||
--Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius)
|
||||
var(--Tag-model-rounded-top-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-right-border-radius)
|
||||
var(--Tag-model-rounded-bottom-left-border-radius);
|
||||
--Tag-rounded-borderColor: var(--Tag-model-rounded-top-border-color)
|
||||
var(--Tag-model-rounded-right-border-color)
|
||||
var(--Tag-model-rounded-bottom-border-color)
|
||||
var(--Tag-model-rounded-left-border-color);
|
||||
|
||||
--Toast-color: var(--colors-neutral-text-11);
|
||||
--Toast-paddingTop: var(--sizes-size-3);
|
||||
@ -3547,4 +3523,57 @@
|
||||
--Status-warning-color: var(--Status-queue-color);
|
||||
--Status-fail-color: var(--Status-fail-color);
|
||||
--Status-success-color: var(--Status-success-color);
|
||||
|
||||
--inputTag-option-height: var(--sizes-base-15);
|
||||
--inputTag-option-color: var(--colors-neutral-text-2);
|
||||
--inputTag-option-fontSize: var(--fonts-size-7);
|
||||
--inputTag-option-fontWeight: var(--fonts-weight-6);
|
||||
--inputTag-option-lineHeight: var(--fonts-lineHeight-2);
|
||||
--inputTag-option-paddingTop: var(--sizes-size-3);
|
||||
--inputTag-option-paddingBottom: var(--sizes-size-6);
|
||||
--inputTag-option-paddingLeft: var(--sizes-size-3);
|
||||
--inputTag-option-paddingRight: var(--sizes-size-6);
|
||||
--inputTag-option-bg-color: var(--colors-neutral-fill-11);
|
||||
--inputTag-option-hover-color: var(--colors-brand-5);
|
||||
--inputTag-option-hover-bg-color: var(--colors-brand-10);
|
||||
|
||||
--fieldSet-legend-height: var(--sizes-size-9);
|
||||
--fieldSet-legend-color: var(--colors-neutral-text-2);
|
||||
--fieldSet-legend-fontSize: var(--fonts-size-7);
|
||||
--fieldSet-legend-fontWeight: var(--fonts-weight-6);
|
||||
--fieldSet-legend-paddingTop: var(--sizes-size-0);
|
||||
--fieldSet-legend-paddingBottom: var(--sizes-size-0);
|
||||
--fieldSet-legend-paddingLeft: var(--sizes-size-8);
|
||||
--fieldSet-legend-paddingRight: var(--sizes-size-0);
|
||||
--fieldSet-legend-marginTop: var(--sizes-size-7);
|
||||
--fieldSet-legend-marginBottom: var(--sizes-size-7);
|
||||
--fieldSet-legend-marginLeft: var(--sizes-size-0);
|
||||
--fieldSet-legend-marginRight: var(--sizes-size-0);
|
||||
--fieldSet-legend-border-color: var(--colors-brand-5);
|
||||
--fieldSet-legend-border-width: var(--sizes-size-3);
|
||||
--fieldSet-size-xs-paddingTop: var(--sizes-base-10);
|
||||
--fieldSet-size-xs-paddingRight: var(--sizes-size-3);
|
||||
--fieldSet-size-xs-paddingBottom: var(--sizes-size-3);
|
||||
--fieldSet-size-xs-paddingLeft: var(--sizes-size-3);
|
||||
--fieldSet-size-xs-fontSize: var(--fonts-size-8);
|
||||
--fieldSet-size-sm-paddingTop: var(--sizes-base-12);
|
||||
--fieldSet-size-sm-paddingRight: var(--sizes-size-6);
|
||||
--fieldSet-size-sm-paddingBottom: var(--sizes-size-6);
|
||||
--fieldSet-size-sm-paddingLeft: var(--sizes-size-6);
|
||||
--fieldSet-size-sm-fontSize: var(--fonts-size-8);
|
||||
--fieldSet-size-base-paddingTop: var(--sizes-base-15);
|
||||
--fieldSet-size-base-paddingRight: var(--sizes-size-9);
|
||||
--fieldSet-size-base-paddingBottom: var(--sizes-size-9);
|
||||
--fieldSet-size-base-paddingLeft: var(--sizes-size-9);
|
||||
--fieldSet-size-base-fontSize: var(--fonts-size-7);
|
||||
--fieldSet-size-md-paddingTop: var(--sizes-base-15);
|
||||
--fieldSet-size-md-paddingRight: var(--sizes-base-10);
|
||||
--fieldSet-size-md-paddingBottom: var(--sizes-base-10);
|
||||
--fieldSet-size-md-paddingLeft: var(--sizes-base-10);
|
||||
--fieldSet-size-md-fontSize: var(--fonts-size-7);
|
||||
--fieldSet-size-lg-paddingTop: var(--sizes-base-20);
|
||||
--fieldSet-size-lg-paddingRight: var(--sizes-base-15);
|
||||
--fieldSet-size-lg-paddingBottom: var(--sizes-base-15);
|
||||
--fieldSet-size-lg-paddingLeft: var(--sizes-base-15);
|
||||
--fieldSet-size-lg-fontSize: var(--fonts-size-6);
|
||||
}
|
||||
|
||||
@ -33,14 +33,15 @@
|
||||
fieldset.#{$ns}Collapse {
|
||||
border: none;
|
||||
> legend {
|
||||
font-weight: var(--fontWeightNormal);
|
||||
padding: var(--gap-xs) 0;
|
||||
font-size: var(--fontSizeMd);
|
||||
color: var(--text--loud-color);
|
||||
border-left: var(--primary) px2rem(4px) solid;
|
||||
line-height: 1.2;
|
||||
margin: var(--gap-base) 0;
|
||||
padding: 0 0 0 14px;
|
||||
border-left: var(--fieldSet-legend-border-color)
|
||||
var(--fieldSet-legend-border-width) solid;
|
||||
height: var(--fieldSet-legend-height);
|
||||
line-height: var(--fieldSet-legend-height);
|
||||
margin: var(--fieldSet-legend-marginTop) var(--fieldSet-legend-marginRight)
|
||||
var(--fieldSet-legend-marginBottom) var(--fieldSet-legend-marginLeft);
|
||||
padding: var(--fieldSet-legend-paddingTop)
|
||||
var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom)
|
||||
var(--fieldSet-legend-paddingLeft);
|
||||
cursor: pointer;
|
||||
border-bottom: none !important;
|
||||
background: transparent;
|
||||
@ -48,6 +49,13 @@ fieldset.#{$ns}Collapse {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
// width: 100%;
|
||||
|
||||
.#{$ns}TplField {
|
||||
font-weight: var(--fieldSet-legend-fontWeight);
|
||||
font-size: var(--fieldSet-legend-fontSize);
|
||||
color: var(--fieldSet-legend-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
@ -55,103 +63,129 @@ fieldset.#{$ns}Collapse {
|
||||
|
||||
&--xs {
|
||||
@extend %fieldSetBase;
|
||||
padding: 20px 5px 5px 5px;
|
||||
padding: var(--fieldSet-size-xs-paddingTop)
|
||||
var(--fieldSet-size-xs-paddingRight) var(--fieldSet-size-xs-paddingBottom)
|
||||
var(--fieldSet-size-xs-paddingLeft);
|
||||
|
||||
> legend {
|
||||
left: 5px;
|
||||
font-size: var(--fontSizeXs);
|
||||
left: var(--fieldSet-size-xs-paddingLeft);
|
||||
padding: 0 3px;
|
||||
margin: 0 0 0 -3px;
|
||||
|
||||
.#{$ns}TplField {
|
||||
font-size: var(--fieldSet-size-xs-fontSize);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 6px;
|
||||
top: calc(var(--fieldSet-size-xs-fontSize) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&--sm {
|
||||
@extend %fieldSetBase;
|
||||
|
||||
padding: 25px 10px 10px 10px;
|
||||
padding: var(--fieldSet-size-sm-paddingTop)
|
||||
var(--fieldSet-size-sm-paddingRight) var(--fieldSet-size-sm-paddingBottom)
|
||||
var(--fieldSet-size-sm-paddingLeft);
|
||||
|
||||
> legend {
|
||||
left: 10px;
|
||||
font-size: var(--fontSizeSm);
|
||||
left: var(--fieldSet-size-sm-paddingLeft);
|
||||
padding: 0 5px;
|
||||
margin: 0 0 0 -5px;
|
||||
|
||||
.#{$ns}TplField {
|
||||
font-size: var(--fieldSet-size-sm-fontSize);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 6px;
|
||||
top: calc(var(--fieldSet-size-sm-fontSize) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&--base {
|
||||
@extend %fieldSetBase;
|
||||
|
||||
padding: 30px var(--gap-md) var(--gap-md) var(--gap-md);
|
||||
padding: var(--fieldSet-size-base-paddingTop)
|
||||
var(--fieldSet-size-base-paddingRight)
|
||||
var(--fieldSet-size-base-paddingBottom)
|
||||
var(--fieldSet-size-base-paddingLeft);
|
||||
|
||||
> legend {
|
||||
left: var(--gap-md);
|
||||
font-size: var(--fontSizeBase);
|
||||
left: var(--fieldSet-size-base-paddingLeft);
|
||||
padding: 0 8px;
|
||||
margin: 0 0 0 -8px;
|
||||
|
||||
.#{$ns}TplField {
|
||||
font-size: var(--fieldSet-size-base-fontSize);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 7px;
|
||||
top: calc(var(--fieldSet-size-base-fontSize) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&--md {
|
||||
@extend %fieldSetBase;
|
||||
padding: 30px 20px 20px 20px;
|
||||
padding: var(--fieldSet-size-md-paddingTop)
|
||||
var(--fieldSet-size-md-paddingRight) var(--fieldSet-size-md-paddingBottom)
|
||||
var(--fieldSet-size-md-paddingLeft);
|
||||
|
||||
> legend {
|
||||
left: 20px;
|
||||
font-size: var(--fontSizeMd);
|
||||
left: var(--fieldSet-size-md-paddingLeft);
|
||||
padding: 0 10px;
|
||||
margin: 0 0 0 -10px;
|
||||
|
||||
.#{$ns}TplField {
|
||||
font-size: var(--fieldSet-size-md-fontSize);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 7px;
|
||||
top: calc(var(--fieldSet-size-md-fontSize) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
@extend %fieldSetBase;
|
||||
padding: 40px 30px 30px 30px;
|
||||
padding: var(--fieldSet-size-lg-paddingTop)
|
||||
var(--fieldSet-size-lg-paddingRight) var(--fieldSet-size-lg-paddingBottom)
|
||||
var(--fieldSet-size-lg-paddingLeft);
|
||||
|
||||
> legend {
|
||||
left: 30px;
|
||||
font-size: var(--fontSizeLg);
|
||||
left: var(--fieldSet-size-lg-paddingLeft);
|
||||
padding: 0 var(--gap-md);
|
||||
margin: 0 0 0 calc(var(--gap-md) * -1);
|
||||
|
||||
.#{$ns}TplField {
|
||||
font-size: var(--fieldSet-size-lg-fontSize);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 9px;
|
||||
top: calc(var(--fieldSet-size-lg-fontSize) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,14 +63,41 @@
|
||||
|
||||
@include button-variant(
|
||||
var(--TagControl-sugBtn-bg),
|
||||
var(--TagControl-sugBtn-border),
|
||||
var(--TagControl-sugBtn-color),
|
||||
var(--TagControl-sugBtn-border),
|
||||
var(--TagControl-sugBtn-border),
|
||||
var(--TagControl-sugBtn-border),
|
||||
var(--TagControl-sugBtn-border),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
solid,
|
||||
solid,
|
||||
solid,
|
||||
solid,
|
||||
none,
|
||||
var(--TagControl-sugBtn-onHover-bg),
|
||||
var(--TagControl-sugBtn-onHover-border),
|
||||
var(--TagControl-sugBtn-onHover-color),
|
||||
var(--TagControl-sugBtn-onHover-border),
|
||||
var(--TagControl-sugBtn-onHover-border),
|
||||
var(--TagControl-sugBtn-onHover-border),
|
||||
var(--TagControl-sugBtn-onHover-border),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
var(--TagControl-sugBtn-borderWidth),
|
||||
solid,
|
||||
solid,
|
||||
solid,
|
||||
solid,
|
||||
none,
|
||||
var(--TagControl-sugBtn-onActive-bg),
|
||||
var(--TagControl-sugBtn-onActive-color),
|
||||
var(--TagControl-sugBtn-onActive-border),
|
||||
var(--TagControl-sugBtn-onActive-color)
|
||||
var(--TagControl-sugBtn-onActive-border),
|
||||
var(--TagControl-sugBtn-onActive-border),
|
||||
var(--TagControl-sugBtn-onActive-border)
|
||||
);
|
||||
|
||||
&.is-disabled {
|
||||
@ -91,4 +118,21 @@
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.#{$ns}ListMenu-item {
|
||||
height: var(--inputTag-option-height);
|
||||
color: var(--inputTag-option-color);
|
||||
font-size: var(--inputTag-option-fontSize);
|
||||
line-height: var(--inputTag-option-lineHeight);
|
||||
font-weight: var(--inputTag-option-fontWeight);
|
||||
padding: var(--inputTag-option-paddingTop)
|
||||
var(--inputTag-option-paddingRight) var(--inputTag-option-paddingBottom)
|
||||
var(--inputTag-option-paddingLeft);
|
||||
background: var(--inputTag-option-bg-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--inputTag-option-hover-color);
|
||||
background: var(--inputTag-option-hover-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--transfer-base-title-bg);
|
||||
color: var(--transfer-base-title-font-color);
|
||||
color: var(--transfer-base-title-color);
|
||||
line-height: var(--transfer-base-title-lineHeight);
|
||||
font-size: var(--transfer-base-title-fontSize);
|
||||
font-weight: var(--transfer-base-title-fontWeight);
|
||||
@ -27,10 +27,6 @@
|
||||
var(--transfer-base-header-paddingRight)
|
||||
var(--transfer-base-header-paddingBottom)
|
||||
var(--transfer-base-header-paddingLeft);
|
||||
margin: var(--transfer-base-header-marginTop)
|
||||
var(--transfer-base-header-marginRight)
|
||||
var(--transfer-base-header-marginBottom)
|
||||
var(--transfer-base-header-marginLeft);
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
@ -80,10 +76,6 @@
|
||||
var(--transfer-base-body-paddingRight)
|
||||
var(--transfer-base-body-paddingBottom)
|
||||
var(--transfer-base-body-paddingLeft);
|
||||
margin: var(--transfer-base-body-marginTop)
|
||||
var(--transfer-base-body-marginRight)
|
||||
var(--transfer-base-body-marginBottom)
|
||||
var(--transfer-base-body-marginLeft);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -101,7 +93,7 @@
|
||||
font-size: var(--transfer-base-content-fontSize);
|
||||
font-weight: var(--transfer-base-content-fontWeight);
|
||||
|
||||
color: var(--transfer-base-content-font-color);
|
||||
color: var(--transfer-base-content-color);
|
||||
}
|
||||
|
||||
.#{$ns}ChainedSelection-item {
|
||||
@ -115,7 +107,7 @@
|
||||
font-size: var(--transfer-base-content-fontSize);
|
||||
font-weight: var(--transfer-base-content-fontWeight);
|
||||
|
||||
color: var(--transfer-base-content-font-color);
|
||||
color: var(--transfer-base-content-color);
|
||||
}
|
||||
|
||||
.#{$ns}GroupedSelection-group > .#{$ns}GroupedSelection-itemLabel {
|
||||
@ -123,7 +115,7 @@
|
||||
font-weight: var(--transfer-group-font-weight);
|
||||
line-height: var(--transfer-group-font-lineHeight);
|
||||
font-family: var(--transfer-group-font-family);
|
||||
color: var(--transfer-group-font-color);
|
||||
color: var(--transfer-group-color);
|
||||
}
|
||||
|
||||
&-select > .#{$ns}ChainedSelection {
|
||||
@ -197,14 +189,12 @@
|
||||
padding: var(--transfer-search-paddingTop)
|
||||
var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom)
|
||||
var(--transfer-search-paddingLeft);
|
||||
margin: var(--transfer-search-marginTop) var(--transfer-search-marginRight)
|
||||
var(--transfer-search-marginBottom) var(--transfer-search-marginLeft);
|
||||
width: 100%;
|
||||
.#{$ns}InputBox {
|
||||
font-size: var(--transfer-search-fontSize);
|
||||
font-weight: var(--transfer-search-fontWeight);
|
||||
line-height: var(--transfer-search-lineHeight);
|
||||
color: var(--transfer-search-font-color);
|
||||
color: var(--transfer-search-color);
|
||||
border-width: var(--transfer-search-top-border-width)
|
||||
var(--transfer-search-right-border-width)
|
||||
var(--transfer-search-bottom-border-width)
|
||||
@ -226,10 +216,6 @@
|
||||
var(--transfer-search-input-paddingRight)
|
||||
var(--transfer-search-input-paddingBottom)
|
||||
var(--transfer-search-input-paddingLeft);
|
||||
margin: var(--transfer-search-input-marginTop)
|
||||
var(--transfer-search-input-marginRight)
|
||||
var(--transfer-search-input-marginBottom)
|
||||
var(--transfer-search-input-marginLeft);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--transfer-search-border-hover-color);
|
||||
@ -240,7 +226,7 @@
|
||||
}
|
||||
|
||||
input {
|
||||
color: var(--transfer-search-font-color);
|
||||
color: var(--transfer-search-color);
|
||||
font-size: var(--transfer-search-fontSize);
|
||||
font-weight: var(--transfer-search-fontWeight);
|
||||
line-height: var(--transfer-search-lineHeight);
|
||||
@ -327,7 +313,7 @@
|
||||
font-size: var(--transfer-base-content-fontSize);
|
||||
font-weight: var(--transfer-base-content-fontWeight);
|
||||
|
||||
color: var(--transfer-base-content-font-color);
|
||||
color: var(--transfer-base-content-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -338,7 +324,7 @@
|
||||
var(--transfer-table-header-paddingBottom)
|
||||
var(--transfer-table-header-paddingLeft);
|
||||
background: var(--transfer-base-title-bg);
|
||||
color: var(--transfer-base-title-font-color);
|
||||
color: var(--transfer-base-title-color);
|
||||
line-height: var(--transfer-base-title-lineHeight);
|
||||
font-size: var(--transfer-base-content-fontSize);
|
||||
|
||||
|
||||
@ -117,7 +117,7 @@ export default class FieldSetControl extends React.Component<
|
||||
|
||||
let props: any = {
|
||||
store,
|
||||
data: store!.data,
|
||||
data: store?.data,
|
||||
render,
|
||||
disabled,
|
||||
formMode: subFormMode || formMode,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user