diff options
1 files changed, 47 insertions, 47 deletions
| -rw-r--r-- | docs/elements.html | 94 |
diff --git a/docs/elements.html b/docs/elements.html index 19239bf..f6d2a8f 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -22,8 +22,8 @@ </a> </div> <div class="s-nav"> - <div class="accordion"> - <div class="accordion-item"> + <div class="accordion-container"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-1"> Getting started @@ -48,7 +48,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked> <label class="accordion-header c-hand" for="docs-accordion-2"> Elements @@ -82,7 +82,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-3"> Layout @@ -101,7 +101,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-4"> Components @@ -171,7 +171,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-5"> Utilities @@ -205,7 +205,7 @@ </ul> </div> </div> - <div class="accordion-item"> + <div class="accordion"> <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden> <label class="accordion-header c-hand" for="docs-accordion-6"> Experimentals @@ -286,7 +286,7 @@ </div> </div> -<!-- headings example --> +<!-- headings --> <pre class="code" data-lang="HTML"><code><<span class="tag">h1</span>>H1 Heading<<span class="tag">/h1</span>> <<span class="tag">h1</span>>H1 Heading <<span class="tag">small</span> <span class="atn">class</span>=<span class="atv">"label"</span>>40px<<span class="tag">/small</span>><<span class="tag">/h1</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> @@ -298,7 +298,7 @@ <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> </div> -<!-- paragraphs example --> +<!-- paragraphs --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span>>Lorem ipsum dolor sit amet, ...<<span class="tag">/p</span>> <<span class="tag">p</span>>...<<span class="tag">/p</span>> </code></pre> @@ -307,78 +307,78 @@ <div class="columns"> <div class="column col-6 col-xs-12"> <abbr title="Internationalization">I18N</abbr> - <code class="ml-10"><abbr></code> + <code class="ml-2"><abbr></code> </div> <div class="column col-6 col-xs-12"> <strong>Bold</strong> - <code class="ml-10"><strong></code> <code><b></code> + <code class="ml-2"><strong></code> <code><b></code> </div> <div class="column col-6 col-xs-12"> <cite>Citation</cite> - <code class="ml-10"><cite></code> + <code class="ml-2"><cite></code> </div> <div class="column col-6 col-xs-12"> <code>Hello World!</code> - <code class="ml-10"><code></code> + <code class="ml-2"><code></code> </div> <div class="column col-6 col-xs-12"> <del>Deleted</del> - <code class="ml-10"><del></code> + <code class="ml-2"><del></code> </div> <div class="column col-6 col-xs-12"> <em>Emphasis</em> - <code class="ml-10"><em></code> + <code class="ml-2"><em></code> </div> <div class="column col-6 col-xs-12"> <i>Italic</i> - <code class="ml-10"><i></code> + <code class="ml-2"><i></code> </div> <div class="column col-6 col-xs-12"> <ins>Inserted</ins> - <code class="ml-10"><ins></code> + <code class="ml-2"><ins></code> </div> <div class="column col-6 col-xs-12"> <kbd>Ctrl + S</kbd> - <code class="ml-10"><kbd></code> + <code class="ml-2"><kbd></code> </div> <div class="column col-6 col-xs-12"> <mark>Highlighted</mark> - <code class="ml-10"><mark></code> + <code class="ml-2"><mark></code> </div> <div class="column col-6 col-xs-12"> <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> - <code class="ml-10"><ruby></code> + <code class="ml-2"><ruby></code> </div> <div class="column col-6 col-xs-12"> <s>Strikethrough</s> - <code class="ml-10"><s></code> + <code class="ml-2"><s></code> </div> <div class="column col-6 col-xs-12"> <samp>Sample</samp> - <code class="ml-10"><samp></code> + <code class="ml-2"><samp></code> </div> <div class="column col-6 col-xs-12"> Text <sub>Subscripted</sub> - <code class="ml-10"><sub></code> + <code class="ml-2"><sub></code> </div> <div class="column col-6 col-xs-12"> Text <sup>Superscripted</sup> - <code class="ml-10"><sup></code> + <code class="ml-2"><sup></code> </div> <div class="column col-6 col-xs-12"> <time>20:00</time> - <code class="ml-10"><time></code> + <code class="ml-2"><time></code> </div> <div class="column col-6 col-xs-12"> <u>Underline</u> - <code class="ml-10"><u></code> + <code class="ml-2"><u></code> </div> <div class="column col-6 col-xs-12"> <var>x</var> = <var>y</var> + 2 - <code class="ml-10"><var></code> + <code class="ml-2"><var></code> </div> </div> @@ -398,7 +398,7 @@ <p>Use the <code>lang</code> attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. </p> </div> -<!-- east asian example --> +<!-- east asian --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"zh-Hans"</span>>革命不是请客吃饭，不是做文章……<<span class="tag">/p</span>> <<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ja"</span>>祇園精舎の鐘の声、諸行無常の響きあり……<<span class="tag">/p</span>> <<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">"ko"</span>>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……<<span class="tag">/p</span>> @@ -412,7 +412,7 @@ <p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。</p> </div> -<!-- east asian example --> +<!-- east asian --> <pre class="code" data-lang="HTML"><code><<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">u</span>>祇園<<span class="tag">/u</span>><<span class="tag">u</span>>精舎<<span class="tag">/u</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> <<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">"cjk"</span>><<span class="tag">del</span>>祇園<<span class="tag">/del</span>><<span class="tag">del</span>>精舎<<span class="tag">/del</span>>の鐘の声、諸行無常の響きあり。……<<span class="tag">/p</span>> </code></pre> @@ -442,7 +442,7 @@ <cite>- Bill Gates</cite> </blockquote> -<!-- blockquote example --> +<!-- blockquote --> <pre class="code" data-lang="HTML"><code><<span class="tag">blockquote</span>> <<span class="tag">p</span>>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. <<span class="tag">/p</span>> <<span class="tag">cite</span>>- Bill Gates<<span class="tag">/cite</span>> @@ -489,7 +489,7 @@ </div> </div> -<!-- lists example --> +<!-- lists --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- unordered list --></span> <<span class="tag">ul</span>> <<span class="tag">li</span>>list item 1<<span class="tag">/li</span>> @@ -553,7 +553,7 @@ <p>Use the <code>active</code> class to make <tr> element highlighted. </p> </div> -<!-- tables example --> +<!-- tables --> <pre class="code" data-lang="HTML"><code><<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> <<span class="tag">thead</span>> <<span class="tag">tr</span>> @@ -591,7 +591,7 @@ <p>Add the <code>btn</code> class to <a>, <input> or <button> elements for a default button. There are classes <code>btn-primary</code> and <code>btn-link</code> for predefined primary and link buttons. </p> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>default button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>primary button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-link"</span>>link button<<span class="tag">/button</span>> @@ -616,7 +616,7 @@ <p>Add the <code>btn-sm</code> or <code>btn-lg</code> class for small or large button size. Also, you can add the <code>btn-block</code> class for a full-width button. </p> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> @@ -644,7 +644,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-left"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> </code></pre> @@ -663,7 +663,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code> <span class="com"><!-- buttons with disabled state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> @@ -682,7 +682,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code> <span class="com"><!-- buttons with disabled state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn disabled"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>disabled button<<span class="tag">/button</span>> @@ -701,7 +701,7 @@ </div> </div> -<!-- buttons example --> +<!-- buttons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- a button with loading state --></span> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> @@ -743,7 +743,7 @@ <p>If you want to use buttons as a group, add the <code>btn-group</code> class to the container. You can add the <code>btn-group-block</code> class for a full-width button group.</p> </div> -<!-- button groups example --> +<!-- button groups --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"btn-group btn-group-block"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>first button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn"</span>>second button<<span class="tag">/button</span>> @@ -1001,7 +1001,7 @@ </div> </div> -<!-- forms example --> +<!-- forms --> <pre class="code" data-lang="HTML"><code><<span class="tag">form</span> <span class="atn">class</span>=<span class="atv">"form-horizontal"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"col-3"</span>> @@ -1098,7 +1098,7 @@ </div> </div> -<!-- form icons example --> +<!-- form icons --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- form input with Spectre icon --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"has-icon-left"</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">placeholder</span>=<span class="atv">"..."</span>> @@ -1280,7 +1280,7 @@ <p>If you want to attach text and button along with an input, add the <code>input-group</code> class to the input container. And add the <code>input-group-addon</code> class to the text element and <code>input-group-btn</code> to the button element.</p> </div> -<!-- input groups example --> +<!-- input groups --> <pre class="code" data-lang="HTML"><code><span class="com"><!-- normal input group --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group"</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"input-group-addon"</span>>...<<span class="tag">/span</span>> @@ -1374,7 +1374,7 @@ </div> </div> -<!-- forms example --> +<!-- forms --> <pre class="code" data-lang="HTML"><code><<span class="tag">form</span>> <span class="com"><!-- form validation class: has-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> @@ -1696,7 +1696,7 @@ </div> </div> -<!-- icons example --> +<!-- icons --> <pre class="code" data-lang="HTML"><code><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-menu"</span>><<span class="tag">/i</span>> </code></pre> @@ -1734,7 +1734,7 @@ <p>Add the <code>label-rounded</code> class to have rounded labels.</p> </div> -<!-- labels example --> +<!-- labels --> <pre class="code" data-lang="HTML"><code><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label"</span>>default label<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>primary label<<span class="tag">/span</span>> </code></pre> @@ -1754,7 +1754,7 @@ <<span class="tag">/button</span>> </code></pre> -<!-- codes example --> +<!-- codes --> <pre class="code" data-lang="HTML"><code><<span class="tag">pre</span> <span class="atn">class</span>=<span class="atv">"code"</span> <span class="atn">data-lang</span>=<span class="atv">"HTML"</span>><<span class="tag">code</span>><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"com"</span>>&lt;!-- code snippets --&gt;<<span class="tag">/span</span>> &lt;<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"tag"</span>>button<<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atn"</span>>class<<span class="tag">/span</span>>=<<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"atv"</span>>&quot;btn&quot;<<span class="tag">/span</span>>&gt; Submit @@ -1832,7 +1832,7 @@ </div> </div> -<!-- media example --> +<!-- media --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"video-responsive video-responsive-4-3"</span>> <<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">"..."</span> <span class="atn">width</span>=<span class="atv">"..."</span> <span class="atn">height</span>=<span class="atv">"..."</span> <span class="atn">frameborder</span>=<span class="atv">"0"</span> <span class="atn">allowfullscreen</span>><<span class="tag">/iframe</span>> <<span class="tag">/div</span>> |