Merge branch 'master' into feat/iframe-plugin

.bundlewatch.config.json

@@ -2,27 +2,27 @@
   "files": [
     {
       "path": "./dist/css/adminlte.css",
-      "maxSize": "80 kB"
+      "maxSize": "81.5 kB"
     },
     {
       "path": "./dist/css/adminlte.min.css",
-      "maxSize": "74 kB"
+      "maxSize": "77.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.css",
-      "maxSize": "14 kB"
+      "maxSize": "16 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.min.css",
-      "maxSize": "13 kB"
+      "maxSize": "15 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.css",
-      "maxSize": "46 kB"
+      "maxSize": "47 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.min.css",
-      "maxSize": "43 kB"
+      "maxSize": "44 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.extra-components.css",

build/js/Dropdown.js

@@ -22,6 +22,7 @@ const SELECTOR_DROPDOWN_MENU_ACTIVE = '.dropdown-menu.show'
 const SELECTOR_DROPDOWN_TOGGLE = '[data-toggle="dropdown"]'
 
 const CLASS_NAME_DROPDOWN_RIGHT = 'dropdown-menu-right'
+const CLASS_NAME_DROPDOWN_SUBMENU = 'dropdown-submenu'
 
 // TODO: this is unused; should be removed along with the extend?
 const Default = {
@@ -122,6 +123,10 @@ $(`${SELECTOR_DROPDOWN_MENU} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', function
 $(`${SELECTOR_NAVBAR} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', event => {
   event.preventDefault()
 
+  if ($(event.target).parent().hasClass(CLASS_NAME_DROPDOWN_SUBMENU)) {
+    return
+  }
+
   setTimeout(function () {
     Dropdown._jQueryInterface.call($(this), 'fixPosition')
   }, 1)

build/js/SidebarSearch.js

@@ -61,6 +61,10 @@ class SidebarSearch {
   // Public
 
   init() {
+    if ($(SELECTOR_DATA_WIDGET).length == 0) {
+      return
+    }
+
     if ($(SELECTOR_DATA_WIDGET).next(SELECTOR_SEARCH_RESULTS).length == 0) {
       $(SELECTOR_DATA_WIDGET).after(
         $('<div />', { class: CLASS_NAME_SEARCH_RESULTS })

build/js/Treeview.js

@@ -118,7 +118,8 @@ class Treeview {
   // Private
 
   _setupListeners() {
-    $(document).on('click', this._config.trigger, event => {
+    const elementId = this._element.attr('id') !== undefined ? `#${this._element.attr('id')}` : ''
+    $(document).on('click', `${elementId}${this._config.trigger}`, event => {
       this.toggle(event)
     })
   }

build/npm/Plugins.js

@@ -260,25 +260,9 @@ const Plugins = [
 
   // Fullcalendar
   {
-    from: 'node_modules/@fullcalendar/core/',
+    from: 'node_modules/fullcalendar/',
     to: 'plugins/fullcalendar'
   },
-  {
-    from: 'node_modules/@fullcalendar/bootstrap/',
-    to: 'plugins/fullcalendar-bootstrap'
-  },
-  {
-    from: 'node_modules/@fullcalendar/daygrid/',
-    to: 'plugins/fullcalendar-daygrid'
-  },
-  {
-    from: 'node_modules/@fullcalendar/timegrid/',
-    to: 'plugins/fullcalendar-timegrid'
-  },
-  {
-    from: 'node_modules/@fullcalendar/interaction/',
-    to: 'plugins/fullcalendar-interaction'
-  },
   // icheck bootstrap
   {
     from: 'node_modules/icheck-bootstrap/',

build/scss/_buttons.scss

@@ -112,3 +112,31 @@
 .btn-xs {
   @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
 }
+
+.dark-mode {
+  .btn-default,
+  .btn-app {
+    background-color: lighten($dark, 2.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 5%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 2.5%);
+    }
+  }
+  .btn-light {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 10%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 5%);
+    }
+  }
+}

build/scss/_callout.scss

@@ -49,3 +49,9 @@
     border-left-color: darken(theme-color("success"), 10%);
   }
 }
+
+.dark-mode {
+  .callout {
+    background-color: lighten($dark, 5%);
+  }
+}

build/scss/_cards.scss

@@ -34,7 +34,7 @@
     position: fixed;
     top: 0;
     width: 100% !important;
-    z-index: 9999;
+    z-index: $zindex-modal-backdrop;
 
     &.was-collapsed .card-body {
       display: block !important;
@@ -91,12 +91,12 @@
 
   &.card-tabs {
     &:not(.card-outline) {
-      & > .card-header {
+      > .card-header {
         border-bottom: 0;
 
         .nav-item {
           &:first-child .nav-link {
-            margin-left: -1px;
+            border-left-color: transparent;
           }
         }
       }
@@ -478,3 +478,44 @@ html.maximized-card {
     }
   }
 }
+
+.dark-mode {
+
+  .card {
+    background-color: $dark;
+    color: $white;
+
+    .card {
+      background-color: lighten($dark, 5%);
+      color: $white;
+    }
+    .nav.flex-column > li {
+      border-bottom-color: $gray-600;
+    }
+    .card-footer {
+      background-color: rgba($black, .1);
+    }
+    &.card-outline-tabs .card-header a:hover {
+      border-color: $gray-600;
+    }
+    &:not(.card-outline) > .card-header a.active {
+      color: $white;
+    }
+  }
+
+  .card-comments {
+    background-color: lighten($dark, 1.25%);
+    .username {
+      color: $gray-400;
+    }
+    .card-comment {
+      border-bottom-color: lighten($dark, 7.5%);
+    }
+  }
+
+  .todo-list > li {
+    background-color: lighten($dark, 5%);
+    border-color: lighten($dark, 7.5%);
+    color: $white;
+  }
+}

build/scss/_close.scss

@@ -0,0 +1,44 @@
+.close {
+  float: right;
+  @include font-size($close-font-size);
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  // Override <a>'s hover style
+  @include hover() {
+    color: $close-color;
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable-next-line selector-no-qualifying-type
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+
+// stylelint-disable-next-line selector-no-qualifying-type
+a.close.disabled {
+  pointer-events: none;
+}

build/scss/_colors.scss

@@ -89,3 +89,16 @@ a.text-muted:hover {
     }
   }
 }
+
+.dark-mode {
+  .bg-light {
+    background-color: lighten($dark, 7.5%) !important;
+    color: $white !important;
+  }
+  .text-black,
+  .text-dark,
+  .link-black,
+  .link-dark {
+    color: $gray-400;
+  }
+}

build/scss/_direct-chat.scss

@@ -222,3 +222,25 @@
     @include direct-chat-variant($color);
   }
 }
+
+.dark-mode {
+  .direct-chat-text {
+    background-color: lighten($dark, 7.5%);
+    border-color: lighten($dark, 10%);
+    color: $white;
+
+    &::after,
+    &::before {
+      border-right-color: lighten($dark, 10%);
+    }
+  }
+  .direct-chat-timestamp {
+    color: $gray-500;
+  }
+  .right > .direct-chat-text {
+    &::after,
+    &::before {
+      border-right-color: transparent;
+    }
+  }
+}

build/scss/_dropdown.scss

@@ -57,14 +57,14 @@
 .dropdown-submenu {
   position: relative;
 
-  & > a::after {
+  > a::after {
     @include caret-right ();
     float: right;
     margin-left: .5rem;
     margin-top: .5rem;
   }
 
-  & > .dropdown-menu {
+  > .dropdown-menu {
     left: 100%;
     margin-left: 0;
     margin-top: 0;
@@ -269,3 +269,53 @@
     width: $sidebar-user-image-width;
   }
 }
+
+.dark-mode {
+  .dropdown-menu {
+    background-color: $dark;
+    color: $white;
+  }
+  .dropdown-item {
+    color: $white;
+
+    &:focus,
+    &:hover {
+      background-color: lighten($dark, 5%);
+    }
+  }
+  .dropdown-divider {
+    border-color: $gray-600;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu {
+    > .user-footer {
+      background-color: lighten($dark, 2.5%);
+      color: $white;
+
+      .btn-default {
+        color: $white;
+
+        &:hover,
+        &:focus {
+          background-color: lighten($dark, 5%);
+          color: $gray-300;
+        }
+        &:focus {
+          background-color: lighten($dark, 7.5%);
+        }
+      }
+    }
+    > .user-body {
+      border-color: $gray-600;
+    }
+    > .user-body a {
+      background-color: transparent !important;
+      color: $white !important;
+
+      &:hover,
+      &:focus {
+        color: $gray-400 !important;
+      }
+    }
+  }
+}

build/scss/_forms.scss

@@ -264,6 +264,32 @@ textarea.form-control {
   }
 }
 
+// body.text-sm support
+body.text-sm {
+  .input-group-text {
+    font-size: $font-size-sm;
+  }
+}
+
+// custom .form-control styles
+.form-control,
+.custom-select {
+  &.form-control-border {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    box-shadow: inherit;
+
+    &.border-width-2 {
+      border-bottom-width: 2px;
+    }
+    &.border-width-3 {
+      border-bottom-width: 3px;
+    }
+  }
+}
+
 // custom switch color variations
 .custom-switch {
   @each $name, $color in $theme-colors {
@@ -285,3 +311,91 @@ textarea.form-control {
     @include custom-range-variant($name, $color);
   }
 }
+
+// custom control input variations
+@each $name, $color in $theme-colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+.custom-control-input-outline {
+  ~ .custom-control-label::before {
+    background-color: transparent !important;
+    box-shadow: none;
+  }
+  &:checked ~ .custom-control-label::before {
+    @include gradient-bg(transparent);
+  }
+}
+
+.dark-mode {
+  .form-control,
+  .custom-select,
+  .custom-file-label,
+  .custom-file-label::after,
+  .custom-control-label::before,
+  .input-group-text {
+    background-color: $dark;
+    color: $white;
+  }
+  .form-control:not(.form-control-navbar):not(.is-invalid):not(:focus) {
+    border-color: $gray-600;
+  }
+  select {
+    background-color: $dark;
+    color: $white;
+    border-color: $gray-600;
+  }
+
+  .input-group-text {
+    border-color: $gray-600;
+  }
+
+  .custom-control-input:disabled ~ .custom-control-label::before,
+  .custom-control-input[disabled] ~ .custom-control-label::before {
+    background-color: lighten($dark, 5%);
+    border-color: $gray-600;
+    color: $white;
+  }
+
+  .custom-range {
+    &::-webkit-slider-runnable-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-moz-range-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-ms-track {
+      background-color: lighten($dark, 7.5%);
+    }
+  }
+
+  .navbar-dark {
+    .btn-navbar,
+    .form-control-navbar {
+      background-color: $dark;
+      border: $input-border-width solid $gray-600;
+    }
+    .btn-navbar {
+      &:hover {
+        background-color: lighten($sidebar-dark-bg, 7.5%);
+      }
+      &:focus {
+        background-color: lighten($sidebar-dark-bg, 10%);
+      }
+    }
+
+    .form-control-navbar + .input-group-prepend,
+    .form-control-navbar + .input-group-append {
+      > .btn-navbar {
+        background-color: lighten($dark, 5%);
+        color: $white;
+        border: $input-border-width solid $gray-600;
+        border-left: none;
+      }
+    }
+  }
+}

build/scss/_info-box.scss

@@ -45,7 +45,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    line-height: 120%;
+    line-height: 1.8;
     flex: 1;
     padding: 0 10px;
   }
@@ -144,3 +144,10 @@
     }
   }
 }
+
+.dark-mode {
+  .info-box {
+    background-color: $dark;
+    color: $white;
+  }
+}

build/scss/_layout.scss

@@ -15,7 +15,7 @@ body,
 .wrapper {
   position: relative;
 
-  & .content-wrapper {
+  .content-wrapper {
     min-height: calc(100vh - #{$main-header-height} - #{$main-footer-height});
   }
 
@@ -28,7 +28,7 @@ body,
       max-width: $boxed-layout-max-width;
     }
 
-    & .main-sidebar {
+    .main-sidebar {
       left: inherit;
     }
   }
@@ -407,14 +407,14 @@ body,
       }
     }
 
-    & .main-sidebar {
+    .main-sidebar {
       bottom: inherit;
       height: inherit;
     }
 
-    & .content-wrapper,
-    & .main-header,
-    & .main-footer {
+    .content-wrapper,
+    .main-header,
+    .main-footer {
       margin-left: 0;
     }
   }
@@ -625,3 +625,27 @@ body:not(.sidebar-mini-md) {
     animation-duration: 0s !important;
   }
 }
+
+.dark-mode {
+  background-color: lighten($dark, 7.5%) !important;
+  color: $white;
+
+  .breadcrumb-item {
+    &.active,
+    + .breadcrumb-item::before {
+      color: $gray-500;
+    }
+  }
+  .main-footer {
+    background-color: $dark;
+    border-color: lighten($dark, 10%);
+  }
+  .content-wrapper {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+
+    .content-header {
+      color: $white;
+    }
+  }
+}

build/scss/_main-header.scss

@@ -75,7 +75,7 @@
 .form-control-navbar {
   border-right-width: 0;
 
-  & + .input-group-append {
+  + .input-group-append {
     margin-left: 0;
   }
 }
@@ -103,7 +103,7 @@
 
     &:focus {
       &,
-      & + .input-group-append .btn-navbar {
+      + .input-group-append .btn-navbar {
         background-color: $main-header-dark-form-control-focused-bg;
         border: $main-header-dark-form-control-focused-border !important;
         color: $main-header-dark-form-control-focused-color;
@@ -130,7 +130,7 @@
 
     &:focus {
       &,
-      & + .input-group-append .btn-navbar {
+      + .input-group-append .btn-navbar {
         background-color: $main-header-light-form-control-focused-bg;
         border: $main-header-light-form-control-focused-border !important;
         color: $main-header-light-form-control-focused-color;

build/scss/_main-sidebar.scss

@@ -385,7 +385,7 @@
     // Hover and active states
     &.menu-open > .nav-link,
     &:hover > .nav-link,
-    & > .nav-link:focus  {
+    > .nav-link:focus  {
       background-color: $sidebar-dark-hover-bg;
       color: $sidebar-dark-hover-color;
     }

build/scss/_miscellaneous.scss

@@ -481,3 +481,31 @@ blockquote {
 .badge-btn.badge-pill {
   padding: .375rem .6rem;
 }
+
+.dark-mode {
+  a:not(.btn):hover {
+    color: lighten($link-color, 10%);
+  }
+  .attachment-block {
+    background-color: lighten($dark, 3.75%);
+
+    .attachment-text {
+      color: $gray-400;
+    }
+  }
+  blockquote {
+    background-color: lighten($dark, 5%);
+  }
+  .close,
+  .mailbox-attachment-close {
+    color: $gray-500;
+    text-shadow: 0 1px 0 $gray-700;
+  }
+  .tab-custom-content {
+    border-color: $gray-600;
+  }
+  .list-group-item {
+    background-color: $dark;
+    border-color: $gray-600;
+  }
+}

build/scss/_modals.scss

@@ -38,3 +38,35 @@
     }
   }
 }
+
+.dark-mode {
+  .modal-header,
+  .modal-footer {
+    border-color: $gray-600;
+  }
+  .modal-content {
+    background-color: $dark;
+
+    &.bg-warning {
+      .modal-header,
+      .modal-footer {
+        border-color: $gray-600;
+      }
+      .close {
+        color: $dark !important;
+        text-shadow: 0 1px 0 $gray-700 !important;
+      }
+    }
+
+    &.bg-primary,
+    &.bg-secondary,
+    &.bg-info,
+    &.bg-danger,
+    &.bg-success {
+      .modal-header,
+      .modal-footer {
+        border-color: $white;
+      }
+    }
+  }
+}

build/scss/_navs.scss

@@ -81,6 +81,9 @@
   @if $color == dark or $color == light {
     .navbar-#{$color} {
       background-color: $value;
+      @if $color == dark {
+        border-color: lighten($dark, 10%);
+      }
     }
   }
 }
@@ -98,3 +101,49 @@
     background-color: $value;
   }
 }
+
+.dark-mode {
+  .nav-pills .nav-link {
+    color: $gray-400;
+  }
+  .nav-tabs {
+    border-color: lighten($dark, 15%);
+
+    .nav-link:focus,
+    .nav-link:hover {
+      border-color: lighten($dark, 15%);
+    }
+
+    .nav-item.show .nav-link,
+    .nav-link.active {
+      background-color: $dark;
+      border-color: lighten($dark, 15%) lighten($dark, 15%) transparent lighten($dark, 15%);
+      color: $white;
+    }
+
+    &.flex-column {
+      .nav-item.show .nav-link,
+      .nav-link {
+        &.active,
+        &:focus,
+        &:hover {
+          border-color: lighten($dark, 15%) transparent lighten($dark, 15%) lighten($dark, 15%);
+        }
+        &:focus,
+        &:hover {
+          background-color: lighten($dark, 5%);
+        }
+      }
+      &.nav-tabs-right {
+        border-color: lighten($dark, 15%);
+        .nav-link {
+          &.active,
+          &:focus,
+          &:hover {
+            border-color: lighten($dark, 15%) lighten($dark, 15%) lighten($dark, 15%) transparent;
+          }
+        }
+      }
+    }
+  }
+}

build/scss/_pagination.scss

@@ -11,6 +11,7 @@
       align-items: center;
       justify-content: center;
       flex-direction: column;
+      box-shadow: none;
     }
     &:first-child,
     &:last-child {
@@ -40,3 +41,33 @@
     }
   }
 }
+
+.dark-mode {
+  .page-item {
+    &.disabled .page-link {
+      background-color: lighten($dark, 2.5%);
+      border-color: $gray-600;
+      color: $gray-600;
+    }
+    &.active {
+      .page-link {
+        &:hover,
+        &:focus {
+          color: $gray-400;
+        }
+      }
+    }
+    &:not(.active) {
+      .page-link {
+        background-color: $dark;
+        border-color: $gray-600;
+
+        &:hover,
+        &:focus {
+          color: lighten($primary, 5%);
+          background-color: lighten($dark, 5%);
+        }
+      }
+    }
+  }
+}

build/scss/_products.scss

@@ -16,6 +16,7 @@
 
     background-color: $white;
     padding: 10px 0;
+
   }
 
   .product-img {
@@ -52,3 +53,16 @@
     border-bottom-width: 0;
   }
 }
+
+
+.dark-mode {
+  .products-list > .item {
+    background-color: $dark;
+    color: $white;
+    border-bottom-color: $gray-600;
+  }
+
+  .product-description {
+    color: $gray-400;
+  }
+}

build/scss/_progress-bars.scss

@@ -64,3 +64,9 @@
     }
   }
 }
+
+.dark-mode {
+  .progress {
+    background: lighten($dark, 7.5%);
+  }
+}

build/scss/_table.scss

@@ -58,6 +58,8 @@
   .card-body.p-0 & {
     thead > tr > th,
     thead > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td,
     tbody > tr > th,
     tbody > tr > td {
       &:first-of-type {
@@ -120,3 +122,34 @@
     }
   }
 }
+
+.dark-mode {
+  .table-bordered {
+    &,
+    td,
+    th {
+      border-color: $gray-600;
+    }
+  }
+  .table-hover {
+    tbody tr:hover {
+      color: $gray-300;
+      background-color: lighten($dark, 2.5%);
+      border-color: $gray-600;
+    }
+  }
+  .table {
+    thead th {
+      border-bottom-color: $gray-600;
+    }
+    th,
+    td {
+      border-top-color: $gray-600;
+    }
+    &.table-head-fixed {
+      thead tr:nth-child(1) th {
+        background-color: lighten($dark, 5%);
+      }
+    }
+  }
+}

build/scss/_text.scss

@@ -37,3 +37,9 @@
     color: #{$color} !important;
   }
 }
