@neatui/css 4.1.0 → 4.2.0
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.
- package/components/form/base.scss +5 -0
- package/core/trim.scss +171 -280
- package/package.json +1 -1
|
@@ -289,6 +289,11 @@ $cos: 'main', 'text', 'read', 'note', 'idle', 'case', 'line', 'info', 'well', 'w
|
|
|
289
289
|
color: currentColor;
|
|
290
290
|
box-shadow: inset 0 0 0 1px currentColor;
|
|
291
291
|
}
|
|
292
|
+
|
|
293
|
+
&[ui-form-clean~='empty'] {
|
|
294
|
+
opacity: 0 !important;
|
|
295
|
+
pointer-events: none !important;
|
|
296
|
+
}
|
|
292
297
|
}
|
|
293
298
|
[ui-form] {
|
|
294
299
|
&:hover {
|
package/core/trim.scss
CHANGED
|
@@ -56,6 +56,72 @@ $dimension-l: (
|
|
|
56
56
|
xl: 70,
|
|
57
57
|
);
|
|
58
58
|
|
|
59
|
+
$_spacing-scale: (
|
|
60
|
+
no: 0em,
|
|
61
|
+
xs: 1px,
|
|
62
|
+
ss: 0.25em,
|
|
63
|
+
sm: 0.5em,
|
|
64
|
+
sl: 0.75em,
|
|
65
|
+
ms: 1em,
|
|
66
|
+
mm: 1.5em,
|
|
67
|
+
ml: 2em,
|
|
68
|
+
ls: 2.5em,
|
|
69
|
+
lm: 3em,
|
|
70
|
+
ll: 4em,
|
|
71
|
+
xl: 5em,
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
$_radius-scale: (
|
|
75
|
+
no: 0em,
|
|
76
|
+
xs: 0.1em,
|
|
77
|
+
ss: 0.2em,
|
|
78
|
+
sm: 0.3em,
|
|
79
|
+
sl: 0.4em,
|
|
80
|
+
ms: 0.5em,
|
|
81
|
+
mm: 0.6em,
|
|
82
|
+
ml: 0.7em,
|
|
83
|
+
ls: 0.8em,
|
|
84
|
+
lm: 0.9em,
|
|
85
|
+
ll: 1em,
|
|
86
|
+
xl: 1.2em,
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
@mixin _spacing-properties($properties, $value, $important: false) {
|
|
90
|
+
@each $property in $properties {
|
|
91
|
+
@if $important {
|
|
92
|
+
#{$property}: $value !important;
|
|
93
|
+
} @else {
|
|
94
|
+
#{$property}: $value;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@mixin _spacing-utility($media, $prefix, $size, $value, $properties, $children: true) {
|
|
100
|
+
.#{$media}#{$prefix}-#{$size} {
|
|
101
|
+
@include _spacing-properties($properties, $value, true);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@if $children {
|
|
105
|
+
html body .#{$media}#{$prefix}-#{$size}-sub > *,
|
|
106
|
+
.#{$media}#{$prefix}-#{$size}-sun > * > * {
|
|
107
|
+
@include _spacing-properties($properties, $value);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@mixin _margin-edge-reset($media, $prefix, $size, $property, $pseudo) {
|
|
113
|
+
.#{$media}#{$prefix}-#{$size}-sub > *:#{$pseudo},
|
|
114
|
+
.#{$media}#{$prefix}-#{$size}-sun > * > *:#{$pseudo} {
|
|
115
|
+
#{$property}: 0;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@mixin _row-spacing($media, $prefix, $size, $value, $properties) {
|
|
120
|
+
[ui-row].#{$media}#{$prefix}-#{$size}-sub {
|
|
121
|
+
@include _spacing-properties($properties, -($value));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
59
125
|
@mixin dimension-scale($media, $prefix, $property) {
|
|
60
126
|
.#{$media}#{$prefix}-no {
|
|
61
127
|
#{$property}: 0;
|
|
@@ -85,99 +151,62 @@ $dimension-l: (
|
|
|
85
151
|
@mixin trim($media: "") {
|
|
86
152
|
$size: (no, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl);
|
|
87
153
|
|
|
88
|
-
//
|
|
89
|
-
$
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
$
|
|
94
|
-
$
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
&.#{$media}n-#{$sz}-sub,
|
|
108
|
-
&.#{$media}nx-#{$sz}-sub,
|
|
109
|
-
&.#{$media}nr-#{$sz}-sub {
|
|
110
|
-
margin-right: -$col_base + $col_unit;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
// 上下内边距
|
|
114
|
-
&.#{$media}n-#{$sz}-sub,
|
|
115
|
-
&.#{$media}ny-#{$sz}-sub,
|
|
116
|
-
&.#{$media}nt-#{$sz}-sub {
|
|
117
|
-
margin-top: -$col_base + $col_unit;
|
|
118
|
-
}
|
|
119
|
-
&.#{$media}n-#{$sz}-sub,
|
|
120
|
-
&.#{$media}ny-#{$sz}-sub,
|
|
121
|
-
&.#{$media}nb-#{$sz}-sub {
|
|
122
|
-
margin-bottom: -$col_base + $col_unit;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@if ($sz == xs) {
|
|
127
|
-
$col_base: 0;
|
|
128
|
-
}
|
|
129
|
-
@if ($col_base < 1) {
|
|
130
|
-
$col_base: $col_base + 0.25;
|
|
131
|
-
} @else if($col_base >= 3) {
|
|
132
|
-
$col_base: $col_base + 1;
|
|
133
|
-
} @else {
|
|
134
|
-
$col_base: $col_base + 0.5;
|
|
135
|
-
}
|
|
154
|
+
// 栅格负边距补偿：总项 < 轴向 < 单边
|
|
155
|
+
@each $sz, $value in $_spacing-scale {
|
|
156
|
+
@include _row-spacing(
|
|
157
|
+
$media,
|
|
158
|
+
"n",
|
|
159
|
+
$sz,
|
|
160
|
+
$value,
|
|
161
|
+
(margin-top, margin-right, margin-bottom, margin-left)
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
@each $sz, $value in $_spacing-scale {
|
|
165
|
+
@include _row-spacing($media, "nx", $sz, $value, (margin-left, margin-right));
|
|
166
|
+
@include _row-spacing($media, "ny", $sz, $value, (margin-top, margin-bottom));
|
|
167
|
+
}
|
|
168
|
+
@each $sz, $value in $_spacing-scale {
|
|
169
|
+
@include _row-spacing($media, "nt", $sz, $value, (margin-top,));
|
|
170
|
+
@include _row-spacing($media, "nr", $sz, $value, (margin-right,));
|
|
171
|
+
@include _row-spacing($media, "nb", $sz, $value, (margin-bottom,));
|
|
172
|
+
@include _row-spacing($media, "nl", $sz, $value, (margin-left,));
|
|
136
173
|
}
|
|
137
174
|
|
|
138
|
-
//
|
|
139
|
-
$br_base: 0;
|
|
175
|
+
// 圆角：总项 < 双角 < 单角
|
|
140
176
|
.#{$media}r-full {
|
|
141
177
|
border-radius: 10000em;
|
|
142
178
|
}
|
|
143
|
-
@each $sz in $
|
|
144
|
-
// 四角
|
|
179
|
+
@each $sz, $value in $_radius-scale {
|
|
145
180
|
.#{$media}r-#{$sz} {
|
|
146
|
-
border-radius:
|
|
181
|
+
border-radius: $value;
|
|
147
182
|
}
|
|
148
|
-
|
|
183
|
+
}
|
|
184
|
+
@each $sz, $value in $_radius-scale {
|
|
149
185
|
.#{$media}r-t-#{$sz} {
|
|
150
|
-
border-radius:
|
|
186
|
+
border-top-left-radius: $value;
|
|
187
|
+
border-top-right-radius: $value;
|
|
151
188
|
}
|
|
152
|
-
// 下面
|
|
153
189
|
.#{$media}r-b-#{$sz} {
|
|
154
|
-
border-radius:
|
|
190
|
+
border-bottom-right-radius: $value;
|
|
191
|
+
border-bottom-left-radius: $value;
|
|
155
192
|
}
|
|
156
|
-
|
|
193
|
+
}
|
|
194
|
+
@each $sz, $value in $_radius-scale {
|
|
157
195
|
.#{$media}r-lt-#{$sz} {
|
|
158
|
-
border-top-left-radius:
|
|
196
|
+
border-top-left-radius: $value;
|
|
159
197
|
}
|
|
160
|
-
// 右上
|
|
161
198
|
.#{$media}r-rt-#{$sz} {
|
|
162
|
-
border-top-right-radius:
|
|
199
|
+
border-top-right-radius: $value;
|
|
163
200
|
}
|
|
164
|
-
// 左下
|
|
165
201
|
.#{$media}r-lb-#{$sz} {
|
|
166
|
-
border-bottom-left-radius:
|
|
202
|
+
border-bottom-left-radius: $value;
|
|
167
203
|
}
|
|
168
|
-
// 右下
|
|
169
204
|
.#{$media}r-rb-#{$sz} {
|
|
170
|
-
border-bottom-right-radius:
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
@if ($br_base <1) {
|
|
174
|
-
$br_base: $br_base + 0.1;
|
|
175
|
-
} @else {
|
|
176
|
-
$br_base: $br_base + 0.2;
|
|
205
|
+
border-bottom-right-radius: $value;
|
|
177
206
|
}
|
|
178
207
|
}
|
|
179
208
|
|
|
180
|
-
//
|
|
209
|
+
// 偏移量
|
|
181
210
|
$base: 0;
|
|
182
211
|
$unit: em;
|
|
183
212
|
@each $sz in $size {
|
|
@@ -188,7 +217,6 @@ $dimension-l: (
|
|
|
188
217
|
$unit: em;
|
|
189
218
|
}
|
|
190
219
|
|
|
191
|
-
// 偏移量
|
|
192
220
|
.#{$media}o {
|
|
193
221
|
&l-#{$sz} {
|
|
194
222
|
left: $base + $unit;
|
|
@@ -231,213 +259,6 @@ $dimension-l: (
|
|
|
231
259
|
}
|
|
232
260
|
}
|
|
233
261
|
|
|
234
|
-
// 内边距
|
|
235
|
-
.#{$media}n {
|
|
236
|
-
&l,
|
|
237
|
-
&x,
|
|
238
|
-
& {
|
|
239
|
-
&-#{$sz} {
|
|
240
|
-
@at-root {
|
|
241
|
-
& {
|
|
242
|
-
padding-left: $base + $unit !important;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
html body &-sub > *,
|
|
246
|
-
&-sun > * > * {
|
|
247
|
-
padding-left: $base + $unit;
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
|
-
&r,
|
|
254
|
-
&x,
|
|
255
|
-
& {
|
|
256
|
-
&-#{$sz} {
|
|
257
|
-
@at-root {
|
|
258
|
-
& {
|
|
259
|
-
padding-right: $base + $unit !important;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
html body &-sub > *,
|
|
263
|
-
&-sun > * > * {
|
|
264
|
-
padding-right: $base + $unit;
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
&t,
|
|
271
|
-
&y,
|
|
272
|
-
& {
|
|
273
|
-
&-#{$sz} {
|
|
274
|
-
@at-root {
|
|
275
|
-
& {
|
|
276
|
-
padding-top: $base + $unit !important;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
html body &-sub > *,
|
|
280
|
-
&-sun > * > * {
|
|
281
|
-
padding-top: $base + $unit;
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
&b,
|
|
288
|
-
&y,
|
|
289
|
-
& {
|
|
290
|
-
&-#{$sz} {
|
|
291
|
-
@at-root {
|
|
292
|
-
& {
|
|
293
|
-
padding-bottom: $base + $unit !important;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
html body &-sub > *,
|
|
297
|
-
&-sun > * > * {
|
|
298
|
-
padding-bottom: $base + $unit;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
// 外边距
|
|
306
|
-
.#{$media}m {
|
|
307
|
-
&l,
|
|
308
|
-
&x,
|
|
309
|
-
& {
|
|
310
|
-
&-#{$sz} {
|
|
311
|
-
@at-root {
|
|
312
|
-
& {
|
|
313
|
-
margin-left: $base + $unit !important;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
html body &-sub > *,
|
|
317
|
-
&-sun > * > * {
|
|
318
|
-
margin-left: $base + $unit;
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
// 子集
|
|
323
|
-
&-sub > *,
|
|
324
|
-
&-sun > * > * {
|
|
325
|
-
&:first-child {
|
|
326
|
-
margin-left: 0;
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
&r,
|
|
333
|
-
&x,
|
|
334
|
-
& {
|
|
335
|
-
&-#{$sz} {
|
|
336
|
-
@at-root {
|
|
337
|
-
& {
|
|
338
|
-
margin-right: $base + $unit !important;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
|
-
html body &-sub > *,
|
|
342
|
-
&-sun > * > * {
|
|
343
|
-
margin-right: $base + $unit;
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
// 子集
|
|
348
|
-
&-sub > *,
|
|
349
|
-
&-sun > * > * {
|
|
350
|
-
&:last-child {
|
|
351
|
-
margin-right: 0;
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
&t,
|
|
358
|
-
&y,
|
|
359
|
-
& {
|
|
360
|
-
&-#{$sz} {
|
|
361
|
-
@at-root {
|
|
362
|
-
& {
|
|
363
|
-
margin-top: $base + $unit !important;
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
html body &-sub > *,
|
|
367
|
-
&-sun > * > * {
|
|
368
|
-
margin-top: $base + $unit;
|
|
369
|
-
}
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
&b,
|
|
375
|
-
&y,
|
|
376
|
-
& {
|
|
377
|
-
&-#{$sz} {
|
|
378
|
-
@at-root {
|
|
379
|
-
& {
|
|
380
|
-
margin-bottom: $base + $unit !important;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
html body &-sub > *,
|
|
384
|
-
&-sun > * > * {
|
|
385
|
-
margin-bottom: $base + $unit;
|
|
386
|
-
}
|
|
387
|
-
}
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
.#{$media}-m {
|
|
392
|
-
&l,
|
|
393
|
-
&x,
|
|
394
|
-
& {
|
|
395
|
-
&-#{$sz} {
|
|
396
|
-
@at-root {
|
|
397
|
-
& {
|
|
398
|
-
margin-left: -($base + $unit) !important;
|
|
399
|
-
}
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
&r,
|
|
405
|
-
&x,
|
|
406
|
-
& {
|
|
407
|
-
&-#{$sz} {
|
|
408
|
-
@at-root {
|
|
409
|
-
& {
|
|
410
|
-
margin-right: -($base + $unit) !important;
|
|
411
|
-
}
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
&t,
|
|
417
|
-
&y,
|
|
418
|
-
& {
|
|
419
|
-
&-#{$sz} {
|
|
420
|
-
@at-root {
|
|
421
|
-
& {
|
|
422
|
-
margin-top: -($base + $unit) !important;
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
&b,
|
|
429
|
-
&y,
|
|
430
|
-
& {
|
|
431
|
-
&-#{$sz} {
|
|
432
|
-
@at-root {
|
|
433
|
-
& {
|
|
434
|
-
margin-bottom: -($base + $unit) !important;
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
}
|
|
439
|
-
}
|
|
440
|
-
|
|
441
262
|
@if ($sz == xs) {
|
|
442
263
|
$base: 0;
|
|
443
264
|
}
|
|
@@ -450,6 +271,76 @@ $dimension-l: (
|
|
|
450
271
|
}
|
|
451
272
|
}
|
|
452
273
|
|
|
274
|
+
// 内边距：总项 < 轴向 < 单边
|
|
275
|
+
@each $sz, $value in $_spacing-scale {
|
|
276
|
+
@include _spacing-utility(
|
|
277
|
+
$media,
|
|
278
|
+
"n",
|
|
279
|
+
$sz,
|
|
280
|
+
$value,
|
|
281
|
+
(padding-top, padding-right, padding-bottom, padding-left)
|
|
282
|
+
);
|
|
283
|
+
}
|
|
284
|
+
@each $sz, $value in $_spacing-scale {
|
|
285
|
+
@include _spacing-utility($media, "nx", $sz, $value, (padding-left, padding-right));
|
|
286
|
+
@include _spacing-utility($media, "ny", $sz, $value, (padding-top, padding-bottom));
|
|
287
|
+
}
|
|
288
|
+
@each $sz, $value in $_spacing-scale {
|
|
289
|
+
@include _spacing-utility($media, "nt", $sz, $value, (padding-top,));
|
|
290
|
+
@include _spacing-utility($media, "nr", $sz, $value, (padding-right,));
|
|
291
|
+
@include _spacing-utility($media, "nb", $sz, $value, (padding-bottom,));
|
|
292
|
+
@include _spacing-utility($media, "nl", $sz, $value, (padding-left,));
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
// 外边距：总项 < 轴向 < 单边
|
|
296
|
+
@each $sz, $value in $_spacing-scale {
|
|
297
|
+
@include _spacing-utility(
|
|
298
|
+
$media,
|
|
299
|
+
"m",
|
|
300
|
+
$sz,
|
|
301
|
+
$value,
|
|
302
|
+
(margin-top, margin-right, margin-bottom, margin-left)
|
|
303
|
+
);
|
|
304
|
+
@include _margin-edge-reset($media, "m", $sz, margin-left, first-child);
|
|
305
|
+
@include _margin-edge-reset($media, "m", $sz, margin-right, last-child);
|
|
306
|
+
}
|
|
307
|
+
@each $sz, $value in $_spacing-scale {
|
|
308
|
+
@include _spacing-utility($media, "mx", $sz, $value, (margin-left, margin-right));
|
|
309
|
+
@include _margin-edge-reset($media, "mx", $sz, margin-left, first-child);
|
|
310
|
+
@include _margin-edge-reset($media, "mx", $sz, margin-right, last-child);
|
|
311
|
+
@include _spacing-utility($media, "my", $sz, $value, (margin-top, margin-bottom));
|
|
312
|
+
}
|
|
313
|
+
@each $sz, $value in $_spacing-scale {
|
|
314
|
+
@include _spacing-utility($media, "mt", $sz, $value, (margin-top,));
|
|
315
|
+
@include _spacing-utility($media, "mr", $sz, $value, (margin-right,));
|
|
316
|
+
@include _margin-edge-reset($media, "mr", $sz, margin-right, last-child);
|
|
317
|
+
@include _spacing-utility($media, "mb", $sz, $value, (margin-bottom,));
|
|
318
|
+
@include _spacing-utility($media, "ml", $sz, $value, (margin-left,));
|
|
319
|
+
@include _margin-edge-reset($media, "ml", $sz, margin-left, first-child);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
// 负外边距：总项 < 轴向 < 单边
|
|
323
|
+
@each $sz, $value in $_spacing-scale {
|
|
324
|
+
@include _spacing-utility(
|
|
325
|
+
$media,
|
|
326
|
+
"-m",
|
|
327
|
+
$sz,
|
|
328
|
+
-($value),
|
|
329
|
+
(margin-top, margin-right, margin-bottom, margin-left),
|
|
330
|
+
false
|
|
331
|
+
);
|
|
332
|
+
}
|
|
333
|
+
@each $sz, $value in $_spacing-scale {
|
|
334
|
+
@include _spacing-utility($media, "-mx", $sz, -($value), (margin-left, margin-right), false);
|
|
335
|
+
@include _spacing-utility($media, "-my", $sz, -($value), (margin-top, margin-bottom), false);
|
|
336
|
+
}
|
|
337
|
+
@each $sz, $value in $_spacing-scale {
|
|
338
|
+
@include _spacing-utility($media, "-mt", $sz, -($value), (margin-top,), false);
|
|
339
|
+
@include _spacing-utility($media, "-mr", $sz, -($value), (margin-right,), false);
|
|
340
|
+
@include _spacing-utility($media, "-mb", $sz, -($value), (margin-bottom,), false);
|
|
341
|
+
@include _spacing-utility($media, "-ml", $sz, -($value), (margin-left,), false);
|
|
342
|
+
}
|
|
343
|
+
|
|
453
344
|
// 宽度
|
|
454
345
|
@include dimension-scale($media, "w", width);
|
|
455
346
|
@include dimension-scale($media, "min-w", min-width);
|