Update dependabot.yml (#4978)

Bumps [datatables.net](https://github.com/DataTables/Dist-DataTables) from 1.13.2 to 1.13.4.
- [Release notes](https://github.com/DataTables/Dist-DataTables/releases)
- [Commits](https://github.com/DataTables/Dist-DataTables/compare/1.13.2...1.13.4)

---
updated-dependencies:
- dependency-name: datatables.net
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.bundlewatch.config.json

@@ -2,27 +2,27 @@
   "files": [
     {
       "path": "./dist/css/adminlte.css",
-      "maxSize": "122.3 kB"
+      "maxSize": "128.3 kB"
     },
     {
       "path": "./dist/css/adminlte.min.css",
-      "maxSize": "116.5 kB"
+      "maxSize": "121.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.css",
-      "maxSize": "27.2 kB"
+      "maxSize": "28.6 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.min.css",
-      "maxSize": "26.5 kB"
+      "maxSize": "27.8 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.css",
-      "maxSize": "69.2 kB"
+      "maxSize": "72.2 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.min.css",
-      "maxSize": "65.4 kB"
+      "maxSize": "69.4 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.extra-components.css",
@@ -32,6 +32,14 @@
       "path": "./dist/css/alt/adminlte.extra-components.min.css",
       "maxSize": "4.5 kB"
     },
+    {
+      "path": "./dist/css/alt/adminlte.light.css",
+      "maxSize": "94 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.light.min.css",
+      "maxSize": "89 kB"
+    },
     {
       "path": "./dist/css/alt/adminlte.pages.css",
       "maxSize": "3.5 kB"
@@ -42,19 +50,19 @@
     },
     {
       "path": "./dist/css/alt/adminlte.plugins.css",
-      "maxSize": "21.8 kB"
+      "maxSize": "22.2 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.plugins.min.css",
-      "maxSize": "21.2 kB"
+      "maxSize": "21.5 kB"
     },
     {
       "path": "./dist/js/adminlte.js",
-      "maxSize": "15.7 kB"
+      "maxSize": "16.4 kB"
     },
     {
       "path": "./dist/js/adminlte.min.js",
-      "maxSize": "10.5 kB"
+      "maxSize": "10.9 kB"
     }
   ]
 }

.dockerignore

@@ -0,0 +1,4 @@
+.git
+*Dockerfile*
+*docker-compose*
+node_modules

.eslintrc.json

@@ -5,14 +5,19 @@
     "plugin:import/errors",
     "plugin:import/warnings",
     "plugin:unicorn/recommended",
-    "xo/esnext",
+    "xo",
     "xo/browser"
   ],
   "env": {
     "jquery": true
   },
   "rules": {
+    "arrow-body-style": "off",
     "capitalized-comments": "off",
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
     "eqeqeq": "off",
     "indent": [
       "error",
@@ -39,8 +44,13 @@
       "error",
       "always"
     ],
+    "operator-linebreak": [
+      "error",
+      "after"
+    ],
     "prefer-template": "error",
     "prefer-named-capture-group": "off",
+
     "semi": [
       "error",
       "never"
@@ -50,11 +60,14 @@
     "unicorn/no-array-callback-reference": "off",
     "unicorn/no-array-for-each": "off",
     "unicorn/no-for-loop": "off",
+    "unicorn/no-negated-condition": "off",
     "unicorn/no-null": "off",
+    "unicorn/no-typeof-undefined": "off",
     "unicorn/no-unused-properties": "error",
     "unicorn/prefer-dom-node-append": "off",
     "unicorn/prefer-dom-node-dataset": "off",
     "unicorn/prefer-dom-node-remove": "off",
+    "unicorn/prefer-export-from": "off",
     "unicorn/prefer-includes": "off",
     "unicorn/prefer-number-properties": "off",
     "unicorn/prefer-optional-catch-binding": "off",

.github/CONTRIBUTING.md

@@ -17,18 +17,18 @@ Contributions are always **welcome and recommended**! Here is how for beginner's
     ```
     * Create a new branch
 3. Compile dist files (Development) :
-    * To compile the dist files you need Node.js 10 or higher/npm (node package manager)
+    * To compile the dist files you need Node.js 14 or higher/npm (node package manager)
     * Delete ./package-lock.json file
     * `npm install` (install npm deps)
     * `npm run dev` (developer mode, autocompile with browsersync support for live demo)
-    * Make your changes only in ./buid Folder OR package.json OR ./dist/js/demo.js OR in any html files which nessary to contribute
-    * Do not changes in ./dist/css/ AND ./dist/js/ Because its compiled files
-    * `npm run production` (compile css/js files and test every pages are perfectly working fine, before creating pull request)
+    * Make your changes only in ./build Folder OR package.json OR ./dist/js/demo.js OR package-lock.json OR ./dist/js/pages/ OR ./docs OR in any html files which are necessary for contribution
+    * Do not make changes in ./dist/css/ AND ./dist/js/ AND ./plugins Because it contains compiled files and do not include in PR (Pull Request)
+    * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request)
 4. Create a pull request
 
 ## Online one-click setup for contributing
 
-You can use Gitpod(an online IDE which is free for Open Source) for working on issues or making Prs. With a single click it will launch a workspace and automatically:
+You can use Gitpod(an online IDE which is free for Open Source) for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically:
 
 - clone the `AdminLTE` repo.
 - install the dependencies.

.github/dependabot.yml

@@ -1,18 +1,24 @@
 version: 2
 updates:
+  # for v4-dev branch
   - package-ecosystem: npm
     directory: "/"
     schedule:
       interval: weekly
-      day: monday
+      day: tuesday
       time: "03:00"
     open-pull-requests-limit: 10
+    target-branch: "v4-dev"
+    labels:
+      - dependencies
+      - version:4.x
     versioning-strategy: increase
-  - package-ecosystem: bundler
-    directory: "/docs/"
+    rebase-strategy: disabled
+
+  # for github actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
     schedule:
       interval: weekly
-      day: monday
+      day: tuesday
       time: "03:00"
-    open-pull-requests-limit: 10
-    versioning-strategy: increase

.github/workflows/ci.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - v4-dev
   pull_request:
     branches:
       - "**"
@@ -19,9 +20,8 @@ jobs:
       fail-fast: false
       matrix:
         node:
-          - "10.x"
-          - "12.x"
           - "14.x"
+          - "16.x"
         os:
           - "ubuntu-latest"
           - "macos-latest"
@@ -58,6 +58,6 @@ jobs:
 
       - name: Run bundlewatch
         run: npm run bundlewatch
-        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.node, '14')
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.node, '16')
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"

.github/workflows/codeql.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - master
+      - v4-dev
       - "!dependabot/**"
   pull_request:
     # The branches below must be a subset of the branches above

.github/workflows/docs.yml

@@ -4,13 +4,14 @@ on:
   push:
     branches:
       - master
+      - v4-dev
   pull_request:
     branches:
       - "**"
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 16.x
   RUBY: 2.7
 
 jobs:

.github/workflows/lint.yml

@@ -4,13 +4,14 @@ on:
   push:
     branches:
       - master
+      - v4-dev
   pull_request:
     branches:
       - "**"
 
 env:
   FORCE_COLOR: 2
-  NODE: 14.x
+  NODE: 16.x
 
 jobs:
   run:

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "stylelint-config-twbs-bootstrap/scss"
+    "stylelint-config-twbs-bootstrap"
   ],
   "rules": {
     "declaration-no-important": null,

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:14
+
+WORKDIR /code
+
+COPY package.json /code/package.json
+COPY package-lock.json /code/package-lock.json
+
+RUN npm install
+
+COPY . /code
+
+CMD ["npm", "run", "dev"]

README.md

@@ -4,6 +4,8 @@
 [![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
 [![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
 [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/ColorlibHQ/AdminLTE)
+[![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz)
 
 **AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4.6](https://getbootstrap.com/)** framework and also the JS/jQuery plugin.
 Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.
@@ -32,52 +34,24 @@ Legacy Releases are [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases
 ### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
 _**Important Note**: You needed to add separately cdn links for plugins in your project._
 ```html
-<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/js/adminlte.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
 ```
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1/dist/css/adminlte.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
 ```
 ### Using The Command Line:
-_**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or higher._
+_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
 #### Via npm
 ```bash
-npm install admin-lte@^3.1 --save
+npm install admin-lte@^3.2 --save
 ```
 #### Via Yarn
 ```bash
-yarn add admin-lte@^3.1
+yarn add admin-lte@^3.2
 ```
 #### Via Composer
 ```bash
-composer require "almasaeed2010/adminlte=~3.1"
-```
-#### Via Git
-```bash
-git clone https://github.com/ColorlibHQ/AdminLTE.git
-```
-
-## Unstable release
-### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
-_**Important Note**: You needed to add separately cdn links for plugins in your project._
-```html
-<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.1.0/dist/js/adminlte.min.js"></script>
-```
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1.0/dist/css/adminlte.min.css">
-```
-### Using The Command Line:
-_**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or higher._
-#### Via npm
-```bash
-npm install admin-lte@^3.1.0 --save
-```
-#### Via Yarn
-```bash
-yarn add admin-lte@^3.1.0
-```
-#### Via Composer
-```bash
-composer require "almasaeed2010/adminlte=~3.1.0"
+composer require "almasaeed2010/adminlte=~3.2"
 ```
 #### Via Git
 ```bash
@@ -86,7 +60,7 @@ git clone https://github.com/ColorlibHQ/AdminLTE.git
 
 ## Documentation
 
-Visit the [online documentation](https://adminlte.io/docs/3.1/) for the most
+Visit the [online documentation](https://adminlte.io/docs/3.2/) for the most
 updated guide. Information will be added on a weekly basis.
 
 ## Browsers support
@@ -95,7 +69,13 @@ updated guide. Information will be added on a weekly basis.
 | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-### Compile dist files
+## Light Mode (Only Dark Mode Removed)
+You can use light-mode-only version, if you are not using dark mode and also file size less without dark-mode.
+
+File Location `./dist/css/alt/adminlte.light.css`
+
+
+## Compile dist files
 
 To compile the dist files you need Node.js/npm, clone/download the repo then:
 

build/config/.eslintrc.json

@@ -9,6 +9,7 @@
   "extends": "../../.eslintrc.json",
   "rules": {
     "no-console": "off",
-    "strict": "error"
+    "strict": "error",
+    "unicorn/prefer-module": "off"
   }
 }

build/config/postcss.config.js

@@ -7,9 +7,6 @@ module.exports = {
     sourcesContent: true
   },
   plugins: [
-    require('postcss-scrollbar')({
-      edgeAutohide: true
-    }),
     require('autoprefixer')({
       cascade: false
     })

build/js/CardRefresh.js

@@ -34,12 +34,15 @@ const Default = {
   content: '.card-body',
   loadInContent: true,
   loadOnInit: true,
+  loadErrorTemplate: true,
   responseType: '',
   overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
+  errorTemplate: '<span class="text-danger"></span>',
   onLoadStart() {},
   onLoadDone(response) {
     return response
-  }
+  },
+  onLoadFail(_jqXHR, _textStatus, _errorThrown) {}
 }
 
 class CardRefresh {
@@ -74,6 +77,16 @@ class CardRefresh {
       this._settings.onLoadDone.call($(this), response)
       this._removeOverlay()
     }, this._settings.responseType !== '' && this._settings.responseType)
+    .fail((jqXHR, textStatus, errorThrown) => {
+      this._removeOverlay()
+
+      if (this._settings.loadErrorTemplate) {
+        const msg = $(this._settings.errorTemplate).text(errorThrown)
+        this._parent.find(this._settings.content).empty().append(msg)
+      }
+
+      this._settings.onLoadFail.call($(this), jqXHR, textStatus, errorThrown)
+    })
 
     $(this._element).trigger($.Event(EVENT_LOADED))
   }
@@ -101,21 +114,25 @@ class CardRefresh {
   }
 
   // Static
-
   static _jQueryInterface(config) {
-    let data = $(this).data(DATA_KEY)
-    const _options = $.extend({}, Default, $(this).data())
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
-    if (!data) {
-      data = new CardRefresh($(this), _options)
-      $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
-    }
+      if (!data) {
+        data = new CardRefresh($(this), _config)
+        $(this).data(DATA_KEY, data)
+        data._init()
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-    if (typeof config === 'string' && /load/.test(config)) {
-      data[config]()
-    } else {
-      data._init($(this))
-    }
+        data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
+      }
+    })
   }
 }
 

build/js/CardWidget.js

@@ -108,6 +108,7 @@ class CardWidget {
     this._parent.css({
       height: this._parent.height(),
       width: this._parent.width(),
+      position: 'fixed',
       transition: 'all .15s'
     }).delay(150).queue(function () {
       const $element = $(this)
@@ -176,13 +177,12 @@ class CardWidget {
   }
 
   // Static
-
   static _jQueryInterface(config) {
     let data = $(this).data(DATA_KEY)
-    const _options = $.extend({}, Default, $(this).data())
+    const _config = $.extend({}, Default, $(this).data())
 
     if (!data) {
-      data = new CardWidget($(this), _options)
+      data = new CardWidget($(this), _config)
       $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
     }
 

build/js/ControlSidebar.js

@@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 
 const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
@@ -45,7 +46,8 @@ const Default = {
   controlsidebarSlide: true,
   scrollbarTheme: 'os-theme-light',
   scrollbarAutoHide: 'l',
-  target: SELECTOR_CONTROL_SIDEBAR
+  target: SELECTOR_CONTROL_SIDEBAR,
+  animationSpeed: 300
 }
 
 /**
@@ -64,13 +66,12 @@ class ControlSidebar {
   collapse() {
     const $body = $('body')
     const $html = $('html')
-    const { target } = this._config
 
     // Show the control sidebar
     if (this._config.controlsidebarSlide) {
       $html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
       $body.removeClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
-        $(target).hide()
+        $(SELECTOR_CONTROL_SIDEBAR).hide()
         $html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
         $(this).dequeue()
       })
@@ -79,12 +80,20 @@ class ControlSidebar {
     }
 
     $(this._element).trigger($.Event(EVENT_COLLAPSED))
+
+    setTimeout(() => {
+      $(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
+    }, this._config.animationSpeed)
   }
 
-  show() {
+  show(toggle = false) {
     const $body = $('body')
     const $html = $('html')
 
+    if (toggle) {
+      $(SELECTOR_CONTROL_SIDEBAR).hide()
+    }
+
     // Collapse the control sidebar
     if (this._config.controlsidebarSlide) {
       $html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
@@ -107,15 +116,20 @@ class ControlSidebar {
 
   toggle() {
     const $body = $('body')
-    const shouldClose = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
-        $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
+    const { target } = this._config
 
-    if (shouldClose) {
+    const notVisible = !$(target).is(':visible')
+    const shouldClose = ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+      $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE))
+    const shouldToggle = notVisible && ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+      $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE))
+
+    if (notVisible || shouldToggle) {
+      // Open the control sidebar
+      this.show(notVisible)
+    } else if (shouldClose) {
       // Close the control sidebar
       this.collapse()
-    } else {
-      // Open the control sidebar
-      this.show()
     }
   }
 
@@ -272,22 +286,24 @@ class ControlSidebar {
   }
 
   // Static
-
-  static _jQueryInterface(operation) {
+  static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
-      const _options = $.extend({}, Default, $(this).data())
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
-        data = new ControlSidebar(this, _options)
+        data = new ControlSidebar($(this), _config)
         $(this).data(DATA_KEY, data)
-      }
+        data._init()
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      if (data[operation] === 'undefined') {
-        throw new Error(`${operation} is not a function`)
+        data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
       }
-
-      data[operation]()
     })
   }
 }

build/js/DirectChat.js

@@ -40,7 +40,6 @@ class DirectChat {
   }
 
   // Static
-
   static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
@@ -48,9 +47,15 @@ class DirectChat {
       if (!data) {
         data = new DirectChat($(this))
         $(this).data(DATA_KEY, data)
-      }
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      data[config]()
+        data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
+      }
     })
   }
 }

build/js/Dropdown.js

@@ -89,18 +89,19 @@ class Dropdown {
   }
 
   // Static
-
   static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
-      const _config = $.extend({}, Default, $(this).data())
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
         data = new Dropdown($(this), _config)
         $(this).data(DATA_KEY, data)
-      }
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      if (config === 'toggleSubmenu' || config === 'fixPosition') {
         data[config]()
       }
     })

build/js/ExpandableTable.js

@@ -30,14 +30,13 @@ const SELECTOR_ARIA_ATTR = 'aria-expanded'
   * ====================================================
   */
 class ExpandableTable {
-  constructor(element, options) {
-    this._options = options
+  constructor(element) {
     this._element = element
   }
 
   // Public
 
-  init() {
+  _init() {
     $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
       const $type = $($header).attr(SELECTOR_ARIA_ATTR)
       const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
@@ -51,7 +50,15 @@ class ExpandableTable {
   }
 
   toggleRow() {
-    const $element = this._element
+    let $element = this._element
+
+    if ($element[0].nodeName !== 'TR') {
+      $element = $element.parent()
+      if ($element[0].nodeName !== 'TR') {
+        $element = $element.parent()
+      }
+    }
+
     const time = 500
     const $type = $element.attr(SELECTOR_ARIA_ATTR)
     const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
@@ -72,8 +79,7 @@ class ExpandableTable {
   }
 
   // Static
-
-  static _jQueryInterface(operation) {
+  static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
 
@@ -82,8 +88,8 @@ class ExpandableTable {
         $(this).data(DATA_KEY, data)
       }
 
-      if (typeof operation === 'string' && /init|toggleRow/.test(operation)) {
-        data[operation]()
+      if (typeof config === 'string' && /init|toggleRow/.test(config)) {
+        data[config]()
       }
     })
   }
@@ -94,7 +100,7 @@ class ExpandableTable {
   * ====================================================
   */
 $(SELECTOR_TABLE).ready(function () {
-  ExpandableTable._jQueryInterface.call($(this), 'init')
+  ExpandableTable._jQueryInterface.call($(this), '_init')
 })
 
 $(document).on('click', SELECTOR_DATA_TOGGLE, function () {

build/js/Fullscreen.js

@@ -19,6 +19,8 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
 const SELECTOR_DATA_WIDGET = '[data-widget="fullscreen"]'
 const SELECTOR_ICON = `${SELECTOR_DATA_WIDGET} i`
 
+const EVENT_FULLSCREEN_CHANGE = 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange'
+
 const Default = {
   minimizeIcon: 'fa-compress-arrows-alt',
   maximizeIcon: 'fa-expand-arrows-alt'
@@ -32,7 +34,7 @@ const Default = {
 class Fullscreen {
   constructor(_element, _options) {
     this.element = _element
-    this.options = $.extend({}, Default, _options)
+    this.options = _options
   }
 
   // Public
@@ -48,6 +50,17 @@ class Fullscreen {
     }
   }
 
+  toggleIcon() {
+    if (document.fullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.msFullscreenElement) {
+      $(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon)
+    } else {
+      $(SELECTOR_ICON).removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon)
+    }
+  }
+
   fullscreen() {
     if (document.documentElement.requestFullscreen) {
       document.documentElement.requestFullscreen()
@@ -56,8 +69,6 @@ class Fullscreen {
     } else if (document.documentElement.msRequestFullscreen) {
       document.documentElement.msRequestFullscreen()
     }
-
-    $(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon)
   }
 
   windowed() {
@@ -68,29 +79,25 @@ class Fullscreen {
     } else if (document.msExitFullscreen) {
       document.msExitFullscreen()
     }
-
-    $(SELECTOR_ICON).removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon)
   }
 
   // Static
-
   static _jQueryInterface(config) {
-    let data = $(this).data(DATA_KEY)
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
-    if (!data) {
-      data = $(this).data()
-    }
+      if (!data) {
+        data = new Fullscreen($(this), _config)
+        $(this).data(DATA_KEY, data)
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-    const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
-    const plugin = new Fullscreen($(this), _options)
-
-    $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
-
-    if (typeof config === 'string' && /toggle|fullscreen|windowed/.test(config)) {
-      plugin[config]()
-    } else {
-      plugin.init()
-    }
+        data[config]()
+      }
+    })
   }
 }
 
@@ -102,6 +109,10 @@ $(document).on('click', SELECTOR_DATA_WIDGET, function () {
   Fullscreen._jQueryInterface.call($(this), 'toggle')
 })
 
+$(document).on(EVENT_FULLSCREEN_CHANGE, () => {
+  Fullscreen._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggleIcon')
+})
+
 /**
  * jQuery API
  * ====================================================

build/js/IFrame.js

@@ -1,3 +1,5 @@
+// noinspection EqualityComparisonWithCoercionJS
+
 /**
  * --------------------------------------------
  * AdminLTE IFrame.js
@@ -23,11 +25,11 @@ const SELECTOR_DATA_TOGGLE_SCROLL_RIGHT = '[data-widget="iframe-scrollright"]'
 const SELECTOR_DATA_TOGGLE_FULLSCREEN = '[data-widget="iframe-fullscreen"]'
 const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
 const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
-const SELECTOR_TAB_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .nav`
-const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
+const SELECTOR_TAB_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .nav`
+const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .navbar-nav`
 const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
 const SELECTOR_TAB_NAVBAR_NAV_LINK = `${SELECTOR_TAB_NAVBAR_NAV} .nav-link`
-const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
+const SELECTOR_TAB_CONTENT = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .tab-content`
 const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
 const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
 const SELECTOR_TAB_PANE = `${SELECTOR_TAB_CONTENT} .tab-pane`
@@ -51,7 +53,9 @@ const Default = {
   autoIframeMode: true,
   autoItemActive: true,
   autoShowNewTab: true,
+  autoDarkMode: false,
   allowDuplicates: false,
+  allowReload: true,
   loadingScreen: true,
   useNavbarItems: true,
   scrollOffset: 40,
@@ -69,7 +73,6 @@ class IFrame {
   constructor(element, config) {
     this._config = config
     this._element = element
-
     this._init()
   }
 
@@ -105,7 +108,11 @@ class IFrame {
     if (autoOpen) {
       if (this._config.loadingScreen) {
         const $loadingScreen = $(SELECTOR_TAB_LOADING)
-        $loadingScreen.fadeIn()
+
+        if (!$loadingScreen.is(':animated')) {
+          $loadingScreen.fadeIn()
+        }
+
         $(`${tabId} iframe`).ready(() => {
           if (typeof this._config.loadingScreen === 'number') {
             this.switchTab(`#${navId}`)
@@ -142,11 +149,11 @@ class IFrame {
       return
     }
 
-    const uniqueName = link.replace('./', '').replace(/["&'./:=?[\]]/gi, '-').replace(/(--)/gi, '')
+    const uniqueName = unescape(link).replace('./', '').replace(/["#&'./:=?[\]]/gi, '-').replace(/(--)/gi, '')
     const navId = `tab-${uniqueName}`
 
     if (!this._config.allowDuplicates && $(`#${navId}`).length > 0) {
-      return this.switchTab(`#${navId}`)
+      return this.switchTab(`#${navId}`, this._config.allowReload)
     }
 
     if ((!this._config.allowDuplicates && $(`#${navId}`).length === 0) || this._config.allowDuplicates) {
@@ -154,12 +161,35 @@ class IFrame {
     }
   }
 
-  switchTab(item) {
+  switchTab(item, reload = false) {
     const $item = $(item)
     const tabId = $item.attr('href')
 
     $(SELECTOR_TAB_EMPTY).hide()
+
+    if (reload) {
+      const $loadingScreen = $(SELECTOR_TAB_LOADING)
+      if (this._config.loadingScreen) {
+        $loadingScreen.show(0, () => {
+          $(`${tabId} iframe`).attr('src', $(`${tabId} iframe`).attr('src')).ready(() => {
+            if (this._config.loadingScreen) {
+              if (typeof this._config.loadingScreen === 'number') {
+                setTimeout(() => {
+                  $loadingScreen.fadeOut()
+                }, this._config.loadingScreen)
+              } else {
+                $loadingScreen.fadeOut()
+              }
+            }
+          })
+        })
+      } else {
+        $(`${tabId} iframe`).attr('src', $(`${tabId} iframe`).attr('src'))
+      }
+    }
+
     $(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
+
     this._fixHeight()
 
     $item.tab('show')
@@ -212,9 +242,9 @@ class IFrame {
     if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
       $(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMinimize).addClass(this._config.iconMaximize)
       $('body').removeClass(CLASS_NAME_FULLSCREEN_MODE)
-      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('auto')
-      $(SELECTOR_CONTENT_WRAPPER).height('auto')
-      $(SELECTOR_CONTENT_IFRAME).height('auto')
+      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('100%')
+      $(SELECTOR_CONTENT_WRAPPER).height('100%')
+      $(SELECTOR_CONTENT_IFRAME).height('100%')
     } else {
       $(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
       $('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
@@ -227,17 +257,28 @@ class IFrame {
   // Private
 
   _init() {
-    if (window.frameElement && this._config.autoIframeMode) {
-      $('body').addClass(CLASS_NAME_IFRAME_MODE)
-    } else if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
-      if ($(SELECTOR_TAB_CONTENT).children().length > 2) {
-        const $el = $(`${SELECTOR_TAB_PANE}:first-child`)
-        $el.show()
-        this._setItemActive($el.find('iframe').attr('src'))
-      }
+    const usingDefTab = ($(SELECTOR_TAB_CONTENT).children().length > 2)
 
-      this._setupListeners()
-      this._fixHeight(true)
+    this._setupListeners()
+    this._fixHeight(true)
+
+    if (usingDefTab) {
+      const $el = $(`${SELECTOR_TAB_PANE}`).first()
+      const uniqueName = $el.attr('id').replace('panel-', '')
+      const navId = `#tab-${uniqueName}`
+
+      this.switchTab(navId, true)
+    }
+  }
+
+  _initFrameElement() {
+    if (window.frameElement && this._config?.autoIframeMode) {
+      const $body = $('body')
+      $body.addClass(CLASS_NAME_IFRAME_MODE)
+
+      if (this._config.autoDarkMode) {
+        $body.addClass('dark-mode')
+      }
     }
   }
 
@@ -252,16 +293,17 @@ class IFrame {
         this._fixHeight()
       }, 1)
     })
-    $(document).on('click', `${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_SIDEBAR_SEARCH_ITEM}`, e => {
-      e.preventDefault()
-      this.openTabSidebar(e.target)
-    })
-
-    if (this._config.useNavbarItems) {
-      $(document).on('click', `${SELECTOR_HEADER_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`, e => {
+    if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
+      $(document).on('click', `${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_SIDEBAR_SEARCH_ITEM}`, e => {
         e.preventDefault()
         this.openTabSidebar(e.target)
       })
+      if (this._config.useNavbarItems) {
+        $(document).on('click', `${SELECTOR_HEADER_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`, e => {
+          e.preventDefault()
+          this.openTabSidebar(e.target)
+        })
+      }
     }
 
     $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
@@ -278,7 +320,7 @@ class IFrame {
       e.preventDefault()
       let { target } = e
 
-      if (target.nodeName == 'I') {
+      if (target.nodeName === 'I') {
         target = e.target.offsetParent
       }
 
@@ -373,18 +415,25 @@ class IFrame {
   }
 
   // Static
+  // eslint-disable-next-line max-params
+  static _jQueryInterface(config, name, link, id, reload) {
+    if ($(SELECTOR_DATA_TOGGLE).length > 0) {
+      let data = $(this).data(DATA_KEY)
 
-  static _jQueryInterface(operation, ...args) {
-    let data = $(this).data(DATA_KEY)
-    const _options = $.extend({}, Default, $(this).data())
+      if (!data) {
+        data = $(this).data()
+      }
 
-    if (!data) {
-      data = new IFrame(this, _options)
-      $(this).data(DATA_KEY, data)
-    }
-
-    if (typeof operation === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(operation)) {
-      data[operation](...args)
+      const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
+      localStorage.setItem('AdminLTE:IFrame:Options', JSON.stringify(_options))
+      const plugin = new IFrame($(this), _options)
+      window.iFrameInstance = plugin
+      $(this).data(DATA_KEY, typeof config === 'object' ? config : { link, name, id, reload, ...data })
+      if (typeof config === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(config)) {
+        plugin[config](name, link, id, reload)
+      }
+    } else {
+      window.iFrameInstance = new IFrame($(this), JSON.parse(localStorage.getItem('AdminLTE:IFrame:Options')))._initFrameElement()
     }
   }
 }

build/js/Layout.js

@@ -33,6 +33,7 @@ const CLASS_NAME_SIDEBAR_FOCUSED = 'sidebar-focused'
 const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
 const CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN = 'control-sidebar-slide-open'
 const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
+const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
 
 const Default = {
   scrollbarTheme: 'os-theme-light',
@@ -117,7 +118,11 @@ class Layout {
     const $body = $('body')
     const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
 
-    if ($selector.length === 0) {
+    if ($body.hasClass(CLASS_NAME_IFRAME_MODE)) {
+      $body.css('height', '100%')
+      $('.wrapper').css('height', '100%')
+      $('html').css('height', '100%')
+    } else if ($selector.length === 0) {
       $body.css('height', 'auto')
       $('html').css('height', 'auto')
     } else {
@@ -205,21 +210,23 @@ class Layout {
   }
 
   // Static
-
-  static _jQueryInterface(config = '') {
+  static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
-      const _options = $.extend({}, Default, $(this).data())
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
-        data = new Layout($(this), _options)
+        data = new Layout($(this), _config)
         $(this).data(DATA_KEY, data)
-      }
-
-      if (config === 'init' || config === '') {
         data._init()
-      } else if (config === 'fixLayoutHeight' || config === 'fixLoginRegisterHeight') {
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
+
         data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
       }
     })
   }

build/js/NavbarSearch.js

@@ -35,7 +35,7 @@ const Default = {
 class NavbarSearch {
   constructor(_element, _options) {
     this._element = _element
-    this._config = $.extend({}, Default, _options)
+    this._config = _options
   }
 
   // Public
@@ -62,22 +62,21 @@ class NavbarSearch {
   }
 
   // Static
-
-  static _jQueryInterface(options) {
+  static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
-      const _options = $.extend({}, Default, $(this).data())
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
-        data = new NavbarSearch(this, _options)
+        data = new NavbarSearch($(this), _config)
         $(this).data(DATA_KEY, data)
-      }
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      if (!/toggle|close|open/.test(options)) {
-        throw new Error(`Undefined method ${options}`)
+        data[config]()
       }
-
-      data[options]()
     })
   }
 }

build/js/PushMenu.js

@@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 
 const SELECTOR_TOGGLE_BUTTON = '[data-widget="pushmenu"]'
@@ -33,7 +34,8 @@ const CLASS_NAME_CLOSED = 'sidebar-closed'
 const Default = {
   autoCollapseSize: 992,
   enableRemember: false,
-  noTransitionAfterReload: true
+  noTransitionAfterReload: true,
+  animationSpeed: 300
 }
 
 /**
@@ -44,7 +46,7 @@ const Default = {
 class PushMenu {
   constructor(element, options) {
     this._element = element
-    this._options = $.extend({}, Default, options)
+    this._options = options
 
     if ($(SELECTOR_OVERLAY).length === 0) {
       this._addOverlay()
@@ -88,6 +90,10 @@ class PushMenu {
     }
 
     $(this._element).trigger($.Event(EVENT_COLLAPSED))
+
+    setTimeout(() => {
+      $(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
+    }, this._options.animationSpeed)
   }
 
   toggle() {
@@ -169,19 +175,23 @@ class PushMenu {
   }
 
   // Static
-
-  static _jQueryInterface(operation) {
+  static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
-      const _options = $.extend({}, Default, $(this).data())
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
-        data = new PushMenu(this, _options)
+        data = new PushMenu($(this), _config)
         $(this).data(DATA_KEY, data)
-      }
+        data._init()
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      if (typeof operation === 'string' && /collapse|expand|toggle/.test(operation)) {
-        data[operation]()
+        data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
       }
     })
   }

build/js/SidebarSearch.js

@@ -60,7 +60,7 @@ class SidebarSearch {
 
   // Public
 
-  init() {
+  _init() {
     if ($(SELECTOR_DATA_WIDGET).length === 0) {
       return
     }
@@ -101,7 +101,7 @@ class SidebarSearch {
       this._addNotFound()
     } else {
       endResults.each((i, result) => {
-        $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), escape(result.link), result.path))
+        $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), encodeURI(result.link), result.path))
       })
     }
 
@@ -161,6 +161,7 @@ class SidebarSearch {
   _renderItem(name, link, path) {
     path = path.join(` ${this.options.arrowSign} `)
     name = unescape(name)
+    link = decodeURI(link)
 
     if (this.options.highlightName || this.options.highlightPath) {
       const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase()
@@ -186,7 +187,7 @@ class SidebarSearch {
     }
 
     const groupItemElement = $('<a/>', {
-      href: link,
+      href: decodeURIComponent(link),
       class: 'list-group-item'
     })
     const searchTitleElement = $('<div/>', {
@@ -206,24 +207,25 @@ class SidebarSearch {
   }
 
   // Static
-
   static _jQueryInterface(config) {
-    let data = $(this).data(DATA_KEY)
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
-    if (!data) {
-      data = $(this).data()
-    }
+      if (!data) {
+        data = new SidebarSearch($(this), _config)
+        $(this).data(DATA_KEY, data)
+        data._init()
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-    const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
-    const plugin = new SidebarSearch($(this), _options)
-
-    $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
-
-    if (typeof config === 'string' && /init|toggle|close|open|search/.test(config)) {
-      plugin[config]()
-    } else {
-      plugin.init()
-    }
+        data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
+      }
+    })
   }
 }
 

build/js/Toasts.js

@@ -1,3 +1,5 @@
+// noinspection EqualityComparisonWithCoercionJS
+
 /**
  * --------------------------------------------
  * AdminLTE Toasts.js
@@ -140,19 +142,19 @@ class Toasts {
   // Static
 
   _getContainerId() {
-    if (this._config.position == POSITION_TOP_RIGHT) {
+    if (this._config.position === POSITION_TOP_RIGHT) {
       return SELECTOR_CONTAINER_TOP_RIGHT
     }
 
-    if (this._config.position == POSITION_TOP_LEFT) {
+    if (this._config.position === POSITION_TOP_LEFT) {
       return SELECTOR_CONTAINER_TOP_LEFT
     }
 
-    if (this._config.position == POSITION_BOTTOM_RIGHT) {
+    if (this._config.position === POSITION_BOTTOM_RIGHT) {
       return SELECTOR_CONTAINER_BOTTOM_RIGHT
     }
 
-    if (this._config.position == POSITION_BOTTOM_LEFT) {
+    if (this._config.position === POSITION_BOTTOM_LEFT) {
       return SELECTOR_CONTAINER_BOTTOM_LEFT
     }
   }
@@ -181,7 +183,6 @@ class Toasts {
   }
 
   // Static
-
   static _jQueryInterface(option, config) {
     return this.each(function () {
       const _options = $.extend({}, Default, config)

build/js/TodoList.js

@@ -46,7 +46,7 @@ class TodoList {
   toggle(item) {
     item.parents('li').toggleClass(CLASS_NAME_TODO_LIST_DONE)
     if (!$(item).prop('checked')) {
-      this.unCheck($(item))
+      this.unCheck(item)
       return
     }
 
@@ -54,11 +54,11 @@ class TodoList {
   }
 
   check(item) {
-    this._config.onCheck.call(item)
+    this._config.onCheck(item)
   }
 
   unCheck(item) {
-    this._config.onUnCheck.call(item)
+    this._config.onUnCheck(item)
   }
 
   // Private
@@ -73,22 +73,23 @@ class TodoList {
   }
 
   // Static
-
   static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
-        data = $(this).data()
-      }
+        data = new TodoList($(this), _config)
+        $(this).data(DATA_KEY, data)
+        data._init()
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
-      const plugin = new TodoList($(this), _options)
-
-      $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
-
-      if (config === 'init') {
-        plugin[config]()
+        data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
       }
     })
   }

build/js/Treeview.js

@@ -51,7 +51,7 @@ class Treeview {
 
   // Public
 
-  init() {
+  _init() {
     $(`${SELECTOR_LI}${SELECTOR_OPEN} ${SELECTOR_TREEVIEW_MENU}${SELECTOR_OPEN}`).css('display', 'block')
     this._setupListeners()
   }
@@ -83,7 +83,7 @@ class Treeview {
     treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
       $(this._element).trigger(collapsedEvent)
       treeviewMenu.find(`${SELECTOR_OPEN} > ${SELECTOR_TREEVIEW_MENU}`).slideUp()
-      treeviewMenu.find(SELECTOR_OPEN).removeClass(CLASS_NAME_OPEN)
+      treeviewMenu.find(SELECTOR_OPEN).removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_OPEN}`)
     })
   }
 
@@ -131,19 +131,23 @@ class Treeview {
   }
 
   // Static
-
   static _jQueryInterface(config) {
     return this.each(function () {
       let data = $(this).data(DATA_KEY)
-      const _options = $.extend({}, Default, $(this).data())
+      const _config = $.extend({}, Default, typeof config === 'object' ? config : $(this).data())
 
       if (!data) {
-        data = new Treeview($(this), _options)
+        data = new Treeview($(this), _config)
         $(this).data(DATA_KEY, data)
-      }
+        data._init()
+      } else if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`)
+        }
 
-      if (config === 'init') {
         data[config]()
+      } else if (typeof config === 'undefined') {
+        data._init()
       }
     })
   }

build/npm/.eslintrc.json

@@ -9,6 +9,8 @@
   "extends": "../../.eslintrc.json",
   "rules": {
     "no-console": "off",
-    "strict": "error"
+    "strict": "error",
+    "unicorn/prefer-module": "off",
+    "unicorn/prefer-node-protocol": "off"
   }
 }

build/npm/DocsPublish.js

@@ -21,11 +21,14 @@ class Publish {
       const arg = process.argv[2]
       switch (arg) {
         case '-v':
-        case '--verbose':
+        case '--verbose': {
           this.options.verbose = true
           break
-        default:
+        }
+
+        default: {
           throw new Error(`Unknown option ${arg}`)
+        }
       }
     }
   }

build/npm/Plugins.js

@@ -369,14 +369,14 @@ const Plugins = [
     from: 'node_modules/jsgrid/demos/db.js',
     to: 'plugins/jsgrid/demos/db.js'
   },
-  // flag-icon-css
+  // flag-icons
   {
-    from: 'node_modules/flag-icon-css/css',
-    to: 'plugins/flag-icon-css/css'
+    from: 'node_modules/flag-icons/css',
+    to: 'plugins/flag-icons/css'
   },
   {
-    from: 'node_modules/flag-icon-css/flags',
-    to: 'plugins/flag-icon-css/flags'
+    from: 'node_modules/flag-icons/flags',
+    to: 'plugins/flag-icons/flags'
   },
   // bootstrap4-duallistbox
   {
@@ -393,11 +393,6 @@ const Plugins = [
     from: 'node_modules/ekko-lightbox/dist',
     to: 'plugins/ekko-lightbox/'
   },
-  // bootstrap-switch
-  {
-    from: 'node_modules/bootstrap-switch/dist',
-    to: 'plugins/bootstrap-switch/'
-  },
   // jQuery Validate
   {
     from: 'node_modules/jquery-validation/dist/',

build/npm/Publish.js

@@ -20,11 +20,14 @@ class Publish {
       const arg = process.argv[2]
       switch (arg) {
         case '-v':
-        case '--verbose':
+        case '--verbose': {
           this.options.verbose = true
           break
-        default:
+        }
+
+        default: {
           throw new Error(`Unknown option ${arg}`)
+        }
       }
     }
   }

build/scss/_adminlte.raw.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

build/scss/_alerts.scss

@@ -35,7 +35,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   @each $color, $value in $theme-colors-alt {
     .alert-#{$color} {
       color: color-yiq($value);

build/scss/_bootstrap-variables.scss

@@ -112,6 +112,16 @@ $enable-responsive-font-sizes:                false !default;
 $enable-validation-icons:                     true !default;
 $enable-deprecation-messages:                 true !default;
 
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+
 // Spacing
 //
 // Control the default styling of most Bootstrap elements by modifying these
@@ -253,7 +263,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      ($spacer / 2) !default;
+$headings-margin-bottom:      ($spacer * .5) !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -420,7 +430,7 @@ $input-height-border:                   $input-border-width * 2 !default;
 
 $input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
 $input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
-$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y * .5}) !default;
 
 $input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
 
@@ -491,7 +501,8 @@ $custom-select-bg:                  $white !default;
 $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
 $custom-select-indicator-color:     $gray-800 !default;
-$custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 $custom-select-border-width:        $input-btn-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
@@ -596,8 +607,8 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2) !default;
-$navbar-padding-x:                  ($spacer / 2) !default;
+$navbar-padding-y:                  ($spacer * .5) !default;
+$navbar-padding-x:                  ($spacer * .5) !default;
 
 $navbar-nav-link-padding-x:         1rem !default;
 
@@ -605,7 +616,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -675,7 +686,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 ($grid-gutter-width / 2) !default;
+$card-group-margin:                 ($grid-gutter-width * .5) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;

build/scss/_buttons.scss

@@ -53,6 +53,23 @@
     background-color: darken($button-default-background-color, 5%);
     color: darken($button-default-color, 10%);
   }
+
+  &.disabled,
+  &:disabled {
+    color: $button-default-color;
+    background-color: $button-default-background-color;
+  }
+}
+
+.btn-outline-light {
+  color: darken($light, 20%);
+  border-color: darken($light, 20%);
+
+  &.disabled,
+  &:disabled {
+    color: darken($light, 20%);
+    border-color: darken($light, 20%);
+  }
 }
 
 // Application buttons
@@ -69,6 +86,7 @@
   position: relative;
   text-align: center;
 
+  /* stylelint-disable selector-class-pattern */
   // Icons within the btn
   > .fa,
   > .fas,
@@ -85,6 +103,7 @@
   > .svg-inline--fa {
     margin: 0 auto;
   }
+  /* stylelint-enable selector-class-pattern */
 
   &:hover {
     background-color: $button-default-background-color;
@@ -113,7 +132,7 @@
   @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
 }
 
-.dark-mode {
+@include dark-mode () {
   .btn-default,
   .btn-app {
     background-color: lighten($dark, 2.5%);
@@ -142,13 +161,21 @@
 
   @each $color, $value in $theme-colors-alt {
     .btn-#{$color} {
-      @include button-variant($value, $value);
+      @if $color == dark {
+        @include button-variant(darken($value, 5%), lighten($value, 10%));
+      } @else {
+        @include button-variant($value, $value);
+      }
     }
   }
 
   @each $color, $value in $theme-colors-alt {
     .btn-outline-#{$color} {
-      @include button-outline-variant($value);
+      @if $color == dark {
+        @include button-outline-variant(darken($value, 20%));
+      } @else {
+        @include button-outline-variant($value);
+      }
     }
   }
 }

build/scss/_callout.scss

@@ -50,7 +50,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .callout {
     background-color: lighten($dark, 5%);
 

build/scss/_cards.scss

@@ -62,7 +62,7 @@
     }
   }
 
-  .nav.flex-column {
+  .nav.flex-column:not(.nav-sidebar) {
     > li {
       border-bottom: 1px solid $card-border-color;
       margin: 0;
@@ -213,7 +213,7 @@ html.maximized-card {
 .card-header {
   background-color: transparent;
   border-bottom: 1px solid $card-border-color;
-  padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
+  padding: (($card-spacer-y * .5) * 2) $card-spacer-x;
   position: relative;
 
   @if $enable-rounded {
@@ -226,13 +226,13 @@ html.maximized-card {
 
   > .card-tools {
     float: right;
-    margin-right: -$card-spacer-x / 2;
+    margin-right: -$card-spacer-x * .5;
 
     .input-group,
     .nav,
     .pagination {
-      margin-bottom: -$card-spacer-y / 2.5;
-      margin-top: -$card-spacer-y / 2.5;
+      margin-bottom: -$card-spacer-y * .4;
+      margin-top: -$card-spacer-y * .4;
     }
 
     [data-toggle="tooltip"] {
@@ -258,7 +258,7 @@ html.maximized-card {
   background-color: transparent;
   color: $gray-500;
   font-size: $font-size-sm;
-  margin: -(($card-spacer-y / 2) * 2) 0;
+  margin: -(($card-spacer-y * .5) * 2) 0;
   padding: .25rem .5rem;
 
   .btn-group.show &,
@@ -411,6 +411,7 @@ html.maximized-card {
       display: none;
       float: right;
 
+      /* stylelint-disable selector-class-pattern */
       // icons
       > .fa,
       > .fas,
@@ -423,6 +424,7 @@ html.maximized-card {
         cursor: pointer;
         margin-right: 5px;
       }
+      /* stylelint-enable selector-class-pattern */
     }
 
     &:hover .tools {
@@ -479,7 +481,7 @@ html.maximized-card {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
 
   // Color variants
   @each $name, $color in $theme-colors-alt {
@@ -504,8 +506,11 @@ html.maximized-card {
     .card-footer {
       background-color: rgba($black, .1);
     }
+    &.card-outline-tabs {
+      border-top: 0;
+    }
     &.card-outline-tabs .card-header a:hover {
-      border-color: $gray-600;
+      border-top-color: $gray-600;
       border-bottom-color: transparent;
     }
     &:not(.card-outline) > .card-header a.active {

build/scss/_carousel.scss

@@ -10,6 +10,7 @@
     margin-right: 20px;
   }
 
+  /* stylelint-disable selector-class-pattern */
   > .fa,
   > .fas,
   > .far,
@@ -25,4 +26,5 @@
     top: 50%;
     z-index: 5;
   }
+  /* stylelint-enable selector-class-pattern */
 }

build/scss/_colors.scss

@@ -12,6 +12,21 @@
   @include background-variant($name, $color);
 }
 
+@media print {
+  .table td,
+  .table th {
+    // Background colors (theme colors)
+    @each $name, $color in $theme-colors {
+      @include background-variant($name, $color);
+    }
+
+    // Background colors (colors)
+    @each $name, $color in $colors {
+      @include background-variant($name, $color);
+    }
+  }
+}
+
 .bg-gray {
   background-color: $gray-500;
   color: color-yiq($gray-500);
@@ -90,7 +105,7 @@ a.text-muted:hover {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .bg-light {
     background-color: lighten($dark, 7.5%) !important;
     color: $white !important;
@@ -99,7 +114,7 @@ a.text-muted:hover {
   .text-dark,
   .link-black,
   .link-dark {
-    color: $gray-400;
+    color: $gray-400 !important;
   }
 
   // Background colors (theme colors)
@@ -139,6 +154,10 @@ a.text-muted:hover {
   @each $name, $color in $colors-alt {
     @include accent-variant($name, $color);
   }
+
+  .border-dark {
+    border-color: lighten($dark, 10%) !important;
+  }
 }
 
 //

build/scss/_control-sidebar.scss

@@ -18,7 +18,10 @@ html.control-sidebar-animate {
     display: none;
     right: -$control-sidebar-width;
     width: $control-sidebar-width;
-    @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
+    @include transition(
+      right $transition-speed $transition-fn,
+      display $transition-speed $transition-fn
+    );
   }
 
   &::before {
@@ -55,7 +58,7 @@ body.text-sm {
 // Control sidebar open state
 .control-sidebar-open {
   .control-sidebar {
-    display: block;
+    display: block !important;
 
     &,
     &::before {
@@ -80,7 +83,10 @@ body.text-sm {
     &,
     &::before {
       right: 0;
-      @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
+      @include transition(
+        right $transition-speed $transition-fn,
+        display $transition-speed $transition-fn
+      );
     }
   }
 

build/scss/_direct-chat.scss

@@ -223,7 +223,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .direct-chat-text {
     background-color: lighten($dark, 7.5%);
     border-color: lighten($dark, 10%);

build/scss/_dropdown.scss

@@ -117,7 +117,7 @@
 // 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);
+  @include animation(flip-in-x .7s both);
   backface-visibility: visible !important;
 }
 
@@ -244,7 +244,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .dropdown-menu {
     background-color: $dark;
     color: $white;

build/scss/_forms.scss

@@ -33,7 +33,7 @@
     }
   }
 }
-
+/* stylelint-disable selector-class-pattern */
 // Support icons in form-control
 .form-control-feedback {
   &.fa,
@@ -105,6 +105,7 @@
     }
   }
 }
+/* stylelint-enable selector-class-pattern */
 
 label:not(.form-check-label):not(.custom-file-label) {
   font-weight: $font-weight-bold;
@@ -358,7 +359,7 @@ body.text-sm {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .form-control:not(.form-control-navbar):not(.form-control-sidebar),
   .custom-select,
   .custom-file-label,
@@ -379,6 +380,14 @@ body.text-sm {
     border-color: $gray-600;
   }
 
+  .custom-select {
+    background: $dark $custom-select-dark-background;
+
+    &[multiple]{
+      background: $dark;
+    }
+  }
+
   .input-group-text {
     border-color: $gray-600;
   }
@@ -390,6 +399,18 @@ body.text-sm {
     color: $white;
   }
 
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    -webkit-text-fill-color: $white;
+  }
+
   .custom-range {
     &::-webkit-slider-runnable-track {
       background-color: lighten($dark, 7.5%);

build/scss/_info-box.scss

@@ -48,6 +48,7 @@
     line-height: 1.8;
     flex: 1;
     padding: 0 10px;
+    overflow: hidden;
   }
 
   .info-box-number {
@@ -145,7 +146,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .info-box {
     background-color: $dark;
     color: $white;

build/scss/_layout.scss

@@ -2,7 +2,7 @@
 // Core: Layout
 //
 
-html.scroll-smooth {
+html {
   scroll-behavior: smooth;
 }
 
@@ -26,6 +26,7 @@ body,
     &::before {
       margin: 0 auto;
       max-width: $boxed-layout-max-width;
+      overflow: hidden;
     }
 
     .main-sidebar {
@@ -149,6 +150,19 @@ body,
       }
     }
 
+    @each $name, $color in $colors {
+      .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-dark-bg;
+      }
+
+      .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-light-bg;
+      }
+    }
+
+    .main-header.border-bottom-0 ~ .content-wrapper {
+      margin-top: $main-header-height-inner;
+    }
     .content-wrapper {
       margin-top: $main-header-height;
     }
@@ -267,17 +281,6 @@ body,
           z-index: $zindex-main-header + 1;
         }
 
-        // Sidebar variants brand-link fix
-        @each $name, $color in $theme-colors {
-          .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
-            background-color: $sidebar-dark-bg;
-          }
-
-          .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
-            background-color: $sidebar-light-bg;
-          }
-        }
-
         .content-wrapper {
           margin-top: $main-header-height;
         }
@@ -581,6 +584,7 @@ body:not(.layout-fixed) {
       height: calc(100vh - #{$main-header-height});
       overflow-y: auto;
       @include scrollbar-width-thin();
+      @include scrollbar-color-gray();
     }
   }
 }
@@ -647,7 +651,7 @@ body:not(.layout-fixed) {
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   background-color: $dark-main-bg;
   color: $white;
 

build/scss/_main-header.scss

@@ -17,6 +17,7 @@
       height: $nav-link-sm-height;
       padding: $nav-link-sm-padding-y $nav-link-padding-x;
 
+      /* stylelint-disable selector-class-pattern */
       > .fa,
       > .fas,
       > .far,
@@ -27,8 +28,8 @@
       > .ion {
         font-size: $font-size-sm;
       }
+      /* stylelint-enable selector-class-pattern */
     }
-
   }
 
   .navbar-nav {
@@ -58,7 +59,7 @@
 
 // Add this class to images within a nav-link
 .navbar-img {
-  height: $main-header-height / 2;
+  height: calc(#{$main-header-height} * .5);
   width: auto;
 }
 

build/scss/_main-sidebar.scss

@@ -14,18 +14,26 @@
       outline: none;
     }
   }
-
 }
 
 .sidebar {
   height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
-  overflow-x: none;
+  overflow-x: hidden;
   overflow-y: initial;
   padding-bottom: $sidebar-padding-y;
   padding-left: $sidebar-padding-x;
   padding-right: $sidebar-padding-x;
   padding-top: $sidebar-padding-y;
-  @include scrollbar-width-thin();
+  @include scrollbar-color-gray();
+  @include scrollbar-width-none();
+
+  &:hover {
+    @include scrollbar-width-thin();
+  }
+
+  .brand-link.border-bottom-0 ~ & {
+    height: calc(100% - #{$main-header-height-inner});
+  }
 }
 
 // Sidebar user panel
@@ -105,6 +113,7 @@
   .menu-open,
   .menu-is-opening {
     > .nav-link {
+      svg.right,
       i.right {
         @include rotate(-90deg);
       }
@@ -122,6 +131,7 @@
       text-align: center;
       width: $sidebar-nav-icon-width;
 
+      /* stylelint-disable selector-class-pattern */
       &.fa,
       &.fas,
       &.far,
@@ -132,6 +142,7 @@
       &.ion {
         font-size: 1.1rem;
       }
+      /* stylelint-enable selector-class-pattern */
     }
 
     .float-right {
@@ -191,9 +202,9 @@
   }
 }
 
-.sidebar-is-opening .nav-sidebar {
+.sidebar-is-opening .sidebar .nav-sidebar {
   .nav-link p {
-    animation-name: fadeIn;
+    animation-name: fade-in;
     animation-duration: $transition-speed;
     animation-fill-mode: both;
   }
@@ -390,7 +401,7 @@
     // Hover and active states
     &.menu-open > .nav-link,
     &:hover > .nav-link,
-    > .nav-link:focus  {
+    > .nav-link:focus {
       background-color: $sidebar-dark-hover-bg;
       color: $sidebar-dark-hover-color;
     }
@@ -504,7 +515,7 @@
 
 // Nav Flat
 .nav-flat {
-  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+  margin: (-$sidebar-padding-x * .5) (-$sidebar-padding-x) 0;
 
   .nav-item {
     > .nav-link {
@@ -565,7 +576,7 @@
     }
   }
 
-  .sidebar-collapse &.nav-child-indent {
+  .sidebar-collapse &.nav-child-indent .sidebar {
     .nav-treeview {
       .nav-icon {
         margin-left: .55rem;
@@ -669,7 +680,7 @@
 }
 
 .nav-legacy {
-  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+  margin: (-$sidebar-padding-x * .5) (-$sidebar-padding-x) 0;
 
   &.nav-sidebar .nav-item {
     > .nav-link {
@@ -721,39 +732,38 @@
       .nav-icon {
         @include transition(margin-left $transition-fn $transition-speed);
         margin-left: .6rem;
-
       }
     }
   }
 
-  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
-  .sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini-xs.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
-    .nav-treeview {
-      padding-left: 1rem;
-
-      .nav-treeview {
-        padding-left: 2rem;
-        margin-left: -1rem;
-      }
-    }
-  }
-
-  .sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
-  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
-  .sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
-  .sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
-    .nav-treeview {
-      padding-left: .5rem;
-
+  .sidebar-mini.sidebar-collapse,
+  .sidebar-mini-md.sidebar-collapse,
+  .sidebar-mini-xs.sidebar-collapse {
+    .main-sidebar.sidebar-focused &.nav-child-indent,
+    .main-sidebar:hover &.nav-child-indent {
       .nav-treeview {
         padding-left: 1rem;
-        margin-left: -.5rem;
+
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+        }
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse.text-sm,
+  .sidebar-mini-md.sidebar-collapse.text-sm,
+  .sidebar-mini-xs.sidebar-collapse.text-sm {
+    .main-sidebar.sidebar-focused &.nav-child-indent,
+    .main-sidebar:hover &.nav-child-indent {
+      .nav-treeview {
+        padding-left: .5rem;
+
+        .nav-treeview {
+          padding-left: 1rem;
+          margin-left: -.5rem;
+        }
       }
     }
   }
@@ -761,40 +771,41 @@
   .sidebar-mini.sidebar-collapse &,
   .sidebar-mini-md.sidebar-collapse &,
   .sidebar-mini-xs.sidebar-collapse & {
-    > .nav-item > .nav-link {
-      .nav-icon {
-        margin-left: .55rem;
-      }
-
-      &.active {
-        > .nav-icon{
-          margin-left: .36rem;
+    .sidebar {
+      > .nav-item > .nav-link {
+        .nav-icon {
+          margin-left: .55rem;
+        }
+        &.active {
+          > .nav-icon {
+            margin-left: .36rem;
+          }
         }
       }
-    }
-
-    &.nav-child-indent {
-      .nav-treeview {
+      &.nav-child-indent {
         .nav-treeview {
-          padding-left: 0;
-          margin-left: 0;
+          .nav-treeview {
+            padding-left: 0;
+            margin-left: 0;
+          }
         }
       }
     }
   }
 
-
   .sidebar-mini.sidebar-collapse.text-sm &,
   .sidebar-mini-md.sidebar-collapse.text-sm &,
   .sidebar-mini-xs.sidebar-collapse.text-sm & {
-    > .nav-item > .nav-link {
-      .nav-icon {
-        margin-left: .75rem;
-      }
+    .sidebar {
+      > .nav-item > .nav-link {
+        .nav-icon {
+          margin-left: .75rem;
+        }
 
-      &.active {
-        > .nav-icon{
-          margin-left: calc(.75rem - 3px);
+        &.active {
+          > .nav-icon {
+            margin-left: calc(.75rem - 3px);
+          }
         }
       }
     }
@@ -845,35 +856,34 @@
   }
 }
 
-
 .nav-collapse-hide-child {
   .menu-open > .nav-treeview {
     max-height: min-content;
-    animation-name: fadeIn;
+    animation-name: fade-in;
     animation-duration: $transition-speed;
     animation-fill-mode: both;
   }
 
-  .sidebar-collapse & {
+  .sidebar-collapse .sidebar:not(:hover) & {
     .menu-open > .nav-treeview {
       max-height: 0;
-      animation-name: fadeOut;
+      animation-name: fade-out;
       animation-duration: $transition-speed;
       animation-fill-mode: both;
     }
   }
 
-  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
-  .sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
-    .menu-open > .nav-treeview {
-      max-height: min-content;
-      animation-name: fadeIn;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
+  .sidebar-mini.sidebar-collapse,
+  .sidebar-mini-md.sidebar-collapse,
+  .sidebar-mini-xs.sidebar-collapse {
+    .main-sidebar.sidebar-focused &,
+    .main-sidebar:not(.sidebar-no-expand):hover & {
+      .menu-open > .nav-treeview {
+        max-height: min-content;
+        animation-name: fade-in;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+      }
     }
   }
 }
@@ -882,13 +892,13 @@
 .nav-compact {
   .nav-link,
   .nav-header {
-    padding-top: ($nav-link-padding-y / 2);
-    padding-bottom: ($nav-link-padding-y / 2);
+    padding-top: ($nav-link-padding-y * .5);
+    padding-bottom: ($nav-link-padding-y * .5);
   }
 
   .nav-header:not(:first-of-type) {
     padding-top: ($nav-link-padding-y * 1.5);
-    padding-bottom: ($nav-link-padding-y / 2);
+    padding-bottom: ($nav-link-padding-y * .5);
   }
 
   .nav-link > .right,
@@ -1003,6 +1013,9 @@
     z-index: 9999;
     position: relative;
   }
+  .control-sidebar {
+    z-index: 9999;
+  }
 }
 
 // Sidebar Search
@@ -1104,6 +1117,15 @@
     }
   }
 
+  &.text-sm .main-sidebar-custom {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-sm-inner} + #{$sidebar-custom-height * .95}) + #{$main-header-bottom-border-width}));
+    }
+    .sidebar-custom {
+      height: $sidebar-custom-height * .95;
+      padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
+    }
+  }
   .main-sidebar-custom {
     .sidebar {
       height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height}) + #{$main-header-bottom-border-width}));
@@ -1113,6 +1135,8 @@
       height: $sidebar-custom-height;
       padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
     }
+
+    height: stretch;
   }
 
   .main-sidebar-custom-lg {
@@ -1145,7 +1169,18 @@
   }
 }
 
-.dark-mode {
+.sidebar-hidden,
+.sidebar-hidden.sidebar-mini.sidebar-collapse {
+  .main-sidebar {
+    display: none !important;
+  }
+  .content-wrapper,
+  .main-header {
+    margin-left: 0 !important;
+  }
+}
+
+@include dark-mode() {
   @each $name, $color in $theme-colors-alt {
     .sidebar-dark-#{$name},
     .sidebar-light-#{$name} {

build/scss/_miscellaneous.scss

@@ -264,6 +264,7 @@
     justify-content: center;
     z-index: 50;
 
+    /* stylelint-disable selector-class-pattern */
     > .fa,
     > .fas,
     > .far,
@@ -274,10 +275,12 @@
     > .ion {
       color: $gray-800;
     }
+    /* stylelint-enable selector-class-pattern */
 
     &.dark {
       background-color: rgba($black, .5);
 
+      /* stylelint-disable selector-class-pattern */
       > .fa,
       > .fas,
       > .far,
@@ -288,6 +291,7 @@
       > .ion {
         color: $gray-400;
       }
+      /* stylelint-enable selector-class-pattern */
     }
   }
 }
@@ -482,7 +486,7 @@ blockquote {
   padding: .375rem .6rem;
 }
 
-.dark-mode {
+@include dark-mode () {
   a:not(.btn):hover {
     color: lighten($link-color, 10%);
   }

build/scss/_mixins.scss

@@ -3,12 +3,14 @@
 //
 
 @import "mixins/animations";
+@import "mixins/scrollbar";
 @import "mixins/cards";
 @import "mixins/sidebar";
 @import "mixins/navbar";
 @import "mixins/accent";
 @import "mixins/custom-forms";
 @import "mixins/backgrounds";
+@import "mixins/dark-mode";
 @import "mixins/direct-chat";
 @import "mixins/toasts";
 @import "mixins/touch-support";

build/scss/_modals.scss

@@ -43,7 +43,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .modal-header,
   .modal-footer {
     border-color: $gray-600;

build/scss/_navs.scss

@@ -98,7 +98,21 @@
   @include navbar-variant($color, $value);
 }
 
-.dark-mode {
+.navbar-nav-not-expanded {
+  flex-direction: row;
+
+  .dropdown-menu {
+    position: absolute;
+  }
+
+  .nav-link {
+    padding-right: $navbar-nav-link-padding-x;
+    padding-left: $navbar-nav-link-padding-x;
+  }
+}
+
+
+@include dark-mode () {
   .nav-pills .nav-link {
     color: $gray-400;
   }

build/scss/_pagination.scss

@@ -42,7 +42,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .page-item {
     &.disabled a,
     &.disabled .page-link {
@@ -58,6 +58,7 @@
     &.active {
       .page-link {
         background-color: $primary-alt;
+        border-color: $primary-alt;
         color: $white;
 
         &:hover,

build/scss/_preloader.scss

@@ -14,7 +14,7 @@
   z-index: $zindex-preloader;
 }
 
-.dark-mode {
+@include dark-mode () {
   .preloader {
     background-color: $dark-main-bg;
     color: $white;

build/scss/_products.scss

@@ -55,7 +55,7 @@
 }
 
 
-.dark-mode {
+@include dark-mode () {
   .products-list > .item {
     background-color: $dark;
     color: $white;

build/scss/_progress-bars.scss

@@ -65,7 +65,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .progress {
     background: lighten($dark, 7.5%);
   }

build/scss/_root.scss

@@ -1,4 +1,4 @@
-.dark-mode {
+@include dark-mode () {
   :root {
     // Custom variable values only support SassScript inside `#{}`.
     @each $color, $value in $colors-alt {

build/scss/_sidebar-mini.scss

@@ -247,6 +247,12 @@
   &.sidebar-mini-md,
   &.sidebar-mini-xs {
     .main-sidebar {
+
+      // Hide the sidebar search results when mini mode is active.
+      .sidebar-search-results {
+        display: none;
+      }
+
       .nav-sidebar {
         .nav-link {
           width: $sidebar-mini-width - $sidebar-padding-x * 2;
@@ -272,11 +278,26 @@
 
       &.sidebar-focused,
       &:hover {
-        .nav-link {
-          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+        &:not(.hide-nav-header-on-hover) {
+          .nav-header {
+            display: inline-block;
+          }
         }
-        .nav-header {
-          display: inline-block;
+
+        // Show sidebar search when hover/focus on the sidebar mini mode.
+        &:not(.sidebar-no-expand) {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
+          .form-control-sidebar {
+            display: inline-block;
+          }
+          .form-control-sidebar ~ .input-group-append {
+            display: flex;
+          }
+          .sidebar-search-open .sidebar-search-results {
+            display: inline-block;
+          }
         }
 
         .nav-child-indent {
@@ -395,13 +416,6 @@
             }
           }
         }
-        .sidebar {
-          @include scrollbar-width-thin();
-        }
-      }
-
-      .sidebar {
-        @include scrollbar-width-none();
       }
     }
 
@@ -422,14 +436,14 @@
       }
 
       .logo-xs {
-        animation-name: fadeIn;
+        animation-name: fade-in;
         animation-duration: $transition-speed;
         animation-fill-mode: both;
         visibility: visible;
       }
 
       .logo-xl {
-        animation-name: fadeOut;
+        animation-name: fade-out;
         animation-duration: $transition-speed;
         animation-fill-mode: both;
         visibility: hidden;
@@ -439,19 +453,22 @@
         padding-left: 0;
       }
 
-      .brand-text,
-      .user-panel > .info,
-      .nav-sidebar .nav-link p {
-        margin-left: -10px;
-        animation-name: fadeOut;
-        animation-duration: $transition-speed;
-        animation-fill-mode: both;
-        visibility: hidden;
-        width: 0;
-      }
+      .sidebar {
+        .brand-text,
+        .user-panel > .info,
+        .nav-sidebar .nav-link p {
+          margin-left: -10px;
+          animation-name: fade-out;
+          animation-duration: $transition-speed;
+          animation-fill-mode: both;
+          visibility: hidden;
+          display: inline-block;
+          width: 0;
+        }
 
-      .nav-sidebar > .nav-item .nav-icon {
-        margin-right: 0;
+        .nav-sidebar > .nav-item .nav-icon {
+          margin-right: 0;
+        }
       }
     }
   }

build/scss/_table.scss

@@ -86,7 +86,27 @@
     transition: transform $transition-speed linear;
   }
   &[aria-expanded="true"] {
-    td i.expandable-table-caret {
+    i.expandable-table-caret {
+      // stylelint-disable selector-max-attribute
+      &[class*="right"] {
+        transform: rotate(90deg);
+      }
+      &[class*="left"] {
+        transform: rotate(-90deg);
+      }
+      // stylelint-enable selector-max-attribute
+    }
+  }
+}
+
+[aria-expanded="true"] {
+  cursor: pointer;
+
+  i.expandable-table-caret {
+    transition: transform $transition-speed linear;
+  }
+  [data-widget="expandable-table"] {
+    i.expandable-table-caret {
       // stylelint-disable selector-max-attribute
       &[class*="right"] {
         transform: rotate(90deg);
@@ -123,7 +143,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .table-bordered {
     &,
     td,

build/scss/_text.scss

@@ -38,7 +38,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .text-muted {
     color: $gray-500 !important;
   }

build/scss/_timeline.scss

@@ -83,6 +83,8 @@
         }
       }
     }
+
+    /* stylelint-disable selector-class-pattern */
     // The icons at line
     > .fa,
     > .fas,
@@ -106,6 +108,7 @@
     > .svg-inline--fa {
       padding: 7px;
     }
+    /* stylelint-enable selector-class-pattern */
   }
   // Time label
   > .time-label {
@@ -133,7 +136,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .timeline {
     &::before {
       background-color: $gray-600;

build/scss/_toasts.scss

@@ -46,7 +46,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .toast {
     background-color: rgba($dark, .85);
     color: $white;

build/scss/_users-list.scss

@@ -44,7 +44,7 @@
   font-size: 12px;
 }
 
-.dark-mode {
+@include dark-mode () {
   .users-list-name {
     color: $gray-400;
   }

build/scss/_variables.scss

@@ -138,7 +138,7 @@ $sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
 // --------------------------------------------------------
 $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
 $sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
-$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
+$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
 
 // CONTROL SIDEBAR
 // --------------------------------------------------------
@@ -233,3 +233,16 @@ $ribbon-xl-wrapper-size: 180px !default;
 $ribbon-xl-width: 240px !default;
 $ribbon-xl-top: 47px !default;
 $ribbon-xl-right: 4px !default;
+
+// CUSTOM FORM SELECT
+// --------------------------------------------------------
+
+$custom-select-dark-indicator-color:     $white !default;
+$custom-select-dark-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-dark-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-dark-background:          escape-svg($custom-select-dark-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+// ENABLE DARK MODE
+// --------------------------------------------------------
+$enable-dark-mode: true !default;  // requires `@import "variables-alt";`
+
+//

build/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

build/scss/mixins/_accent.scss

@@ -11,7 +11,7 @@
     $pagination-active-border-color: $color;
 
     .btn-link,
-    a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn),
+    a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn),
     .nav-tabs .nav-link {
       color: $link-color;
 
@@ -91,12 +91,14 @@
       }
     }
   }
-  .dark-mode.accent-#{$name} {
-    .page-item {
-      .page-link {
-        &:hover,
-        &:focus {
-          color: lighten($link-color, 5%);
+  @include dark-mode () {
+    &.accent-#{$name} {
+      .page-item {
+        .page-link {
+          &:hover,
+          &:focus {
+            color: lighten($link-color, 5%);
+          }
         }
       }
     }

build/scss/mixins/_animations.scss

@@ -3,7 +3,7 @@
 //
 
 
-@keyframes flipInX {
+@keyframes flip-in-x {
   0% {
     transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
     transition-timing-function: ease-in;
@@ -30,7 +30,7 @@
 }
 
 
-@keyframes fadeIn {
+@keyframes fade-in {
   from {
     opacity: 0;
   }
@@ -40,7 +40,7 @@
   }
 }
 
-@keyframes fadeOut {
+@keyframes fade-out {
   from {
     opacity: 1;
   }
@@ -115,5 +115,3 @@
     transform: none;
   }
 }
-
-//

build/scss/mixins/_backgrounds.scss

@@ -4,7 +4,7 @@
 
 // Background Variant
 @mixin background-variant($name, $color) {
-  .bg-#{$name} {
+  #{if(&, "&.bg-#{$name}",".bg-#{$name}")} {
     background-color: #{$color} !important;
 
     &,
@@ -37,8 +37,6 @@
     color: color-yiq($color);
 
     &.btn {
-      &.disabled,
-      &:disabled,
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active,
       .show > &.dropdown-toggle {
@@ -59,6 +57,13 @@
         border-color: darken($color, 12.5%);
         color: color-yiq(darken($color, 10%));
       }
+
+      &:disabled,
+      &.disabled {
+        background-image: none !important;
+        border-color: $color;
+        color: color-yiq($color);
+      }
     }
   }
 }

build/scss/mixins/_cards.scss

@@ -25,14 +25,12 @@
 
     &.card-outline-tabs {
       > .card-header {
-        a {
-          &:hover {
-            border-top: 3px solid $nav-tabs-border-color;
-          }
-
-          &.active {
-            border-top: 3px solid $color;
-          }
+        a:hover{
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+        a.active,
+        a.active:hover{
+          border-top: 3px solid $color;
         }
       }
     }

build/scss/mixins/_dark-mode.scss

@@ -0,0 +1,11 @@
+//
+// Mixins: Dark Mode Controll
+//
+
+@mixin dark-mode {
+  @if $enable-dark-mode {
+    .dark-mode {
+      @content;
+    }
+  }
+}

build/scss/mixins/_miscellaneous.scss

@@ -30,13 +30,4 @@
   background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
 }
 
-@mixin scrollbar-width-thin() {
-  scrollbar-width: thin;
-  scrollbar-color: #a9a9a9 transparent;
-}
-
-@mixin scrollbar-width-none() {
-  scrollbar-width: none;
-}
-
 //

build/scss/mixins/_scrollbar.scss

@@ -0,0 +1,38 @@
+//
+// Mixins: Scrollbar
+//
+
+@mixin scrollbar-color-gray() {
+  scrollbar-color: #a9a9a9 transparent;
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #a9a9a9;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+@mixin scrollbar-width-thin() {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: .5rem;
+    height: .5rem;
+  }
+}
+
+@mixin scrollbar-width-none() {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+}
+
+//

build/scss/mixins/_sidebar.scss

@@ -45,23 +45,23 @@
       display: none;
     }
 
-    .nav-sidebar .nav-link p {
+    .sidebar .nav-sidebar .nav-link p {
       width: 0;
       white-space: nowrap;
     }
 
     .sidebar .user-panel > .info,
-    .nav-sidebar .nav-link p,
+    .sidebar .nav-sidebar .nav-link p,
     .brand-text {
       margin-left: -10px;
-      animation-name: fadeOut;
+      animation-name: fade-out;
       animation-duration: $transition-speed;
       animation-fill-mode: both;
       visibility: hidden;
     }
 
     .logo-xl {
-      animation-name: fadeOut;
+      animation-name: fade-out;
       animation-duration: $transition-speed;
       animation-fill-mode: both;
       visibility: hidden;
@@ -69,7 +69,7 @@
 
     .logo-xs {
       display: inline-block;
-      animation-name: fadeIn;
+      animation-name: fade-in;
       animation-duration: $transition-speed;
       animation-fill-mode: both;
       visibility: visible;
@@ -92,55 +92,57 @@
         }
       }
 
-      &:hover,
-      &.sidebar-focused {
-        width: $sidebar-width;
-
-        .brand-link {
+      &:not(.sidebar-no-expand) {
+        &:hover,
+        &.sidebar-focused {
           width: $sidebar-width;
-        }
 
-        .user-panel {
-          text-align: left;
-
-          .image {
-            float: left;
+          .brand-link {
+            width: $sidebar-width;
           }
-        }
 
-        .user-panel > .info,
-        .nav-sidebar .nav-link p,
-        .brand-text,
-        .logo-xl {
-          display: inline-block;
-          margin-left: 0;
-          animation-name: fadeIn;
-          animation-duration: $transition-speed;
-          animation-fill-mode: both;
-          visibility: visible;
-        }
+          .user-panel {
+            text-align: left;
 
-        .logo-xs {
-          animation-name: fadeOut;
-          animation-duration: $transition-speed;
-          animation-fill-mode: both;
-          visibility: hidden;
-        }
+            .image {
+              float: left;
+            }
+          }
 
-        .brand-image {
-          margin-right: .5rem;
-        }
+          .user-panel > .info,
+          .sidebar .nav-sidebar .nav-link p,
+          .brand-text,
+          .logo-xl {
+            display: inline-block;
+            margin-left: 0;
+            animation-name: fade-in;
+            animation-duration: $transition-speed;
+            animation-fill-mode: both;
+            visibility: visible;
+          }
 
-        // Make the sidebar links, menus, labels, badges
-        // and angle icons disappear
-        .sidebar-form,
-        .user-panel > .info {
-          display: block !important;
-          transform: translateZ(0);
-        }
+          .logo-xs {
+            animation-name: fade-out;
+            animation-duration: $transition-speed;
+            animation-fill-mode: both;
+            visibility: hidden;
+          }
 
-        .nav-sidebar > .nav-item > .nav-link > span {
-          display: inline-block !important;
+          .brand-image {
+            margin-right: .5rem;
+          }
+
+          // Make the sidebar links, menus, labels, badges
+          // and angle icons disappear
+          .sidebar-form,
+          .user-panel > .info {
+            display: block !important;
+            transform: translateZ(0);
+          }
+
+          .nav-sidebar > .nav-item > .nav-link > span {
+            display: inline-block !important;
+          }
         }
       }
     }

build/scss/pages/_iframe.scss

@@ -15,6 +15,10 @@ body.iframe-mode {
 
 body.iframe-mode-fullscreen {
   overflow: hidden;
+
+  &.layout-navbar-fixed .wrapper .content-wrapper {
+    margin-top: 0 !important;
+  }
 }
 
 .content-wrapper {
@@ -32,13 +36,13 @@ body.iframe-mode-fullscreen {
 
       &:hover,
       &:focus {
-        animation-name: fadeIn;
+        animation-name: fade-in;
         animation-duration: $transition-speed;
         animation-fill-mode: both;
         visibility: visible;
       }
 
-      @include on-touch-device () {
+      @include on-touch-device() {
         visibility: visible;
       }
     }
@@ -55,12 +59,12 @@ body.iframe-mode-fullscreen {
         &:hover,
         &:focus {
           .btn-iframe-close {
-            animation-name: fadeIn;
+            animation-name: fade-in;
             animation-duration: $transition-speed;
             animation-fill-mode: both;
             visibility: visible;
 
-            @include on-touch-device () {
+            @include on-touch-device() {
               visibility: visible;
             }
           }
@@ -128,3 +132,11 @@ body.iframe-mode-fullscreen {
     opacity: 1;
   }
 }
+
+@include dark-mode () {
+  .content-wrapper.iframe-mode {
+    .tab-loading {
+      background-color: $dark;
+    }
+  }
+}

build/scss/pages/_invoice.scss

@@ -12,7 +12,7 @@
   margin-top: 0;
 }
 
-.dark-mode {
+@include dark-mode () {
   .invoice {
     background-color: $dark;
   }

build/scss/pages/_lockscreen.scss

@@ -77,7 +77,7 @@
   margin-top: 10px;
 }
 
-.dark-mode {
+@include dark-mode () {
   .lockscreen-item {
     background-color: $dark;
   }

build/scss/pages/_login_and_register.scss

@@ -102,7 +102,7 @@
   margin: 10px 0;
 }
 
-.dark-mode {
+@include dark-mode () {
   .login-card-body,
   .register-card-body {
     background-color: $dark;

build/scss/pages/_profile.scss

@@ -36,7 +36,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .post {
     color: $white;
     border-color: $gray-600;

build/scss/parts/_plugins.scss

@@ -13,4 +13,5 @@
 @import "../plugins/toastr";
 @import "../plugins/pace";
 @import "../plugins/bootstrap-switch";
+@import "../plugins/daterangepicker";
 @import "../plugins/miscellaneous";

build/scss/parts/adminlte.components.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *     Only Components
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>

build/scss/parts/adminlte.core.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *     Only Core
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>

build/scss/parts/adminlte.extra-components.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *     Only Extra Components
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>

build/scss/parts/adminlte.light.scss

@@ -0,0 +1,16 @@
+/*!
+ *   AdminLTE v3.2.0
+ *     Without Dark mode
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// DISABLE DARK MODE
+$enable-dark-mode: false !default; // stylelint-disable-line
+
+// AdminLTE Original file
+// ---------------------------------------------------
+@import "../adminlte";
+
+//

build/scss/parts/adminlte.pages.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *     Only Pages
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>

build/scss/parts/adminlte.plugins.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *     Only Plugins
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>

build/scss/plugins/_bootstrap-slider.scss

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

build/scss/plugins/_bootstrap-switch.scss

@@ -174,7 +174,7 @@ $bootstrap-switch-handle-border-radius: .1rem;
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .bootstrap-switch {
     border-color: $gray-600;
 

build/scss/plugins/_daterangepicker.scss

@@ -0,0 +1,69 @@
+@include dark-mode() {
+  .daterangepicker {
+    background-color: lighten($dark, 5%);
+    border: inherit;
+
+    &::before,
+    &::after {
+      border-bottom-color: lighten($dark, 5%);
+    }
+
+    td.available:hover,
+    th.available:hover {
+      background-color: lighten($dark, 5%);
+    }
+    td.in-range {
+      background-color: lighten($dark, 10%);
+      color: $white;
+    }
+
+    td.off,
+    td.off.in-range,
+    td.off.start-date,
+    td.off.end-date {
+      background-color: darken($dark, 5%);
+      color: $white;
+    }
+
+    .ranges li:hover {
+      background-color: $dark;
+    }
+
+    &.show-ranges.ltr .drp-calendar {
+      border-color: lighten($dark, 10%);
+
+      &.left,
+      &.right {
+        border-color: lighten($dark, 10%);
+        padding-top: 0;
+      }
+    }
+
+    .drp-buttons {
+      border-color: lighten($dark, 10%);
+    }
+
+    .calendar-table {
+      background-color: $dark;
+      border-color: lighten($dark, 10%);
+
+      th,
+      td {
+        color: $white;
+      }
+
+      .next span,
+      .prev span {
+        border-color: $white;
+      }
+    }
+
+    select.hourselect,
+    select.minuteselect,
+    select.secondselect,
+    select.ampmselect {
+      background-color: $dark;
+      border-color: lighten($dark, 10%);
+    }
+  }
+}

build/scss/plugins/_icheck-bootstrap.scss

@@ -40,7 +40,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   [class*="icheck-"] > input:first-child:not(:checked) {
     + input[type="hidden"] + label::before,
     + label::before {

build/scss/plugins/_jqvmap.scss

@@ -11,6 +11,7 @@
   color: $button-default-color;
   height: 15px;
   width: 15px;
+  padding: 1px 2px;
 
   &:hover,
   &:active,

build/scss/plugins/_miscellaneous.scss

@@ -39,7 +39,7 @@
 }
 
 
-.dark-mode {
+@include dark-mode () {
   .irs--flat .irs-line {
     background-color: lighten($dark, 10%);
   }

build/scss/plugins/_select2.scss

@@ -123,12 +123,12 @@
       }
 
       .select2-selection__rendered {
-        padding: 0 $input-padding-x / 2 $input-padding-y;
-        margin-bottom: -$input-padding-x / 2;
+        padding: 0 $input-padding-x * 0.5 $input-padding-y;
+        margin-bottom: -$input-padding-x * 0.5;
 
         li:first-child.select2-search.select2-search--inline {
           width: 100%;
-          margin-left: $input-padding-x / 2;
+          margin-left: $input-padding-x * 0.5;
 
           .select2-search__field {
             width: 100% !important;
@@ -218,7 +218,7 @@
 // text-sm / form-control-sm override
 select.form-control-sm ~ {
   .select2-container--default {
-    font-size: $font-size-sm;
+    font-size: 75%;
   }
 }
 
@@ -241,11 +241,11 @@ select.form-control-sm ~ {
       min-height: $input-height-sm;
 
       .select2-selection__rendered {
-        padding: 0 $input-padding-x-sm / 2 $input-padding-y-sm;
-        margin-top: -($input-padding-x-sm / 5);
+        padding: 0 $input-padding-x-sm * 0.5 $input-padding-y-sm;
+        margin-top: -($input-padding-x-sm * .2);
 
         li:first-child.select2-search.select2-search--inline {
-          margin-left: $input-padding-x-sm / 2;
+          margin-left: $input-padding-x-sm * 0.5;
         }
 
         .select2-search.select2-search--inline {
@@ -273,7 +273,7 @@ select.form-control-sm ~ {
   @include select2-variant($name, $color);
 }
 
-.dark-mode {
+@include dark-mode () {
   .select2-selection {
     background-color: $dark;
     border-color: $gray-600;

build/scss/plugins/_sweetalert2.scss

@@ -38,7 +38,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .swal2-popup {
     background-color: $dark;
     color: $gray-200;

dist/css/alt/adminlte.components.css

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0
+ *   AdminLTE v3.2.0
  *     Only Components
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -2984,6 +2984,14 @@ body.text-sm .input-group-text {
   border-color: #6c757d;
 }
 
+.dark-mode .custom-select {
+  background: #343a40 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
+}
+
+.dark-mode .custom-select[multiple] {
+  background: #343a40;
+}
+
 .dark-mode .input-group-text {
   border-color: #6c757d;
 }
@@ -2995,6 +3003,18 @@ body.text-sm .input-group-text {
   color: #fff;
 }
 
+.dark-mode input:-webkit-autofill,
+.dark-mode input:-webkit-autofill:hover,
+.dark-mode input:-webkit-autofill:focus,
+.dark-mode textarea:-webkit-autofill,
+.dark-mode textarea:-webkit-autofill:hover,
+.dark-mode textarea:-webkit-autofill:focus,
+.dark-mode select:-webkit-autofill,
+.dark-mode select:-webkit-autofill:hover,
+.dark-mode select:-webkit-autofill:focus {
+  -webkit-text-fill-color: #fff;
+}
+
 .dark-mode .custom-range::-webkit-slider-runnable-track {
   background-color: #454d55;
 }
@@ -5567,7 +5587,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-primary.card-outline-tabs > .card-header a.active {
+.card-primary.card-outline-tabs > .card-header a.active,
+.card-primary.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #007bff;
 }
 
@@ -5638,7 +5659,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-secondary.card-outline-tabs > .card-header a.active {
+.card-secondary.card-outline-tabs > .card-header a.active,
+.card-secondary.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6c757d;
 }
 
@@ -5709,7 +5731,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-success.card-outline-tabs > .card-header a.active {
+.card-success.card-outline-tabs > .card-header a.active,
+.card-success.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #28a745;
 }
 
@@ -5780,7 +5803,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-info.card-outline-tabs > .card-header a.active {
+.card-info.card-outline-tabs > .card-header a.active,
+.card-info.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #17a2b8;
 }
 
@@ -5851,7 +5875,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-warning.card-outline-tabs > .card-header a.active {
+.card-warning.card-outline-tabs > .card-header a.active,
+.card-warning.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #ffc107;
 }
 
@@ -5922,7 +5947,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-danger.card-outline-tabs > .card-header a.active {
+.card-danger.card-outline-tabs > .card-header a.active,
+.card-danger.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #dc3545;
 }
 
@@ -5993,7 +6019,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-light.card-outline-tabs > .card-header a.active {
+.card-light.card-outline-tabs > .card-header a.active,
+.card-light.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #f8f9fa;
 }
 
@@ -6064,7 +6091,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-dark.card-outline-tabs > .card-header a.active {
+.card-dark.card-outline-tabs > .card-header a.active,
+.card-dark.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #343a40;
 }
 
@@ -6135,7 +6163,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-lightblue.card-outline-tabs > .card-header a.active {
+.card-lightblue.card-outline-tabs > .card-header a.active,
+.card-lightblue.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #3c8dbc;
 }
 
@@ -6206,7 +6235,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-navy.card-outline-tabs > .card-header a.active {
+.card-navy.card-outline-tabs > .card-header a.active,
+.card-navy.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #001f3f;
 }
 
@@ -6277,7 +6307,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-olive.card-outline-tabs > .card-header a.active {
+.card-olive.card-outline-tabs > .card-header a.active,
+.card-olive.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #3d9970;
 }
 
@@ -6348,7 +6379,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-lime.card-outline-tabs > .card-header a.active {
+.card-lime.card-outline-tabs > .card-header a.active,
+.card-lime.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #01ff70;
 }
 
@@ -6419,7 +6451,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-fuchsia.card-outline-tabs > .card-header a.active {
+.card-fuchsia.card-outline-tabs > .card-header a.active,
+.card-fuchsia.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #f012be;
 }
 
@@ -6490,7 +6523,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-maroon.card-outline-tabs > .card-header a.active {
+.card-maroon.card-outline-tabs > .card-header a.active,
+.card-maroon.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #d81b60;
 }
 
@@ -6561,7 +6595,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-blue.card-outline-tabs > .card-header a.active {
+.card-blue.card-outline-tabs > .card-header a.active,
+.card-blue.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #007bff;
 }
 
@@ -6632,7 +6667,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-indigo.card-outline-tabs > .card-header a.active {
+.card-indigo.card-outline-tabs > .card-header a.active,
+.card-indigo.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6610f2;
 }
 
@@ -6703,7 +6739,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-purple.card-outline-tabs > .card-header a.active {
+.card-purple.card-outline-tabs > .card-header a.active,
+.card-purple.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6f42c1;
 }
 
@@ -6774,7 +6811,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-pink.card-outline-tabs > .card-header a.active {
+.card-pink.card-outline-tabs > .card-header a.active,
+.card-pink.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #e83e8c;
 }
 
@@ -6845,7 +6883,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-red.card-outline-tabs > .card-header a.active {
+.card-red.card-outline-tabs > .card-header a.active,
+.card-red.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #dc3545;
 }
 
@@ -6916,7 +6955,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-orange.card-outline-tabs > .card-header a.active {
+.card-orange.card-outline-tabs > .card-header a.active,
+.card-orange.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #fd7e14;
 }
 
@@ -6987,7 +7027,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-yellow.card-outline-tabs > .card-header a.active {
+.card-yellow.card-outline-tabs > .card-header a.active,
+.card-yellow.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #ffc107;
 }
 
@@ -7058,7 +7099,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-green.card-outline-tabs > .card-header a.active {
+.card-green.card-outline-tabs > .card-header a.active,
+.card-green.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #28a745;
 }
 
@@ -7129,7 +7171,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-teal.card-outline-tabs > .card-header a.active {
+.card-teal.card-outline-tabs > .card-header a.active,
+.card-teal.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #20c997;
 }
 
@@ -7200,7 +7243,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-cyan.card-outline-tabs > .card-header a.active {
+.card-cyan.card-outline-tabs > .card-header a.active,
+.card-cyan.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #17a2b8;
 }
 
@@ -7271,7 +7315,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-white.card-outline-tabs > .card-header a.active {
+.card-white.card-outline-tabs > .card-header a.active,
+.card-white.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #fff;
 }
 
@@ -7342,7 +7387,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-gray.card-outline-tabs > .card-header a.active {
+.card-gray.card-outline-tabs > .card-header a.active,
+.card-gray.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6c757d;
 }
 
@@ -7413,7 +7459,8 @@ body.text-sm .input-group-text {
   border-top: 3px solid #dee2e6;
 }
 
-.card-gray-dark.card-outline-tabs > .card-header a.active {
+.card-gray-dark.card-outline-tabs > .card-header a.active,
+.card-gray-dark.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #343a40;
 }
 
@@ -7510,12 +7557,12 @@ body.text-sm .input-group-text {
   display: none;
 }
 
-.card .nav.flex-column > li {
+.card .nav.flex-column:not(.nav-sidebar) > li {
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   margin: 0;
 }
 
-.card .nav.flex-column > li:last-of-type {
+.card .nav.flex-column:not(.nav-sidebar) > li:last-of-type {
   border-bottom: 0;
 }
 
@@ -7978,7 +8025,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-primary.card-outline-tabs > .card-header a.active {
+.dark-mode .card-primary.card-outline-tabs > .card-header a.active,
+.dark-mode .card-primary.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #3f6791;
 }
 
@@ -8049,7 +8097,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-secondary.card-outline-tabs > .card-header a.active {
+.dark-mode .card-secondary.card-outline-tabs > .card-header a.active,
+.dark-mode .card-secondary.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6c757d;
 }
 
@@ -8120,7 +8169,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-success.card-outline-tabs > .card-header a.active {
+.dark-mode .card-success.card-outline-tabs > .card-header a.active,
+.dark-mode .card-success.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #00bc8c;
 }
 
@@ -8191,7 +8241,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-info.card-outline-tabs > .card-header a.active {
+.dark-mode .card-info.card-outline-tabs > .card-header a.active,
+.dark-mode .card-info.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #3498db;
 }
 
@@ -8262,7 +8313,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-warning.card-outline-tabs > .card-header a.active {
+.dark-mode .card-warning.card-outline-tabs > .card-header a.active,
+.dark-mode .card-warning.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #f39c12;
 }
 
@@ -8333,7 +8385,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-danger.card-outline-tabs > .card-header a.active {
+.dark-mode .card-danger.card-outline-tabs > .card-header a.active,
+.dark-mode .card-danger.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #e74c3c;
 }
 
@@ -8404,7 +8457,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-light.card-outline-tabs > .card-header a.active {
+.dark-mode .card-light.card-outline-tabs > .card-header a.active,
+.dark-mode .card-light.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #f8f9fa;
 }
 
@@ -8475,7 +8529,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-dark.card-outline-tabs > .card-header a.active {
+.dark-mode .card-dark.card-outline-tabs > .card-header a.active,
+.dark-mode .card-dark.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #343a40;
 }
 
@@ -8546,7 +8601,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-lightblue.card-outline-tabs > .card-header a.active {
+.dark-mode .card-lightblue.card-outline-tabs > .card-header a.active,
+.dark-mode .card-lightblue.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #86bad8;
 }
 
@@ -8617,7 +8673,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-navy.card-outline-tabs > .card-header a.active {
+.dark-mode .card-navy.card-outline-tabs > .card-header a.active,
+.dark-mode .card-navy.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #002c59;
 }
 
@@ -8688,7 +8745,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-olive.card-outline-tabs > .card-header a.active {
+.dark-mode .card-olive.card-outline-tabs > .card-header a.active,
+.dark-mode .card-olive.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #74c8a3;
 }
 
@@ -8759,7 +8817,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-lime.card-outline-tabs > .card-header a.active {
+.dark-mode .card-lime.card-outline-tabs > .card-header a.active,
+.dark-mode .card-lime.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #67ffa9;
 }
 
@@ -8830,7 +8889,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-fuchsia.card-outline-tabs > .card-header a.active {
+.dark-mode .card-fuchsia.card-outline-tabs > .card-header a.active,
+.dark-mode .card-fuchsia.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #f672d8;
 }
 
@@ -8901,7 +8961,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-maroon.card-outline-tabs > .card-header a.active {
+.dark-mode .card-maroon.card-outline-tabs > .card-header a.active,
+.dark-mode .card-maroon.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #ed6c9b;
 }
 
@@ -8972,7 +9033,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-blue.card-outline-tabs > .card-header a.active {
+.dark-mode .card-blue.card-outline-tabs > .card-header a.active,
+.dark-mode .card-blue.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #3f6791;
 }
 
@@ -9043,7 +9105,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-indigo.card-outline-tabs > .card-header a.active {
+.dark-mode .card-indigo.card-outline-tabs > .card-header a.active,
+.dark-mode .card-indigo.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6610f2;
 }
 
@@ -9114,7 +9177,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-purple.card-outline-tabs > .card-header a.active {
+.dark-mode .card-purple.card-outline-tabs > .card-header a.active,
+.dark-mode .card-purple.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6f42c1;
 }
 
@@ -9185,7 +9249,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-pink.card-outline-tabs > .card-header a.active {
+.dark-mode .card-pink.card-outline-tabs > .card-header a.active,
+.dark-mode .card-pink.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #e83e8c;
 }
 
@@ -9256,7 +9321,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-red.card-outline-tabs > .card-header a.active {
+.dark-mode .card-red.card-outline-tabs > .card-header a.active,
+.dark-mode .card-red.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #e74c3c;
 }
 
@@ -9327,7 +9393,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-orange.card-outline-tabs > .card-header a.active {
+.dark-mode .card-orange.card-outline-tabs > .card-header a.active,
+.dark-mode .card-orange.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #fd7e14;
 }
 
@@ -9398,7 +9465,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-yellow.card-outline-tabs > .card-header a.active {
+.dark-mode .card-yellow.card-outline-tabs > .card-header a.active,
+.dark-mode .card-yellow.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #f39c12;
 }
 
@@ -9469,7 +9537,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-green.card-outline-tabs > .card-header a.active {
+.dark-mode .card-green.card-outline-tabs > .card-header a.active,
+.dark-mode .card-green.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #00bc8c;
 }
 
@@ -9540,7 +9609,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-teal.card-outline-tabs > .card-header a.active {
+.dark-mode .card-teal.card-outline-tabs > .card-header a.active,
+.dark-mode .card-teal.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #20c997;
 }
 
@@ -9611,7 +9681,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-cyan.card-outline-tabs > .card-header a.active {
+.dark-mode .card-cyan.card-outline-tabs > .card-header a.active,
+.dark-mode .card-cyan.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #3498db;
 }
 
@@ -9682,7 +9753,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-white.card-outline-tabs > .card-header a.active {
+.dark-mode .card-white.card-outline-tabs > .card-header a.active,
+.dark-mode .card-white.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #fff;
 }
 
@@ -9753,7 +9825,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-gray.card-outline-tabs > .card-header a.active {
+.dark-mode .card-gray.card-outline-tabs > .card-header a.active,
+.dark-mode .card-gray.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #6c757d;
 }
 
@@ -9824,7 +9897,8 @@ html.maximized-card {
   border-top: 3px solid #dee2e6;
 }
 
-.dark-mode .card-gray-dark.card-outline-tabs > .card-header a.active {
+.dark-mode .card-gray-dark.card-outline-tabs > .card-header a.active,
+.dark-mode .card-gray-dark.card-outline-tabs > .card-header a.active:hover {
   border-top: 3px solid #343a40;
 }
 
@@ -9892,8 +9966,12 @@ html.maximized-card {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
+.dark-mode .card.card-outline-tabs {
+  border-top: 0;
+}
+
 .dark-mode .card.card-outline-tabs .card-header a:hover {
-  border-color: #6c757d;
+  border-top-color: #6c757d;
   border-bottom-color: transparent;
 }
 
@@ -10028,7 +10106,6 @@ html.maximized-card {
 }
 
 .modal-dialog .overlay {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   position: absolute;
@@ -10038,10 +10115,8 @@ html.maximized-card {
   right: 0;
   margin: -1px;
   z-index: 1052;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.7);
@@ -10862,6 +10937,21 @@ html.maximized-card {
   color: #2b2b2b;
 }
 
+.btn-default.disabled, .btn-default:disabled {
+  color: #444;
+  background-color: #f8f9fa;
+}
+
+.btn-outline-light {
+  color: #bdc6d0;
+  border-color: #bdc6d0;
+}
+
+.btn-outline-light.disabled, .btn-outline-light:disabled {
+  color: #bdc6d0;
+  border-color: #bdc6d0;
+}
+
 .btn-app {
   border-radius: 3px;
   background-color: #f8f9fa;
@@ -11212,40 +11302,40 @@ html.maximized-card {
 
 .dark-mode .btn-dark {
   color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+  background-color: #292d32;
+  border-color: #4b545c;
   box-shadow: none;
 }
 
 .dark-mode .btn-dark:hover {
   color: #fff;
-  background-color: #23272b;
-  border-color: #1d2124;
+  background-color: #171a1d;
+  border-color: #343a40;
 }
 
 .dark-mode .btn-dark:focus, .dark-mode .btn-dark.focus {
   color: #fff;
-  background-color: #23272b;
-  border-color: #1d2124;
-  box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5);
+  background-color: #171a1d;
+  border-color: #343a40;
+  box-shadow: 0 0 0 0 rgba(102, 109, 117, 0.5);
 }
 
 .dark-mode .btn-dark.disabled, .dark-mode .btn-dark:disabled {
   color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+  background-color: #292d32;
+  border-color: #4b545c;
 }
 
 .dark-mode .btn-dark:not(:disabled):not(.disabled):active, .dark-mode .btn-dark:not(:disabled):not(.disabled).active,
 .show > .dark-mode .btn-dark.dropdown-toggle {
   color: #fff;
-  background-color: #1d2124;
-  border-color: #171a1d;
+  background-color: #121416;
+  border-color: #2e3439;
 }
 
 .dark-mode .btn-dark:not(:disabled):not(.disabled):active:focus, .dark-mode .btn-dark:not(:disabled):not(.disabled).active:focus,
 .show > .dark-mode .btn-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5);
+  box-shadow: 0 0 0 0 rgba(102, 109, 117, 0.5);
 }
 
 .dark-mode .btn-outline-primary {
@@ -11473,35 +11563,35 @@ html.maximized-card {
 }
 
 .dark-mode .btn-outline-dark {
-  color: #343a40;
-  border-color: #343a40;
+  color: #060708;
+  border-color: #060708;
 }
 
 .dark-mode .btn-outline-dark:hover {
   color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+  background-color: #060708;
+  border-color: #060708;
 }
 
 .dark-mode .btn-outline-dark:focus, .dark-mode .btn-outline-dark.focus {
-  box-shadow: 0 0 0 0 rgba(52, 58, 64, 0.5);
+  box-shadow: 0 0 0 0 rgba(6, 7, 8, 0.5);
 }
 
 .dark-mode .btn-outline-dark.disabled, .dark-mode .btn-outline-dark:disabled {
-  color: #343a40;
+  color: #060708;
   background-color: transparent;
 }
 
 .dark-mode .btn-outline-dark:not(:disabled):not(.disabled):active, .dark-mode .btn-outline-dark:not(:disabled):not(.disabled).active,
 .show > .dark-mode .btn-outline-dark.dropdown-toggle {
   color: #fff;
-  background-color: #343a40;
-  border-color: #343a40;
+  background-color: #060708;
+  border-color: #060708;
 }
 
 .dark-mode .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .dark-mode .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
 .show > .dark-mode .btn-outline-dark.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0 rgba(52, 58, 64, 0.5);
+  box-shadow: 0 0 0 0 rgba(6, 7, 8, 0.5);
 }
 
 .callout {
@@ -11970,12 +12060,32 @@ html.maximized-card {
   transition: transform 0.3s linear, -webkit-transform 0.3s linear;
 }
 
-[data-widget="expandable-table"][aria-expanded="true"] td i.expandable-table-caret[class*="right"] {
+[data-widget="expandable-table"][aria-expanded="true"] i.expandable-table-caret[class*="right"] {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
-[data-widget="expandable-table"][aria-expanded="true"] td i.expandable-table-caret[class*="left"] {
+[data-widget="expandable-table"][aria-expanded="true"] i.expandable-table-caret[class*="left"] {
+  -webkit-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+[aria-expanded="true"] {
+  cursor: pointer;
+}
+
+[aria-expanded="true"] i.expandable-table-caret {
+  transition: -webkit-transform 0.3s linear;
+  transition: transform 0.3s linear;
+  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
+}
+
+[aria-expanded="true"] [data-widget="expandable-table"] i.expandable-table-caret[class*="right"] {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+[aria-expanded="true"] [data-widget="expandable-table"] i.expandable-table-caret[class*="left"] {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }