@jiaozhiye/qm-design-react 1.10.14 → 1.10.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,381 +1,381 @@
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
- // ------ size ------
160
- // 40 32 24
161
- &--lg {
162
- }
163
- &--sm {
164
- .ant-form-item {
165
- margin-bottom: @--margin-md;
166
- .ant-form-item-label {
167
- &-wrap {
168
- line-height: 1;
169
- }
170
- }
171
- // valigator
172
- .ant-form-item-control {
173
- // 待优化
174
- & > div:nth-last-of-type(1)[style*='nowrap'] {
175
- transform: scale(0.8334);
176
- transform-origin: 0 50%;
177
- }
178
- }
179
- }
180
- }
181
- &__only-show {
182
- // ...
183
- }
184
- &__compact {
185
- .ant-form-item {
186
- margin-bottom: 4px;
187
- .ant-form-item-control {
188
- & > div:nth-last-of-type(1)[style*='nowrap'] {
189
- display: none !important;
190
- }
191
- }
192
- }
193
- }
194
- }
195
-
196
- .ant-picker-footer-extra {
197
- .ant-tag {
198
- cursor: pointer;
199
- }
200
- }
201
-
202
- // immediate
203
- .@{prefix-form}-immediate {
204
- padding: 5px 15px;
205
- overflow-y: auto !important;
206
- .table {
207
- width: 100%;
208
- th,
209
- td {
210
- height: 32px;
211
- text-align: left;
212
- border-bottom: 1px solid @--border-color-secondary;
213
- }
214
- tbody {
215
- tr td {
216
- cursor: pointer;
217
- }
218
- tr:hover,
219
- tr.active {
220
- background-color: @--primary-1;
221
- }
222
- }
223
- }
224
- // 40 32 24
225
- &--lg {
226
- .table {
227
- th,
228
- td {
229
- height: 40px;
230
- }
231
- }
232
- }
233
- &--sm {
234
- padding: 5px 10px !important;
235
- .table {
236
- th,
237
- td {
238
- height: 24px;
239
- }
240
- }
241
- }
242
- }
243
-
244
- // city-select
245
- .@{prefix-form}-city-select {
246
- padding: 15px 15px 10px;
247
- max-width: 420px;
248
- .container {
249
- .city-drop {
250
- &-toper {
251
- margin-bottom: 10px;
252
- display: flex;
253
- &__type {
254
- display: inline-block;
255
- }
256
- &__search {
257
- margin-left: 10px;
258
- }
259
- }
260
- &-letter {
261
- display: flex;
262
- flex-wrap: wrap;
263
- margin-bottom: 4px;
264
- .tag {
265
- list-style: none;
266
- line-height: 1.75;
267
- font-size: @--font-size-sm;
268
- padding: 0 8px;
269
- margin: 0 4px 4px 0;
270
- border: 1px solid @--border-color-secondary;
271
- border-radius: 2px;
272
- cursor: pointer;
273
- &.actived {
274
- color: @--white;
275
- background-color: @--primary-color;
276
- border-color: @--primary-color;
277
- }
278
- }
279
- }
280
- &-list {
281
- margin-right: -2px;
282
- max-height: 350px;
283
- overflow-y: auto;
284
- dl {
285
- margin: 0;
286
- dt {
287
- float: left;
288
- font-weight: 700;
289
- }
290
- dd {
291
- white-space: normal;
292
- margin-inline-start: 50px;
293
- margin-bottom: 8px;
294
- li {
295
- display: inline-block;
296
- margin-right: 8px;
297
- cursor: pointer;
298
- &:hover {
299
- color: @--primary-color;
300
- }
301
- &.actived {
302
- color: @--primary-color;
303
- }
304
- }
305
- }
306
- }
307
- }
308
- }
309
- }
310
- // 40 32 24
311
- &--lg {
312
- }
313
- &--sm {
314
- padding: 10px 10px 5px !important;
315
- }
316
- }
317
-
318
- // region-select
319
- .@{prefix-form}-region-select {
320
- padding: 10px 15px;
321
- .container {
322
- margin-top: -10px;
323
- .region-box {
324
- display: flex;
325
- flex-wrap: wrap;
326
- width: 440px;
327
- &__item {
328
- margin: 0 5px;
329
- width: 100px;
330
- cursor: pointer;
331
- .text-overflow-cut();
332
- &:hover {
333
- color: @--primary-color;
334
- }
335
- &.actived {
336
- color: @--primary-color;
337
- }
338
- }
339
- }
340
- }
341
- // 40 32 24
342
- &--lg {
343
- }
344
- &--sm {
345
- padding: 15px 10px 5px !important;
346
- }
347
- }
348
-
349
- // fields-filter
350
- .@{prefix-form}-fields-filter {
351
- .reset {
352
- padding-bottom: 2px;
353
- margin-bottom: 4px;
354
- text-align: right;
355
- border-bottom: 1px solid @--border-color-secondary;
356
- .ant-btn-text {
357
- padding: 0 2px;
358
- }
359
- }
360
- .fields-list {
361
- padding: 4px @--padding-md;
362
- ul {
363
- margin: 0;
364
- li.item {
365
- line-height: 1.75;
366
- .text-overflow-cut();
367
- .handle {
368
- padding: 2px;
369
- color: @--text-color-placeholder;
370
- cursor: s-resize;
371
- transform: scale(0.9);
372
- }
373
- }
374
- }
375
- }
376
- &--lg {
377
- }
378
- &--sm {
379
- font-size: @--font-size-sm;
380
- }
381
- }
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
+ // ------ size ------
160
+ // 40 32 24
161
+ &--lg {
162
+ }
163
+ &--sm {
164
+ .ant-form-item {
165
+ margin-bottom: @--margin-md;
166
+ .ant-form-item-label {
167
+ &-wrap {
168
+ line-height: 1;
169
+ }
170
+ }
171
+ // valigator
172
+ .ant-form-item-control {
173
+ // 待优化
174
+ & > div:nth-last-of-type(1)[style*='nowrap'] {
175
+ transform: scale(0.8334);
176
+ transform-origin: 0 50%;
177
+ }
178
+ }
179
+ }
180
+ }
181
+ &__only-show {
182
+ // ...
183
+ }
184
+ &__compact {
185
+ .ant-form-item {
186
+ margin-bottom: 4px;
187
+ .ant-form-item-control {
188
+ & > div:nth-last-of-type(1)[style*='nowrap'] {
189
+ display: none !important;
190
+ }
191
+ }
192
+ }
193
+ }
194
+ }
195
+
196
+ .ant-picker-footer-extra {
197
+ .ant-tag {
198
+ cursor: pointer;
199
+ }
200
+ }
201
+
202
+ // immediate
203
+ .@{prefix-form}-immediate {
204
+ padding: 5px 15px;
205
+ overflow-y: auto !important;
206
+ .table {
207
+ width: 100%;
208
+ th,
209
+ td {
210
+ height: 32px;
211
+ text-align: left;
212
+ border-bottom: 1px solid @--border-color-secondary;
213
+ }
214
+ tbody {
215
+ tr td {
216
+ cursor: pointer;
217
+ }
218
+ tr:hover,
219
+ tr.active {
220
+ background-color: @--primary-1;
221
+ }
222
+ }
223
+ }
224
+ // 40 32 24
225
+ &--lg {
226
+ .table {
227
+ th,
228
+ td {
229
+ height: 40px;
230
+ }
231
+ }
232
+ }
233
+ &--sm {
234
+ padding: 5px 10px !important;
235
+ .table {
236
+ th,
237
+ td {
238
+ height: 24px;
239
+ }
240
+ }
241
+ }
242
+ }
243
+
244
+ // city-select
245
+ .@{prefix-form}-city-select {
246
+ padding: 15px 15px 10px;
247
+ max-width: 420px;
248
+ .container {
249
+ .city-drop {
250
+ &-toper {
251
+ margin-bottom: 10px;
252
+ display: flex;
253
+ &__type {
254
+ display: inline-block;
255
+ }
256
+ &__search {
257
+ margin-left: 10px;
258
+ }
259
+ }
260
+ &-letter {
261
+ display: flex;
262
+ flex-wrap: wrap;
263
+ margin-bottom: 4px;
264
+ .tag {
265
+ list-style: none;
266
+ line-height: 1.75;
267
+ font-size: @--font-size-sm;
268
+ padding: 0 8px;
269
+ margin: 0 4px 4px 0;
270
+ border: 1px solid @--border-color-secondary;
271
+ border-radius: 2px;
272
+ cursor: pointer;
273
+ &.actived {
274
+ color: @--white;
275
+ background-color: @--primary-color;
276
+ border-color: @--primary-color;
277
+ }
278
+ }
279
+ }
280
+ &-list {
281
+ margin-right: -2px;
282
+ max-height: 350px;
283
+ overflow-y: auto;
284
+ dl {
285
+ margin: 0;
286
+ dt {
287
+ float: left;
288
+ font-weight: 700;
289
+ }
290
+ dd {
291
+ white-space: normal;
292
+ margin-inline-start: 50px;
293
+ margin-bottom: 8px;
294
+ li {
295
+ display: inline-block;
296
+ margin-right: 8px;
297
+ cursor: pointer;
298
+ &:hover {
299
+ color: @--primary-color;
300
+ }
301
+ &.actived {
302
+ color: @--primary-color;
303
+ }
304
+ }
305
+ }
306
+ }
307
+ }
308
+ }
309
+ }
310
+ // 40 32 24
311
+ &--lg {
312
+ }
313
+ &--sm {
314
+ padding: 10px 10px 5px !important;
315
+ }
316
+ }
317
+
318
+ // region-select
319
+ .@{prefix-form}-region-select {
320
+ padding: 10px 15px;
321
+ .container {
322
+ margin-top: -10px;
323
+ .region-box {
324
+ display: flex;
325
+ flex-wrap: wrap;
326
+ width: 440px;
327
+ &__item {
328
+ margin: 0 5px;
329
+ width: 100px;
330
+ cursor: pointer;
331
+ .text-overflow-cut();
332
+ &:hover {
333
+ color: @--primary-color;
334
+ }
335
+ &.actived {
336
+ color: @--primary-color;
337
+ }
338
+ }
339
+ }
340
+ }
341
+ // 40 32 24
342
+ &--lg {
343
+ }
344
+ &--sm {
345
+ padding: 15px 10px 5px !important;
346
+ }
347
+ }
348
+
349
+ // fields-filter
350
+ .@{prefix-form}-fields-filter {
351
+ .reset {
352
+ padding-bottom: 2px;
353
+ margin-bottom: 4px;
354
+ text-align: right;
355
+ border-bottom: 1px solid @--border-color-secondary;
356
+ .ant-btn-text {
357
+ padding: 0 2px;
358
+ }
359
+ }
360
+ .fields-list {
361
+ padding: 4px @--padding-md;
362
+ ul {
363
+ margin: 0;
364
+ li.item {
365
+ line-height: 1.75;
366
+ .text-overflow-cut();
367
+ .handle {
368
+ padding: 2px;
369
+ color: @--text-color-placeholder;
370
+ cursor: s-resize;
371
+ transform: scale(0.9);
372
+ }
373
+ }
374
+ }
375
+ }
376
+ &--lg {
377
+ }
378
+ &--sm {
379
+ font-size: @--font-size-sm;
380
+ }
381
+ }