marble
Version:
WeDeploy's style guide and UI components
1,414 lines • 52.9 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>marble - Demos</title>
<link rel="stylesheet" href="../build/marble.css">
<link rel="stylesheet" href="../build/fonts/galano/galano.css">
<link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
<link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
<style type="text/css">
.avatar-initials,
.avatar-number,
.avatar-icon,
.avatar-icon-16,
.avatar-icon-12,
.avatar-container {
display: inline-block;
vertical-align: middle;
}
.section-buttons .btn {
margin-right: 10px;
margin-bottom: 10px;
}
.section-grids .btn {
margin-right: 10px;
margin-bottom: 10px;
}
.section-labels .label {
margin-right: 10px;
margin-bottom: 10px;
}
#section-icons [class^="icon-12-"],
#section-icons [class*="icon-12-"] {
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
}
#section-icons [class^="icon-16-"],
#section-icons [class*="icon-16-"] {
width: 48px;
height: 48px;
display: inline-block;
text-align: center;
line-height: 48px;
}
.box-ws {
height: 200px;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
display: block;
padding: 0;
position: relative;
text-align: center;
vertical-align: middle;
}
.box-ws .ribbon-container {
top: -5px;
right: -4px;
}
.section-spinners .box-ws {
height: 160px;
display: table;
width: 100%;
margin-bottom: 24px;
}
.section-spinners .box-ws h2 {
font-size: 14px;
}
.section-spinners .box-ws p {
font-size: 12px;
}
.show-tooltip:hover .tooltip {
opacity: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="sidebar">
<ul class="sidebar-list sidebar-list-1 toggler-collapsed">
<li class="sidebar-list-header">
<h3 class="sidebar-list-header-title truncate">marble</h3>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-alerts"><span>Alerts</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-avatars"><span>Avatars</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-buttons"><span>Buttons</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-forms"><span>Forms</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-grids"><span>Grids</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-icons"><span>Icons</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-input-groups"><span>Input Groups</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-labels"><span>Labels</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-ribbon"><span>Ribbon</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-spinners"><span>Spinners</span></a>
</li>
<li class="sidebar-item sidebar-settings-item">
<a class="sidebar-link" href="#section-table"><span>Tables</span></a>
</li>
</ul>
</div>
<div class="sidebar-offset">
<div class="container-hybrid">
<!-- header -->
<div class="row">
<div class="content-header">
<div class="header-title">
marble
</div>
</div>
</div>
<div class="content-body">
<!-- alerts -->
<section id="section-alerts" class="row">
<div class="col-xs-16">
<h3 class="content-body-title">Alerts</h3>
</div>
<div class="col-xs-16">
<a href="alerts.html" class="btn btn-accent">Show Alerts</a>
</div>
</section>
<!-- avatars -->
<section id="section-avatars" class="row">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Avatars</h3>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Icon Fonts</h4>
<a class="avatar-icon-16 avatar-large" href="#" style="background: #9552ef;">
<span class="icon-16-heart" style="color: white;"></span>
</a>
<a class="avatar-icon-12 avatar-large" href="#" style="background: #647efb;">
<span class="icon-12-link" style="color: white;"></span>
</a>
<a class="avatar-icon-16 avatar-medium" href="#" style="background: #c25daa;">
<span class="icon-16-bell" style="color: white;"></span>
</a>
<a class="avatar-icon-12 avatar-medium" href="#" style="background: #ff7175">
<span class="icon-12-star" style="color: white;"></span>
</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Icon SVG</h4>
<a class="avatar-icon avatar-xlarge" href="#" style="background: #647efb;">
<img src="back.svg" alt="Back Icon">
</a>
<a class="avatar-icon avatar-large" href="#" style="background: #647efb;">
<img src="back.svg" alt="Back Icon">
</a>
<a class="avatar-icon avatar-medium" href="#" style="background: #647efb;">
<img src="back.svg" alt="Back Icon">
</a>
<a class="avatar-icon avatar-small" href="#" style="background: #647efb;">
<img src="back.svg" alt="Back Icon">
</a>
<a class="avatar-icon avatar-xsmall" href="#" style="background: #647efb;">
<img src="back.svg" alt="Back Icon">
</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Initials</h4>
<a class="avatar-initials avatar-xlarge" href="#">a</a>
<a class="avatar-initials avatar-large" href="#">b</a>
<a class="avatar-initials avatar-medium" href="#">c</a>
<a class="avatar-initials avatar-small" href="#">d</a>
<a class="avatar-initials avatar-xsmall" href="#">e</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Number</h4>
<a class="avatar-number avatar-xlarge" href="#">+1</a>
<a class="avatar-number avatar-large" href="#">+1</a>
<a class="avatar-number avatar-medium" href="#">+1</a>
<a class="avatar-number avatar-small" href="#">+1</a>
<a class="avatar-number avatar-xsmall" href="#">+1</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Photo</h4>
<a class="avatar-photo avatar-xlarge" href="#">
<img src="images/29.jpg" alt="Chloe Hart">
</a>
<a class="avatar-photo avatar-large" href="#">
<img src="images/29.jpg" alt="Chloe Hart">
</a>
<a class="avatar-photo avatar-medium" href="#">
<img src="images/29.jpg" alt="Bobbie Flores">
</a>
<a class="avatar-photo avatar-small" href="#">
<img src="images/29.jpg" alt="Maureen Cruz">
</a>
<a class="avatar-photo avatar-xsmall" href="#">
<img src="images/29.jpg" alt="Maureen Cruz">
</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Photo + Initials</h4>
<a class="avatar-container avatar-medium" href="#">
<span class="avatar-photo avatar-medium">
<img src="images/29.jpg" alt="Eduardo Lundgren">
</span>
<span class="avatar-initials avatar-medium">
E
</span>
</a>
<a class="avatar-container avatar-medium" href="#">
<span class="avatar-photo avatar-medium">
<img src="http://www.gravatar.com/avatar/0?d=blank&s=100" alt="Eduardo Lundgren">
</span>
<span class="avatar-initials avatar-medium">
E
</span>
</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Squared</h4>
<a class="avatar-photo avatar-medium avatar-squared" href="#">
<img src="images/29.jpg" alt="Chloe Hart">
</a>
<a class="avatar-icon avatar-medium avatar-squared avatar-white avatar-we" href="#">
<span class="icon-16-arrow-up-rod"></span>
</a>
<a class="avatar-initials avatar-medium avatar-squared avatar-white avatar-we" href="#">We</a>
<a class="avatar-initials avatar-medium avatar-squared avatar-success avatar-we" href="#">We</a>
<a class="avatar-initials avatar-medium avatar-squared avatar-primary avatar-we" href="#">We</a>
<a class="avatar-initials avatar-medium avatar-squared avatar-danger avatar-we" href="#">We</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Avatar Colors</h4>
<a class="avatar-initials avatar-medium avatar-success avatar-we" href="#">We</a>
<a class="avatar-initials avatar-medium avatar-primary avatar-we" href="#">We</a>
<a class="avatar-initials avatar-medium avatar-danger avatar-we" href="#">We</a>
<a class="avatar-initials avatar-medium avatar-white avatar-we" href="#">We</a>
</div>
</section><!-- end avatars -->
<!-- buttons -->
<section id="section-buttons" class="row section-buttons">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Buttons</h3>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Types</h4>
<a class="btn btn-accent" href="#">Accent</a>
<a class="btn btn-default" href="#">Default</a>
<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</button>
<a class="btn btn-danger" href="#">Danger</button>
<a class="btn btn-link" href="#">Link</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Disabled</h4>
<a class="btn btn-accent" disabled href="#">Accent</a>
<a class="btn btn-default" disabled href="#">Default</a>
<a class="btn btn-primary" disabled href="#">Primary</a>
<a class="btn btn-success" disabled href="#">Success</button>
<a class="btn btn-danger" disabled href="#">Danger</button>
<a class="btn btn-link" disabled href="#">Link</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Sizes</h4>
<a class="btn btn-accent btn-sm" href="#">Small</a>
<a class="btn btn-accent" href="#">Regular</a>
<a class="btn btn-accent btn-lg" href="#">Large</a>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Tags</h4>
<a class="btn btn-accent" href="#">Link</a>
<button class="btn btn-accent" type="submit">Button</button>
<input class="btn btn-accent" type="button" value="Input">
<input class="btn btn-accent" type="submit" value="Submit">
<input class="btn btn-accent" type="reset" value="Reset">
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Icons</h4>
<a class="btn btn-accent" href="#"><span class="icon-16-star"></span> Accent</a>
<a class="btn btn-default" href="#"><span class="icon-16-star"></span> Default</a>
<a class="btn btn-primary" href="#"><span class="icon-16-star"></span> Primary</a>
<a class="btn btn-success" href="#"><span class="icon-16-star"></span> Success</button>
<a class="btn btn-danger" href="#"><span class="icon-16-star"></span> Danger</button>
<a class="btn btn-link" href="#"><span class="icon-16-star"></span> Link</a>
</div>
</section><!-- end buttons -->
<!-- forms -->
<section id="section-forms" class="row">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Forms</h3>
</div>
<form class="col-xs-16">
<div class="form-group">
<label for="input-regular">Label</label>
<input id="input-regular" class="form-control" type="text" placeholder="Write something here...">
<p class="help-block">A block of auxiliar text</p>
</div>
<div class="form-group">
<label for="input-regular">Type File</label>
<input id="input-regular" class="form-control" type="file" placeholder="Select a file here...">
<p class="help-block">A block of auxiliar text</p>
</div>
<div class="form-group">
<label>Input + Copy to Clipboard</label>
<div class="input-group has-action-button">
<input class="form-control" type="text" onfocus="this.select();" onmouseup="return false;" value="Click to copy to clipboard">
<span class="input-group-btn">
<button class="btn btn-sm btn-primary" type="button">
<span class="icon-12-overlap"></span>
<div class="btn-tooltip">Copy to clipboard</div>
</button>
</span>
</div>
</div>
<div class="form-group">
<label for="input-disabled">Input disabled</label>
<input id="input-disabled" class="form-control" type="text" placeholder="Write something here..." disabled>
<p class="help-block"></p>
</div>
<div class="form-group">
<label for="input-readonly">Input readonly</label>
<input id="input-readonly" class="form-control" type="text" value="Something to read" readonly>
<p class="help-block"></p>
</div>
<div class="form-group">
<label>Input readonly + Copy to Clipboard</label>
<div class="input-group has-action-button">
<input class="form-control" type="text" onfocus="this.select();" onmouseup="return false;" value="Click to copy to clipboard" readonly>
<span class="input-group-btn">
<button class="btn btn-sm btn-primary" type="button">
<span class="icon-12-overlap"></span>
<div class="btn-tooltip">Copy to clipboard</div>
</button>
</span>
</div>
</div>
<div class="form-group">
<label>Input readonly + Click to Show</label>
<div class="input-group has-action-button">
<input class="form-control" type="password" value="B76BABB1377E5CDC8364AF4355659" readonly>
<span class="input-group-btn">
<button class="btn btn-sm btn-primary" type="button">
<span class="icon-12-eye"></span>
<div class="btn-tooltip">Show</div>
</button>
</span>
</div>
</div>
<div class="form-group">
<label>Input readonly + Click to Hide</label>
<div class="input-group has-action-button">
<input class="form-control" type="text" value="B76BABB1377E5CDC8364AF4355659" readonly>
<span class="input-group-btn">
<button class="btn btn-sm btn-primary" type="button">
<span class="icon-12-eye-off"></span>
<div class="btn-tooltip">Hide</div>
</button>
</span>
</div>
</div>
<div class="form-group has-success">
<label for="input-success">Input with success</label>
<input id="input-success" class="form-control" type="text">
<p class="help-block">A block of auxiliar text</p>
</div>
<div class="form-group has-warning">
<label for="input-warning">Input with warning</label>
<input id="input-warning" class="form-control" type="text">
<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
</div>
<div class="form-group has-error">
<label for="input-error">Input with error</label>
<input id="input-error" class="form-control" type="text">
<p class="help-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h4 class="content-body-subtitle">Borderless input</h4>
<div class="form-group">
<input type="text" class="form-control-borderless" placeholder="/">
</div>
<h4 class="content-body-subtitle">Borderless textarea</h4>
<div class="form-group">
<textarea class="form-control-borderless" placeholder="add a description..."></textarea>
</div>
</form>
</section><!-- end forms -->
<!-- grids -->
<section id="section-grids" class="row section-grids">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Grids</h3>
</div>
<div class="col-xs-16">
<a href="grid-breakpoints.html" target="_blank" class="btn btn-accent btn-sm">Grid Breakpoints</a>
</div>
<div class="col-xs-16">
<a href="grid-centered.html" target="_blank" class="btn btn-accent btn-sm">Grid Centered</a>
<a href="grid-fluid.html" target="_blank" class="btn btn-accent btn-sm">Grid Fluid</a>
<a href="grid-hybrid.html" target="_blank" class="btn btn-accent btn-sm">Grid Hybrid</a>
<a href="grid-hybrid-half.html" target="_blank" class="btn btn-accent btn-sm">Grid Hybrid - Half Size</a>
<!--<a href="grid-hybrid-account.html" target="_blank" class="btn btn-accent btn-sm">Grid Hybrid - Account</a>-->
</div>
</section><!-- end grids -->
<!-- icons -->
<section id="section-icons" class="row">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Icons</h3>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Icons 12</h4>
<span title="icon-12-alert" class="icon-12-alert"></span>
<span title="icon-12-apps" class="icon-12-apps"></span>
<span title="icon-12-arrow-down-rod" class="icon-12-arrow-down-rod"></span>
<span title="icon-12-arrow-down-short" class="icon-12-arrow-down-short"></span>
<span title="icon-12-arrow-increase" class="icon-12-arrow-increase"></span>
<span title="icon-12-icon-12-arrow-left-rod" class="icon-12-arrow-left-rod"></span>
<span title="icon-12-icon-12-arrow-left-short" class="icon-12-arrow-left-short"></span>
<span title="icon-12-icon-12-arrow-right-long" class="icon-12-arrow-right-long"></span>
<span title="icon-12-arrow-right-rod" class="icon-12-arrow-right-rod"></span>
<span title="icon-12-icon-12-arrow-right-short" class="icon-12-arrow-right-short"></span>
<span title="icon-12-arrow-up-rod" class="icon-12-arrow-up-rod"></span>
<span title="icon-12-arrow-up-short" class="icon-12-arrow-up-short"></span>
<span title="icon-12-arrows-expand" class="icon-12-arrows-expand"></span>
<span title="icon-12-arrows" class="icon-12-arrows"></span>
<span title="icon-12-balloon-topic" class="icon-12-balloon-topic"></span>
<span title="icon-12-bell-off" class="icon-12-bell-off"></span>
<span title="icon-12-bell" class="icon-12-bell"></span>
<span title="icon-12-bookmark" class="icon-12-bookmark"></span>
<span title="icon-12-briefcase" class="icon-12-briefcase"></span>
<span title="icon-12-bug" class="icon-12-bug"></span>
<span title="icon-12-building-big" class="icon-12-building-big"></span>
<span title="icon-12-camera" class="icon-12-camera"></span>
<span title="icon-12-card" class="icon-12-card"></span>
<span title="icon-12-check" class="icon-12-check"></span>
<span title="icon-12-clock" class="icon-12-clock"></span>
<span title="icon-12-close-long" class="icon-12-close-long"></span>
<span title="icon-12-close-short" class="icon-12-close-short"></span>
<span title="icon-12-cloud" class="icon-12-cloud"></span>
<span title="icon-12-code-file" class="icon-12-code-file"></span>
<span title="icon-12-collapse" class="icon-12-collapse"></span>
<span title="icon-12-collections" class="icon-12-collections"></span>
<span title="icon-12-database" class="icon-12-database"></span>
<span title="icon-12-download" class="icon-12-download"></span>
<span title="icon-12-ellipsis" class="icon-12-ellipsis"></span>
<span title="icon-12-exclamation" class="icon-12-exclamation"></span>
<span title="icon-12-expand" class="icon-12-expand"></span>
<span title="icon-12-external" class="icon-12-external"></span>
<span title="icon-12-eye-off" class="icon-12-eye-off"></span>
<span title="icon-12-eye" class="icon-12-eye"></span>
<span title="icon-12-file" class="icon-12-file"></span>
<span title="icon-12-flag-small" class="icon-12-flag-small"></span>
<span title="icon-12-flag" class="icon-12-flag"></span>
<span title="icon-12-flash-off" class="icon-12-flash-off"></span>
<span title="icon-12-flash" class="icon-12-flash"></span>
<span title="icon-12-folder" class="icon-12-folder"></span>
<span title="icon-12-fork" class="icon-12-fork"></span>
<span title="icon-12-gear" class="icon-12-gear"></span>
<span title="icon-12-github" class="icon-12-github"></span>
<span title="icon-12-graph" class="icon-12-graph"></span>
<span title="icon-12-groups" class="icon-12-groups"></span>
<span title="icon-12-hash" class="icon-12-hash"></span>
<span title="icon-12-heart-full" class="icon-12-heart-full"></span>
<span title="icon-12-house" class="icon-12-house"></span>
<span title="icon-12-image" class="icon-12-image"></span>
<span title="icon-12-info-card" class="icon-12-info-card"></span>
<span title="icon-12-info" class="icon-12-info"></span>
<span title="icon-12-journal" class="icon-12-journal"></span>
<span title="icon-12-leave" class="icon-12-leave"></span>
<span title="icon-12-link" class="icon-12-link"></span>
<span title="icon-12-lock" class="icon-12-lock"></span>
<span title="icon-12-magnifier" class="icon-12-magnifier"></span>
<span title="icon-12-mail" class="icon-12-mail"></span>
<span title="icon-12-menu" class="icon-12-menu"></span>
<span title="icon-12-module" class="icon-12-module"></span>
<span title="icon-12-overlap" class="icon-12-overlap"></span>
<span title="icon-12-pause" class="icon-12-pause"></span>
<span title="icon-12-pen" class="icon-12-pen"></span>
<span title="icon-12-people" class="icon-12-people"></span>
<span title="icon-12-person-card-2" class="icon-12-person-card-2"></span>
<span title="icon-12-person-card-3" class="icon-12-person-card-3"></span>
<span title="icon-12-person" class="icon-12-person"></span>
<span title="icon-12-persons" class="icon-12-persons"></span>
<span title="icon-12-pin" class="icon-12-pin"></span>
<span title="icon-12-play" class="icon-12-play"></span>
<span title="icon-12-plus" class="icon-12-plus"></span>
<span title="icon-12-post" class="icon-12-post"></span>
<span title="icon-12-rocket" class="icon-12-rocket"></span>
<span title="icon-12-signpost" class="icon-12-signpost"></span>
<span title="icon-12-spinner-double-arrow" class="icon-12-spinner-double-arrow"></span>
<span title="icon-12-star" class="icon-12-star"></span>
<span title="icon-12-table" class="icon-12-table"></span>
<span title="icon-12-trash" class="icon-12-trash"></span>
<span title="icon-12-upload" class="icon-12-upload"></span>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Icons 16</h4>
<span title="icon-16-apps" class="icon-16-apps"></span>
<span title="icon-16-arrow-down-rod" class="icon-16-arrow-down-rod"></span>
<span title="icon-16-arrow-down-short" class="icon-16-arrow-down-short"></span>
<span title="icon-16-arrow-left-rod" class="icon-16-arrow-left-rod"></span>
<span title="icon-16-arrow-left-short" class="icon-16-arrow-left-short"></span>
<span title="icon-16-arrow-right-rod" class="icon-16-arrow-right-rod"></span>
<span title="icon-16-arrow-right-short" class="icon-16-arrow-right-short"></span>
<span title="icon-16-arrow-up-rod" class="icon-16-arrow-up-rod"></span>
<span title="icon-16-arrow-up-short" class="icon-16-arrow-up-short"></span>
<span title="icon-16-balloon-comment" class="icon-16-balloon-comment"></span>
<span title="icon-16-balloon-topic" class="icon-16-balloon-topic"></span>
<span title="icon-16-bell-off" class="icon-16-bell-off"></span>
<span title="icon-16-bell" class="icon-16-bell"></span>
<span title="icon-16-bookmark" class="icon-16-bookmark"></span>
<span title="icon-16-building" class="icon-16-building"></span>
<span title="icon-16-bullhorn" class="icon-16-bullhorn"></span>
<span title="icon-16-calendar" class="icon-16-calendar"></span>
<span title="icon-16-camera" class="icon-16-camera"></span>
<span title="icon-16-cancel" class="icon-16-cancel"></span>
<span title="icon-16-checkbox-checked" class="icon-16-checkbox-checked"></span>
<span title="icon-16-checkbox-indeterminate" class="icon-16-checkbox-indeterminate"></span>
<span title="icon-16-checkbox-unchecked" class="icon-16-checkbox-unchecked"></span>
<span title="icon-16-checkmark" class="icon-16-checkmark"></span>
<span title="icon-16-circle-arrow" class="icon-16-circle-arrow"></span>
<span title="icon-16-clear" class="icon-16-clear"></span>
<span title="icon-16-clip" class="icon-16-clip"></span>
<span title="icon-16-clock" class="icon-16-clock"></span>
<span title="icon-16-cloud" class="icon-16-cloud"></span>
<span title="icon-16-code-file" class="icon-16-code-file"></span>
<span title="icon-16-command-line" class="icon-16-command-line"></span>
<span title="icon-16-contract" class="icon-16-contract"></span>
<span title="icon-16-cup" class="icon-16-cup"></span>
<span title="icon-16-database" class="icon-16-database"></span>
<span title="icon-16-download" class="icon-16-download"></span>
<span title="icon-16-dribbble" class="icon-16-dribbble"></span>
<span title="icon-16-ellipsis-vertical" class="icon-16-ellipsis-vertical"></span>
<span title="icon-16-ellipsis" class="icon-16-ellipsis"></span>
<span title="icon-16-expand" class="icon-16-expand"></span>
<span title="icon-16-external" class="icon-16-external"></span>
<span title="icon-16-eye" class="icon-16-eye"></span>
<span title="icon-16-facebook" class="icon-16-facebook"></span>
<span title="icon-16-file-js" class="icon-16-file-js"></span>
<span title="icon-16-file-zip" class="icon-16-file-zip"></span>
<span title="icon-16-flash-off" class="icon-16-flash-off"></span>
<span title="icon-16-flash" class="icon-16-flash"></span>
<span title="icon-16-folder" class="icon-16-folder"></span>
<span title="icon-16-fork" class="icon-16-fork"></span>
<span title="icon-16-gear" class="icon-16-gear"></span>
<span title="icon-16-github" class="icon-16-github"></span>
<span title="icon-16-globe" class="icon-16-globe"></span>
<span title="icon-16-graph" class="icon-16-graph"></span>
<span title="icon-16-groups" class="icon-16-groups"></span>
<span title="icon-16-hammer" class="icon-16-hammer"></span>
<span title="icon-16-hash" class="icon-16-hash"></span>
<span title="icon-16-heart-full" class="icon-16-heart-full"></span>
<span title="icon-16-heart" class="icon-16-heart"></span>
<span title="icon-16-house" class="icon-16-house"></span>
<span title="icon-16-image" class="icon-16-image"></span>
<span title="icon-16-info" class="icon-16-info"></span>
<span title="icon-16-liferay-logo-2-tiny" class="icon-16-liferay-logo-2-tiny"></span>
<span title="icon-16-liferay-logo" class="icon-16-liferay-logo"></span>
<span title="icon-16-link" class="icon-16-link"></span>
<span title="icon-16-lock" class="icon-16-lock"></span>
<span title="icon-16-loop" class="icon-16-loop"></span>
<span title="icon-16-magnifier" class="icon-16-magnifier"></span>
<span title="icon-16-mail-full" class="icon-16-mail-full"></span>
<span title="icon-16-mail-off" class="icon-16-mail-off"></span>
<span title="icon-16-mail" class="icon-16-mail"></span>
<span title="icon-16-markdown" class="icon-16-markdown"></span>
<span title="icon-16-menu-content" class="icon-16-menu-content"></span>
<span title="icon-16-menu" class="icon-16-menu"></span>
<span title="icon-16-minus" class="icon-16-minus"></span>
<span title="icon-16-module" class="icon-16-module"></span>
<span title="icon-16-nodejs" class="icon-16-nodejs"></span>
<span title="icon-16-pause" class="icon-16-pause"></span>
<span title="icon-16-pen" class="icon-16-pen"></span>
<span title="icon-16-people" class="icon-16-people"></span>
<span title="icon-16-person-card" class="icon-16-person-card"></span>
<span title="icon-16-person" class="icon-16-person"></span>
<span title="icon-16-persons" class="icon-16-persons"></span>
<span title="icon-16-phone-business" class="icon-16-phone-business"></span>
<span title="icon-16-phone-house" class="icon-16-phone-house"></span>
<span title="icon-16-phone-work" class="icon-16-phone-work"></span>
<span title="icon-16-phone" class="icon-16-phone"></span>
<span title="icon-16-play" class="icon-16-play"></span>
<span title="icon-16-plus" class="icon-16-plus"></span>
<span title="icon-16-power-button" class="icon-16-power-button"></span>
<span title="icon-16-radio-checked" class="icon-16-radio-checked"></span>
<span title="icon-16-radio-unchecked" class="icon-16-radio-unchecked"></span>
<span title="icon-16-send" class="icon-16-send"></span>
<span title="icon-16-server" class="icon-16-server"></span>
<span title="icon-16-skype" class="icon-16-skype"></span>
<span title="icon-16-speaker-off" class="icon-16-speaker-off"></span>
<span title="icon-16-speaker-on" class="icon-16-speaker-on"></span>
<span title="icon-16-speedometer" class="icon-16-speedometer"></span>
<span title="icon-16-spinner-double-arrows" class="icon-16-spinner-double-arrows"></span>
<span title="icon-16-spinner-single-arrow" class="icon-16-spinner-single-arrow"></span>
<span title="icon-16-star" class="icon-16-star"></span>
<span title="icon-16-streams" class="icon-16-streams"></span>
<span title="icon-16-sun" class="icon-16-sun"></span>
<span title="icon-16-swift" class="icon-16-swift"></span>
<span title="icon-16-table" class="icon-16-table"></span>
<span title="icon-16-tag" class="icon-16-tag"></span>
<span title="icon-16-thumb-down" class="icon-16-thumb-down"></span>
<span title="icon-16-thumb-up" class="icon-16-thumb-up"></span>
<span title="icon-16-trash" class="icon-16-trash"></span>
<span title="icon-16-twitter" class="icon-16-twitter"></span>
<span title="icon-16-upload-file" class="icon-16-upload-file"></span>
<span title="icon-16-upload" class="icon-16-upload"></span>
</div>
</section><!-- end icons -->
<!-- input-groups -->
<section id="section-input-groups" class="row">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Input Groups</h3>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Addons</h4>
<div class="form-group">
<label>Input with preffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
</div>
</div>
<div class="form-group">
<label>Input with suffix</label>
<div class="input-group">
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<div class="form-group">
<label>Input with preffix and suffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Addons Disabled</h4>
<div class="form-group">
<label>Input with preffix</label>
<div class="input-group">
<div class="input-group-addon disabled">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
</div>
</div>
<div class="form-group">
<label>Input with suffix</label>
<div class="input-group">
<input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
<div class="input-group-addon disabled">.appland.com</div>
</div>
</div>
<div class="form-group">
<label>Input with preffix and suffix</label>
<div class="input-group">
<div class="input-group-addon disabled">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
<div class="input-group-addon disabled">.appland.com</div>
</div>
</div>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Addons with states</h4>
<div class="form-group has-error">
<label>Input with error</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
</div>
</div>
<div class="form-group has-warning">
<label>Input with warning</label>
<div class="input-group">
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<div class="form-group has-success">
<label>Input with success</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<input type="text" class="input-group-addon-input form-control" placeholder="app-url">
<div class="input-group-addon">.appland.com</div>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Inner Addons</h4>
<div class="form-group">
<label>Input with icon 12 preffix</label>
<div class="input-inner-addon input-inner-addon-left">
<span class="input-inner-icon-helper icon-12-person"></span>
<input class="form-control" type="text" placeholder="app-url">
</div>
</div>
<div class="form-group">
<label>Input with icon 16 preffix</label>
<div class="input-inner-addon input-inner-addon-left">
<span class="input-inner-icon-helper icon-16-info"></span>
<input class="form-control" type="text" placeholder="app-url">
</div>
</div>
<label>Input with icon 12 suffix</label>
<div class="form-group">
<div class="input-inner-addon input-inner-addon-right">
<input class="form-control" type="text" placeholder="app-url">
<span class="input-inner-icon-helper icon-12-person"></span>
</div>
</div>
<div class="form-group">
<label>Input with icon 16 suffix</label>
<div class="input-inner-addon input-inner-addon-right">
<input class="form-control" type="text" placeholder="app-url">
<span class="input-inner-icon-helper icon-16-info"></span>
</div>
</div>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Addons + Inner Addons</h4>
<div class="form-group">
<label>Input with preffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-12-person"></span>
<input type="text" class="input-group-addon-input input-group-addon-input-right form-control" placeholder="app-url">
</div>
</div>
</div>
<div class="form-group">
<label>Input with suffix</label>
<div class="input-group">
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-16-info"></span>
<input type="text" class="input-group-addon-input input-group-addon-input-left form-control" placeholder="app-url">
</div>
<div class="input-group-addon">.appland.com</div>
</div>
</div>
<div class="form-group">
<label>Input with preffix and suffix</label>
<div class="input-group">
<div class="input-group-addon">http://</div>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-16-info"></span>
<input type="text" class="input-group-addon-input input-group-addon-input-center form-control" placeholder="app-url">
</div>
<div class="input-group-addon">.appland.com</div>
</div>
</div>
</div>
<div style="clear:both"></div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Button Addons</h4>
<div class="form-group">
<label>Input with button preffix</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
<input class="form-control" type="text" placeholder="Invite people to this app">
</div>
</div>
<div class="form-group">
<label>Input with button suffix</label>
<div class="input-group">
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Button Addons + Inner Addon</h4>
<div class="form-group">
<label>Input with button and icon 12 suffix</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-12-person"></span>
<input class="input-btn-left form-control" type="text" placeholder="Invite people to this app">
</div>
</div>
</div>
<div class="form-group">
<label>Input with button and icon 16 suffix</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
<div class="input-inner-addon input-inner-addon-left">
<span class="icon-16-info"></span>
<input class="input-btn-left form-control" type="text" placeholder="Invite people to this app">
</div>
</div>
</div>
<div class="form-group">
<label>Input with button and icon 12 suffix</label>
<div class="input-group">
<div class="input-inner-addon input-inner-addon-right">
<span class="icon-12-person"></span>
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
</div>
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
<div class="form-group">
<label>Input with button and icon 16 suffix</label>
<div class="input-group">
<div class="input-inner-addon input-inner-addon-right">
<span class="icon-16-info"></span>
<input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
</div>
<span class="input-group-btn">
<button class="btn btn-sm btn-accent" type="button">Send Invite</button>
</span>
</div>
</div>
</div>
</section><!-- end input-groups -->
<!-- labels -->
<section id="section-labels" class="row section-labels">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Labels</h3>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Types</h4>
<span class="label label-default"><span class="label-text">Default</span></span>
<span class="label label-primary"><span class="label-text">Primary</span></span>
<span class="label label-success"><span class="label-text">Success</span></span>
<span class="label label-warning"><span class="label-text">Warning</span></span>
<span class="label label-danger"><span class="label-text">Danger</span></span>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Sizes</h4>
<span class="label label-default label-sm">Small</span>
<span class="label label-primary label-sm">Small</span>
<span class="label label-default">Regular</span>
<span class="label label-primary">Regular</span>
</div>
<div style="clear: both;"></div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Icons</h4>
<span class="label label-default">
<span class="label-icon icon-12-person"></span>
Default
</span>
<span class="label label-primary">
<span class="label-icon icon-12-person"></span>
Primary
</span>
<span class="label label-success">
<span class="label-icon icon-12-person"></span>
Success
</span>
<span class="label label-warning">
<span class="label-icon icon-12-person"></span>
Warning
</span>
<span class="label label-danger">
<span class="label-icon icon-12-person"></span>
Danger
</span>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Clickable</h4>
<button class="btn-transparent label label-default label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Default</span>
</button>
<button class="btn-transparent label label-primary label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Primary</span>
</button>
<button class="btn-transparent label label-success label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Success</span>
</button>
<button class="btn-transparent label label-warning label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Warning</span>
</button>
<button class="btn-transparent label label-danger label-clickable">
<span class="label-action icon-12-trash"></span>
<span class="label-icon icon-12-person"></span>
<span class="label-content">Danger</span>
</button>
</div>
</section><!-- end labels -->
<!-- ribbon -->
<section id="section-ribbon" class="row">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Ribbon</h3>
</div>
<div class="col-xs-16 col-sm-8 col-md-4">
<h4 class="content-body-subtitle">Default</h4>
<div class="box-ws">
<div class="ribbon-container">
<div class="ribbon">New</div>
</div>
</div>
</div>
<div class="col-xs-16 col-md-4">
<h4 class="content-body-subtitle">Accent</h4>
<div class="box-ws">
<div class="ribbon-container">
<div class="ribbon ribbon-accent">New</div>
</div>
</div>
</div>
<div class="col-xs-16 col-md-4">
<h4 class="content-body-subtitle">Warning</h4>
<div class="box-ws">
<div class="ribbon-container">
<div class="ribbon ribbon-warning">New</div>
</div>
</div>
</div>
<div class="col-xs-16 col-md-4">
<h4 class="content-body-subtitle">Danger</h4>
<div class="box-ws">
<div class="ribbon-container">
<div class="ribbon ribbon-danger">New</div>
</div>
</div>
</div>
</section><!-- end ribbon -->
<!-- spinners -->
<section id="section-spinners" class="row section-spinners">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Spinners</h3>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner large</h3>
<span class="spinner spinner-large"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner medium</h3>
<span class="spinner spinner-medium"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner small</h3>
<span class="spinner spinner-small"></span>
<p>Loading...</p>
</div>
</div>
<!-- danger -->
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner large danger</h3>
<span class="spinner spinner-large spinner-danger"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner medium danger</h3>
<span class="spinner spinner-medium spinner-danger"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner small danger</h3>
<span class="spinner spinner-small spinner-danger"></span>
<p>Loading...</p>
</div>
</div>
<!-- warning -->
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner large warning</h3>
<span class="spinner spinner-large spinner-warning"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner medium warning</h3>
<span class="spinner spinner-medium spinner-warning"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner small warning</h3>
<span class="spinner spinner-small spinner-warning"></span>
<p>Loading...</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done</h3>
<span class="spinner spinner-large spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done</h3>
<span class="spinner spinner-medium spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done</h3>
<span class="spinner spinner-small spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<!-- danger -->
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done danger</h3>
<span class="spinner spinner-large spinner-danger spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done danger</h3>
<span class="spinner spinner-medium spinner-danger spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done danger</h3>
<span class="spinner spinner-small spinner-danger spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<!-- warning -->
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done warning</h3>
<span class="spinner spinner-large spinner-warning spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done warning</h3>
<span class="spinner spinner-medium spinner-warning spinner-done"></span>
<p>Loaded</p>
</div>
</div>
<div class="col-xs-4">
<div class="box-ws">
<h2>spinner done warning</h3>
<span class="spinner spinner-small spinner-warning spinner-done"></span>
<p>Loaded</p>
</div>
</div>
</section> <!-- end spinners -->
<!-- table -->
<section id="section-table" class="row">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Tables</h3>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">No Collections</h4>
<div style="position: relative; height: 240px; width: 100%; border: 1px solid rgba(14, 20, 26, 0.2);" class="no-collections">
<div class="empty-collection">
<div class="notfound">
<div class="notfound-icon">
<span class="icon-16-database"></span>
</div>
<p class="notfound-text">You have no collections.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-16 col-md-8">
<h4 class="content-body-subtitle">Empty Collection</h4>
<div style="position: relative; height: 240px; width: 100%; border: 1px solid rgba(14, 20, 26, 0.2);" class="no-data">
<div class="empty-data">
<div class="notfound">
<div class="notfound-icon">
<span class="icon-16-database"></span>
</div>
<p class="notfound-text">This collection is empty.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Loading</h4>
<div style="position: relative; height: 200px; width: 100%; border: 1px solid rgba(14, 20, 26, 0.2);" class="loading">
<div class="light-loader">
<span class="spinner spinner-medium"></span>
</div>
</div>
</div>
<div class="col-xs-16">
<h4 class="content-body-subtitle">Populated</h4>
<div class="datatable">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</td>
<th>Username</td>
<th class="text-center">Required</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td class="text-center">
<span class="icon-16-checkmark"></span>
</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td class="text-center">
<span class="icon-16-checkmark"></span>
</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td class="text-center">
<span class="icon-16-checkmark"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!-- end tables -->
<!-- tooltip -->
<!-- <div class="row section-labels">
<div class="col-xs-16">
<h3 class="content-body-title ws-demo">Tooltip</h3>
</div>
<div class="col-xs-16">
<a class="avatar-photo avatar-large show-tooltip" href="#">
<img src="images/7.jpg" alt="Chloe Hart">
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<section class="tooltip-inner">
Ruth Shayegan
</section>
</div>
</a>
<a class="avatar-photo avatar-large show-tooltip" href="#">
<img src="images/19.jpg" alt="Chloe Hart">
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<section class="tooltip-inner">
Lyndsie Seidman
</section>
</div>
</a>
<a class="avatar-photo avatar-large show-tooltip" href="#">
<img src="images/29.jpg" alt="Chloe Hart">
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<section class="tooltip-inner">
Ruth Shayegan
</section>
</div>
</a>
</div>
</div> --><!-- end tooltip -->
</div><!-- end content-body -->
</div><!-- end container-hybrid -->
</div><!-- end sidebar-offset -->
</div><!-- end content -->
</body>
</html>