@carbon/grid 10.25.0 → 10.27.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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/grid",
|
|
3
3
|
"description": "Grid for digital and software products using the Carbon Design System",
|
|
4
|
-
"version": "10.
|
|
4
|
+
"version": "10.27.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@carbon/import-once": "^10.6.0",
|
|
35
|
-
"@carbon/layout": "^10.
|
|
35
|
+
"@carbon/layout": "^10.24.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@carbon/cli": "^10.
|
|
38
|
+
"@carbon/cli": "^10.23.0",
|
|
39
39
|
"rimraf": "^3.0.0"
|
|
40
40
|
},
|
|
41
41
|
"eyeglass": {
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"sassDir": "scss",
|
|
45
45
|
"needs": "^1.3.0"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "b00113e8d4cb273a80d9c71f12b741ae6ac360a6"
|
|
48
48
|
}
|
|
@@ -62,11 +62,11 @@
|
|
|
62
62
|
} @else {
|
|
63
63
|
// Explicitly include `display: block` to override
|
|
64
64
|
display: block;
|
|
65
|
-
flex: 0 0 percentage($span / $columns);
|
|
66
65
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
67
66
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
68
67
|
// do not appear to require this.
|
|
69
68
|
max-width: percentage($span / $columns);
|
|
69
|
+
flex: 0 0 percentage($span / $columns);
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -117,17 +117,17 @@
|
|
|
117
117
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
118
118
|
.#{$prefix}--col,
|
|
119
119
|
.#{$prefix}--col#{$infix} {
|
|
120
|
+
max-width: 100%;
|
|
120
121
|
flex-basis: 0;
|
|
121
122
|
flex-grow: 1;
|
|
122
|
-
max-width: 100%;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.#{$prefix}--col--auto,
|
|
126
126
|
.#{$prefix}--col#{$infix}--auto {
|
|
127
|
-
flex: 1 0 0%;
|
|
128
127
|
width: auto;
|
|
129
128
|
// Reset earlier grid tiers
|
|
130
129
|
max-width: 100%;
|
|
130
|
+
flex: 1 0 0%;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
@for $i from 0 through $columns {
|
|
@@ -266,11 +266,11 @@ $carbon--aspect-ratios: (
|
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
.#{$prefix}--aspect-ratio::before {
|
|
269
|
-
float: left;
|
|
270
269
|
width: 1px;
|
|
271
270
|
height: 0;
|
|
272
271
|
margin-left: -1px;
|
|
273
272
|
content: '';
|
|
273
|
+
float: left;
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
.#{$prefix}--aspect-ratio::after {
|
package/scss/_mixins.scss
CHANGED
|
@@ -62,11 +62,11 @@
|
|
|
62
62
|
} @else {
|
|
63
63
|
// Explicitly include `display: block` to override
|
|
64
64
|
display: block;
|
|
65
|
-
flex: 0 0 percentage($span / $columns);
|
|
66
65
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
67
66
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
68
67
|
// do not appear to require this.
|
|
69
68
|
max-width: percentage($span / $columns);
|
|
69
|
+
flex: 0 0 percentage($span / $columns);
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
@@ -117,17 +117,17 @@
|
|
|
117
117
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
118
118
|
.#{$prefix}--col,
|
|
119
119
|
.#{$prefix}--col#{$infix} {
|
|
120
|
+
max-width: 100%;
|
|
120
121
|
flex-basis: 0;
|
|
121
122
|
flex-grow: 1;
|
|
122
|
-
max-width: 100%;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.#{$prefix}--col--auto,
|
|
126
126
|
.#{$prefix}--col#{$infix}--auto {
|
|
127
|
-
flex: 1 0 0%;
|
|
128
127
|
width: auto;
|
|
129
128
|
// Reset earlier grid tiers
|
|
130
129
|
max-width: 100%;
|
|
130
|
+
flex: 1 0 0%;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
@for $i from 0 through $columns {
|
|
@@ -266,11 +266,11 @@ $carbon--aspect-ratios: (
|
|
|
266
266
|
}
|
|
267
267
|
|
|
268
268
|
.#{$prefix}--aspect-ratio::before {
|
|
269
|
-
float: left;
|
|
270
269
|
width: 1px;
|
|
271
270
|
height: 0;
|
|
272
271
|
margin-left: -1px;
|
|
273
272
|
content: '';
|
|
273
|
+
float: left;
|
|
274
274
|
}
|
|
275
275
|
|
|
276
276
|
.#{$prefix}--aspect-ratio::after {
|
|
@@ -11,24 +11,24 @@
|
|
|
11
11
|
|
|
12
12
|
@mixin css-grid() {
|
|
13
13
|
display: grid;
|
|
14
|
+
padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
|
|
15
|
+
padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
|
|
16
|
+
margin-right: auto;
|
|
17
|
+
margin-left: auto;
|
|
18
|
+
column-gap: var(--cds-grid-gutter);
|
|
14
19
|
grid-template-columns: repeat(
|
|
15
20
|
var(--cds-grid-columns),
|
|
16
21
|
minmax(0, var(--cds-grid-column-size))
|
|
17
22
|
);
|
|
18
|
-
margin-right: auto;
|
|
19
|
-
margin-left: auto;
|
|
20
|
-
padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
|
|
21
|
-
padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
|
|
22
|
-
column-gap: var(--cds-grid-gutter);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
@mixin subgrid() {
|
|
26
26
|
display: grid;
|
|
27
|
+
column-gap: var(--cds-grid-gutter);
|
|
27
28
|
grid-template-columns: repeat(
|
|
28
29
|
var(--cds-grid-columns),
|
|
29
30
|
minmax(0, var(--cds-grid-column-size))
|
|
30
31
|
);
|
|
31
|
-
column-gap: var(--cds-grid-gutter);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
:root {
|
|
@@ -68,19 +68,19 @@
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
|
|
71
|
-
margin-right: 0;
|
|
72
|
-
margin-left: 0;
|
|
73
71
|
padding-right: 0;
|
|
74
72
|
padding-left: 0;
|
|
73
|
+
margin-right: 0;
|
|
74
|
+
margin-left: 0;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
|
|
78
78
|
--cds-grid-gutter: 2rem;
|
|
79
79
|
|
|
80
|
-
margin-right: 0;
|
|
81
|
-
margin-left: 0;
|
|
82
80
|
padding-right: calc(var(--cds-grid-gutter) / 2);
|
|
83
81
|
padding-left: calc(var(--cds-grid-gutter) / 2);
|
|
82
|
+
margin-right: 0;
|
|
83
|
+
margin-left: 0;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
// -----------------------------------------------------------------------------
|
|
@@ -58,11 +58,11 @@
|
|
|
58
58
|
} @else {
|
|
59
59
|
// Explicitly include `display: block` to override
|
|
60
60
|
display: block;
|
|
61
|
-
flex: 0 0 percentage($span / $columns);
|
|
62
61
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
63
62
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
64
63
|
// do not appear to require this.
|
|
65
64
|
max-width: percentage($span / $columns);
|
|
65
|
+
flex: 0 0 percentage($span / $columns);
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -113,17 +113,17 @@
|
|
|
113
113
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
114
114
|
.#{$prefix}--col,
|
|
115
115
|
.#{$prefix}--col#{$infix} {
|
|
116
|
+
max-width: 100%;
|
|
116
117
|
flex-basis: 0;
|
|
117
118
|
flex-grow: 1;
|
|
118
|
-
max-width: 100%;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
.#{$prefix}--col--auto,
|
|
122
122
|
.#{$prefix}--col#{$infix}--auto {
|
|
123
|
-
flex: 1 0 0%;
|
|
124
123
|
width: auto;
|
|
125
124
|
// Reset earlier grid tiers
|
|
126
125
|
max-width: 100%;
|
|
126
|
+
flex: 1 0 0%;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
@for $i from 0 through $columns {
|