|
|
|
|
@ -46,483 +46,483 @@
|
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
<ul class="table-view"> |
|
|
|
|
<li>Item1</li> |
|
|
|
|
<li>Item2</li> |
|
|
|
|
<li>Item3</li> |
|
|
|
|
<li class="table-view-divider">With badges</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
|
|
|
|
<li>Item2 <span class="badge">1</span></li> |
|
|
|
|
<li>Item3 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-divider">With chevrons</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
|
|
|
<li>Item2 <span class="chevron"></span></li> |
|
|
|
|
<li>Item3 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item1</li> |
|
|
|
|
<li class="table-view-cell">Item2</li> |
|
|
|
|
<li class="table-view-cell">Item3</li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With badges</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With chevrons</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#item1">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#item2">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</header> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#item1">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#item2">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<div> |
|
|
|
|
<div id="item1" class="segmented-controller-item selected"><p>section #1</p></div> |
|
|
|
|
<div id="item2" class="segmented-controller-item"><p>section #2</p></div> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<div id="item1" class="segmented-controller-item selected"><p>section #1</p></div> |
|
|
|
|
<div id="item2" class="segmented-controller-item"><p>section #2</p></div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- SLIDER ============================================================ --> |
|
|
|
|
<div class="slider"> |
|
|
|
|
<ul> |
|
|
|
|
<li> |
|
|
|
|
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg"> |
|
|
|
|
<!-- SLIDER ============================================================ --> |
|
|
|
|
<div class="slider"> |
|
|
|
|
<ul> |
|
|
|
|
<li> |
|
|
|
|
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg"> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg"> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg"> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- TITLEBAR ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left and right buttons --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<a class="button button-prev" href="#"> |
|
|
|
|
Left |
|
|
|
|
</a> |
|
|
|
|
<h1 class="title">Title</h1> |
|
|
|
|
<a class="button button-next" href="#"> |
|
|
|
|
Right |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<h1 class="title"><a href="#myPopover">Title</a></h1> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<a class="button open-shelf" href="#"> |
|
|
|
|
Open fatty |
|
|
|
|
</a> |
|
|
|
|
<h1 class="title">Title</h1> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar right button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<h1 class="title">Title</h1> |
|
|
|
|
<a class="button" href="#"> |
|
|
|
|
Filter |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<div class="test"></div> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar right button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing three</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav" id="newshit"> |
|
|
|
|
<a class="button-primary open-shelf" href="#"> |
|
|
|
|
Open |
|
|
|
|
</a> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<a class="button" href="#"> |
|
|
|
|
Filter |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<a class="button open-shelf" href="#"> |
|
|
|
|
Open |
|
|
|
|
</a> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<a class="button" href="#"> |
|
|
|
|
Filter |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- BAR-TAB ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Bar-tab 5 --> |
|
|
|
|
<nav class="bar-tab"> |
|
|
|
|
<ul class="tab-inner"> |
|
|
|
|
<li class="tab-item active"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- Bar-tab 4 --> |
|
|
|
|
<nav class="bar-tab"> |
|
|
|
|
<ul class="tab-inner"> |
|
|
|
|
<li class="tab-item active"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- Bar-tab 3 --> |
|
|
|
|
<nav class="bar-tab"> |
|
|
|
|
<ul class="tab-inner"> |
|
|
|
|
<li class="tab-item active"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- SEARCH BAR ============================================================ --> |
|
|
|
|
<!-- Search bar --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<form> |
|
|
|
|
<input type="search" placeholder="Search"> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- CONTROLLER BAR ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller as a bar --> |
|
|
|
|
<nav class="bar-standard"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller as a bar w/ 3 options --> |
|
|
|
|
<nav class="bar-standard"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- BUTTON BAR ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Button bar --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Button bar main --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-primary button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Button bar positive --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-positive button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Button bar negative --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-negative button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- BUTTONS ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Standard buttons --> |
|
|
|
|
<a class="button">Button</a> |
|
|
|
|
<a class="button-primary">Button</a> |
|
|
|
|
<a class="button-positive">Button</a> |
|
|
|
|
<a class="button-negative">Button</a> |
|
|
|
|
|
|
|
|
|
<!-- Buttons w/ badges --> |
|
|
|
|
<a class="button">Button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-primary">Button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-positive">Button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-negative">Button <span class="badge">1</span></a> |
|
|
|
|
|
|
|
|
|
<!-- Buttons at block level --> |
|
|
|
|
<a class="button-block">Block level button</a> |
|
|
|
|
<a class="button-primary button-block">Block level button</a> |
|
|
|
|
<a class="button-positive button-block">Block level button</a> |
|
|
|
|
<a class="button-negative button-block">Block level button</a> |
|
|
|
|
|
|
|
|
|
<!-- Buttons at block level w/ badges --> |
|
|
|
|
<a class="button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-primary button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-positive button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-negative button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
|
|
|
|
|
<!-- TOGGLE ============================================================ --> |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- BADGES ============================================================ --> |
|
|
|
|
<span class="badge">1</span> |
|
|
|
|
<span class="badge-primary">2</span> |
|
|
|
|
<span class="badge-positive">3</span> |
|
|
|
|
<span class="badge-negative">4</span> |
|
|
|
|
<span class="badge">5</span> |
|
|
|
|
|
|
|
|
|
<!-- LIST ============================================================ --> |
|
|
|
|
<ul class="table-view"> |
|
|
|
|
<li class="table-view-cell">Item1</li> |
|
|
|
|
<li class="table-view-cell">Item2</li> |
|
|
|
|
<li class="table-view-cell">Item3</li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With badges</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With chevrons</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With chevrons & badges</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge-negative">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge-positive">1</span></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With buttons</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
|
|
|
|
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li> |
|
|
|
|
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li> |
|
|
|
|
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With a toggle</li> |
|
|
|
|
<li class="table-view-cell"> |
|
|
|
|
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg"> |
|
|
|
|
<li class="table-view-cell"> |
|
|
|
|
<a href="#"> |
|
|
|
|
Item2 |
|
|
|
|
</a> |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg"> |
|
|
|
|
<li class="table-view-cell"> |
|
|
|
|
Item3 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- TITLEBAR ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left and right buttons --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<a class="button button-prev" href="#"> |
|
|
|
|
Left |
|
|
|
|
</a> |
|
|
|
|
<h1 class="title">Title</h1> |
|
|
|
|
<a class="button button-next" href="#"> |
|
|
|
|
Right |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<h1 class="title"><a href="#myPopover">Title</a></h1> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<a class="button open-shelf" href="#"> |
|
|
|
|
Open fatty |
|
|
|
|
</a> |
|
|
|
|
<h1 class="title">Title</h1> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar right button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<h1 class="title">Title</h1> |
|
|
|
|
<a class="button" href="#"> |
|
|
|
|
Filter |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<div class="test"></div> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar right button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
<ul class="table-view inset"> |
|
|
|
|
<li class="table-view-cell table-view-divider">Normal</li> |
|
|
|
|
<li class="table-view-cell">Item1</li> |
|
|
|
|
<li class="table-view-cell">Item2</li> |
|
|
|
|
<li class="table-view-cell">Item3</li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With badges</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With chevrons</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With chevrons & badges</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item2 <span class="chevron"></span><span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-cell">Item3 <span class="chevron"></span><span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-divider">With buttons</li> |
|
|
|
|
<li class="table-view-cell">Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
|
|
|
|
<li class="table-view-cell">Item2 <a class="button-primary">Button</a></li> |
|
|
|
|
<li class="table-view-cell">Item3 <a class="button-positive">Button</a></li> |
|
|
|
|
<li class="table-view-cell">Item4 <a class="button-negative">Button</a></li> |
|
|
|
|
<li class="table-view-cell table-view-divider">With a toggle</li> |
|
|
|
|
<li class="table-view-cell"> |
|
|
|
|
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
<li class="table-view-cell"> |
|
|
|
|
Item2 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing three</a> |
|
|
|
|
<li class="table-view-cell"> |
|
|
|
|
Item3 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="table-view-cell table-view-divider">Bottom table-view-divider test</li> |
|
|
|
|
</ul> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav" id="newshit"> |
|
|
|
|
<a class="button-primary open-shelf" href="#"> |
|
|
|
|
Open |
|
|
|
|
</a> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<!-- List with <a>'s --> |
|
|
|
|
<ul class="inset table-view"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
<a href="#">Item1</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Item2</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<!-- SEGMENTED CONTROLLER ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller with 2 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing two</a></li> |
|
|
|
|
</ul> |
|
|
|
|
<a class="button" href="#"> |
|
|
|
|
Filter |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- Title-bar left button --> |
|
|
|
|
<header class="bar-nav"> |
|
|
|
|
<a class="button open-shelf" href="#"> |
|
|
|
|
Open |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller with 3 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li><a href="#">Thing two</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing three</a></li> |
|
|
|
|
</ul> |
|
|
|
|
<a class="button" href="#"> |
|
|
|
|
Filter |
|
|
|
|
</a> |
|
|
|
|
</header> |
|
|
|
|
|
|
|
|
|
<!-- BAR-TAB ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Bar-tab 5 --> |
|
|
|
|
<nav class="bar-tab"> |
|
|
|
|
<ul class="tab-inner"> |
|
|
|
|
<li class="tab-item active"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- Bar-tab 4 --> |
|
|
|
|
<nav class="bar-tab"> |
|
|
|
|
<ul class="tab-inner"> |
|
|
|
|
<li class="tab-item active"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- Bar-tab 3 --> |
|
|
|
|
<nav class="bar-tab"> |
|
|
|
|
<ul class="tab-inner"> |
|
|
|
|
<li class="tab-item active"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="tab-item"> |
|
|
|
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
|
|
|
<div class="tab-label">test</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- SEARCH BAR ============================================================ --> |
|
|
|
|
<!-- Search bar --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<form> |
|
|
|
|
<input type="search" placeholder="Search"> |
|
|
|
|
</form> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- CONTROLLER BAR ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller as a bar --> |
|
|
|
|
<nav class="bar-standard"> |
|
|
|
|
<!-- Segmented controller with 4 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li><a href="#">Thing two</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing three</a></li> |
|
|
|
|
<li><a href="#">Thing four</a></li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller as a bar w/ 3 options --> |
|
|
|
|
<nav class="bar-standard"> |
|
|
|
|
<!-- Segmented controller with 5 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li class="selected"> |
|
|
|
|
<a href="#">Thing two</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Thing one</a> |
|
|
|
|
</li> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li><a href="#">Thing two</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing three</a></li> |
|
|
|
|
<li><a href="#">Thing four</a></li> |
|
|
|
|
<li><a href="#">Thing five</a></li> |
|
|
|
|
</ul> |
|
|
|
|
</nav> |
|
|
|
|
|
|
|
|
|
<!-- BUTTON BAR ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Button bar --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
<!-- FORMS ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Button bar main --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-primary button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Button bar positive --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-positive button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- Button bar negative --> |
|
|
|
|
<div class="bar-standard"> |
|
|
|
|
<a class="button-negative button-block">Block level button</a> |
|
|
|
|
</div> |
|
|
|
|
<!-- Input --> |
|
|
|
|
<form> |
|
|
|
|
<input type="text" placeholder="Full name"> |
|
|
|
|
<input type="search" placeholder="Search"> |
|
|
|
|
<textarea rows="5"></textarea> |
|
|
|
|
<a class="button-positive button-block button-filled">Choose existing</a> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<!-- BUTTONS ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Standard buttons --> |
|
|
|
|
<a class="button">Button</a> |
|
|
|
|
<a class="button-primary">Button</a> |
|
|
|
|
<a class="button-positive">Button</a> |
|
|
|
|
<a class="button-negative">Button</a> |
|
|
|
|
|
|
|
|
|
<!-- Buttons w/ badges --> |
|
|
|
|
<a class="button">Button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-primary">Button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-positive">Button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-negative">Button <span class="badge">1</span></a> |
|
|
|
|
|
|
|
|
|
<!-- Buttons at block level --> |
|
|
|
|
<a class="button-block">Block level button</a> |
|
|
|
|
<a class="button-primary button-block">Block level button</a> |
|
|
|
|
<a class="button-positive button-block">Block level button</a> |
|
|
|
|
<a class="button-negative button-block">Block level button</a> |
|
|
|
|
|
|
|
|
|
<!-- Buttons at block level w/ badges --> |
|
|
|
|
<a class="button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-primary button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-positive button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
<a class="button-negative button-block">Block level button <span class="badge">1</span></a> |
|
|
|
|
|
|
|
|
|
<!-- TOGGLE ============================================================ --> |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
<!-- Input group --> |
|
|
|
|
<form class="input-group"> |
|
|
|
|
<input type="text" placeholder="Full name"> |
|
|
|
|
<input type="email" placeholder="Email"> |
|
|
|
|
<input type="text" placeholder="Username"> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<!-- BADGES ============================================================ --> |
|
|
|
|
<span class="badge">1</span> |
|
|
|
|
<span class="badge-primary">2</span> |
|
|
|
|
<span class="badge-positive">3</span> |
|
|
|
|
<span class="badge-negative">4</span> |
|
|
|
|
<span class="badge">5</span> |
|
|
|
|
|
|
|
|
|
<!-- LIST ============================================================ --> |
|
|
|
|
<ul class="table-view"> |
|
|
|
|
<li>Item1</li> |
|
|
|
|
<li>Item2</li> |
|
|
|
|
<li>Item3</li> |
|
|
|
|
<li class="table-view-divider">With badges</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
|
|
|
|
<li>Item2 <span class="badge">1</span></li> |
|
|
|
|
<li>Item3 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-divider">With chevrons</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
|
|
|
<li>Item2 <span class="chevron"></span></li> |
|
|
|
|
<li>Item3 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-divider">With chevrons & badges</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge-primary">1</span></li> |
|
|
|
|
<li>Item2 <span class="chevron"></span><span class="badge-negative">1</span></li> |
|
|
|
|
<li>Item3 <span class="chevron"></span><span class="badge-positive">1</span></li> |
|
|
|
|
<li class="table-view-divider">With buttons</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
|
|
|
|
<li>Item2 <a class="button-primary">Button</a></li> |
|
|
|
|
<li>Item3 <a class="button-positive">Button</a></li> |
|
|
|
|
<li>Item4 <a class="button-negative">Button</a></li> |
|
|
|
|
<li class="table-view-divider">With a toggle</li> |
|
|
|
|
<li> |
|
|
|
|
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
<!-- Input group with labels--> |
|
|
|
|
<form class="input-group"> |
|
|
|
|
<div class="input-row"> |
|
|
|
|
<label>Full name</label> |
|
|
|
|
<input type="text" placeholder="Mister Ratchet"> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#"> |
|
|
|
|
Item2 |
|
|
|
|
</a> |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
Item3 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<ul class="table-view inset"> |
|
|
|
|
<li class="table-view-divider">Normal</li> |
|
|
|
|
<li>Item1</li> |
|
|
|
|
<li>Item2</li> |
|
|
|
|
<li>Item3</li> |
|
|
|
|
<li class="table-view-divider">With badges</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="badge">1</span></li> |
|
|
|
|
<li>Item2 <span class="badge">1</span></li> |
|
|
|
|
<li>Item3 <span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-divider">With chevrons</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
|
|
|
<li>Item2 <span class="chevron"></span></li> |
|
|
|
|
<li>Item3 <span class="chevron"></span></li> |
|
|
|
|
<li class="table-view-divider">With chevrons & badges</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="badge">1</span></li> |
|
|
|
|
<li>Item2 <span class="chevron"></span><span class="badge">1</span></li> |
|
|
|
|
<li>Item3 <span class="chevron"></span><span class="badge">1</span></li> |
|
|
|
|
<li class="table-view-divider">With buttons</li> |
|
|
|
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
|
|
|
|
<li>Item2 <a class="button-primary">Button</a></li> |
|
|
|
|
<li>Item3 <a class="button-positive">Button</a></li> |
|
|
|
|
<li>Item4 <a class="button-negative">Button</a></li> |
|
|
|
|
<li class="table-view-divider">With a toggle</li> |
|
|
|
|
<li> |
|
|
|
|
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
Item2 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
<div class="input-row"> |
|
|
|
|
<label>Email</label> |
|
|
|
|
<input type="email" placeholder="ratchetframework@gmail.com"> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
Item3 |
|
|
|
|
<div class="toggle"> |
|
|
|
|
<div class="toggle-handle"></div> |
|
|
|
|
<div class="input-row"> |
|
|
|
|
<label>Username</label> |
|
|
|
|
<input type="text" placeholder="goRatchet"> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
<li class="table-view-divider">Bottom table-view-divider test</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- List with <a>'s --> |
|
|
|
|
<ul class="inset table-view"> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Item1</a> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<a href="#">Item2</a> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- SEGMENTED CONTROLLER ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller with 2 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing two</a></li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller with 3 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li><a href="#">Thing two</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing three</a></li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller with 4 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li><a href="#">Thing two</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing three</a></li> |
|
|
|
|
<li><a href="#">Thing four</a></li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- Segmented controller with 5 tabs --> |
|
|
|
|
<ul class="segmented-controller"> |
|
|
|
|
<li><a href="#">Thing one</a></li> |
|
|
|
|
<li><a href="#">Thing two</a></li> |
|
|
|
|
<li class="selected"><a href="#">Thing three</a></li> |
|
|
|
|
<li><a href="#">Thing four</a></li> |
|
|
|
|
<li><a href="#">Thing five</a></li> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<!-- FORMS ============================================================ --> |
|
|
|
|
|
|
|
|
|
<!-- Input --> |
|
|
|
|
<form> |
|
|
|
|
<input type="text" placeholder="Full name"> |
|
|
|
|
<input type="search" placeholder="Search"> |
|
|
|
|
<textarea rows="5"></textarea> |
|
|
|
|
<a class="button-positive button-block button-filled">Choose existing</a> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<!-- Input group --> |
|
|
|
|
<form class="input-group"> |
|
|
|
|
<input type="text" placeholder="Full name"> |
|
|
|
|
<input type="email" placeholder="Email"> |
|
|
|
|
<input type="text" placeholder="Username"> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<!-- Input group with labels--> |
|
|
|
|
<form class="input-group"> |
|
|
|
|
<div class="input-row"> |
|
|
|
|
<label>Full name</label> |
|
|
|
|
<input type="text" placeholder="Mister Ratchet"> |
|
|
|
|
</div> |
|
|
|
|
<div class="input-row"> |
|
|
|
|
<label>Email</label> |
|
|
|
|
<input type="email" placeholder="ratchetframework@gmail.com"> |
|
|
|
|
</div> |
|
|
|
|
<div class="input-row"> |
|
|
|
|
<label>Username</label> |
|
|
|
|
<input type="text" placeholder="goRatchet"> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
connors
11 years ago