846 lines
31 KiB
HTML
846 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
|
|
TABLE OF CONTENTS.
|
|
|
|
Use search to find needed section.
|
|
|
|
=============================================================
|
|
|
|
| 1. $BODY | Body |
|
|
| 2. $MAIN_NAVIGATION | Main navigation |
|
|
| 3. $NAVBAR_ICON_BUTTONS | Navbar Icon Buttons |
|
|
| 4. $MAIN_MENU | Main menu |
|
|
| 5. $HEADINGS_AND_PARAGRAPHS | Headings and paragraphs |
|
|
| 6. $WELLS | Headings and paragraphs |
|
|
| 7. $GROUPED_LISTS | Grouped lists |
|
|
| 8. $NOTES | Notes |
|
|
|
|
=============================================================
|
|
|
|
-->
|
|
|
|
|
|
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
<!--[if IE 9]> <html class="ie9 gt-ie8"> <![endif]-->
|
|
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>Typography - UI Elements - PixelAdmin</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
|
<!-- Open Sans font from Google CDN -->
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">
|
|
|
|
<!-- Pixel Admin's stylesheets -->
|
|
<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
|
|
<link href="assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="assets/javascripts/ie.min.js"></script>
|
|
<![endif]-->
|
|
|
|
</head>
|
|
|
|
|
|
<!-- 1. $BODY ======================================================================================
|
|
|
|
Body
|
|
|
|
Classes:
|
|
* 'theme-{THEME NAME}'
|
|
* 'right-to-left' - Sets text direction to right-to-left
|
|
* 'main-menu-right' - Places the main menu on the right side
|
|
* 'no-main-menu' - Hides the main menu
|
|
* 'main-navbar-fixed' - Fixes the main navigation
|
|
* 'main-menu-fixed' - Fixes the main menu
|
|
* 'main-menu-animated' - Animate main menu
|
|
-->
|
|
<body class="theme-default main-menu-animated">
|
|
|
|
<script>var init = [];</script>
|
|
<!-- Demo script --> <script src="assets/demo/demo.js"></script> <!-- / Demo script -->
|
|
|
|
<div id="main-wrapper">
|
|
|
|
|
|
<!-- 2. $MAIN_NAVIGATION ===========================================================================
|
|
|
|
Main navigation
|
|
-->
|
|
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
|
|
<!-- Main menu toggle -->
|
|
<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
|
|
|
|
<div class="navbar-inner">
|
|
<!-- Main navbar header -->
|
|
<div class="navbar-header">
|
|
|
|
<!-- Logo -->
|
|
<a href="index.html" class="navbar-brand">
|
|
<div><img alt="Pixel Admin" src="assets/images/pixel-admin/main-navbar-logo.png"></div>
|
|
PixelAdmin
|
|
</a>
|
|
|
|
<!-- Main navbar toggle -->
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>
|
|
|
|
</div> <!-- / .navbar-header -->
|
|
|
|
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
|
|
<div>
|
|
<ul class="nav navbar-nav">
|
|
<li>
|
|
<a href="#">Home</a>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#">First item</a></li>
|
|
<li><a href="#">Second item</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Third item</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navbar-nav -->
|
|
|
|
<div class="right clearfix">
|
|
<ul class="nav navbar-nav pull-right right-navbar-nav">
|
|
|
|
<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================
|
|
|
|
Navbar Icon Buttons
|
|
|
|
NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.
|
|
|
|
Classes:
|
|
* 'nav-icon-btn-info'
|
|
* 'nav-icon-btn-success'
|
|
* 'nav-icon-btn-warning'
|
|
* 'nav-icon-btn-danger'
|
|
-->
|
|
<li class="nav-icon-btn nav-icon-btn-danger dropdown">
|
|
<a href="#notifications" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class="label">5</span>
|
|
<i class="nav-icon fa fa-bullhorn"></i>
|
|
<span class="small-screen-text">Notifications</span>
|
|
</a>
|
|
|
|
<!-- NOTIFICATIONS -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#main-navbar-notifications').slimScroll({ height: 250 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="dropdown-menu widget-notifications no-padding" style="width: 300px">
|
|
<div class="notifications-list" id="main-navbar-notifications">
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-danger">SYSTEM</div>
|
|
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-info">STORE</div>
|
|
<div class="notification-description">You have <strong>9</strong> new orders.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-truck bg-info"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-default">CRON DAEMON</div>
|
|
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-clock-o bg-default"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-success">SYSTEM</div>
|
|
<div class="notification-description">Server <strong>up</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-success"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
<div class="notification">
|
|
<div class="notification-title text-warning">SYSTEM</div>
|
|
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
|
|
<div class="notification-ago">12h ago</div>
|
|
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
|
|
</div> <!-- / .notification -->
|
|
|
|
</div> <!-- / .notifications-list -->
|
|
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
|
|
</div> <!-- / .dropdown-menu -->
|
|
</li>
|
|
<li class="nav-icon-btn nav-icon-btn-success dropdown">
|
|
<a href="#messages" class="dropdown-toggle" data-toggle="dropdown">
|
|
<span class="label">10</span>
|
|
<i class="nav-icon fa fa-envelope"></i>
|
|
<span class="small-screen-text">Income messages</span>
|
|
</a>
|
|
|
|
<!-- MESSAGES -->
|
|
|
|
<!-- Javascript -->
|
|
<script>
|
|
init.push(function () {
|
|
$('#main-navbar-messages').slimScroll({ height: 250 });
|
|
});
|
|
</script>
|
|
<!-- / Javascript -->
|
|
|
|
<div class="dropdown-menu widget-messages-alt no-padding" style="width: 300px;">
|
|
<div class="messages-list" id="main-navbar-messages">
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Michelle Bortz</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Timothy Owens</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Denise Steiner</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Michelle Bortz</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Timothy Owens</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Denise Steiner</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
<div class="message">
|
|
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
|
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
|
<div class="message-description">
|
|
from <a href="#">Robert Jang</a>
|
|
·
|
|
2h ago
|
|
</div>
|
|
</div> <!-- / .message -->
|
|
|
|
</div> <!-- / .messages-list -->
|
|
<a href="#" class="messages-link">MORE MESSAGES</a>
|
|
</div> <!-- / .dropdown-menu -->
|
|
</li>
|
|
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->
|
|
|
|
<li>
|
|
<form class="navbar-form pull-left">
|
|
<input type="text" class="form-control" placeholder="Search">
|
|
</form>
|
|
</li>
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
|
|
<img src="assets/demo/avatars/1.jpg">
|
|
<span>John Doe</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
|
|
<li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li>
|
|
<li><a href="#"><i class="dropdown-icon fa fa-cog"></i> Settings</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i> Log Out</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navbar-nav -->
|
|
</div> <!-- / .right -->
|
|
</div>
|
|
</div> <!-- / #main-navbar-collapse -->
|
|
</div> <!-- / .navbar-inner -->
|
|
</div> <!-- / #main-navbar -->
|
|
<!-- /2. $END_MAIN_NAVIGATION -->
|
|
|
|
|
|
<!-- 4. $MAIN_MENU =================================================================================
|
|
|
|
Main menu
|
|
|
|
Notes:
|
|
* to make the menu item active, add a class 'active' to the <li>
|
|
example: <li class="active">...</li>
|
|
* multilevel submenu example:
|
|
<li class="mm-dropdown">
|
|
<a href="#"><span class="mm-text">Submenu item text 1</span></a>
|
|
<ul>
|
|
<li>...</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><span class="mm-text">Submenu item text 2</span></a>
|
|
<ul>
|
|
<li>...</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
-->
|
|
<div id="main-menu" role="navigation">
|
|
<div id="main-menu-inner">
|
|
<div class="menu-content top" id="menu-content-demo">
|
|
<!-- Menu custom content demo
|
|
CSS: styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
|
|
Javascript: html/assets/demo/demo.js
|
|
-->
|
|
<div>
|
|
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>
|
|
|
|
<img src="assets/demo/avatars/1.jpg" alt="" class="">
|
|
<div class="btn-group">
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-envelope"></i></a>
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-user"></i></a>
|
|
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-cog"></i></a>
|
|
<a href="#" class="btn btn-xs btn-danger btn-outline dark"><i class="fa fa-power-off"></i></a>
|
|
</div>
|
|
<a href="#" class="close">×</a>
|
|
</div>
|
|
</div>
|
|
<ul class="navigation">
|
|
<li>
|
|
<a href="index.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-th"></i><span class="mm-text">Layouts</span><span class="label label-warning">Updated</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="stat-panels.html"><i class="menu-icon fa fa-tasks"></i><span class="mm-text">Stat panels</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="widgets.html"><i class="menu-icon fa fa-flask"></i><span class="mm-text">Widgets</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-desktop"></i><span class="mm-text">UI elements</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="ui-buttons.html"><span class="mm-text">Buttons</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-typography.html"><span class="mm-text">Typography</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-tabs.html"><span class="mm-text">Tabs & Accordions</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-modals.html"><span class="mm-text">Modals</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-alerts.html"><span class="mm-text">Alerts & Tooltips</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-components.html"><span class="mm-text">Components</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-panels.html"><span class="mm-text">Panels</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-jqueryui.html"><span class="mm-text">jQuery UI</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-icons.html"><span class="mm-text">Icons</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="ui-utility-classes.html"><span class="mm-text">Utility classes</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-check-square"></i><span class="mm-text">Form components</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="forms-layouts.html"><span class="mm-text">Layouts</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-general.html"><span class="mm-text">General</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-advanced.html"><span class="mm-text">Advanced</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-pickers.html"><span class="mm-text">Pickers</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-validation.html"><span class="mm-text">Validation</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="forms-editors.html"><span class="mm-text">Editors</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="tables.html"><i class="menu-icon fa fa-table"></i><span class="mm-text">Tables</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="charts.html"><i class="menu-icon fa fa-bar-chart-o"></i><span class="mm-text">Charts</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-files-o"></i><span class="mm-text">Pages</span><span class="label label-success">16</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="pages-search.html"><span class="mm-text">Search results</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-pricing.html"><span class="mm-text">Plans & pricing</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-faq.html"><span class="mm-text">FAQ</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-profile.html"><span class="mm-text">Profile</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-timeline.html"><span class="mm-text">Timeline</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signin.html"><span class="mm-text">Sign In</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signup.html"><span class="mm-text">Sign Up</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signin-alt.html"><span class="mm-text">Sign In Alt</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-signup-alt.html"><span class="mm-text">Sign Up Alt</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-invoice.html"><span class="mm-text">Invoice</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-404.html"><span class="mm-text">Error 404</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-500.html"><span class="mm-text">Error 500</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-envelope"></i><span class="mm-text">Messages</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="pages-inbox.html"><span class="mm-text">Inbox</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-show-email.html"><span class="mm-text">Show message</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-new-email.html"><span class="mm-text">New message</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="pages-blank.html"><span class="mm-text">Blank page</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="complete-ui.html"><i class="menu-icon fa fa-briefcase"></i><span class="mm-text">Complete UI</span></a>
|
|
</li>
|
|
<li>
|
|
<a href="color-builder.html"><i class="menu-icon fa fa-tint"></i><span class="mm-text">Color Builder</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a href="#"><i class="menu-icon fa fa-sitemap"></i><span class="mm-text">Menu levels</span><span class="badge badge-primary">6</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.1</span><span class="badge badge-danger">12</span><span class="label label-info">21</span></a>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.2</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.3</span><span class="label label-warning">5</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.1</span></a>
|
|
</li>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
|
<ul>
|
|
<li class="mm-dropdown">
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.1</span></a>
|
|
<ul>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 4.1</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.2</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul> <!-- / .navigation -->
|
|
<div class="menu-content">
|
|
<a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline dark">Create Invoice</a>
|
|
</div>
|
|
</div> <!-- / #main-menu-inner -->
|
|
</div> <!-- / #main-menu -->
|
|
<!-- /4. $MAIN_MENU -->
|
|
|
|
|
|
<div id="content-wrapper">
|
|
|
|
<div class="page-header">
|
|
<h1><span class="text-light-gray">UI Elements / </span>Typography</h1>
|
|
</div> <!-- / .page-header -->
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
<!-- 5. $HEADINGS_AND_PARAGRAPHS ===================================================================
|
|
|
|
Headings and paragraphs
|
|
-->
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Headings & Paragraphs</span>
|
|
</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th width="30%" class="panel-padding-h">Type</th>
|
|
<th class="panel-padding-h">Live Example</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<!-- Headings -->
|
|
<tr>
|
|
<td class="panel-padding">
|
|
Headings
|
|
</td>
|
|
<td class="panel-padding">
|
|
<h6>Heading 6 <small>Secondary text</small></h6>
|
|
<h5>Heading 5 <small>Secondary text</small></h5>
|
|
<h4>Heading 4 <small>Secondary text</small></h4>
|
|
<h3>Heading 3 <small>Secondary text</small></h3>
|
|
<h2>Heading 2 <small>Secondary text</small></h2>
|
|
<h1>Heading 1 <small>Secondary text</small></h1>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Paragraphs -->
|
|
<tr>
|
|
<td class="panel-padding">Paragraphs</td>
|
|
<td class="panel-padding">
|
|
<p>Of on affixed civilly moments promise explain fertile in. Assurance advantage belonging happiness departure so of. Now improving and one sincerity intention allowance commanded not. Oh an am frankness be necessary earnestly advantage estimable extensive. Five he wife gone ye. Mrs suffering sportsmen earnestly any. In am do giving to afford parish settle easily garret.</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Text Classes -->
|
|
<tr>
|
|
<td class="panel-padding">Text Classes</td>
|
|
<td class="panel-padding">
|
|
<p class="text-default">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
<p class="text-light-gray">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Text alignment -->
|
|
<tr>
|
|
<td class="panel-padding">Text alignment</td>
|
|
<td class="panel-padding">
|
|
<p class="text-left">Left aligned text.</p>
|
|
<p class="text-center">Center aligned text.</p>
|
|
<p class="text-right">Right aligned text.</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Horizontal Rule -->
|
|
<tr>
|
|
<td class="panel-padding">Horizontal Rule</td>
|
|
<td class="panel-padding">
|
|
<hr>
|
|
Horizontal rule markup as <code><hr /></code> will create the above line.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- /5. $HEADINGS_AND_PARAGRAPHS -->
|
|
|
|
<!-- 6. $WELLS =====================================================================================
|
|
|
|
Headings and paragraphs
|
|
-->
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Wells</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="well">
|
|
Look, I'm in a well!
|
|
</div>
|
|
<div class="well well-lg">
|
|
Look, I'm in a well, but a large well!
|
|
</div>
|
|
<div class="well well-sm">
|
|
Look, I'm in a small well!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /6. $WELLS -->
|
|
|
|
<!-- 7. $GROUPED_LISTS =============================================================================
|
|
|
|
Grouped lists
|
|
-->
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Grouped lists</span>
|
|
</div>
|
|
<table class="table table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%" class="panel-padding-h">Simple</th>
|
|
<th class="panel-padding-h">With Links</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<!-- Simple panels -->
|
|
<td class="panel-padding">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<span class="badge badge-primary">5</span>
|
|
Cras justo odio
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="badge badge-info">14</span>
|
|
Dapibus ac facilisis in
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="badge badge-danger">11</span>
|
|
Morbi leo risus
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="badge badge-success">3</span>
|
|
Porta ac consectetur ac
|
|
</li>
|
|
<li class="list-group-item">
|
|
<span class="badge badge-warning">7</span>
|
|
Vestibulum at eros
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
|
|
<!-- Panels with links -->
|
|
<td class="panel-padding">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item active">
|
|
<span class="badge badge-primary">5</span>
|
|
Cras justo odio
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<span class="badge badge-info">14</span>
|
|
Dapibus ac facilisis in
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<span class="badge badge-danger">11</span>
|
|
Morbi leo risus
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<span class="badge badge-success">3</span>
|
|
Porta ac consectetur ac
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<span class="badge badge-warning">7</span>
|
|
Vestibulum at eros
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Custom content -->
|
|
<tr>
|
|
<td class="panel-padding" colspan="2">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item active">
|
|
<h4 class="list-group-item-heading">Domestic confined any but son</h4>
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit..</p>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<h4 class="list-group-item-heading">Why painful the sixteen how minuter</h4>
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
</a>
|
|
<a href="#" class="list-group-item">
|
|
<h4 class="list-group-item-heading">Barton waited twenty always repair</h4>
|
|
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- /7. $GROUPED_LISTS -->
|
|
|
|
<!-- 8. $NOTES =====================================================================================
|
|
|
|
Notes
|
|
-->
|
|
<div class="panel">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">Notes</span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="note">
|
|
<h4 class="note-title">Default note title</h4>
|
|
Default note text here.
|
|
</div>
|
|
|
|
<div class="note note-success">
|
|
<h4 class="note-title">Success note title</h4>
|
|
Success note text here.
|
|
</div>
|
|
|
|
<div class="note note-danger">
|
|
<h4 class="note-title">Danger note title</h4>
|
|
Danger note text here.
|
|
</div>
|
|
|
|
<div class="note note-warning">
|
|
<h4 class="note-title">Warning note title</h4>
|
|
Warning note text here.
|
|
</div>
|
|
|
|
<div class="note note-info">
|
|
<h4 class="note-title">Info note title</h4>
|
|
Info note text here.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /8. $NOTES -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- / #content-wrapper -->
|
|
<div id="main-menu-bg"></div>
|
|
</div> <!-- / #main-wrapper -->
|
|
|
|
<!-- Get jQuery from Google CDN -->
|
|
<!--[if !IE]> -->
|
|
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">'+"<"+"/script>"); </script>
|
|
<!-- <![endif]-->
|
|
<!--[if lte IE 9]>
|
|
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
|
|
<![endif]-->
|
|
|
|
|
|
<!-- Pixel Admin's javascripts -->
|
|
<script src="assets/javascripts/bootstrap.min.js"></script>
|
|
<script src="assets/javascripts/pixel-admin.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
init.push(function () {
|
|
// Javascript code here
|
|
})
|
|
window.PixelAdmin.start(init);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |