github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

doc changes + a little info-box overlay bugfix 

- updated assets
- added bootstrap-duallistbox in dependencies
- updated colors section in layout
- finished components/cards
- created & finished components/boxes
- added missing position relative to .info-box
pull/2183/head
REJack 2019-07-28 19:16:16 +02:00
parent f8f0d8fc8e
commit dd0794bab2
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
14 changed files with 2084 additions and 1197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/scss/_info-box.scss
View File

@ -11,6 +11,7 @@
background: $white;
min-height: 80px;
padding: .5rem;
position: relative;
.progress {
background-color: rgba($black, .125);

1
dist/css/adminlte.css vendored
View File

@ -15980,6 +15980,7 @@ html.maximized-card {
background: #ffffff;
min-height: 80px;
padding: .5rem;
position: relative;
}
.info-box .progress {

2
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2373
docs/assets/css/adminlte.css
View File

File diff suppressed because it is too large Load Diff

2
docs/assets/css/adminlte.css.map
View File

File diff suppressed because one or more lines are too long

4
docs/assets/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/adminlte.min.css.map
View File

File diff suppressed because one or more lines are too long

42
docs/assets/js/demo.js
View File

@ -73,17 +73,17 @@
var $navbar_border = $('<input />', {
type : 'checkbox',
value : 1,
checked: $('.main-header').hasClass('border-bottom'),
checked: $('.main-header').hasClass('border-bottom-0'),
'class': 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('border-bottom')
$('.main-header').addClass('border-bottom-0')
} else {
$('.main-header').removeClass('border-bottom')
$('.main-header').removeClass('border-bottom-0')
}
})
$checkbox_container.append($navbar_border)
$checkbox_container.append('<span>Navbar border</span>')
$checkbox_container.append('<span>No Navbar border</span>')
$container.append($checkbox_container)
@ -92,7 +92,17 @@
'bg-warning',
'bg-info',
'bg-danger',
'bg-success'
'bg-success',
'bg-indigo',
'bg-navy',
'bg-purple',
'bg-fuchsia',
'bg-pink',
'bg-maroon',
'bg-orange',
'bg-lime',
'bg-teal',
'bg-olive'
]
var sidebar_skins = [
@ -101,11 +111,31 @@
'sidebar-dark-info',
'sidebar-dark-danger',
'sidebar-dark-success',
'sidebar-dark-indigo',
'sidebar-dark-navy',
'sidebar-dark-purple',
'sidebar-dark-fuchsia',
'sidebar-dark-pink',
'sidebar-dark-maroon',
'sidebar-dark-orange',
'sidebar-dark-lime',
'sidebar-dark-teal',
'sidebar-dark-olive',
'sidebar-light-primary',
'sidebar-light-warning',
'sidebar-light-info',
'sidebar-light-danger',
'sidebar-light-success'
'sidebar-light-success',
'sidebar-light-indigo',
'sidebar-light-navy',
'sidebar-light-purple',
'sidebar-light-fuchsia',
'sidebar-light-pink',
'sidebar-light-maroon',
'sidebar-light-orange',
'sidebar-light-lime',
'sidebar-light-teal',
'sidebar-light-olive'
]
$container.append('<h6>Dark Sidebar Variants</h6>')

367
docs/components/boxes.md Normal file
View File

@ -0,0 +1,367 @@
---
layout: page
title: Boxes Components
---
There are two types of boxes, info boxes & small boxes. Both boxes are used to display statistical snippets.
##### Info Box
{: .text-bold .text-dark .mt-4}
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-flag"></i></span>
<div class="info-box-content">
<span class="info-box-text">Bookmarks</span>
<span class="info-box-number">410</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-copy"></i></span>
<div class="info-box-content">
<span class="info-box-text">Uploads</span>
<span class="info-box-number">13,648</span>
</div>
</div>
</div>
</div>
<div class="row" markdown="1">
```html
<div class="info-box">
<span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
</div>
```
{: .col-md-4 .col-sm-6 .col-12}
```html
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-flag"></i></span>
<div class="info-box-content">
<span class="info-box-text">Bookmarks</span>
<span class="info-box-number">410</span>
</div>
</div>
```
{: .col-md-4 .col-sm-6 .col-12}
```html
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-copy"></i></span>
<div class="info-box-content">
<span class="info-box-text">Uploads</span>
<span class="info-box-number">13,648</span>
</div>
</div>
```
{: .col-md-4 .col-sm-6 .col-12}
</div>
##### Info Box with Progress Bar
{: .text-bold .text-dark .mt-4}
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-info"><i class="far fa-bookmark"></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 bg-info" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-thumbs-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>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-calendar-alt"></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>
</div>
</div>
</div>
<div class="row" markdown="1">
```html
<div class="info-box">
<span class="info-box-icon bg-info"><i class="far fa-bookmark"></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 bg-info" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
</div>
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
<div class="info-box bg-success">
<span class="info-box-icon"><i class="far fa-thumbs-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>
</div>
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
<div class="info-box bg-gradient-warning">
<span class="info-box-icon"><i class="far fa-calendar-alt"></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>
</div>
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
</div>
##### Small Box
{: .text-bold .text-dark .mt-4}
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
<div class="small-box bg-gradient-success">
<div class="inner">
<h3>44</h3>
<p>User Registrations</p>
</div>
<div class="icon">
<i class="fas fa-user-plus"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
<div class="row" markdown="1">
```html
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
<div class="small-box bg-gradient-success">
<div class="inner">
<h3>44</h3>
<p>User Registrations</p>
</div>
<div class="icon">
<i class="fas fa-user-plus"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
</div>
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
</div>
##### Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the `.info-box` / `.small-box` closing tag.
> ##### Tip!
> We recommend `.fa-2x` for Info Boxes and `.fa-3x` for Small Boxes to get a nicely sized loading icon, <br> like in this documentation.
{: .quote-info}
```html
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
```
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box clearfix">
<span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-info"><i class="far fa-bookmark"></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 bg-info" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
<div class="overlay">
<i class="fas fa-3x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
</div>
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
```
<div class="row">
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box clearfix">
<span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
<div class="info-box-content">
<span class="info-box-text">Messages</span>
<span class="info-box-number">1,410</span>
</div>
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="info-box">
<span class="info-box-icon bg-info"><i class="far fa-bookmark"></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 bg-info" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
<div class="small-box bg-info">
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fas fa-arrow-circle-right"></i>
</a>
<div class="overlay dark">
<i class="fas fa-3x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
</div>

405
docs/components/cards.md
View File

@ -51,7 +51,10 @@ The card component is the most widely used component through out this template.
##### Card Variants
{: .text-bold .text-dark .mt-5}
You can change the style of the box by adding any of the contextual classes.
You can change the style of the card by adding any of the contextual classes.
###### Default
{: .text-bold .text-dark}
<div class="row">
<div class="col-sm-3">
@ -173,21 +176,10 @@ You can change the style of the box by adding any of the contextual classes.
<div class="card card-dark">...</div>
```
###### Outline
{: .text-bold .text-dark}
<div class="row">
<div class="col-sm-3">
<div class="card card-outline">
<div class="card-header">
<h3 class="card-title">Default Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-outline card-primary">
<div class="card-header">
@ -227,8 +219,6 @@ You can change the style of the box by adding any of the contextual classes.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="card card-outline card-info">
<div class="card-header">
@ -242,6 +232,8 @@ You can change the style of the box by adding any of the contextual classes.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="card card-outline card-warning">
<div class="card-header">
@ -292,3 +284,384 @@ You can change the style of the box by adding any of the contextual classes.
<div class="card card-outline card-danger">...</div>
<div class="card card-outline card-dark">...</div>
```
###### Background Color
{: .text-bold .text-dark}
<div class="row">
<div class="col-sm-3">
<div class="card bg-primary">
<div class="card-header">
<h3 class="card-title">Primary Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-secondary">
<div class="card-header">
<h3 class="card-title">Secondary Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-success">
<div class="card-header">
<h3 class="card-title">Success Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-info">
<div class="card-header">
<h3 class="card-title">Info Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="card bg-warning">
<div class="card-header">
<h3 class="card-title">Warning Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-danger">
<div class="card-header">
<h3 class="card-title">Danger Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-dark">
<div class="card-header">
<h3 class="card-title">Dark Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
</div>
```html
<div class="card bg-primary">...</div>
<div class="card bg-secondary">...</div>
<div class="card bg-success">...</div>
<div class="card bg-info">...</div>
<div class="card bg-warning">...</div>
<div class="card bg-danger">...</div>
<div class="card bg-dark">...</div>
```
###### Gradient Background Color
{: .text-bold .text-dark}
<div class="row">
<div class="col-sm-3">
<div class="card bg-gradient-primary">
<div class="card-header">
<h3 class="card-title">Primary Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-gradient-secondary">
<div class="card-header">
<h3 class="card-title">Secondary Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-gradient-success">
<div class="card-header">
<h3 class="card-title">Success Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-gradient-info">
<div class="card-header">
<h3 class="card-title">Info Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="card bg-gradient-warning">
<div class="card-header">
<h3 class="card-title">Warning Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-gradient-danger">
<div class="card-header">
<h3 class="card-title">Danger Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card bg-gradient-dark">
<div class="card-header">
<h3 class="card-title">Dark Card Example</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="card-footer">
The footer of the card
</div>
</div>
</div>
</div>
```html
<div class="card bg-gradient-primary">...</div>
<div class="card bg-gradient-secondary">...</div>
<div class="card bg-gradient-success">...</div>
<div class="card bg-gradient-info">...</div>
<div class="card bg-gradient-warning">...</div>
<div class="card bg-gradient-danger">...</div>
<div class="card bg-gradient-dark">...</div>
```
##### Card Tools
{: .text-bold .text-dark .mt-5}
Cards 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 card.
AdminLTE data-widget attribute provides cards with the ability to collapse or be removed. The buttons are placed in the card-tools which is placed in the card-header.
```html
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Card Tools</h3>
<div class="card-tools">
<!-- This will cause the card to maximize when clicked -->
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
<!-- This will cause the card to collapse when clicked -->
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<!-- This will cause the card to be removed when clicked -->
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
```
{: .max-height-300}
##### Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the `.card` closing tag.
```html
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
```
<div class="row">
<div class="col-md-3">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Loading state</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-outline card-primary">
<div class="card-header">
<h3 class="card-title">Loading state</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-primary">
<div class="card-header">
<h3 class="card-title">Loading state</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-gradient-primary">
<div class="card-header">
<h3 class="card-title">Loading state</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
</div>
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
```
<div class="row">
<div class="col-md-3">
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Loading state (dark)</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card card-outline card-primary">
<div class="card-header">
<h3 class="card-title">Loading state (dark)</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-primary">
<div class="card-header">
<h3 class="card-title">Loading state (dark)</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card bg-gradient-primary">
<div class="card-header">
<h3 class="card-title">Loading state (dark)</h3>
</div>
<div class="card-body">
The body of the card
</div>
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
</div>
</div>
</div>

67
docs/dependencies.md
View File

@ -19,40 +19,41 @@ AdminLTE makes use of the following plugins. For documentation, updates or licen
{: .lead}
<div class="row px-3">
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Charts</h4></li>
<li><a href="http://www.chartjs.org/" target="_blank">ChartJS</a></li>
<li><a href="http://www.flotcharts.org/" target="_blank">Flot</a></li>
<li><a href="https://github.com/mariusGundersen/sparkline" target="_blank">Sparkline</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Editors</h4></li>
<li><a href="https://summernote.org/" target="_blank">Summernote</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Form Elements</h4></li>
<li><a href="https://farbelous.io/bootstrap-colorpicker/">Bootstrap Colorpicker</a></li>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Charts</h4></li>
<li><a href="http://www.chartjs.org/" target="_blank">ChartJS</a></li>
<li><a href="http://www.flotcharts.org/" target="_blank">Flot</a></li>
<li><a href="https://github.com/mariusGundersen/sparkline" target="_blank">Sparkline</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Editors</h4></li>
<li><a href="https://summernote.org/" target="_blank">Summernote</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Form Elements</h4></li>
<li><a href="https://farbelous.io/bootstrap-colorpicker/">Bootstrap Colorpicker</a></li>
<li><a href="https://github.com/seiyria/bootstrap-slider/">Bootstrap Slider</a></li>
<li><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a></li>
<li><a href="https://github.com/bantikyan/icheck-bootstrap#readme" target="_blank">iCheck Bootstrap</a></li>
<li><a href="https://github.com/RobinHerbots/Inputmask/" target="_blank">Inputmask</a></li>
<li><a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">Ion.RangeSlider</a></li>
<li><a href="https://select2.org/" target="_blank">Select2</a></li>
<li><a href="https://tempusdominus.github.io/bootstrap-4/" target="_blank">Tempus Dominus</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Icon Packs</h4></li>
<li><a href="https://fontawesome.com/" target="_blank">FontAwesome 5</a></li>
<li><a href="https://github.com/lipis/flag-icon-css#readme" target="_blank">flag-icon-css</a></li>
</ul>
</div>
<li><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a></li>
<li><a href="https://github.com/bantikyan/icheck-bootstrap#readme" target="_blank">iCheck Bootstrap</a></li>
<li><a href="https://github.com/RobinHerbots/Inputmask/" target="_blank">Inputmask</a></li>
<li><a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">Ion.RangeSlider</a></li>
<li><a href="https://select2.org/" target="_blank">Select2</a></li>
<li><a href="https://tempusdominus.github.io/bootstrap-4/" target="_blank">Tempus Dominus</a></li>
<li><a href="https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox#readme" target="_blank">Bootstrap4 Duallistbox</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="list-unstyled">
<li><h4>Icon Packs</h4></li>
<li><a href="https://fontawesome.com/" target="_blank">FontAwesome 5</a></li>
<li><a href="https://github.com/lipis/flag-icon-css#readme" target="_blank">flag-icon-css</a></li>
</ul>
</div>
</div>
<div class="row px-3">
<div class="col-sm-3">

11
docs/layout.md
View File

@ -46,13 +46,20 @@ The following colors are available:
##### Theme Colors
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-primary"> Primary (primary) / Blue (blue)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-secondary"> Secondary (secondary) / Gray (gray)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-secondary"> Secondary (secondary)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-success"> Success (success) / Green (green)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-info"> Info (info) / Cyan (cyan)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-warning"> Warning (warning) / Yellow (yellow)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-danger"> Danger (danger) / Red (red)</div>
</div>
##### Black/White Nuances
{: .mt-4}
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-black"> Black (black)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-gray-dark"> Gray Dark (gray-dark)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-gray"> Gray (gray)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-light"> Light (light)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-dark"> Dark (dark) / Gray Dark (gray-dark)</div>
</div>
##### Colors