@carbon/grid 10.22.0-rc.0 → 10.24.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/README.md
CHANGED
|
@@ -70,6 +70,13 @@ The `.bx--col-sm-1` class names tells us that this `<div>` should only span one
|
|
|
70
70
|
column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the
|
|
71
71
|
layout will still take up a percentage of the overall width.
|
|
72
72
|
|
|
73
|
+
## 📚 Examples
|
|
74
|
+
|
|
75
|
+
If you're looking for more examples on how to use `@carbon/grid`, we have some
|
|
76
|
+
examples that you can check out:
|
|
77
|
+
|
|
78
|
+
- [css-grid](./examples/css-grid)
|
|
79
|
+
|
|
73
80
|
## 🙌 Contributing
|
|
74
81
|
|
|
75
82
|
We're always looking for contributors to help us fix bugs, build new features,
|
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.24.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.22.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@carbon/cli": "^10.
|
|
38
|
+
"@carbon/cli": "^10.21.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": "8b9c3660aa5b585052b2aa88079a039697ef276f"
|
|
48
48
|
}
|
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@use 'sass:map';
|
|
9
|
+
@use 'config' as *;
|
|
10
|
+
@use 'breakpoint' as *;
|
|
11
|
+
|
|
12
|
+
@mixin css-grid() {
|
|
13
|
+
display: grid;
|
|
14
|
+
grid-template-columns: repeat(
|
|
15
|
+
var(--cds-grid-columns),
|
|
16
|
+
minmax(0, var(--cds-grid-column-size))
|
|
17
|
+
);
|
|
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
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin subgrid() {
|
|
26
|
+
display: grid;
|
|
27
|
+
grid-template-columns: repeat(
|
|
28
|
+
var(--cds-grid-columns),
|
|
29
|
+
minmax(0, var(--cds-grid-column-size))
|
|
30
|
+
);
|
|
31
|
+
column-gap: var(--cds-grid-gutter);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--cds-grid-columns: 4;
|
|
36
|
+
--cds-grid-column-size: 1fr;
|
|
37
|
+
--cds-grid-gutter: 2rem;
|
|
38
|
+
--cds-grid-hang: 1rem;
|
|
39
|
+
--cds-grid-margin: 0;
|
|
40
|
+
|
|
41
|
+
@include breakpoint(md) {
|
|
42
|
+
--cds-grid-columns: 8;
|
|
43
|
+
--cds-grid-margin: 1rem;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@include breakpoint(lg) {
|
|
47
|
+
--cds-grid-columns: 16;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@include breakpoint(max) {
|
|
51
|
+
--cds-grid-margin: 1.5rem;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.#{$prefix}--css-grid {
|
|
56
|
+
@include css-grid();
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.#{$prefix}--css-grid--12 {
|
|
60
|
+
@include css-grid();
|
|
61
|
+
@include breakpoint(lg) {
|
|
62
|
+
--cds-grid-columns: 12;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.#{$prefix}--subgrid {
|
|
67
|
+
@include subgrid();
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
|
|
71
|
+
margin-right: 0;
|
|
72
|
+
margin-left: 0;
|
|
73
|
+
padding-right: 0;
|
|
74
|
+
padding-left: 0;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
|
|
78
|
+
--cds-grid-gutter: 2rem;
|
|
79
|
+
|
|
80
|
+
margin-right: 0;
|
|
81
|
+
margin-left: 0;
|
|
82
|
+
padding-right: calc(var(--cds-grid-gutter) / 2);
|
|
83
|
+
padding-left: calc(var(--cds-grid-gutter) / 2);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// -----------------------------------------------------------------------------
|
|
87
|
+
// Narrow
|
|
88
|
+
// -----------------------------------------------------------------------------
|
|
89
|
+
.#{$prefix}--css-grid--narrow {
|
|
90
|
+
--cds-grid-margin: 1rem;
|
|
91
|
+
|
|
92
|
+
padding-right: var(--cds-grid-margin);
|
|
93
|
+
padding-left: var(--cds-grid-margin);
|
|
94
|
+
|
|
95
|
+
@include breakpoint(md) {
|
|
96
|
+
padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
|
|
97
|
+
padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.#{$prefix}--css-grid--narrow > [class*='#{$prefix}--col'] {
|
|
102
|
+
margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Narrow subgrid inside condensed
|
|
106
|
+
.#{$prefix}--css-grid--condensed
|
|
107
|
+
.#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
|
|
108
|
+
--cds-grid-gutter: 2rem;
|
|
109
|
+
|
|
110
|
+
padding-right: calc(var(--cds-grid-gutter) / 2);
|
|
111
|
+
padding-left: calc(var(--cds-grid-gutter) / 2);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// -----------------------------------------------------------------------------
|
|
115
|
+
// Condensed
|
|
116
|
+
// -----------------------------------------------------------------------------
|
|
117
|
+
.#{$prefix}--css-grid--condensed {
|
|
118
|
+
--cds-grid-gutter: 2px;
|
|
119
|
+
|
|
120
|
+
column-gap: var(--cds-grid-gutter);
|
|
121
|
+
row-gap: var(--cds-grid-gutter);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// condensed subgrid inside wide
|
|
125
|
+
.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
|
|
126
|
+
margin-right: calc(
|
|
127
|
+
(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
|
|
128
|
+
);
|
|
129
|
+
margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// -----------------------------------------------------------------------------
|
|
133
|
+
// No Gutter
|
|
134
|
+
// -----------------------------------------------------------------------------
|
|
135
|
+
.#{$prefix}--css-grid--no-gutter {
|
|
136
|
+
// This is set to 0px (versus 0) so that the calc expression for padding for
|
|
137
|
+
// a grid container works as epxected. Without the unit, the calc() will
|
|
138
|
+
// result in a value of 0.
|
|
139
|
+
// stylelint-disable-next-line length-zero-no-unit
|
|
140
|
+
--cds-grid-gutter: 0px;
|
|
141
|
+
|
|
142
|
+
column-gap: var(--cds-grid-gutter);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// -----------------------------------------------------------------------------
|
|
146
|
+
// Column span
|
|
147
|
+
// -----------------------------------------------------------------------------
|
|
148
|
+
@mixin -column-span($i) {
|
|
149
|
+
@if $i == 0 {
|
|
150
|
+
display: none;
|
|
151
|
+
} @else {
|
|
152
|
+
--cds-grid-columns: #{$i};
|
|
153
|
+
|
|
154
|
+
grid-column: span $i / span $i;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@for $i from 0 through 16 {
|
|
159
|
+
.#{$prefix}--col-span-#{$i} {
|
|
160
|
+
@include -column-span($i);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.#{$prefix}--col-span-auto {
|
|
165
|
+
grid-column: auto;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.#{$prefix}--col-span-100 {
|
|
169
|
+
grid-column: 1 / -1;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
@each $name, $value in $grid-breakpoints {
|
|
173
|
+
$columns: map.get($value, columns);
|
|
174
|
+
|
|
175
|
+
@include breakpoint($name) {
|
|
176
|
+
@for $i from 0 through $columns {
|
|
177
|
+
.#{$prefix}--#{$name}\:col-span-#{$i} {
|
|
178
|
+
@include -column-span($i);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.#{$prefix}--#{$name}\:col-span-auto {
|
|
183
|
+
grid-column: auto;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.#{$prefix}--#{$name}\:col-span-100 {
|
|
187
|
+
grid-column: 1 / -1;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.#{$prefix}--col-span-25 {
|
|
193
|
+
--cds-grid-columns: 1;
|
|
194
|
+
|
|
195
|
+
grid-column: span 1;
|
|
196
|
+
|
|
197
|
+
@include breakpoint(md) {
|
|
198
|
+
--cds-grid-columns: 2;
|
|
199
|
+
|
|
200
|
+
grid-column: span 2;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
@include breakpoint(lg) {
|
|
204
|
+
--cds-grid-columns: 4;
|
|
205
|
+
|
|
206
|
+
grid-column: span 4;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.#{$prefix}--col-span-50 {
|
|
211
|
+
--cds-grid-columns: 2;
|
|
212
|
+
|
|
213
|
+
grid-column: span 2;
|
|
214
|
+
|
|
215
|
+
@include breakpoint(md) {
|
|
216
|
+
--cds-grid-columns: 4;
|
|
217
|
+
|
|
218
|
+
grid-column: span 4;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@include breakpoint(lg) {
|
|
222
|
+
--cds-grid-columns: 8;
|
|
223
|
+
|
|
224
|
+
grid-column: span 8;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.#{$prefix}--col-span-75 {
|
|
229
|
+
--cds-grid-columns: 3;
|
|
230
|
+
|
|
231
|
+
grid-column: span 3;
|
|
232
|
+
|
|
233
|
+
@include breakpoint(md) {
|
|
234
|
+
--cds-grid-columns: 6;
|
|
235
|
+
|
|
236
|
+
grid-column: span 6;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
@include breakpoint(lg) {
|
|
240
|
+
--cds-grid-columns: 12;
|
|
241
|
+
|
|
242
|
+
grid-column: span 12;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
// -----------------------------------------------------------------------------
|
|
247
|
+
// Column offset
|
|
248
|
+
// -----------------------------------------------------------------------------
|
|
249
|
+
@for $i from 1 through 16 {
|
|
250
|
+
.#{$prefix}--col-start-#{$i} {
|
|
251
|
+
grid-column-start: $i;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.#{$prefix}--col-end-#{$i} {
|
|
255
|
+
grid-column-end: $i;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.#{$prefix}--col-start-auto {
|
|
260
|
+
grid-column-start: auto;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.#{$prefix}--col-end-auto {
|
|
264
|
+
grid-column-start: end;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
@each $name, $value in $grid-breakpoints {
|
|
268
|
+
$columns: map.get($value, columns);
|
|
269
|
+
|
|
270
|
+
@include breakpoint($name) {
|
|
271
|
+
@for $i from 1 through $columns {
|
|
272
|
+
.#{$prefix}--#{$name}\:col-start-#{$i} {
|
|
273
|
+
grid-column-start: $i;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.#{$prefix}--#{$name}\:col-end-#{$i} {
|
|
277
|
+
grid-column-end: $i;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.#{$prefix}--#{$name}\:col-start-auto {
|
|
282
|
+
grid-column-start: auto;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.#{$prefix}--#{$name}\:col-end-auto {
|
|
286
|
+
grid-column-start: end;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
// -----------------------------------------------------------------------------
|
|
292
|
+
// Hang
|
|
293
|
+
// -----------------------------------------------------------------------------
|
|
294
|
+
.#{$prefix}--hang {
|
|
295
|
+
padding-left: var(--cds-grid-hang);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
// -----------------------------------------------------------------------------
|
|
299
|
+
// Column gutter
|
|
300
|
+
// -----------------------------------------------------------------------------
|
|
301
|
+
.#{$prefix}--gutter {
|
|
302
|
+
padding-right: var(--cds-grid-hang);
|
|
303
|
+
padding-left: var(--cds-grid-hang);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.#{$prefix}--gutter-start {
|
|
307
|
+
padding-left: var(--cds-grid-hang);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
[dir='rtl'] .#{$prefix}--gutter-start {
|
|
311
|
+
padding-right: var(--cds-grid-hang);
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.#{$prefix}--gutter-end {
|
|
315
|
+
padding-right: var(--cds-grid-hang);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
[dir='rtl'] .#{$prefix}--gutter-end {
|
|
319
|
+
padding-left: var(--cds-grid-hang);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
// -----------------------------------------------------------------------------
|
|
323
|
+
// Utilities
|
|
324
|
+
// -----------------------------------------------------------------------------
|
|
325
|
+
|
|
326
|
+
/// Justify items
|
|
327
|
+
.#{$prefix}--justify-items-start {
|
|
328
|
+
justify-items: start;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.#{$prefix}--justify-items-end {
|
|
332
|
+
justify-items: end;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.#{$prefix}--justify-items-center {
|
|
336
|
+
justify-items: center;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/// Align items
|
|
340
|
+
.#{$prefix}--align-items-start {
|
|
341
|
+
align-items: start;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.#{$prefix}--align-items-end {
|
|
345
|
+
align-items: end;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.#{$prefix}--align-items-center {
|
|
349
|
+
align-items: center;
|
|
350
|
+
}
|
|
@@ -66,6 +66,11 @@ $carbon--spacing-11: 5rem !default;
|
|
|
66
66
|
/// @group @carbon/layout
|
|
67
67
|
$carbon--spacing-12: 6rem !default;
|
|
68
68
|
|
|
69
|
+
/// @type Number
|
|
70
|
+
/// @access public
|
|
71
|
+
/// @group @carbon/layout
|
|
72
|
+
$carbon--spacing-13: 10rem !default;
|
|
73
|
+
|
|
69
74
|
/// @type List
|
|
70
75
|
/// @access public
|
|
71
76
|
/// @group @carbon/layout
|
|
@@ -81,7 +86,8 @@ $carbon--spacing: (
|
|
|
81
86
|
$carbon--spacing-09,
|
|
82
87
|
$carbon--spacing-10,
|
|
83
88
|
$carbon--spacing-11,
|
|
84
|
-
$carbon--spacing-12
|
|
89
|
+
$carbon--spacing-12,
|
|
90
|
+
$carbon--spacing-13
|
|
85
91
|
);
|
|
86
92
|
|
|
87
93
|
/// @type Number
|
|
@@ -155,3 +161,9 @@ $spacing-11: $carbon--spacing-11 !default;
|
|
|
155
161
|
/// @group @carbon/layout
|
|
156
162
|
/// @alias carbon--spacing-12
|
|
157
163
|
$spacing-12: $carbon--spacing-12 !default;
|
|
164
|
+
|
|
165
|
+
/// @type Number
|
|
166
|
+
/// @access public
|
|
167
|
+
/// @group @carbon/layout
|
|
168
|
+
/// @alias carbon--spacing-13
|
|
169
|
+
$spacing-13: $carbon--spacing-13 !default;
|
|
@@ -66,6 +66,11 @@ $spacing-11: 5rem !default;
|
|
|
66
66
|
/// @group @carbon/layout
|
|
67
67
|
$spacing-12: 6rem !default;
|
|
68
68
|
|
|
69
|
+
/// @type Number
|
|
70
|
+
/// @access public
|
|
71
|
+
/// @group @carbon/layout
|
|
72
|
+
$spacing-13: 10rem !default;
|
|
73
|
+
|
|
69
74
|
/// @type Map
|
|
70
75
|
/// @access public
|
|
71
76
|
/// @group @carbon/layout
|
|
@@ -82,4 +87,5 @@ $spacing: (
|
|
|
82
87
|
spacing-10: $spacing-10,
|
|
83
88
|
spacing-11: $spacing-11,
|
|
84
89
|
spacing-12: $spacing-12,
|
|
90
|
+
spacing-13: $spacing-13,
|
|
85
91
|
);
|