-
Notifications
You must be signed in to change notification settings - Fork 4
/
item.twig
67 lines (62 loc) · 2.68 KB
/
item.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{% extends 'base.twig' %}
{% block body %}
{% for section in sections %}
{# section colors #}
{% if section.colors %}
<ul class="co_colors">
{% for color in section.colors %}
<li class="co_colors-item co_box">
<figure class="co_color">
<div class="co_color-demo" style="background-color:{{ color.color }}"></div>
<figcaption class="co_color-caption">
{% if color.name %}
<strong class="co_color-name">{{ color.name }}</strong>
{% endif %}
<code class="co_color-hex">{{ color.color }}</code>
{% if color.description %}
<p class="co_color-desk">{{ color.description }}</p>
{% endif %}
</figcaption>
</figure>
</li>
{% endfor %}
</ul>
{% endif %}
{# section symbols #}
{% if section.symbols %}
<ul class="co_symbols">
{% kssSymbols section.symbols section.source.path %}
{% if list %}
<li class="co_symbols-group">
<p class="co_symbols-group-title">{{ name }}</p>
<ul class="co_symbols">{{ list|raw }}</ul>
</li>
{% else %}
<li class="co_symbols-item co_box">
<figure class="co_symbol">
<div class="co_symbol-demo">
<svg width="40" height="40"><use xlink:href="{{ '#' ~ options.svgPrefix|default('') ~ id }}"></use></svg>
</div>
<figcaption class="co_symbol-name">{{ name }}</figcaption>
</figure>
</li>
{% endif %}
{% endkssSymbols %}
</ul>
{% endif %}
{# section example #}
{% if section.example %}
{{ section.example|raw }}
{# modifiers #}
{% if section.modifiers is not empty %}
{% for modifier in section.modifiers %}
<hr />
{{ modifier.markup|raw }}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
{% endblock %}
{% block kss_scripts %}
<script async src="kss-assets/kss-item.bundle.js"></script>
{% endblock %}