diff options
Move Panels and Empty states to Components from Layout
1 files changed, 42 insertions, 42 deletions
| -rw-r--r-- | docs/elements.html | 84 |
diff --git a/docs/elements.html b/docs/elements.html index a677bea..763393a 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -104,12 +104,6 @@ <li class="menu-item"> <a href="layout.html#navbar">Navbar</a> </li> - <li class="menu-item"> - <a href="layout.html#panels">Panels</a> - </li> - <li class="menu-item"> - <a href="layout.html#empty">Empty states</a> - </li> </ul> </div> </div> @@ -145,6 +139,9 @@ <a href="components.html#chips">Chips</a> </li> <li class="menu-item"> + <a href="components.html#empty">Empty states</a> + </li> + <li class="menu-item"> <a href="components.html#menus">Menus</a> </li> <li class="menu-item"> @@ -157,6 +154,9 @@ <a href="components.html#pagination">Pagination</a> </li> <li class="menu-item"> + <a href="components.html#panels">Panels</a> + </li> + <li class="menu-item"> <a href="components.html#popovers">Popovers</a> </li> <li class="menu-item"> @@ -251,12 +251,12 @@ <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> <div id="content" class="s-content"> - <div id="typography" class="container"> - <h3 class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> + <div class="container"> + <h3 id="typography" class="s-title"><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3> <div class="docs-note"> <p>Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p> </div> - <h4 class="s-subtitle">Headings</h4> + <h4 id="typography-headings" class="s-subtitle">Headings</h4> <div class="columns"> <div class="column col-12"> <h1>H1 Heading <small class="label">40px</small></h1> @@ -284,7 +284,7 @@ <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"h1"</span>>H1 Heading<<span class="tag">/span</span>> </code></pre> - <h4 class="s-subtitle">Paragraphs</h4> + <h4 id="typography-paragraphs" class="s-subtitle">Paragraphs</h4> <div class="docs-note"> <p>Lorem ipsum dolor sit amet, consectetur <a href="#typography">adipiscing elit. Praesent risus leo, dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> <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> @@ -295,7 +295,7 @@ <<span class="tag">p</span>>...<<span class="tag">/p</span>> </code></pre> - <h4 class="s-subtitle">Semantic text elements</h4> + <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <abbr title="Internationalization">I18N</abbr> @@ -374,7 +374,7 @@ </div> </div> - <h4 class="s-subtitle">Optimized for east asian fonts</h4> + <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4> <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5> <div class="docs-note"> <h6>Chinese (Simplified)</h6> @@ -409,7 +409,7 @@ <<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> - <h4 class="s-subtitle">Blockquote</h4> + <h4 id="typography-blockquote" class="s-subtitle">Blockquote</h4> <blockquote> <p>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. </p> <cite>- Bill Gates</cite> @@ -422,7 +422,7 @@ <<span class="tag">/blockquote</span>> </code></pre> - <h4 class="s-subtitle">Lists</h4> + <h4 id="typography-lists" class="s-subtitle">Lists</h4> <div class="columns"> <div class="column col-4 col-xs-12"> <ul class="list"> @@ -485,8 +485,8 @@ </div> - <div id="tables" class="container"> - <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> + <div class="container"> + <h3 id="tables" class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3> <div class="docs-note"> <p>Tables include default styles for tables and data sets.</p> </div> @@ -547,8 +547,8 @@ </div> - <div id="buttons" class="container"> - <h3 class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> + <div class="container"> + <h3 id="buttons" class="s-title"><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3> <div class="docs-note"> <p>Buttons include simple button styles for actions in different types and sizes. </p> </div> @@ -601,7 +601,7 @@ <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn loading"</span>>button<<span class="tag">/button</span>> </code></pre> - <h4 class="s-subtitle">Button sizes</h4> + <h4 id="buttons-sizes" class="s-subtitle">Button sizes</h4> <div class="columns"> <div class="column"> <button class="btn btn-primary btn-lg">large <i class="icon icon-arrow-down"></i></button> @@ -649,7 +649,7 @@ <<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> - <h4 class="s-subtitle">Button groups</h4> + <h4 id="buttons-groups" class="s-subtitle">Button groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="btn-group"> @@ -696,8 +696,8 @@ </div> - <div id="forms" class="container"> - <h3 class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> + <div class="container"> + <h3 id="forms" class="s-title"><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3> <div class="docs-note"> <p>Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. </p> </div> @@ -809,7 +809,7 @@ <p>You can use <code>:indeterminate</code> pseudo class for indeterminate state of checkboxes.</p> </div> - <h4 class="s-subtitle">Horizontal forms</h4> + <h4 id="forms-horizontal" class="s-subtitle">Horizontal forms</h4> <div class="docs-note"> <p>If you want to have a horizontal form, add the <code>form-horizontal</code> class to the <form> container. And add the <code>col-[1-12]</code> class to the child elements for form row layout. </p> </div> @@ -908,7 +908,7 @@ <<span class="tag">/form</span>> </code></pre> - <h4 class="s-subtitle">Form sizes</h4> + <h4 id="forms-sizes" class="s-subtitle">Form sizes</h4> <div class="docs-note"> <p>For smaller or larger input and select controls, you could add the <code>input-sm</code>/<code>input-lg</code>, <code>select-sm</code>/<code>select-lg</code> and <code>label-sm</code>/<code>label-lg</code> classes to the elements.</p> </div> @@ -945,7 +945,7 @@ </div> </div> - <h4 class="s-subtitle">Form icons</h4> + <h4 id="forms-icons" class="s-subtitle">Form icons</h4> <div class="docs-note"> <p>Spectre Form components has <a href="#icons">Spectre Icons</a> support.</p> <p>Add a wrapper with the <code>has-icon-left</code>/<code>has-icon-right</code> class to <input> element. And add the icon with <code>form-icon</code> class next to the <input>.</p> @@ -1031,7 +1031,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Input types</h4> + <h4 id="forms-input" class="s-subtitle">Input types</h4> <div class="columns"> <div class="column col-9 col-sm-12"> <form class="form-horizontal" action="#forms"> @@ -1111,7 +1111,7 @@ </div> </div> - <h4 class="s-subtitle">Input groups</h4> + <h4 id="forms-input-groups" class="s-subtitle">Input groups</h4> <div class="columns"> <div class="column col-xs-12"> <div class="input-group"> @@ -1194,7 +1194,7 @@ <<span class="tag">/div</span>> </code></pre> - <h4 class="s-subtitle">Form validation styles</h4> + <h4 id="forms-validation" class="s-subtitle">Form validation styles</h4> <div class="docs-note"> <p>To use form validation styles, add <code>is-success</code> or <code>is-error</code> class to the controls or add <code>has-success</code> or <code>has-error</code> class to parent elements. You can use the <code>form-input-hint</code> class to provide form validation success and error messages.</p> </div> @@ -1293,7 +1293,7 @@ <<span class="tag">/form</span>> </code></pre> - <h4 class="s-subtitle">Form disabled styles</h4> + <h4 id="forms-disabled" class="s-subtitle">Form disabled styles</h4> <div class="docs-note"> <p>Add the <code>disabled</code> attribute to the element or <fieldset> for a disabled form components style.</p> </div> @@ -1346,12 +1346,12 @@ </div> </div> - <div id="icons" class="container"> - <h3 class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> + <div class="container"> + <h3 id="icons" class="s-title"><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3> <div class="docs-note"> <p>Icons are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web <head> to have these CSS icons.</p> </div> - <h4 class="s-subtitle">Navigation icons</h4> + <h4 id="icons-navigation" class="s-subtitle">Navigation icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1432,7 +1432,7 @@ <p>icon-more-vert</p> </div> </div> - <h4 class="s-subtitle">Action icons</h4> + <h4 id="icons-action" class="s-subtitle">Action icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1537,7 +1537,7 @@ <p>icon-upload</p> </div> </div> - <h4 class="s-subtitle">Object icons</h4> + <h4 id="icons-object" class="s-subtitle">Object icons</h4> <div class="columns"> <div class="column col-3 col-md-6"> <button class="btn btn-primary btn-action btn-lg"> @@ -1595,8 +1595,8 @@ </div> - <div id="labels" class="container"> - <h3 class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> + <div class="container"> + <h3 id="labels" class="s-title"><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3> <div class="docs-note"> <p>Labels are formatted text tags for highlighted, informative information.</p> </div> @@ -1620,8 +1620,8 @@ </div> - <div id="codes" class="container"> - <h3 class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> + <div class="container"> + <h3 id="codes" class="s-title"><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3> <div class="docs-note"> <p>Codes are inline and multiline code snippets.</p> <p>For inline code, you can use the element <code><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p> @@ -1643,12 +1643,12 @@ </div> - <div id="media" class="container"> - <h3 class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> + <div class="container"> + <h3 id="media" class="s-title"><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3> <div class="docs-note"> <p>Media includes responsive images, figures and video classes. </p> </div> - <h4 class="s-subtitle">Images</h4> + <h4 id="media-images" class="s-subtitle">Images</h4> <div class="docs-note"> <p>Add the <code>img-responsive</code> class to <img> elements. The images will scale with the parent sizes.</p> </div> @@ -1699,7 +1699,7 @@ <<span class="tag">/figure</span>> </code></pre> - <h4 class="s-subtitle">Video</h4> + <h4 id="media-video" class="s-subtitle">Video</h4> <div class="docs-note"> <p>For responsive video, add a container with the <code>video-responsive</code> class. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p> </div> |