@neatui/css 1.0.16 → 1.0.18

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.
Files changed (3) hide show
  1. package/core/flex.scss +569 -568
  2. package/core/package.json +1 -1
  3. package/package.json +1 -1
package/core/flex.scss CHANGED
@@ -11,290 +11,290 @@
11
11
  flex-direction: column;
12
12
  }
13
13
 
14
- .flex {
15
- // 行列
16
- &-row {
17
- &-lt {
18
- @extend %row;
19
- justify-content: flex-start;
20
- align-items: flex-start;
21
- align-content: flex-start;
22
- }
23
-
24
- &-ct {
25
- @extend %row;
26
- justify-content: center;
27
- align-items: flex-start;
28
- align-content: flex-start;
29
- }
30
-
31
- &-rt {
32
- @extend %row;
33
- justify-content: flex-end;
34
- align-items: flex-start;
35
- align-content: flex-start;
36
- }
37
-
38
- &-xt {
39
- @extend %row;
40
- justify-content: space-between;
41
- align-items: flex-start;
42
- align-content: flex-start;
43
- }
44
- &-at {
45
- @extend %row;
46
- justify-content: space-around;
47
- align-items: flex-start;
48
- align-content: flex-start;
49
- }
50
-
51
- &-lm {
52
- @extend %row;
53
- justify-content: flex-start;
54
- align-items: center;
55
- align-content: center;
56
- }
57
-
58
- &-cm {
59
- @extend %row;
60
- justify-content: center;
61
- align-items: center;
62
- align-content: center;
63
- }
64
-
65
- &-rm {
66
- @extend %row;
67
- justify-content: flex-end;
68
- align-items: center;
69
- align-content: center;
70
- }
71
-
72
- &-xm {
73
- @extend %row;
74
- justify-content: space-between;
75
- align-items: center;
76
- align-content: center;
77
- }
78
-
79
- &-am {
80
- @extend %row;
81
- justify-content: space-around;
82
- align-items: center;
83
- align-content: center;
84
- }
85
-
86
- &-lb {
87
- @extend %row;
88
- justify-content: flex-start;
89
- align-items: flex-end;
90
- align-content: flex-end;
91
- }
92
-
93
- &-cb {
94
- @extend %row;
95
- justify-content: center;
96
- align-items: flex-end;
97
- align-content: flex-end;
98
- }
99
-
100
- &-rb {
101
- @extend %row;
102
- justify-content: flex-end;
103
- align-items: flex-end;
104
- align-content: flex-end;
105
- }
106
-
107
- &-ry {
108
- @extend %row;
109
- justify-content: flex-end;
110
- align-items: stretch;
111
- align-content: space-between;
112
- }
113
-
114
- &-xb {
115
- @extend %row;
116
- justify-content: space-between;
117
- align-items: flex-end;
118
- align-content: flex-end;
119
- }
120
-
121
- &-ab {
122
- @extend %row;
123
- justify-content: space-around;
124
- align-items: flex-end;
125
- align-content: flex-end;
126
- }
127
- }
128
- &-col {
129
- &-lt {
130
- @extend %col;
131
- justify-content: flex-start;
132
- align-items: flex-start;
133
- align-content: flex-start;
134
- }
135
-
136
- &-ct {
137
- @extend %col;
138
- justify-content: flex-start;
139
- align-items: center;
140
- align-content: center;
141
- }
142
-
143
- &-rt {
144
- @extend %col;
145
- justify-content: flex-start;
146
- align-items: flex-end;
147
- align-content: flex-end;
148
- }
149
-
150
- &-xt {
151
- @extend %col;
152
- justify-content: flex-start;
153
- align-items: stretch;
154
- align-content: stretch;
155
- }
156
- &-at {
157
- @extend %col;
158
- justify-content: flex-start;
159
- align-items: space-around;
160
- align-content: space-around;
161
- }
162
-
163
- &-lm {
164
- @extend %col;
165
- justify-content: center;
166
- align-items: flex-start;
167
- align-content: flex-start;
168
- }
169
-
170
- &-cm {
171
- @extend %col;
172
- justify-content: center;
173
- align-items: center;
174
- align-content: center;
175
- }
176
-
177
- &-rm {
178
- @extend %col;
179
- justify-content: center;
180
- align-items: flex-end;
181
- align-content: flex-end;
182
- }
183
-
184
- &-xm {
185
- @extend %col;
186
- justify-content: center;
187
- align-items: stretch;
188
- align-content: stretch;
189
- }
190
- &-am {
191
- @extend %col;
192
- justify-content: center;
193
- align-items: space-around;
194
- align-content: space-around;
195
- }
196
-
197
- &-lb {
198
- @extend %col;
199
- justify-content: flex-end;
200
- align-items: flex-start;
201
- align-content: flex-start;
202
- }
203
-
204
- &-cb {
205
- @extend %col;
206
- justify-content: flex-end;
207
- align-items: center;
208
- align-content: center;
209
- }
210
-
211
- &-rb {
212
- @extend %col;
213
- justify-content: flex-end;
214
- align-items: flex-end;
215
- align-content: flex-end;
216
- }
217
-
218
- &-xb {
219
- @extend %col;
220
- justify-content: flex-end;
221
- align-items: stretch;
222
- align-content: stretch;
223
- }
224
- &-ab {
225
- @extend %col;
226
- justify-content: flex-end;
227
- align-items: space-around;
228
- align-content: space-around;
229
- }
230
-
231
- &-ly {
232
- @extend %col;
233
- justify-content: space-between;
234
- align-items: flex-start;
235
- align-content: flex-start;
236
- }
237
- &-la {
238
- @extend %col;
239
- justify-content: space-around;
240
- align-items: flex-start;
241
- align-content: flex-start;
242
- }
243
-
244
- &-cy {
245
- @extend %col;
246
- justify-content: space-between;
247
- align-items: center;
248
- align-content: center;
249
- }
250
- &-ca {
251
- @extend %col;
252
- justify-content: space-around;
253
- align-items: center;
254
- align-content: center;
255
- }
256
- &-ry {
257
- @extend %col;
258
- justify-content: space-between;
259
- align-items: flex-end;
260
- align-content: flex-end;
261
- }
262
- &-ra {
263
- @extend %col;
264
- justify-content: space-around;
265
- align-items: flex-end;
266
- align-content: flex-end;
267
- }
268
- &-xy {
269
- @extend %col;
270
- justify-content: space-between;
271
- align-items: stretch;
272
- align-content: space-between;
273
- }
274
- &-aa {
275
- @extend %col;
276
- justify-content: space-around;
277
- align-items: space-around;
278
- align-content: space-around;
279
- }
280
- }
281
-
282
- // 撑满
283
- &-full {
284
- & > * {
285
- flex-grow: 1;
286
- }
287
- }
288
-
289
- // 行内
290
- &-inline {
291
- display: inline-flex !important;
292
- }
293
-
294
- & > * {
295
- position: relative !important;
296
- }
297
- }
14
+ // .flex {
15
+ // // 行列
16
+ // &-row {
17
+ // &-lt {
18
+ // @extend %row;
19
+ // justify-content: flex-start;
20
+ // align-items: flex-start;
21
+ // align-content: flex-start;
22
+ // }
23
+
24
+ // &-ct {
25
+ // @extend %row;
26
+ // justify-content: center;
27
+ // align-items: flex-start;
28
+ // align-content: flex-start;
29
+ // }
30
+
31
+ // &-rt {
32
+ // @extend %row;
33
+ // justify-content: flex-end;
34
+ // align-items: flex-start;
35
+ // align-content: flex-start;
36
+ // }
37
+
38
+ // &-xt {
39
+ // @extend %row;
40
+ // justify-content: space-between;
41
+ // align-items: flex-start;
42
+ // align-content: flex-start;
43
+ // }
44
+ // &-at {
45
+ // @extend %row;
46
+ // justify-content: space-around;
47
+ // align-items: flex-start;
48
+ // align-content: flex-start;
49
+ // }
50
+
51
+ // &-lm {
52
+ // @extend %row;
53
+ // justify-content: flex-start;
54
+ // align-items: center;
55
+ // align-content: center;
56
+ // }
57
+
58
+ // &-cm {
59
+ // @extend %row;
60
+ // justify-content: center;
61
+ // align-items: center;
62
+ // align-content: center;
63
+ // }
64
+
65
+ // &-rm {
66
+ // @extend %row;
67
+ // justify-content: flex-end;
68
+ // align-items: center;
69
+ // align-content: center;
70
+ // }
71
+
72
+ // &-xm {
73
+ // @extend %row;
74
+ // justify-content: space-between;
75
+ // align-items: center;
76
+ // align-content: center;
77
+ // }
78
+
79
+ // &-am {
80
+ // @extend %row;
81
+ // justify-content: space-around;
82
+ // align-items: center;
83
+ // align-content: center;
84
+ // }
85
+
86
+ // &-lb {
87
+ // @extend %row;
88
+ // justify-content: flex-start;
89
+ // align-items: flex-end;
90
+ // align-content: flex-end;
91
+ // }
92
+
93
+ // &-cb {
94
+ // @extend %row;
95
+ // justify-content: center;
96
+ // align-items: flex-end;
97
+ // align-content: flex-end;
98
+ // }
99
+
100
+ // &-rb {
101
+ // @extend %row;
102
+ // justify-content: flex-end;
103
+ // align-items: flex-end;
104
+ // align-content: flex-end;
105
+ // }
106
+
107
+ // &-ry {
108
+ // @extend %row;
109
+ // justify-content: flex-end;
110
+ // align-items: stretch;
111
+ // align-content: space-between;
112
+ // }
113
+
114
+ // &-xb {
115
+ // @extend %row;
116
+ // justify-content: space-between;
117
+ // align-items: flex-end;
118
+ // align-content: flex-end;
119
+ // }
120
+
121
+ // &-ab {
122
+ // @extend %row;
123
+ // justify-content: space-around;
124
+ // align-items: flex-end;
125
+ // align-content: flex-end;
126
+ // }
127
+ // }
128
+ // &-col {
129
+ // &-lt {
130
+ // @extend %col;
131
+ // justify-content: flex-start;
132
+ // align-items: flex-start;
133
+ // align-content: flex-start;
134
+ // }
135
+
136
+ // &-ct {
137
+ // @extend %col;
138
+ // justify-content: flex-start;
139
+ // align-items: center;
140
+ // align-content: center;
141
+ // }
142
+
143
+ // &-rt {
144
+ // @extend %col;
145
+ // justify-content: flex-start;
146
+ // align-items: flex-end;
147
+ // align-content: flex-end;
148
+ // }
149
+
150
+ // &-xt {
151
+ // @extend %col;
152
+ // justify-content: flex-start;
153
+ // align-items: stretch;
154
+ // align-content: stretch;
155
+ // }
156
+ // &-at {
157
+ // @extend %col;
158
+ // justify-content: flex-start;
159
+ // align-items: space-around;
160
+ // align-content: space-around;
161
+ // }
162
+
163
+ // &-lm {
164
+ // @extend %col;
165
+ // justify-content: center;
166
+ // align-items: flex-start;
167
+ // align-content: flex-start;
168
+ // }
169
+
170
+ // &-cm {
171
+ // @extend %col;
172
+ // justify-content: center;
173
+ // align-items: center;
174
+ // align-content: center;
175
+ // }
176
+
177
+ // &-rm {
178
+ // @extend %col;
179
+ // justify-content: center;
180
+ // align-items: flex-end;
181
+ // align-content: flex-end;
182
+ // }
183
+
184
+ // &-xm {
185
+ // @extend %col;
186
+ // justify-content: center;
187
+ // align-items: stretch;
188
+ // align-content: stretch;
189
+ // }
190
+ // &-am {
191
+ // @extend %col;
192
+ // justify-content: center;
193
+ // align-items: space-around;
194
+ // align-content: space-around;
195
+ // }
196
+
197
+ // &-lb {
198
+ // @extend %col;
199
+ // justify-content: flex-end;
200
+ // align-items: flex-start;
201
+ // align-content: flex-start;
202
+ // }
203
+
204
+ // &-cb {
205
+ // @extend %col;
206
+ // justify-content: flex-end;
207
+ // align-items: center;
208
+ // align-content: center;
209
+ // }
210
+
211
+ // &-rb {
212
+ // @extend %col;
213
+ // justify-content: flex-end;
214
+ // align-items: flex-end;
215
+ // align-content: flex-end;
216
+ // }
217
+
218
+ // &-xb {
219
+ // @extend %col;
220
+ // justify-content: flex-end;
221
+ // align-items: stretch;
222
+ // align-content: stretch;
223
+ // }
224
+ // &-ab {
225
+ // @extend %col;
226
+ // justify-content: flex-end;
227
+ // align-items: space-around;
228
+ // align-content: space-around;
229
+ // }
230
+
231
+ // &-ly {
232
+ // @extend %col;
233
+ // justify-content: space-between;
234
+ // align-items: flex-start;
235
+ // align-content: flex-start;
236
+ // }
237
+ // &-la {
238
+ // @extend %col;
239
+ // justify-content: space-around;
240
+ // align-items: flex-start;
241
+ // align-content: flex-start;
242
+ // }
243
+
244
+ // &-cy {
245
+ // @extend %col;
246
+ // justify-content: space-between;
247
+ // align-items: center;
248
+ // align-content: center;
249
+ // }
250
+ // &-ca {
251
+ // @extend %col;
252
+ // justify-content: space-around;
253
+ // align-items: center;
254
+ // align-content: center;
255
+ // }
256
+ // &-ry {
257
+ // @extend %col;
258
+ // justify-content: space-between;
259
+ // align-items: flex-end;
260
+ // align-content: flex-end;
261
+ // }
262
+ // &-ra {
263
+ // @extend %col;
264
+ // justify-content: space-around;
265
+ // align-items: flex-end;
266
+ // align-content: flex-end;
267
+ // }
268
+ // &-xy {
269
+ // @extend %col;
270
+ // justify-content: space-between;
271
+ // align-items: stretch;
272
+ // align-content: space-between;
273
+ // }
274
+ // &-aa {
275
+ // @extend %col;
276
+ // justify-content: space-around;
277
+ // align-items: space-around;
278
+ // align-content: space-around;
279
+ // }
280
+ // }
281
+
282
+ // // 撑满
283
+ // &-full {
284
+ // & > * {
285
+ // flex-grow: 1;
286
+ // }
287
+ // }
288
+
289
+ // // 行内
290
+ // &-inline {
291
+ // display: inline-flex !important;
292
+ // }
293
+
294
+ // & > * {
295
+ // position: relative !important;
296
+ // }
297
+ // }
298
298
 