+
+.dark-mode {
+  .text-muted {
+    color: $gray-500 !important;
+  }
+}

build/scss/_timeline.scss

@@ -132,3 +132,24 @@
     }
   }
 }
+
+.dark-mode {
+  .timeline {
+    &::before {
+      background-color: $gray-600;
+    }
+    > div > .timeline-item {
+      background-color: $dark;
+      color: $white;
+      border-color: $gray-600;
+
+      > .timeline-header {
+        color: $gray-400;
+        border-color: $gray-600;
+      }
+      > .time {
+        color: $gray-400;
+      }
+    }
+  }
+}

build/scss/_toasts.scss

@@ -46,6 +46,18 @@
   }
 }
 
+.dark-mode {
+  .toast {
+    background-color: rgba($dark, .85);
+    color: $white;
+
+    .toast-header {
+      background-color: rgba($dark, .7);
+      color: $gray-100;
+    }
+  }
+}
+
 .toast {
   @each $name, $color in $theme-colors {
     @include toast-variant($name, $color);

build/scss/_users-list.scss

@@ -43,3 +43,12 @@
   color: darken($gray-500, 20%);
   font-size: 12px;
 }
+
+.dark-mode {
+  .users-list-name {
+    color: $gray-400;
+  }
+  .users-list-date {
+    color: $gray-500;
+  }
+}

build/scss/mixins/_accent.scss

@@ -4,8 +4,8 @@
 
 // Accent Variant
 @mixin accent-variant($name, $color) {
+  $link-color: $color;
   .accent-#{$name} {
-    $link-color: $color;
     $link-hover-color: darken($color, 15%);
     $pagination-active-bg: $color;
     $pagination-active-border-color: $color;
@@ -90,5 +90,14 @@
       }
     }
   }
