neutron-adt
Version:
Neutron Atomic Design Tool
149 lines (129 loc) • 9.15 kB
HTML
<!-- START SVG ICONS -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<path id="neutron-logo" d="M30.2,18.3l12.7,20.4c-0.9,0.9-1.8,1.9-2.7,2.8c-1.8,1.8-3.6,3.5-5.4,5.1L22,26c0.5-0.5,0.9-0.9,1.4-1.4
C25.6,22.4,27.9,20.2,30.2,18.3z M8.6,23.5c1.7,2.6,3.7,5.4,5.9,8.2c1.7-2.1,3.6-4.2,5.6-6.3v-2.3l0.9,1.4c0.4-0.4,0.7-0.7,1.1-1.1
c2.4-2.4,4.8-4.6,7.2-6.6l-2.2-3.5c-7.3-5.4-14-8.7-18.5-9.1V23.5z M47.9,33.1c-1.1-1.4-2.3-2.7-3.6-4.1v8.2
C45.6,35.8,46.8,34.4,47.9,33.1z M44.3,26.4c1.7,1.8,3.2,3.6,4.7,5.3c2.5-3.1,4.6-6.1,6.4-9V4.1c-2.9,0.1-6.7,1.5-11.1,4V26.4z
M55.4,25.6c-1.5,2.4-3.3,4.9-5.3,7.4c2,2.5,3.8,5,5.3,7.4V25.6z M20.2,28c-1.6,1.7-3.1,3.4-4.5,5.1c1.4,1.7,2.9,3.4,4.5,5.1V28z
M42.1,58.4l2.2,3.6v0h0l0,0l0,0h5.4C47.4,61.2,44.8,60,42.1,58.4z M24.9,9.8l-4.8-7.7V2H8.6v1C12.8,3.3,18.6,5.7,24.9,9.8z
M13.8,62h6.4v-2.8C17.9,60.4,15.8,61.3,13.8,62z M55.4,3V2H44.3v4.5C48.6,4.3,52.4,3,55.4,3z M20.2,40.7c-2-2.1-3.9-4.2-5.6-6.3
c-2.3,2.8-4.3,5.6-5.9,8.2v19.3c3-0.3,7-1.8,11.5-4.5V40.7z M55.4,43.4c-1.8-2.8-3.9-5.9-6.4-9c-1.5,1.8-3,3.6-4.7,5.3V41l-0.5-0.7
c-0.8,0.8-1.6,1.7-2.4,2.5c-1.9,1.9-3.8,3.7-5.8,5.4l4.6,7.4c6,4,11.4,6.3,15.1,6.5V43.4z M13.5,33.1c-1.8-2.3-3.4-4.5-4.8-6.7v13.4
C10,37.6,11.7,35.3,13.5,33.1z"/>
<path id="neutron-search" d="M44.3,27.1c0-4.7-1.7-8.8-5.1-12.2c-3.4-3.4-7.4-5.1-12.2-5.1s-8.8,1.7-12.2,5.1s-5.1,7.4-5.1,12.2
s1.7,8.8,5.1,12.2s7.4,5.1,12.2,5.1s8.8-1.7,12.2-5.1C42.6,35.9,44.3,31.8,44.3,27.1z M64,59.1c0,1.3-0.5,2.5-1.5,3.5
c-1,1-2.1,1.5-3.5,1.5c-1.4,0-2.5-0.5-3.5-1.5L42.4,49.4c-4.6,3.2-9.7,4.8-15.3,4.8c-3.7,0-7.2-0.7-10.5-2.1s-6.2-3.3-8.7-5.8
s-4.3-5.3-5.8-8.7S0,30.7,0,27.1s0.7-7.2,2.1-10.5s3.3-6.2,5.8-8.7s5.3-4.3,8.7-5.8S23.4,0,27.1,0s7.2,0.7,10.5,2.1s6.2,3.3,8.7,5.8
s4.3,5.3,5.8,8.7s2.1,6.9,2.1,10.5c0,5.6-1.6,10.8-4.8,15.3l13.2,13.2C63.5,56.6,64,57.7,64,59.1z"/>
<path id="neutron-code-frame" d="M20,47.9l-1.7,1.7C18,49.9,17.8,50,17.5,50s-0.6-0.1-0.8-0.3L0.3,33.4C0.1,33.1,0,32.9,0,32.6
s0.1-0.6,0.3-0.8l16.3-16.3c0.2-0.2,0.5-0.3,0.8-0.3s0.6,0.1,0.8,0.3l1.7,1.7c0.2,0.2,0.3,0.5,0.3,0.8s-0.1,0.6-0.3,0.8L6.3,32.6 L20,46.3c0.2,0.2,0.3,0.5,0.3,0.8C20.4,47.4,20.2,47.7,20,47.9z M40.7,10.6l-13,45.1c-0.1,0.3-0.3,0.5-0.5,0.7 c-0.3,0.2-0.5,0.2-0.8,0.1l-2.2-0.6c-0.3-0.1-0.5-0.3-0.7-0.5c-0.2-0.3-0.2-0.6-0.1-0.9l13-45.1c0.1-0.3,0.3-0.5,0.5-0.7 s0.5-0.2,0.8-0.1l2.2,0.6c0.3,0.1,0.5,0.3,0.7,0.5S40.8,10.3,40.7,10.6z M63.7,33.4L47.4,49.7c-0.2,0.2-0.5,0.3-0.8,0.3 c-0.3,0-0.6-0.1-0.8-0.3L44,47.9c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8l13.7-13.7L44,18.8c-0.2-0.2-0.3-0.5-0.3-0.8 s0.1-0.6,0.3-0.8l1.7-1.7c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3l16.3,16.3c0.2,0.2,0.3,0.5,0.3,0.8S63.9,33.1,63.7,33.4z"/>
<path id="neutron-settings" d="M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z"/>
<path id="neutron-qr-code" d="M17.5,47v5.8h-5.8V47H17.5z M17.5,12.1v5.8h-5.8v-5.8H17.5z M52.4,12.1v5.8h-5.8v-5.8H52.4z
M5.8,58.6h17.5V41.2H5.8V58.6z M5.8,23.7h17.5V6.2H5.8V23.7z M40.7,23.7h17.5V6.2H40.7V23.7z M29.1,35.3v29.1H0V35.3H29.1z M52.4,58.6v5.8h-5.8v-5.8H52.4z M64,58.6v5.8h-5.8v-5.8H64z M64,35.3v17.5H46.5V47h-5.8v17.5h-5.8V35.3h17.5v5.8h5.8v-5.8H64z M29.1,0.4v29.1H0V0.4H29.1z M64,0.4v29.1H34.9V0.4H64z"/>
<path id="neutron-close" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
</svg>
<!-- END SVG ICONS -->
<div class="neutron-sticky-nav">
<a href="javascript:;" class="neutron-button--start" title="{{neutron_options_description}}">
<span>{{neutron_options}}</span>
<svg viewBox="0 0 64 64">
<use class="neutron-svg-icon" xlink:href="#neutron-logo"></use>
</svg>
</a>
<div class="neutron-menu">
<div class="neutron-menu--search">
<div class="neutron-menu--search__input">
<input type="text" placeholder="{{search_placeholder}}">
<a href="javascript:;" class="neutron-menu--search__clear">✖</a>
</div>
</div>
<div class="neutron-navigation">
<a href="javascript:;" class="neutron-button--search" title="{{search_description}}">
<span>{{search}}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<use class="neutron-svg-icon" xlink:href="#neutron-search"></use>
</svg>
</a>
<a href="javascript:;" class="neutron-button--code" title="{{code_frame_description}}">
<span>{{code_frame}}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<use class="neutron-svg-icon" xlink:href="#neutron-code-frame"></use>
</svg>
</a>
<a href="javascript:;" class="neutron-button--qr" title="{{qr_code_description}}">
<span>{{qr_code}}</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<use class="neutron-svg-icon" xlink:href="#neutron-qr-code"></use>
</svg>
</a>
<a href="javascript:;" class="neutron-button--info" title="{{settings_description}}">
<span>{{settings}}</span>
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<use class="neutron-svg-icon" xlink:href="#neutron-settings"></use>
</svg>
</a>
</div>
<ul class="neutron-menu--items"></ul>
</div>
</div>
<div class="neutron-code-frame">
<div class="neutron-code-frame--close">
<a href="javascript:;" class="neutron-button--close__link" title="{{close_code_frame}}">
<span>{{close}}</span>
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<use class="neutron-svg-icon" xlink:href="#neutron-close"></use>
</svg>
</a>
</div>
<div class="neutron-code-frame--patterns">
<p id="neutron-status"><span></span></p>
<p id="neutron-dependencies-list">{{dependencies}}: <span></span></p>
<p id="neutron-reverse-dependencies-list">{{reverse_dependencies}}: <span></span></p>
</div>
<div class="neutron-code">
<ul class="neutron-code--nav">
<li class="neutron-code--item"><a href="#html">{{html}}</a></li>
<li class="neutron-code--item"><a href="#handlebars">{{handlebars}}</a></li>
<li class="neutron-code--item"><a href="#documentation">{{documentation}}</a></li>
</ul>
</div>
</div>
<div class="neutron-lightbox neutron-qr-code-wrapper">
<div class="neutron-lightbox--content neutron-qr-code-frame">
<a href="javascript:;" class="neutron-button--close__link" title="{{close_qr_code}}">
<span>{{close}}</span>
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<use class="neutron-svg-icon" xlink:href="#neutron-close"></use>
</svg>
</a>
<h1 class="neutron-lightbox--content__headline">{{export_url}}</h1>
<p class="neutron-lightbox--content__text">{{export_message}}: <span></span></p>
<div id="qrcode"></div>
</div>
</div>
<div class="neutron-lightbox neutron-info-wrapper">
<div class="neutron-lightbox--content neutron-info-frame">
<a href="javascript:;" class="neutron-button--close__link" title="{{close_info}}">
<span>{{close}}</span>
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<use class="neutron-svg-icon" xlink:href="#neutron-close"></use>
</svg>
</a>
<h1 class="neutron-lightbox--content__headline">About Neutron</h1>
<p class="neutron-lghtbox--content__text">Neutron is a tool developed to create documentation in atomic design style. Click <a href="https://github.com/vebersol/neutron" target="_blank">here</a> to read more about Neutron.</p>
<h2 class="neutron-lightbox--content__headline">Settings</h2>
<div class="neutron-settings">
<div class="neutron-settings__form neutron-settings--theme">
<h4>Theme</h4>
<input type="radio" value="default" id="theme-default" name="theme" checked> <label for="theme-default">{{default}}</label>
<input type="radio" value="bluewood" id="theme-bluewood" name="theme"> <label for="theme-bluewood">Bluewood</label>
<input type="radio" value="db" id="theme-db" name="theme"> <label for="theme-db">DB</label>
</div>
<div class="neutron-settings__form neutron-settings--menu-behavior">
<h4>Menu Behavior</h4>
<input type="radio" value="default" id="behavior-default" name="menuBehavior" checked> <label for="behavior-default">{{default}}</label>
<input type="radio" value="off-canvas" id="behavior-off-canvas" name="menuBehavior"> <label for="behavior-off-canvas">Off-Canvas</label>
</div>
</div>
</div>
</div>