@oardi/css-utils 0.130.0 → 0.131.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/css-utils-manifest.json +21 -3
- package/css-utils-reference.md +16 -1
- package/package.json +1 -1
- package/scss/grid-responsive.scss +25 -1
- package/scss/grid.scss +34 -2
package/css-utils-manifest.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"package": "@oardi/css-utils",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.131.0",
|
|
4
4
|
"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
|
|
5
5
|
"lifecycle": {
|
|
6
6
|
"deprecated": [
|
|
@@ -253,12 +253,30 @@
|
|
|
253
253
|
"Grid": {
|
|
254
254
|
"families": [
|
|
255
255
|
{
|
|
256
|
-
"patterns": [
|
|
256
|
+
"patterns": [
|
|
257
|
+
"col-end-{breakpoint}-{value}",
|
|
258
|
+
"col-end-{value}",
|
|
259
|
+
"col-start-{breakpoint}-{value}",
|
|
260
|
+
"col-start-{value}"
|
|
261
|
+
],
|
|
262
|
+
"values": ["1", "10", "11", "12", "13", "2", "3", "4", "5", "6", "7", "8", "9"]
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
"patterns": ["col-offset-{breakpoint}-{value}", "col-offset-{value}"],
|
|
266
|
+
"values": ["0", "1", "10", "11", "2", "3", "4", "5", "6", "7", "8", "9"]
|
|
267
|
+
},
|
|
268
|
+
{
|
|
269
|
+
"patterns": [
|
|
270
|
+
"col-{breakpoint}-{value}",
|
|
271
|
+
"col-{value}",
|
|
272
|
+
"row-span-{breakpoint}-{value}",
|
|
273
|
+
"row-span-{value}"
|
|
274
|
+
],
|
|
257
275
|
"values": ["1", "10", "11", "12", "2", "3", "4", "5", "6", "7", "8", "9"]
|
|
258
276
|
}
|
|
259
277
|
],
|
|
260
278
|
"patterns": [],
|
|
261
|
-
"classes": ["col", "grid"]
|
|
279
|
+
"classes": ["col", "grid", "grid-auto-fit"]
|
|
262
280
|
},
|
|
263
281
|
"Gap": {
|
|
264
282
|
"families": [
|
package/css-utils-reference.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
> Generated automatically. Do not edit manually.
|
|
4
4
|
|
|
5
5
|
- Package: `@oardi/css-utils`
|
|
6
|
-
- Version: `0.
|
|
6
|
+
- Version: `0.131.0`
|
|
7
7
|
- Source: public SCSS entry point and utility configuration
|
|
8
8
|
|
|
9
9
|
## Usage guidance
|
|
@@ -215,15 +215,30 @@ Classes:
|
|
|
215
215
|
|
|
216
216
|
## Grid
|
|
217
217
|
|
|
218
|
+
Values: `1` | `10` | `11` | `12` | `13` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
|
|
219
|
+
|
|
220
|
+
- `col-end-{breakpoint}-{value}`
|
|
221
|
+
- `col-end-{value}`
|
|
222
|
+
- `col-start-{breakpoint}-{value}`
|
|
223
|
+
- `col-start-{value}`
|
|
224
|
+
|
|
225
|
+
Values: `0` | `1` | `10` | `11` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
|
|
226
|
+
|
|
227
|
+
- `col-offset-{breakpoint}-{value}`
|
|
228
|
+
- `col-offset-{value}`
|
|
229
|
+
|
|
218
230
|
Values: `1` | `10` | `11` | `12` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
|
|
219
231
|
|
|
220
232
|
- `col-{breakpoint}-{value}`
|
|
221
233
|
- `col-{value}`
|
|
234
|
+
- `row-span-{breakpoint}-{value}`
|
|
235
|
+
- `row-span-{value}`
|
|
222
236
|
|
|
223
237
|
Classes:
|
|
224
238
|
|
|
225
239
|
- `col`
|
|
226
240
|
- `grid`
|
|
241
|
+
- `grid-auto-fit`
|
|
227
242
|
|
|
228
243
|
## Gap
|
|
229
244
|
|
package/package.json
CHANGED
|
@@ -9,7 +9,31 @@
|
|
|
9
9
|
@media (min-width: #{$bp-value}) {
|
|
10
10
|
@for $i from 1 through 12 {
|
|
11
11
|
.col-#{$bp}-#{$i} {
|
|
12
|
-
grid-column: span $i;
|
|
12
|
+
grid-column: span $i / span $i;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.row-span-#{$bp}-#{$i} {
|
|
16
|
+
grid-row: span $i;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@for $i from 1 through 13 {
|
|
21
|
+
.col-start-#{$bp}-#{$i} {
|
|
22
|
+
grid-column-start: $i;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.col-end-#{$bp}-#{$i} {
|
|
26
|
+
grid-column-end: $i;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.col-offset-#{$bp}-0 {
|
|
31
|
+
grid-column-start: auto;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@for $i from 1 through 11 {
|
|
35
|
+
.col-offset-#{$bp}-#{$i} {
|
|
36
|
+
grid-column-start: $i + 1;
|
|
13
37
|
}
|
|
14
38
|
}
|
|
15
39
|
}
|
package/scss/grid.scss
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
@layer utilities.grid {
|
|
4
4
|
.grid {
|
|
5
5
|
--grid-gap: var(--spacer-3);
|
|
6
|
+
--grid-min-column-width: 16rem;
|
|
6
7
|
|
|
7
8
|
display: grid;
|
|
8
9
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
@@ -10,13 +11,44 @@
|
|
|
10
11
|
gap: var(--grid-gap);
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
.grid-auto-fit {
|
|
15
|
+
grid-template-columns: repeat(
|
|
16
|
+
auto-fit,
|
|
17
|
+
minmax(min(100%, var(--grid-min-column-width)), 1fr)
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
13
21
|
.col {
|
|
14
|
-
grid-column: span 12;
|
|
22
|
+
grid-column: span 12 / span 12;
|
|
15
23
|
}
|
|
16
24
|
|
|
17
25
|
@for $i from 1 through 12 {
|
|
18
26
|
.col-#{$i} {
|
|
19
|
-
grid-column: span $i;
|
|
27
|
+
grid-column: span $i / span $i;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.row-span-#{$i} {
|
|
31
|
+
grid-row: span $i;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@for $i from 1 through 13 {
|
|
36
|
+
.col-start-#{$i} {
|
|
37
|
+
grid-column-start: $i;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.col-end-#{$i} {
|
|
41
|
+
grid-column-end: $i;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.col-offset-0 {
|
|
46
|
+
grid-column-start: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@for $i from 1 through 11 {
|
|
50
|
+
.col-offset-#{$i} {
|
|
51
|
+
grid-column-start: $i + 1;
|
|
20
52
|
}
|
|
21
53
|
}
|
|
22
54
|
}
|