+  .dark-mode.accent-#{$name} {
+    .page-item {
+      .page-link {
+        &:hover,
+        &:focus {
+          color: lighten($link-color, 5%);
+        }
+      }
+    }
+  }
 }
-

build/scss/mixins/_backgrounds.scss

@@ -33,7 +33,7 @@
 // Background Gradient Variant
 @mixin background-gradient-variant($name, $color) {
   .bg-gradient-#{$name} {
-    @include bg-gradient-variant("&", $color);
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
     color: color-yiq($color);
 
     &.btn {
@@ -46,7 +46,7 @@
       }
 
       &:hover {
-        @include bg-gradient-variant("&", darken($color, 7.5%));
+        background: $color linear-gradient(180deg, mix($body-bg, darken($color, 7.5%), 15%), darken($color, 7.5%)) repeat-x !important;
         border-color: darken($color, 10%);
         color: darken(color-yiq($color), 7.5%);
       }
@@ -55,7 +55,7 @@
       &:not(:disabled):not(.disabled).active,
       &:active,
       &.active {
-        @include bg-gradient-variant("&", darken($color, 10%));
+        background: $color linear-gradient(180deg, mix($body-bg, darken($color, 10%), 15%), darken($color, 10%)) repeat-x !important;
         border-color: darken($color, 12.5%);
         color: color-yiq(darken($color, 10%));
       }

build/scss/mixins/_custom-forms.scss

@@ -5,31 +5,31 @@
 // Custom Switch Variant
 @mixin custom-switch-variant($name, $color) {
   &.custom-switch-off-#{$name} {
-    & .custom-control-input ~ .custom-control-label::before {
+    .custom-control-input ~ .custom-control-label::before {
       background-color: #{$color};
       border-color: darken($color, 20%);
     }
 
-    & .custom-control-input:focus ~ .custom-control-label::before {
+    .custom-control-input:focus ~ .custom-control-label::before {
       box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
     }
 
-    & .custom-control-input ~ .custom-control-label::after {
+    .custom-control-input ~ .custom-control-label::after {
       background-color: darken($color, 25%);
     }
   }
 
   &.custom-switch-on-#{$name} {
-    & .custom-control-input:checked ~ .custom-control-label::before {
+    .custom-control-input:checked ~ .custom-control-label::before {
       background-color: #{$color};
       border-color: darken($color, 20%);
     }
 
-    & .custom-control-input:checked:focus ~ .custom-control-label::before {
+    .custom-control-input:checked:focus ~ .custom-control-label::before {
       box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
     }
 
-    & .custom-control-input:checked ~ .custom-control-label::after {
+    .custom-control-input:checked ~ .custom-control-label::after {
       background-color: lighten($color, 30%);
     }
   }
@@ -79,3 +79,45 @@
     }
   }
 }
+
+
+// Custom Control Input Variant
+@mixin custom-control-input-variant($name, $color) {
+  $custom-control-indicator-checked-color: $color;
+  $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23");
+  $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23");
+
+  .custom-control-input-#{$name} {
+    &:checked ~ .custom-control-label::before {
+      border-color: $color;
+      @include gradient-bg($color);
+    }
+
+    &.custom-control-input-outline:checked {
+      &[type="checkbox"] ~ .custom-control-label::after {
+        background-image: $custom-checkbox-indicator-icon-checked !important;
+      }
+      &[type="radio"] ~ .custom-control-label::after {
+        background-image: $custom-radio-indicator-icon-checked !important;
+      }
+    }
+
+    &:focus ~ .custom-control-label::before {
+      // the mixin is not used here to make sure there is feedback
+      @if $enable-shadows {
+        box-shadow: $input-box-shadow, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      } @else {
+        box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
+    }
+
+    &:focus:not(:checked) ~ .custom-control-label::before {
+      border-color: lighten($color, 25%);
+    }
+
+    &:not(:disabled):active ~ .custom-control-label::before {
+      background-color: lighten($color, 35%);
+      border-color: lighten($color, 35%);
+    }
+  }
+}

build/scss/mixins/_sidebar.scss

@@ -5,14 +5,14 @@
 // Sidebar Color
 @mixin sidebar-color($color) {
   .nav-sidebar > .nav-item {
-    & > .nav-link.active {
+    > .nav-link.active {
       background-color: $color;
       color: color-yiq($color);
     }
   }
 
   .nav-sidebar.nav-legacy > .nav-item {
-    & > .nav-link.active {
+    > .nav-link.active {
       border-color: $color;
     }
   }

build/scss/pages/_invoice.scss

@@ -11,3 +11,9 @@
 .invoice-title {
   margin-top: 0;
 }
+
+.dark-mode {
+  .invoice {
+    background-color: $dark;
+  }
+}

build/scss/pages/_kanban.scss

@@ -0,0 +1,56 @@
+.content-wrapper.kanban {
+  height: 1px;
+
+  .content {
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    .container,
+    .container-fluid {
+      width: max-content;
+      display: flex;
+      align-items: stretch;
+    }
+  }
+  .content-header + .content {
+    height: calc(100% - ((2 * 15px) + (1.8rem * #{$headings-line-height})));
+  }
+
+  .card {
+    .card-body {
+      padding: .5rem;
+    }
+
+    &.card-row {
+      width: 340px;
+      display: inline-block;
+      margin: 0 .5rem;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      .card-body {
+        height: 100%;
+        overflow-y: auto;
+      }
+
+      .card {
+        .card-header {
+          padding: .5rem .75rem;
+        }
+        .card-body {
+          padding: .75rem;
+        }
+      }
+    }
+  }
+  .btn-tool {
+    &.btn-link {
+      text-decoration: underline;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}

build/scss/pages/_lockscreen.scss

@@ -76,3 +76,18 @@
 .lockscreen-footer {
   margin-top: 10px;
 }
+
+.dark-mode {
+  .lockscreen-item {
+    background-color: $dark;
+  }
+  .lockscreen-logo a {
+    color: $white;
+  }
+  .lockscreen-credentials .btn {
+    background-color: $dark;
+  }
+  .lockscreen-image {
+    background-color: $gray-600;
+  }
+}

build/scss/pages/_login_and_register.scss

@@ -52,7 +52,8 @@
       &:focus {
         box-shadow: none;
 
-        & ~ .input-group-append .input-group-text {
+        ~ .input-group-prepend .input-group-text,
+        ~ .input-group-append .input-group-text {
           border-color: $input-focus-border-color;
         }
       }
@@ -62,7 +63,8 @@
           box-shadow: none;
         }
 
-        & ~ .input-group-append .input-group-text {
+        ~ .input-group-prepend .input-group-text,
+        ~ .input-group-append .input-group-text {
           border-color: $success;
         }
       }
@@ -72,7 +74,7 @@
           box-shadow: none;
         }
 
-        & ~ .input-group-append .input-group-text {
+        ~ .input-group-append .input-group-text {
           border-color: $danger;
         }
       }
@@ -99,3 +101,18 @@
 .social-auth-links {
   margin: 10px 0;
 }
+
+.dark-mode {
+  .login-card-body,
+  .register-card-body {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: $white;
+  }
+  .login-logo,
+  .register-logo {
+    a {
+      color: $white;
+    }
+  }
+}

build/scss/pages/_profile.scss

@@ -35,3 +35,10 @@
     width: 100%;
   }
 }
+
+.dark-mode {
+  .post {
+    color: $white;
+    border-color: $gray-600;
+  }
+}

build/scss/parts/_components.scss

@@ -12,3 +12,4 @@
 @import "../alerts";
 @import "../table";
 @import "../carousel";
+@import "../close";

build/scss/parts/_pages.scss

@@ -11,3 +11,4 @@
 @import "../pages/e-commerce";
 @import "../pages/projects";
 @import "../pages/iframe";
+@import "../pages/kanban";

build/scss/plugins/_bootstrap-slider.scss

@@ -33,3 +33,10 @@
     }
   }
 }
+
+.dark-mode {
+  .slider-track {
+    background-color: lighten($dark, 10%);
+    background-image: none;
+  }
+}

build/scss/plugins/_bootstrap-switch.scss

@@ -173,3 +173,16 @@ $bootstrap-switch-handle-border-radius: .1rem;
     border-top-left-radius: $bootstrap-switch-handle-border-radius;
   }
 }
+
+.dark-mode {
+  .bootstrap-switch {
+    border-color: $gray-600;
+
+    .bootstrap-switch-handle-off.bootstrap-switch-default,
+    .bootstrap-switch-handle-on.bootstrap-switch-default {
+      background-color: lighten($dark, 2.5%);
+      color: $white;
+      border-color: lighten($dark, 7.5%);
+    }
+  }
+}

build/scss/plugins/_icheck-bootstrap.scss

@@ -39,3 +39,12 @@
     border-color: #{$color};
   }
 }
+
+.dark-mode {
+  [class*="icheck-"] > input:first-child:not(:checked) {
+    + input[type="hidden"] + label::before,
+    + label::before {
+      border-color: $gray-600;
+    }
+  }
+}

build/scss/plugins/_miscellaneous.scss

@@ -37,3 +37,29 @@
   overflow: hidden;
   position: relative;
 }
