diff options
Fix Autocomplete position and Forms disabled styles bug and merge Menus and Dropdowns
1 files changed, 106 insertions, 112 deletions
| -rw-r--r-- | docs/components.html | 218 |
diff --git a/docs/components.html b/docs/components.html index b29dfe1..3660424 100644 --- a/docs/components.html +++ b/docs/components.html @@ -62,9 +62,6 @@ <a href="components.html#chips">Chips</a> </li> <li class="nav-item"> - <a href="components.html#dropdowns">Dropdowns</a> - </li> - <li class="nav-item"> <a href="components.html#menus">Menus</a> </li> <li class="nav-item"> @@ -610,8 +607,112 @@ </section> - <section id="dropdowns" class="container"> - <header class="text-center"><h3>Dropdowns</h3></header> + <section id="menus" class="container"> + <header class="text-center"><h3>Menus</h3></header> + <section class="notes"> + <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p> + </section> + <div class="columns"> + <div class="column col-xs-12"> + <ul class="menu"> + <li class="menu-item"> + <div class="tile tile-centered"> + <div class="tile-icon"> + <img src="img/avatar-4.png" class="avatar" /> + </div> + <div class="tile-content"> + Steve Rogers + </div> + </div> + </li> + <li class="divider"></li> + <li class="menu-item"> + <div class="menu-badge"> + <label class="label label-primary">2</label> + </div> + <a href="#menus" class="active"> + My profile + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + Settings + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + Logout + </a> + </li> + </ul> + </div> + <div class="column col-xs-12"> + <ul class="menu"> + <li class="menu-header"> + <span class="menu-header-text"> + LINKS + </span> + </li> + <li class="menu-item"> + <a href="#menus"> + <i class="icon icon-link"></i> Slack + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + <i class="icon icon-link"></i> Hipchat + </a> + </li> + <li class="menu-item"> + <a href="#menus"> + <i class="icon icon-link"></i> Skype + </a> + </li> + </ul> + </div> + </div> + <section class="notes"> + <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> + </section> + +<!-- menus example --> +<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> + <span class="com"><!-- menu header --></span> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> + LINKS + <<span class="tag">/span</span>> + <<span class="tag">/li</span>> + <span class="com"><!-- menu item --></span> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Slack + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Hipchat + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Skype + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> + <span class="com"><!-- menu divider --></span> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> + <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"menu-badge"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>2<<span class="tag">/label</span>> + <<span class="tag">/div</span>> + <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings + <<span class="tag">/a</span>> + <<span class="tag">/li</span>> +<<span class="tag">/ul</span>> +</code></pre> + + <header id="dropdowns" class="text-center"><h4>Dropdown menus</h4></header> <section class="notes"> <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p> </section> @@ -731,113 +832,6 @@ </section> - <section id="menus" class="container"> - <header class="text-center"><h3>Menus</h3></header> - <section class="notes"> - <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p> - </section> - <div class="columns"> - <div class="column col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <img src="img/avatar-4.png" class="avatar" /> - </div> - <div class="tile-content"> - Steve Rogers - </div> - </div> - </li> - <li class="divider"></li> - <li class="menu-item"> - <div class="menu-badge"> - <label class="label label-primary">2</label> - </div> - <a href="#menus" class="active"> - My profile - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Settings - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - Logout - </a> - </li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="menu"> - <li class="menu-header"> - <span class="menu-header-text"> - LINKS - </span> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Slack - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Hipchat - </a> - </li> - <li class="menu-item"> - <a href="#menus"> - <i class="icon icon-link"></i> Skype - </a> - </li> - </ul> - </div> - </div> - <section class="notes"> - <p>Add a container element with the class <code>menu</code>. And add child elements with the classname <code>menu-item</code>. You can separate menu items with a <code>divider</code> or <code>menu-header</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p> - </section> - -<!-- menus example --> -<pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> - <span class="com"><!-- menu header --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-header"</span>> - <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"menu-header-text"</span>> - LINKS - <<span class="tag">/span</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu item --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Slack - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Hipchat - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Skype - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> - <span class="com"><!-- menu divider --></span> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span>><<span class="tag">/li</span>> - <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"menu-item"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"menu-badge"</span>> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"label label-primary"</span>>2<<span class="tag">/label</span>> - <<span class="tag">/div</span>> - <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-link"</span>><<span class="tag">/i</span>> Settings - <<span class="tag">/a</span>> - <<span class="tag">/li</span>> -<<span class="tag">/ul</span>> -</code></pre> - - </section> - <section id="modals" class="container"> <header class="text-center"><h3>Modals</h3></header> <section class="notes"> |