Merge pull request #3046 from ColorlibHQ/feat/new-form-button-styles

new styles and demos

.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/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

@@ -96,7 +96,7 @@
 
         .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/_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

@@ -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

@@ -271,6 +271,25 @@ body.text-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 {
@@ -292,3 +311,91 @@ body.text-sm {
     @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

@@ -144,3 +144,10 @@
     }
   }
 }
+
+.dark-mode {
+  .info-box {
+    background-color: $dark;
+    color: $white;
+  }
+}

build/scss/_layout.scss

@@ -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/_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

@@ -41,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/_custom-forms.scss

@@ -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/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,6 +52,7 @@
       &:focus {
         box-shadow: none;
 
+        & ~ .input-group-prepend .input-group-text,
         & ~ .input-group-append .input-group-text {
           border-color: $input-focus-border-color;
         }
@@ -62,6 +63,7 @@
           box-shadow: none;
         }
 
+        & ~ .input-group-prepend .input-group-text,
         & ~ .input-group-append .input-group-text {
           border-color: $success;
         }
@@ -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/_pages.scss

@@ -10,3 +10,4 @@
 @import "../pages/profile";
 @import "../pages/e-commerce";
 @import "../pages/projects";
+@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/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>
@@ -819,7 +827,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>
@@ -806,7 +814,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">
@@ -1534,7 +1542,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>
@@ -815,7 +823,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">

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>
@@ -1287,6 +1295,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

@@ -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/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>
@@ -952,7 +960,7 @@
         <div class="row">
             <div class="col-12 mt-3 text-center">
                 <p class="lead">
-                    <a href="contact-us.html">Contact us</a>, 
+                    <a href="contact-us.html">Contact us</a>,
                     if you found not the right anwser or you have a other question?<br />
                 </p>
             </div>

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>
@@ -865,37 +873,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 -->
@@ -1076,6 +1097,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">
@@ -1253,6 +1311,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">
@@ -1270,6 +1336,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>

pages/layout/collapsed-sidebar.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/layout/fixed-footer.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/layout/fixed-sidebar-custom.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/layout/fixed-sidebar.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/layout/fixed-topnav.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/layout/top-nav-sidebar.html

@@ -494,6 +494,14 @@ scratch. This page gets rid of all links and provides the needed markup only.
             </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>
@@ -850,7 +858,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
       <div class="container">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1 class="m-0 text-dark"> Top Navigation <small>Example 3.0</small></h1>
+            <h1 class="m-0"> Top Navigation <small>Example 3.0</small></h1>
           </div><!-- /.col -->
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">

pages/layout/top-nav.html

@@ -192,7 +192,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
       <div class="container">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1 class="m-0 text-dark"> Top Navigation <small>Example 3.0</small></h1>
+            <h1 class="m-0"> Top Navigation <small>Example 3.0</small></h1>
           </div><!-- /.col -->
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">

pages/search/enhanced-results.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>
@@ -816,7 +824,7 @@
                 <div class="row">
                     <div class="col-md-10 offset-md-1">
                         <div class="row">
-                            <div class="col-6">    
+                            <div class="col-6">
                                 <div class="form-group">
                                     <label>Result Type:</label>
                                     <select class="select2" multiple="multiple" data-placeholder="Any" style="width: 100%;">
@@ -826,7 +834,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="col-3">    
+                            <div class="col-3">
                                 <div class="form-group">
                                     <label>Sort Order:</label>
                                     <select class="select2" style="width: 100%;">
@@ -835,7 +843,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="col-3">    
+                            <div class="col-3">
                                 <div class="form-group">
                                     <label>Order By:</label>
                                     <select class="select2" style="width: 100%;">
@@ -936,6 +944,6 @@
     $(function () {
       $('.select2').select2()
     });
-</script>  
+</script>
 </body>
 </html>

pages/search/enhanced.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>
@@ -809,7 +817,7 @@
                 <div class="row">
                     <div class="col-md-10 offset-md-1">
                         <div class="row">
-                            <div class="col-6">    
+                            <div class="col-6">
                                 <div class="form-group">
                                     <label>Result Type:</label>
                                     <select class="select2" multiple="multiple" data-placeholder="Any" style="width: 100%;">
@@ -819,7 +827,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="col-3">    
+                            <div class="col-3">
                                 <div class="form-group">
                                     <label>Sort Order:</label>
                                     <select class="select2" style="width: 100%;">
@@ -828,7 +836,7 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="col-3">    
+                            <div class="col-3">
                                 <div class="form-group">
                                     <label>Order By:</label>
                                     <select class="select2" style="width: 100%;">
@@ -884,6 +892,6 @@
     $(function () {
       $('.select2').select2()
     });
-</script>  
+</script>
 </body>
 </html>

pages/search/simple-results.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,7 +879,7 @@
         </div>
     </section>
   </div>
-  
+
   <!-- Main footer -->
   <footer class="main-footer">
     <div class="float-right d-none d-sm-block">

pages/search/simple.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>
@@ -821,7 +829,7 @@
         </div>
     </section>
   </div>
-  
+
   <!-- Main footer -->
   <footer class="main-footer">
     <div class="float-right d-none d-sm-block">

pages/tables/data.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/tables/jsgrid.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/tables/simple.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/widgets.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>

starter.html

@@ -230,7 +230,7 @@ scratch. This page gets rid of all links and provides the needed markup only.
       <div class="container-fluid">
         <div class="row mb-2">
           <div class="col-sm-6">
-            <h1 class="m-0 text-dark">Starter Page</h1>
+            <h1 class="m-0">Starter Page</h1>
           </div><!-- /.col -->
           <div class="col-sm-6">
             <ol class="breadcrumb float-sm-right">