1 |
|
2 | Copyright IBM Corp. 2016, 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 | {{#if @root.featureFlags.grid}}
|
9 | <div class="{{@root.prefix}}--grid">
|
10 | {{#each @root.rows as |row|}}
|
11 | <div class="{{@root.prefix}}--row">
|
12 | <div class="bx--col bx--col--auto">
|
13 | <p>{{row.title}}</p>
|
14 | </div>
|
15 | </div>
|
16 | <div class="{{@root.prefix}}--row">
|
17 | {{#each row.columns}}
|
18 | <div class="{{@root.prefix}}--col-{{row.breakpoint}}-1">
|
19 | <div class="outside">
|
20 | <div class="inside">1</div>
|
21 | </div>
|
22 | </div>
|
23 | {{/each}}
|
24 | </div>
|
25 | {{/each}}
|
26 | </div>
|
27 | {{else}}
|
28 | <div class="{{@root.prefix}}--grid">
|
29 | <div class="{{@root.prefix}}--row">
|
30 | <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 indigo">
|
31 | <div class="{{@root.prefix}}--row">
|
32 | <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6">
|
33 | <div class="col-example">
|
34 | <p>Content space for {{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6</p>
|
35 | </div>
|
36 | </div>
|
37 | <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 green">
|
38 | <p>Full space for {{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 (columns naturally have padding on them, adding a background color to
|
39 | the column directly will effect the entire column, as opposed to using a child element in the example to the
|
40 | left). </p>
|
41 | </div>
|
42 | </div>
|
43 |
|
44 | <p>Columns also expand to match the vertical size of the rest of the row (see red column)</p>
|
45 | </div>
|
46 | <div class="{{@root.prefix}}--col-xs-12 {{@root.prefix}}--col-sm-6 red">
|
47 | <p>Background color over entire column, not just content space</p>
|
48 | </div>
|
49 | <div class="{{@root.prefix}}--row">
|
50 | <div class="{{@root.prefix}}--offset-xs-2 {{@root.prefix}}--col-xs-10">This content is offset. Offset adds a left-margin for x columns.</div>
|
51 | </div>
|
52 | </div>
|
53 | </div>
|
54 | {{/if}}
|
55 |
|
\ | No newline at end of file |