Merge pull request #2169 from REJack/v3-dev

docs, issues fixed & some bigger scss changes

.gitignore

@@ -1,14 +1,30 @@
+// System / Log files 
 *.DS_Store
 *.log
+
+// Archives
 *.zip
+
+// Sass Cache
+.sass-cache
+
+// Project files
 .idea
 nbproject
 nbproject/private
-node_modules
-.sass-cache
-bower_components
-ad.js
-TODO
-test.html
 .vscode/
 .vs/
+
+// Node / Bower
+node_modules/
+bower_components/
+
+// Docs
+docs/_site
+.jekyll-cache/
+.jekyll-metadata
+
+// ETC
+TODO
+test.html
+ad.js

build/js/AdminLTE.js

@@ -2,6 +2,8 @@ import ControlSidebar from './ControlSidebar'
 import Layout from './Layout'
 import PushMenu from './PushMenu'
 import Treeview from './Treeview'
+import DirectChat from './DirectChat'
+import TodoList from './TodoList'
 import Widget from './Widget'
 
 export {
@@ -9,5 +11,7 @@ export {
   Layout,
   PushMenu,
   Treeview,
+  DirectChat,
+  TodoList,
   Widget
 }

build/js/DirectChat.js

@@ -0,0 +1,85 @@
+/**
+ * --------------------------------------------
+ * AdminLTE DirectChat.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const DirectChat = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'DirectChat'
+  const DATA_KEY           = 'lte.directchat'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+  const DATA_API_KEY       = '.data-api'
+
+  const Selector = {
+    DATA_TOGGLE: '[data-widget="chat-pane-toggle"]',
+    DIRECT_CHAT: '.direct-chat'
+  };
+
+  const ClassName = {
+    DIRECT_CHAT_OPEN: 'direct-chat-contacts-open'
+  };
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class DirectChat {
+    constructor(element, config) {
+      this._element = element
+    }
+
+    toggle() {
+      $(this._element).parents(Selector.DIRECT_CHAT).first().toggleClass(ClassName.DIRECT_CHAT_OPEN);
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let data      = $(this).data(DATA_KEY)
+
+        if (!data) {
+          data = new DirectChat($(this))
+          $(this).data(DATA_KEY, data)
+        }
+
+        data[config]()
+      })
+    }
+  }
+
+  /**
+   *
+   * Data Api implementation
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+    if (event) event.preventDefault();
+    DirectChat._jQueryInterface.call($(this), 'toggle');
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = DirectChat._jQueryInterface
+  $.fn[NAME].Constructor = DirectChat
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return DirectChat._jQueryInterface
+  }
+
+  return DirectChat
+})(jQuery)
+
+export default DirectChat

build/js/TodoList.js

@@ -0,0 +1,122 @@
+/**
+ * --------------------------------------------
+ * AdminLTE TodoList.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const TodoList = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'TodoList'
+  const DATA_KEY           = 'lte.todolist'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Selector = {
+    DATA_TOGGLE: '[data-widget="todo-list"]'
+  }
+
+  const ClassName = {
+    TODO_LIST_DONE: 'done'
+  }
+
+  const Default = {
+    onCheck: function (item) {
+      return item;
+    },
+    onUnCheck: function (item) {
+      return item;
+    }
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class TodoList {
+    constructor(element, config) {
+      this._config  = config
+      this._element = element
+
+      this._init()
+    }
+
+    // Public
+
+    toggle(item) {
+      item.parents('li').toggleClass(ClassName.TODO_LIST_DONE);
+      if (! $(item).prop('checked')) {
+        this.unCheck($(item));
+        return;
+      }
+
+      this.check(item);
+    }
+
+    check (item) {
+      this._config.onCheck.call(item);
+    }
+
+    unCheck (item) {
+      this._config.onUnCheck.call(item);
+    }
+
+    // Private
+
+    _init() {
+      var that = this
+      $(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE)
+      $(Selector.DATA_TOGGLE).on('change', 'input:checkbox', (event) => {
+        that.toggle($(event.target))
+      })
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let data      = $(this).data(DATA_KEY)
+        const _config = $.extend({}, Default, $(this).data())
+
+        if (!data) {
+          data = new TodoList($(this), _config)
+          $(this).data(DATA_KEY, data)
+        }
+
+        if (config === 'init') {
+          data[config]()
+        }
+      })
+    }
+  }
+
+  /**
+   * Data API
+   * ====================================================
+   */
+
+  $(window).on('load', () => {
+    TodoList._jQueryInterface.call($(Selector.DATA_TOGGLE))
+  })
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = TodoList._jQueryInterface
+  $.fn[NAME].Constructor = TodoList
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return TodoList._jQueryInterface
+  }
+
+  return TodoList
+})(jQuery)
+
+export default TodoList

build/js/Widget.js

@@ -170,7 +170,7 @@ const Widget = (($) => {
           $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
         }
 
-        if (typeof config === 'string' && config.match(/remove|toggle/)) {
+        if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|toggleMaximize/)) {
           data[config]()
         } else if (typeof config === 'object') {
           data._init($(this))

build/npm/Plugins.js

@@ -215,51 +215,55 @@ const Plugins = [
     from: 'node_modules/flag-icon-css/flags',
     to: 'plugins/flag-icon-css/flags'
   },
+  // bootstrap4-duallistbox
+  {
+    from: 'node_modules/bootstrap4-duallistbox/dist',
+    to: 'plugins/bootstrap4-duallistbox/'
+  },
 
 
-  // // Doc Assets
-  // // AdminLTE Dist
-  // {
-  //   from: 'dist/css',
-  //   to  : 'docs/assets/css'
-  // },
-  // {
-  //   from: 'dist/js',
-  //   to  : 'docs/assets/js'
-  // },
-  // // jQuery
-  // {
-  //   from: 'node_modules/jquery/dist',
-  //   to  : 'docs/assets/plugins/jquery'
-  // },
-  // // Popper
-  // {
-  //   from: 'node_modules/popper.js/dist',
-  //   to  : 'docs/assets/plugins/popper'
-  // },
-  // // Bootstrap
-  // {
-  //   from: 'node_modules/bootstrap/dist/js',
-  //   to  : 'docs/assets/plugins/bootstrap/js'
-  // },
-  // // Font Awesome
-  // {
-  //   from: 'node_modules/@fortawesome/fontawesome-free/css',
-  //   to  : 'docs/assets/plugins/fontawesome-free/css'
-  // },
-  // {
-  //   from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
-  //   to  : 'docs/assets/plugins/fontawesome-free/webfonts'
-  // },
-  // // overlayScrollbars
-  // {
-  //   from: 'plugins/overlayScrollbars/js',
-  //   to  : 'docs/assets/plugins/overlayScrollbars/js'
-  // },
-  // {
-  //   from: 'plugins/overlayScrollbars/css',
-  //   to  : 'docs/assets/plugins/overlayScrollbars/css'
-  // }
+  // AdminLTE Dist
+  {
+    from: 'dist/css',
+    to  : 'docs/assets/css'
+  },
+  {
+    from: 'dist/js',
+    to  : 'docs/assets/js'
+  },
+  // jQuery
+  {
+    from: 'node_modules/jquery/dist',
+    to  : 'docs/assets/plugins/jquery'
+  },
+  // Popper
+  {
+    from: 'node_modules/popper.js/dist',
+    to  : 'docs/assets/plugins/popper'
+  },
+  // Bootstrap
+  {
+    from: 'node_modules/bootstrap/dist/js',
+    to  : 'docs/assets/plugins/bootstrap/js'
+  },
+  // Font Awesome
+  {
+    from: 'node_modules/@fortawesome/fontawesome-free/css',
+    to  : 'docs/assets/plugins/fontawesome-free/css'
+  },
+  {
+    from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
+    to  : 'docs/assets/plugins/fontawesome-free/webfonts'
+  },
+  // overlayScrollbars
+  {
+    from: 'node_modules/overlayscrollbars/js',
+    to  : 'docs/assets/plugins/overlayScrollbars/js'
+  },
+  {
+    from: 'node_modules/overlayscrollbars/css',
+    to  : 'docs/assets/plugins/overlayScrollbars/css'
+  }
 ]
 
 module.exports = Plugins

build/scss/AdminLTE-raw.scss

@@ -43,7 +43,6 @@
 @import 'navs';
 @import 'products';
 @import 'table';
-@import 'labels';
 @import 'direct-chat';
 @import 'users-list';
 @import 'carousel';

build/scss/AdminLTE.scss

@@ -39,7 +39,6 @@
 @import 'navs';
 @import 'products';
 @import 'table';
-@import 'labels';
 @import 'direct-chat';
 @import 'users-list';
 @import 'carousel';

build/scss/_alerts.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Alert
- * ----------------
- */
+//
+// Component: Alert
+//
 
 .alert {
   .icon {
@@ -44,3 +43,8 @@
   @extend .bg-info;
   border-color: darken(theme-color('info'), 5%);
 }
+
+.alert-primary {
+  @extend .bg-primary;
+  border-color: darken(theme-color('primary'), 5%);
+}

build/scss/_bootstrap-variables.scss

@@ -360,11 +360,11 @@ $btn-line-height-lg:          $input-btn-line-height-lg !default;
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-box-shadow:              none !default;
+$btn-focus-width:             0 !default;
+$btn-focus-box-shadow:        none !default;
 $btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
+$btn-active-box-shadow:       none !default;
 
 $btn-link-disabled-color:     $gray-600 !default;
 
@@ -407,8 +407,8 @@ $input-border-radius-sm:                $border-radius-sm !default;
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              lighten($component-active-bg, 25%) !default;
 $input-focus-color:                     $input-color !default;
-$input-focus-width:                     $input-btn-focus-width !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+$input-focus-width:                     0 !default;
+$input-focus-box-shadow:                none !default;
 
 $input-placeholder-color:               $gray-600 !default;
 
@@ -517,6 +517,8 @@ $custom-file-text: (
         en: "Browse"
 ) !default;
 
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
 
 // Form validation
 $form-feedback-margin-top:          $form-text-margin-top !default;

build/scss/_brand.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Brand
- * ----------------
- */
+//
+// Component: Brand
+//
 
 .brand-link {
   $brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
@@ -9,6 +8,7 @@
   font-size: $navbar-brand-font-size;
   line-height: $line-height-lg;
   padding: $brand-link-padding-y $sidebar-padding-x;
+  transition: width $transition-speed $transition-fn;
   white-space: nowrap;
 
   &:hover {

build/scss/_buttons.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Button
- * -----------------
- */
+//
+// Component: Button
+//
 
 .btn {
   // Flat buttons

build/scss/_callout.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Callout
- * ------------------
- */
+//
+// Component: Callout
+//
 
 // Base styles (regardless of theme)
 .callout {

build/scss/_cards.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Cards
- * ----------------
- */
+//
+// Component: Cards
+//
 
 .card {
   @extend .mb-3;
@@ -23,7 +22,7 @@
     top: 0;
     width: 100% !important;
     z-index: 9999;
-    
+
     &.was-collapsed .card-body {
       display: block !important;
     }
@@ -52,7 +51,7 @@
       margin: 0;
 
       &:last-of-type {
-        border-bottom: none;
+        border-bottom: 0;
       }
     }
   }
@@ -97,7 +96,7 @@ html.maximized-card {
   }
 
   .collapsed-card & {
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   > .card-tools {
@@ -252,8 +251,8 @@ html.maximized-card {
     }
 
     // Time labels
-    .label {
-      font-size: 9px;
+    .badge {
+      font-size: .7rem;
       margin-left: 10px;
     }
 
@@ -287,31 +286,23 @@ html.maximized-card {
         text-decoration: line-through;
       }
 
-      .label {
+      .badge {
         background: $gray-500 !important;
       }
     }
   }
 
-  // Color varaity
-  .danger {
-    border-left-color: theme-color('danger');
-  }
-
-  .warning {
-    border-left-color: theme-color('warning');
-  }
-
-  .info {
-    border-left-color: theme-color('info');
-  }
-
-  .success {
-    border-left-color: theme-color('success');
+  // Color variants
+  @each $name, $color in $theme-colors {
+    .#{$name} {
+      border-left-color: $color;
+    }
   }
 
-  .primary {
-    border-left-color: theme-color('primary');
+  @each $name, $color in $colors {
+    .#{$name} {
+      border-left-color: $color;
+    }
   }
 
   .handle {
@@ -328,59 +319,11 @@ html.maximized-card {
   max-width: 200px;
 }
 
+// Color variants
 @each $name, $color in $theme-colors {
-  .card-#{$name} {
-    &:not(.card-outline) {
-      .card-header {
-        background-color: $color;
-        border-bottom: 0;
-
-        &,
-        a {
-          color: color-yiq($color);
-        }
-      }
-    }
-
-    &.card-outline {
-      border-top: 3px solid $color;
-    }
-  }
-
-  .bg-#{$name},
-  .bg-#{$name}-gradient,
-  .card-#{$name}:not(.card-outline) {
-    .btn-tool {
-      color: rgba(color-yiq($color), 0.8);
-
-      &:hover {
-        color: color-yiq($color);
-      }
-    }
-  }
-
-  .card.bg-#{$name},
-  .card.bg-#{$name}-gradient {
-    .bootstrap-datetimepicker-widget {
-      .table td,
-      .table th {
-        border: none;
-      }
-
-      table thead tr:first-child th:hover,
-      table td.day:hover,
-      table td.hour:hover,
-      table td.minute:hover,
-      table td.second:hover {
-        background: darken($color, 8%);
-        color: color-yiq($color);
-      }
+  @include cards-variant($name, $color);
+}
 
-      table td.active,
-      table td.active:hover {
-        background: lighten($color, 10%);
-        color: color-yiq($color);
-      }
-    }
-  }
+@each $name, $color in $colors {
+  @include cards-variant($name, $color);
 }

build/scss/_carousel.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Carousel
- * -------------------
- */
+//
+// Component: Carousel
+//
 
 .carousel-control {
   &.left,

build/scss/_colors.scss

@@ -1,74 +1,15 @@
-/*
- * Misc: Colors
- * ------------
- */
+//
+// Misc: Colors
+//
 
 // Background colors (theme colors)
 @each $name, $color in $theme-colors {
-  .bg-#{$name} {
-    &,
-    > a {
-      color: color-yiq($color) !important;
-    }
-
-    &.btn {
-      &.disabled,
-      &:disabled,
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-image: none !important;
-      }
-
-      &:hover {
-        @include bg-gradient-variant('&', darken($color, 7.5%));
-        border-color: darken($color, 10%);
-        color: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-variant($name, $color);
 }
 
 // Background colors (colors)
 @each $name, $color in $colors {
-  .bg-#{$name} {
-    background-color: #{$color};
-
-    &,
-    > a {
-      color: color-yiq($color) !important;
-    }
-
-    &.btn {
-      &.disabled,
-      &:disabled,
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-image: none !important;
-      }
-
-      &:hover {
-        @include bg-gradient-variant('&', darken($color, 7.5%));
-        border-color: darken($color, 10%);
-        color: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-variant($name, $color);
 }
 
 .bg-gray {
@@ -93,64 +34,12 @@
 
 // Gradient Background colors (theme colors)
 @each $name, $color in $theme-colors {
-  .bg-gradient-#{$name} {
-    @include bg-gradient-variant('&', $color);
-    color: color-yiq($color);
-
-    &.btn {
-      &.disabled,
-      &:disabled,
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-image: none !important;
-      }
-
-      &:hover {
-        @include bg-gradient-variant('&', darken($color, 7.5%));
-        border-color: darken($color, 10%);
-        color: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-gradient-variant($name, $color);
 }
 
 // Gradient Background colors (colors)
 @each $name, $color in $colors {
-  .bg-gradient-#{$name} {
-    @include bg-gradient-variant('&', $color);
-    color: color-yiq($color);
-
-    &.btn {
-      &.disabled,
-      &:disabled,
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-image: none !important;
-      }
-
-      &:hover {
-        @include bg-gradient-variant('&', darken($color, 7.5%));
-        border-color: darken($color, 10%);
-        color: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-gradient-variant($name, $color);
 }
 
 // Backgrund Color Disabled

build/scss/_control-sidebar.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Control Sidebar
- * --------------------------
- */
+//
+// Component: Control Sidebar
+//
  
 html.control-sidebar-animate {
   overflow-x: hidden;
@@ -150,6 +149,6 @@ html.control-sidebar-animate {
   //  Background
   & {
     background: $sidebar-light-bg;
-    border-left: 1px solid $gray-500;
+    border-left: $main-header-bottom-border;
   }
 }

build/scss/_direct-chat.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Direct Chat
- * ----------------------
- */
+//
+// Component: Direct Chat
+//
  
 .direct-chat {
   .card-body {
@@ -100,7 +99,7 @@
   }
 }
 
-.direct-chat-info {
+.direct-chat-infos {
   display: block;
   font-size: $font-size-sm;
   margin-bottom: 2px;
@@ -144,7 +143,7 @@
     padding: 10px;
 
     &:last-of-type {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 }
@@ -182,23 +181,15 @@
   color: darken($gray-500, 25%);
 }
 
-//Direct Chat Variants
-.direct-chat-danger {
-  @include direct-chat-variant(theme-color('danger'));
-}
-
-.direct-chat-primary {
-  @include direct-chat-variant(theme-color('primary'));
-}
-
-.direct-chat-warning {
-  @include direct-chat-variant(theme-color('warning'));
-}
-
-.direct-chat-info {
-  @include direct-chat-variant(theme-color('info'));
+// Color variants
+@each $name, $color in $theme-colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
 }
 
-.direct-chat-success {
-  @include direct-chat-variant(theme-color('success'));
+@each $name, $color in $colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
 }

build/scss/_dropdown.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Dropdown
- * -------------------
- */
+//
+// Component: Dropdown
+//
 
 // General Dropdown Rules
 //.dropdown-item {
@@ -38,6 +37,26 @@
   }
 }
 
+// Dropdown Sizes
+.dropdown-menu-xl {
+  max-width: 420px;
+  min-width: 360px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
+  }
+}
+
 // Dropdown header and footer
 .dropdown-footer,
 .dropdown-header {
@@ -47,8 +66,8 @@
   text-align: center;
 }
 
-/* Add fade animation to dropdown menus by appending
- the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
+// Add fade animation to dropdown menus by appending 
+// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
 .open:not(.dropup) > .animated-dropdown-menu {
   @include animation(flipInX .7s both);
   backface-visibility: visible !important;
@@ -80,33 +99,7 @@
   }
 }
 
-@-webkit-keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    -webkit-transition-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    -webkit-transition-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-  }
-}
-
-/* Fix dropdown menu in navbars */
+// Fix dropdown menu in navbars
 .navbar-custom-menu > .navbar-nav {
   > li {
     position: relative;
@@ -134,11 +127,12 @@
   }
 }
 
-/* User Menu */
+// User Menu
 .navbar-nav > .user-menu {
   > .nav-link:after {
     content:none;
   }
+
   > .dropdown-menu {
     @include border-top-radius(0);
     padding: 0;
@@ -149,12 +143,13 @@
     > .user-body {
       @include border-bottom-radius(4px);
     }
-    
+
     // Header menu
     > li.user-header {
       height: 175px;
       padding: 10px;
       text-align: center;
+
       // User image
       > img {
         z-index: 5;
@@ -164,11 +159,13 @@
         border-color: transparent;
         border-color: rgba(255, 255, 255, 0.2);
       }
+
       > p {
         z-index: 5;
         font-size: 17px;
         //text-shadow: 2px 2px 3px #333333;
         margin-top: 10px;
+
         > small {
           display: block;
           font-size: 12px;
@@ -178,46 +175,50 @@
 
     // Menu Body
     > .user-body {
-      padding: 15px;
-      border-bottom: 1px solid #f4f4f4;
-      border-top: 1px solid #dddddd;
       @include clearfix;
+      border-bottom: 1px solid $gray-700;
+      border-top: 1px solid $gray-300;
+      padding: 15px;
+
       a {
-        color: #444 !important;
         @include media-breakpoint-up(sm) {
-          background: #fff !important;
-          color: #444 !important;
+          background: $white !important;
+          color: $gray-700 !important;
         }
       }
     }
 
     // Menu Footer
     > .user-footer {
-      background-color: #f9f9f9;
-      padding: 10px;
       @include clearfix;
+      background-color: $gray-100;
+      padding: 10px;
+
       .btn-default {
-        color: #666666;
+        color: $gray-600;
+
         &:hover {
           @include media-breakpoint-up(sm) {
-            background-color: #f9f9f9;
+            background-color: $gray-100;
           }
         }
       }
     }
   }
+
   .user-image {
-    float: left;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    margin-right: 10px;
-    margin-top: -2px;
     @include media-breakpoint-up(sm) {
       float: none;
+      line-height: 10px;
       margin-right: 0;
       margin-top: -8px;
-      line-height: 10px;
     }
+
+    border-radius: 50%;
+    float: left;
+    height: 25px;
+    margin-right: 10px;
+    margin-top: -2px;
+    width: 25px;
   }
 }

build/scss/_elevation.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Elevation
- * --------------------
- */
+//
+// Component: Elevation
+//
 
 .elevation-0 {
   box-shadow: none !important;

build/scss/_forms.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Forms
- * ----------------
- */
+//
+// Component: Forms
+//
  
 .form-group {
   &.has-icon {
@@ -28,7 +27,8 @@
 // Button groups
 .btn-group-vertical {
   .btn {
-    &.btn-flat:first-of-type, &.btn-flat:last-of-type {
+    &.btn-flat:first-of-type,
+    &.btn-flat:last-of-type {
       @include border-radius(0);
     }
   }
@@ -257,113 +257,21 @@ textarea.form-control {
 // custom switch color variations
 .custom-switch {
   @each $name, $color in $theme-colors {
-    &.custom-switch-off-#{$name} {
-      & .custom-control-input ~ .custom-control-label::before {
-        background: #{$color};
-        border-color: darken($color, 20%);
-      }
-
-      & .custom-control-input ~ .custom-control-label::after {
-        background: darken($color, 25%);
-      }
-    }
-
-    &.custom-switch-on-#{$name} {
-      & .custom-control-input:checked ~ .custom-control-label::before {
-        background: #{$color};
-        border-color: darken($color, 20%);
-      }
-
-      & .custom-control-input:checked ~ .custom-control-label::after {
-        background: lighten($color, 30%);
-      }
-    }
+    @include custom-switch-variant($name, $color);
   }
 
   @each $name, $color in $colors {
-    &.custom-switch-off-#{$name} {
-      & .custom-control-input ~ .custom-control-label::before {
-        background: #{$color};
-        border-color: darken($color, 20%);
-      }
-
-      & .custom-control-input ~ .custom-control-label::after {
-        background: darken($color, 25%);
-      }
-    }
-
-    &.custom-switch-on-#{$name} {
-      & .custom-control-input:checked ~ .custom-control-label::before {
-        background: #{$color};
-        border-color: darken($color, 20%);
-      }
-
-      & .custom-control-input:checked ~ .custom-control-label::after {
-        background: lighten($color, 30%);
-      }
-    }
+    @include custom-switch-variant($name, $color);
   }
 }
 
 // custom range color variations
 .custom-range {
   @each $name, $color in $theme-colors {
-    &.custom-range-#{$name} {
-      &:focus {
-        &::-webkit-slider-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-moz-range-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-ms-thumb {
-          background-color: lighten($color, 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-      }
-
-      &::-moz-range-thumb {
-        background-color: $color;
-      }
-
-      &::-ms-thumb {
-        background-color: $color;
-      }
-    }
+    @include custom-range-variant($name, $color);
   }
 
   @each $name, $color in $colors {
-    &.custom-range-#{$name} { 
-      &:focus {
-        &::-webkit-slider-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-moz-range-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-ms-thumb {
-          background-color: lighten($color, 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-      }
-
-      &::-moz-range-thumb {
-        background-color: $color;
-      }
-
-      &::-ms-thumb {
-        background-color: $color;
-      }
-    }
+    @include custom-range-variant($name, $color);
   }
 }

build/scss/_info-box.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Info Box
- * -------------------
- */
+//
+// Component: Info Box
+//
  
 .info-box {
   @extend .d-flex;
@@ -12,9 +11,10 @@
   background: $white;
   min-height: 80px;
   padding: .5rem;
+  position: relative;
 
   .progress {
-    background-color: rgba($black, 0.125);
+    background-color: rgba($black, .125);
     height: 2px;
     margin: 5px 0;
 
@@ -105,7 +105,7 @@
     .col-lg-2 &,
     .col-md-2 & {
       .progress-description {
-        @include font-size(0.75rem);
+        @include font-size(.75rem);
         display: block;
       }
     }
@@ -114,7 +114,7 @@
     .col-lg-3 &,
     .col-md-3 & {
       .progress-description {
-        @include font-size(0.75rem);
+        @include font-size(.75rem);
         display: block;
       }
     }

build/scss/_labels.scss

@@ -1,29 +0,0 @@
-/*
- * Component: Labels
- * -----------------
- */
-
-.label-default {
-  background-color: $gray-500;
-  color: $gray-700;
-}
-
-.label-danger {
-  @extend .bg-danger;
-}
-
-.label-info {
-  @extend .bg-info;
-}
-
-.label-warning {
-  @extend .bg-warning;
-}
-
-.label-primary {
-  @extend .bg-primary;
-}
-
-.label-success {
-  @extend .bg-success;
-}

build/scss/_layout.scss

@@ -1,7 +1,6 @@
-/*
- * Core: Layout
- * ------------
- */
+//
+// Core: Layout
+//
 
 html {
   scroll-behavior: smooth;
@@ -21,7 +20,7 @@ body,
   }
 
   .layout-boxed & {
-    @include box-shadow(0 0 10px rgba($black, .3));
+    @include box-shadow(0 0 10 rgba($black, .3));
 
     &,
     &::before {
@@ -40,6 +39,13 @@ body,
     }
   }
 
+  .layout-navbar-fixed.sidebar-collapse & {
+    .brand-link {
+      height: $main-header-height;
+      width: $sidebar-mini-width;
+    }
+  }
+
   .layout-navbar-fixed & {
     a.anchor {
       display: block;
@@ -47,18 +53,10 @@ body,
       top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
     }
 
-    &.sidebar-collapse {
+    .main-sidebar:hover {
       .brand-link {
-        height: $main-header-height;
         transition: width $transition-speed $transition-fn;
-        width: $sidebar-mini-width;
-      }
-
-      .main-sidebar:hover {
-        .brand-link {
-          transition: width $transition-speed $transition-fn;
-          width: $sidebar-width;
-        }
+        width: $sidebar-width;
       }
     }
 
@@ -102,7 +100,7 @@ body,
 
     .sidebar,
     .content-wrapper {
-      margin-top: 0px;
+      margin-top: 0;
     }
 
     .main-header {
@@ -182,7 +180,7 @@ body,
 
         .sidebar,
         .content-wrapper {
-          margin-top: 0px;
+          margin-top: 0;
         }
 
         .main-header {
@@ -209,7 +207,7 @@ body,
     }
 
     .content-wrapper {
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
   }
 
@@ -335,6 +333,10 @@ body,
 }
 
 .layout-fixed {
+  .brand-link {
+    width: $sidebar-width;
+  }
+
   .main-sidebar {
     bottom: 0;
     float: none;

build/scss/_main-header.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Main Header
- * ----------------------
- */
+//
+// Component: Main Header
+//
  
 .main-header {
   border-bottom: $main-header-bottom-border;
@@ -79,19 +78,6 @@
       color: $main-header-dark-placeholder-color;
     }
 
-    // Support FF and IE
-    :-moz-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
-    ::-moz-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
-    :-ms-input-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
     &:focus {
       &,
       & + .input-group-append .btn-navbar {
@@ -111,24 +97,14 @@
   }
 
   .form-control-navbar {
+    &:ms-placeholder,
+    &:moz-placeholder,
+    &::moz-placeholder,
     &::placeholder,
     + .input-group-append > .btn-navbar {
       color: $main-header-light-placeholder-color;
     }
 
-    // Support FF and IE
-    :-moz-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
-    ::-moz-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
-    :-ms-input-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
     &:focus {
       &,
       & + .input-group-append .btn-navbar {

build/scss/_main-sidebar.scss

@@ -1,7 +1,6 @@
-/**
- * Component: Main Sidebar
- * -----------------------
- */
+//
+// Component: Main Sidebar
+//
 
 .main-sidebar {
   height: 100vh;
@@ -62,7 +61,7 @@
   // All levels
   .nav-item {
     > .nav-link {
-      margin-bottom: 0.2rem;
+      margin-bottom: .2rem;
 
       .right {
         @include transition(transform $transition-fn $transition-speed);
@@ -97,11 +96,11 @@
     margin-bottom: 0;
 
     .nav-icon {
-      text-align: center;
-      width: $sidebar-nav-icon-width;
       font-size: 1.2rem;
       margin-right: .2rem;
-      
+      text-align: center;
+      width: $sidebar-nav-icon-width;
+
       &.fa,
       &.fas,
       &.far,
@@ -132,8 +131,8 @@
     }
   }
 
-  &.nav-child-indent { 
-    .nav-treeview{
+  &.nav-child-indent {
+    .nav-treeview {
       padding-left: 1rem;
     }
   }
@@ -143,7 +142,7 @@
     padding: $nav-link-padding-y;
 
     &:not(:first-of-type) {
-      padding: 1.7rem 1rem .5rem 1rem;
+      padding: 1.7rem 1rem .5rem;
     }
   }
 
@@ -154,6 +153,12 @@
 }
 
 #sidebar-overlay {
+  @include media-breakpoint-down(md) {
+    .sidebar-open & {
+      display: block;
+    }
+  }
+
   background-color: rgba($black, 0.1);
   bottom: 0;
   display: none;
@@ -162,45 +167,243 @@
   right: 0;
   top: 0;
   z-index: $zindex-main-sidebar - 1;
+}
 
-  @include media-breakpoint-down(md) {
-    .sidebar-open & {
-      display: block;
+.sidebar-mini-md {
+  &.sidebar-open {
+    #sidebar-overlay {
+      @include media-breakpoint-up(sm) {
+        display: none;
+      }
+      @include media-breakpoint-down(sm) {
+        display: block;
+      }
     }
   }
 }
 
-.sidebar-mini-md.sidebar-open {
-  #sidebar-overlay {
-    @include media-breakpoint-up(sm) {
-      display: none;
+[class*='sidebar-light-'] {
+  // Sidebar background color
+  background-color: $sidebar-light-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-light-hover-color;
     }
-    @include media-breakpoint-down(sm) {
-      display: block;
+
+    .status {
+      background: $sidebar-light-hover-bg;
+      color: $sidebar-light-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-light-hover-bg, 3%);
+        color: $sidebar-light-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-light-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
     }
   }
-}
 
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active,
+      &:focus {
+        color: $sidebar-light-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
+      background-color: $sidebar-light-hover-bg;
+      color: $sidebar-light-hover-color;
+    }
 
-// Sidebar variants
-@each $name, $color in $theme-colors {
-  .sidebar-dark-#{$name} {
-    @include skin-dark-sidebar($color)
+    > .nav-link.active {
+      color: $sidebar-light-active-color;
+
+      @if $enable-shadows {
+        @extend .elevation-1;
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-light-submenu-bg;
+    }
   }
 
-  .sidebar-light-#{$name} {
-    @include skin-light-sidebar($color)
+  // Section Heading
+  .nav-header {
+    background: inherit;
+    color: darken($sidebar-light-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-light-color;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-light-submenu-color;
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          background-color: $sidebar-light-submenu-active-bg;
+          color: $sidebar-light-submenu-active-color;
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: $sidebar-light-submenu-hover-bg;
+      }
+    }
   }
 }
 
-@each $name, $color in $colors {
-  .sidebar-dark-#{$name} {
-    @include skin-dark-sidebar($color)
+[class*='sidebar-dark-'] {
+  // Sidebar background color
+  background-color: $sidebar-dark-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-dark-hover-color;
+    }
+
+    .status {
+      background: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-dark-hover-bg, 3%);
+        color: $sidebar-dark-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-dark-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active {
+        color: $sidebar-dark-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    & > .nav-link:focus  {
+      background-color: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-dark-hover-color;
+
+      @if $enable-shadows {
+        @extend .elevation-1;
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-dark-submenu-bg;
+    }
   }
 
+  // Section Heading
+  .nav-header {
+    background: inherit; //darken($sidebar-dark-bg, 3%);
+    color: lighten($sidebar-dark-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-dark-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-hover-bg;
+          color: $sidebar-dark-submenu-hover-color;
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-active-bg;
+          color: $sidebar-dark-submenu-active-color;
+        }
+      }
+    }
+  }
+}
+
+// Sidebar variants
+@each $name, $color in $theme-colors {
+  .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include skin-light-sidebar($color)
+    @include sidebar-color($color)
   }
 }
 
+@each $name, $color in $colors {
+  .sidebar-dark-#{$name},
+  .sidebar-light-#{$name} {
+    @include sidebar-color($color)
+  }
+}
 

build/scss/_miscellaneous.scss

@@ -1,7 +1,6 @@
-/*
- * Misc: Miscellaneous
- * -------------------
- */
+//
+// Misc: Miscellaneous
+//
 
 .border-transparent {
   border-color: transparent !important;
@@ -27,10 +26,8 @@
   > .description-text {
     text-transform: uppercase;
   }
-}
 
-// Description Block Extension
-.description-block {
+  // Description Block Extension
   .description-icon {
     font-size: 16px;
   }
@@ -57,7 +54,7 @@
 .list-seperator {
   background: $card-border-color;
   height: 1px;
-  margin: 15px 0 9px 0;
+  margin: 15px 0 9px;
 }
 
 .list-link {
@@ -237,7 +234,7 @@
   }
 
   .attachment-text {
-    color: #555;
+    color: $gray-700;
   }
 }
 
@@ -295,16 +292,16 @@
   position: absolute;
   right: -2px;
   top: -2px;
-  z-index: 10;
   width: $ribbon-wrapper-size;
+  z-index: 10;
 
   &.ribbon-lg {
     height: $ribbon-lg-wrapper-size;
     width: $ribbon-lg-wrapper-size;
 
     .ribbon {
-      top: $ribbon-lg-top;
       right: $ribbon-lg-right;
+      top: $ribbon-lg-top;
       width: $ribbon-lg-width;
     }
   }
@@ -314,8 +311,8 @@
     width: $ribbon-xl-wrapper-size;
 
     .ribbon {
-      top: $ribbon-xl-top;
       right: $ribbon-xl-right;
+      top: $ribbon-xl-top;
       width: $ribbon-xl-width;
     }
   }
@@ -340,7 +337,7 @@
       border-right: $ribbon-border-size solid transparent;
       border-top: $ribbon-border-size solid #9e9e9e;
       bottom: -$ribbon-border-size;
-      content: "";
+      content: '';
       position: absolute;
     }
 
@@ -426,3 +423,20 @@ blockquote {
     }
   }
 }
+
+
+// Tab Custom Content
+
+.tab-custom-content {
+  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
+  margin-top: .5rem;
+  padding-top: .5rem;
+}
+
+.nav + .tab-custom-content {
+  border-top: none;
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  margin-top: 0;
+  margin-bottom: .5rem;
+  padding-bottom: .5rem;
+}

build/scss/_mixins.scss

@@ -1,12 +1,216 @@
-/*
- * General: Mixins
- * ---------------
- */
+//
+// General: Mixins
+//
 
-// Changes the color and the hovering properties of the navbar
+
+// Cards Variant
+@mixin cards-variant($name, $color) {
+  .card-#{$name} {
+    &:not(.card-outline) {
+      .card-header {
+        background-color: $color;
+        border-bottom: 0;
+
+        &,
+        a {
+          color: color-yiq($color);
+        }
+      }
+    }
+
+    &.card-outline {
+      border-top: 3px solid $color;
+    }
+  }
+
+  .bg-#{$name},
+  .bg-#{$name}-gradient,
+  .card-#{$name}:not(.card-outline) {
+    .btn-tool {
+      color: rgba(color-yiq($color), 0.8);
+
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .card.bg-#{$name},
+  .card.bg-#{$name}-gradient {
+    .bootstrap-datetimepicker-widget {
+      .table td,
+      .table th {
+        border: none;
+      }
+
+      table thead tr:first-child th:hover,
+      table td.day:hover,
+      table td.hour:hover,
+      table td.minute:hover,
+      table td.second:hover {
+        background: darken($color, 8%);
+        color: color-yiq($color);
+      }
+
+      table td.active,
+      table td.active:hover {
+        background: lighten($color, 10%);
+        color: color-yiq($color);
+      }
+    }
+  }
+}
+
+// Sidebar Color
+@mixin sidebar-color($color) {
+  .nav-sidebar > .nav-item {
+    & > .nav-link.active {
+      background-color: $color;
+      color: color-yiq($color);
+    }
+  }
+}
+
+// Sidebar Mini Breakpoints
+@mixin sidebar-mini-breakpoint() {
+  // A fix for text overflow while transitioning from sidebar mini to full sidebar
+  .nav-sidebar,
+  .nav-sidebar > .nav-header,
+  .nav-sidebar .nav-link {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  // When the sidebar is collapsed...
+  &.sidebar-collapse {
+    .d-hidden-mini {
+      display: none;
+    }
+
+    // Apply the new margins to the main content and footer
+    .content-wrapper,
+    .main-footer,
+    .main-header {
+      margin-left: $sidebar-mini-width !important;
+    }
+
+    // Make the sidebar headers
+    .nav-sidebar .nav-header {
+      display: none;
+    }
+
+    .nav-sidebar .nav-link p {
+      width: 0;
+    }
+
+    .sidebar .user-panel > .info,
+    .nav-sidebar .nav-link p,
+    .brand-text {
+      margin-left: -10px;
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .logo-xl {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .logo-xs {
+      display: inline-block;
+      opacity: 1;
+      visibility: visible;
+    }
+
+    // Modify the sidebar to shrink instead of disappearing
+    .main-sidebar {
+      overflow-x: hidden;
+
+      &,
+      &::before {
+        // Don't go away! Just shrink
+        margin-left: 0;
+        width: $sidebar-mini-width;
+      }
+
+      .user-panel {
+        .image {
+          float: none;
+        }
+      }
+
+      &:hover,
+      &.sidebar-focused {
+        width: $sidebar-width;
+
+        .brand-link {
+          width: $sidebar-width;
+        }
+
+        .user-panel {
+          text-align: left;
+
+          .image {
+            float: left;
+          }
+        }
+
+        .user-panel > .info,
+        .nav-sidebar .nav-link p,
+        .brand-text,
+        .logo-xl {
+          display: inline-block;
+          margin-left: 0;
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .logo-xs {
+          opacity: 0;
+          visibility: hidden;
+        }
+
+        .brand-image {
+          margin-right: .5rem;
+        }
+
+        // Make the sidebar links, menus, labels, badges
+        // and angle icons disappear
+        .sidebar-form,
+        .user-panel > .info {
+          display: block !important;
+          -webkit-transform: translateZ(0);
+        }
+
+        .nav-sidebar > .nav-item > .nav-link > span {
+          display: inline-block !important;
+        }
+      }
+    }
+
+    // Make an element visible only when sidebar mini is active
+    .visible-sidebar-mini {
+      display: block !important;
+    }
+
+    &.layout-fixed {
+      .main-sidebar:hover {
+        .brand-link {
+          width: $sidebar-width;
+        }
+      }
+
+      .brand-link {
+        width: $sidebar-mini-width;
+      }
+    }
+  }
+}
+
+// Navbar Variant
 @mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
   background-color: $color;
-  // Navbar links
+
   .nav > li > a {
     color: $font-color;
   }
@@ -25,6 +229,7 @@
   // Add color to the sidebar toggle button
   .sidebar-toggle {
     color: $font-color;
+
     &:hover,
     &:focus {
       background: $hover-bg;
@@ -33,7 +238,7 @@
   }
 }
 
-// Logo color variation
+// Logo color Variant
 @mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
   background-color: $bg-color;
   border-bottom: $border-bottom-width solid $border-bottom-color;
@@ -45,22 +250,6 @@
   }
 }
 
-// Box solid color variantion creator
-@mixin box-solid-variant($color, $text-color: #fff) {
-  border: 1px solid $color;
-
-  > .card-header {
-    background: $color;
-    background-color: $color;
-    color: $text-color;
-
-    a,
-    .btn {
-      color: $text-color;
-    }
-  }
-}
-
 // Direct Chat Variant
 @mixin direct-chat-variant($bg-color, $color: #fff) {
   .right > .direct-chat-text {
@@ -68,253 +257,168 @@
     border-color: $bg-color;
     color: color-yiq($bg-color);
 
-    &:after,
+    &::after,
     &::before {
       border-left-color: $bg-color;
     }
   }
 }
 
-@mixin translate($x, $y) {
-  transform: translate($x, $y);
-}
-
-// Different radius each side
-@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
-  border-radius: $top-left $top-right $bottom-left $bottom-right;
-}
-
-@mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
-  #{$property}: calc(#{$expression});
-}
-
-@mixin rotate($value) {
-  -ms-transform: rotate($value);
-  transform: rotate($value);
-}
+// Background Variant
+@mixin background-variant($name, $color) {
+  .bg-#{$name} {
+    background-color: #{$color};
 
-@mixin animation($animation) {
-  animation: $animation;
-}
-
-// Gradient background
-@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
-  background: $color;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
-  background: -ms-linear-gradient(bottom, $start, $stop);
-  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
-  background: -o-linear-gradient($stop, $start);
-}
-
-// Skins Mixins
-
-// Dark Sidebar Mixin
-@mixin skin-dark-sidebar($link-hover-border-color) {
-  // Sidebar background color
-  background-color: $sidebar-dark-bg;
-
-  // User Panel (resides in the sidebar)
-  .user-panel {
-    a:hover {
-      color: $sidebar-dark-hover-color;
+    &,
+    > a {
+      color: color-yiq($color) !important;
     }
 
-    .status {
-      background: $sidebar-dark-hover-bg;
-      color: $sidebar-dark-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: darken($sidebar-dark-hover-bg, 3%);
-        color: $sidebar-dark-hover-color;
+    &.btn {
+      &:hover {
+        border-color: darken($color, 10%);
+        color: color-yiq(darken($color, 7.5%));
       }
-    }
-
-    .dropdown-menu {
-      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
-      border-color: darken($sidebar-dark-hover-bg, 5%);
-    }
 
-    .dropdown-item {
-      color: $body-color;
+      &:active,
+      &.active {
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
+      }
     }
   }
+}
 
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active {
-        color: $sidebar-dark-color;
+// Background Gradient Variant
+@mixin background-gradient-variant($name, $color) {
+  .bg-gradient-#{$name} {
+    @include bg-gradient-variant('&', $color);
+    color: color-yiq($color);
+
+    &.btn {
+      &.disabled,
+      &:disabled,
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-image: none !important;
       }
-    }
 
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    & > .nav-link:focus  {
-      background-color: $sidebar-dark-hover-bg;
-      color: $sidebar-dark-hover-color;
-    }
-
-    > .nav-link.active {
-      background-color: $link-hover-border-color;
-      color: $sidebar-dark-hover-color;
+      &:hover {
+        @include bg-gradient-variant('&', darken($color, 7.5%));
+        border-color: darken($color, 10%);
+        color: color-yiq(darken($color, 7.5%));
+      }
 
-      @if $enable-shadows {
-        @extend .elevation-1;
+      &:active,
+      &.active {
+        @include bg-gradient-variant('&', darken($color, 10%));
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
       }
     }
+  }
+}
 
-    // First Level Submenu
-    > .nav-treeview {
-      background: $sidebar-dark-submenu-bg;
+// Custom Switch Variant
+@mixin custom-switch-variant($name, $color) {
+  &.custom-switch-off-#{$name} {
+    & .custom-control-input ~ .custom-control-label::before {
+      background: #{$color};
+      border-color: darken($color, 20%);
     }
-  }
 
-  // Section Heading
-  .nav-header {
-    background: inherit; //darken($sidebar-dark-bg, 3%);
-    color: lighten($sidebar-dark-color, 5%);
+    & .custom-control-input ~ .custom-control-label::after {
+      background: darken($color, 25%);
+    }
   }
 
-  // All links within the sidebar menu
-  .sidebar a {
-    color: $sidebar-dark-color;
+  &.custom-switch-on-#{$name} {
+    & .custom-control-input:checked ~ .custom-control-label::before {
+      background: #{$color};
+      border-color: darken($color, 20%);
+    }
 
-    &:hover,
-    &:focus {
-      text-decoration: none;
+    & .custom-control-input:checked ~ .custom-control-label::after {
+      background: lighten($color, 30%);
     }
   }
+}
 
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $sidebar-dark-submenu-color;
+// Custom Range Variant
+@mixin custom-range-variant($name, $color) {
+  &.custom-range-#{$name} {
+    &:focus {
+      outline: none;
 
-        &:hover,
-        &:focus {
-          background-color: $sidebar-dark-submenu-hover-bg;
-          color: $sidebar-dark-submenu-hover-color;
-        }
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
       }
 
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
-          background-color: $sidebar-dark-submenu-active-bg;
-          color: $sidebar-dark-submenu-active-color;
-        }
+      &::-moz-range-thumb     {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
       }
-    }
-  }
-}
 
-// Light Sidebar Mixin
-@mixin skin-light-sidebar($link-hover-border-color) {
-  // Sidebar background color
-  background-color: $sidebar-light-bg;
-
-  // User Panel (resides in the sidebar)
-  .user-panel {
-    a:hover {
-      color: $sidebar-light-hover-color;
+      &::-ms-thumb            {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
     }
 
-    .status {
-      background: $sidebar-light-hover-bg;
-      color: $sidebar-light-color;
+    &::-webkit-slider-thumb {
+      background-color: $color;
 
-      &:hover,
-      &:focus,
       &:active {
-        background: darken($sidebar-light-hover-bg, 3%);
-        color: $sidebar-light-hover-color;
+        background-color: lighten($color, 35%);
       }
     }
 
-    .dropdown-menu {
-      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
-      border-color: darken($sidebar-light-hover-bg, 5%);
-    }
-
-    .dropdown-item {
-      color: $body-color;
-    }
-  }
+    &::-moz-range-thumb {
+      background-color: $color;
 
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active,
-      &:focus {
-        color: $sidebar-light-color;
+      &:active {
+        background-color: lighten($color, 35%);
       }
     }
 
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      background-color: $sidebar-light-hover-bg;
-      color: $sidebar-light-hover-color;
-    }
+    &::-ms-thumb {
+      background-color: $color;
 
-    > .nav-link.active {
-      background-color: $link-hover-border-color;
-      color: $sidebar-light-active-color;
-      
-      @if $enable-shadows {
-        @extend .elevation-1;
+      &:active {
+        background-color: lighten($color, 35%);
       }
     }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background: $sidebar-light-submenu-bg;
-    }
   }
+}
 
-  // Section Heading
-  .nav-header {
-    background: inherit;
-    color: darken($sidebar-light-color, 5%);
-  }
 
-  // All links within the sidebar menu
-  .sidebar a {
-    color: $sidebar-light-color;
+// ETC
+@mixin translate($x, $y) {
+  transform: translate($x, $y);
+}
 
-    &:hover {
-      text-decoration: none;
-    }
-  }
+// Different radius each side
+@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
+  border-radius: $top-left $top-right $bottom-left $bottom-right;
+}
 
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $sidebar-light-submenu-color;
-      }
+@mixin calc($property, $expression) {
+  #{$property}: calc(#{$expression});
+}
 
-      > .nav-link.active {
-        &,
-        &:hover {
-          background-color: $sidebar-light-submenu-active-bg;
-          color: $sidebar-light-submenu-active-color;
-        }
-      }
+@mixin rotate($value) {
+  transform: rotate($value);
+}
 
-      > .nav-link:hover {
-        background-color: $sidebar-light-submenu-hover-bg;
-      }
-    }
-  }
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+// Gradient background
+@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
+  background: $color;
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
+  background: -ms-linear-gradient(bottom, $start, $stop);
+  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
+  background: -o-linear-gradient($stop, $start);
 }
+

build/scss/_modals.scss

@@ -1,8 +1,6 @@
-/*
- * Component: Modals
- * ---------
- ------
- */
+//
+// Component: Modals
+//
 
 // Overlay
 .modal-dialog {

build/scss/_navs.scss

@@ -1,16 +1,16 @@
-/*
- * Component: Nav
- * --------------
- */
+//
+// Component: Nav
+//
 
 .nav-pills {
   .nav-link {
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color('primary')
+      color: theme-color('primary');
     }
   }
+
   .nav-item {
     &.dropdown.show {
       .nav-link:hover {
@@ -60,7 +60,7 @@
 
 // Color variants
 @each $color, $value in $theme-colors {
-  @if $color==dark or $color==light {
+  @if $color == dark or $color == light {
     .navbar-#{$color} {
       background-color: $value;
     }
@@ -68,7 +68,7 @@
 }
 
 @each $color, $value in $theme-colors {
-  @if $color!=dark and $color!=light {
+  @if $color != dark and $color != light {
     .navbar-#{$color} {
       background-color: $value;
     }

build/scss/_print.scss

@@ -1,8 +1,7 @@
-/*
- * Misc: Print
- * -----------
- */
- 
+//
+// Misc: Print
+//
+
 @media print {
   //Add to elements that you do not want to show when printing
   .no-print {

build/scss/_products.scss

@@ -1,11 +1,12 @@
-/*
- * Component: Products
- * -------------------
- */
+//
+// Component: Products
+//
+
 .products-list {
   list-style: none;
   margin: 0;
   padding: 0;
+
   > .item {
     @include clearfix;
 
@@ -19,6 +20,7 @@
 
   .product-img {
     float: left;
+
     img {
       height: 50px;
       width: 50px;

build/scss/_progress-bars.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Progress Bar
- * -----------------------
- */
+//
+// Component: Progress Bar
+//
 
 //General CSS
 .progress {
@@ -59,7 +58,9 @@
 
 // Remove margins from progress bars when put in a table
 .table {
-  tr > td .progress {
-    margin: 0;
+  tr > td {
+    .progress {
+      margin: 0;
+    }
   }
 }

build/scss/_sidebar-mini.scss

@@ -1,141 +1,6 @@
-/*
- * Component: Sidebar Mini
- * -----------------------
- */
-
-// Mixin
-
-@mixin sidebar-mini-breakpoint() {
-  // A fix for text overflow while transitioning from sidebar mini to full sidebar
-  .nav-sidebar,
-  .nav-sidebar > .nav-header,
-  .nav-sidebar .nav-link {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  // When the sidebar is collapsed...
-  &.sidebar-collapse {
-    .d-hidden-mini {
-      display: none;
-    }
-
-    // Apply the new margins to the main content and footer
-    .content-wrapper,
-    .main-footer,
-    .main-header {
-      margin-left: $sidebar-mini-width !important;
-    }
-
-    // Make the sidebar headers
-    .nav-sidebar .nav-header {
-      display: none;
-    }
-
-    .nav-sidebar .nav-link p {
-      width: 0;
-    }
-
-    .sidebar .user-panel > .info,
-    .nav-sidebar .nav-link p,
-    .brand-text {
-      margin-left: -10px;
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    .logo-xl {
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    .logo-xs {
-      display: inline-block;
-      opacity: 1;
-      visibility: visible;
-    }
-
-    // Modify the sidebar to shrink instead of disappearing
-    .main-sidebar {
-      overflow-x: hidden;
-
-      &,
-      &::before {
-        // Don't go away! Just shrink
-        margin-left: 0;
-        width: $sidebar-mini-width;
-      }
-
-      .user-panel {
-        .image {
-          float: none;
-        }
-      }
-
-      &:hover, 
-      &.sidebar-focused {
-        width: $sidebar-width;
-
-        .user-panel {
-          text-align: left;
-
-          .image {
-            float: left;
-          }
-        }
-
-        .user-panel > .info,
-        .nav-sidebar .nav-link p,
-        .brand-text,
-        .logo-xl {
-          display: inline-block;
-          margin-left: 0;
-          opacity: 1;
-          visibility: visible;
-        }
-
-        .logo-xs {
-          opacity: 0;
-          visibility: hidden;
-        }
-
-        .brand-image {
-          margin-right: .5rem;
-        }
-
-        // Make the sidebar links, menus, labels, badges
-        // and angle icons disappear
-        .sidebar-form,
-        .user-panel > .info {
-          display: block !important;
-          -webkit-transform: translateZ(0);
-        }
-
-        .nav-sidebar > .nav-item > .nav-link > span {
-          display: inline-block !important;
-        }
-      }
-    }
-
-    // Make an element visible only when sidebar mini is active
-    .visible-sidebar-mini {
-      display: block !important;
-    }
-
-    &.layout-fixed {
-      .main-sidebar:hover {
-        .brand-link {
-          width: $sidebar-width;
-        }
-      }
-
-      .brand-link {
-        width: $sidebar-mini-width;
-      }
-    }
-  }
-}
-
+//
+// Component: Sidebar Mini
+//
 
 // Logo style
 .logo-xs,

build/scss/_small-box.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Small Box
- * --------------------
- */
+//
+// Component: Small Box
+//
 
 .small-box {
   @include border-radius($border-radius);
@@ -19,7 +18,6 @@
 
   > .small-box-footer {
     background: rgba($black, 0.1);
-    color: $white;
     color: rgba($white, 0.8);
     display: block;
     padding: 3px 0;
@@ -82,14 +80,15 @@
     font-size: 1rem;
 
     > small {
-      color: #f9f9f9;
+      color: $gray-100;
       display: block;
       font-size: 0.9rem;
       margin-top: 5px;
     }
   }
 
-  h3, p {
+  h3,
+  p {
     z-index: 5;
   }
 

build/scss/_social-widgets.scss

@@ -1,10 +1,10 @@
-/*
- * Component: Social Widgets
- * -------------------------
- */
+//
+// Component: Social Widgets
+//
+
 //General widget style
 .card-widget {
-  border: none;
+  border: 0;
   position: relative;
 }
 

build/scss/_table.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Table
- * ----------------
- */
+//
+// Component: Table
+//
 
 .table {
   &:not(.table-dark) {
@@ -12,7 +11,7 @@
   &.table-head-fixed {
     thead tr:nth-child(1) th {
       background-color: $white;
-      border-bottom: none;
+      border-bottom: 0;
       box-shadow: inset 0 1px 0 $table-border-color,
                   inset 0 -1px 0 $table-border-color;
       position: sticky;

build/scss/_text.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Text
- * -------------
- */
+//
+// Component: Text
+//
 
 // text modification
 .text-bold {
@@ -26,7 +25,6 @@
   font-size: $font-size-xl !important;
 }
 
-
 // text color variations
 @each $name, $color in $colors {
   .text-#{$name} {

build/scss/_timeline.scss

@@ -1,11 +1,10 @@
-/*
- * Component: Timeline
- * -------------------
- */
+//
+// Component: Timeline
+//
 
 .timeline {
   list-style: none;
-  margin: 0 0 30px 0;
+  margin: 0 0 30px;
   padding: 0;
   position: relative;
 
@@ -33,7 +32,7 @@
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
       background: $white;
-      color: #444;
+      color: $gray-700;
       margin-left: 60px;
       margin-right: 15px;
       margin-top: 0;
@@ -50,7 +49,7 @@
 
       > .timeline-header {
         border-bottom: 1px solid $card-border-color;
-        color: #555;
+        color: $gray-700;
         font-size: 16px;
         line-height: 1.1;
         margin: 0;
@@ -62,7 +61,8 @@
       }
 
       // Item body and footer
-      > .timeline-body, > .timeline-footer {
+      > .timeline-body,
+      > .timeline-footer {
         padding: 10px;
       }
 
@@ -92,7 +92,7 @@
   > .time-label {
     > span {
       @include border-radius(4px);
-      
+
       background-color: $white;
       display: inline-block;
       font-weight: 600;

build/scss/_users-list.scss

@@ -1,10 +1,10 @@
-/*
- * Component: Users List
- * ---------------------
- */
+//
+// Component: Users List
+//
 
 .users-list {
   @extend .list-unstyled;
+
   > li {
     float: left;
     padding: 10px;

build/scss/_variables.scss

@@ -1,22 +1,29 @@
-/*
- * Core: Variables
- * ---------------
- */
+//
+// Core: Variables
+//
 
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
-$navy: #001F3F !default;
-$teal: #39CCCC !default;
-$olive: #3D9970 !default;
-$lime: #01FF70 !default;
-$orange: #FF851B !default;
-$fuchsia: #F012BE !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$orange: #ff851b !default;
+$fuchsia: #f012be !default;
 $purple: #605ca8 !default;
-$maroon: #D81B60 !default;
+$maroon: #d81b60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
+$colors: map-merge((
+    'navy': $navy,
+    'olive': $olive,
+    'lime': $lime,
+    'fuchsia': $fuchsia,
+    'maroon': $maroon,
+), $colors);
+
 // LAYOUT
 // --------------------------------------------------------
 
@@ -120,7 +127,7 @@ $control-sidebar-width: $sidebar-width !default;
 
 // Cards
 // --------------------------------------------------------
-$card-border-color: #f4f4f4 !default;
+$card-border-color: $gray-100 !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
 $card-title-font-size: $font-size-lg;
 $card-title-font-weight: $font-weight-normal;
@@ -144,8 +151,8 @@ $attachment-border-radius: 3px !default;
 
 // Z-INDEX
 // --------------------------------------------------------
-$zindex-main-header: 900 !default;
-$zindex-main-sidebar: 950 !default;
+$zindex-main-header: $zindex-fixed + 2 !default;
+$zindex-main-sidebar: $zindex-fixed + 6 !default;
 $zindex-sidebar-mini-links: 010 !default;
 
 // TRANSITIONS SETTINGS
@@ -162,7 +169,7 @@ $font-size-xl: ($font-size-base * 2);
 
 // BUTTON
 // --------------------------------------------------------
-$button-default-background-color: #f4f4f4 !default;
+$button-default-background-color: $gray-100 !default;
 $button-default-color: #444 !default;
 $button-default-border-color: #ddd !default;
   

build/scss/pages/_404_500_errors.scss

@@ -1,37 +1,43 @@
-/*
- * Pages: 400 and 500 error pages
- * ------------------------------
- */
+//
+// Pages: 400 and 500 error pages
+//
  
 .error-page {
+  margin: 20px auto 0;
   width: 600px;
-  margin: 20px auto 0 auto;
+
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
+
   //For the error number e.g: 404
   > .headline {
     float: left;
     font-size: 100px;
     font-weight: 300;
+
     @include media-breakpoint-down(sm) {
       float: none;
       text-align: center;
     }
   }
+
   //For the message
   > .error-content {
+    display: block;
     margin-left: 190px;
+
     @include media-breakpoint-down(sm) {
       margin-left: 0;
     }
+
     > h3 {
-      font-weight: 300;
       font-size: 25px;
+      font-weight: 300;
+
       @include media-breakpoint-down(sm) {
         text-align: center;
       }
     }
-    display: block;
   }
 }

build/scss/pages/_e_commerce.scss

@@ -1,7 +1,6 @@
-/*
- * Pages: E-commerce
- * -----------------
- */
+//
+// Pages: E-commerce
+//
 
 // product image
 .product-image {
@@ -10,15 +9,14 @@
 }
 
 // product image thumbnails list
-.product-image-thumbs {
-  display: flex;
+.product-image-thumbs {
   align-items: stretch;
+  display: flex;
   margin-top: 2rem;
 }
 
 // product image thumbnail
-.product-image-thumb {
-
+.product-image-thumb {
   @include box-shadow($thumbnail-box-shadow);
   @include border-radius($thumbnail-border-radius);
 
@@ -40,6 +38,8 @@
 }
 
 // product share
-.product-share a {
-  margin-right: 0.5rem;
+.product-share {
+  a {
+    margin-right: .5rem;
+  }
 }

build/scss/pages/_invoice.scss

@@ -1,12 +1,11 @@
-/*
- * Pages: Invoice
- * --------------
- */
+//
+// Pages: Invoice
+//
 
 .invoice {
-  position: relative;
   background: $white;
   border: 1px solid $card-border-color;
+  position: relative;
 }
 
 .invoice-title {

build/scss/pages/_lockscreen.scss

@@ -1,66 +1,71 @@
-/*
- * Pages: Lock Screen
- * ------------------
- */
-/* ADD THIS CLASS TO THE <BODY> TAG */
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
 .lockscreen {
   background: $gray-200;
+
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
 }
 
 .lockscreen-logo {
   font-size: 35px;
-  text-align: center;
-  margin-bottom: 25px;
   font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+
   a {
-    color: #444;
+    color: $gray-700;
   }
 }
 
 .lockscreen-wrapper {
-  max-width: 400px;
   margin: 0 auto;
   margin-top: 10%;
+  max-width: 400px;
 }
 
-/* User name [optional] */
-.lockscreen .lockscreen-name {
-  text-align: center;
-  font-weight: 600;
-}
 
-/* Will contain the image and the sign in form */
+// Will contain the image and the sign in form
 .lockscreen-item {
   @include border-radius(4px);
-  padding: 0;
   background: $white;
+  margin: 10px auto 30px;
+  padding: 0;
   position: relative;
-  margin: 10px auto 30px auto;
   width: 290px;
 }
 
-/* User image */
+// User image
 .lockscreen-image {
   @include border-radius(50%);
-  position: absolute;
-  left: -10px;
-  top: -25px;
   background: $white;
+  left: -10px;
   padding: 5px;
+  position: absolute;
+  top: -25px;
   z-index: 10;
+
   > img {
     @include border-radius(50%);
-    width: 70px;
     height: 70px;
+    width: 70px;
   }
 }
 
-/* Contains the password input and the login button */
+// Contains the password input and the login button
 .lockscreen-credentials {
   margin-left: 70px;
+
   .form-control {
     border: 0;
   }
+
   .btn {
     background-color: $white;
     border: 0;

build/scss/pages/_login_and_register.scss

@@ -1,16 +1,16 @@
-/*
- * Pages: Login & Register
- * -----------------------
- */
+//
+// Pages: Login & Register
+//
 
 .login-logo,
 .register-logo {
   font-size: 35px;
-  text-align: center;
-  margin-bottom: 25px;
   font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+
   a {
-    color: #444;
+    color: $gray-700;
   }
 }
 
@@ -21,35 +21,39 @@
 
 .login-box,
 .register-box {
-  width: 360px;
   margin: 7% auto;
+  width: 360px;
+
   @media (max-width: map-get($grid-breakpoints, sm)) {
-    width: 90%;
     margin-top: 20px;
+    width: 90%;
   }
 }
 
 .login-card-body,
 .register-card-body {
   background: $white;
-  padding: 20px;
   border-top: 0;
   color: #666;
+  padding: 20px;
+
   .input-group {
     .form-control {
-      border-right: none;
+      border-right: 0;
 
       &:focus {
         box-shadow: none;
+
         & ~ .input-group-append .input-group-text {
           border-color: $input-focus-border-color;
         }
       }
-      
+
       &.is-valid {
         &:focus {
           box-shadow: none;
         }
+
         & ~ .input-group-append .input-group-text {
           border-color: $success;
         }
@@ -59,19 +63,20 @@
         &:focus {
           box-shadow: none;
         }
+
         & ~ .input-group-append .input-group-text {
           border-color: $danger;
         }
       }
     }
+
     .input-group-text {
-      color: #777;
       background-color: transparent;
-      border-left: none;
-      transition: $input-transition;
-      // Fix boostrap issue temporarily https://github.com/twbs/bootstrap/issues/25110
       border-bottom-right-radius: $border-radius !important;
+      border-left: 0;
       border-top-right-radius: $border-radius !important;
+      color: #777;
+      transition: $input-transition;
     }
   }
 }
@@ -79,8 +84,8 @@
 .login-box-msg,
 .register-box-msg {
   margin: 0;
+  padding: 0 20px 20px;
   text-align: center;
-  padding: 0 20px 20px 20px;
 }
 
 .social-auth-links {

build/scss/pages/_mailbox.scss

@@ -1,7 +1,7 @@
-/*
- * Pages: Mailbox
- * --------------
- */
+//
+// Pages: Mailbox
+//
+
 .mailbox-messages {
   > .table {
     margin: 0;
@@ -10,6 +10,7 @@
 
 .mailbox-controls {
   padding: 5px;
+
   &.with-border {
     border-bottom: 1px solid $card-border-color;
   }
@@ -18,13 +19,15 @@
 .mailbox-read-info {
   border-bottom: 1px solid $card-border-color;
   padding: 10px;
+
   h3 {
     font-size: 20px;
     margin: 0;
   }
+
   h5 {
     margin: 0;
-    padding: 5px 0 0 0;
+    padding: 5px 0 0;
   }
 }
 
@@ -40,17 +43,17 @@
 .mailbox-attachments {
   @extend .list-unstyled;
   li {
-    float: left;
-    width: 200px;
     border: 1px solid #eee;
+    float: left;
     margin-bottom: 10px;
     margin-right: 10px;
+    width: 200px;
   }
 }
 
 .mailbox-attachment-name {
-  font-weight: bold;
   color: #666;
+  font-weight: bold;
 }
 
 .mailbox-attachment-icon,
@@ -60,13 +63,14 @@
 }
 
 .mailbox-attachment-info {
+  background: $gray-100;
   padding: 10px;
-  background: #f4f4f4;
 }
 
 .mailbox-attachment-size {
   color: #999;
   font-size: 12px;
+
   > span {
     display: inline-block;
     padding-top: 0.75rem;
@@ -74,16 +78,18 @@
 }
 
 .mailbox-attachment-icon {
-  text-align: center;
-  font-size: 65px;
   color: #666;
-  padding: 20px 10px;
+  font-size: 65px;
   max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+
   &.has-img {
     padding: 0;
+
     > img {
-      max-width: 100%;
       height: auto;
+      max-width: 100%;
     }
   }
 }

build/scss/pages/_profile.scss

@@ -1,13 +1,12 @@
-/*
- * Pages: Profile
- * --------------
- */
+//
+// Pages: Profile
+//
 
 .profile-user-img {
+  border: 3px solid $gray-500;
   margin: 0 auto;
-  width: 100px;
   padding: 3px;
-  border: 3px solid $gray-500;
+  width: 100px;
 }
 
 .profile-username {
@@ -17,14 +16,16 @@
 
 .post {
   border-bottom: 1px solid $gray-500;
+  color: #666;
   margin-bottom: 15px;
   padding-bottom: 15px;
-  color: #666;
+
   &:last-of-type {
     border-bottom: 0;
     margin-bottom: 0;
     padding-bottom: 0;
   }
+
   .user-block {
     margin-bottom: 15px;
   }

build/scss/pages/_projects.scss

@@ -1,7 +1,6 @@
-/*
- * Pages: Projects
- * ---------------
- */
+//
+// Pages: Projects
+//
 
 .projects {
   td {
@@ -14,7 +13,7 @@
 
   // table avatar
   img.table-avatar,
-  .table-avatar img{
+  .table-avatar img {
     border-radius: 50%;
     display: inline;
     width: 2.5rem;

build/scss/plugins/_bootstrap-slider.scss

@@ -1,7 +1,6 @@
-/*
- * Plugin: Bootstrap Slider
- * ------------------------
- */
+//
+// Plugin: Bootstrap Slider
+//
 
 // Style override
 .slider {
@@ -14,7 +13,7 @@
 }
 
 // Colors
-@each $name, $color in $colors {
+@each $name, $color in $theme-colors {
   .slider-#{$name} .slider {
     .slider-selection {
       background: $color;
@@ -22,4 +21,10 @@
   }
 }
 
-
+@each $name, $color in $colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}

build/scss/plugins/_fullcalendar.scss

@@ -1,15 +1,15 @@
-/*
- * Plugin: Full Calendar
- * ---------------------
- */
+//
+// Plugin: Full Calendar
+//
 
 // Buttons
 .fc-button {
-  background: #f4f4f4;
+  background: $gray-100;
   background-image: none;
-  color: #444;
-  border-color: #ddd;
   border-bottom-color: #ddd;
+  border-color: #ddd;
+  color: $gray-700;
+
   &:hover,
   &:active,
   &.hover {
@@ -19,9 +19,9 @@
 
 // Calendar title
 .fc-header-title h2 {
+  color: #666;
   font-size: 15px;
   line-height: 1.6em;
-  color: #666;
   margin-left: 10px;
 }
 
@@ -39,8 +39,8 @@
 }
 
 .fc-grid {
-  width: 100%;
   border: 0;
+  width: 100%;
 }
 
 .fc-widget-header:first-of-type,
@@ -55,8 +55,8 @@
 }
 
 .fc-toolbar {
-  padding: 1rem;
   margin: 0;
+  padding: 1rem;
 }
 
 .fc-day-number {
@@ -69,13 +69,21 @@
   list-style: none;
   margin: 0;
   padding: 0;
+
   > li {
     float: left;
     font-size: 30px;
-    margin-right: 5px;
     line-height: 30px;
-    .fa {
+    margin-right: 5px;
+
+    .fa,
+    .fas,
+    .far,
+    .fab,
+    .glyphicon,
+    .ion {
       transition: transform linear .3s;
+
       &:hover {
         @include rotate(30deg);
       }
@@ -90,11 +98,11 @@
 .external-event {
   @include box-shadow($card-shadow);
 
-  padding: 5px 10px;
-  font-weight: bold;
-  margin-bottom: 4px;
   border-radius: $border-radius;
   cursor: move;
+  font-weight: bold;
+  margin-bottom: 4px;
+  padding: 5px 10px;
 
   &:hover {
     @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));

build/scss/plugins/_icheck-bootstrap.scss

@@ -1,19 +1,18 @@
-/*
- * Plugin: iCheck Bootstrap
- * ------------------------
- */
+//
+// Plugin: iCheck Bootstrap
+//
 
 // iCheck colors (theme colors)
 @each $name, $color in $theme-colors {
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
-      border-color: #{$color};
+    border-color: #{$color};
   }
 
   .icheck-#{$name} > input:first-child:checked + label::before,
   .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
-      background-color: #{$color};
-      border-color: #{$color};
+    background-color: #{$color};
+    border-color: #{$color};
   }
 }
 
@@ -21,12 +20,12 @@
 @each $name, $color in $colors {
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
-      border-color: #{$color};
+    border-color: #{$color};
   }
 
   .icheck-#{$name} > input:first-child:checked + label::before,
   .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
-      background-color: #{$color};
-      border-color: #{$color};
+    background-color: #{$color};
+    border-color: #{$color};
   }
 }

build/scss/plugins/_jqvmap.scss

@@ -1,23 +1,21 @@
-/*
- * Plugins: JQVMap
- * ---------------
- */
+//
+// Plugins: JQVMap
+//
 
 // Zoom Button size fixes
 .jqvmap-zoomin,
 .jqvmap-zoomout {
-    background-color: $button-default-background-color;
-    color: $button-default-color;
-    border: 1px solid $button-default-border-color;
-    border-radius: $btn-border-radius;
-
-    width: 15px;
-    height: 15px;
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  border-radius: $btn-border-radius;
+  color: $button-default-color;
+  height: 15px;
+  width: 15px;
 
   &:hover,
   &:active,
   &.hover {
-    color: darken($button-default-color, 10%);
     background-color: darken($button-default-background-color, 5%);
+    color: darken($button-default-color, 10%);
   }
 }

build/scss/plugins/_mapael.scss

@@ -1,7 +1,6 @@
-/*
- * Plugins: jQuery Mapael
- * ----------------------
- */
+//
+// Plugins: jQuery Mapael
+//
 
 .mapael {
   .map {
@@ -10,6 +9,8 @@
 
   .mapTooltip {
     @include reset-text();
+    @include border-radius($tooltip-border-radius);
+    @include font-size($tooltip-font-size);
     background-color: $tooltip-bg;
     color: $tooltip-color;
     display: block;
@@ -19,50 +20,44 @@
     text-align: center;
     word-wrap: break-word;
     z-index: $zindex-tooltip;
-    @include border-radius($tooltip-border-radius);
-    @include font-size($tooltip-font-size);
   }
 
   .myLegend {
-    background-color: #f4f4e8;
-    border: 1px solid #bebeb4;
+    background-color: $gray-100;
+    border: 1px solid $gray-500;
     padding: 10px;
     width: 600px;
   }
 
   .zoomButton {
-    border-radius: $btn-border-radius;
     background-color: $button-default-background-color;
-    color: $button-default-color;
     border: 1px solid $button-default-border-color;
-    padding-left: 1px;
-    width: 16px;
+    border-radius: $btn-border-radius;
+    color: $button-default-color;
+    cursor: pointer;
+    font-weight: bold;
     height: 16px;
+    left: 10px;
     line-height: 14px;
-    text-align: center;
-    cursor: pointer;
+    padding-left: 1px;
     position: absolute;
+    text-align: center;
     top: 0;
-    font-weight: bold;
-    left: 10px;
 
-    -webkit-user-select: none;
-    -khtml-user-select : none;
-    -moz-user-select: none;
-    -o-user-select : none;
     user-select: none;
+    width: 16px;
 
     &:hover,
     &:active,
     &.hover {
-      color: darken($button-default-color, 10%);
       background-color: darken($button-default-background-color, 5%);
+      color: darken($button-default-color, 10%);
     }
   }
 
   .zoomReset {
-    top: 10px;
     line-height: 12px;
+    top: 10px;
   }
 
   .zoomIn {

build/scss/plugins/_miscellaneous.scss

@@ -1,8 +1,7 @@
-/*
- * Plugins: Miscellaneous
- * ----------------------
- * Old plugin codes
- */
+//
+// Plugins: Miscellaneous
+// Old plugin codes
+//
 
 // _fix for sparkline tooltip
 .jqstooltip {

build/scss/plugins/_select2.scss

@@ -1,7 +1,6 @@
-/*
- * Plugin: Select2
- * ---------------
- */
+//
+// Plugin: Select2
+//
 
 //Signle select
 .select2-container--default,

build/scss/plugins/_sweetalert2.scss

@@ -1,34 +1,38 @@
-/*
- * Plugin: SweetAlert2
- * -------------------
- */
+//
+// Plugin: SweetAlert2
+//
 
 // Icon Colors
 .swal2-icon {
   &.swal2-info {
-    color: $info;
     border-color: ligthen($info, 20%);
+    color: $info;
   }
+
   &.swal2-warning {
-    color: $warning;
     border-color: ligthen($warning, 20%);
+    color: $warning;
   }
+
   &.swal2-error {
-    color: $danger;
     border-color: ligthen($danger, 20%);
+    color: $danger;
   }
+
   &.swal2-question {
-    color: $secondary;
     border-color: ligthen($secondary, 20%);
+    color: $secondary;
   }
+
   &.swal2-success {
-    color: $success;
     border-color: ligthen($success, 20%);
-    
+    color: $success;
+
     .swal2-success-ring {
       border-color: ligthen($success, 20%);
     }
-    [class^="swal2-success-line"] {
+
+    [class^='swal2-success-line'] {
       background-color: $success;
     }
   }

build/scss/plugins/_toastr.scss

@@ -1,7 +1,6 @@
-/*
- * Plugin: Toastr
- * --------------
- */
+//
+// Plugin: Toastr
+//
 
 // Background to FontAwesome Icons
 // #toast-container > .toast {
@@ -35,15 +34,19 @@
 .toast {
   background-color: $primary;
 }
+
 .toast-success {
   background-color: $success;
 }
+
 .toast-error {
   background-color: $danger;
 }
+
 .toast-info {
   background-color: $info;
 }
+
 .toast-warning {
   background-color: $warning;
 }

dist/js/adminlte.js

@@ -680,6 +680,209 @@
 
   /**
    * --------------------------------------------
+   * AdminLTE DirectChat.js
+   * License MIT
+   * --------------------------------------------
+   */
+  var DirectChat = function ($) {
+    /**
+     * Constants
+     * ====================================================
+     */
+    var NAME = 'DirectChat';
+    var DATA_KEY = 'lte.directchat';
+    var JQUERY_NO_CONFLICT = $.fn[NAME];
+    var Selector = {
+      DATA_TOGGLE: '[data-widget="chat-pane-toggle"]',
+      DIRECT_CHAT: '.direct-chat'
+    };
+    var ClassName = {
+      DIRECT_CHAT_OPEN: 'direct-chat-contacts-open'
+    };
+    /**
+     * Class Definition
+     * ====================================================
+     */
+
+    var DirectChat =
+    /*#__PURE__*/
+    function () {
+      function DirectChat(element, config) {
+        this._element = element;
+      }
+
+      var _proto = DirectChat.prototype;
+
+      _proto.toggle = function toggle() {
+        $(this._element).parents(Selector.DIRECT_CHAT).first().toggleClass(ClassName.DIRECT_CHAT_OPEN);
+      } // Static
+      ;
+
+      DirectChat._jQueryInterface = function _jQueryInterface(config) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          if (!data) {
+            data = new DirectChat($(this));
+            $(this).data(DATA_KEY, data);
+          }
+
+          data[config]();
+        });
+      };
+
+      return DirectChat;
+    }();
+    /**
+     *
+     * Data Api implementation
+     * ====================================================
+     */
+
+
+    $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+      if (event) event.preventDefault();
+
+      DirectChat._jQueryInterface.call($(this), 'toggle');
+    });
+    /**
+     * jQuery API
+     * ====================================================
+     */
+
+    $.fn[NAME] = DirectChat._jQueryInterface;
+    $.fn[NAME].Constructor = DirectChat;
+
+    $.fn[NAME].noConflict = function () {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return DirectChat._jQueryInterface;
+    };
+
+    return DirectChat;
+  }(jQuery);
+
+  /**
+   * --------------------------------------------
+   * AdminLTE TodoList.js
+   * License MIT
+   * --------------------------------------------
+   */
+  var TodoList = function ($) {
+    /**
+     * Constants
+     * ====================================================
+     */
+    var NAME = 'TodoList';
+    var DATA_KEY = 'lte.todolist';
+    var JQUERY_NO_CONFLICT = $.fn[NAME];
+    var Selector = {
+      DATA_TOGGLE: '[data-widget="todo-list"]'
+    };
+    var ClassName = {
+      TODO_LIST_DONE: 'done'
+    };
+    var Default = {
+      onCheck: function onCheck(item) {
+        return item;
+      },
+      onUnCheck: function onUnCheck(item) {
+        return item;
+      }
+      /**
+       * Class Definition
+       * ====================================================
+       */
+
+    };
+
+    var TodoList =
+    /*#__PURE__*/
+    function () {
+      function TodoList(element, config) {
+        this._config = config;
+        this._element = element;
+
+        this._init();
+      } // Public
+
+
+      var _proto = TodoList.prototype;
+
+      _proto.toggle = function toggle(item) {
+        item.parents('li').toggleClass(ClassName.TODO_LIST_DONE);
+
+        if (!$(item).prop('checked')) {
+          this.unCheck($(item));
+          return;
+        }
+
+        this.check(item);
+      };
+
+      _proto.check = function check(item) {
+        this._config.onCheck.call(item);
+      };
+
+      _proto.unCheck = function unCheck(item) {
+        this._config.onUnCheck.call(item);
+      } // Private
+      ;
+
+      _proto._init = function _init() {
+        var that = this;
+        $(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE);
+        $(Selector.DATA_TOGGLE).on('change', 'input:checkbox', function (event) {
+          that.toggle($(event.target));
+        });
+      } // Static
+      ;
+
+      TodoList._jQueryInterface = function _jQueryInterface(config) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          var _config = $.extend({}, Default, $(this).data());
+
+          if (!data) {
+            data = new TodoList($(this), _config);
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (config === 'init') {
+            data[config]();
+          }
+        });
+      };
+
+      return TodoList;
+    }();
+    /**
+     * Data API
+     * ====================================================
+     */
+
+
+    $(window).on('load', function () {
+      TodoList._jQueryInterface.call($(Selector.DATA_TOGGLE));
+    });
+    /**
+     * jQuery API
+     * ====================================================
+     */
+
+    $.fn[NAME] = TodoList._jQueryInterface;
+    $.fn[NAME].Constructor = TodoList;
+
+    $.fn[NAME].noConflict = function () {
+      $.fn[NAME] = JQUERY_NO_CONFLICT;
+      return TodoList._jQueryInterface;
+    };
+
+    return TodoList;
+  }(jQuery);
+
+  /**
+   * --------------------------------------------
    * AdminLTE Widget.js
    * License MIT
    * --------------------------------------------
@@ -848,7 +1051,7 @@
             $(this).data(DATA_KEY, typeof config === 'string' ? data : config);
           }
 
-          if (typeof config === 'string' && config.match(/remove|toggle/)) {
+          if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|toggleMaximize/)) {
             data[config]();
           } else if (typeof config === 'object') {
             data._init($(this));
@@ -902,8 +1105,10 @@
   }(jQuery);
 
   exports.ControlSidebar = ControlSidebar;
+  exports.DirectChat = DirectChat;
   exports.Layout = Layout;
   exports.PushMenu = PushMenu;
+  exports.TodoList = TodoList;
   exports.Treeview = Treeview;
   exports.Widget = Widget;
 

dist/js/demo.js

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

docs/404.html

@@ -0,0 +1,26 @@
+---
+layout: default
+title: Error 404
+---
+
+  <div class="content-wrapper">
+    <section class="content-header">
+      <div class="container-fluid">
+        <div class="row mb-2">
+        </div>
+      </div>
+    </section>
+
+    <section class="content">
+      <div class="error-page">
+        <h2 class="headline text-warning"> 404</h2>
+        <div class="error-content">
+          <h3><i class="fas fa-exclamation-triangle text-warning"></i> Oops! Page not found.</h3>
+          <p>
+            We could not find the page you were looking for.
+            Meanwhile, you may <a href="{{ site.baseurl }}{% link index.md %}">return to index</a>.
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>

docs/Gemfile

@@ -0,0 +1,5 @@
+gem "rouge"
+
+group :jekyll_plugins do
+  gem "jekyll-seo-tag"
+end

docs/Gemfile.lock

@@ -0,0 +1,65 @@
+GEM
+  specs:
+    addressable (2.6.0)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.11.0)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.6.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (3.6.0)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll-seo-tag
+  rouge
+
+BUNDLED WITH
+   2.0.1

docs/_config.yml

@@ -0,0 +1,96 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+markdown:  kramdown
+kramdown:
+  auto_ids: false
+
+highlighter: rouge
+plugins:
+  - jekyll-seo-tag
+
+title: AdminLTE v3 Documentaion
+version: v3.0.0-beta.2
+description: >- # this means to ignore newlines until "baseurl:"
+  AdminLTE v3 Documentaion
+
+navigation:
+- title: Installation
+  url: index.html
+  icon: fas fa-microchip
+- title: Dependencies & Plugins
+  url: dependencies.html
+  icon: fas fa-handshake
+- title: Layout
+  url: layout.html
+  icon: fas fa-copy
+- title: Components
+  icon: fas fa-th
+  url: components
+  subitems: 
+    - title: Main Header
+      url: components/main-header.html
+    - title: Main Sidebar
+      url: components/main-sidebar.html
+    - title: Control Sidebar
+      url: components/control-sidebar.html
+    - title: Card
+      url: components/cards.html
+    - title: Small-/ Info-Box
+      url: components/boxes.html
+    - title: Direct Chat
+      url: components/direct-chat.html
+- title: JavaScript
+  icon: fas fa-code
+  url: javascript
+  subitems: 
+    - title: Layout
+      url: javascript/layout.html
+    - title: Push Menu
+      url: javascript/push-menu.html
+    - title: Treeview
+      url: javascript/treeview.html
+    - title: Widget
+      url: javascript/widget.html
+    # - title: CardRefresh
+    #   url: javascript/card-refresh.html
+    - title: Control Sidebar
+      url: javascript/control-sidebar.html
+    - title: Direct Chat
+      url: javascript/direct-chat.html
+    - title: Todo List
+      url: javascript/todo-list.html
+- title: Browser Support
+  url: browser-support.html
+  icon: fab fa-chrome
+- title: Upgrade Guide
+  url: upgrade-guide.html
+  icon: fas fa-hand-point-up
+- title: Implementations
+  url: implementations.html
+  icon: fas fa-bookmark
+- title: FAQ
+  url: faq.html
+  icon: fas fa-question-circle
+- title: License
+  url: license.html
+  icon: fas fa-file-alt
+
+# Exclude from processing.
+# The following items will not be processed, by default. Create a custom list
+# to override the default setting.
+exclude:
+  - Gemfile
+  - Gemfile.lock

docs/_includes/foot.html

@@ -0,0 +1,5 @@
+
+  <script src="{{ 'assets/plugins/jquery/jquery.min.js' | relative_url }}"></script>
+  <script src="{{ 'assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | relative_url }}"></script>
+  <script src="{{ 'assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | relative_url }}"></script>
+  <script src="{{ 'assets/js/adminlte.min.js' | relative_url }}"></script>

docs/_includes/footer.html

@@ -0,0 +1,6 @@
+    <footer class="main-footer">
+      <div class="float-right d-none d-sm-inline">
+        {{site.version}}
+      </div>
+      <strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+    </footer>

docs/_includes/head.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <title>{{ page.title }} | AdminLTE 3 Documentation</title>
+    {% seo %}
+    
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
+    <link rel="stylesheet" href="{{'assets/plugins/fontawesome-free/css/all.min.css' | relative_url}}">
+    <link rel="stylesheet" href="{{'assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | relative_url}}">
+    <link rel="stylesheet" href="{{'assets/css/docs.css' | relative_url}}">
+    <link rel="stylesheet" href="{{'assets/css/highlighter.css' | relative_url}}">
+    <link rel="stylesheet" href="{{'assets/css/adminlte.min.css' | relative_url}}">
+</head>

docs/_includes/navbar.html

@@ -0,0 +1,36 @@
+  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          v3.0
+        </a>
+        <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
+          <a class="dropdown-item bg-info disabled" href="#">v3.0</a>
+          <div class="dropdown-divider"></div>
+          <a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
+          <a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a>
+        </div>
+      </li>
+    </ul>
+
+    <ul class="navbar-nav ml-auto">
+      <!-- <li class="nav-item d-none d-sm-inline-block">
+        <a href="index3.html" class="nav-link">Home</a>
+      </li> -->
+    </ul>
+
+    <!-- SEARCH FORM -->
+    <!-- <form class="form-check-inline ml-3">
+      <div class="input-group input-group-sm">
+        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-navbar" type="submit">
+            <i class="fa fa-search"></i>
+          </button>
+        </div>
+      </div>
+    </form> -->
+    </nav>

docs/_includes/sidebar.html

@@ -0,0 +1,51 @@
+  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <a href="index3.html" class="brand-link logo-switch">
+      <img src="{{'assets/img/logo-xs.png' | relative_url}}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
+      <img src="{{'assets/img/logo-xl.png' | relative_url}}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
+    </a>
+    <div class="sidebar">
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
+         {% for item in site.navigation %}
+            {% assign subitem_active = 'false' %}
+            {% for subitem in item.subitems %}
+              {% assign subitem_url = '/' | append: subitem.url %}
+              {% if subitem_url == page.url %}
+                {% assign subitem_active = 'true' %}
+              {% endif %}
+            {% endfor %}
+
+            <li class="nav-item {% if item.subitems %}has-treeview{% endif %} {% if subitem_active == 'true' %}menu-open{% endif %}">
+              {% if item.url == 'index.html' %}
+                {% assign item_url = '/' %}
+              {% else %}
+                {% assign item_url = '/' | append: item.url %}
+              {% endif %}
+
+              <a href="{% if item.url %}{{item.url | relative_url}}{% else %}#{% endif %}" class="nav-link {% if item_url == page.url %}active{% endif %}{% if subitem_active == 'true'%}active{% endif %}">
+                <i class="nav-icon {{item.icon}}"></i>
+                <p>
+                  {{item.title}}
+                  {% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
+                </p>
+              </a>
+
+              {% if item.subitems %}
+                <ul class="nav nav-treeview">
+                {% for subitem in item.subitems %}
+                  {% assign subitem_url = '/' | append: subitem.url %}
+                  <li class="nav-item">
+                    <a href="{{subitem.url | relative_url}}" class="nav-link {% if subitem_url == page.url %}active{% endif %}">
+                      <i class="far fa-circle nav-icon"></i>
+                      <p>{{subitem.title}}</p>
+                    </a>
+                  </li>
+                {% endfor %}
+                </ul>
+              {% endif %}
+            </li>
+         {% endfor %}
+        </ul>
+      </nav>
+    </div>
+  </aside>

docs/_layouts/default.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+
+  {%- include head.html -%}
+
+  <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
+    <div class="wrapper">
+
+      {%- include navbar.html -%}
+      {%- include sidebar.html -%}
+
+      {{content}}
+    
+      {%- include footer.html -%}
+    </div>
+  
+    {%- include foot.html -%}
+  </body>
+</html>

docs/_layouts/home.html

@@ -0,0 +1,41 @@
+---
+layout: default
+---
+
+<div>
+
+  {%- if page.title -%}
+  <header>
+    <h1>{{ page.title }}</h1>
+  </header>
+  {%- endif -%}
+
+  <section>
+    {{ content }}
+  </section>
+
+  {%- if site.posts.size > 0 -%}
+    <p class="h4">{{ page.list_title | default: "Posts" }}</p>
+    <ul class="list-unstyled">
+      {%- for post in site.posts -%}
+      <li>
+        <span class="text-muted">
+          {%- assign date_format = "%b %-d, %Y" -%}
+          {{ post.date | date: date_format }}
+        </span>
+        <p class="h5">
+          <a href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+        </p>
+        {%- if site.show_excerpts -%}
+          {{ post.excerpt }}
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+
+    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
+  {%- endif -%}
+
+</div>

docs/_layouts/page.html

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

docs/_layouts/post.html

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

docs/assets/css/docs.css

@@ -0,0 +1,3 @@
+.max-height-300 pre {
+  max-height: 300px
+}

docs/assets/css/highlighter.css

@@ -0,0 +1,140 @@
+pre .hll { background-color: #ffffcc }
+pre  { background: #f0f0f0; }
+pre .c { color: #60a0b0; font-style: italic } /* Comment */
+pre .err { border: 1px solid #FF0000 } /* Error */
+pre .k { color: #007020; font-weight: bold } /* Keyword */
+pre .o { color: #666666 } /* Operator */
+pre .ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
+pre .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
+pre .cp { color: #007020 } /* Comment.Preproc */
+pre .cpf { color: #60a0b0; font-style: italic } /* Comment.PreprocFile */
+pre .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
+pre .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
+pre .gd { color: #A00000 } /* Generic.Deleted */
+pre .ge { font-style: italic } /* Generic.Emph */
+pre .gr { color: #FF0000 } /* Generic.Error */
+pre .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+pre .gi { color: #00A000 } /* Generic.Inserted */
+pre .go { color: #888888 } /* Generic.Output */
+pre .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+pre .gs { font-weight: bold } /* Generic.Strong */
+pre .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+pre .gt { color: #0044DD } /* Generic.Traceback */
+pre .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+pre .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+pre .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+pre .kp { color: #007020 } /* Keyword.Pseudo */
+pre .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+pre .kt { color: #902000 } /* Keyword.Type */
+pre .m { color: #40a070 } /* Literal.Number */
+pre .s { color: #4070a0 } /* Literal.String */
+pre .na { color: #4070a0 } /* Name.Attribute */
+pre .nb { color: #007020 } /* Name.Builtin */
+pre .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+pre .no { color: #60add5 } /* Name.Constant */
+pre .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+pre .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+pre .ne { color: #007020 } /* Name.Exception */
+pre .nf { color: #06287e } /* Name.Function */
+pre .nl { color: #002070; font-weight: bold } /* Name.Label */
+pre .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+pre .nt { color: #062873; font-weight: bold } /* Name.Tag */
+pre .nv { color: #bb60d5 } /* Name.Variable */
+pre .ow { color: #007020; font-weight: bold } /* Operator.Word */
+pre .w { color: #bbbbbb } /* Text.Whitespace */
+pre .mb { color: #40a070 } /* Literal.Number.Bin */
+pre .mf { color: #40a070 } /* Literal.Number.Float */
+pre .mh { color: #40a070 } /* Literal.Number.Hex */
+pre .mi { color: #40a070 } /* Literal.Number.Integer */
+pre .mo { color: #40a070 } /* Literal.Number.Oct */
+pre .sa { color: #4070a0 } /* Literal.String.Affix */
+pre .sb { color: #4070a0 } /* Literal.String.Backtick */
+pre .sc { color: #4070a0 } /* Literal.String.Char */
+pre .dl { color: #4070a0 } /* Literal.String.Delimiter */
+pre .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+pre .s2 { color: #4070a0 } /* Literal.String.Double */
+pre .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+pre .sh { color: #4070a0 } /* Literal.String.Heredoc */
+pre .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+pre .sx { color: #c65d09 } /* Literal.String.Other */
+pre .sr { color: #235388 } /* Literal.String.Regex */
+pre .s1 { color: #4070a0 } /* Literal.String.Single */
+pre .ss { color: #517918 } /* Literal.String.Symbol */
+pre .bp { color: #007020 } /* Name.Builtin.Pseudo */
+pre .fm { color: #06287e } /* Name.Function.Magic */
+pre .vc { color: #bb60d5 } /* Name.Variable.Class */
+pre .vg { color: #bb60d5 } /* Name.Variable.Global */
+pre .vi { color: #bb60d5 } /* Name.Variable.Instance */
+pre .vm { color: #bb60d5 } /* Name.Variable.Magic */
+pre .il { color: #40a070 } /* Literal.Number.Integer.Long */
+
+.highlight pre .hll { background-color: #49483e }
+.highlight pre  { background: #272822; color: #f8f8f2 }
+.highlight pre .c { color: #75715e } /* Comment */
+.highlight pre .err { color: #960050; background-color: #1e0010 } /* Error */
+.highlight pre .k { color: #66d9ef } /* Keyword */
+.highlight pre .l { color: #ae81ff } /* Literal */
+.highlight pre .n { color: #f8f8f2 } /* Name */
+.highlight pre .o { color: #f92672 } /* Operator */
+.highlight pre .p { color: #f8f8f2 } /* Punctuation */
+.highlight pre .ch { color: #75715e } /* Comment.Hashbang */
+.highlight pre .cm { color: #75715e } /* Comment.Multiline */
+.highlight pre .cp { color: #75715e } /* Comment.Preproc */
+.highlight pre .cpf { color: #75715e } /* Comment.PreprocFile */
+.highlight pre .c1 { color: #75715e } /* Comment.Single */
+.highlight pre .cs { color: #75715e } /* Comment.Special */
+.highlight pre .gd { color: #f92672 } /* Generic.Deleted */
+.highlight pre .ge { font-style: italic } /* Generic.Emph */
+.highlight pre .gi { color: #a6e22e } /* Generic.Inserted */
+.highlight pre .gs { font-weight: bold } /* Generic.Strong */
+.highlight pre .gu { color: #75715e } /* Generic.Subheading */
+.highlight pre .kc { color: #66d9ef } /* Keyword.Constant */
+.highlight pre .kd { color: #66d9ef } /* Keyword.Declaration */
+.highlight pre .kn { color: #f92672 } /* Keyword.Namespace */
+.highlight pre .kp { color: #66d9ef } /* Keyword.Pseudo */
+.highlight pre .kr { color: #66d9ef } /* Keyword.Reserved */
+.highlight pre .kt { color: #66d9ef } /* Keyword.Type */
+.highlight pre .ld { color: #e6db74 } /* Literal.Date */
+.highlight pre .m { color: #ae81ff } /* Literal.Number */
+.highlight pre .s { color: #e6db74 } /* Literal.String */
+.highlight pre .na { color: #a6e22e } /* Name.Attribute */
+.highlight pre .nb { color: #f8f8f2 } /* Name.Builtin */
+.highlight pre .nc { color: #a6e22e } /* Name.Class */
+.highlight pre .no { color: #66d9ef } /* Name.Constant */
+.highlight pre .nd { color: #a6e22e } /* Name.Decorator */
+.highlight pre .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight pre .ne { color: #a6e22e } /* Name.Exception */
+.highlight pre .nf { color: #a6e22e } /* Name.Function */
+.highlight pre .nl { color: #f8f8f2 } /* Name.Label */
+.highlight pre .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight pre .nx { color: #a6e22e } /* Name.Other */
+.highlight pre .py { color: #f8f8f2 } /* Name.Property */
+.highlight pre .nt { color: #f92672 } /* Name.Tag */
+.highlight pre .nv { color: #f8f8f2 } /* Name.Variable */
+.highlight pre .ow { color: #f92672 } /* Operator.Word */
+.highlight pre .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight pre .mb { color: #ae81ff } /* Literal.Number.Bin */
+.highlight pre .mf { color: #ae81ff } /* Literal.Number.Float */
+.highlight pre .mh { color: #ae81ff } /* Literal.Number.Hex */
+.highlight pre .mi { color: #ae81ff } /* Literal.Number.Integer */
+.highlight pre .mo { color: #ae81ff } /* Literal.Number.Oct */
+.highlight pre .sa { color: #e6db74 } /* Literal.String.Affix */
+.highlight pre .sb { color: #e6db74 } /* Literal.String.Backtick */
+.highlight pre .sc { color: #e6db74 } /* Literal.String.Char */
+.highlight pre .dl { color: #e6db74 } /* Literal.String.Delimiter */
+.highlight pre .sd { color: #e6db74 } /* Literal.String.Doc */
+.highlight pre .s2 { color: #e6db74 } /* Literal.String.Double */
+.highlight pre .se { color: #ae81ff } /* Literal.String.Escape */
+.highlight pre .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.highlight pre .si { color: #e6db74 } /* Literal.String.Interpol */
+.highlight pre .sx { color: #e6db74 } /* Literal.String.Other */
+.highlight pre .sr { color: #e6db74 } /* Literal.String.Regex */
+.highlight pre .s1 { color: #e6db74 } /* Literal.String.Single */
+.highlight pre .ss { color: #e6db74 } /* Literal.String.Symbol */
+.highlight pre .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.highlight pre .fm { color: #a6e22e } /* Name.Function.Magic */
+.highlight pre .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.highlight pre .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.highlight pre .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.highlight pre .vm { color: #f8f8f2 } /* Name.Variable.Magic */
+.highlight pre .il { color: #ae81ff } /* Literal.Number.Integer.Long */