dcp-design-react 1.11.14 → 1.11.16

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.
@@ -1,391 +1,391 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2021-07-23 19:05:57
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2024-10-29 13:39:17
6
- */
7
- @import '../../style/common';
8
-
9
- @prefix-form: ~'@{qm-prefix}-form';
10
-
11
- .@{prefix-form} {
12
- position: relative;
13
- .ant-form-item {
14
- margin-bottom: @--margin-md + 2px;
15
- .ant-form-item-label {
16
- & > label[title=''] {
17
- width: 100%;
18
- display: inline-flex;
19
- justify-content: right;
20
- .ant-select {
21
- flex: auto;
22
- width: 0;
23
- text-align: left;
24
- }
25
- }
26
- &-wrap {
27
- line-height: 1.075;
28
- }
29
- &-left > label[title=''] {
30
- justify-content: left;
31
- }
32
- }
33
- // placeholder
34
- input::placeholder {
35
- text-align: left;
36
- }
37
- // ant-form-inline
38
- &-with-help {
39
- margin-bottom: @--margin-md + 2px;
40
- }
41
- // valigator
42
- .ant-form-item-explain {
43
- .text-overflow-cut();
44
- display: flex;
45
- gap: @--margin-md;
46
- min-height: auto;
47
- height: @--font-size-sm;
48
- font-size: @--font-size-sm;
49
- line-height: 1;
50
- }
51
- // search
52
- .ant-input-search {
53
- width: calc(100% + 1px);
54
- & > .ant-input-group > .ant-input-group-addon {
55
- line-height: 1;
56
- }
57
- }
58
- // radio-group checkbox-group
59
- .ant-radio-group,
60
- .ant-checkbox-group {
61
- display: inline-flex;
62
- justify-content: flex-start;
63
- flex-wrap: wrap;
64
- row-gap: 4px;
65
- .ant-radio-wrapper,
66
- .ant-checkbox-wrapper {
67
- margin: 0;
68
- margin-right: 20px;
69
- &:last-of-type {
70
- margin-right: 0;
71
- }
72
- }
73
- }
74
- // textarea
75
- .ant-input-textarea-show-count {
76
- position: relative;
77
- &::after {
78
- position: absolute;
79
- right: 3px;
80
- bottom: 0;
81
- margin: 0;
82
- }
83
- }
84
- // input extra
85
- .extra-tooltip {
86
- color: @--text-color-secondary;
87
- vertical-align: -0.4em;
88
- transform: scale(1.2);
89
- }
90
- .extra-text {
91
- height: 100%;
92
- display: flex;
93
- align-items: center;
94
- }
95
- .extra-overflow-cut {
96
- .text-overflow-cut();
97
- }
98
- // select
99
- .ant-select {
100
- width: 100%;
101
- }
102
- // input number
103
- .ant-input-number.right {
104
- input {
105
- text-align: right;
106
- }
107
- &.controls {
108
- input {
109
- padding-right: 30px;
110
- }
111
- }
112
- }
113
- // range input/input-number/search-helper
114
- .site-input-left {
115
- border-right-width: 0;
116
- z-index: 1;
117
- }
118
- .site-input-left:hover,
119
- .site-input-left:focus {
120
- border-right-width: 1px;
121
- }
122
- .site-input-right {
123
- border-left-width: 0;
124
- &.ant-input-search .ant-input-affix-wrapper {
125
- border-left-width: 0;
126
- }
127
- .ant-input-affix-wrapper {
128
- border-top-left-radius: 0;
129
- border-bottom-left-radius: 0;
130
- }
131
- }
132
- .site-input-right:hover,
133
- .site-input-right:focus {
134
- border-left-width: 1px;
135
- &.ant-input-search .ant-input-affix-wrapper {
136
- border-left-width: 1px;
137
- }
138
- }
139
- // search-helper-multiple
140
- .search-helper-multiple {
141
- .ant-input-group > .ant-select:first-child {
142
- z-index: 1;
143
- .ant-select-selector {
144
- border-top-right-radius: 0;
145
- border-bottom-right-radius: 0;
146
- }
147
- }
148
- }
149
- // select-multiple
150
- .ant-select-multiple:not(.ant-select-disabled) {
151
- .ant-select-selection-overflow-item-rest {
152
- cursor: pointer;
153
- * {
154
- pointer-events: none;
155
- }
156
- }
157
- }
158
- }
159
- .ant-form-vertical .ant-form-item {
160
- .ant-form-item-label {
161
- padding-bottom: 4px;
162
- label[title=''] {
163
- justify-content: left;
164
- }
165
- }
166
- }
167
- // ------ size ------
168
- // 40 32 24
169
- &--lg {
170
- }
171
- &--sm {
172
- .ant-form-item {
173
- margin-bottom: @--margin-md;
174
- .ant-form-item-label {
175
- &-wrap {
176
- line-height: 1;
177
- }
178
- }
179
- // valigator
180
- .ant-form-item-control {
181
- // 待优化
182
- & > div:nth-last-of-type(1)[style*='nowrap'] {
183
- transform: scale(0.8334);
184
- transform-origin: 0 50%;
185
- }
186
- }
187
- }
188
- }
189
- &__only-show {
190
- // ...
191
- }
192
- &__compact {
193
- .ant-form-item {
194
- margin-bottom: 4px;
195
- .ant-form-item-control {
196
- & > div:nth-last-of-type(1)[style*='nowrap'] {
197
- display: none !important;
198
- }
199
- }
200
- }
201
- }
202
- }
203
-
204
- .ant-picker-footer-extra {
205
- .ant-tag {
206
- cursor: pointer;
207
- }
208
- }
209
-
210
- // immediate
211
- .@{prefix-form}-immediate {
212
- padding: 5px 15px;
213
- overflow-y: auto !important;
214
- .table {
215
- width: 100%;
216
- th,
217
- td {
218
- height: 32px;
219
- text-align: left;
220
- border-bottom: 1px solid @--border-color-secondary;
221
- }
222
- tbody {
223
- tr td {
224
- cursor: pointer;
225
- }
226
- tr:hover,
227
- tr.active {
228
- background-color: @--primary-1;
229
- }
230
- }
231
- }
232
- // 40 32 24
233
- &--lg {
234
- .table {
235
- th,
236
- td {
237
- height: 40px;
238
- }
239
- }
240
- }
241
- &--sm {
242
- padding: 5px 10px !important;
243
- .table {
244
- th,
245
- td {
246
- height: 24px;
247
- }
248
- }
249
- }
250
- }
251
-
252
- // city-select
253
- .@{prefix-form}-city-select {
254
- padding: 15px 15px 10px;
255
- max-width: 420px;
256
- .container {
257
- .city-drop {
258
- &-toper {
259
- margin-bottom: 10px;
260
- display: flex;
261
- &__type {
262
- display: inline-block;
263
- }
264
- &__search {
265
- margin-left: 10px;
266
- }
267
- }
268
- &-letter {
269
- display: flex;
270
- flex-wrap: wrap;
271
- margin-bottom: 4px;
272
- .tag {
273
- list-style: none;
274
- line-height: 1.75;
275
- font-size: @--font-size-sm;
276
- padding: 0 8px;
277
- margin: 0 4px 4px 0;
278
- border: 1px solid @--border-color-secondary;
279
- border-radius: 2px;
280
- cursor: pointer;
281
- &.actived {
282
- color: @--white;
283
- background-color: @--primary-color;
284
- border-color: @--primary-color;
285
- }
286
- }
287
- }
288
- &-list {
289
- margin-right: -2px;
290
- max-height: 350px;
291
- overflow-y: auto;
292
- dl {
293
- margin: 0;
294
- dt {
295
- float: left;
296
- font-weight: 700;
297
- }
298
- dd {
299
- white-space: normal;
300
- margin-inline-start: 50px;
301
- margin-bottom: 8px;
302
- li {
303
- display: inline-block;
304
- margin-right: 8px;
305
- cursor: pointer;
306
- &:hover {
307
- color: @--primary-color;
308
- }
309
- &.actived {
310
- color: @--primary-color;
311
- }
312
- }
313
- }
314
- }
315
- }
316
- }
317
- }
318
- // 40 32 24
319
- &--lg {
320
- }
321
- &--sm {
322
- padding: 10px 10px 5px !important;
323
- }
324
- }
325
-
326
- // region-select
327
- .@{prefix-form}-region-select {
328
- padding: 10px 15px;
329
- .container {
330
- margin-top: -10px;
331
- .region-box {
332
- display: flex;
333
- flex-wrap: wrap;
334
- width: 440px;
335
- &__item {
336
- margin: 0 5px;
337
- width: 100px;
338
- cursor: pointer;
339
- .text-overflow-cut();
340
- &:hover {
341
- color: @--primary-color;
342
- }
343
- &.actived {
344
- color: @--primary-color;
345
- }
346
- }
347
- }
348
- }
349
- // 40 32 24
350
- &--lg {
351
- }
352
- &--sm {
353
- padding: 15px 10px 5px !important;
354
- }
355
- }
356
-
357
- // fields-filter
358
- .@{prefix-form}-fields-filter {
359
- min-width: 160px;
360
- max-width: 220px;
361
- .reset {
362
- padding-bottom: 2px;
363
- margin-bottom: 4px;
364
- text-align: right;
365
- border-bottom: 1px solid @--border-color-secondary;
366
- .ant-btn-text {
367
- padding: 0 2px;
368
- }
369
- }
370
- .fields-list {
371
- padding: 4px @--padding-md;
372
- ul {
373
- margin: 0;
374
- li.item {
375
- line-height: 1.85;
376
- .text-overflow-cut();
377
- .handle {
378
- padding: 2px;
379
- color: @--text-color-placeholder;
380
- cursor: s-resize;
381
- transform: scale(0.9);
382
- }
383
- }
384
- }
385
- }
386
- &--lg {
387
- }
388
- &--sm {
389
- font-size: @--font-size-sm;
390
- }
391
- }
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2021-07-23 19:05:57
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2024-10-29 13:39:17
6
+ */
7
+ @import '../../style/common';
8
+
9
+ @prefix-form: ~'@{qm-prefix}-form';
10
+
11
+ .@{prefix-form} {
12
+ position: relative;
13
+ .ant-form-item {
14
+ margin-bottom: @--margin-md + 2px;
15
+ .ant-form-item-label {
16
+ & > label[title=''] {
17
+ width: 100%;
18
+ display: inline-flex;
19
+ justify-content: right;
20
+ .ant-select {
21
+ flex: auto;
22
+ width: 0;
23
+ text-align: left;
24
+ }
25
+ }
26
+ &-wrap {
27
+ line-height: 1.075;
28
+ }
29
+ &-left > label[title=''] {
30
+ justify-content: left;
31
+ }
32
+ }
33
+ // placeholder
34
+ input::placeholder {
35
+ text-align: left;
36
+ }
37
+ // ant-form-inline
38
+ &-with-help {
39
+ margin-bottom: @--margin-md + 2px;
40
+ }
41
+ // valigator
42
+ .ant-form-item-explain {
43
+ .text-overflow-cut();
44
+ display: flex;
45
+ gap: @--margin-md;
46
+ min-height: auto;
47
+ height: @--font-size-sm;
48
+ font-size: @--font-size-sm;
49
+ line-height: 1;
50
+ }
51
+ // search
52
+ .ant-input-search {
53
+ width: calc(100% + 1px);
54
+ & > .ant-input-group > .ant-input-group-addon {
55
+ line-height: 1;
56
+ }
57
+ }
58
+ // radio-group checkbox-group
59
+ .ant-radio-group,
60
+ .ant-checkbox-group {
61
+ display: inline-flex;
62
+ justify-content: flex-start;
63
+ flex-wrap: wrap;
64
+ row-gap: 4px;
65
+ .ant-radio-wrapper,
66
+ .ant-checkbox-wrapper {
67
+ margin: 0;
68
+ margin-right: 20px;
69
+ &:last-of-type {
70
+ margin-right: 0;
71
+ }
72
+ }
73
+ }
74
+ // textarea
75
+ .ant-input-textarea-show-count {
76
+ position: relative;
77
+ &::after {
78
+ position: absolute;
79
+ right: 3px;
80
+ bottom: 0;
81
+ margin: 0;
82
+ }
83
+ }
84
+ // input extra
85
+ .extra-tooltip {
86
+ color: @--text-color-secondary;
87
+ vertical-align: -0.4em;
88
+ transform: scale(1.2);
89
+ }
90
+ .extra-text {
91
+ height: 100%;
92
+ display: flex;
93
+ align-items: center;
94
+ }
95
+ .extra-overflow-cut {
96
+ .text-overflow-cut();
97
+ }
98
+ // select
99
+ .ant-select {
100
+ width: 100%;
101
+ }
102
+ // input number
103
+ .ant-input-number.right {
104
+ input {
105
+ text-align: right;
106
+ }
107
+ &.controls {
108
+ input {
109
+ padding-right: 30px;
110
+ }
111
+ }
112
+ }
113
+ // range input/input-number/search-helper
114
+ .site-input-left {
115
+ border-right-width: 0;
116
+ z-index: 1;
117
+ }
118
+ .site-input-left:hover,
119
+ .site-input-left:focus {
120
+ border-right-width: 1px;
121
+ }
122
+ .site-input-right {
123
+ border-left-width: 0;
124
+ &.ant-input-search .ant-input-affix-wrapper {
125
+ border-left-width: 0;
126
+ }
127
+ .ant-input-affix-wrapper {
128
+ border-top-left-radius: 0;
129
+ border-bottom-left-radius: 0;
130
+ }
131
+ }
132
+ .site-input-right:hover,
133
+ .site-input-right:focus {
134
+ border-left-width: 1px;
135
+ &.ant-input-search .ant-input-affix-wrapper {
136
+ border-left-width: 1px;
137
+ }
138
+ }
139
+ // search-helper-multiple
140
+ .search-helper-multiple {
141
+ .ant-input-group > .ant-select:first-child {
142
+ z-index: 1;
143
+ .ant-select-selector {
144
+ border-top-right-radius: 0;
145
+ border-bottom-right-radius: 0;
146
+ }
147
+ }
148
+ }
149
+ // select-multiple
150
+ .ant-select-multiple:not(.ant-select-disabled) {
151
+ .ant-select-selection-overflow-item-rest {
152
+ cursor: pointer;
153
+ * {
154
+ pointer-events: none;
155
+ }
156
+ }
157
+ }
158
+ }
159
+ .ant-form-vertical .ant-form-item {
160
+ .ant-form-item-label {
161
+ padding-bottom: 4px;
162
+ label[title=''] {
163
+ justify-content: left;
164
+ }
165
+ }
166
+ }
167
+ // ------ size ------
168
+ // 40 32 24
169
+ &--lg {
170
+ }
171
+ &--sm {
172
+ .ant-form-item {
173
+ margin-bottom: @--margin-md;
174
+ .ant-form-item-label {
175
+ &-wrap {
176
+ line-height: 1;
177
+ }
178
+ }
179
+ // valigator
180
+ .ant-form-item-control {
181
+ // 待优化
182
+ & > div:nth-last-of-type(1)[style*='nowrap'] {
183
+ transform: scale(0.8334);
184
+ transform-origin: 0 50%;
185
+ }
186
+ }
187
+ }
188
+ }
189
+ &__only-show {
190
+ // ...
191
+ }
192
+ &__compact {
193
+ .ant-form-item {
194
+ margin-bottom: 4px;
195
+ .ant-form-item-control {
196
+ & > div:nth-last-of-type(1)[style*='nowrap'] {
197
+ display: none !important;
198
+ }
199
+ }
200
+ }
201
+ }
202
+ }
203
+
204
+ .ant-picker-footer-extra {
205
+ .ant-tag {
206
+ cursor: pointer;
207
+ }
208
+ }
209
+
210
+ // immediate
211
+ .@{prefix-form}-immediate {
212
+ padding: 5px 15px;
213
+ overflow-y: auto !important;
214
+ .table {
215
+ width: 100%;
216
+ th,
217
+ td {
218
+ height: 32px;
219
+ text-align: left;
220
+ border-bottom: 1px solid @--border-color-secondary;
221
+ }
222
+ tbody {
223
+ tr td {
224
+ cursor: pointer;
225
+ }
226
+ tr:hover,
227
+ tr.active {
228
+ background-color: @--primary-1;
229
+ }
230
+ }
231
+ }
232
+ // 40 32 24
233
+ &--lg {
234
+ .table {
235
+ th,
236
+ td {
237
+ height: 40px;
238
+ }
239
+ }
240
+ }
241
+ &--sm {
242
+ padding: 5px 10px !important;
243
+ .table {
244
+ th,
245
+ td {
246
+ height: 24px;
247
+ }
248
+ }
249
+ }
250
+ }
251
+
252
+ // city-select
253
+ .@{prefix-form}-city-select {
254
+ padding: 15px 15px 10px;
255
+ max-width: 420px;
256
+ .container {
257
+ .city-drop {
258
+ &-toper {
259
+ margin-bottom: 10px;
260
+ display: flex;
261
+ &__type {
262
+ display: inline-block;
263
+ }
264
+ &__search {
265
+ margin-left: 10px;
266
+ }
267
+ }
268
+ &-letter {
269
+ display: flex;
270
+ flex-wrap: wrap;
271
+ margin-bottom: 4px;
272
+ .tag {
273
+ list-style: none;
274
+ line-height: 1.75;
275
+ font-size: @--font-size-sm;
276
+ padding: 0 8px;
277
+ margin: 0 4px 4px 0;
278
+ border: 1px solid @--border-color-secondary;
279
+ border-radius: 2px;
280
+ cursor: pointer;
281
+ &.actived {
282
+ color: @--white;
283
+ background-color: @--primary-color;
284
+ border-color: @--primary-color;
285
+ }
286
+ }
287
+ }
288
+ &-list {
289
+ margin-right: -2px;
290
+ max-height: 350px;
291
+ overflow-y: auto;
292
+ dl {
293
+ margin: 0;
294
+ dt {
295
+ float: left;
296
+ font-weight: 700;
297
+ }
298
+ dd {
299
+ white-space: normal;
300
+ margin-inline-start: 50px;
301
+ margin-bottom: 8px;
302
+ li {
303
+ display: inline-block;
304
+ margin-right: 8px;
305
+ cursor: pointer;
306
+ &:hover {
307
+ color: @--primary-color;
308
+ }
309
+ &.actived {
310
+ color: @--primary-color;
311
+ }
312
+ }
313
+ }
314
+ }
315
+ }
316
+ }
317
+ }
318
+ // 40 32 24
319
+ &--lg {
320
+ }
321
+ &--sm {
322
+ padding: 10px 10px 5px !important;
323
+ }
324
+ }
325
+
326
+ // region-select
327
+ .@{prefix-form}-region-select {
328
+ padding: 10px 15px;
329
+ .container {
330
+ margin-top: -10px;
331
+ .region-box {
332
+ display: flex;
333
+ flex-wrap: wrap;
334
+ width: 440px;
335
+ &__item {
336
+ margin: 0 5px;
337
+ width: 100px;
338
+ cursor: pointer;
339
+ .text-overflow-cut();
340
+ &:hover {
341
+ color: @--primary-color;
342
+ }
343
+ &.actived {
344
+ color: @--primary-color;
345
+ }
346
+ }
347
+ }
348
+ }
349
+ // 40 32 24
350
+ &--lg {
351
+ }
352
+ &--sm {
353
+ padding: 15px 10px 5px !important;
354
+ }
355
+ }
356
+
357
+ // fields-filter
358
+ .@{prefix-form}-fields-filter {
359
+ min-width: 160px;
360
+ max-width: 220px;
361
+ .reset {
362
+ padding-bottom: 2px;
363
+ margin-bottom: 4px;
364
+ text-align: right;
365
+ border-bottom: 1px solid @--border-color-secondary;
366
+ .ant-btn-text {
367
+ padding: 0 2px;
368
+ }
369
+ }
370
+ .fields-list {
371
+ padding: 4px @--padding-md;
372
+ ul {
373
+ margin: 0;
374
+ li.item {
375
+ line-height: 1.85;
376
+ .text-overflow-cut();
377
+ .handle {
378
+ padding: 2px;
379
+ color: @--text-color-placeholder;
380
+ cursor: s-resize;
381
+ transform: scale(0.9);
382
+ }
383
+ }
384
+ }
385
+ }
386
+ &--lg {
387
+ }
388
+ &--sm {
389
+ font-size: @--font-size-sm;
390
+ }
391
+ }