+
+
+.dark-mode {
+  .irs--flat .irs-line {
+    background-color: lighten($dark, 10%);
+  }
+  .jsgrid-edit-row > .jsgrid-cell,
+  .jsgrid-filter-row > .jsgrid-cell,
+  .jsgrid-grid-body, .jsgrid-grid-header,
+  .jsgrid-header-row > .jsgrid-header-cell,
+  .jsgrid-insert-row > .jsgrid-cell,
+  .jsgrid-row > .jsgrid-cell,
+  .jsgrid-alt-row > .jsgrid-cell {
+    border-color: $gray-600;
+  }
+  .jsgrid-header-row > .jsgrid-header-cell,
+  .jsgrid-row > .jsgrid-cell {
+    background-color: $dark;
+  }
+  .jsgrid-alt-row > .jsgrid-cell {
+    background-color: lighten($dark, 2.5%);
+  }
+  .jsgrid-selected-row > .jsgrid-cell {
+    background-color: lighten($dark, 5%);
+  }
+}

build/scss/plugins/_select2.scss

@@ -272,3 +272,46 @@ select.form-control-sm ~ {
 @each $name, $color in $colors {
   @include select2-variant($name, $color);
 }
+
+.dark-mode {
+  .select2-selection {
+    background-color: $dark;
+    border-color: $gray-600;
+  }
+
+  .select2-container--disabled .select2-selection--single {
+    background-color: lighten($dark, 7.5%);
+  }
+
+  .select2-selection--single {
+    background-color: $dark;
+    border-color: $gray-600;
+
+    .select2-selection__rendered {
+      color: $white;
+    }
+  }
+  .select2-dropdown .select2-search__field,
+  .select2-search--inline .select2-search__field {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: white;
+  }
+  .select2-dropdown {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: white;
+  }
+  .select2-results__option[aria-selected="true"] {
+    background-color: lighten($dark, 5%) !important;
+    color: $gray-300;
+  }
+  .select2-container .select2-search--inline .select2-search__field {
+    background-color: transparent;
+    color: $white;
+  }
+
+  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
+    color: $white;
+  }
+}

