http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/95bb00d5/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 deleted file mode 100644 index aa52d18..0000000 --- a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/components.html +++ /dev/null @@ -1,1512 +0,0 @@ -<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/95bb00d5/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/dependencies.html ---------------------------------------------------------------------- diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/dependencies.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/dependencies.html deleted file mode 100644 index 8889eb5..0000000 --- a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/dependencies.html +++ /dev/null @@ -1,10 +0,0 @@ -<section id="dependencies"> - <h2 class="page-header"><a href="#dependencies">Dependencies</a></h2> - <p class="lead">AdminLTE depends on two main frameworks. - The downloadable package contains both of these libraries, so you don't have to manually download them.</p> - <ul class="bring-up"> - <li><a href="http://getbootstrap.com"; target="_blank">Bootstrap 3</a></li> - <li><a href="http://jquery.com/"; target="_blank">jQuery 1.11+</a></li> - <li><a href="#plugins">All other plugins are listed below</a></li> - </ul> -</section> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/95bb00d5/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/download.html ---------------------------------------------------------------------- diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/download.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/download.html deleted file mode 100644 index 708a18c..0000000 --- a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/download.html +++ /dev/null @@ -1,51 +0,0 @@ -<section id='download'> - <h2 class='page-header'><a href="#download">Download</a></h2> - <p class='lead'> - AdminLTE can be downloaded in two different versions, each appealing to different - skill levels and use case. - </p> - <div class='row'> - <div class='col-sm-6'> - <div class='box box-primary'> - <div class='box-header with-border'> - <h3 class='box-title'>Ready</h3> - <span class='label label-primary pull-right'><i class='fa fa-html5'></i></span> - </div><!-- /.box-header --> - <div class='box-body'> - <p>Compiled and ready to use in production. Download this version - if you don't want to customize AdminLTE's LESS files.</p> - <a href='http://almsaeedstudio.com/download/AdminLTE-dist' class='btn btn-primary'><i class='fa fa-download'></i> Download</a> - </div><!-- /.box-body --> - </div><!-- /.box --> - </div><!-- /.col --> - <div class='col-sm-6'> - <div class='box box-danger'> - <div class='box-header with-border'> - <h3 class='box-title'>Source Code</h3> - <span class='label label-danger pull-right'><i class='fa fa-database'></i></span> - </div><!-- /.box-header --> - <div class='box-body'> - <p>All files including the compiled CSS. Download this version - if you plan on customizing the template. <b>Requires a LESS compiler.</b></p> - <a href='http://almsaeedstudio.com/download/AdminLTE' class='btn btn-danger'><i class='fa fa-download'></i> Download</a> - </div><!-- /.box-body --> - </div><!-- /.box --> - </div><!-- /.col --> - </div><!-- /.row --> - <pre class='hierarchy bring-up'><code class="language-bash" data-lang="bash">File Hierarchy of the Source Code Package - -AdminLTE/ -âââ dist/ -â âââ CSS/ -â âââ JS -â âââ img -âââ build/ -â âââ less/ -â â âââ AdminLTE's Less files -â âââ Bootstrap-less/ (Only for reference. No modifications have been made) -â âââ mixins/ -â âââ variables.less -â âââ mixins.less -âââ plugins/ - âââ All the customized plugins CSS and JS files</code></pre> -</section> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/95bb00d5/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/faq.html ---------------------------------------------------------------------- diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/faq.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/faq.html deleted file mode 100644 index 9999d59..0000000 --- a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/faq.html +++ /dev/null @@ -1,17 +0,0 @@ -<section id='faq'> - <h2 class='page-header'><a href="#faq">FAQ</a></h2> - <h3>Can AdminLTE be used with Wordpress?</h3> - <p class="lead">AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.</p> - - <h3>Is there an integration guide for PHP frameworks such as Yii or Symphony?</h3> - <p class='lead'>Short answer, no. However, there are forks and tutorials around the web that - provide info on how to integrate with many different frameworks. There are even versions of - AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET. - </p> - - <h3>How do I get notified of new AdminLTE versions?</h3> - <p class='lead'>The best option is to subscribe to our mailing list using the - <a href="http://almsaeedstudio.com/#subscribe";>subscription form on Almsaeed Studio</a>. - If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE";>repository on Github</a> - or visit <a href="http://almsaeedstudio.com";>Almsaeed Studio</a> every now and then for updates and announcements.</p> -</section> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-ignite/blob/95bb00d5/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/introduction.html ---------------------------------------------------------------------- diff --git a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/introduction.html b/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/introduction.html deleted file mode 100644 index 6ba0ca7..0000000 --- a/modules/webconfig/nodejs/node_modules/admin-lte/documentation/build/include/introduction.html +++ /dev/null @@ -1,12 +0,0 @@ -<section id='introduction'> - <h2 class='page-header'><a href="#introduction">Introduction</a></h2> - <p class='lead'> - <b>AdminLTE</b> is a popular open source WebApp template for admin dashboards and control panels. - It is a responsive HTML template that is based on the CSS framework Bootstrap 3. - It utilizes all of the Bootstrap components in its design and re-styles many - commonly used plugins to create a consistent design that can be used as a user - interface for backend applications. AdminLTE is based on a modular design, which - allows it to be easily customized and built upon. This documentation will guide you through - installing the template and exploring the various components that are bundled with the template. - </p> -</section><!-- /#introduction --> \ No newline at end of file
