sass-site/source/_includes/code_examples/code_example.liquid
2023-03-10 16:18:02 -05:00

28 lines
1.3 KiB
Plaintext

<div
class="code-example ui-tabs{% if code.canSplit %} can-split{% endif %}"{% if code.splitLocation %}
style="--split-location: {{ code.splitLocation }}%"{% endif %}
>
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix">
{% if code.scss.size %}
{% render 'code_examples/tab', name: 'SCSS', syntax: 'scss', id: exampleName, enabled: true %}
{% endif %}
{% if code.sass.size %}
{% assign enabled = code.scss.size == 0 %}
{% render 'code_examples/tab', name: 'Sass', syntax: 'sass', id: exampleName, enabled: enabled %}
{% endif %}
{% if code.css.size %}
{% render 'code_examples/tab', name: 'CSS', syntax: 'css', id: exampleName, enabled: false %}
{% endif %}
</ul>
{% if code.scss.size %}
{% render 'code_examples/panel', name: 'SCSS Syntax', syntax: 'scss', id: exampleName, examples: code.scss, paddings: code.scssPaddings, enabled: true %}
{% endif %}
{% if code.sass.size %}
{% assign enabled = code.scss.size == 0 %}
{% render 'code_examples/panel', name: 'Sass Syntax', syntax: 'sass', id: exampleName, examples: code.sass, paddings: code.sassPaddings, enabled: enabled %}
{% endif %}
{% if code.css.size %}
{% render 'code_examples/panel', name: 'CSS Output', syntax: 'css', id: exampleName, examples: code.css, paddings: code.cssPaddings, enabled: false %}
{% endif %}
</div>