http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/f6922c96/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html ---------------------------------------------------------------------- diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html new file mode 100644 index 0000000..aa52d18 --- /dev/null +++ b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html @@ -0,0 +1,1512 @@ +<section id='components' data-spy="scroll" data-target="#scrollspy-components"> + <h2 class='page-header'><a href="#components">Components</a></h2> + <div class='callout callout-info lead'> + <h4>Reminder!</h4> + <p> + AdminLTE uses all of Bootstrap 3 components. It's a good start to review + the <a href="http://getbootstrap.com";>Bootstrap documentation</a> to get an idea of the various components + that this documentation <b>does not</b> cover. + </p> + </div> + <div class='callout callout-danger lead'> + <h4>Tip!</h4> + <p> + If you go through the example pages and would like to copy a component, right-click on + the component and choose "inspect element" to get to the HTML quicker than scanning + the HTML page. + </p> + </div> + <h3 id='component-main-header'>Main Header</h3> + <p class='lead'>The main header contains the logo and navbar. Construction of the + navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. + The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for + the top nav layout.</p> + <div class="box box-solid"> + <div class="box-body" style="position: relative;"> + <span class="eg">Main Header Example</span> + <header class="main-header" style="position: relative;"> + <!-- Logo --> + <a href="index2.html" class="logo" style='position: relative;'><b>Admin</b>LTE</a> + <!-- Header Navbar: style can be found in header.less --> + <nav class="navbar" role="navigation" style="border: 0;"> + <!-- Sidebar toggle button--> + <a href="#" class="sidebar-toggle" role="button"> + <span class="sr-only">Toggle navigation</span> + </a> + <!-- Navbar Right Menu --> + <div class="navbar-custom-menu"> + <ul class="nav navbar-nav"> + <!-- Messages: style can be found in dropdown.less--> + <li class="dropdown messages-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-envelope-o"></i> + <span class="label label-success">4</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 4 messages</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li><!-- start message --> + <a href="#"> + <div class="pull-left"> + <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/> + </div> + <h4> + Support Team + <small><i class="fa fa-clock-o"></i> 5 mins</small> + </h4> + <p>Why not buy a new awesome theme?</p> + </a> + </li><!-- end message --> + </ul> + </li> + <li class="footer"><a href="#">See All Messages</a></li> + </ul> + </li> + <!-- Notifications: style can be found in dropdown.less --> + <li class="dropdown notifications-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-bell-o"></i> + <span class="label label-warning">10</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 10 notifications</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li> + <a href="#"> + <i class="fa fa-users text-aqua"></i> 5 new members joined today + </a> + </li> + </ul> + </li> + <li class="footer"><a href="#">View all</a></li> + </ul> + </li> + <!-- Tasks: style can be found in dropdown.less --> + <li class="dropdown tasks-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-flag-o"></i> + <span class="label label-danger">9</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 9 tasks</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li><!-- Task item --> + <a href="#"> + <h3> + Design some buttons + <small class="pull-right">20%</small> + </h3> + <div class="progress xs"> + <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> + <span class="sr-only">20% Complete</span> + </div> + </div> + </a> + </li><!-- end task item --> + </ul> + </li> + <li class="footer"> + <a href="#">View all tasks</a> + </li> + </ul> + </li> + <!-- User Account: style can be found in dropdown.less --> + <li class="dropdown user user-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/> + <span class="hidden-xs">Alexander Pierce</span> + </a> + <ul class="dropdown-menu"> + <!-- User image --> + <li class="user-header"> + <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> + <p> + Alexander Pierce - Web Developer + <small>Member since Nov. 2012</small> + </p> + </li> + <!-- Menu Body --> + <li class="user-body"> + <div class="col-xs-4 text-center"> + <a href="#">Followers</a> + </div> + <div class="col-xs-4 text-center"> + <a href="#">Sales</a> + </div> + <div class="col-xs-4 text-center"> + <a href="#">Friends</a> + </div> + </li> + <!-- Menu Footer--> + <li class="user-footer"> + <div class="pull-left"> + <a href="#" class="btn btn-default btn-flat">Profile</a> + </div> + <div class="pull-right"> + <a href="#" class="btn btn-default btn-flat">Sign out</a> + </div> + </li> + </ul> + </li> + </ul> + </div> + </nav> + </header> + </div> + </div> + <pre class='prettyprint'> +<header class="main-header"> + <a href="../../index2.html" class="logo"> + <!-- LOGO --> + AdminLTE + </a> + <!-- Header Navbar: style can be found in header.less --> + <nav class="navbar navbar-static-top" role="navigation"> + <!-- Navbar Right Menu --> + <div class="navbar-custom-menu"> + <ul class="nav navbar-nav"> + <!-- Messages: style can be found in dropdown.less--> + <li class="dropdown messages-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-envelope-o"></i> + <span class="label label-success">4</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 4 messages</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li><!-- start message --> + <a href="#"> + <div class="pull-left"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/> + </div> + <h4> + Sender Name + <small><i class="fa fa-clock-o"></i> 5 mins</small> + </h4> + <p>Message Excerpt</p> + </a> + </li><!-- end message --> + ... + </ul> + </li> + <li class="footer"><a href="#">See All Messages</a></li> + </ul> + </li> + <!-- Notifications: style can be found in dropdown.less --> + <li class="dropdown notifications-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-bell-o"></i> + <span class="label label-warning">10</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 10 notifications</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li> + <a href="#"> + <i class="ion ion-ios-people info"></i> Notification title + </a> + </li> + ... + </ul> + </li> + <li class="footer"><a href="#">View all</a></li> + </ul> + </li> + <!-- Tasks: style can be found in dropdown.less --> + <li class="dropdown tasks-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <i class="fa fa-flag-o"></i> + <span class="label label-danger">9</span> + </a> + <ul class="dropdown-menu"> + <li class="header">You have 9 tasks</li> + <li> + <!-- inner menu: contains the actual data --> + <ul class="menu"> + <li><!-- Task item --> + <a href="#"> + <h3> + Design some buttons + <small class="pull-right">20%</small> + </h3> + <div class="progress xs"> + <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> + <span class="sr-only">20% Complete</span> + </div> + </div> + </a> + </li><!-- end task item --> + ... + </ul> + </li> + <li class="footer"> + <a href="#">View all tasks</a> + </li> + </ul> + </li> + <!-- User Account: style can be found in dropdown.less --> + <li class="dropdown user user-menu"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"> + <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/> + <span class="hidden-xs">Alexander Pierce</span> + </a> + <ul class="dropdown-menu"> + <!-- User image --> + <li class="user-header"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> + <p> + Alexander Pierce - Web Developer + <small>Member since Nov. 2012</small> + </p> + </li> + <!-- Menu Body --> + <li class="user-body"> + <div class="col-xs-4 text-center"> + <a href="#">Followers</a> + </div> + <div class="col-xs-4 text-center"> + <a href="#">Sales</a> + </div> + <div class="col-xs-4 text-center"> + <a href="#">Friends</a> + </div> + </li> + <!-- Menu Footer--> + <li class="user-footer"> + <div class="pull-left"> + <a href="#" class="btn btn-default btn-flat">Profile</a> + </div> + <div class="pull-right"> + <a href="#" class="btn btn-default btn-flat">Sign out</a> + </div> + </li> + </ul> + </li> + </ul> + </div> + </nav> +</header></pre> + <h4>Top Nav Layout. Main Header Example.</h4> + <div class="callout callout-info lead"> + <h4>Reminder!</h4> + <p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to the body tag.</p> + </div> + <div class="box box-solid"> + <div class="box-body layout-top-nav"> + <span class="eg">Top Nav Example</span> + <header class="main-header"> + <nav class="navbar navbar-static-top"> + <div class="container-fluid"> + <div class="navbar-header"> + <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> + <i class="fa fa-bars"></i> + </button> + </div> + + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + <li class="divider"></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> + </div> + </form> + <ul class="nav navbar-nav navbar-right"> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> + </nav> + </header> + </div> + </div> + <pre class='prettyprint'> +<header class="main-header"> + <nav class="navbar navbar-static-top"> + <div class="container-fluid"> + <div class="navbar-header"> + <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> + <i class="fa fa-bars"></i> + </button> + </div> + + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + <li class="divider"></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <form class="navbar-form navbar-left" role="search"> + <div class="form-group"> + <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> + </div> + </form> + <ul class="nav navbar-nav navbar-right"> + <li><a href="#">Link</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> + </nav> +</header></pre> + + <!-- ===================================================================== --> + + <h3 id='component-sidebar'>Sidebar</h3> + <p class="lead"> + The sidebar used in this page to the left provides an example of what your sidebar should like. + Construction of a sidebar: + </p> + <pre class="prettyprint"> +<div class="main-sidebar"> + <!-- Inner sidebar --> + <div class="sidebar"> + <!-- user panel (Optional) --> + <div class="user-panel"> + <div class="pull-left image"> + <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" /> + </div> + <div class="pull-left info"> + <p>User Name</p> + + <a href="#"><i class="fa fa-circle text-success"></i> Online</a> + </div> + </div><!-- /.user-panel --> + + <!-- Search Form (Optional) --> + <form action="#" method="get" class="sidebar-form"> + <div class="input-group"> + <input type="text" name="q" class="form-control" placeholder="Search..."/> + <span class="input-group-btn"> + <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button> + </span> + </div> + </form><!-- /.sidebar-form --> + + <!-- Sidebar Menu --> + <ul class="sidebar-menu"> + <li class="header">HEADER</li> + <!-- Optionally, you can add icons to the links --> + <li class="active"><a href="#"><span>Link</span></a><</li> + <li><a href="#"><span>Another Link</span></a></li> + <li class="treeview"> + <a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> + <ul class="treeview-menu"> + <li><a href="#">Link in level 2</a></li> + <li><a href="#">Link in level 2</a></li> + </ul> + </li> + </ul><!-- /.sidebar-menu --> + + </div><!-- /.sidebar --> +</div><!-- /.main-sidebar --> + </pre> + + <!-- ===================================================================== --> + + <h3 id="component-info-box">Info Box</h3> + <p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p> + <h4>First Type of Info Boxes</h4> + <!-- Info Boxes --> + <div class="row"> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box"> + <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Messages</span> + <span class="info-box-number">1,410</span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box"> + <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Bookmarks</span> + <span class="info-box-number">410</span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box"> + <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Uploads</span> + <span class="info-box-number">13,648</span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box"> + <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">93,139</span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + </div><!-- /.row --> + <p class="lead">Markup</p> + <pre class="prettyprint"><code class="html"> +<div class="info-box"> + <-- Apply any bg-* class to to the icon to color it --> + <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">93,139</span> + </div><!-- /.info-box-content --> +</div><!-- /.info-box --> +</code></pre> + + <h4>Second Type of Info Boxes</h4> + <div class="row"> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box bg-aqua"> + <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Bookmarks</span> + <span class="info-box-number">41,410</span> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box bg-green"> + <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">41,410</span> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box bg-yellow"> + <span class="info-box-icon"><i class="fa fa-calendar"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Events</span> + <span class="info-box-number">41,410</span> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + <div class="col-md-3 col-sm-6 col-xs-12"> + <div class="info-box bg-red"> + <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Comments</span> + <span class="info-box-number">41,410</span> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> + </div><!-- /.info-box --> + </div><!-- /.col --> + </div><!-- /.row --> + <p class="lead">Markup</p> + <pre class="prettyprint"><code class="html"> +<-- Apply any bg-* class to to the info-box to color it --> +<div class="info-box bg-red"> + <span class="info-box-icon"><i class="fa fa-comments-o"></i></span> + <div class="info-box-content"> + <span class="info-box-text">Likes</span> + <span class="info-box-number">41,410</span> + <-- The progress section is optional --> + <div class="progress"> + <div class="progress-bar" style="width: 70%"></div> + </div> + <span class="progress-description"> + 70% Increase in 30 Days + </span> + </div><!-- /.info-box-content --> +</div><!-- /.info-box --> +</code></pre> + <p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the + first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p> + <!-- ===================================================================== --> + + <h3 id='component-box'>Box</h3> + <p class="lead">The box component is the most widely used component through out this template. You can + use it for anything from displaying charts to just blocks of text. It comes in many different + styles that we will explore below.</p> + <h4>Default Box Markup</h4> + <div class="box"> + <div class="box-header with-border"> + <h3 class="box-title">Default Box Example</h3> + <div class="box-tools pull-right"> + <!-- Buttons, labels, and many other things can be placed here! --> + <!-- Here is a label for example --> + <span class="label label-primary">Label</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + <div class="box-footer"> + The footer of the box + </div><!-- box-footer --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box"> + <div class="box-header with-border"> + <h3 class="box-title">Default Box Example</h3> + <div class="box-tools pull-right"> + <!-- Buttons, labels, and many other things can be placed here! --> + <!-- Here is a label for example --> + <span class="label label-primary">Label</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + <div class="box-footer"> + The footer of the box + </div><!-- box-footer --> +</div><!-- /.box --></pre> + <h4>Box Variants</h4> + <p class="lead">You can change the style of the box by adding any of the contextual classes.</p> + <div class="row"> + <div class="col-md-4"> + <div class="box"> + <div class="box-header with-border"> + <h3 class="box-title">Default Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-primary"> + <div class="box-header with-border"> + <h3 class="box-title">Primary Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-info"> + <div class="box-header with-border"> + <h3 class="box-title">Info Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="clearfix"></div> + <div class="col-md-4"> + <div class="box box-warning"> + <div class="box-header with-border"> + <h3 class="box-title">Warning Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-success"> + <div class="box-header with-border"> + <h3 class="box-title">Success Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-danger"> + <div class="box-header with-border"> + <h3 class="box-title">Danger Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + </div><!-- /.row --> + <pre class="prettyprint"> +<div class="box box-default">...</div> +<div class="box box-primary">...</div> +<div class="box box-info">...</div> +<div class="box box-warning">...</div> +<div class="box box-success">...</div> +<div class="box box-danger">...</div></pre> + + <h4>Solid Box</h4> + <p class="lead">Solid Boxes are alternative ways to display boxes. + They can be created by simply adding the box-solid class to the box component. + You may also use contextual classes with you solid boxes.</p> + <div class="row"> + <div class="col-md-4"> + <div class="box box-solid box-default"> + <div class="box-header"> + <h3 class="box-title">Default Solid Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-solid box-primary"> + <div class="box-header"> + <h3 class="box-title">Primary Solid Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-solid box-info"> + <div class="box-header"> + <h3 class="box-title">Info Solid Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="clearfix"></div> + <div class="col-md-4"> + <div class="box box-solid box-warning"> + <div class="box-header"> + <h3 class="box-title">Warning Solid Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-solid box-success"> + <div class="box-header"> + <h3 class="box-title">Success Solid Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + <div class="col-md-4"> + <div class="box box-solid box-danger"> + <div class="box-header"> + <h3 class="box-title">Danger Solid Box Example</h3> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + </div> + </div><!-- /.row --> + <pre class="prettyprint"> +<div class="box box-solid box-default">...</div> +<div class="box box-solid box-primary">...</div> +<div class="box box-solid box-info">...</div> +<div class="box box-solid box-warning">...</div> +<div class="box box-solid box-success">...</div> +<div class="box box-solid box-danger">...</div></pre> + <h4>Box Tools</h4> + <p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use + of multiple AdminLTE components within the header of the box.</p> + <p>AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons + are placed in the box-tools which is placed in the box-header.</p> + <pre class="prettyprint"> +<-- This will cause the box to be removed when clicked --> +<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> +<-- This will cause the box to collapse when clicked --> +<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button></pre> + <div class="row"> + <div class="col-md-4"> + <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Collapsable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Collapsable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box --></pre> + </div> + <div class="col-md-4"> + <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Removable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Removable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box --></pre> + </div> + <div class="col-md-4"> + <div class="box box-default collapsed-box"> + <div class="box-header with-border"> + <h3 class="box-title">Expandable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Expandable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box --></pre> + </div> + </div><!-- /.row --> + <p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p> + <div class="row"> + <div class="col-md-4"> + <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Labels</h3> + <div class="box-tools pull-right"> + <span class="label label-default">Some Label</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Labels</h3> + <div class="box-tools pull-right"> + <span class="label label-default">8 New Messages</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box --></pre> + </div> + <div class="col-md-4"> + <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Input</h3> + <div class="box-tools pull-right"> + <div class="has-feedback"> + <input type="text" class="form-control input-sm" placeholder="Search..."/> + <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span> + </div> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Input</h3> + <div class="box-tools pull-right"> + <div class="has-feedback"> + <input type="text" class="form-control input-sm" placeholder="Search..."/> + <span class="glyphicon glyphicon-search form-control-feedback"></span> + </div> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box --></pre> + </div> + <div class="col-md-4"> + <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Tootips on buttons</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + </div><!-- /.box --> + <pre class="prettyprint"> +<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Tooltips on buttons</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box --></pre> + </div><!-- /.col --> + </div><!-- /.row --> + + <h4>Loading States</h4> + <div class="row"> + <div class="col-md-6"> + <div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Loading state</h3> + </div> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + <!-- Loading (remove the following to stop the loading)--> + <div class="overlay"> + <i class="fa fa-refresh fa-spin"></i> + </div> + <!-- end loading --> + </div><!-- /.box --> + </div><!-- /.col --> + + <div class="col-md-6"> + <div class="box box-default box-solid"> + <div class="box-header with-border"> + <h3 class="box-title">Loading state (.box-solid)</h3> + </div> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> + <!-- Loading (remove the following to stop the loading)--> + <div class="overlay"> + <i class="fa fa-refresh fa-spin"></i> + </div> + <!-- end loading --> + </div><!-- /.box --> + </div><!-- /.col --> + </div><!-- /.row --> + <p class="lead"> + To simulate a loading state, simply place this code before the <code>.box</code> closing tag. + </p> + <pre class="prettyprint"><code class="html"><div class="overlay"> + <i class="fa fa-refresh fa-spin"></i> +</div> +</code></pre> + <h3 id="component-direct-chat">Direct Chat</h3> + <p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget + consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p> + <!-- Direct Chat --> + <div class="row"> + <div class="col-md-3"> + <!-- DIRECT CHAT PRIMARY --> + <div class="box box-primary direct-chat direct-chat-primary"> + <div class="box-header with-border"> + <h3 class="box-title">Direct Chat</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-light-blue'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <form action="#" method="post"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-primary btn-flat">Send</button> + </span> + </div> + </form> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + </div><!-- /.col --> + + <div class="col-md-3"> + <!-- DIRECT CHAT SUCCESS --> + <div class="box box-success direct-chat direct-chat-success"> + <div class="box-header with-border"> + <h3 class="box-title">Direct Chat</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-green'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <form action="#" method="post"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-success btn-flat">Send</button> + </span> + </div> + </form> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + </div><!-- /.col --> + + <div class="col-md-3"> + <!-- DIRECT CHAT WARNING --> + <div class="box box-warning direct-chat direct-chat-warning"> + <div class="box-header with-border"> + <h3 class="box-title">Direct Chat</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-yellow'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <form action="#" method="post"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-warning btn-flat">Send</button> + </span> + </div> + </form> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + </div><!-- /.col --> + + <div class="col-md-3"> + <!-- DIRECT CHAT DANGER --> + <div class="box box-danger direct-chat direct-chat-danger"> + <div class="box-header with-border"> + <h3 class="box-title">Direct Chat</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-red'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <form action="#" method="post"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-danger btn-flat">Send</button> + </span> + </div> + </form> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + </div><!-- /.col --> + </div><!-- /.row --> + <p class="lead">Direct Chat Markup</p> + <pre class="prettyprint"><code class="html"> +<-- Construct the box with style you want. Here we are using box-danger --> +<-- Then add the class direct-chat and choose the direct-chat-* contexual class --> +<-- The contextual class should match the box, so we are using direct-chat-danger --> +<div class="box box-danger direct-chat direct-chat-danger"> + <div class="box-header with-border"> + <h3 class="box-title">Direct Chat</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-red'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <-- In box-tools add this button if you intend to use the contacts pane --> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-danger btn-flat">Send</button> + </span> + </div> + </div><!-- /.box-footer--> +</div><!--/.direct-chat --> +</code></pre> + + <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p> + + <!-- Direct Chat With Solid Boxes --> + <div class="row"> + <div class="col-md-6"> + <!-- DIRECT CHAT WARNING --> + <div class="box box-primary box-solid direct-chat direct-chat-primary"> + <div class="box-header"> + <h3 class="box-title">Direct Chat in a Solid Box</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-light-blue'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <form action="#" method="post"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-primary btn-flat">Send</button> + </span> + </div> + </form> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + </div><!-- /.col --> + + <div class="col-md-6"> + <!-- DIRECT CHAT DANGER --> + <div class="box box-info box-solid direct-chat direct-chat-info"> + <div class="box-header"> + <h3 class="box-title">Direct Chat in a Solid Box</h3> + <div class="box-tools pull-right"> + <span data-toggle="tooltip" title="3 New Messages" class='badge bg-aqua'>3</span> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div> + </div><!-- /.box-header --> + <div class="box-body"> + <!-- Conversations are loaded here --> + <div class="direct-chat-messages"> + <!-- Message. Default to the left --> + <div class="direct-chat-msg"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-left'>Alexander Pierce</span> + <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + Is this template really for free? That's unbelievable! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + + <!-- Message to the right --> + <div class="direct-chat-msg right"> + <div class='direct-chat-info clearfix'> + <span class='direct-chat-name pull-right'>Sarah Bullock</span> + <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span> + </div><!-- /.direct-chat-info --> + <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img --> + <div class="direct-chat-text"> + You better believe it! + </div><!-- /.direct-chat-text --> + </div><!-- /.direct-chat-msg --> + </div><!--/.direct-chat-messages--> + + <!-- Contacts are loaded here --> + <div class="direct-chat-contacts"> + <ul class='contacts-list'> + <li> + <a href='#'> + <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/> + <div class='contacts-list-info'> + <span class='contacts-list-name'> + Count Dracula + <small class='contacts-list-date pull-right'>2/28/2015</small> + </span> + <span class='contacts-list-msg'>How have you been? I was...</span> + </div><!-- /.contacts-list-info --> + </a> + </li><!-- End Contact Item --> + </ul><!-- /.contatcts-list --> + </div><!-- /.direct-chat-pane --> + </div><!-- /.box-body --> + <div class="box-footer"> + <form action="#" method="post"> + <div class="input-group"> + <input type="text" name="message" placeholder="Type Message ..." class="form-control"/> + <span class="input-group-btn"> + <button type="button" class="btn btn-info btn-flat">Send</button> + </span> + </div> + </form> + </div><!-- /.box-footer--> + </div><!--/.direct-chat --> + </div><!-- /.col --> + </div><!-- /.row --> +</section> \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/f6922c96/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html ---------------------------------------------------------------------- diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html new file mode 100644 index 0000000..262872c --- /dev/null +++ b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/index.html @@ -0,0 +1,173 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>AdminLTE 2 | Documentation</title> + <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> + <!-- Bootstrap 3.3.2 --> + <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> + <!-- Font Awesome Icons --> + <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"; rel="stylesheet" type="text/css" /> + <!-- Ionicons --> + <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"; rel="stylesheet" type="text/css" /> + <!-- Theme style --> + <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" /> + <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" /> + <link href="style.css" rel="stylesheet" type="text/css" /> + + <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js";></script> + <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js";></script> + <![endif]--> + </head> + <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy"> + <div class="wrapper"> + + <header class="main-header"> + <!-- Logo --> + <!-- Logo --> + <a href="../index2.html" class="logo"> + <!-- mini logo for sidebar mini 50x50 pixels --> + <span class="logo-mini"><b>A</b>LT</span> + <!-- logo for regular state and mobile devices --> + <span class="logo-lg"><b>Admin</b>LTE</span> + </a> + <!-- Header Navbar: style can be found in header.less --> + <nav class="navbar navbar-static-top" role="navigation"> + <!-- Sidebar toggle button--> + <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> + <span class="sr-only">Toggle navigation</span> + </a> + <!-- Navbar Right Menu --> + <div class="navbar-custom-menu"> + <ul class="nav navbar-nav"> + <li><a href="http://almsaeedstudio.com";>Almsaeed Studio</a></li> + <li><a href="http://almsaeedstudio.com/premium";>Premium Templates</a></li> + </ul> + </div> + </nav> + </header> + <!-- Left side column. contains the logo and sidebar --> + <aside class="main-sidebar"> + <!-- sidebar: style can be found in sidebar.less --> + <div class="sidebar" id="scrollspy"> + + <!-- sidebar menu: : style can be found in sidebar.less --> + <ul class="nav sidebar-menu"> + <li class="header">TABLE OF CONTENTS</li> + <li><a href="#introduction"><i class='fa fa-circle-o'></i> Introduction</a></li> + <li><a href="#download"><i class='fa fa-circle-o'></i> Download</a></li> + <li><a href="#dependencies"><i class='fa fa-circle-o'></i> Dependencies</a></li> + <li><a href="#advice"><i class='fa fa-circle-o'></i> Advice</a></li> + <li><a href="#layout"><i class='fa fa-circle-o'></i> Layout</a></li> + <li class='treeview' id='scrollspy-components'> + <a href="#components"><i class='fa fa-circle-o'></i> Components</a> + <ul class='nav treeview-menu'> + <li><a href='#component-main-header'>Main Header</a></li> + <li><a href='#component-sidebar'>Sidebar</a></li> + <li><a href='#component-info-box'>Info Box</a></li> + <li><a href='#component-box'>Boxes</a></li> + <li><a href='#component-direct-chat'>Direct Chat</a></li> + </ul> + </li> + <li><a href="#plugins"><i class='fa fa-circle-o'></i> Plugins</a></li> + <li><a href="#browsers"><i class='fa fa-circle-o'></i> Browser Support</a></li> + <li><a href="#upgrade"><i class='fa fa-circle-o'></i> Upgrade Guide</a></li> + <li><a href="#faq"><i class='fa fa-circle-o'></i> FAQ</a></li> + <li><a href="#license"><i class='fa fa-circle-o'></i> License</a></li> + </ul> + </div> + <!-- /.sidebar --> + </aside> + + <!-- Content Wrapper. Contains page content --> + <div class="content-wrapper"> + <!-- Content Header (Page header) --> + <div class="content-header"> + <h1> + AdminLTE Documentation + <small>Current version 2.0.2</small> + </h1> + <ol class="breadcrumb"> + <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> + <li class="active">Documentation</li> + </ol> + </div> + + <!-- Main content --> + <div class="content body"> + <div class="callout callout-warning no-margin bring-up"> + <h4>Warning!</h4> + This documentation is under development. Some information may change as the progress of creating the documentation continues. + </div> +include "introduction.html" + + <!-- ============================================================= --> + +include "download.html" + + <!-- ============================================================= --> + +include "dependencies.html" + + <!-- ============================================================= --> + +include "advice.html" + + <!-- ============================================================= --> + +include "layout.html" + + <!-- ============================================================= --> + +include "components.html" + + <!-- ============================================================= --> + +include "plugins.html" + + <!-- ============================================================= --> + +include "browsers.html" + + <!-- ============================================================= --> + +include "upgrade.html" + + <!-- ============================================================= --> + +include "faq.html" + + <!-- ============================================================= --> + +include "license.html" + + </div><!-- /.content --> + </div><!-- /.content-wrapper --> + + <footer class="main-footer"> + <div class="pull-right hidden-xs"> + <b>Version</b> 2.0 + </div> + <strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com";>Almsaeed Studio</a>.</strong> All rights reserved. + </footer> + + </div><!-- ./wrapper --> + + <!-- jQuery 2.1.3 --> + <script src="../plugins/jQuery/jQuery-2.1.3.min.js"></script> + <!-- Bootstrap 3.3.2 JS --> + <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script> + <!-- FastClick --> + <script src='../plugins/fastclick/fastclick.min.js'></script> + <!-- AdminLTE App --> + <script src="../dist/js/app.min.js" type="text/javascript"></script> + <!-- SlimScroll 1.3.0 --> + <script src="../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script> + <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js";></script> + <script src="docs.js"></script> + </body> +</html>
