@jiaozhiye/qm-design-react 1.7.59 → 1.7.60

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