299
299
  .flex-nowrap {
300
300
  flex-wrap: nowrap;
@@ -312,6 +312,11 @@
312
312
  overflow: hidden;
313
313
  }
314
314
 
315
+ // 行内
316
+ .flex-inline {
317
+ display: inline-flex !important;
318
+ }
319
+
315
320
  [ui-flex] {
316
321
  display: flex;
317
322
 
@@ -323,294 +328,290 @@
323
328
  flex-wrap: wrap;
324
329
  }
325
330
 
331
+ &[ui-flex~=':block'] > * {
332
+ flex: 1;
333
+ overflow: hidden;
334
+ }
335
+
326
336
  &[ui-flex~=':fixed'] > * {
327
337
  flex-grow: 0;
328
338
  flex-shrink: 0;
329
339
  }
340
+ }
341
+
342
+ [ui-flex~='row'] {
343
+ flex-direction: row;
344
+
345
+ // 等分
346
+ &[ui-flex~='ew:1'] > * {
347
+ width: 100%;
348
+ }
349
+ &[ui-flex~='ew:2'] > * {
350
+ width: 50%;
351
+ }
352
+ &[ui-flex~='ew:3'] > * {
353
+ width: 33.333333%;
354
+ }
355
+ &[ui-flex~='ew:4'] > * {
356
+ width: 25%;
357
+ }
358
+ &[ui-flex~='ew:5'] > * {
359
+ width: 20%;
360
+ }
361
+ &[ui-flex~='ew:6'] > * {
362
+ width: 16.666666%;
363
+ }
364
+ &[ui-flex~='ew:7'] > * {
365
+ width: 14.285714%;
366
+ }
367
+ &[ui-flex~='ew:8'] > * {
368
+ width: 12.5%;
369
+ }
370
+ &[ui-flex~='ew:9'] > * {
371
+ width: 11.111111%;
372
+ }
373
+
374
+ // 对齐
375
+ &[ui-flex~='lt'] {
376
+ justify-content: flex-start;
377
+ align-items: flex-start;
378
+ align-content: flex-start;
379
+ }
380
+
381
+ &[ui-flex~='ct'] {
382
+ justify-content: flex-start;
383
+ align-items: center;
384
+ align-content: flex-start;
385
+ }
386
+
387
+ &[ui-flex~='rt'] {
388
+ justify-content: flex-end;
389
+ align-items: flex-start;
390
+ align-content: flex-start;
391
+ }
392
+
393
+ &[ui-flex~='xt'] {
394
+ justify-content: space-between;
395
+ align-items: flex-start;
396
+ align-content: flex-start;
397
+ }
398
+ &[ui-flex~='at'] {
399
+ justify-content: space-around;
400
+ align-items: flex-start;
401
+ align-content: flex-start;
402
+ }
403
+
404
+ &[ui-flex~='lm'] {
405
+ justify-content: flex-start;
406
+ align-items: center;
407
+ align-content: center;
408
+ }
409
+
410
+ &[ui-flex~='cm'] {
411
+ justify-content: center;
412
+ align-items: center;
413
+ align-content: center;
414
+ }
415
+
416
+ &[ui-flex~='rm'] {
417
+ justify-content: flex-end;
418
+ align-items: center;
419
+ align-content: center;
420
+ }
421
+
422
+ &[ui-flex~='xm'] {
423
+ justify-content: space-between;
424
+ align-items: center;
425
+ align-content: center;
426
+ }
427
+
428
+ &[ui-flex~='am'] {
429
+ justify-content: space-around;
430
+ align-items: center;
431
+ align-content: center;
432
+ }
433
+
434
+ &[ui-flex~='lb'] {
435
+ justify-content: flex-start;
436
+ align-items: flex-end;
437
+ align-content: flex-end;
438
+ }
439
+
440
+ &[ui-flex~='cb'] {
441
+ justify-content: center;
442
+ align-items: flex-end;
443
+ align-content: flex-end;
444
+ }
445
+
446
+ &[ui-flex~='rb'] {
447
+ justify-content: flex-end;
448
+ align-items: flex-end;
449
+ align-content: flex-end;
450
+ }
330
451
 
331
- &[ui-flex~='row'] {
332
- flex-direction: row;
333
-
334
- // 等分
335
- &[ui-flex~='ew:1'] > * {
336
- width: 100%;
337
- }
338
- &[ui-flex~='ew:2'] > * {
339
- width: 50%;
340
- }
341
- &[ui-flex~='ew:3'] > * {
342
- width: 33.333333%;
343
- }
344
- &[ui-flex~='ew:4'] > * {
345
- width: 25%;
346
- }
347
- &[ui-flex~='ew:5'] > * {
348
- width: 20%;
349
- }
350
- &[ui-flex~='ew:6'] > * {
351
- width: 16.666666%;
352
- }
353
- &[ui-flex~='ew:7'] > * {
354
- width: 14.285714%;
355
- }
356
- &[ui-flex~='ew:8'] > * {
357
- width: 12.5%;
358
- }
359
- &[ui-flex~='ew:9'] > * {
360
- width: 11.111111%;
361
- }
362
-
363
- // 对齐
364
- &[ui-flex~='lt'] {
365
- justify-content: flex-start;
366
- align-items: flex-start;
367
- align-content: flex-start;
368
- }
369
-
370
- &[ui-flex~='ct'] {
371
- justify-content: center;
372
- align-items: flex-start;
373
- align-content: flex-start;
374
- }
375
-
376
- &[ui-flex~='rt'] {
377
- justify-content: flex-end;
378
- align-items: flex-start;
379
- align-content: flex-start;
380
- }
381
-
382
- &[ui-flex~='xt'] {
383
- justify-content: space-between;
384
- align-items: flex-start;
385
- align-content: flex-start;
386
- }
387
- &[ui-flex~='at'] {
388
- justify-content: space-around;
389
- align-items: flex-start;
390
- align-content: flex-start;
391
- }
392
-
393
- &[ui-flex~='lm'] {
394
- justify-content: flex-start;
395
- align-items: center;
396
- align-content: center;
397
- }
398
-
399
- &[ui-flex~='cm'] {
400
- justify-content: center;
401
- align-items: center;
402
- align-content: center;
403
- }
404
-
405
- &[ui-flex~='rm'] {
406
- justify-content: flex-end;
407
- align-items: center;
408
- align-content: center;
409
- }
410
-
411
- &[ui-flex~='xm'] {
412
- justify-content: space-between;
413
- align-items: center;
414
- align-content: center;
415
- }
416
-
417
- &[ui-flex~='am'] {
418
- justify-content: space-around;
419
- align-items: center;
420
- align-content: center;
421
- }
422
-
423
- &[ui-flex~='lb'] {
424
- justify-content: flex-start;
425
- align-items: flex-end;
426
- align-content: flex-end;
427
- }
428
-
429
- &[ui-flex~='cb'] {
430
- justify-content: center;
431
- align-items: flex-end;
432
- align-content: flex-end;
433
- }
434
-
435
- &[ui-flex~='rb'] {
436
- justify-content: flex-end;
437
- align-items: flex-end;
438
- align-content: flex-end;
439
- }
440
-
441
- &[ui-flex~='ry'] {
442
- justify-content: flex-end;
443
- align-items: stretch;
444
- align-content: space-between;
445
- }
446
-
447
- &[ui-flex~='xb'] {
448
- justify-content: space-between;
449
- align-items: flex-end;
450
- align-content: flex-end;
451
- }
452
-
453
- &[ui-flex~='ab'] {
454
- justify-content: space-around;
455
- align-items: flex-end;
456
- align-content: flex-end;
457
- }
458
- }
459
-
460
- &[ui-flex~='col'] {
461
- flex-direction: column;
462
-
463
- // 位置
464
- &[ui-flex~='lt'] {
465
- @extend %col;
466
- justify-content: flex-start;
467
- align-items: flex-start;
468
- align-content: flex-start;
469
- }
470
-
471
- &[ui-flex~='ct'] {
472
- @extend %col;
473
- justify-content: flex-start;
474
- align-items: center;
475
- align-content: center;
476
- }
477
-
478
- &[ui-flex~='rt'] {
479
- @extend %col;
480
- justify-content: flex-start;
481
- align-items: flex-end;
482
- align-content: flex-end;
483
- }
484
-
485
- &[ui-flex~='xt'] {
486
- @extend %col;
487
- justify-content: flex-start;
488
- align-items: stretch;
489
- align-content: stretch;
490
- }
491
- &[ui-flex~='at'] {
492
- @extend %col;
493
- justify-content: flex-start;
494
- align-items: space-around;
495
- align-content: space-around;
496
- }
497
-
498
- &[ui-flex~='lm'] {
499
- @extend %col;
500
- justify-content: center;
501
- align-items: flex-start;
502
- align-content: flex-start;
503
- }
504
-
505
- &[ui-flex~='cm'] {
506
- @extend %col;
507
- justify-content: center;
508
- align-items: center;
509
- align-content: center;
510
- }
511
-
512
- &[ui-flex~='rm'] {
513
- @extend %col;
514
- justify-content: center;
515
- align-items: flex-end;
516
- align-content: flex-end;
517
- }
518
-
519
- &[ui-flex~='xm'] {
520
- @extend %col;
521
- justify-content: center;
522
- align-items: stretch;
523
- align-content: stretch;
524
- }
525
- &[ui-flex~='am'] {
526
- @extend %col;
527
- justify-content: center;
528
- align-items: space-around;
529
- align-content: space-around;
530
- }
531
-
532
- &[ui-flex~='lb'] {
533
- @extend %col;
534
- justify-content: flex-end;
535
- align-items: flex-start;
536
- align-content: flex-start;
537
- }
538
-
539
- &[ui-flex~='cb'] {
540
- @extend %col;
541
- justify-content: flex-end;
542
- align-items: center;
543
- align-content: center;
544
- }
545
-
546
- &[ui-flex~='rb'] {
547
- @extend %col;
548
- justify-content: flex-end;
549
- align-items: flex-end;
550
- align-content: flex-end;
551
- }
552
-
553
- &[ui-flex~='xb'] {
554
- @extend %col;
555
- justify-content: flex-end;
556
- align-items: stretch;
557
- align-content: stretch;
558
- }
559
- &[ui-flex~='ab'] {
560
- @extend %col;
561
- justify-content: flex-end;
562
- align-items: space-around;
563
- align-content: space-around;
564
- }
565
-
566
- &[ui-flex~='ly'] {
567
- @extend %col;
568
- justify-content: space-between;
569
- align-items: flex-start;
570
- align-content: flex-start;
571
- }
572
- &[ui-flex~='la'] {
573
- @extend %col;
574
- justify-content: space-around;
575
- align-items: flex-start;
576
- align-content: flex-start;
577
- }
578
-
579
- &[ui-flex~='cy'] {
580
- @extend %col;
581
- justify-content: space-between;
582
- align-items: center;
583
- align-content: center;
584
- }
585
- &[ui-flex~='ca'] {
586
- @extend %col;
587
- justify-content: space-around;
588
- align-items: center;
589
- align-content: center;
590
- }
591
- &[ui-flex~='ry'] {
592
- @extend %col;
593
- justify-content: space-between;
594
- align-items: flex-end;
595
- align-content: flex-end;
596
- }
597
- &[ui-flex~='ra'] {
598
- @extend %col;
599
- justify-content: space-around;
600
- align-items: flex-end;
601
- align-content: flex-end;
602
- }
603
- &[ui-flex~='xy'] {
604
- @extend %col;
605
- justify-content: space-between;
606
- align-items: stretch;
607
- align-content: space-between;
608
- }
609
- &[ui-flex~='aa'] {
610
- @extend %col;
611
- justify-content: space-around;
612
- align-items: space-around;
613
- align-content: space-around;
614
- }
452
+ &[ui-flex~='ry'] {
453
+ justify-content: flex-end;
454
+ align-items: stretch;
455
+ align-content: space-between;
456
+ }
457
+
458
+ &[ui-flex~='xb'] {
459
+ justify-content: space-between;
460
+ align-items: flex-end;
461
+ align-content: flex-end;
462
+ }
463
+
464
+ &[ui-flex~='ab'] {
465
+ justify-content: space-around;
466
+ align-items: flex-end;
467
+ align-content: flex-end;
468
+ }
469
+ }
470
+
471
+ [ui-flex~='col'] {
472
+ flex-direction: column;
473
+
474
+ // 位置
475
+ &[ui-flex~='lt'] {
476
+ justify-content: flex-start;
477
+ align-items: flex-start;
478
+ align-content: flex-start;
479
+ }
480
+
481
+ &[ui-flex~='ct'] {
482
+ justify-content: flex-start;
483
+ align-items: center;
484
+ align-content: center;
485
+ }
486
+
487
+ &[ui-flex~='rt'] {
488
+ justify-content: flex-start;
489
+ align-items: flex-end;
490
+ align-content: flex-end;
491
+ }
492
+
493
+ &[ui-flex~='xt'] {
494
+ justify-content: flex-start;
495
+ align-items: stretch;
496
+ align-content: stretch;
497
+ }
498
+ &[ui-flex~='at'] {
499
+ justify-content: flex-start;
500
+ align-items: space-around;
501
+ align-content: space-around;
502
+ }
503
+
504
+ &[ui-flex~='lm'] {
505
+ justify-content: center;
506
+ align-items: flex-start;
507
+ align-content: flex-start;
508
+ }
509
+
510
+ &[ui-flex~='cm'] {
511
+ justify-content: center;
512
+ align-items: center;
513
+ align-content: center;
514
+ }
515
+
516
+ &[ui-flex~='rm'] {
517
+ justify-content: center;
518
+ align-items: flex-end;
519
+ align-content: flex-end;
520
+ }
521
+
522
+ &[ui-flex~='xm'] {
523
+ justify-content: center;
524
+ align-items: stretch;
525
+ align-content: stretch;
526
+ }
527
+ &[ui-flex~='am'] {
528
+ justify-content: center;
529
+ align-items: space-around;
530
+ align-content: space-around;
531
+ }
532
+
533
+ &[ui-flex~='lb'] {
534
+ justify-content: flex-end;
535
+ align-items: flex-start;
536
+ align-content: flex-start;
537
+ }
538
+
539
+ &[ui-flex~='cb'] {
540
+ justify-content: flex-end;
541
+ align-items: center;
542
+ align-content: center;
543
+ }
544
+
545
+ &[ui-flex~='rb'] {
546
+ justify-content: flex-end;
547
+ align-items: flex-end;
548
+ align-content: flex-end;
549
+ }
550
+
551
+ &[ui-flex~='xb'] {
552
+ justify-content: flex-end;
553
+ align-items: stretch;
554
+ align-content: stretch;
555
+ }
556
+ &[ui-flex~='ab'] {
557
+ justify-content: flex-end;
558
+ align-items: space-around;
559
+ align-content: space-around;
560
+ }
561
+ &[ui-flex~='ad'] {
562
+ justify-content: flex-end;
563
+ align-items: space-around;
564
+ align-content: space-around;
565
+ }
566
+ &[ui-flex~='ay'] {
567
+ justify-content: space-between;
568
+ align-content: space-around;
569
+ align-items: stretch;
570
+ }
571
+ &[ui-flex~='ly'] {
572
+ justify-content: space-between;
573
+ align-items: flex-start;
574
+ align-content: flex-start;
575
+ }
576
+ &[ui-flex~='ld'] {
577
+ justify-content: space-around;
578
+ align-items: flex-start;
579
+ align-content: flex-start;
580
+ }
581
+
582
+ &[ui-flex~='cy'] {
583
+ justify-content: space-between;
584
+ align-items: center;
585
+ align-content: center;
586
+ }
587
+ &[ui-flex~='cd'] {
588
+ justify-content: space-around;
589
+ align-items: center;
590
+ align-content: center;
591
+ }
592
+ &[ui-flex~='ry'] {
593
+ justify-content: space-between;
594
+ align-items: flex-end;
595
+ align-content: flex-end;
596
+ }
597
+ &[ui-flex~='rd'] {
598
+ justify-content: space-around;
599
+ align-items: flex-end;
600
+ align-content: flex-end;
601
+ }
602
+ &[ui-flex~='xy'] {
603
+ justify-content: space-between;
604
+ align-items: stretch;
605
+ align-content: space-between;
606
+ }
607
+ &[ui-flex~='xd'] {
608
+ justify-content: space-around;
609
+ align-items: stretch;
610
+ align-content: space-between;
611
+ }
612
+ &[ui-flex~='ad'] {
613
+ justify-content: space-around;
614
+ align-items: space-around;
615
+ align-content: space-around;
615
616
  }
616
617
  }
package/core/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/core",
3
- "version": "1.12.12",
3
+ "version": "1.12.15",
4
4
  "description": "MCUI 核心组件，MCUI 全局架构性组件。官网 https://mcui.fekit.cn",
5
5
  "main": "mcui@core.scss",
6
6
  "scripts": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neatui/css",
3
- "version": "1.0.16",
3
+ "version": "1.0.18",
4
4
  "description": "neatui",
5
5
  "main": "./neatui.scss",
6
6
  "license": "MIT",