@neatui/css 3.4.4 → 3.5.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/core/grid.scss +31 -31
- package/package.json +1 -1
package/core/grid.scss
CHANGED
|
@@ -4,87 +4,87 @@
|
|
|
4
4
|
display: grid;
|
|
5
5
|
gap: var(--gap);
|
|
6
6
|
justify-content: start;
|
|
7
|
-
grid-template-columns: repeat(auto-fill, minmax(calc((100% - (var(--col) - 1) *
|
|
7
|
+
grid-template-columns: repeat(auto-fill, minmax(calc((100% - (var(--col) - 1) * (var(--gap))) / var(--col)), 1fr));
|
|
8
8
|
--col: 12;
|
|
9
9
|
--gap: 0;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
@mixin _grid($med: '') {
|
|
13
13
|
// 栅格
|
|
14
|
-
[ui-grid~='#{$med}
|
|
14
|
+
[ui-grid~='#{$med}1'] {
|
|
15
15
|
--col: 1;
|
|
16
16
|
}
|
|
17
|
-
[ui-grid~='#{$med}
|
|
17
|
+
[ui-grid~='#{$med}2'] {
|
|
18
18
|
--col: 2;
|
|
19
19
|
}
|
|
20
|
-
[ui-grid~='#{$med}
|
|
20
|
+
[ui-grid~='#{$med}3'] {
|
|
21
21
|
--col: 3;
|
|
22
22
|
}
|
|
23
|
-
[ui-grid~='#{$med}
|
|
23
|
+
[ui-grid~='#{$med}4'] {
|
|
24
24
|
--col: 4;
|
|
25
25
|
}
|
|
26
|
-
[ui-grid~='#{$med}
|
|
26
|
+
[ui-grid~='#{$med}5'] {
|
|
27
27
|
--col: 5;
|
|
28
28
|
}
|
|
29
|
-
[ui-grid~='#{$med}
|
|
29
|
+
[ui-grid~='#{$med}6'] {
|
|
30
30
|
--col: 6;
|
|
31
31
|
}
|
|
32
|
-
[ui-grid~='#{$med}
|
|
32
|
+
[ui-grid~='#{$med}7'] {
|
|
33
33
|
--col: 7;
|
|
34
34
|
}
|
|
35
|
-
[ui-grid~='#{$med}
|
|
35
|
+
[ui-grid~='#{$med}8'] {
|
|
36
36
|
--col: 8;
|
|
37
37
|
}
|
|
38
|
-
[ui-grid~='#{$med}
|
|
38
|
+
[ui-grid~='#{$med}9'] {
|
|
39
39
|
--col: 9;
|
|
40
40
|
}
|
|
41
|
-
[ui-grid~='#{$med}
|
|
41
|
+
[ui-grid~='#{$med}10'] {
|
|
42
42
|
--col: 10;
|
|
43
43
|
}
|
|
44
|
-
[ui-grid~='#{$med}
|
|
44
|
+
[ui-grid~='#{$med}11'] {
|
|
45
45
|
--col: 11;
|
|
46
46
|
}
|
|
47
|
-
[ui-grid~='#{$med}
|
|
47
|
+
[ui-grid~='#{$med}12'] {
|
|
48
48
|
--col: 12;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
// 间距
|
|
52
|
-
[ui-grid~='#{$med}
|
|
52
|
+
[ui-grid~='#{$med}no'] {
|
|
53
53
|
--gap: 0;
|
|
54
54
|
}
|
|
55
|
-
[ui-grid~='#{$med}
|
|
55
|
+
[ui-grid~='#{$med}xs'] {
|
|
56
56
|
--gap: 1px;
|
|
57
57
|
}
|
|
58
|
-
[ui-grid~='#{$med}
|
|
59
|
-
--gap: 0.25em;
|
|
60
|
-
}
|
|
61
|
-
[ui-grid~='#{$med}gap-sm'] {
|
|
58
|
+
[ui-grid~='#{$med}ss'] {
|
|
62
59
|
--gap: 0.5em;
|
|
63
60
|
}
|
|
64
|
-
[ui-grid~='#{$med}
|
|
65
|
-
--gap: 0.75em;
|
|
66
|
-
}
|
|
67
|
-
[ui-grid~='#{$med}gap-ms'] {
|
|
61
|
+
[ui-grid~='#{$med}sm'] {
|
|
68
62
|
--gap: 1em;
|
|
69
63
|
}
|
|
70
|
-
[ui-grid~='#{$med}
|
|
64
|
+
[ui-grid~='#{$med}sl'] {
|
|
71
65
|
--gap: 1.5em;
|
|
72
66
|
}
|
|
73
|
-
[ui-grid~='#{$med}
|
|
67
|
+
[ui-grid~='#{$med}ms'] {
|
|
74
68
|
--gap: 2em;
|
|
75
69
|
}
|
|
76
|
-
[ui-grid~='#{$med}
|
|
77
|
-
--gap: 2.5em;
|
|
78
|
-
}
|
|
79
|
-
[ui-grid~='#{$med}gap-lm'] {
|
|
70
|
+
[ui-grid~='#{$med}mm'] {
|
|
80
71
|
--gap: 3em;
|
|
81
72
|
}
|
|
82
|
-
[ui-grid~='#{$med}
|
|
73
|
+
[ui-grid~='#{$med}ml'] {
|
|
83
74
|
--gap: 4em;
|
|
84
75
|
}
|
|
85
|
-
[ui-grid~='#{$med}
|
|
76
|
+
[ui-grid~='#{$med}ls'] {
|
|
86
77
|
--gap: 5em;
|
|
87
78
|
}
|
|
79
|
+
[ui-grid~='#{$med}lm'] {
|
|
80
|
+
--gap: 6em;
|
|
81
|
+
}
|
|
82
|
+
[ui-grid~='#{$med}ll'] {
|
|
83
|
+
--gap: 8em;
|
|
84
|
+
}
|
|
85
|
+
[ui-grid~='#{$med}xl'] {
|
|
86
|
+
--gap: 10em;
|
|
87
|
+
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
@include _grid('');
|