@carbon/grid 11.19.0-rc.0 → 11.20.0-rc.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 +3 -3
- package/scss/_css-grid.scss +17 -22
- package/scss/_flex-grid.scss +25 -35
- package/scss/_inlined/_css-grid.scss +17 -22
- package/scss/_inlined/_flex-grid.scss +25 -35
- package/scss/_inlined/_mixins.scss +25 -35
- package/scss/_mixins.scss +25 -35
- package/scss/vendor/@carbon/layout/_convert.scss +15 -0
- package/scss/vendor/@carbon/layout/modules/_convert.scss +15 -0
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": "11.
|
|
4
|
+
"version": "11.20.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"clean": "rimraf scss/_inlined scss/vendor"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@carbon/layout": "^11.19.0
|
|
36
|
+
"@carbon/layout": "^11.19.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@carbon/cli": "^11.14.0",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"sassDir": "scss",
|
|
46
46
|
"needs": "^1.3.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "0a2c591ac9ac56286ab465334be3e1322d4c86cb"
|
|
49
49
|
}
|
package/scss/_css-grid.scss
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
/// Emit all the styles related to the CSS Grid, these include:
|
|
16
16
|
/// - The base grid class
|
|
17
|
-
/// - The various
|
|
17
|
+
/// - The various gutter modes
|
|
18
18
|
/// - The ability to specifiy column span
|
|
19
19
|
/// - The ability to specifiy column start,end position
|
|
20
20
|
/// - Support for subgrid
|
|
@@ -94,23 +94,21 @@
|
|
|
94
94
|
--cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
|
|
95
95
|
|
|
96
96
|
display: grid;
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
98
|
+
inline-size: 100%;
|
|
99
|
+
margin-inline: auto;
|
|
100
|
+
max-inline-size: get-grid-width(
|
|
99
101
|
$breakpoints,
|
|
100
102
|
largest-breakpoint-name($breakpoints)
|
|
101
103
|
);
|
|
102
|
-
padding-
|
|
103
|
-
padding-left: var(--cds-grid-margin);
|
|
104
|
-
margin-right: auto;
|
|
105
|
-
margin-left: auto;
|
|
106
|
-
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
104
|
+
padding-inline: var(--cds-grid-margin);
|
|
107
105
|
}
|
|
108
106
|
|
|
109
107
|
// -----------------------------------------------------------------------------
|
|
110
108
|
// Full width
|
|
111
109
|
// -----------------------------------------------------------------------------
|
|
112
110
|
.#{$prefix}--css-grid--full-width {
|
|
113
|
-
max-
|
|
111
|
+
max-inline-size: 100%;
|
|
114
112
|
}
|
|
115
113
|
|
|
116
114
|
// -----------------------------------------------------------------------------
|
|
@@ -127,17 +125,15 @@
|
|
|
127
125
|
--cds-grid-mode-start: var(--cds-grid-gutter-start);
|
|
128
126
|
--cds-grid-mode-end: var(--cds-grid-gutter-end);
|
|
129
127
|
|
|
130
|
-
margin-
|
|
131
|
-
margin-left: var(--cds-grid-gutter-start);
|
|
128
|
+
margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
|
|
132
129
|
|
|
133
130
|
[dir='rtl'] & {
|
|
134
|
-
margin-
|
|
135
|
-
margin-left: var(--cds-grid-gutter-end);
|
|
131
|
+
margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
|
|
136
132
|
}
|
|
137
133
|
}
|
|
138
134
|
|
|
139
135
|
// -----------------------------------------------------------------------------
|
|
140
|
-
//
|
|
136
|
+
// Gutter modes
|
|
141
137
|
// -----------------------------------------------------------------------------
|
|
142
138
|
|
|
143
139
|
// Narrow
|
|
@@ -157,17 +153,17 @@
|
|
|
157
153
|
// -----------------------------------------------------------------------------
|
|
158
154
|
.#{$prefix}--subgrid {
|
|
159
155
|
display: grid;
|
|
160
|
-
margin-right: calc(var(--cds-grid-mode-end) * -1);
|
|
161
|
-
margin-left: calc(var(--cds-grid-mode-start) * -1);
|
|
162
156
|
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
157
|
+
margin-inline: calc(var(--cds-grid-mode-start) * -1)
|
|
158
|
+
calc(var(--cds-grid-mode-end) * -1);
|
|
163
159
|
|
|
164
160
|
[dir='rtl'] & {
|
|
165
|
-
margin-
|
|
166
|
-
|
|
161
|
+
margin-inline: calc(var(--cds-grid-mode-end) * -1)
|
|
162
|
+
calc(var(--cds-grid-mode-start) * -1);
|
|
167
163
|
}
|
|
168
164
|
}
|
|
169
165
|
|
|
170
|
-
// Support the
|
|
166
|
+
// Support the gutter modes in subgrids
|
|
171
167
|
.#{$prefix}--subgrid--wide {
|
|
172
168
|
--cds-grid-gutter-start: #{math.div($grid-gutter, 2)};
|
|
173
169
|
--cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
|
|
@@ -194,11 +190,10 @@
|
|
|
194
190
|
// Helper class to allow for text alignment in columns where the leading
|
|
195
191
|
// gutter is missing (like narrow) or is reduced (like in condensed).
|
|
196
192
|
.#{$prefix}--grid-column-hang {
|
|
197
|
-
margin-
|
|
193
|
+
margin-inline-start: var(--cds-grid-column-hang);
|
|
198
194
|
|
|
199
195
|
[dir='rtl'] & {
|
|
200
|
-
margin-
|
|
201
|
-
margin-left: initial;
|
|
196
|
+
margin-inline: initial var(--cds-grid-column-hang);
|
|
202
197
|
}
|
|
203
198
|
}
|
|
204
199
|
|
package/scss/_flex-grid.scss
CHANGED
|
@@ -35,23 +35,20 @@
|
|
|
35
35
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
36
36
|
// always setting `width: 100%;`. This works because we use `flex` values
|
|
37
37
|
// later on to override this initial width.
|
|
38
|
-
|
|
39
|
-
padding-
|
|
40
|
-
padding-left: $gutter * 0.5;
|
|
38
|
+
inline-size: 100%;
|
|
39
|
+
padding-inline: $gutter * 0.5;
|
|
41
40
|
|
|
42
41
|
// For our condensed use-case, our gutters collapse to 2px solid, 1px on each
|
|
43
42
|
// side.
|
|
44
43
|
.#{$prefix}--row--condensed &,
|
|
45
44
|
.#{$prefix}--grid--condensed & {
|
|
46
|
-
padding-
|
|
47
|
-
padding-left: $condensed-gutter * 0.5;
|
|
45
|
+
padding-inline: $condensed-gutter * 0.5;
|
|
48
46
|
}
|
|
49
47
|
|
|
50
48
|
// For our narrow use-case, our container hangs 16px into the gutter
|
|
51
49
|
.#{$prefix}--row--narrow &,
|
|
52
50
|
.#{$prefix}--grid--narrow & {
|
|
53
|
-
padding-
|
|
54
|
-
padding-left: 0;
|
|
51
|
+
padding-inline: 0 $gutter * 0.5;
|
|
55
52
|
}
|
|
56
53
|
}
|
|
57
54
|
|
|
@@ -70,8 +67,8 @@
|
|
|
70
67
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
71
68
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
72
69
|
// do not appear to require this.
|
|
73
|
-
max-width: math.percentage(math.div($span, $columns));
|
|
74
70
|
flex: 0 0 math.percentage(math.div($span, $columns));
|
|
71
|
+
max-inline-size: math.percentage(math.div($span, $columns));
|
|
75
72
|
}
|
|
76
73
|
}
|
|
77
74
|
|
|
@@ -84,9 +81,9 @@
|
|
|
84
81
|
$offset: 0;
|
|
85
82
|
$offset: math.div($span, $columns);
|
|
86
83
|
@if $offset == 0 {
|
|
87
|
-
margin-
|
|
84
|
+
margin-inline-start: 0;
|
|
88
85
|
} @else {
|
|
89
|
-
margin-
|
|
86
|
+
margin-inline-start: math.percentage($offset);
|
|
90
87
|
}
|
|
91
88
|
}
|
|
92
89
|
|
|
@@ -123,17 +120,17 @@
|
|
|
123
120
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
124
121
|
.#{$prefix}--col,
|
|
125
122
|
.#{$prefix}--col#{$infix} {
|
|
126
|
-
max-width: 100%;
|
|
127
123
|
flex-basis: 0;
|
|
128
124
|
flex-grow: 1;
|
|
125
|
+
max-inline-size: 100%;
|
|
129
126
|
}
|
|
130
127
|
|
|
131
128
|
.#{$prefix}--col--auto,
|
|
132
129
|
.#{$prefix}--col#{$infix}--auto {
|
|
133
|
-
width: auto;
|
|
134
|
-
// Reset earlier grid tiers
|
|
135
|
-
max-width: 100%;
|
|
136
130
|
flex: 1 0 0%;
|
|
131
|
+
inline-size: auto;
|
|
132
|
+
// Reset earlier grid tiers
|
|
133
|
+
max-inline-size: 100%;
|
|
137
134
|
}
|
|
138
135
|
|
|
139
136
|
@for $i from 0 through $columns {
|
|
@@ -164,8 +161,7 @@
|
|
|
164
161
|
@mixin -make-row($gutter: $grid-gutter) {
|
|
165
162
|
display: flex;
|
|
166
163
|
flex-wrap: wrap;
|
|
167
|
-
margin-
|
|
168
|
-
margin-left: -1 * $gutter * 0.5;
|
|
164
|
+
margin-inline: -1 * $gutter * 0.5;
|
|
169
165
|
}
|
|
170
166
|
|
|
171
167
|
// -----------------------------------------------------------------------------
|
|
@@ -179,18 +175,17 @@
|
|
|
179
175
|
@mixin -no-gutter {
|
|
180
176
|
.#{$prefix}--no-gutter,
|
|
181
177
|
.#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
|
|
182
|
-
padding-
|
|
183
|
-
padding-left: 0;
|
|
178
|
+
padding-inline: 0;
|
|
184
179
|
}
|
|
185
180
|
|
|
186
181
|
.#{$prefix}--no-gutter--start,
|
|
187
182
|
.#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
|
|
188
|
-
padding-
|
|
183
|
+
padding-inline-start: 0;
|
|
189
184
|
}
|
|
190
185
|
|
|
191
186
|
.#{$prefix}--no-gutter--end,
|
|
192
187
|
.#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
|
|
193
|
-
padding-
|
|
188
|
+
padding-inline-end: 0;
|
|
194
189
|
}
|
|
195
190
|
}
|
|
196
191
|
|
|
@@ -205,11 +200,11 @@
|
|
|
205
200
|
/// @group @carbon/grid
|
|
206
201
|
@mixin -hang($gutter: $grid-gutter) {
|
|
207
202
|
.#{$prefix}--hang--start {
|
|
208
|
-
padding-
|
|
203
|
+
padding-inline-start: $gutter * 0.5;
|
|
209
204
|
}
|
|
210
205
|
|
|
211
206
|
.#{$prefix}--hang--end {
|
|
212
|
-
padding-
|
|
207
|
+
padding-inline-end: $gutter * 0.5;
|
|
213
208
|
}
|
|
214
209
|
}
|
|
215
210
|
|
|
@@ -223,8 +218,7 @@
|
|
|
223
218
|
/// @access private
|
|
224
219
|
/// @group @carbon/grid
|
|
225
220
|
@mixin -make-container($breakpoints: $grid-breakpoints) {
|
|
226
|
-
margin-
|
|
227
|
-
margin-left: auto;
|
|
221
|
+
margin-inline: auto;
|
|
228
222
|
|
|
229
223
|
@include -set-largest-breakpoint($breakpoints);
|
|
230
224
|
|
|
@@ -236,14 +230,12 @@
|
|
|
236
230
|
$prev-margin: map.get($prev-breakpoint, margin);
|
|
237
231
|
@if $prev-margin != $margin {
|
|
238
232
|
@include breakpoint($name) {
|
|
239
|
-
padding-
|
|
240
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
233
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
241
234
|
}
|
|
242
235
|
}
|
|
243
236
|
} @else {
|
|
244
237
|
@include breakpoint($name) {
|
|
245
|
-
padding-
|
|
246
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
238
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
247
239
|
}
|
|
248
240
|
}
|
|
249
241
|
}
|
|
@@ -256,7 +248,7 @@
|
|
|
256
248
|
@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
|
|
257
249
|
$largest-breakpoint: -last-map-item($breakpoints);
|
|
258
250
|
|
|
259
|
-
max-
|
|
251
|
+
max-inline-size: map.get($largest-breakpoint, 'width');
|
|
260
252
|
}
|
|
261
253
|
|
|
262
254
|
/// Add in the max-widths for each breakpoint to the container
|
|
@@ -266,7 +258,7 @@
|
|
|
266
258
|
@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
|
|
267
259
|
@each $name, $value in $breakpoints {
|
|
268
260
|
@include breakpoint($name) {
|
|
269
|
-
max-
|
|
261
|
+
max-inline-size: map.get($value, width);
|
|
270
262
|
}
|
|
271
263
|
}
|
|
272
264
|
}
|
|
@@ -309,7 +301,7 @@
|
|
|
309
301
|
|
|
310
302
|
@include largest-breakpoint($breakpoints) {
|
|
311
303
|
.#{$prefix}--grid--full-width {
|
|
312
|
-
max-
|
|
304
|
+
max-inline-size: 100%;
|
|
313
305
|
}
|
|
314
306
|
}
|
|
315
307
|
|
|
@@ -319,13 +311,11 @@
|
|
|
319
311
|
|
|
320
312
|
.#{$prefix}--row-padding [class*='#{$prefix}--col'],
|
|
321
313
|
.#{$prefix}--col-padding {
|
|
322
|
-
padding-
|
|
323
|
-
padding-bottom: $grid-gutter * 0.5;
|
|
314
|
+
padding-block: $grid-gutter * 0.5;
|
|
324
315
|
}
|
|
325
316
|
|
|
326
317
|
.#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
|
|
327
|
-
padding-
|
|
328
|
-
padding-bottom: $condensed-gutter * 0.5;
|
|
318
|
+
padding-block: $condensed-gutter * 0.5;
|
|
329
319
|
}
|
|
330
320
|
|
|
331
321
|
@include -make-grid-columns($breakpoints, $grid-gutter);
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
/// Emit all the styles related to the CSS Grid, these include:
|
|
16
16
|
/// - The base grid class
|
|
17
|
-
/// - The various
|
|
17
|
+
/// - The various gutter modes
|
|
18
18
|
/// - The ability to specifiy column span
|
|
19
19
|
/// - The ability to specifiy column start,end position
|
|
20
20
|
/// - Support for subgrid
|
|
@@ -94,23 +94,21 @@
|
|
|
94
94
|
--cds-grid-column-hang: calc(var(--cds-grid-gutter) / 2);
|
|
95
95
|
|
|
96
96
|
display: grid;
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
98
|
+
inline-size: 100%;
|
|
99
|
+
margin-inline: auto;
|
|
100
|
+
max-inline-size: get-grid-width(
|
|
99
101
|
$breakpoints,
|
|
100
102
|
largest-breakpoint-name($breakpoints)
|
|
101
103
|
);
|
|
102
|
-
padding-
|
|
103
|
-
padding-left: var(--cds-grid-margin);
|
|
104
|
-
margin-right: auto;
|
|
105
|
-
margin-left: auto;
|
|
106
|
-
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
104
|
+
padding-inline: var(--cds-grid-margin);
|
|
107
105
|
}
|
|
108
106
|
|
|
109
107
|
// -----------------------------------------------------------------------------
|
|
110
108
|
// Full width
|
|
111
109
|
// -----------------------------------------------------------------------------
|
|
112
110
|
.#{$prefix}--css-grid--full-width {
|
|
113
|
-
max-
|
|
111
|
+
max-inline-size: 100%;
|
|
114
112
|
}
|
|
115
113
|
|
|
116
114
|
// -----------------------------------------------------------------------------
|
|
@@ -127,17 +125,15 @@
|
|
|
127
125
|
--cds-grid-mode-start: var(--cds-grid-gutter-start);
|
|
128
126
|
--cds-grid-mode-end: var(--cds-grid-gutter-end);
|
|
129
127
|
|
|
130
|
-
margin-
|
|
131
|
-
margin-left: var(--cds-grid-gutter-start);
|
|
128
|
+
margin-inline: var(--cds-grid-gutter-start) var(--cds-grid-gutter-end);
|
|
132
129
|
|
|
133
130
|
[dir='rtl'] & {
|
|
134
|
-
margin-
|
|
135
|
-
margin-left: var(--cds-grid-gutter-end);
|
|
131
|
+
margin-inline: var(--cds-grid-gutter-end) var(--cds-grid-gutter-start);
|
|
136
132
|
}
|
|
137
133
|
}
|
|
138
134
|
|
|
139
135
|
// -----------------------------------------------------------------------------
|
|
140
|
-
//
|
|
136
|
+
// Gutter modes
|
|
141
137
|
// -----------------------------------------------------------------------------
|
|
142
138
|
|
|
143
139
|
// Narrow
|
|
@@ -157,17 +153,17 @@
|
|
|
157
153
|
// -----------------------------------------------------------------------------
|
|
158
154
|
.#{$prefix}--subgrid {
|
|
159
155
|
display: grid;
|
|
160
|
-
margin-right: calc(var(--cds-grid-mode-end) * -1);
|
|
161
|
-
margin-left: calc(var(--cds-grid-mode-start) * -1);
|
|
162
156
|
grid-template-columns: repeat(var(--cds-grid-columns), minmax(0, 1fr));
|
|
157
|
+
margin-inline: calc(var(--cds-grid-mode-start) * -1)
|
|
158
|
+
calc(var(--cds-grid-mode-end) * -1);
|
|
163
159
|
|
|
164
160
|
[dir='rtl'] & {
|
|
165
|
-
margin-
|
|
166
|
-
|
|
161
|
+
margin-inline: calc(var(--cds-grid-mode-end) * -1)
|
|
162
|
+
calc(var(--cds-grid-mode-start) * -1);
|
|
167
163
|
}
|
|
168
164
|
}
|
|
169
165
|
|
|
170
|
-
// Support the
|
|
166
|
+
// Support the gutter modes in subgrids
|
|
171
167
|
.#{$prefix}--subgrid--wide {
|
|
172
168
|
--cds-grid-gutter-start: #{math.div($grid-gutter, 2)};
|
|
173
169
|
--cds-grid-gutter-end: #{math.div($grid-gutter, 2)};
|
|
@@ -194,11 +190,10 @@
|
|
|
194
190
|
// Helper class to allow for text alignment in columns where the leading
|
|
195
191
|
// gutter is missing (like narrow) or is reduced (like in condensed).
|
|
196
192
|
.#{$prefix}--grid-column-hang {
|
|
197
|
-
margin-
|
|
193
|
+
margin-inline-start: var(--cds-grid-column-hang);
|
|
198
194
|
|
|
199
195
|
[dir='rtl'] & {
|
|
200
|
-
margin-
|
|
201
|
-
margin-left: initial;
|
|
196
|
+
margin-inline: initial var(--cds-grid-column-hang);
|
|
202
197
|
}
|
|
203
198
|
}
|
|
204
199
|
|
|
@@ -35,23 +35,20 @@
|
|
|
35
35
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
36
36
|
// always setting `width: 100%;`. This works because we use `flex` values
|
|
37
37
|
// later on to override this initial width.
|
|
38
|
-
|
|
39
|
-
padding-
|
|
40
|
-
padding-left: $gutter * 0.5;
|
|
38
|
+
inline-size: 100%;
|
|
39
|
+
padding-inline: $gutter * 0.5;
|
|
41
40
|
|
|
42
41
|
// For our condensed use-case, our gutters collapse to 2px solid, 1px on each
|
|
43
42
|
// side.
|
|
44
43
|
.#{$prefix}--row--condensed &,
|
|
45
44
|
.#{$prefix}--grid--condensed & {
|
|
46
|
-
padding-
|
|
47
|
-
padding-left: $condensed-gutter * 0.5;
|
|
45
|
+
padding-inline: $condensed-gutter * 0.5;
|
|
48
46
|
}
|
|
49
47
|
|
|
50
48
|
// For our narrow use-case, our container hangs 16px into the gutter
|
|
51
49
|
.#{$prefix}--row--narrow &,
|
|
52
50
|
.#{$prefix}--grid--narrow & {
|
|
53
|
-
padding-
|
|
54
|
-
padding-left: 0;
|
|
51
|
+
padding-inline: 0 $gutter * 0.5;
|
|
55
52
|
}
|
|
56
53
|
}
|
|
57
54
|
|
|
@@ -70,8 +67,8 @@
|
|
|
70
67
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
71
68
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
72
69
|
// do not appear to require this.
|
|
73
|
-
max-width: math.percentage(math.div($span, $columns));
|
|
74
70
|
flex: 0 0 math.percentage(math.div($span, $columns));
|
|
71
|
+
max-inline-size: math.percentage(math.div($span, $columns));
|
|
75
72
|
}
|
|
76
73
|
}
|
|
77
74
|
|
|
@@ -84,9 +81,9 @@
|
|
|
84
81
|
$offset: 0;
|
|
85
82
|
$offset: math.div($span, $columns);
|
|
86
83
|
@if $offset == 0 {
|
|
87
|
-
margin-
|
|
84
|
+
margin-inline-start: 0;
|
|
88
85
|
} @else {
|
|
89
|
-
margin-
|
|
86
|
+
margin-inline-start: math.percentage($offset);
|
|
90
87
|
}
|
|
91
88
|
}
|
|
92
89
|
|
|
@@ -123,17 +120,17 @@
|
|
|
123
120
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
124
121
|
.#{$prefix}--col,
|
|
125
122
|
.#{$prefix}--col#{$infix} {
|
|
126
|
-
max-width: 100%;
|
|
127
123
|
flex-basis: 0;
|
|
128
124
|
flex-grow: 1;
|
|
125
|
+
max-inline-size: 100%;
|
|
129
126
|
}
|
|
130
127
|
|
|
131
128
|
.#{$prefix}--col--auto,
|
|
132
129
|
.#{$prefix}--col#{$infix}--auto {
|
|
133
|
-
width: auto;
|
|
134
|
-
// Reset earlier grid tiers
|
|
135
|
-
max-width: 100%;
|
|
136
130
|
flex: 1 0 0%;
|
|
131
|
+
inline-size: auto;
|
|
132
|
+
// Reset earlier grid tiers
|
|
133
|
+
max-inline-size: 100%;
|
|
137
134
|
}
|
|
138
135
|
|
|
139
136
|
@for $i from 0 through $columns {
|
|
@@ -164,8 +161,7 @@
|
|
|
164
161
|
@mixin -make-row($gutter: $grid-gutter) {
|
|
165
162
|
display: flex;
|
|
166
163
|
flex-wrap: wrap;
|
|
167
|
-
margin-
|
|
168
|
-
margin-left: -1 * $gutter * 0.5;
|
|
164
|
+
margin-inline: -1 * $gutter * 0.5;
|
|
169
165
|
}
|
|
170
166
|
|
|
171
167
|
// -----------------------------------------------------------------------------
|
|
@@ -179,18 +175,17 @@
|
|
|
179
175
|
@mixin -no-gutter {
|
|
180
176
|
.#{$prefix}--no-gutter,
|
|
181
177
|
.#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
|
|
182
|
-
padding-
|
|
183
|
-
padding-left: 0;
|
|
178
|
+
padding-inline: 0;
|
|
184
179
|
}
|
|
185
180
|
|
|
186
181
|
.#{$prefix}--no-gutter--start,
|
|
187
182
|
.#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
|
|
188
|
-
padding-
|
|
183
|
+
padding-inline-start: 0;
|
|
189
184
|
}
|
|
190
185
|
|
|
191
186
|
.#{$prefix}--no-gutter--end,
|
|
192
187
|
.#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
|
|
193
|
-
padding-
|
|
188
|
+
padding-inline-end: 0;
|
|
194
189
|
}
|
|
195
190
|
}
|
|
196
191
|
|
|
@@ -205,11 +200,11 @@
|
|
|
205
200
|
/// @group @carbon/grid
|
|
206
201
|
@mixin -hang($gutter: $grid-gutter) {
|
|
207
202
|
.#{$prefix}--hang--start {
|
|
208
|
-
padding-
|
|
203
|
+
padding-inline-start: $gutter * 0.5;
|
|
209
204
|
}
|
|
210
205
|
|
|
211
206
|
.#{$prefix}--hang--end {
|
|
212
|
-
padding-
|
|
207
|
+
padding-inline-end: $gutter * 0.5;
|
|
213
208
|
}
|
|
214
209
|
}
|
|
215
210
|
|
|
@@ -223,8 +218,7 @@
|
|
|
223
218
|
/// @access private
|
|
224
219
|
/// @group @carbon/grid
|
|
225
220
|
@mixin -make-container($breakpoints: $grid-breakpoints) {
|
|
226
|
-
margin-
|
|
227
|
-
margin-left: auto;
|
|
221
|
+
margin-inline: auto;
|
|
228
222
|
|
|
229
223
|
@include -set-largest-breakpoint($breakpoints);
|
|
230
224
|
|
|
@@ -236,14 +230,12 @@
|
|
|
236
230
|
$prev-margin: map.get($prev-breakpoint, margin);
|
|
237
231
|
@if $prev-margin != $margin {
|
|
238
232
|
@include breakpoint($name) {
|
|
239
|
-
padding-
|
|
240
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
233
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
241
234
|
}
|
|
242
235
|
}
|
|
243
236
|
} @else {
|
|
244
237
|
@include breakpoint($name) {
|
|
245
|
-
padding-
|
|
246
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
238
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
247
239
|
}
|
|
248
240
|
}
|
|
249
241
|
}
|
|
@@ -256,7 +248,7 @@
|
|
|
256
248
|
@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
|
|
257
249
|
$largest-breakpoint: -last-map-item($breakpoints);
|
|
258
250
|
|
|
259
|
-
max-
|
|
251
|
+
max-inline-size: map.get($largest-breakpoint, 'width');
|
|
260
252
|
}
|
|
261
253
|
|
|
262
254
|
/// Add in the max-widths for each breakpoint to the container
|
|
@@ -266,7 +258,7 @@
|
|
|
266
258
|
@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
|
|
267
259
|
@each $name, $value in $breakpoints {
|
|
268
260
|
@include breakpoint($name) {
|
|
269
|
-
max-
|
|
261
|
+
max-inline-size: map.get($value, width);
|
|
270
262
|
}
|
|
271
263
|
}
|
|
272
264
|
}
|
|
@@ -309,7 +301,7 @@
|
|
|
309
301
|
|
|
310
302
|
@include largest-breakpoint($breakpoints) {
|
|
311
303
|
.#{$prefix}--grid--full-width {
|
|
312
|
-
max-
|
|
304
|
+
max-inline-size: 100%;
|
|
313
305
|
}
|
|
314
306
|
}
|
|
315
307
|
|
|
@@ -319,13 +311,11 @@
|
|
|
319
311
|
|
|
320
312
|
.#{$prefix}--row-padding [class*='#{$prefix}--col'],
|
|
321
313
|
.#{$prefix}--col-padding {
|
|
322
|
-
padding-
|
|
323
|
-
padding-bottom: $grid-gutter * 0.5;
|
|
314
|
+
padding-block: $grid-gutter * 0.5;
|
|
324
315
|
}
|
|
325
316
|
|
|
326
317
|
.#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
|
|
327
|
-
padding-
|
|
328
|
-
padding-bottom: $condensed-gutter * 0.5;
|
|
318
|
+
padding-block: $condensed-gutter * 0.5;
|
|
329
319
|
}
|
|
330
320
|
|
|
331
321
|
@include -make-grid-columns($breakpoints, $grid-gutter);
|
|
@@ -29,23 +29,20 @@
|
|
|
29
29
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
30
30
|
// always setting `width: 100%;`. This works because we use `flex` values
|
|
31
31
|
// later on to override this initial width.
|
|
32
|
-
|
|
33
|
-
padding-
|
|
34
|
-
padding-left: ($gutter * 0.5);
|
|
32
|
+
inline-size: 100%;
|
|
33
|
+
padding-inline: ($gutter * 0.5);
|
|
35
34
|
|
|
36
35
|
// For our condensed use-case, our gutters collapse to 2px solid, 1px on each
|
|
37
36
|
// side.
|
|
38
37
|
.#{$prefix}--row--condensed &,
|
|
39
38
|
.#{$prefix}--grid--condensed & {
|
|
40
|
-
padding-
|
|
41
|
-
padding-left: ($condensed-gutter * 0.5);
|
|
39
|
+
padding-inline: ($condensed-gutter * 0.5);
|
|
42
40
|
}
|
|
43
41
|
|
|
44
42
|
// For our narrow use-case, our container hangs 16px into the gutter
|
|
45
43
|
.#{$prefix}--row--narrow &,
|
|
46
44
|
.#{$prefix}--grid--narrow & {
|
|
47
|
-
padding-
|
|
48
|
-
padding-left: 0;
|
|
45
|
+
padding-inline: 0 ($gutter * 0.5);
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
48
|
|
|
@@ -64,8 +61,8 @@
|
|
|
64
61
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
65
62
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
66
63
|
// do not appear to require this.
|
|
67
|
-
max-width: math.percentage(math.div($span, $columns));
|
|
68
64
|
flex: 0 0 math.percentage(math.div($span, $columns));
|
|
65
|
+
max-inline-size: math.percentage(math.div($span, $columns));
|
|
69
66
|
}
|
|
70
67
|
}
|
|
71
68
|
|
|
@@ -78,9 +75,9 @@
|
|
|
78
75
|
$offset: 0;
|
|
79
76
|
$offset: math.div($span, $columns);
|
|
80
77
|
@if $offset == 0 {
|
|
81
|
-
margin-
|
|
78
|
+
margin-inline-start: 0;
|
|
82
79
|
} @else {
|
|
83
|
-
margin-
|
|
80
|
+
margin-inline-start: math.percentage($offset);
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
|
|
@@ -117,17 +114,17 @@
|
|
|
117
114
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
118
115
|
.#{$prefix}--col,
|
|
119
116
|
.#{$prefix}--col#{$infix} {
|
|
120
|
-
max-width: 100%;
|
|
121
117
|
flex-basis: 0;
|
|
122
118
|
flex-grow: 1;
|
|
119
|
+
max-inline-size: 100%;
|
|
123
120
|
}
|
|
124
121
|
|
|
125
122
|
.#{$prefix}--col--auto,
|
|
126
123
|
.#{$prefix}--col#{$infix}--auto {
|
|
127
|
-
width: auto;
|
|
128
|
-
// Reset earlier grid tiers
|
|
129
|
-
max-width: 100%;
|
|
130
124
|
flex: 1 0 0%;
|
|
125
|
+
inline-size: auto;
|
|
126
|
+
// Reset earlier grid tiers
|
|
127
|
+
max-inline-size: 100%;
|
|
131
128
|
}
|
|
132
129
|
|
|
133
130
|
@for $i from 0 through $columns {
|
|
@@ -158,8 +155,7 @@
|
|
|
158
155
|
@mixin make-row($gutter: $grid-gutter) {
|
|
159
156
|
display: flex;
|
|
160
157
|
flex-wrap: wrap;
|
|
161
|
-
margin-
|
|
162
|
-
margin-left: -1 * $gutter * 0.5;
|
|
158
|
+
margin-inline: -1 * $gutter * 0.5;
|
|
163
159
|
}
|
|
164
160
|
|
|
165
161
|
// -----------------------------------------------------------------------------
|
|
@@ -173,18 +169,17 @@
|
|
|
173
169
|
@mixin -no-gutter {
|
|
174
170
|
.#{$prefix}--no-gutter,
|
|
175
171
|
.#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
|
|
176
|
-
padding-
|
|
177
|
-
padding-left: 0;
|
|
172
|
+
padding-inline: 0;
|
|
178
173
|
}
|
|
179
174
|
|
|
180
175
|
.#{$prefix}--no-gutter--start,
|
|
181
176
|
.#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
|
|
182
|
-
padding-
|
|
177
|
+
padding-inline-start: 0;
|
|
183
178
|
}
|
|
184
179
|
|
|
185
180
|
.#{$prefix}--no-gutter--end,
|
|
186
181
|
.#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
|
|
187
|
-
padding-
|
|
182
|
+
padding-inline-end: 0;
|
|
188
183
|
}
|
|
189
184
|
}
|
|
190
185
|
|
|
@@ -199,11 +194,11 @@
|
|
|
199
194
|
/// @group @carbon/grid
|
|
200
195
|
@mixin -hang($gutter: $grid-gutter) {
|
|
201
196
|
.#{$prefix}--hang--start {
|
|
202
|
-
padding-
|
|
197
|
+
padding-inline-start: ($gutter * 0.5);
|
|
203
198
|
}
|
|
204
199
|
|
|
205
200
|
.#{$prefix}--hang--end {
|
|
206
|
-
padding-
|
|
201
|
+
padding-inline-end: ($gutter * 0.5);
|
|
207
202
|
}
|
|
208
203
|
}
|
|
209
204
|
|
|
@@ -217,8 +212,7 @@
|
|
|
217
212
|
/// @access private
|
|
218
213
|
/// @group @carbon/grid
|
|
219
214
|
@mixin -make-container($breakpoints: $grid-breakpoints) {
|
|
220
|
-
margin-
|
|
221
|
-
margin-left: auto;
|
|
215
|
+
margin-inline: auto;
|
|
222
216
|
|
|
223
217
|
@include -set-largest-breakpoint();
|
|
224
218
|
|
|
@@ -230,14 +224,12 @@
|
|
|
230
224
|
$prev-margin: map.get($prev-breakpoint, margin);
|
|
231
225
|
@if $prev-margin != $margin {
|
|
232
226
|
@include breakpoint($name) {
|
|
233
|
-
padding-
|
|
234
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
227
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
235
228
|
}
|
|
236
229
|
}
|
|
237
230
|
} @else {
|
|
238
231
|
@include breakpoint($name) {
|
|
239
|
-
padding-
|
|
240
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
232
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
241
233
|
}
|
|
242
234
|
}
|
|
243
235
|
}
|
|
@@ -250,7 +242,7 @@
|
|
|
250
242
|
@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
|
|
251
243
|
$largest-breakpoint: last-map-item($breakpoints);
|
|
252
244
|
|
|
253
|
-
max-
|
|
245
|
+
max-inline-size: map.get($largest-breakpoint, 'width');
|
|
254
246
|
}
|
|
255
247
|
|
|
256
248
|
/// Add in the max-widths for each breakpoint to the container
|
|
@@ -260,7 +252,7 @@
|
|
|
260
252
|
@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
|
|
261
253
|
@each $name, $value in $breakpoints {
|
|
262
254
|
@include breakpoint($name) {
|
|
263
|
-
max-
|
|
255
|
+
max-inline-size: map.get($value, width);
|
|
264
256
|
}
|
|
265
257
|
}
|
|
266
258
|
}
|
|
@@ -282,7 +274,7 @@
|
|
|
282
274
|
|
|
283
275
|
@include largest-breakpoint($breakpoints) {
|
|
284
276
|
.#{$prefix}--grid--full-width {
|
|
285
|
-
max-
|
|
277
|
+
max-inline-size: 100%;
|
|
286
278
|
}
|
|
287
279
|
}
|
|
288
280
|
|
|
@@ -292,13 +284,11 @@
|
|
|
292
284
|
|
|
293
285
|
.#{$prefix}--row-padding [class*='#{$prefix}--col'],
|
|
294
286
|
.#{$prefix}--col-padding {
|
|
295
|
-
padding-
|
|
296
|
-
padding-bottom: $grid-gutter * 0.5;
|
|
287
|
+
padding-block: $grid-gutter * 0.5;
|
|
297
288
|
}
|
|
298
289
|
|
|
299
290
|
.#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
|
|
300
|
-
padding-
|
|
301
|
-
padding-bottom: $condensed-gutter * 0.5;
|
|
291
|
+
padding-block: $condensed-gutter * 0.5;
|
|
302
292
|
}
|
|
303
293
|
|
|
304
294
|
@include -make-grid-columns($breakpoints, $grid-gutter);
|
package/scss/_mixins.scss
CHANGED
|
@@ -29,23 +29,20 @@
|
|
|
29
29
|
// Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
30
30
|
// always setting `width: 100%;`. This works because we use `flex` values
|
|
31
31
|
// later on to override this initial width.
|
|
32
|
-
|
|
33
|
-
padding-
|
|
34
|
-
padding-left: ($gutter * 0.5);
|
|
32
|
+
inline-size: 100%;
|
|
33
|
+
padding-inline: ($gutter * 0.5);
|
|
35
34
|
|
|
36
35
|
// For our condensed use-case, our gutters collapse to 2px solid, 1px on each
|
|
37
36
|
// side.
|
|
38
37
|
.#{$prefix}--row--condensed &,
|
|
39
38
|
.#{$prefix}--grid--condensed & {
|
|
40
|
-
padding-
|
|
41
|
-
padding-left: ($condensed-gutter * 0.5);
|
|
39
|
+
padding-inline: ($condensed-gutter * 0.5);
|
|
42
40
|
}
|
|
43
41
|
|
|
44
42
|
// For our narrow use-case, our container hangs 16px into the gutter
|
|
45
43
|
.#{$prefix}--row--narrow &,
|
|
46
44
|
.#{$prefix}--grid--narrow & {
|
|
47
|
-
padding-
|
|
48
|
-
padding-left: 0;
|
|
45
|
+
padding-inline: 0 ($gutter * 0.5);
|
|
49
46
|
}
|
|
50
47
|
}
|
|
51
48
|
|
|
@@ -64,8 +61,8 @@
|
|
|
64
61
|
// Add a `max-width` to ensure content within each column does not blow out
|
|
65
62
|
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
66
63
|
// do not appear to require this.
|
|
67
|
-
max-width: math.percentage(math.div($span, $columns));
|
|
68
64
|
flex: 0 0 math.percentage(math.div($span, $columns));
|
|
65
|
+
max-inline-size: math.percentage(math.div($span, $columns));
|
|
69
66
|
}
|
|
70
67
|
}
|
|
71
68
|
|
|
@@ -78,9 +75,9 @@
|
|
|
78
75
|
$offset: 0;
|
|
79
76
|
$offset: math.div($span, $columns);
|
|
80
77
|
@if $offset == 0 {
|
|
81
|
-
margin-
|
|
78
|
+
margin-inline-start: 0;
|
|
82
79
|
} @else {
|
|
83
|
-
margin-
|
|
80
|
+
margin-inline-start: math.percentage($offset);
|
|
84
81
|
}
|
|
85
82
|
}
|
|
86
83
|
|
|
@@ -117,17 +114,17 @@
|
|
|
117
114
|
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
|
|
118
115
|
.#{$prefix}--col,
|
|
119
116
|
.#{$prefix}--col#{$infix} {
|
|
120
|
-
max-width: 100%;
|
|
121
117
|
flex-basis: 0;
|
|
122
118
|
flex-grow: 1;
|
|
119
|
+
max-inline-size: 100%;
|
|
123
120
|
}
|
|
124
121
|
|
|
125
122
|
.#{$prefix}--col--auto,
|
|
126
123
|
.#{$prefix}--col#{$infix}--auto {
|
|
127
|
-
width: auto;
|
|
128
|
-
// Reset earlier grid tiers
|
|
129
|
-
max-width: 100%;
|
|
130
124
|
flex: 1 0 0%;
|
|
125
|
+
inline-size: auto;
|
|
126
|
+
// Reset earlier grid tiers
|
|
127
|
+
max-inline-size: 100%;
|
|
131
128
|
}
|
|
132
129
|
|
|
133
130
|
@for $i from 0 through $columns {
|
|
@@ -158,8 +155,7 @@
|
|
|
158
155
|
@mixin make-row($gutter: $grid-gutter) {
|
|
159
156
|
display: flex;
|
|
160
157
|
flex-wrap: wrap;
|
|
161
|
-
margin-
|
|
162
|
-
margin-left: -1 * $gutter * 0.5;
|
|
158
|
+
margin-inline: -1 * $gutter * 0.5;
|
|
163
159
|
}
|
|
164
160
|
|
|
165
161
|
// -----------------------------------------------------------------------------
|
|
@@ -173,18 +169,17 @@
|
|
|
173
169
|
@mixin -no-gutter {
|
|
174
170
|
.#{$prefix}--no-gutter,
|
|
175
171
|
.#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
|
|
176
|
-
padding-
|
|
177
|
-
padding-left: 0;
|
|
172
|
+
padding-inline: 0;
|
|
178
173
|
}
|
|
179
174
|
|
|
180
175
|
.#{$prefix}--no-gutter--start,
|
|
181
176
|
.#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
|
|
182
|
-
padding-
|
|
177
|
+
padding-inline-start: 0;
|
|
183
178
|
}
|
|
184
179
|
|
|
185
180
|
.#{$prefix}--no-gutter--end,
|
|
186
181
|
.#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
|
|
187
|
-
padding-
|
|
182
|
+
padding-inline-end: 0;
|
|
188
183
|
}
|
|
189
184
|
}
|
|
190
185
|
|
|
@@ -199,11 +194,11 @@
|
|
|
199
194
|
/// @group @carbon/grid
|
|
200
195
|
@mixin -hang($gutter: $grid-gutter) {
|
|
201
196
|
.#{$prefix}--hang--start {
|
|
202
|
-
padding-
|
|
197
|
+
padding-inline-start: ($gutter * 0.5);
|
|
203
198
|
}
|
|
204
199
|
|
|
205
200
|
.#{$prefix}--hang--end {
|
|
206
|
-
padding-
|
|
201
|
+
padding-inline-end: ($gutter * 0.5);
|
|
207
202
|
}
|
|
208
203
|
}
|
|
209
204
|
|
|
@@ -217,8 +212,7 @@
|
|
|
217
212
|
/// @access private
|
|
218
213
|
/// @group @carbon/grid
|
|
219
214
|
@mixin -make-container($breakpoints: $grid-breakpoints) {
|
|
220
|
-
margin-
|
|
221
|
-
margin-left: auto;
|
|
215
|
+
margin-inline: auto;
|
|
222
216
|
|
|
223
217
|
@include -set-largest-breakpoint();
|
|
224
218
|
|
|
@@ -230,14 +224,12 @@
|
|
|
230
224
|
$prev-margin: map.get($prev-breakpoint, margin);
|
|
231
225
|
@if $prev-margin != $margin {
|
|
232
226
|
@include breakpoint($name) {
|
|
233
|
-
padding-
|
|
234
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
227
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
235
228
|
}
|
|
236
229
|
}
|
|
237
230
|
} @else {
|
|
238
231
|
@include breakpoint($name) {
|
|
239
|
-
padding-
|
|
240
|
-
padding-left: #{($grid-gutter * 0.5) + $margin};
|
|
232
|
+
padding-inline: #{($grid-gutter * 0.5) + $margin};
|
|
241
233
|
}
|
|
242
234
|
}
|
|
243
235
|
}
|
|
@@ -250,7 +242,7 @@
|
|
|
250
242
|
@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
|
|
251
243
|
$largest-breakpoint: last-map-item($breakpoints);
|
|
252
244
|
|
|
253
|
-
max-
|
|
245
|
+
max-inline-size: map.get($largest-breakpoint, 'width');
|
|
254
246
|
}
|
|
255
247
|
|
|
256
248
|
/// Add in the max-widths for each breakpoint to the container
|
|
@@ -260,7 +252,7 @@
|
|
|
260
252
|
@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
|
|
261
253
|
@each $name, $value in $breakpoints {
|
|
262
254
|
@include breakpoint($name) {
|
|
263
|
-
max-
|
|
255
|
+
max-inline-size: map.get($value, width);
|
|
264
256
|
}
|
|
265
257
|
}
|
|
266
258
|
}
|
|
@@ -282,7 +274,7 @@
|
|
|
282
274
|
|
|
283
275
|
@include largest-breakpoint($breakpoints) {
|
|
284
276
|
.#{$prefix}--grid--full-width {
|
|
285
|
-
max-
|
|
277
|
+
max-inline-size: 100%;
|
|
286
278
|
}
|
|
287
279
|
}
|
|
288
280
|
|
|
@@ -292,13 +284,11 @@
|
|
|
292
284
|
|
|
293
285
|
.#{$prefix}--row-padding [class*='#{$prefix}--col'],
|
|
294
286
|
.#{$prefix}--col-padding {
|
|
295
|
-
padding-
|
|
296
|
-
padding-bottom: $grid-gutter * 0.5;
|
|
287
|
+
padding-block: $grid-gutter * 0.5;
|
|
297
288
|
}
|
|
298
289
|
|
|
299
290
|
.#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
|
|
300
|
-
padding-
|
|
301
|
-
padding-bottom: $condensed-gutter * 0.5;
|
|
291
|
+
padding-block: $condensed-gutter * 0.5;
|
|
302
292
|
}
|
|
303
293
|
|
|
304
294
|
@include -make-grid-columns($breakpoints, $grid-gutter);
|
|
@@ -27,6 +27,21 @@ $base-font-size: 16px !default;
|
|
|
27
27
|
@return math.div($px, $base-font-size) * 1rem;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
/// This function causes an error when using sass > 1.65.0
|
|
31
|
+
/// Replaced with `to-rem` function
|
|
32
|
+
/// @param {Number} $px - Number with px unit
|
|
33
|
+
/// @return {Number} Number with rem unit
|
|
34
|
+
/// @access public
|
|
35
|
+
/// @deprecated
|
|
36
|
+
/// @group @carbon/layout
|
|
37
|
+
@function rem($px) {
|
|
38
|
+
@if unit($px) != 'px' {
|
|
39
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@return math.div($px, $base-font-size) * 1rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
30
45
|
/// Convert a given px unit to a em unit
|
|
31
46
|
/// @param {Number} $px - Number with px unit
|
|
32
47
|
/// @return {Number} Number with em unit
|
|
@@ -27,6 +27,21 @@ $base-font-size: 16px !default;
|
|
|
27
27
|
@return math.div($px, $base-font-size) * 1rem;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
/// This function causes an error when using sass > 1.65.0
|
|
31
|
+
/// Replaced with `to-rem` function
|
|
32
|
+
/// @param {Number} $px - Number with px unit
|
|
33
|
+
/// @return {Number} Number with rem unit
|
|
34
|
+
/// @access public
|
|
35
|
+
/// @deprecated
|
|
36
|
+
/// @group @carbon/layout
|
|
37
|
+
@function rem($px) {
|
|
38
|
+
@if unit($px) != 'px' {
|
|
39
|
+
@error "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@return math.div($px, $base-font-size) * 1rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
30
45
|
/// Convert a given px unit to a em unit
|
|
31
46
|
/// @param {Number} $px - Number with px unit
|
|
32
47
|
/// @return {Number} Number with em unit
|