@kne/form-info 0.1.0-alpha.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -4
- package/dist/index.css +26 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +3980 -45
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +3993 -72
- package/dist/index.modern.js.map +1 -1
- package/package.json +9 -5
package/README.md
CHANGED
|
@@ -13,16 +13,17 @@
|
|
|
13
13
|
npm i --save @kne/form-info
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
### 示例
|
|
16
|
+
### 示例(全屏)
|
|
17
17
|
|
|
18
18
|
#### 示例代码
|
|
19
19
|
|
|
20
|
-
-
|
|
20
|
+
- Form
|
|
21
21
|
- 这里填写示例说明
|
|
22
|
-
- _FormInfo(@kne/current-lib_form-info),(@kne/current-lib_form-info/dist/index.css)
|
|
22
|
+
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
23
23
|
|
|
24
24
|
```jsx
|
|
25
|
-
const {default: FormInfo, List, TableList, MultiField, Form, Input, TextArea} = _FormInfo;
|
|
25
|
+
const {default: FormInfo, List, TableList, MultiField, Form, Input, TextArea, SubmitButton, ResetButton} = _FormInfo;
|
|
26
|
+
const {Flex} = antd;
|
|
26
27
|
|
|
27
28
|
const BaseExample = () => {
|
|
28
29
|
return <Form>
|
|
@@ -45,6 +46,10 @@ const BaseExample = () => {
|
|
|
45
46
|
list={[<Input name="field_1" label="字段1" rule="REQ"/>,
|
|
46
47
|
<Input name="field_2" label="字段2" rule="REQ"/>,
|
|
47
48
|
<Input name="description" label="描述" block/>]}/>
|
|
49
|
+
<Flex justify="center" gap={8}>
|
|
50
|
+
<SubmitButton>提交</SubmitButton>
|
|
51
|
+
<ResetButton>重置</ResetButton>
|
|
52
|
+
</Flex>
|
|
48
53
|
</Form>;
|
|
49
54
|
};
|
|
50
55
|
|
|
@@ -52,6 +57,140 @@ render(<BaseExample/>);
|
|
|
52
57
|
|
|
53
58
|
```
|
|
54
59
|
|
|
60
|
+
- FormModal
|
|
61
|
+
- 这里填写示例说明
|
|
62
|
+
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
63
|
+
|
|
64
|
+
```jsx
|
|
65
|
+
const {default: FormInfo, FormModal, List, Input, TextArea} = _FormInfo;
|
|
66
|
+
const {useState} = React;
|
|
67
|
+
const {Button} = antd;
|
|
68
|
+
|
|
69
|
+
const BaseExample = () => {
|
|
70
|
+
const [open, onOpenChange] = useState(false);
|
|
71
|
+
return <>
|
|
72
|
+
<Button onClick={() => {
|
|
73
|
+
onOpenChange(true);
|
|
74
|
+
}}>打开Form弹窗</Button>
|
|
75
|
+
<FormModal formProps={{
|
|
76
|
+
data: {name: '张三'}
|
|
77
|
+
}} open={open} onCancel={() => {
|
|
78
|
+
onOpenChange(false);
|
|
79
|
+
}}>
|
|
80
|
+
<FormInfo title="基本信息" column={1} list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
81
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>, <TextArea name="description" label="描述" block/>]}/>
|
|
82
|
+
<List title="工作经历" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
83
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>, <TextArea name="description" label="描述" block/>]}/>
|
|
84
|
+
</FormModal>
|
|
85
|
+
</>;
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
render(<BaseExample/>);
|
|
89
|
+
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
- FormSteps
|
|
93
|
+
- 这里填写示例说明
|
|
94
|
+
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
95
|
+
|
|
96
|
+
```jsx
|
|
97
|
+
const {default: FormInfo, FormSteps, List, Input, TextArea, SubmitButton, CancelButton} = _FormInfo;
|
|
98
|
+
const {Flex, Divider} = antd;
|
|
99
|
+
const BaseExample = () => {
|
|
100
|
+
return <Flex vertical>
|
|
101
|
+
<FormSteps items={[{
|
|
102
|
+
title: '表单1',
|
|
103
|
+
formProps: {},
|
|
104
|
+
children: <FormInfo title="基本信息" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
105
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>, <TextArea name="description" label="描述" block/>,
|
|
106
|
+
<Flex block justify="center" gap={8}>
|
|
107
|
+
<SubmitButton>提交</SubmitButton>
|
|
108
|
+
<CancelButton>取消</CancelButton>
|
|
109
|
+
</Flex>]}/>
|
|
110
|
+
}, {
|
|
111
|
+
title: '表单2', formProps: {}, children: <>
|
|
112
|
+
<List title="工作经历" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
113
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>,
|
|
114
|
+
<TextArea name="description" label="描述" block/>]}/>
|
|
115
|
+
<Flex justify="center" gap={8}>
|
|
116
|
+
<SubmitButton>提交</SubmitButton>
|
|
117
|
+
<CancelButton>取消</CancelButton>
|
|
118
|
+
</Flex>
|
|
119
|
+
</>
|
|
120
|
+
}]}/>
|
|
121
|
+
<Divider/>
|
|
122
|
+
<FormSteps direction="vertical" items={[{
|
|
123
|
+
title: '表单1',
|
|
124
|
+
formProps: {},
|
|
125
|
+
children: <FormInfo title="基本信息" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
126
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>, <TextArea name="description" label="描述" block/>,
|
|
127
|
+
<Flex block justify="center" gap={8}>
|
|
128
|
+
<SubmitButton>提交</SubmitButton>
|
|
129
|
+
<CancelButton>取消</CancelButton>
|
|
130
|
+
</Flex>]}/>
|
|
131
|
+
}, {
|
|
132
|
+
title: '表单2', formProps: {}, children: <>
|
|
133
|
+
<List title="工作经历" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
134
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>,
|
|
135
|
+
<TextArea name="description" label="描述" block/>]}/>
|
|
136
|
+
<Flex justify="center" gap={8}>
|
|
137
|
+
<SubmitButton>提交</SubmitButton>
|
|
138
|
+
<CancelButton>取消</CancelButton>
|
|
139
|
+
</Flex>
|
|
140
|
+
</>
|
|
141
|
+
}]}/>
|
|
142
|
+
</Flex>
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
render(<BaseExample/>);
|
|
146
|
+
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
- FormStepsModal
|
|
150
|
+
- 这里填写示例说明
|
|
151
|
+
- _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
|
|
152
|
+
|
|
153
|
+
```jsx
|
|
154
|
+
const {default: FormInfo, FormStepsModal, List, Input, TextArea, SubmitButton, CancelButton} = _FormInfo;
|
|
155
|
+
const {Flex, Button} = antd;
|
|
156
|
+
const {useState} = React;
|
|
157
|
+
|
|
158
|
+
const BaseExample = () => {
|
|
159
|
+
const [open, onOpenChange] = useState(false);
|
|
160
|
+
return <>
|
|
161
|
+
<Button onClick={() => {
|
|
162
|
+
onOpenChange(true);
|
|
163
|
+
}}>打开StepsForm弹窗</Button>
|
|
164
|
+
<FormStepsModal modalProps={{open, title: '多步骤表单', onCancel: () => onOpenChange(false)}} items={[{
|
|
165
|
+
title: '表单1',
|
|
166
|
+
formProps: {
|
|
167
|
+
data: {
|
|
168
|
+
phone: '10929299202'
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
children: <FormInfo title="基本信息" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
172
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>, <TextArea name="description" label="描述" block/>]}/>
|
|
173
|
+
}, {
|
|
174
|
+
title: '表单2',
|
|
175
|
+
formProps: {
|
|
176
|
+
data: {
|
|
177
|
+
phone: '11939388383'
|
|
178
|
+
}
|
|
179
|
+
},
|
|
180
|
+
children: <List title="工作经历" list={[<Input name="name" label="姓名" rule="REQ"/>,
|
|
181
|
+
<Input name="phone" label="电话" rule="REQ TEL"/>, <TextArea name="description" label="描述" block/>]}/>
|
|
182
|
+
}]}/>
|
|
183
|
+
</>;
|
|
184
|
+
|
|
185
|
+
return <Flex vertical>
|
|
186
|
+
<FormSteps/>
|
|
187
|
+
</Flex>
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
render(<BaseExample/>);
|
|
191
|
+
|
|
192
|
+
```
|
|
193
|
+
|
|
55
194
|
|
|
56
195
|
### API
|
|
57
196
|
|
package/dist/index.css
CHANGED
|
@@ -104,6 +104,12 @@
|
|
|
104
104
|
height: 36px;
|
|
105
105
|
padding: 0 16px;
|
|
106
106
|
}
|
|
107
|
+
._PNnMa ._HiB5Q.ant-card .ant-card-head ._eY4qR {
|
|
108
|
+
min-width: auto !important;
|
|
109
|
+
border: none !important;
|
|
110
|
+
padding: 0 !important;
|
|
111
|
+
background: transparent !important;
|
|
112
|
+
}
|
|
107
113
|
._PNnMa ._HiB5Q.ant-card .ant-card-head-title .part-title {
|
|
108
114
|
background: transparent;
|
|
109
115
|
font-weight: normal;
|
|
@@ -132,7 +138,7 @@
|
|
|
132
138
|
flex-wrap: nowrap;
|
|
133
139
|
gap: 8px;
|
|
134
140
|
}
|
|
135
|
-
._uogqr:not(
|
|
141
|
+
._uogqr:not(:first-child) .react-form__field-label {
|
|
136
142
|
display: none;
|
|
137
143
|
}
|
|
138
144
|
._uogqr ._UGjS9 {
|
|
@@ -195,4 +201,23 @@
|
|
|
195
201
|
flex-basis: 100px;
|
|
196
202
|
text-align: right;
|
|
197
203
|
}
|
|
204
|
+
|
|
205
|
+
._IOdkE {
|
|
206
|
+
justify-content: center;
|
|
207
|
+
width: auto;
|
|
208
|
+
}
|
|
209
|
+
._IOdkE .ant-steps-item {
|
|
210
|
+
max-width: 450px;
|
|
211
|
+
}
|
|
212
|
+
._IOdkE .ant-steps-item-content {
|
|
213
|
+
text-wrap: nowrap;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
._uc1HZ {
|
|
217
|
+
width: 100%;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
._vWPQO ._IOdkE {
|
|
221
|
+
padding: 0 100px;
|
|
222
|
+
}
|
|
198
223
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,cAAc;AAChB;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,kBAAkB;EAClB,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB","file":"index.css","sourcesContent":[".form-outer :global .react-form__field {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label.is-req {\n margin-left: 0;\n}\n.form-outer :global .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n color: var(--color-warning);\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n flex: 1;\n width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n background: #ffffff;\n color: var(--font-color);\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n\n.extra-btn:global(.ant-btn) {\n border-radius: 2px;\n border: 1px solid var(--font-color-grey-2);\n padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n padding: 0;\n border: none;\n min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n padding: 16px 0 0;\n border-radius: 0;\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n background: transparent;\n padding: 0;\n border: none;\n line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n background: var(--primary-color-06);\n color: var(--primary-color);\n font-size: var(--font-size-small);\n font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n border: none;\n}\n.list-item .list-item-part:global.ant-card .ant-card-head {\n background: #f8f8f8;\n border-bottom: 1px solid var(--font-color-grey-4);\n line-height: 36px;\n height: 36px;\n padding: 0 16px;\n}\n.list-item .list-item-part:global.ant-card .ant-card-head-title .part-title {\n background: transparent;\n font-weight: normal;\n font-size: 14px;\n color: var(--font-color);\n}\n.list-item .list-item-part:global.ant-card .ant-card-body {\n padding: 16px;\n}\n.list-item :global(.ant-divider) {\n border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n display: none;\n}\n.list-item:not(:last-child) {\n margin-bottom: 16px;\n}\n\n.list-item-part {\n border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n display: flex;\n flex-wrap: nowrap;\n gap: 8px;\n}\n.multi-field-item:not(
|
|
1
|
+
{"version":3,"sources":["style.module.scss"],"names":[],"mappings":"AAAA;EACE,wBAAwB;AAC1B;AACA;EACE,wBAAwB;AAC1B;AACA;EACE,+BAA+B;AACjC;AACA;EACE,cAAc;AAChB;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;EAClB,8BAA8B;AAChC;AACA;EACE,2BAA2B;EAC3B,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;AACA;;EAEE,WAAW;AACb;AACA;;EAEE,OAAO;EACP,WAAW;AACb;AACA;;EAEE,mBAAmB;EACnB,wBAAwB;AAC1B;;AAEA;EACE,iCAAiC;AACnC;;AAEA;EACE,kBAAkB;EAClB,0CAA0C;EAC1C,iBAAiB;AACnB;;AAEA;EACE,iCAAiC;AACnC;AACA;EACE,UAAU;EACV,YAAY;EACZ,YAAY;AACd;AACA;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;AACrC;AACA;EACE,2BAA2B;AAC7B;AACA;EACE,gBAAgB;AAClB;AACA;EACE,uBAAuB;EACvB,UAAU;EACV,YAAY;EACZ,cAAc;AAChB;AACA;EACE,mCAAmC;EACnC,2BAA2B;EAC3B,iCAAiC;EACjC,iBAAiB;AACnB;AACA;EACE,eAAe;AACjB;AACA;EACE,oCAAoC;AACtC;AACA;EACE,YAAY;AACd;AACA;EACE,mBAAmB;EACnB,iDAAiD;EACjD,iBAAiB;EACjB,YAAY;EACZ,eAAe;AACjB;AACA;EACE,0BAA0B;EAC1B,uBAAuB;EACvB,qBAAqB;EACrB,kCAAkC;AACpC;AACA;EACE,uBAAuB;EACvB,mBAAmB;EACnB,eAAe;EACf,wBAAwB;AAC1B;AACA;EACE,aAAa;AACf;AACA;EACE,0CAA0C;AAC5C;AACA;EACE,aAAa;AACf;AACA;EACE,mBAAmB;AACrB;;AAEA;EACE,0CAA0C;AAC5C;;AAEA;EACE,aAAa;EACb,iBAAiB;EACjB,QAAQ;AACV;AACA;EACE,aAAa;AACf;AACA;EACE,6BAA6B;EAC7B,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,kBAAkB;AACpB;AACA;EACE,OAAO;AACT;;AAEA;EACE,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAC7B;AACA;EACE,aAAa;AACf;AACA;EACE,+CAA+C;AACjD;AACA;EACE,6CAA6C;AAC/C;AACA;EACE,aAAa;EACb,uBAAuB;AACzB;;AAEA;EACE,wCAAwC;AAC1C;;AAEA;EACE,iBAAiB;AACnB;;AAEA;EACE,kCAAkC;AACpC;AACA;EACE,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,qBAAqB;EACrB,wBAAwB;EACxB,iBAAiB;EACjB,iBAAiB;AACnB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,iBAAiB;EACjB,iBAAiB;AACnB;;AAEA;EACE,uBAAuB;EACvB,WAAW;AACb;AACA;EACE,gBAAgB;AAClB;AACA;EACE,iBAAiB;AACnB;;AAEA;EACE,WAAW;AACb;;AAEA;EACE,gBAAgB;AAClB","file":"index.css","sourcesContent":[".form-outer :global .react-form__field {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input {\n color: var(--font-color);\n}\n.form-outer :global .react-form__field input::placeholder {\n color: var(--font-color-grey-2);\n}\n.form-outer :global .react-form__field-label.is-req {\n margin-left: 0;\n}\n.form-outer :global .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n font-weight: normal !important;\n}\n.form-outer :global .react-form__field-label.is-req:before {\n color: var(--color-warning);\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.form-outer :global .react-form__field-error {\n line-height: 14px;\n}\n.form-outer :global .ant-input-number,\n.form-outer :global .ant-input-number-group-wrapper {\n width: 100%;\n}\n.form-outer :global .ant-picker.react-form__field-component,\n.form-outer :global .data_range_picker {\n flex: 1;\n width: 100%;\n}\n.form-outer :global .ant-input-number-group-addon,\n.form-outer :global .ant-input-group-addon {\n background: #ffffff;\n color: var(--font-color);\n}\n\n.form-info > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n\n.extra-btn:global(.ant-btn) {\n border-radius: 2px;\n border: 1px solid var(--font-color-grey-2);\n padding: 6px 12px;\n}\n\n.list-part > :global(.ant-card-head .part-title) {\n font-size: var(--font-size-large);\n}\n.list-part .list-part .extra-btn {\n padding: 0;\n border: none;\n min-width: 0;\n}\n.list-part:global.ant-card .ant-card-body {\n padding: 16px 0 0;\n border-radius: 0;\n}\n\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head) {\n background: var(--primary-color-06);\n}\n.list-item.is-important > .list-item-part:global(.ant-card > .ant-card-head .ant-card-head-title .part-title) {\n color: var(--primary-color);\n}\n.list-item.is-important .list-item-part:global(.ant-card .ant-card-head-title .part-title) {\n font-weight: 500;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) {\n background: transparent;\n padding: 0;\n border: none;\n line-height: 1;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-head) :global(.part-title) {\n background: var(--primary-color-06);\n color: var(--primary-color);\n font-size: var(--font-size-small);\n font-weight: bold;\n}\n.list-item.is-important > .list-item-part:global(.ant-card) .list-part:global(.ant-card > .ant-card-body) {\n padding: 16px 0;\n}\n.list-item.is-important > .list-item-part {\n border-color: var(--primary-color-5);\n}\n.list-item.is-important .table-list-inner {\n border: none;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) {\n background: #f8f8f8;\n border-bottom: 1px solid var(--font-color-grey-4);\n line-height: 36px;\n height: 36px;\n padding: 0 16px;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head) .extra-btn {\n min-width: auto !important;\n border: none !important;\n padding: 0 !important;\n background: transparent !important;\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-head-title) :global(.part-title) {\n background: transparent;\n font-weight: normal;\n font-size: 14px;\n color: var(--font-color);\n}\n.list-item .list-item-part:global(.ant-card) :global(.ant-card-body) {\n padding: 16px;\n}\n.list-item :global(.ant-divider) {\n border-top-color: var(--font-color-grey-2);\n}\n.list-item :global(.ant-divider) {\n display: none;\n}\n.list-item:not(:last-child) {\n margin-bottom: 16px;\n}\n\n.list-item-part {\n border: 1px solid var(--font-color-grey-4);\n}\n\n.multi-field-item {\n display: flex;\n flex-wrap: nowrap;\n gap: 8px;\n}\n.multi-field-item:not(:first-child) :global .react-form__field-label {\n display: none;\n}\n.multi-field-item .react-form__field-label {\n color: var(--font-color-grey);\n font-size: 14px;\n line-height: 20px;\n height: 20px;\n margin-bottom: 8px;\n}\n.multi-field-item :global .react-form__field {\n flex: 1;\n}\n\n.multi-field-add-btn {\n margin-bottom: 16px;\n}\n\n.table-list .list-item {\n margin-bottom: 0 !important;\n}\n.table-list :global .react-form__field-label {\n display: none;\n}\n.table-list :global .ant-row:not(:last-child) {\n border-bottom: solid 1px var(--bg-color-grey-3);\n}\n.table-list :global .ant-row:hover {\n background: var(--bg-color-grey-1) !important;\n}\n.table-list :global .ant-col {\n padding: 16px;\n width: var(--col-width);\n}\n\n.table-list-inner {\n border: solid 1px var(--bg-color-grey-3);\n}\n\n.table-list-field:global(.ant-col) {\n padding-bottom: 0;\n}\n\n.table-list-header {\n background: var(--bg-color-grey-1);\n}\n.table-list-header .is-req:before {\n color: var(--color-warning);\n content: \"*\";\n position: static;\n display: inline-block;\n transform: translateX(0);\n margin-right: 6px;\n font-weight: bold;\n}\n.table-list-header :global .ant-col {\n padding: 8px 16px;\n}\n\n.table-options {\n flex-basis: 100px;\n text-align: right;\n}\n\n.steps {\n justify-content: center;\n width: auto;\n}\n.steps :global(.ant-steps-item) {\n max-width: 450px;\n}\n.steps :global(.ant-steps-item-content) {\n text-wrap: nowrap;\n}\n\n.steps-form-inner {\n width: 100%;\n}\n\n.steps-modal .steps {\n padding: 0 100px;\n}"]}
|