@ithaka/bonsai/documentation/partials/sass-reference.html

ITHAKA core styling

<section>
    <h2>SASS Reference</h2>

    {{#if sass.variable}}
    <section>
        <h3>Variables</h3>
        <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>

        <table class="docs-variable-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Default Value</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                {{#each sass.variable}}
                    <tr>
                        <td>
                            <code>${{this.context.name}}</code>
                        </td>
                        <td>
                            {{formatSassTypes this.type}}
                        </td>
                        <td>
                            <code>{{styleSassValue this.context.value}}</code>
                        </td>
                        <td>
                            {{markdown this.description}}
                        </td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </section>
    {{/if}}

    {{#if sass.mixin}}
    <section class="mtxl">
        <h3>Mixins</h3>
        <p>Use the mixins to build your own component class structure out of our bonsai component.</p>

        {{#each sass.mixin}}
            <h4>{{this.context.name}}</h4>
            {{markdown this.description}}
            <div class="mbl docs-code"><code>{{writeSassMixin this}}</code></div>

            {{#if this.parameter}}
            <table class="docs-variable-table">
                <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default Value</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody>
                    {{#each this.parameter}}
                        <tr>
                            <td><code>${{this.name}}</code></td>
                            <td>{{formatSassTypes this.type}}</td>
                            <td>{{styleSassValue this.default}}</td>
                            <td>{{markdown this.description}}</td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
            {{/if}}

            <hr><br>
        {{/each}}
    </section>
    {{/if}}
</section>