<!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>{{ options.title }}</title> <meta name="description" content=""> <meta name="generator" content="kss-node"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="kss-assets/kss.css"> {{ styles|raw }} </head> <body id="kss-node" {% if template.isItem %}class="kss-fullscreen-mode"{% endif %}> <div class="kss-sidebar kss-style"> <header class="kss-header"> <a href="/"><h1 class="kss-doc-title">{{ options.title }}</h1></a> </header> <nav class="kss-nav"> <ul class="kss-nav__menu"> {% for menu_item in menu %} <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-{{ menu_item.referenceURI }}.html"> <span class="kss-nav__name">{{ menu_item.header }}</span> </a> {% if menu_item.isActive and menu_item.children is not empty %} <ul class="kss-nav__menu-child"> {% for menu_child in menu_item.children %} <li class="kss-nav__menu-item"> <a class="kss-nav__menu-link" href="section-{{ menu_item.referenceURI }}.html#kssref-{{ menu_child.referenceURI }}"> <span class="kss-nav__name">{{ menu_child.header }}</span> </a> </li> {% endfor %} </ul> {% endif %} </li> {% endfor %} </ul> </nav> </div> <article role="main" class="kss-main"> {% if template.isHomepage %} {% if homepage %} <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style"> {{ homepage|raw }} </div> {% endif %} {% else %} {# Display each section, in order. The "root" element comes first in this loop, and can be detected using the "loop.first" variable as seen below. #} {% for section in sections %} {% set sectionElement = loop.first ? 'div' : 'section' %} <{{ sectionElement }} id="kssref-{{ section.referenceURI }}" class="kss-section kss-section--depth-{{ section.depth }} {% if template.isItem %}is-fullscreen{% endif %}"> <div class="kss-style"> {% set headerElement = (section.depth > 6) ? 'h6' : 'h' ~ section.depth %} <{{ headerElement }} class="kss-title kss-title--level-{{ section.depth }}"> <a class="kss-title__permalink" href="#kssref-{{ section.referenceURI }}"> {{ section.header }} </a> </{{ headerElement }}> {% if section.source.filename %} <div class="kss-source kss-style"> Source: <code>{{ section.source.filename }}</code>, line {{ section.source.line }} </div> {% endif %} {% if section.example %} <p class="kss-toolbar"> {% if not template.isItem %} <a href="#kssref-{{section.referenceURI}}" data-kss-fullscreen="kssref-{{section.referenceURI}}"> <span class="kss-toolbar__tooltip">Toggle full screen</span> <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path> </svg> </a> <a href="item-{{section.referenceURI}}.html" target="_blank"> <span class="kss-toolbar__tooltip">Open in new window</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect x="0" y="20" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/> <rect x="24" y="0" width="40" height="44" fill="#fff"/> <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/> <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/> </svg> </a> {% endif %} <a href="#kssref-{{section.referenceURI}}" data-kss-guides="true"> <span class="kss-toolbar__tooltip">Toggle example guides</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/> <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/> <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/> <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/> <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/> </svg> </a> <a href="#kssref-{{section.referenceURI}}" data-kss-markup="true"> <span class="kss-toolbar__tooltip">Toggle HTML markup</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64"> <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/> <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/> </svg> </a> </p> {% endif %} {% if section.description %} <div class="kss-description"> {{ section.description|raw }} </div> {% endif %} {% for parameter in section.parameters %} {% if loop.first %} <div class="kss-parameters__title">Parameters:</div> <ul class="kss-parameters"> {% endif %} <li class="kss-parameters__item"> <div class="kss-parameters__name"><code>{{ parameter.name }}</code></div> <div class="kss-parameters__description"> {{ parameter.description|raw }} {% if parameter.defaultValue %} <div class="kss-parameters__default-value"> Defaults to: <code>{{ parameter.defaultValue }}</code> </div> {% endif %} </div> </li> {% if loop.last %} </ul> {% endif %} {% endfor %} </div> {% if section.example %} <div class="kss-modifier__wrapper"> <div class="kss-modifier__heading kss-style"> Example{% if section.modifiers is not empty %}s{% endif %} </div> {% if section.modifiers is not empty %} <div class="kss-modifier__default-name kss-style"> Default styling </div> {% endif %} <div class="kss-modifier__example"> {{ section.example|raw }} <div class="kss-modifier__example-footer"></div> </div> {% for modifier in section.modifiers %} <div class="kss-modifier__name kss-style"> {{ modifier.name }} </div> <div class="kss-modifier__description kss-style"> {{ modifier.description|raw }} </div> <div class="kss-modifier__example"> {{ modifier.markup|raw }} <div class="kss-modifier__example-footer"></div> </div> {% endfor %} </div> {% if section.markup %} <details class="kss-markup kss-style"> <summary> {% if section.markupFile %} Markup: <code>{{ section.markupFile }}</code> {% else %} Markup {% endif %} </summary> <pre class="prettyprint linenums lang-html"><code data-language="html">{{ section.markup|escape('html') }}</code></pre> </details> {% endif %} {% endif %} </{{ sectionElement }}> {% endfor %} {% endif %} </article> <!-- SCRIPTS --> <script src="kss-assets/kss.js"></script> <script src="kss-assets/scrollspy.js"></script> <script src="kss-assets/prettify.js"></script> <script src="kss-assets/kss-fullscreen.js"></script> <script src="kss-assets/kss-guides.js"></script> <script src="kss-assets/kss-markup.js"></script> <script> prettyPrint(); var spy = new ScrollSpy('#kss-node', { nav: '.kss-nav__menu-child > li > a', className: 'is-in-viewport' }); var kssFullScreen = new KssFullScreen({ idPrefix: 'kss-fullscreen-', bodyClass: 'kss-fullscreen-mode', elementClass: 'is-fullscreen' }); var kssGuides = new KssGuides({ bodyClass: 'kss-guides-mode' }); var kssMarkup = new KssMarkup({ bodyClass: 'kss-markup-mode', detailsClass: 'kss-markup' }); </script> {{ scripts|raw }} <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. --> </body> </html>