@jiaozhiye/qm-design-react 1.12.23 → 1.12.24

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