1 |
|
2 | <section>
|
3 | <h2>SASS Reference</h2>
|
4 |
|
5 | {{#if sass.variable}}
|
6 | <section>
|
7 | <h3>Variables</h3>
|
8 | <p>The default styles of this component can be customized using these Sass variables in your project's <a href="/styleguide/settings.html">settings file</a>.</p>
|
9 |
|
10 | <table class="docs-variable-table">
|
11 | <thead>
|
12 | <tr>
|
13 | <th>Name</th>
|
14 | <th>Type</th>
|
15 | <th>Default Value</th>
|
16 | <th>Description</th>
|
17 | </tr>
|
18 | </thead>
|
19 | <tbody>
|
20 | {{#each sass.variable}}
|
21 | <tr>
|
22 | <td>
|
23 | <code>${{this.context.name}}</code>
|
24 | </td>
|
25 | <td>
|
26 | {{formatSassTypes this.type}}
|
27 | </td>
|
28 | <td>
|
29 | <code>{{styleSassValue this.context.value}}</code>
|
30 | </td>
|
31 | <td>
|
32 | {{markdown this.description}}
|
33 | </td>
|
34 | </tr>
|
35 | {{/each}}
|
36 | </tbody>
|
37 | </table>
|
38 | </section>
|
39 | {{/if}}
|
40 |
|
41 | {{#if sass.mixin}}
|
42 | <section class="mtxl">
|
43 | <h3>Mixins</h3>
|
44 | <p>Use the mixins to build your own component class structure out of our bonsai component.</p>
|
45 |
|
46 | {{#each sass.mixin}}
|
47 | <h4>{{this.context.name}}</h4>
|
48 | {{markdown this.description}}
|
49 | <div class="mbl docs-code"><code>{{writeSassMixin this}}</code></div>
|
50 |
|
51 | {{#if this.parameter}}
|
52 | <table class="docs-variable-table">
|
53 | <thead>
|
54 | <tr>
|
55 | <th>Parameter</th>
|
56 | <th>Type</th>
|
57 | <th>Default Value</th>
|
58 | <th>Description</th>
|
59 | </tr>
|
60 | </thead>
|
61 | <tbody>
|
62 | {{#each this.parameter}}
|
63 | <tr>
|
64 | <td><code>${{this.name}}</code></td>
|
65 | <td>{{formatSassTypes this.type}}</td>
|
66 | <td>{{styleSassValue this.default}}</td>
|
67 | <td>{{markdown this.description}}</td>
|
68 | </tr>
|
69 | {{/each}}
|
70 | </tbody>
|
71 | </table>
|
72 | {{/if}}
|
73 |
|
74 | <hr><br>
|
75 | {{/each}}
|
76 | </section>
|
77 | {{/if}}
|
78 | </section>
|