build/scss/plugins/_sweetalert2.scss

@@ -36,5 +36,16 @@
       background-color: $success;
     }
   }
+}
+
+.dark-mode {
+  .swal2-popup {
+    background-color: $dark;
+    color: $gray-200;
 
+    .swal2-content,
+    .swal2-title {
+      color: $gray-200;
+    }
+  }
 }

dist/js/demo.js

@@ -223,9 +223,24 @@
       $('.brand-link').removeClass('text-sm')
     }
   })
-  var $text_sm_brand_container = $('<div />', { class: 'mb-4' }).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
+  var $text_sm_brand_container = $('<div />', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
   $container.append($text_sm_brand_container)
 
+  var $dark_mode_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('body').hasClass('dark-mode'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('body').addClass('dark-mode')
+    } else {
+      $('body').removeClass('dark-mode')
+    }
+  })
+  var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>')
+  $container.append($dark_mode_container)
+
   $container.append('<h6>Navbar Variants</h6>')
 
   var $navbar_variants = $('<div />', {

docs/_layouts/page.html

@@ -4,7 +4,7 @@ layout: default
 
 <div class="content-wrapper px-4 py-2">
   <div class="content-header">
-    <h1 class="text-dark">{{ page.title }}</h1>
+    <h1>{{ page.title }}</h1>
   </div>
 
   <div class="content px-2">

docs/components/miscellaneous.md

@@ -32,3 +32,7 @@ You can add the `.dropdown-hover` class beside this classes:
 - `.dropdown` (to use hover for the whole dropdown menu)
 - `.dropdown-menu` (to use hover on a specific menu item & sub menus)
 - `.dropdown-submenu` (to use hover on a specific sub menu item & sub sub menus)
+
+### Form Control Bottom Border Only
+
+You can change the form-control input to a bottom border only style with adding the `.form-control-border` class.

docs/implementations.md

@@ -8,6 +8,7 @@ Thanks to many of AdminLTE users, there are multiple implementations of the temp
 
 ##### AdminLTE v3.0
 {: .text-bold .text-dark .mt-3}
+- [Setup AdminLTE3 in to Laravel in few minutes](https://youtu.be/jA7hr2gE9yc) by [Shailesh Ladumor](https://github.com/shailesh-ladumor)
 - [Laravel-AdminLTE _v3.x_](https://github.com/jeroennoten/Laravel-AdminLTE) by [Jeroen Noten](https://github.com/jeroennoten)
 - [django-adminlte3](https://github.com/d-demirci/django-adminlte3) by [d-demirci](https://github.com/d-demirci)
 - [AdminLTE3.MVC](https://www.nuget.org/packages/AdminLTE3.MVC/) by [somaraj](https://github.com/somaraj)
@@ -21,6 +22,7 @@ Thanks to many of AdminLTE users, there are multiple implementations of the temp
 
 ##### AdminLTE v2.4
 {: .text-bold .text-dark .mt-3}
+- [Setup AdminLTE2 in to Laravel in few minutes](https://youtu.be/8Fa7Ji4lDyI) by [Shailesh Ladumor](https://github.com/shailesh-ladumor)
 - [Laravel-AdminLTE _v1.x & v2.x_](https://github.com/jeroennoten/Laravel-AdminLTE) by [Jeroen Noten](https://github.com/jeroennoten)
 - [adminlte-laravel](https://github.com/acacha/adminlte-laravel) by [Sergi Tur Badenas](https://github.com/acacha)
 - [yii2-adminlte-asset](https://github.com/dmstr/yii2-adminlte-asset) by [Tobias Munk](https://github.com/schmunk42)

docs/javascript/control-sidebar.md

@@ -61,3 +61,17 @@ $("#my-toggle-button").ControlSidebar('toggle');
 {: .table .table-bordered .bg-light}
 
 Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|collapse | Collapses the control-sidebar
+|show | Show's the control-sidebar
+|toggle | Toggles the state of the control-sidebar expanded and collapsed
+{: .table .table-bordered .bg-light}
+
+Example: `$('#toggle-button').ControlSidebar('toggle')`

docs/layout.md

@@ -112,6 +112,16 @@ The following colors are available:
 
 ##### Custom Range / Switch
 
+For custom colored custom-checkbox & custom-radio you can add this classes:
+
+- `.custom-control-input-*`
+
+You can also change the look to outlined checkbox & radio with adding the `.custom-control-input-outline` on the custom control input.
+
+For custom colored custom-range you can add this classes:
+
+- `.custom-range-*`
+
 For custom colored custom-range you can add this classes:
 
 - `.custom-range-*`

index.html

@@ -463,6 +463,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="pages/kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>
@@ -825,7 +833,7 @@
       <div class="container-fluid">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1 class="m-0 text-dark">Dashboard</h1>
+            <h1 class="m-0">Dashboard</h1>
           </div><!-- /.col -->
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">

index2.html

@@ -450,6 +450,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="pages/kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>
@@ -812,7 +820,7 @@
       <div class="container-fluid">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1 class="m-0 text-dark">Dashboard v2</h1>
+            <h1 class="m-0">Dashboard v2</h1>
           </div><!-- /.col -->
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">
@@ -1540,7 +1548,7 @@
                 <!-- /.row -->
               </div>
               <!-- /.card-body -->
-              <div class="card-footer bg-white p-0">
+              <div class="card-footer bg-light p-0">
                 <ul class="nav nav-pills flex-column">
                   <li class="nav-item">
                     <a href="#" class="nav-link">

index3.html

@@ -459,6 +459,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="pages/kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>
@@ -821,7 +829,7 @@
       <div class="container-fluid">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1 class="m-0 text-dark">Dashboard v3</h1>
+            <h1 class="m-0">Dashboard v3</h1>
           </div><!-- /.col -->
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">

package.json

@@ -68,13 +68,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.14.0",
-    "@fullcalendar/bootstrap": "^4.4.2",
-    "@fullcalendar/core": "^4.4.2",
-    "@fullcalendar/daygrid": "^4.4.2",
-    "@fullcalendar/interaction": "^4.4.2",
-    "@fullcalendar/timegrid": "^4.4.2",
     "@lgaitan/pace-progress": "^1.0.7",
-    "@sweetalert2/theme-bootstrap-4": "^3.2.0",
+    "@sweetalert2/theme-bootstrap-4": "^4.0.0",
     "@ttskch/select2-bootstrap4-theme": "^1.4.0",
     "bootstrap": "^4.5.2",
     "bootstrap-colorpicker": "^3.2.0",
@@ -84,19 +79,19 @@
     "bs-custom-file-input": "^1.3.4",
     "bs-stepper": "^1.7.0",
     "chart.js": "^2.9.3",
-    "codemirror": "^5.56.0",
-    "datatables.net": "^1.10.21",
+    "codemirror": "^5.58.0",
+    "datatables.net": "^1.10.22",
     "datatables.net-autofill-bs4": "^2.3.5",
-    "datatables.net-bs4": "^1.10.21",
-    "datatables.net-buttons-bs4": "^1.6.3",
+    "datatables.net-bs4": "^1.10.22",
+    "datatables.net-buttons-bs4": "^1.6.4",
     "datatables.net-colreorder-bs4": "^1.5.2",
-    "datatables.net-fixedcolumns-bs4": "^3.3.1",
+    "datatables.net-fixedcolumns-bs4": "^3.3.2",
     "datatables.net-fixedheader-bs4": "^3.1.7",
-    "datatables.net-keytable-bs4": "^2.5.2",
-    "datatables.net-responsive-bs4": "^2.2.5",
+    "datatables.net-keytable-bs4": "^2.5.3",
+    "datatables.net-responsive-bs4": "^2.2.6",
     "datatables.net-rowgroup-bs4": "^1.1.2",
     "datatables.net-rowreorder-bs4": "^1.2.7",
-    "datatables.net-scroller-bs4": "^2.0.2",
+    "datatables.net-scroller-bs4": "^2.0.3",
     "datatables.net-select-bs4": "^1.3.1",
     "daterangepicker": "^3.1.0",
     "dropzone": "^5.7.2",
@@ -106,6 +101,7 @@
     "flag-icon-css": "^3.5.0",
     "flot": "^4.2.1",
     "fs-extra": "^9.0.1",
+    "fullcalendar": "^5.3.2",
     "icheck-bootstrap": "^3.0.1",
     "inputmask": "^5.0.5",
     "ion-rangeslider": "^2.3.1",
@@ -118,7 +114,7 @@
     "jqvmap-novulnerability": "^1.5.1",
     "jsgrid": "^1.5.3",
     "jszip": "^3.5.0",
-    "moment": "^2.24.0",
+    "moment": "^2.29.0",
     "overlayscrollbars": "^1.13.0",
     "pdfmake": "^0.1.68",
     "popper.js": "^1.16.1",
@@ -126,32 +122,32 @@
     "select2": "^4.0.13",
     "sparklines": "^1.2.0",
     "summernote": "^0.8.18",
-    "sweetalert2": "^9.17.1",
+    "sweetalert2": "^10.3.5",
     "tempusdominus-bootstrap-4": "^5.1.2",
     "toastr": "^2.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/preset-env": "^7.11.0",
-    "@rollup/plugin-babel": "^5.1.0",
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "@rollup/plugin-babel": "^5.2.1",
     "autoprefixer": "^9.8.6",
     "browser-sync": "^2.26.12",
     "bundlewatch": "^0.2.7",
     "clean-css-cli": "^4.3.0",
-    "eslint": "^7.9.0",
+    "eslint": "^7.10.0",
     "eslint-config-xo": "^0.32.1",
     "eslint-plugin-compat": "^3.8.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-unicorn": "^21.0.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-unicorn": "^22.0.0",
     "node-sass": "^4.14.1",
     "node-sass-package-importer": "^5.3.2",
     "nodemon": "^2.0.4",
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^7.1.1",
-    "rollup": "^2.26.11",
-    "stylelint": "^13.6.1",
+    "rollup": "^2.28.2",
+    "stylelint": "^13.7.2",
     "stylelint-config-twbs-bootstrap": "^2.0.3",
-    "terser": "^5.3.1",
+    "terser": "^5.3.2",
     "vnu-jar": "^20.6.30"
   }
 }

pages/UI/buttons.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>
@@ -1293,6 +1301,26 @@
           <!-- ./row -->
         <div class="row">
           <div class="col-md-6">
+            <!-- Buttons with Icons -->
+            <div class="card">
+              <div class="card-header">
+                <h3 class="card-title">Buttons with Icons</h3>
+              </div>
+              <div class="card-body row">
+                <div class="col-md-6">
+                  <button type="button" class="btn btn-primary btn-block"><i class="fa fa-bell"></i> .btn-block</button>
+                  <button type="button" class="btn btn-info btn-block btn-flat"><i class="fa fa-bell"></i> .btn-block .btn-flat</button>
+                  <button type="button" class="btn btn-danger btn-block btn-sm"><i class="fa fa-bell"></i> .btn-block .btn-sm</button>
+                </div>
+                <div class="col-md-6">
+                  <button type="button" class="btn btn-outline-primary btn-block"><i class="fa fa-bell"></i> .btn-block</button>
+                  <button type="button" class="btn btn-outline-info btn-block btn-flat"><i class="fa fa-book"></i> .btn-block .btn-flat</button>
+                  <button type="button" class="btn btn-outline-danger btn-block btn-sm"><i class="fa fa-book"></i> .btn-block .btn-sm</button>
+                </div>
+              </div>
+            </div>
+            <!-- /.card -->
+
             <!-- Block buttons -->
             <div class="card">
               <div class="card-header">

pages/UI/general.html

@@ -492,6 +492,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/UI/icons.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/UI/modals.html

@@ -452,6 +452,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/UI/navbar.html

@@ -454,6 +454,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/UI/ribbons.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/UI/sliders.html

@@ -452,6 +452,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/UI/timeline.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/calendar.html

@@ -10,10 +10,7 @@
   <!-- Font Awesome -->
   <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
   <!-- fullCalendar -->
-  <link rel="stylesheet" href="../plugins/fullcalendar/main.min.css">
-  <link rel="stylesheet" href="../plugins/fullcalendar-daygrid/main.min.css">
-  <link rel="stylesheet" href="../plugins/fullcalendar-timegrid/main.min.css">
-  <link rel="stylesheet" href="../plugins/fullcalendar-bootstrap/main.min.css">
+  <link rel="stylesheet" href="../plugins/fullcalendar/main.css">
   <!-- Theme style -->
   <link rel="stylesheet" href="../dist/css/adminlte.min.css">
 </head>
@@ -453,6 +450,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>
@@ -929,11 +934,7 @@
 <script src="../dist/js/adminlte.min.js"></script>
 <!-- fullCalendar 2.2.5 -->
 <script src="../plugins/moment/moment.min.js"></script>
-<script src="../plugins/fullcalendar/main.min.js"></script>
-<script src="../plugins/fullcalendar-daygrid/main.min.js"></script>
-<script src="../plugins/fullcalendar-timegrid/main.min.js"></script>
-<script src="../plugins/fullcalendar-interaction/main.min.js"></script>
-<script src="../plugins/fullcalendar-bootstrap/main.min.js"></script>
+<script src="../plugins/fullcalendar/main.js"></script>
 <!-- AdminLTE for demo purposes -->
 <script src="../dist/js/demo.js"></script>
 <!-- Page specific script -->
@@ -975,7 +976,7 @@
         y    = date.getFullYear()
 
     var Calendar = FullCalendar.Calendar;
-    var Draggable = FullCalendarInteraction.Draggable;
+    var Draggable = FullCalendar.Draggable;
 
     var containerEl = document.getElementById('external-events');
     var checkbox = document.getElementById('drop-remove');
@@ -997,15 +998,14 @@
     });
 
     var calendar = new Calendar(calendarEl, {
-      plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
-      header    : {
+      headerToolbar: {
         left  : 'prev,next today',
         center: 'title',
         right : 'dayGridMonth,timeGridWeek,timeGridDay'
       },
-      'themeSystem': 'bootstrap',
+      themeSystem: 'bootstrap',
       //Random default events
-      events    : [
+      events: [
         {
           title          : 'All Day Event',
           start          : new Date(y, m, 1),

pages/charts/chartjs.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/charts/flot.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/charts/inline.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/404.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/500.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/blank.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/contact-us.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/contacts.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/e-commerce.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/faq.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/invoice.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/language-menu.html

@@ -461,6 +461,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/legacy-user-menu.html

@@ -191,7 +191,7 @@
     <!-- Sidebar -->
     <div class="sidebar">
       <!-- SidebarSearch Form -->
-      <div class="form-inline">
+      <div class="form-inline mt-2">
         <div class="input-group" data-widget="sidebar-search">
           <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
           <div class="input-group-append">
@@ -476,6 +476,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/pace.html

@@ -451,6 +451,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/profile.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/project-add.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/project-detail.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/project-edit.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/examples/projects.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/forms/advanced.html

@@ -465,6 +465,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/forms/editors.html

@@ -455,6 +455,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/forms/general.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>
@@ -871,37 +879,50 @@
             </div>
             <!-- /.card -->
 
-            <!-- Form Element sizes -->
-            <div class="card card-success">
-              <div class="card-header">
-                <h3 class="card-title">Different Height</h3>
-              </div>
-              <div class="card-body">
-                <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
-                <br>
-                <input class="form-control" type="text" placeholder="Default input">
-                <br>
-                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
-              </div>
-              <!-- /.card-body -->
-            </div>
-            <!-- /.card -->
-
-            <div class="card card-danger">
+            <!-- general form elements -->
+            <div class="card card-primary">
               <div class="card-header">
-                <h3 class="card-title">Different Width</h3>
+                <h3 class="card-title">Different Styles</h3>
               </div>
+              <!-- /.card-header -->
               <div class="card-body">
-                <div class="row">
-                  <div class="col-3">
-                    <input type="text" class="form-control" placeholder=".col-3">
-                  </div>
-                  <div class="col-4">
-                    <input type="text" class="form-control" placeholder=".col-4">
-                  </div>
-                  <div class="col-5">
-                    <input type="text" class="form-control" placeholder=".col-5">
-                  </div>
+                <h4>Input</h4>
+                <div class="form-group">
+                  <label for="exampleInputBorder">Bottom Border only <code>.form-control-border</code></label>
+                  <input type="text" class="form-control form-control-border" id="exampleInputBorder" placeholder=".form-control-border">
+                </div>
+                <div class="form-group">
+                  <label for="exampleInputBorderWidth2">Bottom Border only 2px Border <code>.form-control-border.border-width-2</code></label>
+                  <input type="text" class="form-control form-control-border border-width-2" id="exampleInputBorderWidth2" placeholder=".form-control-border.border-width-2">
+                </div>
+                <div class="form-group">
+                  <label for="exampleInputRounded0">Flat <code>.rounded-0</code></label>
+                  <input type="text" class="form-control rounded-0" id="exampleInputRounded0" placeholder=".rounded-0">
+                </div>
+                <h4>Custom Select</h4>
+                <div class="form-group">
+                  <label for="exampleSelectBorder">Bottom Border only <code>.form-control-border</code></label>
+                  <select class="custom-select form-control-border" id="exampleSelectBorder">
+                    <option>Value 1</option>
+                    <option>Value 2</option>
+                    <option>Value 3</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label for="exampleSelectBorderWidth2">Bottom Border only <code>.form-control-border.border-width-2</code></label>
+                  <select class="custom-select form-control-border border-width-2" id="exampleSelectBorderWidth2">
+                    <option>Value 1</option>
+                    <option>Value 2</option>
+                    <option>Value 3</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label for="exampleSelectRounded0">Flat <code>.rounded-0</code></label>
+                  <select class="custom-select rounded-0" id="exampleSelectRounded0">
+                    <option>Value 1</option>
+                    <option>Value 2</option>
+                    <option>Value 3</option>
+                  </select>
                 </div>
               </div>
               <!-- /.card-body -->
@@ -1082,6 +1103,43 @@
           <!--/.col (left) -->
           <!-- right column -->
           <div class="col-md-6">
+            <!-- Form Element sizes -->
+            <div class="card card-success">
+              <div class="card-header">
+                <h3 class="card-title">Different Height</h3>
+              </div>
+              <div class="card-body">
+                <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
+                <br>
+                <input class="form-control" type="text" placeholder="Default input">
+                <br>
+                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+
+            <div class="card card-danger">
+              <div class="card-header">
+                <h3 class="card-title">Different Width</h3>
+              </div>
+              <div class="card-body">
+                <div class="row">
+                  <div class="col-3">
+                    <input type="text" class="form-control" placeholder=".col-3">
+                  </div>
+                  <div class="col-4">
+                    <input type="text" class="form-control" placeholder=".col-4">
+                  </div>
+                  <div class="col-5">
+                    <input type="text" class="form-control" placeholder=".col-5">
+                  </div>
+                </div>
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+
             <!-- general form elements disabled -->
             <div class="card card-warning">
               <div class="card-header">
@@ -1259,6 +1317,14 @@
                           <input class="custom-control-input" type="checkbox" id="customCheckbox3" disabled>
                           <label for="customCheckbox3" class="custom-control-label">Custom Checkbox disabled</label>
                         </div>
+                        <div class="custom-control custom-checkbox">
+                          <input class="custom-control-input custom-control-input-danger" type="checkbox" id="customCheckbox4" checked>
+                          <label for="customCheckbox4" class="custom-control-label">Custom Checkbox with custom color</label>
+                        </div>
+                        <div class="custom-control custom-checkbox">
+                          <input class="custom-control-input custom-control-input-danger custom-control-input-outline" type="checkbox" id="customCheckbox5" checked>
+                          <label for="customCheckbox5" class="custom-control-label">Custom Checkbox with custom color outline</label>
+                        </div>
                       </div>
                     </div>
                     <div class="col-sm-6">
@@ -1276,6 +1342,14 @@
                           <input class="custom-control-input" type="radio" id="customRadio3" disabled>
                           <label for="customRadio3" class="custom-control-label">Custom Radio disabled</label>
                         </div>
+                        <div class="custom-control custom-radio">
+                          <input class="custom-control-input custom-control-input-danger" type="radio" id="customRadio4" name="customRadio2" checked>
+                          <label for="customRadio4" class="custom-control-label">Custom Radio with custom color</label>
+                        </div>
+                        <div class="custom-control custom-radio">
+                          <input class="custom-control-input custom-control-input-danger custom-control-input-outline" type="radio" id="customRadio5" name="customRadio2">
+                          <label for="customRadio5" class="custom-control-label">Custom Radio with custom color outline</label>
+                        </div>
                       </div>
                     </div>
                   </div>

pages/forms/validation.html

@@ -448,6 +448,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/gallery.html

@@ -450,6 +450,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>

pages/layout/boxed.html

@@ -449,6 +449,14 @@
             </a>
           </li>
           <li class="nav-item">
+            <a href="../kanban.html" class="nav-link">
+              <i class="nav-icon fas fa-columns"></i>
+              <p>
+                Kanban Board
+              </p>
+            </a>
+          </li>
+          <li class="nav-item">
             <a href="#" class="nav-link">
               <i class="nav-icon far fa-envelope"></i>
               <p>