update docs assets

Bumps [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn) from 28.0.2 to 29.0.0.
- [Release notes](https://github.com/sindresorhus/eslint-plugin-unicorn/releases)
- [Commits](https://github.com/sindresorhus/eslint-plugin-unicorn/compare/v28.0.2...v29.0.0)

Signed-off-by: dependabot[bot] <support@github.com>

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

.babelrc

@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": true,
-        "modules": false
-      }
-    ]
-  ],
-  "plugins": [
-    "@babel/plugin-external-helpers"
-  ]
-}

.babelrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        bugfixes: true,
+        modules: false,
+        exclude: ['transform-typeof-symbol']
+      }
+    ]
+  ]
+};

.browserslistrc

@@ -1,13 +1,10 @@
 # https://github.com/browserslist/browserslist#readme
 
->= 1%
-last 1 major version
+>= 0.2%
+last 2 major versions
 not dead
-Chrome >= 45
-Firefox >= 38
-Edge >= 12
+Firefox ESR
+Edge >= 16
 Explorer >= 10
 iOS >= 9
 Safari >= 9
-Android >= 4.4
-Opera >= 30

.bundlewatch.config.json

@@ -0,0 +1,60 @@
+{
+  "files": [
+    {
+      "path": "./dist/css/adminlte.css",
+      "maxSize": "122.3 kB"
+    },
+    {
+      "path": "./dist/css/adminlte.min.css",
+      "maxSize": "116.5 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.components.css",
+      "maxSize": "27.2 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.components.min.css",
+      "maxSize": "26.5 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.core.css",
+      "maxSize": "69.2 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.core.min.css",
+      "maxSize": "65.4 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.extra-components.css",
+      "maxSize": "4.6 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.extra-components.min.css",
+      "maxSize": "4.5 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.pages.css",
+      "maxSize": "3.5 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.pages.min.css",
+      "maxSize": "3.1 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.plugins.css",
+      "maxSize": "21.8 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.plugins.min.css",
+      "maxSize": "21.2 kB"
+    },
+    {
+      "path": "./dist/js/adminlte.js",
+      "maxSize": "15.7 kB"
+    },
+    {
+      "path": "./dist/js/adminlte.min.js",
+      "maxSize": "10.5 kB"
+    }
+  ]
+}

.editorconfig

@@ -1,9 +1,14 @@
+# editorconfig.org
+
 root = true
 
 [*]
 charset = utf-8
 end_of_line = lf
-insert_final_newline = true
-indent_style = space
 indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
 
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -1,5 +1,5 @@
 **/*.min.js
-**/plugins/*
-**/dist/*
-**/build/npm
-ad.js
+**/plugins/
+/dist/js/adminlte.js
+/docs/
+/docs_html/

.eslintrc

@@ -1,300 +0,0 @@
-{
-  "root": true,
-  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "es6": true,
-    "amd": true
-  },
-  "extends": "eslint:recommended",
-  "plugins": [
-    "compat"
-  ],
-  "globals": {
-    "jQuery": true
-  },
-  "rules": {
-    // Possible Errors
-    "no-await-in-loop": "error",
-    "no-extra-parens": "error",
-    "no-prototype-builtins": "error",
-    "no-template-curly-in-string": "error",
-    "compat/compat": "error",
-    "valid-jsdoc": "error",
-    // Best Practices
-    "accessor-pairs": "error",
-    "array-callback-return": "error",
-    "block-scoped-var": "error",
-    "class-methods-use-this": "off",
-    "complexity": "error",
-    "consistent-return": "error",
-    "curly": "error",
-    "default-case": "error",
-    "dot-location": [
-      "error",
-      "property"
-    ],
-    "dot-notation": "error",
-    "eqeqeq": "error",
-    "guard-for-in": "error",
-    "no-alert": "error",
-    "no-caller": "error",
-    "no-div-regex": "error",
-    "no-else-return": "error",
-    "no-empty-function": "error",
-    "no-eq-null": "error",
-    "no-eval": "error",
-    "no-extend-native": "error",
-    "no-extra-bind": "error",
-    "no-extra-label": "error",
-    "no-floating-decimal": "error",
-    "no-implicit-coercion": "error",
-    "no-implicit-globals": "error",
-    "no-implied-eval": "error",
-    "no-invalid-this": "off",
-    "no-iterator": "error",
-    "no-labels": "error",
-    "no-lone-blocks": "error",
-    "no-loop-func": "error",
-    "no-magic-numbers": [
-      "error",
-      {
-        "ignore": [
-          -1,
-          0,
-          1
-        ],
-        "ignoreArrayIndexes": true
-      }
-    ],
-    "no-multi-spaces": [
-      "error",
-      {
-        "ignoreEOLComments": true,
-        "exceptions": {
-          "AssignmentExpression": true,
-          "ArrowFunctionExpression": true,
-          "CallExpression": true,
-          "VariableDeclarator": true
-        }
-      }
-    ],
-    "no-multi-str": "error",
-    "no-new": "error",
-    "no-new-func": "error",
-    "no-new-wrappers": "error",
-    "no-octal-escape": "error",
-    "no-param-reassign": "off",
-    "no-proto": "error",
-    "no-restricted-properties": "error",
-    "no-return-assign": "error",
-    "no-return-await": "error",
-    "no-script-url": "error",
-    "no-self-compare": "error",
-    "no-sequences": "error",
-    "no-throw-literal": "error",
-    "no-unmodified-loop-condition": "error",
-    "no-unused-expressions": "error",
-    "no-useless-call": "error",
-    "no-useless-concat": "error",
-    "no-useless-return": "error",
-    "no-void": "error",
-    "no-warning-comments": "off",
-    "no-with": "error",
-    "prefer-promise-reject-errors": "error",
-    "radix": "error",
-    "require-await": "error",
-    "vars-on-top": "error",
-    "wrap-iife": "error",
-    "yoda": "error",
-    // Strict Mode
-    "strict": "error",
-    // Variables
-    "init-declarations": "off",
-    "no-catch-shadow": "error",
-    "no-label-var": "error",
-    "no-restricted-globals": "error",
-    "no-shadow": "off",
-    "no-shadow-restricted-names": "error",
-    "no-undef-init": "error",
-    "no-undefined": "error",
-    "no-use-before-define": "off",
-    // Node.js and CommonJS
-    "callback-return": "off",
-    "global-require": "error",
-    "handle-callback-err": "error",
-    "no-mixed-requires": "error",
-    "no-new-require": "error",
-    "no-path-concat": "error",
-    "no-process-env": "error",
-    "no-process-exit": "error",
-    "no-restricted-modules": "error",
-    "no-sync": "error",
-    // Stylistic Issues
-    "array-bracket-spacing": "error",
-    "block-spacing": "error",
-    "brace-style": "error",
-    "camelcase": "error",
-    "capitalized-comments": "off",
-    "comma-dangle": "error",
-    "comma-spacing": "error",
-    "comma-style": "error",
-    "computed-property-spacing": "error",
-    "consistent-this": "error",
-    "eol-last": "error",
-    "func-call-spacing": "error",
-    "func-name-matching": "error",
-    "func-names": "off",
-    "func-style": [
-      "error",
-      "declaration"
-    ],
-    "id-blacklist": "error",
-    "id-length": "off",
-    "id-match": "error",
-    "indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    "jsx-quotes": "error",
-    "key-spacing": "off",
-    "keyword-spacing": "error",
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "line-comment-position": "off",
-    "lines-around-comment": "off",
-    "lines-around-directive": "error",
-    "max-depth": [
-      "error",
-      10
-    ],
-    "max-len": "off",
-    "max-lines": "off",
-    "max-nested-callbacks": "error",
-    "max-params": "off",
-    "max-statements": "off",
-    "max-statements-per-line": "error",
-    "multiline-ternary": "off",
-    "new-cap": [
-      "error",
-      {
-        "capIsNewExceptionPattern": "$.*"
-      }
-    ],
-    "newline-after-var": "off",
-    "newline-per-chained-call": [
-      "error",
-      {
-        "ignoreChainWithDepth": 5
-      }
-    ],
-    "new-parens": "error",
-    "no-array-constructor": "error",
-    "no-bitwise": "error",
-    "no-continue": "off",
-    "no-inline-comments": "off",
-    "no-lonely-if": "error",
-    "no-mixed-operators": "off",
-    "no-multi-assign": "error",
-    "no-multiple-empty-lines": "error",
-    "nonblock-statement-body-position": "error",
-    "no-negated-condition": "off",
-    "no-nested-ternary": "error",
-    "no-new-object": "error",
-    "no-plusplus": "off",
-    "no-restricted-syntax": "error",
-    "no-tabs": "error",
-    "no-ternary": "off",
-    "no-trailing-spaces": "error",
-    "no-underscore-dangle": "off",
-    "no-unneeded-ternary": "error",
-    "no-whitespace-before-property": "error",
-    "object-curly-newline": [
-      "error",
-      {
-        "minProperties": 1
-      }
-    ],
-    "object-curly-spacing": [
-      "error",
-      "always"
-    ],
-    "object-property-newline": "error",
-    "one-var": [
-      "error",
-      "never"
-    ],
-    "one-var-declaration-per-line": "error",
-    "operator-assignment": "error",
-    "operator-linebreak": "error",
-    "padded-blocks": [
-      "error",
-      "never"
-    ],
-    "padding-line-between-statements": "off",
-    "quote-props": [
-      "error",
-      "as-needed"
-    ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "require-jsdoc": "off",
-    "semi": [
-      "error",
-      "never"
-    ],
-    "semi-spacing": "error",
-    "sort-keys": "off",
-    "sort-vars": "error",
-    "space-before-blocks": "error",
-    "space-before-function-paren": [
-      "error",
-      {
-        "anonymous": "always",
-        "named": "never"
-      }
-    ],
-    "space-in-parens": "error",
-    "space-infix-ops": "error",
-    "space-unary-ops": "error",
-    "spaced-comment": "error",
-    "template-tag-spacing": "error",
-    "unicode-bom": "error",
-    "wrap-regex": "off",
-    // ECMAScript 6
-    "arrow-body-style": [
-      "error",
-      "as-needed"
-    ],
-    "arrow-parens": "error",
-    "arrow-spacing": "error",
-    "generator-star-spacing": "error",
-    "no-confusing-arrow": "error",
-    "no-duplicate-imports": "error",
-    "no-restricted-imports": "error",
-    "no-useless-computed-key": "error",
-    "no-useless-constructor": "error",
-    "no-useless-rename": "error",
-    "no-var": "error",
-    "object-shorthand": "error",
-    "prefer-arrow-callback": "error",
-    "prefer-const": "error",
-    "prefer-destructuring": "off",
-    "prefer-numeric-literals": "error",
-    "prefer-rest-params": "error",
-    "prefer-spread": "error",
-    "prefer-template": "error",
-    "rest-spread-spacing": "error",
-    "sort-imports": "error",
-    "symbol-description": "error",
-    "template-curly-spacing": "error",
-    "yield-star-spacing": "error"
-  }
-}

.eslintrc.json

@@ -0,0 +1,65 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:compat/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:unicorn/recommended",
+    "xo/esnext",
+    "xo/browser"
+  ],
+  "env": {
+    "jquery": true
+  },
+  "rules": {
+    "capitalized-comments": "off",
+    "eqeqeq": "off",
+    "indent": [
+      "error",
+      2,
+      {
+        "MemberExpression": "off",
+        "SwitchCase": 1
+      }
+    ],
+    "multiline-ternary": [
+      "error",
+      "always-multiline"
+    ],
+    "new-cap": [
+      "error",
+      {
+        "properties": false
+      }
+    ],
+    "no-eq-null": "off",
+    "no-negated-condition": "off",
+    "no-console": "error",
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
+    "prefer-template": "error",
+    "prefer-named-capture-group": "off",
+    "semi": [
+      "error",
+      "never"
+    ],
+    "unicorn/filename-case": "off",
+    "unicorn/consistent-destructuring": "off",
+    "unicorn/no-array-callback-reference": "off",
+    "unicorn/no-array-for-each": "off",
+    "unicorn/no-for-loop": "off",
+    "unicorn/no-null": "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-includes": "off",
+    "unicorn/prefer-number-properties": "off",
+    "unicorn/prefer-optional-catch-binding": "off",
+    "unicorn/prefer-query-selector": "off",
+    "unicorn/prefer-set-has": "off",
+    "unicorn/prevent-abbreviations": "off"
+  }
+}

.gitattributes

@@ -0,0 +1,6 @@
+# Enforce Unix newlines
+* text=auto eol=lf
+
+# Ignores for analysis is used to produce the language stats bar which displays the languages percentages
+plugins/* linguist-vendored=true
+docs/* linguist-vendored=true

.github/CONTRIBUTING.md

@@ -0,0 +1,37 @@
+
+# Contributing to AdminLTE
+
+Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
+
+1. Contribution Requirements :
+    * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
+    * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license.
+    * Contributions are only accepted through GitHub pull requests.
+    * Finally, contributed code must work in all supported browsers (see above for browser support).
+2. Installation :
+    * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
+    * Clone to your machine
+
+    ```bash
+    git clone https://github.com/YOUR_USERNAME/AdminLTE.git
+    ```
+    * 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)
+    * 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)
+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:
+
+- clone the `AdminLTE` repo.
+- install the dependencies.
+- run `npm run dev` to start the server.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)

.github/ISSUE_TEMPLATE/bug-report-for-adminlte-v3.1-x.md

@@ -0,0 +1,32 @@
+---
+name: Bug report for AdminLTE v3.x
+about: Create a report to help us improve AdminLTE v3.x
+title: "[BUG]"
+labels: type:bug, version:3.1.x
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+- AdminLTE Version: [e.g. v3.0.0]
+- Operating System:  [e.g. macOS Catalina]
+- Browser (Version): [e.g. Chrome (Latest)]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature-request-for-adminlte-v4-x.md

@@ -0,0 +1,20 @@
+---
+name: Feature request for AdminLTE v4.x
+about: Suggest an idea for this project
+title: "[FEATURE]"
+labels: type:enhancement, version:4.x
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/codeql/codeql-config.yml

@@ -0,0 +1,5 @@
+name: "CodeQL config"
+
+paths-ignore:
+  - docs/assets/plugins/
+  - plugins/

.github/dependabot.yml

@@ -0,0 +1,18 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+      day: monday
+      time: "03:00"
+    open-pull-requests-limit: 10
+    versioning-strategy: increase
+  - package-ecosystem: bundler
+    directory: "/docs/"
+    schedule:
+      interval: weekly
+      day: monday
+      time: "03:00"
+    open-pull-requests-limit: 10
+    versioning-strategy: increase

.github/workflows/ci.yml

@@ -0,0 +1,63 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - "**"
+
+env:
+  FORCE_COLOR: 2
+
+jobs:
+  run:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node:
+          - "10.x"
+          - "12.x"
+          - "14.x"
+        os:
+          - "ubuntu-latest"
+          - "macos-latest"
+          - "windows-latest"
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Get npm cache directory
+        id: npm-cache
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Set up npm cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.npm-cache.outputs.dir }}
+          key: ${{ runner.os }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          restore-keys: |
+            ${{ runner.os }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
+            ${{ runner.os }}-node-v${{ matrix.node }}-
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build files
+        run: npm run compile
+
+      - name: Run bundlewatch
+        run: npm run bundlewatch
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.node, '14')
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"

.github/workflows/codeql.yml

@@ -0,0 +1,35 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches:
+      - master
+      - "!dependabot/**"
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches:
+      - master
+  schedule:
+    - cron: "0 0 * * 0"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: "javascript"
+          config-file: ./.github/codeql/codeql-config.yml
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/docs.yml

@@ -0,0 +1,59 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - "**"
+
+env:
+  FORCE_COLOR: 2
+  NODE: 14.x
+  RUBY: 2.7
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ env.NODE }}"
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: "${{ env.RUBY }}"
+          bundler-cache: true
+          working-directory: docs
+
+      - name: Version info
+        run: |
+          ruby --version
+          gem --version
+          bundle --version
+          java -version
+
+      - name: Set up npm cache
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          restore-keys: |
+            ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
+            ${{ runner.os }}-node-v${{ env.NODE }}-
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build docs
+        run: npm run docs-compile
+
+      - name: Run HTML validator
+        run: npm run docs-lint

.github/workflows/lint.yml

@@ -0,0 +1,41 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - "**"
+
+env:
+  FORCE_COLOR: 2
+  NODE: 14.x
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ env.NODE }}"
+
+      - name: Set up npm cache
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          restore-keys: |
+            ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
+            ${{ runner.os }}-node-v${{ env.NODE }}-
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint

.gitignore

@@ -1,38 +1,71 @@
-// System / Log files 
+# System / Log files
 *.DS_Store
 *.log
 
-// Archives
+# Archives
 *.zip
 
-// Sass Cache
+# Sass Cache
 .sass-cache
 
-// Project files
+# Project files
 .idea
 nbproject
 nbproject/private
 .vscode/
 .vs/
 
-// Node / Bower
+# Node / Bower
 node_modules/
 bower_components/
 
-// Plugins
-/plugins/*/*.md
-/plugins/*/*.html
-/plugins/*/package.json
+# Plugins
+/plugins/**/*.html
+/plugins/**/*.less
+/plugins/**/*.md
+/plugins/**/*.scss
+/plugins/**/*.ts
+/plugins/**/bower.json
+/plugins/**/package.json
+/plugins/**/webpack.config.js
+/plugins/**/demo/
+/plugins/**/demos/
+/plugins/**/dev/
+/plugins/**/example/
+/plugins/**/examples/
+/plugins/**/less/
+/plugins/**/test/
+/plugins/**/tests/
+/plugins/daterangepicker/website/
+/plugins/daterangepicker/drp.png
+/plugins/daterangepicker/moment.min.js
+/plugins/daterangepicker/package.js
+/plugins/daterangepicker/website.css
+/plugins/daterangepicker/website.js
+/plugins/jquery-ui/AUTHORS.txt
+/plugins/jquery-ui/external/jquery/jquery.js
+/plugins/inputmask/bindings/
+/plugins/flot/plugins/jquery*.js
+!/plugins/flot/plugins/jquery.flot.*.js
+!/plugins/**/LICENSE.md
+!/plugins/**/LICENSE.txt
+!/plugins/**/license.md
+!/plugins/**/license.txt
+!/plugins/**/LICENSE
+!/plugins/**/license
+!/plugins/**/COPYING
 
 
-// Docs
-Gemfile.lock
-docs/_site
-docs_html/
+# Docs
+/docs/_site/
+/docs/vendor/
+/docs/.bundle/
+/docs_html/
 .jekyll-cache/
 .jekyll-metadata
 
-// ETC
+# ETC
 TODO
 test.html
 ad.js
+/.cache/

.gitpod.yml

@@ -0,0 +1,6 @@
+tasks:
+  - init: npm install
+    command: npm run dev
+ports:
+  - port: 3000
+    onOpen: open-preview

.lgtm.yml

@@ -0,0 +1,15 @@
+# https://lgtm.com/help/lgtm/customizing-file-classification
+path_classifiers:
+  plugins:
+    - plugins/
+
+extraction:
+  javascript:
+    # https://lgtm.com/help/lgtm/javascript-extraction#customizing-index
+    # The `index` step extracts information from the files in the codebase.
+    index:
+      # Specify a list of files and folders to exclude from extraction.
+      exclude:
+        - bower_components/
+        - docs/assets/js/plugins/
+        - plugins/

.npmignore

@@ -1 +1,6 @@
-!/docs_html/
+/docs/
+/docs_html/
+/plugins/*
+!/plugins/flot-old/
+/.github/
+/.lgtm.yml

.stylelintignore

@@ -0,0 +1,6 @@
+**/*.html
+**/*.md
+**/*.min.css
+**/dist/
+**/docs_html/
+**/plugins/

.stylelintrc

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ],
+  "rules": {
+    "declaration-no-important": null,
+    "order/properties-order": null,
+    "selector-max-class": null,
+    "selector-max-combinators": null,
+    "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-max-specificity": null,
+    "selector-max-type": null,
+    "selector-no-qualifying-type": null
+  }
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,43 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at https://colorlib.com/wp/contact-us/. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct/>

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2018 almasaeed2010
+Copyright (c) 2014-2021 ColorlibHQ
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,95 +1,125 @@
-Introduction
-============
+# [AdminLTE - Bootstrap 4 Admin Dashboard](https://adminlte.io)
 
-**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4](https://getbootstrap.com)** framework.
+[![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
+[![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/)
+
+**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.
 
-**Download & Preview on [AdminLTE.io](https://adminlte.io)**
+**Preview on [AdminLTE.io](https://adminlte.io/themes/v3)**
 
-Looking for Premium Templates?
-------------------------------
-AdminLTE.io just opened a new premium templates page. Hand picked to insure the best quality and the most affordable
-prices. Visit https://adminlte.io/premium for more information.
+## Looking for Premium Templates?
+
+AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable
+prices. Visit <https://adminlte.io/premium> for more information.
 
 !["AdminLTE Presentation"](https://adminlte.io/AdminLTE3.png "AdminLTE Presentation")
 
 **AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
 SCSS has been used to increase code customizability.
 
-Installation
-------------
+## Quick start
 There are multiple ways to install AdminLTE.
 
-#### Download:
+### Download & Changelog:
+Always Recommended to download from GitHub latest release [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
+Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
+Legacy Releases are [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
 
-Download from Github or [visit AdminLTE.io](https://adminlte.io) and download the latest release.
-
-#### Using The Command Line:
-
-**NPM**
+## Stable 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/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">
+```
+### 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
+npm install admin-lte@^3.1 --save
 ```
-
-**Github**
-
-- Clone to your machine
+#### Via Yarn
+```bash
+yarn add admin-lte@^3.1
 ```
+#### Via Composer
+```bash
+composer require "almasaeed2010/adminlte=~3.1"
+```
+#### Via Git
+```bash
 git clone https://github.com/ColorlibHQ/AdminLTE.git
 ```
 
-Documentation
--------------
-Visit the [online documentation](https://adminlte.io/themes/AdminLTE/documentation/index.html) for the most
+## 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"
+```
+#### Via Git
+```bash
+git clone https://github.com/ColorlibHQ/AdminLTE.git
+```
+
+## Documentation
+
+Visit the [online documentation](https://adminlte.io/docs/3.1/) for the most
 updated guide. Information will be added on a weekly basis.
 
-Browser Support
----------------
-- IE 10+
-- Firefox (latest)
-- Chrome (latest)
-- Safari (latest)
-- Opera (latest)
+## Browsers support
 
-Contribution
-------------
-Contribution are always **welcome and recommended**! Here is how:
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png" alt="Vivaldi" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Vivaldi | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron |
+| --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
+| 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
 
-- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
-- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
-- Create a new branch
-- Make your changes
-- Create a pull request
+### Compile dist files
 
-#### Contribution Requirements:
+To compile the dist files you need Node.js/npm, clone/download the repo then:
 
-- When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
-- If you use content provided by another party, it must be appropriately licensed using an [open source](http://opensource.org/licenses) license.
-- Contributions are only accepted through Github pull requests.
-- Finally, contributed code must work in all supported browsers (see above for browser support).
+1. `npm install` (install npm deps)
+2. _Optional:_ `npm run dev` (developer mode, autocompile with browsersync support for live demo)
+3. `npm run production` (compile css/js files)
 
-License
--------
-AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](http://opensource.org/licenses/MIT). AdminLTE.io
-reserves the right to change the license of future releases.
 
-Legacy Releases
----------------
-- [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.3)
-- [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1)
+## Contributing
 
-Change log
-----------
-Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog
+Please read through our [contributing guidelines](https://github.com/ColorlibHQ/AdminLTE/tree/master/.github/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
 
-Image Credits
--------------
-[Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
+Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/main/.editorconfig) for easy use in common text editors. Read more and download plugins at <https://editorconfig.org/>.
 
-[Graphicsfuel](http://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
 
-[Pickaface](http://pickaface.net/)
+## License
 
-[Unsplash](https://unsplash.com/)
+AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](https://opensource.org/licenses/MIT).
+AdminLTE.io reserves the right to change the license of future releases.
 
-[Uifaces](http://uifaces.com/)
+## Image Credits
+
+- [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
+- [Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
+- [Pickaface](https://pickaface.net/)
+- [Unsplash](https://unsplash.com/)
+- [Uifaces](http://uifaces.com/)

build/config/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "env": {
+    "browser": false,
+    "node": true
+  },
+  "parserOptions": {
+    "sourceType": "script"
+  },
+  "extends": "../../.eslintrc.json",
+  "rules": {
+    "no-console": "off",
+    "strict": "error"
+  }
+}

build/config/postcss.config.js

@@ -1,14 +1,17 @@
 'use strict'
 
-module.exports = (ctx) => ({
-  map: ctx.file.dirname.includes('examples') ? false : {
+module.exports = {
+  map: {
     inline: false,
     annotation: true,
     sourcesContent: true
   },
-  plugins: {
-    autoprefixer: {
+  plugins: [
+    require('postcss-scrollbar')({
+      edgeAutohide: true
+    }),
+    require('autoprefixer')({
       cascade: false
-    }
-  }
-})
+    })
+  ]
+}

build/config/rollup.config.js

@@ -1,29 +1,32 @@
-import babel from 'rollup-plugin-babel'
+'use strict'
 
-const pkg  = require('../../package')
+const { babel } = require('@rollup/plugin-babel')
+
+const pkg = require('../../package')
 const year = new Date().getFullYear()
-
-const globals = {
-  jquery: 'jQuery'
-}
-
-export default {
-  input  : 'build/js/AdminLTE.js',
-  output : {
-    banner: `/*!
+const banner = `/*!
  * AdminLTE v${pkg.version} (${pkg.homepage})
  * Copyright 2014-${year} ${pkg.author}
- * Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
- */`,
-    file  : 'dist/js/adminlte.js',
+ * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
+ */`
+
+module.exports = {
+  input: 'build/js/AdminLTE.js',
+  output: {
+    banner,
+    file: 'dist/js/adminlte.js',
     format: 'umd',
-    globals,
-    name  : 'adminlte'
+    globals: {
+      jquery: 'jQuery'
+    },
+    name: 'adminlte'
   },
+  external: ['jquery'],
   plugins: [
     babel({
       exclude: 'node_modules/**',
-      externalHelpers: true
+      // Include the helpers in the bundle, at most one copy of each
+      babelHelpers: 'bundled'
     })
   ]
 }

build/js/.jscsrc

@@ -1,44 +0,0 @@
-{
-  "esnext": true,
-  "verbose": true,
-  "disallowEmptyBlocks": true,
-  "disallowKeywords": ["with"],
-  "disallowMixedSpacesAndTabs": true,
-  "disallowMultipleLineStrings": true,
-  "disallowMultipleVarDecl": true,
-  "disallowQuotedKeysInObjects": "allButReserved",
-  "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
-  "disallowSpaceBeforeBinaryOperators": [","],
-  "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
-  "disallowSpacesInFunctionDeclaration": { "beforeOpeningRoundBrace": true },
-  "disallowSpacesInNamedFunctionExpression": { "beforeOpeningRoundBrace": true },
-  "disallowSpacesInsideArrayBrackets": true,
-  "disallowSpacesInsideParentheses": true,
-  "disallowTrailingComma": true,
-  "disallowTrailingWhitespace": true,
-  "requireCamelCaseOrUpperCaseIdentifiers": true,
-  "requireCapitalizedConstructors": true,
-  "requireCommaBeforeLineBreak": true,
-  "requireDollarBeforejQueryAssignment": true,
-  "requireDotNotation": true,
-  "requireLineFeedAtFileEnd": true,
-  "requirePaddingNewLinesAfterUseStrict": true,
-  "requirePaddingNewLinesBeforeExport": true,
-  "requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
-  "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
-  "requireSpaceAfterLineComment": true,
-  "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
-  "requireSpaceBetweenArguments": true,
-  "requireSpacesInAnonymousFunctionExpression": { "beforeOpeningCurlyBrace": true, "beforeOpeningRoundBrace": true, "allExcept": ["shorthand"] },
-  "requireSpacesInConditionalExpression": true,
-  "requireSpacesInForStatement": true,
-  "requireSpacesInFunctionDeclaration": { "beforeOpeningCurlyBrace": true },
-  "requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
-  "requireSpacesInNamedFunctionExpression": { "beforeOpeningCurlyBrace": true },
-  "requireSpacesInsideObjectBrackets": "allButNested",
-  "validateAlignedFunctionParameters": true,
-  "validateIndentation": 2,
-  "validateLineBreaks": "LF",
-  "validateNewlineAfterArrayElements": true,
-  "validateQuoteMarks": "'"
-}

build/js/AdminLTE.js

@@ -1,23 +1,33 @@
+import CardRefresh from './CardRefresh'
+import CardWidget from './CardWidget'
 import ControlSidebar from './ControlSidebar'
+import DirectChat from './DirectChat'
+import Dropdown from './Dropdown'
+import ExpandableTable from './ExpandableTable'
+import Fullscreen from './Fullscreen'
+import IFrame from './IFrame'
 import Layout from './Layout'
 import PushMenu from './PushMenu'
-import Treeview from './Treeview'
-import DirectChat from './DirectChat'
-import TodoList from './TodoList'
-import CardWidget from './CardWidget'
-import CardRefresh from './CardRefresh'
-import Dropdown from './Dropdown'
+import SidebarSearch from './SidebarSearch'
+import NavbarSearch from './NavbarSearch'
 import Toasts from './Toasts'
+import TodoList from './TodoList'
+import Treeview from './Treeview'
 
 export {
+  CardRefresh,
+  CardWidget,
   ControlSidebar,
+  DirectChat,
+  Dropdown,
+  ExpandableTable,
+  Fullscreen,
+  IFrame,
   Layout,
   PushMenu,
-  Treeview,
-  DirectChat,
+  SidebarSearch,
+  NavbarSearch,
+  Toasts,
   TodoList,
-  CardWidget,
-  CardRefresh,
-  Dropdown,
-  Toasts
+  Treeview
 }

build/js/CardRefresh.js

@@ -5,160 +5,149 @@
  * --------------------------------------------
  */
 
-const CardRefresh = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'CardRefresh'
-  const DATA_KEY           = 'lte.cardrefresh'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    LOADED: `loaded${EVENT_KEY}`,
-    OVERLAY_ADDED: `overlay.added${EVENT_KEY}`,
-    OVERLAY_REMOVED: `overlay.removed${EVENT_KEY}`,
+const NAME = 'CardRefresh'
+const DATA_KEY = 'lte.cardrefresh'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_LOADED = `loaded${EVENT_KEY}`
+const EVENT_OVERLAY_ADDED = `overlay.added${EVENT_KEY}`
+const EVENT_OVERLAY_REMOVED = `overlay.removed${EVENT_KEY}`
+
+const CLASS_NAME_CARD = 'card'
+
+const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
+const SELECTOR_DATA_REFRESH = '[data-card-widget="card-refresh"]'
+
+const Default = {
+  source: '',
+  sourceSelector: '',
+  params: {},
+  trigger: SELECTOR_DATA_REFRESH,
+  content: '.card-body',
+  loadInContent: true,
+  loadOnInit: true,
+  responseType: '',
+  overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
+  onLoadStart() {},
+  onLoadDone(response) {
+    return response
   }
+}
 
-  const ClassName = {
-    CARD: 'card',
-  }
+class CardRefresh {
+  constructor(element, settings) {
+    this._element = element
+    this._parent = element.parents(SELECTOR_CARD).first()
+    this._settings = $.extend({}, Default, settings)
+    this._overlay = $(this._settings.overlayTemplate)
 
-  const Selector = {
-    CARD: `.${ClassName.CARD}`,
-    DATA_REFRESH: '[data-card-widget="card-refresh"]',
-  }
+    if (element.hasClass(CLASS_NAME_CARD)) {
+      this._parent = element
+    }
 
-  const Default = {
-    source: '',
-    sourceSelector: '',
-    params: {},
-    trigger: Selector.DATA_REFRESH,
-    content: '.card-body',
-    loadInContent: true,
-    loadOnInit: true,
-    responseType: '',
-    overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
-    onLoadStart: function () {
-    },
-    onLoadDone: function (response) {
-      return response;
+    if (this._settings.source === '') {
+      throw new Error('Source url was not defined. Please specify a url in your CardRefresh source option.')
     }
   }
 
-  class CardRefresh {
-    constructor(element, settings) {
-      this._element  = element
-      this._parent = element.parents(Selector.CARD).first()
-      this._settings = $.extend({}, Default, settings)
-      this._overlay = $(this._settings.overlayTemplate)
+  load() {
+    this._addOverlay()
+    this._settings.onLoadStart.call($(this))
 
-      if (element.hasClass(ClassName.CARD)) {
-        this._parent = element
-      }
-
-      if (this._settings.source === '') {
-        throw new Error('Source url was not defined. Please specify a url in your CardRefresh source option.');
-      }
-
-      this._init();
-
-      if (this._settings.loadOnInit) {
-        this.load();
-      }
-    }
-
-    load() {
-      this._addOverlay()
-      this._settings.onLoadStart.call($(this))
-
-      $.get(this._settings.source, this._settings.params, function (response) {
-        if (this._settings.loadInContent) {
-          if (this._settings.sourceSelector != '') {
-            response = $(response).find(this._settings.sourceSelector).html()
-          }
-
-          this._parent.find(this._settings.content).html(response)
+    $.get(this._settings.source, this._settings.params, response => {
+      if (this._settings.loadInContent) {
+        if (this._settings.sourceSelector !== '') {
+          response = $(response).find(this._settings.sourceSelector).html()
         }
 
-        this._settings.onLoadDone.call($(this), response)
-        this._removeOverlay();
-      }.bind(this), this._settings.responseType !== '' && this._settings.responseType)
-
-      const loadedEvent = $.Event(Event.LOADED)
-      $(this._element).trigger(loadedEvent)
-    }
-
-    _addOverlay() {
-      this._parent.append(this._overlay)
-
-      const overlayAddedEvent = $.Event(Event.OVERLAY_ADDED)
-      $(this._element).trigger(overlayAddedEvent)
-    };
-
-    _removeOverlay() {
-      this._parent.find(this._overlay).remove()
-
-      const overlayRemovedEvent = $.Event(Event.OVERLAY_REMOVED)
-      $(this._element).trigger(overlayRemovedEvent)
-    };
-
-
-    // Private
-
-    _init(card) {
-      $(this).find(this._settings.trigger).on('click', () => {
-        this.load()
-      })
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      let data = $(this).data(DATA_KEY)
-      let options = $(this).data()
-
-      if (!data) {
-        data = new CardRefresh($(this), options)
-        $(this).data(DATA_KEY, typeof config === 'string' ? data: config)
+        this._parent.find(this._settings.content).html(response)
       }
 
-      if (typeof config === 'string' && config.match(/load/)) {
-        data[config]()
-      } else if (typeof config === 'object') {
-        data._init($(this))
-      }
+      this._settings.onLoadDone.call($(this), response)
+      this._removeOverlay()
+    }, this._settings.responseType !== '' && this._settings.responseType)
+
+    $(this._element).trigger($.Event(EVENT_LOADED))
+  }
+
+  _addOverlay() {
+    this._parent.append(this._overlay)
+    $(this._element).trigger($.Event(EVENT_OVERLAY_ADDED))
+  }
+
+  _removeOverlay() {
+    this._parent.find(this._overlay).remove()
+    $(this._element).trigger($.Event(EVENT_OVERLAY_REMOVED))
+  }
+
+  // Private
+
+  _init() {
+    $(this).find(this._settings.trigger).on('click', () => {
+      this.load()
+    })
+
+    if (this._settings.loadOnInit) {
+      this.load()
     }
   }
 
-  /**
-   * Data API
-   * ====================================================
-   */
+  // Static
 
-  $(document).on('click', Selector.DATA_REFRESH, function (event) {
-    if (event) {
-      event.preventDefault()
+  static _jQueryInterface(config) {
+    let data = $(this).data(DATA_KEY)
+    const _options = $.extend({}, Default, $(this).data())
+
+    if (!data) {
+      data = new CardRefresh($(this), _options)
+      $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
     }
 
-    CardRefresh._jQueryInterface.call($(this), 'load')
+    if (typeof config === 'string' && /load/.test(config)) {
+      data[config]()
+    } else {
+      data._init($(this))
+    }
+  }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+
+$(document).on('click', SELECTOR_DATA_REFRESH, function (event) {
+  if (event) {
+    event.preventDefault()
+  }
+
+  CardRefresh._jQueryInterface.call($(this), 'load')
+})
+
+$(() => {
+  $(SELECTOR_DATA_REFRESH).each(function () {
+    CardRefresh._jQueryInterface.call($(this))
   })
+})
 
-  /**
-   * jQuery API
-   * ====================================================
-   */
+/**
+ * jQuery API
+ * ====================================================
+ */
 
-  $.fn[NAME] = CardRefresh._jQueryInterface
-  $.fn[NAME].Constructor = CardRefresh
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return CardRefresh._jQueryInterface
-  }
-
-  return CardRefresh
-})(jQuery)
+$.fn[NAME] = CardRefresh._jQueryInterface
+$.fn[NAME].Constructor = CardRefresh
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return CardRefresh._jQueryInterface
+}
 
 export default CardRefresh

build/js/CardWidget.js

@@ -5,245 +5,234 @@
  * --------------------------------------------
  */
 
-const CardWidget = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'CardWidget'
-  const DATA_KEY           = 'lte.cardwidget'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    EXPANDED: `expanded${EVENT_KEY}`,
-    COLLAPSED: `collapsed${EVENT_KEY}`,
-    MAXIMIZED: `maximized${EVENT_KEY}`,
-    MINIMIZED: `minimized${EVENT_KEY}`,
-    REMOVED: `removed${EVENT_KEY}`
+const NAME = 'CardWidget'
+const DATA_KEY = 'lte.cardwidget'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
+const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
+const EVENT_REMOVED = `removed${EVENT_KEY}`
+
+const CLASS_NAME_CARD = 'card'
+const CLASS_NAME_COLLAPSED = 'collapsed-card'
+const CLASS_NAME_COLLAPSING = 'collapsing-card'
+const CLASS_NAME_EXPANDING = 'expanding-card'
+const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
+const CLASS_NAME_MAXIMIZED = 'maximized-card'
+
+const SELECTOR_DATA_REMOVE = '[data-card-widget="remove"]'
+const SELECTOR_DATA_COLLAPSE = '[data-card-widget="collapse"]'
+const SELECTOR_DATA_MAXIMIZE = '[data-card-widget="maximize"]'
+const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
+const SELECTOR_CARD_HEADER = '.card-header'
+const SELECTOR_CARD_BODY = '.card-body'
+const SELECTOR_CARD_FOOTER = '.card-footer'
+
+const Default = {
+  animationSpeed: 'normal',
+  collapseTrigger: SELECTOR_DATA_COLLAPSE,
+  removeTrigger: SELECTOR_DATA_REMOVE,
+  maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
+  collapseIcon: 'fa-minus',
+  expandIcon: 'fa-plus',
+  maximizeIcon: 'fa-expand',
+  minimizeIcon: 'fa-compress'
+}
+
+class CardWidget {
+  constructor(element, settings) {
+    this._element = element
+    this._parent = element.parents(SELECTOR_CARD).first()
+
+    if (element.hasClass(CLASS_NAME_CARD)) {
+      this._parent = element
+    }
+
+    this._settings = $.extend({}, Default, settings)
   }
 
-  const ClassName = {
-    CARD: 'card',
-    COLLAPSED: 'collapsed-card',
-    WAS_COLLAPSED: 'was-collapsed',
-    MAXIMIZED: 'maximized-card',
-  }
-
-  const Selector = {
-    DATA_REMOVE: '[data-card-widget="remove"]',
-    DATA_COLLAPSE: '[data-card-widget="collapse"]',
-    DATA_MAXIMIZE: '[data-card-widget="maximize"]',
-    CARD: `.${ClassName.CARD}`,
-    CARD_HEADER: '.card-header',
-    CARD_BODY: '.card-body',
-    CARD_FOOTER: '.card-footer',
-    COLLAPSED: `.${ClassName.COLLAPSED}`,
-  }
-
-  const Default = {
-    animationSpeed: 'normal',
-    collapseTrigger: Selector.DATA_COLLAPSE,
-    removeTrigger: Selector.DATA_REMOVE,
-    maximizeTrigger: Selector.DATA_MAXIMIZE,
-    collapseIcon: 'fa-minus',
-    expandIcon: 'fa-plus',
-    maximizeIcon: 'fa-expand',
-    minimizeIcon: 'fa-compress',
-  }
-
-  class CardWidget {
-    constructor(element, settings) {
-      this._element  = element
-      this._parent = element.parents(Selector.CARD).first()
-
-      if (element.hasClass(ClassName.CARD)) {
-        this._parent = element
-      }
-
-      this._settings = $.extend({}, Default, settings)
-    }
-
-    collapse() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
-        .slideUp(this._settings.animationSpeed, () => {
-          this._parent.addClass(ClassName.COLLAPSED)
-        })
-      this._parent.find(this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
-        .addClass(this._settings.expandIcon)
-        .removeClass(this._settings.collapseIcon)
-
-      const collapsed = $.Event(Event.COLLAPSED)
-
-      this._element.trigger(collapsed, this._parent)
-    }
-
-    expand() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
-        .slideDown(this._settings.animationSpeed, () => {
-          this._parent.removeClass(ClassName.COLLAPSED)
-        })
-
-      this._parent.find(this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
-        .addClass(this._settings.collapseIcon)
-        .removeClass(this._settings.expandIcon)
-
-      const expanded = $.Event(Event.EXPANDED)
-
-      this._element.trigger(expanded, this._parent)
-    }
-
-    remove() {
-      this._parent.slideUp()
-
-      const removed = $.Event(Event.REMOVED)
-
-      this._element.trigger(removed, this._parent)
-    }
-
-    toggle() {
-      if (this._parent.hasClass(ClassName.COLLAPSED)) {
-        this.expand()
-        return
-      }
-
-      this.collapse()
-    }
-    
-    maximize() {
-      this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
-        .addClass(this._settings.minimizeIcon)
-        .removeClass(this._settings.maximizeIcon)
-      this._parent.css({
-        'height': this._parent.height(),
-        'width': this._parent.width(),
-        'transition': 'all .15s'
-      }).delay(150).queue(function(){
-        $(this).addClass(ClassName.MAXIMIZED)
-        $('html').addClass(ClassName.MAXIMIZED)
-        if ($(this).hasClass(ClassName.COLLAPSED)) {
-          $(this).addClass(ClassName.WAS_COLLAPSED)
-        }
-        $(this).dequeue()
+  collapse() {
+    this._parent.addClass(CLASS_NAME_COLLAPSING).children(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
+      .slideUp(this._settings.animationSpeed, () => {
+        this._parent.addClass(CLASS_NAME_COLLAPSED).removeClass(CLASS_NAME_COLLAPSING)
       })
 
-      const maximized = $.Event(Event.MAXIMIZED)
+    this._parent.find(`> ${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.collapseIcon}`)
+      .addClass(this._settings.expandIcon)
+      .removeClass(this._settings.collapseIcon)
 
-      this._element.trigger(maximized, this._parent)
-    }
-
-    minimize() {
-      this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
-        .addClass(this._settings.maximizeIcon)
-        .removeClass(this._settings.minimizeIcon)
-      this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
-        'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
-      ).delay(10).queue(function(){
-        $(this).removeClass(ClassName.MAXIMIZED)
-        $('html').removeClass(ClassName.MAXIMIZED)
-        $(this).css({
-          'height': 'inherit',
-          'width': 'inherit'
-        })
-        if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
-          $(this).removeClass(ClassName.WAS_COLLAPSED)
-        }
-        $(this).dequeue()
-      })
-
-      const MINIMIZED = $.Event(Event.MINIMIZED)
-
-      this._element.trigger(MINIMIZED, this._parent)
-    }
-
-    toggleMaximize() {
-      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
-        this.minimize()
-        return
-      }
-
-      this.maximize()
-    }
-
-    // Private
-
-    _init(card) {
-      this._parent = card
-
-      $(this).find(this._settings.collapseTrigger).click(() => {
-        this.toggle()
-      })
-
-      $(this).find(this._settings.maximizeTrigger).click(() => {
-        this.toggleMaximize()
-      })
-
-      $(this).find(this._settings.removeTrigger).click(() => {
-        this.remove()
-      })
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      let data = $(this).data(DATA_KEY)
-
-      if (!data) {
-        data = new CardWidget($(this), data)
-        $(this).data(DATA_KEY, typeof config === 'string' ? data: config)
-      }
-
-      if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
-        data[config]()
-      } else if (typeof config === 'object') {
-        data._init($(this))
-      }
-    }
+    this._element.trigger($.Event(EVENT_COLLAPSED), this._parent)
   }
 
-  /**
-   * Data API
-   * ====================================================
-   */
+  expand() {
+    this._parent.addClass(CLASS_NAME_EXPANDING).children(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
+      .slideDown(this._settings.animationSpeed, () => {
+        this._parent.removeClass(CLASS_NAME_COLLAPSED).removeClass(CLASS_NAME_EXPANDING)
+      })
 
-  $(document).on('click', Selector.DATA_COLLAPSE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
+    this._parent.find(`> ${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.expandIcon}`)
+      .addClass(this._settings.collapseIcon)
+      .removeClass(this._settings.expandIcon)
 
-    CardWidget._jQueryInterface.call($(this), 'toggle')
-  })
-
-  $(document).on('click', Selector.DATA_REMOVE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    CardWidget._jQueryInterface.call($(this), 'remove')
-  })
-
-  $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = CardWidget._jQueryInterface
-  $.fn[NAME].Constructor = CardWidget
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return CardWidget._jQueryInterface
+    this._element.trigger($.Event(EVENT_EXPANDED), this._parent)
   }
 
-  return CardWidget
-})(jQuery)
+  remove() {
+    this._parent.slideUp()
+    this._element.trigger($.Event(EVENT_REMOVED), this._parent)
+  }
+
+  toggle() {
+    if (this._parent.hasClass(CLASS_NAME_COLLAPSED)) {
+      this.expand()
+      return
+    }
+
+    this.collapse()
+  }
+
+  maximize() {
+    this._parent.find(`${this._settings.maximizeTrigger} .${this._settings.maximizeIcon}`)
+      .addClass(this._settings.minimizeIcon)
+      .removeClass(this._settings.maximizeIcon)
+    this._parent.css({
+      height: this._parent.height(),
+      width: this._parent.width(),
+      transition: 'all .15s'
+    }).delay(150).queue(function () {
+      const $element = $(this)
+
+      $element.addClass(CLASS_NAME_MAXIMIZED)
+      $('html').addClass(CLASS_NAME_MAXIMIZED)
+      if ($element.hasClass(CLASS_NAME_COLLAPSED)) {
+        $element.addClass(CLASS_NAME_WAS_COLLAPSED)
+      }
+
+      $element.dequeue()
+    })
+
+    this._element.trigger($.Event(EVENT_MAXIMIZED), this._parent)
+  }
+
+  minimize() {
+    this._parent.find(`${this._settings.maximizeTrigger} .${this._settings.minimizeIcon}`)
+      .addClass(this._settings.maximizeIcon)
+      .removeClass(this._settings.minimizeIcon)
+    this._parent.css('cssText', `height: ${this._parent[0].style.height} !important; width: ${this._parent[0].style.width} !important; transition: all .15s;`
+    ).delay(10).queue(function () {
+      const $element = $(this)
+
+      $element.removeClass(CLASS_NAME_MAXIMIZED)
+      $('html').removeClass(CLASS_NAME_MAXIMIZED)
+      $element.css({
+        height: 'inherit',
+        width: 'inherit'
+      })
+      if ($element.hasClass(CLASS_NAME_WAS_COLLAPSED)) {
+        $element.removeClass(CLASS_NAME_WAS_COLLAPSED)
+      }
+
+      $element.dequeue()
+    })
+
+    this._element.trigger($.Event(EVENT_MINIMIZED), this._parent)
+  }
+
+  toggleMaximize() {
+    if (this._parent.hasClass(CLASS_NAME_MAXIMIZED)) {
+      this.minimize()
+      return
+    }
+
+    this.maximize()
+  }
+
+  // Private
+
+  _init(card) {
+    this._parent = card
+
+    $(this).find(this._settings.collapseTrigger).click(() => {
+      this.toggle()
+    })
+
+    $(this).find(this._settings.maximizeTrigger).click(() => {
+      this.toggleMaximize()
+    })
+
+    $(this).find(this._settings.removeTrigger).click(() => {
+      this.remove()
+    })
+  }
+
+  // Static
+
+  static _jQueryInterface(config) {
+    let data = $(this).data(DATA_KEY)
+    const _options = $.extend({}, Default, $(this).data())
+
+    if (!data) {
+      data = new CardWidget($(this), _options)
+      $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
+    }
+
+    if (typeof config === 'string' && /collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/.test(config)) {
+      data[config]()
+    } else if (typeof config === 'object') {
+      data._init($(this))
+    }
+  }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+
+$(document).on('click', SELECTOR_DATA_COLLAPSE, function (event) {
+  if (event) {
+    event.preventDefault()
+  }
+
+  CardWidget._jQueryInterface.call($(this), 'toggle')
+})
+
+$(document).on('click', SELECTOR_DATA_REMOVE, function (event) {
+  if (event) {
+    event.preventDefault()
+  }
+
+  CardWidget._jQueryInterface.call($(this), 'remove')
+})
+
+$(document).on('click', SELECTOR_DATA_MAXIMIZE, function (event) {
+  if (event) {
+    event.preventDefault()
+  }
+
+  CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = CardWidget._jQueryInterface
+$.fn[NAME].Constructor = CardWidget
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return CardWidget._jQueryInterface
+}
 
 export default CardWidget

build/js/ControlSidebar.js

@@ -5,286 +5,318 @@
  * --------------------------------------------
  */
 
-const ControlSidebar = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'ControlSidebar'
-  const DATA_KEY           = 'lte.controlsidebar'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
-  const DATA_API_KEY       = '.data-api'
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    COLLAPSED: `collapsed${EVENT_KEY}`,
-    EXPANDED: `expanded${EVENT_KEY}`,
+const NAME = 'ControlSidebar'
+const DATA_KEY = 'lte.controlsidebar'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+
+const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
+const SELECTOR_CONTROL_SIDEBAR_CONTENT = '.control-sidebar-content'
+const SELECTOR_DATA_TOGGLE = '[data-widget="control-sidebar"]'
+const SELECTOR_HEADER = '.main-header'
+const SELECTOR_FOOTER = '.main-footer'
+
+const CLASS_NAME_CONTROL_SIDEBAR_ANIMATE = 'control-sidebar-animate'
+const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
+const CLASS_NAME_CONTROL_SIDEBAR_SLIDE = 'control-sidebar-slide-open'
+const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
+const CLASS_NAME_NAVBAR_FIXED = 'layout-navbar-fixed'
+const CLASS_NAME_NAVBAR_SM_FIXED = 'layout-sm-navbar-fixed'
+const CLASS_NAME_NAVBAR_MD_FIXED = 'layout-md-navbar-fixed'
+const CLASS_NAME_NAVBAR_LG_FIXED = 'layout-lg-navbar-fixed'
+const CLASS_NAME_NAVBAR_XL_FIXED = 'layout-xl-navbar-fixed'
+const CLASS_NAME_FOOTER_FIXED = 'layout-footer-fixed'
+const CLASS_NAME_FOOTER_SM_FIXED = 'layout-sm-footer-fixed'
+const CLASS_NAME_FOOTER_MD_FIXED = 'layout-md-footer-fixed'
+const CLASS_NAME_FOOTER_LG_FIXED = 'layout-lg-footer-fixed'
+const CLASS_NAME_FOOTER_XL_FIXED = 'layout-xl-footer-fixed'
+
+const Default = {
+  controlsidebarSlide: true,
+  scrollbarTheme: 'os-theme-light',
+  scrollbarAutoHide: 'l',
+  target: SELECTOR_CONTROL_SIDEBAR
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class ControlSidebar {
+  constructor(element, config) {
+    this._element = element
+    this._config = config
   }
 
-  const Selector = {
-    CONTROL_SIDEBAR: '.control-sidebar',
-    CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
-    DATA_TOGGLE: '[data-widget="control-sidebar"]',
-    CONTENT: '.content-wrapper',
-    HEADER: '.main-header',
-    FOOTER: '.main-footer',
-  }
+  // Public
 
-  const ClassName = {
-    CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',
-    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
-    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open',
-    LAYOUT_FIXED: 'layout-fixed',
-    NAVBAR_FIXED: 'layout-navbar-fixed',
-    NAVBAR_SM_FIXED: 'layout-sm-navbar-fixed',
-    NAVBAR_MD_FIXED: 'layout-md-navbar-fixed',
-    NAVBAR_LG_FIXED: 'layout-lg-navbar-fixed',
-    NAVBAR_XL_FIXED: 'layout-xl-navbar-fixed',
-    FOOTER_FIXED: 'layout-footer-fixed',
-    FOOTER_SM_FIXED: 'layout-sm-footer-fixed',
-    FOOTER_MD_FIXED: 'layout-md-footer-fixed',
-    FOOTER_LG_FIXED: 'layout-lg-footer-fixed',
-    FOOTER_XL_FIXED: 'layout-xl-footer-fixed',
-  }
+  collapse() {
+    const $body = $('body')
+    const $html = $('html')
+    const { target } = this._config
 
-  const Default = {
-    controlsidebarSlide: true,
-    scrollbarTheme : 'os-theme-light',
-    scrollbarAutoHide: 'l',
-  }
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-
-  class ControlSidebar {
-    constructor(element, config) {
-      this._element = element
-      this._config  = config
-
-      this._init()
+    // 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()
+        $html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
+        $(this).dequeue()
+      })
+    } else {
+      $body.removeClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN)
     }
 
-    // Public
+    $(this._element).trigger($.Event(EVENT_COLLAPSED))
+  }
 
-    show() {
-      // Show the control sidebar
-      if (this._config.controlsidebarSlide) {
-        $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
-        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
-          $(Selector.CONTROL_SIDEBAR).hide()
-          $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+  show() {
+    const $body = $('body')
+    const $html = $('html')
+
+    // Collapse the control sidebar
+    if (this._config.controlsidebarSlide) {
+      $html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
+      $(this._config.target).show().delay(10).queue(function () {
+        $body.addClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
+          $html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
           $(this).dequeue()
         })
-      } else {
-        $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
-      }
-
-      const expandedEvent = $.Event(Event.EXPANDED)
-      $(this._element).trigger(expandedEvent)
+        $(this).dequeue()
+      })
+    } else {
+      $body.addClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN)
     }
 
-    collapse() {
-      // Collapse the control sidebar
-      if (this._config.controlsidebarSlide) {
-        $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
-        $(Selector.CONTROL_SIDEBAR).show().delay(10).queue(function(){
-          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
-            $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
-            $(this).dequeue()
-          })
-          $(this).dequeue()
-        })
-      } else {
-        $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
-      }
+    this._fixHeight()
+    this._fixScrollHeight()
 
-      const collapsedEvent = $.Event(Event.COLLAPSED)
-      $(this._element).trigger(collapsedEvent)
+    $(this._element).trigger($.Event(EVENT_EXPANDED))
+  }
+
+  toggle() {
+    const $body = $('body')
+    const shouldClose = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+        $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
+
+    if (shouldClose) {
+      // Close the control sidebar
+      this.collapse()
+    } else {
+      // Open the control sidebar
+      this.show()
+    }
+  }
+
+  // Private
+
+  _init() {
+    const $body = $('body')
+    const shouldNotHideAll = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+        $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
+
+    if (shouldNotHideAll) {
+      $(SELECTOR_CONTROL_SIDEBAR).not(this._config.target).hide()
+      $(this._config.target).css('display', 'block')
+    } else {
+      $(SELECTOR_CONTROL_SIDEBAR).hide()
     }
 
-    toggle() {
-      const shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
-        .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)
-      if (shouldOpen) {
-        // Open the control sidebar
-        this.show()
-      } else {
-        // Close the control sidebar
-        this.collapse()
-      }
-    }
+    this._fixHeight()
+    this._fixScrollHeight()
 
-    // Private
-
-    _init() {
+    $(window).resize(() => {
       this._fixHeight()
       this._fixScrollHeight()
+    })
 
-      $(window).resize(() => {
-        this._fixHeight()
+    $(window).scroll(() => {
+      const $body = $('body')
+      const shouldFixHeight = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+          $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
+
+      if (shouldFixHeight) {
         this._fixScrollHeight()
+      }
+    })
+  }
+
+  _isNavbarFixed() {
+    const $body = $('body')
+    return (
+      $body.hasClass(CLASS_NAME_NAVBAR_FIXED) ||
+        $body.hasClass(CLASS_NAME_NAVBAR_SM_FIXED) ||
+        $body.hasClass(CLASS_NAME_NAVBAR_MD_FIXED) ||
+        $body.hasClass(CLASS_NAME_NAVBAR_LG_FIXED) ||
+        $body.hasClass(CLASS_NAME_NAVBAR_XL_FIXED)
+    )
+  }
+
+  _isFooterFixed() {
+    const $body = $('body')
+    return (
+      $body.hasClass(CLASS_NAME_FOOTER_FIXED) ||
+        $body.hasClass(CLASS_NAME_FOOTER_SM_FIXED) ||
+        $body.hasClass(CLASS_NAME_FOOTER_MD_FIXED) ||
+        $body.hasClass(CLASS_NAME_FOOTER_LG_FIXED) ||
+        $body.hasClass(CLASS_NAME_FOOTER_XL_FIXED)
+    )
+  }
+
+  _fixScrollHeight() {
+    const $body = $('body')
+    const $controlSidebar = $(this._config.target)
+
+    if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
+      return
+    }
+
+    const heights = {
+      scroll: $(document).height(),
+      window: $(window).height(),
+      header: $(SELECTOR_HEADER).outerHeight(),
+      footer: $(SELECTOR_FOOTER).outerHeight()
+    }
+    const positions = {
+      bottom: Math.abs((heights.window + $(window).scrollTop()) - heights.scroll),
+      top: $(window).scrollTop()
+    }
+
+    const navbarFixed = this._isNavbarFixed() && $(SELECTOR_HEADER).css('position') === 'fixed'
+
+    const footerFixed = this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed'
+
+    const $controlsidebarContent = $(`${this._config.target}, ${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
+
+    if (positions.top === 0 && positions.bottom === 0) {
+      $controlSidebar.css({
+        bottom: heights.footer,
+        top: heights.header
       })
-
-      $(window).scroll(() => {
-        if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
-            this._fixScrollHeight()
-        }
-      })
+      $controlsidebarContent.css('height', heights.window - (heights.header + heights.footer))
+    } else if (positions.bottom <= heights.footer) {
+      if (footerFixed === false) {
+        const top = heights.header - positions.top
+        $controlSidebar.css('bottom', heights.footer - positions.bottom).css('top', top >= 0 ? top : 0)
+        $controlsidebarContent.css('height', heights.window - (heights.footer - positions.bottom))
+      } else {
+        $controlSidebar.css('bottom', heights.footer)
+      }
+    } else if (positions.top <= heights.header) {
+      if (navbarFixed === false) {
+        $controlSidebar.css('top', heights.header - positions.top)
+        $controlsidebarContent.css('height', heights.window - (heights.header - positions.top))
+      } else {
+        $controlSidebar.css('top', heights.header)
+      }
+    } else if (navbarFixed === false) {
+      $controlSidebar.css('top', 0)
+      $controlsidebarContent.css('height', heights.window)
+    } else {
+      $controlSidebar.css('top', heights.header)
     }
 
-    _fixScrollHeight() {
-      const heights = {
-        scroll: $(document).height(),
-        window: $(window).height(),
-        header: $(Selector.HEADER).outerHeight(),
-        footer: $(Selector.FOOTER).outerHeight(),
-      }
-      const positions = {
-        bottom: Math.abs((heights.window + $(window).scrollTop()) - heights.scroll),
-        top: $(window).scrollTop(),
-      }
+    if (footerFixed && navbarFixed) {
+      $controlsidebarContent.css('height', '100%')
+      $controlSidebar.css('height', '')
+    } else if (footerFixed || navbarFixed) {
+      $controlsidebarContent.css('height', '100%')
+      $controlsidebarContent.css('height', '')
+    }
+  }
 
-      let navbarFixed = false;
-      let footerFixed = false;
+  _fixHeight() {
+    const $body = $('body')
+    const $controlSidebar = $(`${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
 
-      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
-        if (
-          $('body').hasClass(ClassName.NAVBAR_FIXED)
-          || $('body').hasClass(ClassName.NAVBAR_SM_FIXED)
-          || $('body').hasClass(ClassName.NAVBAR_MD_FIXED)
-          || $('body').hasClass(ClassName.NAVBAR_LG_FIXED)
-          || $('body').hasClass(ClassName.NAVBAR_XL_FIXED)
-        ) {
-          if ($(Selector.HEADER).css("position") === "fixed") {
-            navbarFixed = true;
-          }
-        }
-        if (
-          $('body').hasClass(ClassName.FOOTER_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_SM_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_MD_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_LG_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_XL_FIXED)
-        ) {
-          if ($(Selector.FOOTER).css("position") === "fixed") {
-            footerFixed = true;
-          }
-        }
-
-        if (positions.top === 0 && positions.bottom === 0) {
-          $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer);
-          $(Selector.CONTROL_SIDEBAR).css('top', heights.header);
-          $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header + heights.footer))
-        } else if (positions.bottom <= heights.footer) {
-          if (footerFixed === false) {  
-            $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer - positions.bottom);
-            $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.footer - positions.bottom))
-          } else {
-            $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer);
-          }
-        } else if (positions.top <= heights.header) {
-          if (navbarFixed === false) {
-            $(Selector.CONTROL_SIDEBAR).css('top', heights.header - positions.top);
-            $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header - positions.top))
-          } else {
-            $(Selector.CONTROL_SIDEBAR).css('top', heights.header);
-          }
-        } else {
-          if (navbarFixed === false) {
-            $(Selector.CONTROL_SIDEBAR).css('top', 0);
-            $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window)
-          } else {
-            $(Selector.CONTROL_SIDEBAR).css('top', heights.header);
-          }
-        }
-      }
+    if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
+      $controlSidebar.attr('style', '')
+      return
     }
 
-    _fixHeight() {
-      const heights = {
-        window: $(window).height(),
-        header: $(Selector.HEADER).outerHeight(),
-        footer: $(Selector.FOOTER).outerHeight(),
-      }
-
-      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
-        let sidebarHeight = heights.window - heights.header;
-
-        if (
-          $('body').hasClass(ClassName.FOOTER_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_SM_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_MD_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_LG_FIXED)
-          || $('body').hasClass(ClassName.FOOTER_XL_FIXED)
-        ) {
-          if ($(Selector.FOOTER).css("position") === "fixed") {
-            sidebarHeight = heights.window - heights.header - heights.footer;
-          }
-        }
-
-        $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', sidebarHeight)
-        
-        if (typeof $.fn.overlayScrollbars !== 'undefined') {
-          $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).overlayScrollbars({
-            className       : this._config.scrollbarTheme,
-            sizeAutoCapable : true,
-            scrollbars : {
-              autoHide: this._config.scrollbarAutoHide, 
-              clickScrolling : true
-            }
-          })
-        }
-      }
+    const heights = {
+      window: $(window).height(),
+      header: $(SELECTOR_HEADER).outerHeight(),
+      footer: $(SELECTOR_FOOTER).outerHeight()
     }
 
+    let sidebarHeight = heights.window - heights.header
 
-    // Static
+    if (this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed') {
+      sidebarHeight = heights.window - heights.header - heights.footer
+    }
 
-    static _jQueryInterface(operation) {
-      return this.each(function () {
-        let data = $(this).data(DATA_KEY)
+    $controlSidebar.css('height', sidebarHeight)
 
-        if (!data) {
-          data = new ControlSidebar(this, $(this).data())
-          $(this).data(DATA_KEY, data)
+    if (typeof $.fn.overlayScrollbars !== 'undefined') {
+      $controlSidebar.overlayScrollbars({
+        className: this._config.scrollbarTheme,
+        sizeAutoCapable: true,
+        scrollbars: {
+          autoHide: this._config.scrollbarAutoHide,
+          clickScrolling: true
         }
-
-        if (data[operation] === 'undefined') {
-          throw new Error(`${operation} is not a function`)
-        }
-
-        data[operation]()
       })
     }
   }
 
-  /**
-   *
-   * Data Api implementation
-   * ====================================================
-   */
-  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
-    event.preventDefault()
+  // Static
 
-    ControlSidebar._jQueryInterface.call($(this), 'toggle')
-  })
+  static _jQueryInterface(operation) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _options = $.extend({}, Default, $(this).data())
 
-  /**
-   * jQuery API
-   * ====================================================
-   */
+      if (!data) {
+        data = new ControlSidebar(this, _options)
+        $(this).data(DATA_KEY, data)
+      }
 
-  $.fn[NAME] = ControlSidebar._jQueryInterface
-  $.fn[NAME].Constructor = ControlSidebar
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return ControlSidebar._jQueryInterface
+      if (data[operation] === 'undefined') {
+        throw new Error(`${operation} is not a function`)
+      }
+
+      data[operation]()
+    })
   }
+}
 
-  return ControlSidebar
-})(jQuery)
+/**
+ *
+ * Data Api implementation
+ * ====================================================
+ */
+$(document).on('click', SELECTOR_DATA_TOGGLE, function (event) {
+  event.preventDefault()
+
+  ControlSidebar._jQueryInterface.call($(this), 'toggle')
+})
+
+$(document).ready(() => {
+  ControlSidebar._jQueryInterface.call($(SELECTOR_DATA_TOGGLE), '_init')
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = ControlSidebar._jQueryInterface
+$.fn[NAME].Constructor = ControlSidebar
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return ControlSidebar._jQueryInterface
+}
 
 export default ControlSidebar

build/js/DirectChat.js

@@ -5,88 +5,80 @@
  * --------------------------------------------
  */
 
-const DirectChat = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'DirectChat'
-  const DATA_KEY           = 'lte.directchat'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
-  const DATA_API_KEY       = '.data-api'
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    TOGGLED: `toggled{EVENT_KEY}`
+const NAME = 'DirectChat'
+const DATA_KEY = 'lte.directchat'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_TOGGLED = `toggled${EVENT_KEY}`
+
+const SELECTOR_DATA_TOGGLE = '[data-widget="chat-pane-toggle"]'
+const SELECTOR_DIRECT_CHAT = '.direct-chat'
+
+const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class DirectChat {
+  constructor(element) {
+    this._element = element
   }
 
-  const Selector = {
-    DATA_TOGGLE: '[data-widget="chat-pane-toggle"]',
-    DIRECT_CHAT: '.direct-chat'
-  };
-
-  const ClassName = {
-    DIRECT_CHAT_OPEN: 'direct-chat-contacts-open'
-  };
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-
-  class DirectChat {
-    constructor(element, config) {
-      this._element = element
-    }
-
-    toggle() {
-      $(this._element).parents(Selector.DIRECT_CHAT).first().toggleClass(ClassName.DIRECT_CHAT_OPEN);
-
-      const toggledEvent = $.Event(Event.TOGGLED)
-      $(this._element).trigger(toggledEvent)
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data      = $(this).data(DATA_KEY)
-
-        if (!data) {
-          data = new DirectChat($(this))
-          $(this).data(DATA_KEY, data)
-        }
-
-        data[config]()
-      })
-    }
+  toggle() {
+    $(this._element).parents(SELECTOR_DIRECT_CHAT).first().toggleClass(CLASS_NAME_DIRECT_CHAT_OPEN)
+    $(this._element).trigger($.Event(EVENT_TOGGLED))
   }
 
-  /**
-   *
-   * Data Api implementation
-   * ====================================================
-   */
+  // Static
 
-  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
-    if (event) event.preventDefault();
-    DirectChat._jQueryInterface.call($(this), 'toggle');
-  });
+  static _jQueryInterface(config) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
 
-  /**
-   * jQuery API
-   * ====================================================
-   */
+      if (!data) {
+        data = new DirectChat($(this))
+        $(this).data(DATA_KEY, data)
+      }
 
-  $.fn[NAME] = DirectChat._jQueryInterface
-  $.fn[NAME].Constructor = DirectChat
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return DirectChat._jQueryInterface
+      data[config]()
+    })
+  }
+}
+
+/**
+ *
+ * Data Api implementation
+ * ====================================================
+ */
+
+$(document).on('click', SELECTOR_DATA_TOGGLE, function (event) {
+  if (event) {
+    event.preventDefault()
   }
 
-  return DirectChat
-})(jQuery)
+  DirectChat._jQueryInterface.call($(this), 'toggle')
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = DirectChat._jQueryInterface
+$.fn[NAME].Constructor = DirectChat
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return DirectChat._jQueryInterface
+}
 
 export default DirectChat

build/js/Dropdown.js

@@ -5,108 +5,142 @@
  * --------------------------------------------
  */
 
-const Dropdown = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'Dropdown'
-  const DATA_KEY           = 'lte.dropdown'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Selector = {
-    DROPDOWN_MENU: 'ul.dropdown-menu',
-    DROPDOWN_TOGGLE: '[data-toggle="dropdown"]',
+const NAME = 'Dropdown'
+const DATA_KEY = 'lte.dropdown'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const SELECTOR_NAVBAR = '.navbar'
+const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'
+const SELECTOR_DROPDOWN_MENU_ACTIVE = '.dropdown-menu.show'
+const SELECTOR_DROPDOWN_TOGGLE = '[data-toggle="dropdown"]'
+
+const CLASS_NAME_DROPDOWN_RIGHT = 'dropdown-menu-right'
+const CLASS_NAME_DROPDOWN_SUBMENU = 'dropdown-submenu'
+
+// TODO: this is unused; should be removed along with the extend?
+const Default = {}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class Dropdown {
+  constructor(element, config) {
+    this._config = config
+    this._element = element
   }
 
-  const ClassName = {
-    DROPDOWN_HOVER: '.dropdown-hover'
-  }
+  // Public
 
-  const Default = {
-  }
+  toggleSubmenu() {
+    this._element.siblings().show().toggleClass('show')
 
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-
-  class Dropdown {
-    constructor(element, config) {
-      this._config  = config
-      this._element = element
+    if (!this._element.next().hasClass('show')) {
+      this._element.parents(SELECTOR_DROPDOWN_MENU).first().find('.show').removeClass('show').hide()
     }
 
-    // Public
+    this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', () => {
+      $('.dropdown-submenu .show').removeClass('show').hide()
+    })
+  }
 
-    toggleSubmenu() {
-      this._element.siblings().show().toggleClass("show");
-
-      if (! this._element.next().hasClass('show')) {
-        this._element.parents('.dropdown-menu').first().find('.show').removeClass("show").hide();
-      }
-
-      this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
-        $('.dropdown-submenu .show').removeClass("show").hide();
-      });
+  fixPosition() {
+    const $element = $(SELECTOR_DROPDOWN_MENU_ACTIVE)
 
+    if ($element.length === 0) {
+      return
     }
 
-    // Static
+    if ($element.hasClass(CLASS_NAME_DROPDOWN_RIGHT)) {
+      $element.css({
+        left: 'inherit',
+        right: 0
+      })
+    } else {
+      $element.css({
+        left: 0,
+        right: 'inherit'
+      })
+    }
 
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data      = $(this).data(DATA_KEY)
-        const _config = $.extend({}, Default, $(this).data())
+    const offset = $element.offset()
+    const width = $element.width()
+    const visiblePart = $(window).width() - offset.left
 
-        if (!data) {
-          data = new Dropdown($(this), _config)
-          $(this).data(DATA_KEY, data)
-        }
-
-        if (config === 'toggleSubmenu') {
-          data[config]()
-        }
+    if (offset.left < 0) {
+      $element.css({
+        left: 'inherit',
+        right: offset.left - 5
+      })
+    } else if (visiblePart < width) {
+      $element.css({
+        left: 'inherit',
+        right: 0
       })
     }
   }
 
-  /**
-   * Data API
-   * ====================================================
-   */
+  // Static
 
-  $(Selector.DROPDOWN_MENU + ' ' + Selector.DROPDOWN_TOGGLE).on("click", function(event) {
-    event.preventDefault();
-    event.stopPropagation();
+  static _jQueryInterface(config) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _config = $.extend({}, Default, $(this).data())
 
-    Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
-  });
+      if (!data) {
+        data = new Dropdown($(this), _config)
+        $(this).data(DATA_KEY, data)
+      }
 
-  // $(Selector.SIDEBAR + ' a').on('focusin', () => {
-  //   $(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
-  // })
+      if (config === 'toggleSubmenu' || config === 'fixPosition') {
+        data[config]()
+      }
+    })
+  }
+}
 
-  // $(Selector.SIDEBAR + ' a').on('focusout', () => {
-  //   $(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
-  // })
+/**
+ * Data API
+ * ====================================================
+ */
 
-  /**
-   * jQuery API
-   * ====================================================
-   */
+$(`${SELECTOR_DROPDOWN_MENU} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', function (event) {
+  event.preventDefault()
+  event.stopPropagation()
 
-  $.fn[NAME] = Dropdown._jQueryInterface
-  $.fn[NAME].Constructor = Dropdown
-  $.fn[NAME].noConflict = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Dropdown._jQueryInterface
+  Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
+})
+
+$(`${SELECTOR_NAVBAR} ${SELECTOR_DROPDOWN_TOGGLE}`).on('click', event => {
+  event.preventDefault()
+
+  if ($(event.target).parent().hasClass(CLASS_NAME_DROPDOWN_SUBMENU)) {
+    return
   }
 
-  return Dropdown
-})(jQuery)
+  setTimeout(function () {
+    Dropdown._jQueryInterface.call($(this), 'fixPosition')
+  }, 1)
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = Dropdown._jQueryInterface
+$.fn[NAME].Constructor = Dropdown
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return Dropdown._jQueryInterface
+}
 
 export default Dropdown

build/js/ExpandableTable.js

@@ -0,0 +1,116 @@
+/**
+ * --------------------------------------------
+ * AdminLTE ExpandableTable.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+import $ from 'jquery'
+
+/**
+  * Constants
+  * ====================================================
+  */
+
+const NAME = 'ExpandableTable'
+const DATA_KEY = 'lte.expandableTable'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+
+const SELECTOR_TABLE = '.expandable-table'
+const SELECTOR_EXPANDABLE_BODY = '.expandable-body'
+const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
+const SELECTOR_ARIA_ATTR = 'aria-expanded'
+
+/**
+  * Class Definition
+  * ====================================================
+  */
+class ExpandableTable {
+  constructor(element, options) {
+    this._options = options
+    this._element = element
+  }
+
+  // Public
+
+  init() {
+    $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
+      const $type = $($header).attr(SELECTOR_ARIA_ATTR)
+      const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
+      if ($type === 'true') {
+        $body.show()
+      } else if ($type === 'false') {
+        $body.hide()
+        $body.parent().parent().addClass('d-none')
+      }
+    })
+  }
+
+  toggleRow() {
+    const $element = this._element
+    const time = 500
+    const $type = $element.attr(SELECTOR_ARIA_ATTR)
+    const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
+
+    $body.stop()
+    if ($type === 'true') {
+      $body.slideUp(time, () => {
+        $element.next(SELECTOR_EXPANDABLE_BODY).addClass('d-none')
+      })
+      $element.attr(SELECTOR_ARIA_ATTR, 'false')
+      $element.trigger($.Event(EVENT_COLLAPSED))
+    } else if ($type === 'false') {
+      $element.next(SELECTOR_EXPANDABLE_BODY).removeClass('d-none')
+      $body.slideDown(time)
+      $element.attr(SELECTOR_ARIA_ATTR, 'true')
+      $element.trigger($.Event(EVENT_EXPANDED))
+    }
+  }
+
+  // Static
+
+  static _jQueryInterface(operation) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+
+      if (!data) {
+        data = new ExpandableTable($(this))
+        $(this).data(DATA_KEY, data)
+      }
+
+      if (typeof operation === 'string' && /init|toggleRow/.test(operation)) {
+        data[operation]()
+      }
+    })
+  }
+}
+
+/**
+  * Data API
+  * ====================================================
+  */
+$(SELECTOR_TABLE).ready(function () {
+  ExpandableTable._jQueryInterface.call($(this), 'init')
+})
+
+$(document).on('click', SELECTOR_DATA_TOGGLE, function () {
+  ExpandableTable._jQueryInterface.call($(this), 'toggleRow')
+})
+
+/**
+  * jQuery API
+  * ====================================================
+  */
+
+$.fn[NAME] = ExpandableTable._jQueryInterface
+$.fn[NAME].Constructor = ExpandableTable
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return ExpandableTable._jQueryInterface
+}
+
+export default ExpandableTable

build/js/Fullscreen.js

@@ -0,0 +1,117 @@
+/**
+ * --------------------------------------------
+ * AdminLTE Fullscreen.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+import $ from 'jquery'
+
+/**
+ * Constants
+ * ====================================================
+ */
+
+const NAME = 'Fullscreen'
+const DATA_KEY = 'lte.fullscreen'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const SELECTOR_DATA_WIDGET = '[data-widget="fullscreen"]'
+const SELECTOR_ICON = `${SELECTOR_DATA_WIDGET} i`
+
+const Default = {
+  minimizeIcon: 'fa-compress-arrows-alt',
+  maximizeIcon: 'fa-expand-arrows-alt'
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class Fullscreen {
+  constructor(_element, _options) {
+    this.element = _element
+    this.options = $.extend({}, Default, _options)
+  }
+
+  // Public
+
+  toggle() {
+    if (document.fullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.msFullscreenElement) {
+      this.windowed()
+    } else {
+      this.fullscreen()
+    }
+  }
+
+  fullscreen() {
+    if (document.documentElement.requestFullscreen) {
+      document.documentElement.requestFullscreen()
+    } else if (document.documentElement.webkitRequestFullscreen) {
+      document.documentElement.webkitRequestFullscreen()
+    } else if (document.documentElement.msRequestFullscreen) {
+      document.documentElement.msRequestFullscreen()
+    }
+
+    $(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon)
+  }
+
+  windowed() {
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen()
+    } 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)
+
+    if (!data) {
+      data = $(this).data()
+    }
+
+    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 API
+  * ====================================================
+  */
+$(document).on('click', SELECTOR_DATA_WIDGET, function () {
+  Fullscreen._jQueryInterface.call($(this), 'toggle')
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = Fullscreen._jQueryInterface
+$.fn[NAME].Constructor = Fullscreen
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return Fullscreen._jQueryInterface
+}
+
+export default Fullscreen

build/js/IFrame.js

@@ -0,0 +1,413 @@
+/**
+ * --------------------------------------------
+ * AdminLTE IFrame.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+import $ from 'jquery'
+
+/**
+ * Constants
+ * ====================================================
+ */
+
+const NAME = 'IFrame'
+const DATA_KEY = 'lte.iframe'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const SELECTOR_DATA_TOGGLE = '[data-widget="iframe"]'
+const SELECTOR_DATA_TOGGLE_CLOSE = '[data-widget="iframe-close"]'
+const SELECTOR_DATA_TOGGLE_SCROLL_LEFT = '[data-widget="iframe-scrollleft"]'
+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_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_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
+const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
+const SELECTOR_TAB_PANE = `${SELECTOR_TAB_CONTENT} .tab-pane`
+const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item > a.nav-link'
+const SELECTOR_SIDEBAR_SEARCH_ITEM = '.sidebar-search-results .list-group-item'
+const SELECTOR_HEADER_MENU_ITEM = '.main-header .nav-item a.nav-link'
+const SELECTOR_HEADER_DROPDOWN_ITEM = '.main-header a.dropdown-item'
+const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
+const CLASS_NAME_FULLSCREEN_MODE = 'iframe-mode-fullscreen'
+
+const Default = {
+  onTabClick(item) {
+    return item
+  },
+  onTabChanged(item) {
+    return item
+  },
+  onTabCreated(item) {
+    return item
+  },
+  autoIframeMode: true,
+  autoItemActive: true,
+  autoShowNewTab: true,
+  allowDuplicates: false,
+  loadingScreen: true,
+  useNavbarItems: true,
+  scrollOffset: 40,
+  scrollBehaviorSwap: false,
+  iconMaximize: 'fa-expand',
+  iconMinimize: 'fa-compress'
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class IFrame {
+  constructor(element, config) {
+    this._config = config
+    this._element = element
+
+    this._init()
+  }
+
+  // Public
+
+  onTabClick(item) {
+    this._config.onTabClick(item)
+  }
+
+  onTabChanged(item) {
+    this._config.onTabChanged(item)
+  }
+
+  onTabCreated(item) {
+    this._config.onTabCreated(item)
+  }
+
+  createTab(title, link, uniqueName, autoOpen) {
+    let tabId = `panel-${uniqueName}`
+    let navId = `tab-${uniqueName}`
+
+    if (this._config.allowDuplicates) {
+      tabId += `-${Math.floor(Math.random() * 1000)}`
+      navId += `-${Math.floor(Math.random() * 1000)}`
+    }
+
+    const newNavItem = `<li class="nav-item" role="presentation"><a href="#" class="btn-iframe-close" data-widget="iframe-close" data-type="only-this"><i class="fas fa-times"></i></a><a class="nav-link" data-toggle="row" id="${navId}" href="#${tabId}" role="tab" aria-controls="${tabId}" aria-selected="false">${title}</a></li>`
+    $(SELECTOR_TAB_NAVBAR_NAV).append(unescape(escape(newNavItem)))
+
+    const newTabItem = `<div class="tab-pane fade" id="${tabId}" role="tabpanel" aria-labelledby="${navId}"><iframe src="${link}"></iframe></div>`
+    $(SELECTOR_TAB_CONTENT).append(unescape(escape(newTabItem)))
+
+    if (autoOpen) {
+      if (this._config.loadingScreen) {
+        const $loadingScreen = $(SELECTOR_TAB_LOADING)
+        $loadingScreen.fadeIn()
+        $(`${tabId} iframe`).ready(() => {
+          if (typeof this._config.loadingScreen === 'number') {
+            this.switchTab(`#${navId}`)
+            setTimeout(() => {
+              $loadingScreen.fadeOut()
+            }, this._config.loadingScreen)
+          } else {
+            this.switchTab(`#${navId}`)
+            $loadingScreen.fadeOut()
+          }
+        })
+      } else {
+        this.switchTab(`#${navId}`)
+      }
+    }
+
+    this.onTabCreated($(`#${navId}`))
+  }
+
+  openTabSidebar(item, autoOpen = this._config.autoShowNewTab) {
+    let $item = $(item).clone()
+    if ($item.attr('href') === undefined) {
+      $item = $(item).parent('a').clone()
+    }
+
+    $item.find('.right, .search-path').remove()
+    let title = $item.find('p').text()
+    if (title === '') {
+      title = $item.text()
+    }
+
+    const link = $item.attr('href')
+    if (link === '#' || link === '' || link === undefined) {
+      return
+    }
+
+    const uniqueName = link.replace('./', '').replace(/["&'./:=?[\]]/gi, '-').replace(/(--)/gi, '')
+    const navId = `tab-${uniqueName}`
+
+    if (!this._config.allowDuplicates && $(`#${navId}`).length > 0) {
+      return this.switchTab(`#${navId}`)
+    }
+
+    if ((!this._config.allowDuplicates && $(`#${navId}`).length === 0) || this._config.allowDuplicates) {
+      this.createTab(title, link, uniqueName, autoOpen)
+    }
+  }
+
+  switchTab(item) {
+    const $item = $(item)
+    const tabId = $item.attr('href')
+
+    $(SELECTOR_TAB_EMPTY).hide()
+    $(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
+    this._fixHeight()
+
+    $item.tab('show')
+    $item.parents('li').addClass('active')
+    this.onTabChanged($item)
+
+    if (this._config.autoItemActive) {
+      this._setItemActive($(`${tabId} iframe`).attr('src'))
+    }
+  }
+
+  removeActiveTab(type, element) {
+    if (type == 'all') {
+      $(SELECTOR_TAB_NAVBAR_NAV_ITEM).remove()
+      $(SELECTOR_TAB_PANE).remove()
+      $(SELECTOR_TAB_EMPTY).show()
+    } else if (type == 'all-other') {
+      $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}:not(.active)`).remove()
+      $(`${SELECTOR_TAB_PANE}:not(.active)`).remove()
+    } else if (type == 'only-this') {
+      const $navClose = $(element)
+      const $navItem = $navClose.parent('.nav-item')
+      const $navItemParent = $navItem.parent()
+      const navItemIndex = $navItem.index()
+      const tabId = $navClose.siblings('.nav-link').attr('aria-controls')
+      $navItem.remove()
+      $(`#${tabId}`).remove()
+      if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
+        $(SELECTOR_TAB_EMPTY).show()
+      } else {
+        const prevNavItemIndex = navItemIndex - 1
+        this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a.nav-link'))
+      }
+    } else {
+      const $navItem = $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`)
+      const $navItemParent = $navItem.parent()
+      const navItemIndex = $navItem.index()
+      $navItem.remove()
+      $(`${SELECTOR_TAB_PANE}.active`).remove()
+      if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
+        $(SELECTOR_TAB_EMPTY).show()
+      } else {
+        const prevNavItemIndex = navItemIndex - 1
+        this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a.nav-link'))
+      }
+    }
+  }
+
+  toggleFullscreen() {
+    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')
+    } else {
+      $(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
+      $('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
+    }
+
+    $(window).trigger('resize')
+    this._fixHeight(true)
+  }
+
+  // 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'))
+      }
+
+      this._setupListeners()
+      this._fixHeight(true)
+    }
+  }
+
+  _navScroll(offset) {
+    const leftPos = $(SELECTOR_TAB_NAVBAR_NAV).scrollLeft()
+    $(SELECTOR_TAB_NAVBAR_NAV).animate({ scrollLeft: (leftPos + offset) }, 250, 'linear')
+  }
+
+  _setupListeners() {
+    $(window).on('resize', () => {
+      setTimeout(() => {
+        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 => {
+        e.preventDefault()
+        this.openTabSidebar(e.target)
+      })
+    }
+
+    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
+      e.preventDefault()
+      this.onTabClick(e.target)
+      this.switchTab(e.target)
+    })
+    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
+      e.preventDefault()
+      this.onTabClick(e.target)
+      this.switchTab(e.target)
+    })
+    $(document).on('click', SELECTOR_DATA_TOGGLE_CLOSE, e => {
+      e.preventDefault()
+      let { target } = e
+
+      if (target.nodeName == 'I') {
+        target = e.target.offsetParent
+      }
+
+      this.removeActiveTab(target.attributes['data-type'] ? target.attributes['data-type'].nodeValue : null, target)
+    })
+    $(document).on('click', SELECTOR_DATA_TOGGLE_FULLSCREEN, e => {
+      e.preventDefault()
+      this.toggleFullscreen()
+    })
+    let mousedown = false
+    let mousedownInterval = null
+    $(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_LEFT, e => {
+      e.preventDefault()
+      clearInterval(mousedownInterval)
+
+      let { scrollOffset } = this._config
+
+      if (!this._config.scrollBehaviorSwap) {
+        scrollOffset = -scrollOffset
+      }
+
+      mousedown = true
+      this._navScroll(scrollOffset)
+
+      mousedownInterval = setInterval(() => {
+        this._navScroll(scrollOffset)
+      }, 250)
+    })
+    $(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_RIGHT, e => {
+      e.preventDefault()
+      clearInterval(mousedownInterval)
+
+      let { scrollOffset } = this._config
+
+      if (this._config.scrollBehaviorSwap) {
+        scrollOffset = -scrollOffset
+      }
+
+      mousedown = true
+      this._navScroll(scrollOffset)
+
+      mousedownInterval = setInterval(() => {
+        this._navScroll(scrollOffset)
+      }, 250)
+    })
+    $(document).on('mouseup', () => {
+      if (mousedown) {
+        mousedown = false
+        clearInterval(mousedownInterval)
+        mousedownInterval = null
+      }
+    })
+  }
+
+  _setItemActive(href) {
+    $(`${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`).removeClass('active')
+    $(SELECTOR_HEADER_MENU_ITEM).parent().removeClass('active')
+
+    const $headerMenuItem = $(`${SELECTOR_HEADER_MENU_ITEM}[href$="${href}"]`)
+    const $headerDropdownItem = $(`${SELECTOR_HEADER_DROPDOWN_ITEM}[href$="${href}"]`)
+    const $sidebarMenuItem = $(`${SELECTOR_SIDEBAR_MENU_ITEM}[href$="${href}"]`)
+
+    $headerMenuItem.each((i, e) => {
+      $(e).parent().addClass('active')
+    })
+    $headerDropdownItem.each((i, e) => {
+      $(e).addClass('active')
+    })
+    $sidebarMenuItem.each((i, e) => {
+      $(e).addClass('active')
+      $(e).parents('.nav-treeview').prevAll('.nav-link').addClass('active')
+    })
+  }
+
+  _fixHeight(tabEmpty = false) {
+    if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
+      const windowHeight = $(window).height()
+      const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
+      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}, ${SELECTOR_CONTENT_IFRAME}`).height(windowHeight - navbarHeight)
+      $(SELECTOR_CONTENT_WRAPPER).height(windowHeight)
+    } else {
+      const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('height'))
+      const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
+      if (tabEmpty == true) {
+        setTimeout(() => {
+          $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(contentWrapperHeight - navbarHeight)
+        }, 50)
+      } else {
+        $(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight - navbarHeight)
+      }
+    }
+  }
+
+  // Static
+
+  static _jQueryInterface(operation, ...args) {
+    let data = $(this).data(DATA_KEY)
+    const _options = $.extend({}, Default, $(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)
+    }
+  }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+
+$(window).on('load', () => {
+  IFrame._jQueryInterface.call($(SELECTOR_DATA_TOGGLE))
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = IFrame._jQueryInterface
+$.fn[NAME].Constructor = IFrame
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return IFrame._jQueryInterface
+}
+
+export default IFrame

build/js/Layout.js

@@ -5,181 +5,253 @@
  * --------------------------------------------
  */
 
-const Layout = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'Layout'
-  const DATA_KEY           = 'lte.layout'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    SIDEBAR: 'sidebar'
+const NAME = 'Layout'
+const DATA_KEY = 'lte.layout'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const SELECTOR_HEADER = '.main-header'
+const SELECTOR_MAIN_SIDEBAR = '.main-sidebar'
+const SELECTOR_SIDEBAR = '.main-sidebar .sidebar'
+const SELECTOR_CONTENT = '.content-wrapper'
+const SELECTOR_CONTROL_SIDEBAR_CONTENT = '.control-sidebar-content'
+const SELECTOR_CONTROL_SIDEBAR_BTN = '[data-widget="control-sidebar"]'
+const SELECTOR_FOOTER = '.main-footer'
+const SELECTOR_PUSHMENU_BTN = '[data-widget="pushmenu"]'
+const SELECTOR_LOGIN_BOX = '.login-box'
+const SELECTOR_REGISTER_BOX = '.register-box'
+const SELECTOR_PRELOADER = '.preloader'
+
+const CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse'
+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 Default = {
+  scrollbarTheme: 'os-theme-light',
+  scrollbarAutoHide: 'l',
+  panelAutoHeight: true,
+  panelAutoHeightMode: 'min-height',
+  preloadDuration: 200,
+  loginRegisterAutoHeight: true
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class Layout {
+  constructor(element, config) {
+    this._config = config
+    this._element = element
   }
 
-  const Selector = {
-    HEADER         : '.main-header',
-    MAIN_SIDEBAR   : '.main-sidebar',
-    SIDEBAR        : '.main-sidebar .sidebar',
-    CONTENT        : '.content-wrapper',
-    BRAND          : '.brand-link',
-    CONTENT_HEADER : '.content-header',
-    WRAPPER        : '.wrapper',
-    CONTROL_SIDEBAR: '.control-sidebar',
-    LAYOUT_FIXED   : '.layout-fixed',
-    FOOTER         : '.main-footer',
-    LOGIN_BOX      : '.login-box',
-    REGISTER_BOX   : '.register-box'
-  }
+  // Public
 
-  const ClassName = {
-    HOLD           : 'hold-transition',
-    SIDEBAR        : 'main-sidebar',
-    CONTENT_FIXED  : 'content-fixed',
-    SIDEBAR_FOCUSED: 'sidebar-focused',
-    LAYOUT_FIXED   : 'layout-fixed',
-    NAVBAR_FIXED   : 'layout-navbar-fixed',
-    FOOTER_FIXED   : 'layout-footer-fixed',
-    LOGIN_PAGE     : 'login-page',
-    REGISTER_PAGE  : 'register-page',
-  }
+  fixLayoutHeight(extra = null) {
+    const $body = $('body')
+    let controlSidebar = 0
 
-  const Default = {
-    scrollbarTheme : 'os-theme-light',
-    scrollbarAutoHide: 'l'
-  }
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-
-  class Layout {
-    constructor(element, config) {
-      this._config  = config
-      this._element = element
-
-      this._init()
+    if ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN) || $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) || extra === 'control_sidebar') {
+      controlSidebar = $(SELECTOR_CONTROL_SIDEBAR_CONTENT).outerHeight()
     }
 
-    // Public
+    const heights = {
+      window: $(window).height(),
+      header: $(SELECTOR_HEADER).length > 0 ? $(SELECTOR_HEADER).outerHeight() : 0,
+      footer: $(SELECTOR_FOOTER).length > 0 ? $(SELECTOR_FOOTER).outerHeight() : 0,
+      sidebar: $(SELECTOR_SIDEBAR).length > 0 ? $(SELECTOR_SIDEBAR).height() : 0,
+      controlSidebar
+    }
 
-    fixLayoutHeight() {
-      const heights = {
-        window: $(window).height(),
-        header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0,
-        footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0,
-        sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0,
+    const max = this._max(heights)
+    let offset = this._config.panelAutoHeight
+
+    if (offset === true) {
+      offset = 0
+    }
+
+    const $contentSelector = $(SELECTOR_CONTENT)
+
+    if (offset !== false) {
+      if (max === heights.controlSidebar) {
+        $contentSelector.css(this._config.panelAutoHeightMode, (max + offset))
+      } else if (max === heights.window) {
+        $contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header - heights.footer)
+      } else {
+        $contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header)
       }
 
-      const max = this._max(heights)
+      if (this._isFooterFixed()) {
+        $contentSelector.css(this._config.panelAutoHeightMode, parseFloat($contentSelector.css(this._config.panelAutoHeightMode)) + heights.footer)
+      }
+    }
 
-      $(Selector.CONTENT).css('min-height', max - heights.footer)
-      
-      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
-        if (typeof $.fn.overlayScrollbars !== 'undefined') {
-          $(Selector.SIDEBAR).overlayScrollbars({
-            className       : this._config.scrollbarTheme,
-            sizeAutoCapable : true,
-            scrollbars : {
-              autoHide: this._config.scrollbarAutoHide, 
-              clickScrolling : true
-            }
-          })
+    if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
+      return
+    }
+
+    if (typeof $.fn.overlayScrollbars !== 'undefined') {
+      $(SELECTOR_SIDEBAR).overlayScrollbars({
+        className: this._config.scrollbarTheme,
+        sizeAutoCapable: true,
+        scrollbars: {
+          autoHide: this._config.scrollbarAutoHide,
+          clickScrolling: true
         }
+      })
+    } else {
+      $(SELECTOR_SIDEBAR).css('overflow-y', 'auto')
+    }
+  }
+
+  fixLoginRegisterHeight() {
+    const $body = $('body')
+    const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
+
+    if ($selector.length === 0) {
+      $body.css('height', 'auto')
+      $('html').css('height', 'auto')
+    } else {
+      const boxHeight = $selector.height()
+
+      if ($body.css(this._config.panelAutoHeightMode) !== boxHeight) {
+        $body.css(this._config.panelAutoHeightMode, boxHeight)
       }
     }
+  }
 
-    // Private
+  // Private
 
-    _init() {
-      // Activate layout height watcher
-      this.fixLayoutHeight()
-      $(Selector.SIDEBAR)
-        .on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
-          this.fixLayoutHeight()
-        })
+  _init() {
+    // Activate layout height watcher
+    this.fixLayoutHeight()
 
-      $(window).resize(() => {
+    if (this._config.loginRegisterAutoHeight === true) {
+      this.fixLoginRegisterHeight()
+    } else if (this._config.loginRegisterAutoHeight === parseInt(this._config.loginRegisterAutoHeight, 10)) {
+      setInterval(this.fixLoginRegisterHeight, this._config.loginRegisterAutoHeight)
+    }
+
+    $(SELECTOR_SIDEBAR)
+      .on('collapsed.lte.treeview expanded.lte.treeview', () => {
         this.fixLayoutHeight()
       })
 
-      if (!$('body').hasClass(ClassName.LOGIN_PAGE) && !$('body').hasClass(ClassName.REGISTER_PAGE)) {
-        $('body, html').css('height', 'auto')
-      } else if ($('body').hasClass(ClassName.LOGIN_PAGE) || $('body').hasClass(ClassName.REGISTER_PAGE)) {
-        let box_height = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height()
+    $(SELECTOR_MAIN_SIDEBAR)
+      .on('mouseenter mouseleave', () => {
+        if ($('body').hasClass(CLASS_NAME_SIDEBAR_COLLAPSED)) {
+          this.fixLayoutHeight()
+        }
+      })
 
-        $('body').css('min-height', box_height);
+    $(SELECTOR_PUSHMENU_BTN)
+      .on('collapsed.lte.pushmenu shown.lte.pushmenu', () => {
+        setTimeout(() => {
+          this.fixLayoutHeight()
+        }, 300)
+      })
+
+    $(SELECTOR_CONTROL_SIDEBAR_BTN)
+      .on('collapsed.lte.controlsidebar', () => {
+        this.fixLayoutHeight()
+      })
+      .on('expanded.lte.controlsidebar', () => {
+        this.fixLayoutHeight('control_sidebar')
+      })
+
+    $(window).resize(() => {
+      this.fixLayoutHeight()
+    })
+
+    setTimeout(() => {
+      $('body.hold-transition').removeClass('hold-transition')
+    }, 50)
+
+    setTimeout(() => {
+      const $preloader = $(SELECTOR_PRELOADER)
+      if ($preloader) {
+        $preloader.css('height', 0)
+        setTimeout(() => {
+          $preloader.children().hide()
+        }, 200)
+      }
+    }, this._config.preloadDuration)
+  }
+
+  _max(numbers) {
+    // Calculate the maximum number in a list
+    let max = 0
+
+    Object.keys(numbers).forEach(key => {
+      if (numbers[key] > max) {
+        max = numbers[key]
+      }
+    })
+
+    return max
+  }
+
+  _isFooterFixed() {
+    return $(SELECTOR_FOOTER).css('position') === 'fixed'
+  }
+
+  // Static
+
+  static _jQueryInterface(config = '') {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _options = $.extend({}, Default, $(this).data())
+
+      if (!data) {
+        data = new Layout($(this), _options)
+        $(this).data(DATA_KEY, data)
       }
 
-      $('body.hold-transition').removeClass('hold-transition')
-    }
-
-    _max(numbers) {
-      // Calculate the maximum number in a list
-      let max = 0
-
-      Object.keys(numbers).forEach((key) => {
-        if (numbers[key] > max) {
-          max = numbers[key]
-        }
-      })
-
-      return max
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data      = $(this).data(DATA_KEY)
-        const _config = $.extend({}, Default, $(this).data())
-
-        if (!data) {
-          data = new Layout($(this), _config)
-          $(this).data(DATA_KEY, data)
-        }
-
-        if (config === 'init') {
-          data[config]()
-        }
-      })
-    }
+      if (config === 'init' || config === '') {
+        data._init()
+      } else if (config === 'fixLayoutHeight' || config === 'fixLoginRegisterHeight') {
+        data[config]()
+      }
+    })
   }
+}
 
-  /**
-   * Data API
-   * ====================================================
-   */
+/**
+ * Data API
+ * ====================================================
+ */
 
-  $(window).on('load', () => {
-    Layout._jQueryInterface.call($('body'))
+$(window).on('load', () => {
+  Layout._jQueryInterface.call($('body'))
+})
+
+$(`${SELECTOR_SIDEBAR} a`)
+  .on('focusin', () => {
+    $(SELECTOR_MAIN_SIDEBAR).addClass(CLASS_NAME_SIDEBAR_FOCUSED)
+  })
+  .on('focusout', () => {
+    $(SELECTOR_MAIN_SIDEBAR).removeClass(CLASS_NAME_SIDEBAR_FOCUSED)
   })
 
-  $(Selector.SIDEBAR + ' a').on('focusin', () => {
-    $(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
-  })
+/**
+ * jQuery API
+ * ====================================================
+ */
 
-  $(Selector.SIDEBAR + ' a').on('focusout', () => {
-    $(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = Layout._jQueryInterface
-  $.fn[NAME].Constructor = Layout
-  $.fn[NAME].noConflict = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Layout._jQueryInterface
-  }
-
-  return Layout
-})(jQuery)
+$.fn[NAME] = Layout._jQueryInterface
+$.fn[NAME].Constructor = Layout
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return Layout._jQueryInterface
+}
 
 export default Layout

build/js/NavbarSearch.js

@@ -0,0 +1,113 @@
+/**
+ * --------------------------------------------
+ * AdminLTE NavbarSearch.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+import $ from 'jquery'
+
+/**
+ * Constants
+ * ====================================================
+ */
+
+const NAME = 'NavbarSearch'
+const DATA_KEY = 'lte.navbar-search'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]'
+const SELECTOR_SEARCH_BLOCK = '.navbar-search-block'
+const SELECTOR_SEARCH_INPUT = '.form-control'
+
+const CLASS_NAME_OPEN = 'navbar-search-open'
+
+const Default = {
+  resetOnClose: true,
+  target: SELECTOR_SEARCH_BLOCK
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class NavbarSearch {
+  constructor(_element, _options) {
+    this._element = _element
+    this._config = $.extend({}, Default, _options)
+  }
+
+  // Public
+
+  open() {
+    $(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
+    $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
+  }
+
+  close() {
+    $(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)
+
+    if (this._config.resetOnClose) {
+      $(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
+    }
+  }
+
+  toggle() {
+    if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  // Static
+
+  static _jQueryInterface(options) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _options = $.extend({}, Default, $(this).data())
+
+      if (!data) {
+        data = new NavbarSearch(this, _options)
+        $(this).data(DATA_KEY, data)
+      }
+
+      if (!/toggle|close|open/.test(options)) {
+        throw new Error(`Undefined method ${options}`)
+      }
+
+      data[options]()
+    })
+  }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+$(document).on('click', SELECTOR_TOGGLE_BUTTON, event => {
+  event.preventDefault()
+
+  let button = $(event.currentTarget)
+
+  if (button.data('widget') !== 'navbar-search') {
+    button = button.closest(SELECTOR_TOGGLE_BUTTON)
+  }
+
+  NavbarSearch._jQueryInterface.call(button, 'toggle')
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = NavbarSearch._jQueryInterface
+$.fn[NAME].Constructor = NavbarSearch
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return NavbarSearch._jQueryInterface
+}
+
+export default NavbarSearch

build/js/PushMenu.js

@@ -5,212 +5,219 @@
  * --------------------------------------------
  */
 
-const PushMenu = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'PushMenu'
-  const DATA_KEY           = 'lte.pushmenu'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    COLLAPSED: `collapsed${EVENT_KEY}`,
-    SHOWN: `shown${EVENT_KEY}`
-  }
+const NAME = 'PushMenu'
+const DATA_KEY = 'lte.pushmenu'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
 
-  const Default = {
-    autoCollapseSize: false,
-    enableRemember: false,
-    noTransitionAfterReload: true
-  }
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
 
-  const Selector = {
-    TOGGLE_BUTTON: '[data-widget="pushmenu"]',
-    SIDEBAR_MINI: '.sidebar-mini',
-    SIDEBAR_COLLAPSED: '.sidebar-collapse',
-    BODY: 'body',
-    OVERLAY: '#sidebar-overlay',
-    WRAPPER: '.wrapper'
-  }
+const SELECTOR_TOGGLE_BUTTON = '[data-widget="pushmenu"]'
+const SELECTOR_BODY = 'body'
+const SELECTOR_OVERLAY = '#sidebar-overlay'
+const SELECTOR_WRAPPER = '.wrapper'
 
-  const ClassName = {
-    SIDEBAR_OPEN: 'sidebar-open',
-    COLLAPSED: 'sidebar-collapse',
-    OPEN: 'sidebar-open'
-  }
+const CLASS_NAME_COLLAPSED = 'sidebar-collapse'
+const CLASS_NAME_OPEN = 'sidebar-open'
+const CLASS_NAME_IS_OPENING = 'sidebar-is-opening'
+const CLASS_NAME_CLOSED = 'sidebar-closed'
 
-  /**
-   * Class Definition
-   * ====================================================
-   */
+const Default = {
+  autoCollapseSize: 992,
+  enableRemember: false,
+  noTransitionAfterReload: true
+}
 
-  class PushMenu {
-    constructor(element, options) {
-      this._element = element
-      this._options = $.extend({}, Default, options)
+/**
+ * Class Definition
+ * ====================================================
+ */
 
+class PushMenu {
+  constructor(element, options) {
+    this._element = element
+    this._options = $.extend({}, Default, options)
 
-      if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED) && !$(Selector.BODY).hasClass(ClassName.OPEN)) {
-        $(Selector.BODY).addClass(ClassName.OPEN)
-      }
-
-      if (!$(Selector.OVERLAY).length) {
-        this._addOverlay()
-      }
-
-      this._init()
+    if ($(SELECTOR_OVERLAY).length === 0) {
+      this._addOverlay()
     }
 
-    // Public
+    this._init()
+  }
 
-    show() {
-      $(Selector.BODY).addClass(ClassName.OPEN).removeClass(ClassName.COLLAPSED)
+  // Public
 
-      if(this._options.enableRemember) {
-          localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN)
-      }
+  expand() {
+    const $bodySelector = $(SELECTOR_BODY)
 
-      const shownEvent = $.Event(Event.SHOWN)
-      $(this._element).trigger(shownEvent)
+    if (this._options.autoCollapseSize && $(window).width() <= this._options.autoCollapseSize) {
+      $bodySelector.addClass(CLASS_NAME_OPEN)
     }
 
-    collapse() {
-      $(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.COLLAPSED)
+    $bodySelector.addClass(CLASS_NAME_IS_OPENING).removeClass(`${CLASS_NAME_COLLAPSED} ${CLASS_NAME_CLOSED}`).delay(50).queue(function () {
+      $bodySelector.removeClass(CLASS_NAME_IS_OPENING)
+      $(this).dequeue()
+    })
 
-      if(this._options.enableRemember) {
-          localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED)
-      }
-
-      const collapsedEvent = $.Event(Event.COLLAPSED)
-      $(this._element).trigger(collapsedEvent)
+    if (this._options.enableRemember) {
+      localStorage.setItem(`remember${EVENT_KEY}`, CLASS_NAME_OPEN)
     }
 
-    toggle() {
-      if ($(Selector.BODY).hasClass(ClassName.OPEN)) {
+    $(this._element).trigger($.Event(EVENT_SHOWN))
+  }
+
+  collapse() {
+    const $bodySelector = $(SELECTOR_BODY)
+
+    if (this._options.autoCollapseSize && $(window).width() <= this._options.autoCollapseSize) {
+      $bodySelector.removeClass(CLASS_NAME_OPEN).addClass(CLASS_NAME_CLOSED)
+    }
+
+    $bodySelector.addClass(CLASS_NAME_COLLAPSED)
+
+    if (this._options.enableRemember) {
+      localStorage.setItem(`remember${EVENT_KEY}`, CLASS_NAME_COLLAPSED)
+    }
+
+    $(this._element).trigger($.Event(EVENT_COLLAPSED))
+  }
+
+  toggle() {
+    if ($(SELECTOR_BODY).hasClass(CLASS_NAME_COLLAPSED)) {
+      this.expand()
+    } else {
+      this.collapse()
+    }
+  }
+
+  autoCollapse(resize = false) {
+    if (!this._options.autoCollapseSize) {
+      return
+    }
+
+    const $bodySelector = $(SELECTOR_BODY)
+
+    if ($(window).width() <= this._options.autoCollapseSize) {
+      if (!$bodySelector.hasClass(CLASS_NAME_OPEN)) {
         this.collapse()
+      }
+    } else if (resize === true) {
+      if ($bodySelector.hasClass(CLASS_NAME_OPEN)) {
+        $bodySelector.removeClass(CLASS_NAME_OPEN)
+      } else if ($bodySelector.hasClass(CLASS_NAME_CLOSED)) {
+        this.expand()
+      }
+    }
+  }
+
+  remember() {
+    if (!this._options.enableRemember) {
+      return
+    }
+
+    const $body = $('body')
+    const toggleState = localStorage.getItem(`remember${EVENT_KEY}`)
+
+    if (toggleState === CLASS_NAME_COLLAPSED) {
+      if (this._options.noTransitionAfterReload) {
+        $body.addClass('hold-transition').addClass(CLASS_NAME_COLLAPSED).delay(50).queue(function () {
+          $(this).removeClass('hold-transition')
+          $(this).dequeue()
+        })
       } else {
-        this.show()
+        $body.addClass(CLASS_NAME_COLLAPSED)
       }
-    }
-
-    autoCollapse() {
-      if (this._options.autoCollapseSize) {
-        if ($(window).width() <= this._options.autoCollapseSize) {
-          if ($(Selector.BODY).hasClass(ClassName.OPEN)) {
-            this.toggle()
-          }
-        } else {
-          if (!$(Selector.BODY).hasClass(ClassName.OPEN)) {
-            this.toggle()
-          }
-        }
-      }
-    }
-
-    remember() {
-      if(this._options.enableRemember) {
-        let toggleState = localStorage.getItem(`remember${EVENT_KEY}`)
-        if (toggleState == ClassName.COLLAPSED){
-          if (this._options.noTransitionAfterReload) {
-              $("body").addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function() {
-                $(this).removeClass('hold-transition')
-                $(this).dequeue()
-              })
-          } else {
-            $("body").addClass(ClassName.COLLAPSED)
-          }
-        } else {
-          if (this._options.noTransitionAfterReload) {
-            $("body").addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function() {
-              $(this).removeClass('hold-transition')
-              $(this).dequeue()
-            })
-          } else {
-            $("body").removeClass(ClassName.COLLAPSED)
-          }
-        }
-      }
-    }
-
-    // Private
-
-    _init() {
-      this.remember()
-      this.autoCollapse()
-
-      $(window).resize(() => {
-        this.autoCollapse()
-      })
-    }
-
-    _addOverlay() {
-      const overlay = $('<div />', {
-        id: 'sidebar-overlay'
-      })
-
-      overlay.on('click', () => {
-        this.collapse()
-      })
-
-      $(Selector.WRAPPER).append(overlay)
-    }
-
-    // Static
-
-    static _jQueryInterface(operation) {
-      return this.each(function () {
-        let data = $(this).data(DATA_KEY)
-        const _options = $.extend({}, Default, $(this).data())
-
-        if (!data) {
-          data = new PushMenu(this, _options)
-          $(this).data(DATA_KEY, data)
-        }
-
-        if (operation === 'toggle') {
-          data[operation]()
-        }
+    } else if (this._options.noTransitionAfterReload) {
+      $body.addClass('hold-transition').removeClass(CLASS_NAME_COLLAPSED).delay(50).queue(function () {
+        $(this).removeClass('hold-transition')
+        $(this).dequeue()
       })
+    } else {
+      $body.removeClass(CLASS_NAME_COLLAPSED)
     }
   }
 
-  /**
-   * Data API
-   * ====================================================
-   */
+  // Private
 
-  $(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
-    event.preventDefault()
+  _init() {
+    this.remember()
+    this.autoCollapse()
 
-    let button = event.currentTarget
-
-    if ($(button).data('widget') !== 'pushmenu') {
-      button = $(button).closest(Selector.TOGGLE_BUTTON)
-    }
-
-    PushMenu._jQueryInterface.call($(button), 'toggle')
-  })
-
-  $(window).on('load', () => {
-    PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON))
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = PushMenu._jQueryInterface
-  $.fn[NAME].Constructor = PushMenu
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return PushMenu._jQueryInterface
+    $(window).resize(() => {
+      this.autoCollapse(true)
+    })
   }
 
-  return PushMenu
-})(jQuery)
+  _addOverlay() {
+    const overlay = $('<div />', {
+      id: 'sidebar-overlay'
+    })
+
+    overlay.on('click', () => {
+      this.collapse()
+    })
+
+    $(SELECTOR_WRAPPER).append(overlay)
+  }
+
+  // Static
+
+  static _jQueryInterface(operation) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _options = $.extend({}, Default, $(this).data())
+
+      if (!data) {
+        data = new PushMenu(this, _options)
+        $(this).data(DATA_KEY, data)
+      }
+
+      if (typeof operation === 'string' && /collapse|expand|toggle/.test(operation)) {
+        data[operation]()
+      }
+    })
+  }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+
+$(document).on('click', SELECTOR_TOGGLE_BUTTON, event => {
+  event.preventDefault()
+
+  let button = event.currentTarget
+
+  if ($(button).data('widget') !== 'pushmenu') {
+    button = $(button).closest(SELECTOR_TOGGLE_BUTTON)
+  }
+
+  PushMenu._jQueryInterface.call($(button), 'toggle')
+})
+
+$(window).on('load', () => {
+  PushMenu._jQueryInterface.call($(SELECTOR_TOGGLE_BUTTON))
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = PushMenu._jQueryInterface
+$.fn[NAME].Constructor = PushMenu
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return PushMenu._jQueryInterface
+}
 
 export default PushMenu

build/js/SidebarSearch.js

@@ -0,0 +1,298 @@
+/**
+ * --------------------------------------------
+ * AdminLTE SidebarSearch.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+import $, { trim } from 'jquery'
+
+/**
+ * Constants
+ * ====================================================
+ */
+
+const NAME = 'SidebarSearch'
+const DATA_KEY = 'lte.sidebar-search'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const CLASS_NAME_OPEN = 'sidebar-search-open'
+const CLASS_NAME_ICON_SEARCH = 'fa-search'
+const CLASS_NAME_ICON_CLOSE = 'fa-times'
+const CLASS_NAME_HEADER = 'nav-header'
+const CLASS_NAME_SEARCH_RESULTS = 'sidebar-search-results'
+const CLASS_NAME_LIST_GROUP = 'list-group'
+
+const SELECTOR_DATA_WIDGET = '[data-widget="sidebar-search"]'
+const SELECTOR_SIDEBAR = '.main-sidebar .nav-sidebar'
+const SELECTOR_NAV_LINK = '.nav-link'
+const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
+const SELECTOR_SEARCH_INPUT = `${SELECTOR_DATA_WIDGET} .form-control`
+const SELECTOR_SEARCH_BUTTON = `${SELECTOR_DATA_WIDGET} .btn`
+const SELECTOR_SEARCH_ICON = `${SELECTOR_SEARCH_BUTTON} i`
+const SELECTOR_SEARCH_LIST_GROUP = `.${CLASS_NAME_LIST_GROUP}`
+const SELECTOR_SEARCH_RESULTS = `.${CLASS_NAME_SEARCH_RESULTS}`
+const SELECTOR_SEARCH_RESULTS_GROUP = `${SELECTOR_SEARCH_RESULTS} .${CLASS_NAME_LIST_GROUP}`
+
+const Default = {
+  arrowSign: '->',
+  minLength: 3,
+  maxResults: 7,
+  highlightName: true,
+  highlightPath: false,
+  highlightClass: 'text-light',
+  notFoundText: 'No element found!'
+}
+
+const SearchItems = []
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class SidebarSearch {
+  constructor(_element, _options) {
+    this.element = _element
+    this.options = $.extend({}, Default, _options)
+    this.items = []
+  }
+
+  // Public
+
+  init() {
+    if ($(SELECTOR_DATA_WIDGET).length === 0) {
+      return
+    }
+
+    if ($(SELECTOR_DATA_WIDGET).next(SELECTOR_SEARCH_RESULTS).length === 0) {
+      $(SELECTOR_DATA_WIDGET).after(
+        $('<div />', { class: CLASS_NAME_SEARCH_RESULTS })
+      )
+    }
+
+    if ($(SELECTOR_SEARCH_RESULTS).children(SELECTOR_SEARCH_LIST_GROUP).length === 0) {
+      $(SELECTOR_SEARCH_RESULTS).append(
+        $('<div />', { class: CLASS_NAME_LIST_GROUP })
+      )
+    }
+
+    this._addNotFound()
+
+    $(SELECTOR_SIDEBAR).children().each((i, child) => {
+      this._parseItem(child)
+    })
+  }
+
+  search() {
+    const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase()
+    if (searchValue.length < this.options.minLength) {
+      $(SELECTOR_SEARCH_RESULTS_GROUP).empty()
+      this._addNotFound()
+      this.close()
+      return
+    }
+
+    const searchResults = SearchItems.filter(item => (item.name).toLowerCase().includes(searchValue))
+    const endResults = $(searchResults.slice(0, this.options.maxResults))
+    $(SELECTOR_SEARCH_RESULTS_GROUP).empty()
+
+    if (endResults.length === 0) {
+      this._addNotFound()
+    } else {
+      endResults.each((i, result) => {
+        $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), escape(result.link), result.path))
+      })
+    }
+
+    this.open()
+  }
+
+  open() {
+    $(SELECTOR_DATA_WIDGET).parent().addClass(CLASS_NAME_OPEN)
+    $(SELECTOR_SEARCH_ICON).removeClass(CLASS_NAME_ICON_SEARCH).addClass(CLASS_NAME_ICON_CLOSE)
+  }
+
+  close() {
+    $(SELECTOR_DATA_WIDGET).parent().removeClass(CLASS_NAME_OPEN)
+    $(SELECTOR_SEARCH_ICON).removeClass(CLASS_NAME_ICON_CLOSE).addClass(CLASS_NAME_ICON_SEARCH)
+  }
+
+  toggle() {
+    if ($(SELECTOR_DATA_WIDGET).parent().hasClass(CLASS_NAME_OPEN)) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  // Private
+
+  _parseItem(item, path = []) {
+    if ($(item).hasClass(CLASS_NAME_HEADER)) {
+      return
+    }
+
+    const itemObject = {}
+    const navLink = $(item).clone().find(`> ${SELECTOR_NAV_LINK}`)
+    const navTreeview = $(item).clone().find(`> ${SELECTOR_NAV_TREEVIEW}`)
+
+    const link = navLink.attr('href')
+    const name = navLink.find('p').children().remove().end().text()
+
+    itemObject.name = this._trimText(name)
+    itemObject.link = link
+    itemObject.path = path
+
+    if (navTreeview.length === 0) {
+      SearchItems.push(itemObject)
+    } else {
+      const newPath = itemObject.path.concat([itemObject.name])
+      navTreeview.children().each((i, child) => {
+        this._parseItem(child, newPath)
+      })
+    }
+  }
+
+  _trimText(text) {
+    return trim(text.replace(/(\r\n|\n|\r)/gm, ' '))
+  }
+
+  _renderItem(name, link, path) {
+    path = path.join(` ${this.options.arrowSign} `)
+    name = unescape(name)
+
+    if (this.options.highlightName || this.options.highlightPath) {
+      const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase()
+      const regExp = new RegExp(searchValue, 'gi')
+
+      if (this.options.highlightName) {
+        name = name.replace(
+          regExp,
+          str => {
+            return `<strong class="${this.options.highlightClass}">${str}</strong>`
+          }
+        )
+      }
+
+      if (this.options.highlightPath) {
+        path = path.replace(
+          regExp,
+          str => {
+            return `<strong class="${this.options.highlightClass}">${str}</strong>`
+          }
+        )
+      }
+    }
+
+    const groupItemElement = $('<a/>', {
+      href: link,
+      class: 'list-group-item'
+    })
+    const searchTitleElement = $('<div/>', {
+      class: 'search-title'
+    }).html(name)
+    const searchPathElement = $('<div/>', {
+      class: 'search-path'
+    }).html(path)
+
+    groupItemElement.append(searchTitleElement).append(searchPathElement)
+
+    return groupItemElement
+  }
+
+  _addNotFound() {
+    $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(this.options.notFoundText, '#', []))
+  }
+
+  // Static
+
+  static _jQueryInterface(config) {
+    let data = $(this).data(DATA_KEY)
+
+    if (!data) {
+      data = $(this).data()
+    }
+
+    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 API
+ * ====================================================
+ */
+$(document).on('click', SELECTOR_SEARCH_BUTTON, event => {
+  event.preventDefault()
+
+  SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggle')
+})
+
+$(document).on('keyup', SELECTOR_SEARCH_INPUT, event => {
+  if (event.keyCode == 38) {
+    event.preventDefault()
+    $(SELECTOR_SEARCH_RESULTS_GROUP).children().last().focus()
+    return
+  }
+
+  if (event.keyCode == 40) {
+    event.preventDefault()
+    $(SELECTOR_SEARCH_RESULTS_GROUP).children().first().focus()
+    return
+  }
+
+  setTimeout(() => {
+    SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'search')
+  }, 100)
+})
+
+$(document).on('keydown', SELECTOR_SEARCH_RESULTS_GROUP, event => {
+  const $focused = $(':focus')
+
+  if (event.keyCode == 38) {
+    event.preventDefault()
+
+    if ($focused.is(':first-child')) {
+      $focused.siblings().last().focus()
+    } else {
+      $focused.prev().focus()
+    }
+  }
+
+  if (event.keyCode == 40) {
+    event.preventDefault()
+
+    if ($focused.is(':last-child')) {
+      $focused.siblings().first().focus()
+    } else {
+      $focused.next().focus()
+    }
+  }
+})
+
+$(window).on('load', () => {
+  SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'init')
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = SidebarSearch._jQueryInterface
+$.fn[NAME].Constructor = SidebarSearch
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return SidebarSearch._jQueryInterface
+}
+
+export default SidebarSearch

build/js/SiteSearch.js

@@ -1,127 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE SiteSearch.js
- * License MIT
- * --------------------------------------------
- */
-
-const SiteSearch = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
-
-  const NAME               = 'SiteSearch'
-  const DATA_KEY           = 'lte.site-search'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
-
-  const Event = {}
-
-  const Selector = {
-    TOGGLE_BUTTON  : '[data-widget="site-search"]',
-    SEARCH_BLOCK   : '.site-search-block',
-    SEARCH_BACKDROP: '.site-search-backdrop',
-    SEARCH_INPUT   : '.site-search-block .form-control'
-  }
-
-  const ClassName = {
-    OPEN: 'site-search-open'
-  }
-
-  const Default = {
-    transitionSpeed: 300
-  }
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-
-  class SiteSearch {
-
-    constructor(_element, _options) {
-      this.element = _element
-      this.options = $.extend({}, Default, _options)
-    }
-
-    // Public
-
-    open() {
-      $(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed)
-      $(Selector.SEARCH_BACKDROP).show(0)
-      $(Selector.SEARCH_INPUT).focus()
-      $(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN)
-    }
-
-    close() {
-      $(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
-      $(Selector.SEARCH_BACKDROP).hide(0)
-      $(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN)
-    }
-
-    toggle() {
-      if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
-        this.close()
-      } else {
-        this.open()
-      }
-    }
-
-    // Static
-
-    static _jQueryInterface(options) {
-      return this.each(function () {
-        let data = $(this).data(DATA_KEY)
-
-        if (!data) {
-          data = new SiteSearch(this, options)
-          $(this).data(DATA_KEY, data)
-        }
-
-        if (!/toggle|close/.test(options)) {
-          throw Error(`Undefined method ${options}`)
-        }
-
-        data[options]()
-      })
-    }
-  }
-
-  /**
-   * Data API
-   * ====================================================
-   */
-  $(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
-    event.preventDefault()
-
-    let button = $(event.currentTarget)
-
-    if (button.data('widget') !== 'site-search') {
-      button = button.closest(Selector.TOGGLE_BUTTON)
-    }
-
-    SiteSearch._jQueryInterface.call(button, 'toggle')
-  })
-
-  $(document).on('click', Selector.SEARCH_BACKDROP, (event) => {
-    const backdrop = $(event.currentTarget)
-    SiteSearch._jQueryInterface.call(backdrop, 'close')
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = SiteSearch._jQueryInterface
-  $.fn[NAME].Constructor = SiteSearch
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return SiteSearch._jQueryInterface
-  }
-
-  return SiteSearch
-})(jQuery)
-
-export default SiteSearch

build/js/Toasts.js

@@ -5,225 +5,205 @@
  * --------------------------------------------
  */
 
-const Toasts = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'Toasts'
-  const DATA_KEY           = 'lte.toasts'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    INIT: `init${EVENT_KEY}`,
-    CREATED: `created${EVENT_KEY}`,
-    REMOVED: `removed${EVENT_KEY}`,
+const NAME = 'Toasts'
+const DATA_KEY = 'lte.toasts'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_INIT = `init${EVENT_KEY}`
+const EVENT_CREATED = `created${EVENT_KEY}`
+const EVENT_REMOVED = `removed${EVENT_KEY}`
+
+const SELECTOR_CONTAINER_TOP_RIGHT = '#toastsContainerTopRight'
+const SELECTOR_CONTAINER_TOP_LEFT = '#toastsContainerTopLeft'
+const SELECTOR_CONTAINER_BOTTOM_RIGHT = '#toastsContainerBottomRight'
+const SELECTOR_CONTAINER_BOTTOM_LEFT = '#toastsContainerBottomLeft'
+
+const CLASS_NAME_TOP_RIGHT = 'toasts-top-right'
+const CLASS_NAME_TOP_LEFT = 'toasts-top-left'
+const CLASS_NAME_BOTTOM_RIGHT = 'toasts-bottom-right'
+const CLASS_NAME_BOTTOM_LEFT = 'toasts-bottom-left'
+
+const POSITION_TOP_RIGHT = 'topRight'
+const POSITION_TOP_LEFT = 'topLeft'
+const POSITION_BOTTOM_RIGHT = 'bottomRight'
+const POSITION_BOTTOM_LEFT = 'bottomLeft'
+
+const Default = {
+  position: POSITION_TOP_RIGHT,
+  fixed: true,
+  autohide: false,
+  autoremove: true,
+  delay: 1000,
+  fade: true,
+  icon: null,
+  image: null,
+  imageAlt: null,
+  imageHeight: '25px',
+  title: null,
+  subtitle: null,
+  close: true,
+  body: null,
+  class: null
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+class Toasts {
+  constructor(element, config) {
+    this._config = config
+    this._prepareContainer()
+
+    $('body').trigger($.Event(EVENT_INIT))
   }
 
-  const Selector = {
-    BODY: 'toast-body',
-    CONTAINER_TOP_RIGHT: '#toastsContainerTopRight',
-    CONTAINER_TOP_LEFT: '#toastsContainerTopLeft',
-    CONTAINER_BOTTOM_RIGHT: '#toastsContainerBottomRight',
-    CONTAINER_BOTTOM_LEFT: '#toastsContainerBottomLeft',
-  }
+  // Public
 
-  const ClassName = {
-    TOP_RIGHT: 'toasts-top-right',
-    TOP_LEFT: 'toasts-top-left',
-    BOTTOM_RIGHT: 'toasts-bottom-right',
-    BOTTOM_LEFT: 'toasts-bottom-left',
-    FADE: 'fade',
-  }
+  create() {
+    const toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
 
-  const Position = {
-    TOP_RIGHT: 'topRight',
-    TOP_LEFT: 'topLeft',
-    BOTTOM_RIGHT: 'bottomRight',
-    BOTTOM_LEFT: 'bottomLeft',
-  }
+    toast.data('autohide', this._config.autohide)
+    toast.data('animation', this._config.fade)
 
-  const Id = {
-    CONTAINER_TOP_RIGHT: 'toastsContainerTopRight',
-    CONTAINER_TOP_LEFT: 'toastsContainerTopLeft',
-    CONTAINER_BOTTOM_RIGHT: 'toastsContainerBottomRight',
-    CONTAINER_BOTTOM_LEFT: 'toastsContainerBottomLeft',
-  }
-
-  const Default = {
-    position: Position.TOP_RIGHT,
-    fixed: true,
-    autohide: false,
-    autoremove: true,
-    delay: 1000,
-    fade: true,
-    icon: null,
-    image: null,
-    imageAlt: null,
-    imageHeight: '25px',
-    title: null,
-    subtitle: null,
-    close: true,
-    body: null,
-    class: null,
-  }
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-  class Toasts {
-    constructor(element, config) {
-      this._config  = config
-
-      this._prepareContainer();
-
-      const initEvent = $.Event(Event.INIT)
-      $('body').trigger(initEvent)
+    if (this._config.class) {
+      toast.addClass(this._config.class)
     }
 
-    // Public
-
-    create() {
-      var toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
-
-      toast.data('autohide', this._config.autohide)
-      toast.data('animation', this._config.fade)
-      
-      if (this._config.class) {
-        toast.addClass(this._config.class)
-      }
-
-      if (this._config.delay && this._config.delay != 500) {
-        toast.data('delay', this._config.delay)
-      }
-
-      var toast_header = $('<div class="toast-header">')
-
-      if (this._config.image != null) {
-        var toast_image = $('<img />').addClass('rounded mr-2').attr('src', this._config.image).attr('alt', this._config.imageAlt)
-        
-        if (this._config.imageHeight != null) {
-          toast_image.height(this._config.imageHeight).width('auto')
-        }
-
-        toast_header.append(toast_image)
-      }
-
-      if (this._config.icon != null) {
-        toast_header.append($('<i />').addClass('mr-2').addClass(this._config.icon))
-      }
-
-      if (this._config.title != null) {
-        toast_header.append($('<strong />').addClass('mr-auto').html(this._config.title))
-      }
-
-      if (this._config.subtitle != null) {
-        toast_header.append($('<small />').html(this._config.subtitle))
-      }
-
-      if (this._config.close == true) {
-        var toast_close = $('<button data-dismiss="toast" />').attr('type', 'button').addClass('ml-2 mb-1 close').attr('aria-label', 'Close').append('<span aria-hidden="true">&times;</span>')
-        
-        if (this._config.title == null) {
-          toast_close.toggleClass('ml-2 ml-auto')
-        }
-        
-        toast_header.append(toast_close)
-      }
-
-      toast.append(toast_header)
-
-      if (this._config.body != null) {
-        toast.append($('<div class="toast-body" />').html(this._config.body))
-      }
-
-      $(this._getContainerId()).prepend(toast)
-
-      const createdEvent = $.Event(Event.CREATED)
-      $('body').trigger(createdEvent)
-
-      toast.toast('show')
-
-
-      if (this._config.autoremove) {
-        toast.on('hidden.bs.toast', function () {
-          $(this).delay(200).remove();
-
-          const removedEvent = $.Event(Event.REMOVED)
-          $('body').trigger(removedEvent)
-        })
-      }
-
-
+    if (this._config.delay && this._config.delay != 500) {
+      toast.data('delay', this._config.delay)
     }
 
-    // Static
+    const toastHeader = $('<div class="toast-header">')
 
-    _getContainerId() {
-      if (this._config.position == Position.TOP_RIGHT) {
-        return Selector.CONTAINER_TOP_RIGHT;
-      } else if (this._config.position == Position.TOP_LEFT) {
-        return Selector.CONTAINER_TOP_LEFT;
-      } else if (this._config.position == Position.BOTTOM_RIGHT) {
-        return Selector.CONTAINER_BOTTOM_RIGHT;
-      } else if (this._config.position == Position.BOTTOM_LEFT) {
-        return Selector.CONTAINER_BOTTOM_LEFT;
+    if (this._config.image != null) {
+      const toastImage = $('<img />').addClass('rounded mr-2').attr('src', this._config.image).attr('alt', this._config.imageAlt)
+
+      if (this._config.imageHeight != null) {
+        toastImage.height(this._config.imageHeight).width('auto')
       }
+
+      toastHeader.append(toastImage)
     }
 
-    _prepareContainer() {
-      if ($(this._getContainerId()).length === 0) {
-        var container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
-        if (this._config.position == Position.TOP_RIGHT) {
-          container.addClass(ClassName.TOP_RIGHT)
-        } else if (this._config.position == Position.TOP_LEFT) {
-          container.addClass(ClassName.TOP_LEFT)
-        } else if (this._config.position == Position.BOTTOM_RIGHT) {
-          container.addClass(ClassName.BOTTOM_RIGHT)
-        } else if (this._config.position == Position.BOTTOM_LEFT) {
-          container.addClass(ClassName.BOTTOM_LEFT)
-        }
-
-        $('body').append(container)
-      }
-
-      if (this._config.fixed) {
-        $(this._getContainerId()).addClass('fixed')
-      } else {
-        $(this._getContainerId()).removeClass('fixed')
-      }
+    if (this._config.icon != null) {
+      toastHeader.append($('<i />').addClass('mr-2').addClass(this._config.icon))
     }
 
-    // Static
+    if (this._config.title != null) {
+      toastHeader.append($('<strong />').addClass('mr-auto').html(this._config.title))
+    }
 
-    static _jQueryInterface(option, config) {
-      return this.each(function () {
-        const _config = $.extend({}, Default, config)
-        var toast = new Toasts($(this), _config)
+    if (this._config.subtitle != null) {
+      toastHeader.append($('<small />').html(this._config.subtitle))
+    }
 
-        if (option === 'create') {
-          toast[option]()
-        }
+    if (this._config.close == true) {
+      const toastClose = $('<button data-dismiss="toast" />').attr('type', 'button').addClass('ml-2 mb-1 close').attr('aria-label', 'Close').append('<span aria-hidden="true">&times;</span>')
+
+      if (this._config.title == null) {
+        toastClose.toggleClass('ml-2 ml-auto')
+      }
+
+      toastHeader.append(toastClose)
+    }
+
+    toast.append(toastHeader)
+
+    if (this._config.body != null) {
+      toast.append($('<div class="toast-body" />').html(this._config.body))
+    }
+
+    $(this._getContainerId()).prepend(toast)
+
+    const $body = $('body')
+
+    $body.trigger($.Event(EVENT_CREATED))
+    toast.toast('show')
+
+    if (this._config.autoremove) {
+      toast.on('hidden.bs.toast', function () {
+        $(this).delay(200).remove()
+        $body.trigger($.Event(EVENT_REMOVED))
       })
     }
   }
 
-  /**
-   * jQuery API
-   * ====================================================
-   */
+  // Static
 
-  $.fn[NAME] = Toasts._jQueryInterface
-  $.fn[NAME].Constructor = Toasts
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Toasts._jQueryInterface
+  _getContainerId() {
+    if (this._config.position == POSITION_TOP_RIGHT) {
+      return SELECTOR_CONTAINER_TOP_RIGHT
+    }
+
+    if (this._config.position == POSITION_TOP_LEFT) {
+      return SELECTOR_CONTAINER_TOP_LEFT
+    }
+
+    if (this._config.position == POSITION_BOTTOM_RIGHT) {
+      return SELECTOR_CONTAINER_BOTTOM_RIGHT
+    }
+
+    if (this._config.position == POSITION_BOTTOM_LEFT) {
+      return SELECTOR_CONTAINER_BOTTOM_LEFT
+    }
   }
 
-  return Toasts
-})(jQuery)
+  _prepareContainer() {
+    if ($(this._getContainerId()).length === 0) {
+      const container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
+      if (this._config.position == POSITION_TOP_RIGHT) {
+        container.addClass(CLASS_NAME_TOP_RIGHT)
+      } else if (this._config.position == POSITION_TOP_LEFT) {
+        container.addClass(CLASS_NAME_TOP_LEFT)
+      } else if (this._config.position == POSITION_BOTTOM_RIGHT) {
+        container.addClass(CLASS_NAME_BOTTOM_RIGHT)
+      } else if (this._config.position == POSITION_BOTTOM_LEFT) {
+        container.addClass(CLASS_NAME_BOTTOM_LEFT)
+      }
+
+      $('body').append(container)
+    }
+
+    if (this._config.fixed) {
+      $(this._getContainerId()).addClass('fixed')
+    } else {
+      $(this._getContainerId()).removeClass('fixed')
+    }
+  }
+
+  // Static
+
+  static _jQueryInterface(option, config) {
+    return this.each(function () {
+      const _options = $.extend({}, Default, config)
+      const toast = new Toasts($(this), _options)
+
+      if (option === 'create') {
+        toast[option]()
+      }
+    })
+  }
+}
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = Toasts._jQueryInterface
+$.fn[NAME].Constructor = Toasts
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return Toasts._jQueryInterface
+}
 
 export default Toasts

build/js/TodoList.js

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

build/js/Treeview.js

@@ -5,168 +5,171 @@
  * --------------------------------------------
  */
 
-const Treeview = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
+import $ from 'jquery'
 
-  const NAME               = 'Treeview'
-  const DATA_KEY           = 'lte.treeview'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
+/**
+ * Constants
+ * ====================================================
+ */
 
-  const Event = {
-    SELECTED     : `selected${EVENT_KEY}`,
-    EXPANDED     : `expanded${EVENT_KEY}`,
-    COLLAPSED    : `collapsed${EVENT_KEY}`,
-    LOAD_DATA_API: `load${EVENT_KEY}`
+const NAME = 'Treeview'
+const DATA_KEY = 'lte.treeview'
+const EVENT_KEY = `.${DATA_KEY}`
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const EVENT_EXPANDED = `expanded${EVENT_KEY}`
+const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
+
+const SELECTOR_LI = '.nav-item'
+const SELECTOR_LINK = '.nav-link'
+const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
+const SELECTOR_OPEN = '.menu-open'
+const SELECTOR_DATA_WIDGET = '[data-widget="treeview"]'
+
+const CLASS_NAME_OPEN = 'menu-open'
+const CLASS_NAME_IS_OPENING = 'menu-is-opening'
+const CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse'
+
+const Default = {
+  trigger: `${SELECTOR_DATA_WIDGET} ${SELECTOR_LINK}`,
+  animationSpeed: 300,
+  accordion: true,
+  expandSidebar: false,
+  sidebarButtonSelector: '[data-widget="pushmenu"]'
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+class Treeview {
+  constructor(element, config) {
+    this._config = config
+    this._element = element
   }
 
-  const Selector = {
-    LI           : '.nav-item',
-    LINK         : '.nav-link',
-    TREEVIEW_MENU: '.nav-treeview',
-    OPEN         : '.menu-open',
-    DATA_WIDGET  : '[data-widget="treeview"]'
+  // Public
+
+  init() {
+    $(`${SELECTOR_LI}${SELECTOR_OPEN} ${SELECTOR_TREEVIEW_MENU}${SELECTOR_OPEN}`).css('display', 'block')
+    this._setupListeners()
   }
 
-  const ClassName = {
-    LI           : 'nav-item',
-    LINK         : 'nav-link',
-    TREEVIEW_MENU: 'nav-treeview',
-    OPEN         : 'menu-open'
-  }
+  expand(treeviewMenu, parentLi) {
+    const expandedEvent = $.Event(EVENT_EXPANDED)
 
-  const Default = {
-    trigger       : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
-    animationSpeed: 300,
-    accordion     : true
-  }
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-  class Treeview {
-    constructor(element, config) {
-      this._config  = config
-      this._element = element
+    if (this._config.accordion) {
+      const openMenuLi = parentLi.siblings(SELECTOR_OPEN).first()
+      const openTreeview = openMenuLi.find(SELECTOR_TREEVIEW_MENU).first()
+      this.collapse(openTreeview, openMenuLi)
     }
 
-    // Public
-
-    init() {
-      this._setupListeners()
-    }
-
-    expand(treeviewMenu, parentLi) {
-      const expandedEvent = $.Event(Event.EXPANDED)
-
-      if (this._config.accordion) {
-        const openMenuLi   = parentLi.siblings(Selector.OPEN).first()
-        const openTreeview = openMenuLi.find(Selector.TREEVIEW_MENU).first()
-        this.collapse(openTreeview, openMenuLi)
-      }
-
-      treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
-        parentLi.addClass(ClassName.OPEN)
-        $(this._element).trigger(expandedEvent)
-      })
-    }
-
-    collapse(treeviewMenu, parentLi) {
-      const collapsedEvent = $.Event(Event.COLLAPSED)
-
-      treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
-        parentLi.removeClass(ClassName.OPEN)
-        $(this._element).trigger(collapsedEvent)
-        treeviewMenu.find(`${Selector.OPEN} > ${Selector.TREEVIEW_MENU}`).slideUp()
-        treeviewMenu.find(Selector.OPEN).removeClass(ClassName.OPEN)
-      })
-    }
-
-    toggle(event) {
-
-      const $relativeTarget = $(event.currentTarget)
-      const $parent = $relativeTarget.parent()
-
-      let treeviewMenu = $parent.find(Selector.TREEVIEW_MENU)
-
-      if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
-
-        if (!$parent.is(Selector.LI)) {
-          treeviewMenu = $parent.parent().find(Selector.TREEVIEW_MENU)
-        }
-
-        if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
-          return
-        }
-      }
-      
-      event.preventDefault()
-
-      const parentLi = $relativeTarget.parents(Selector.LI).first()
-      const isOpen   = parentLi.hasClass(ClassName.OPEN)
-
-      if (isOpen) {
-        this.collapse($(treeviewMenu), parentLi)
-      } else {
-        this.expand($(treeviewMenu), parentLi)
-      }
-    }
-
-    // Private
-
-    _setupListeners() {
-      $(document).on('click', this._config.trigger, (event) => {
-        this.toggle(event)
-      })
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data      = $(this).data(DATA_KEY)
-        const _config = $.extend({}, Default, $(this).data())
-
-        if (!data) {
-          data = new Treeview($(this), _config)
-          $(this).data(DATA_KEY, data)
-        }
-
-        if (config === 'init') {
-          data[config]()
-        }
-      })
-    }
-  }
-
-  /**
-   * Data API
-   * ====================================================
-   */
-
-  $(window).on(Event.LOAD_DATA_API, () => {
-    $(Selector.DATA_WIDGET).each(function () {
-      Treeview._jQueryInterface.call($(this), 'init')
+    parentLi.addClass(CLASS_NAME_IS_OPENING)
+    treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
+      parentLi.addClass(CLASS_NAME_OPEN)
+      $(this._element).trigger(expandedEvent)
     })
-  })
 
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = Treeview._jQueryInterface
-  $.fn[NAME].Constructor = Treeview
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Treeview._jQueryInterface
+    if (this._config.expandSidebar) {
+      this._expandSidebar()
+    }
   }
 
-  return Treeview
-})(jQuery)
+  collapse(treeviewMenu, parentLi) {
+    const collapsedEvent = $.Event(EVENT_COLLAPSED)
+
+    parentLi.removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_OPEN}`)
+    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)
+    })
+  }
+
+  toggle(event) {
+    const $relativeTarget = $(event.currentTarget)
+    const $parent = $relativeTarget.parent()
+
+    let treeviewMenu = $parent.find(`> ${SELECTOR_TREEVIEW_MENU}`)
+
+    if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
+      if (!$parent.is(SELECTOR_LI)) {
+        treeviewMenu = $parent.parent().find(`> ${SELECTOR_TREEVIEW_MENU}`)
+      }
+
+      if (!treeviewMenu.is(SELECTOR_TREEVIEW_MENU)) {
+        return
+      }
+    }
+
+    event.preventDefault()
+
+    const parentLi = $relativeTarget.parents(SELECTOR_LI).first()
+    const isOpen = parentLi.hasClass(CLASS_NAME_OPEN)
+
+    if (isOpen) {
+      this.collapse($(treeviewMenu), parentLi)
+    } else {
+      this.expand($(treeviewMenu), parentLi)
+    }
+  }
+
+  // Private
+
+  _setupListeners() {
+    const elementId = this._element.attr('id') !== undefined ? `#${this._element.attr('id')}` : ''
+    $(document).on('click', `${elementId}${this._config.trigger}`, event => {
+      this.toggle(event)
+    })
+  }
+
+  _expandSidebar() {
+    if ($('body').hasClass(CLASS_NAME_SIDEBAR_COLLAPSED)) {
+      $(this._config.sidebarButtonSelector).PushMenu('expand')
+    }
+  }
+
+  // Static
+
+  static _jQueryInterface(config) {
+    return this.each(function () {
+      let data = $(this).data(DATA_KEY)
+      const _options = $.extend({}, Default, $(this).data())
+
+      if (!data) {
+        data = new Treeview($(this), _options)
+        $(this).data(DATA_KEY, data)
+      }
+
+      if (config === 'init') {
+        data[config]()
+      }
+    })
+  }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+
+$(window).on(EVENT_LOAD_DATA_API, () => {
+  $(SELECTOR_DATA_WIDGET).each(function () {
+    Treeview._jQueryInterface.call($(this), 'init')
+  })
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = Treeview._jQueryInterface
+$.fn[NAME].Constructor = Treeview
+$.fn[NAME].noConflict = function () {
+  $.fn[NAME] = JQUERY_NO_CONFLICT
+  return Treeview._jQueryInterface
+}
 
 export default Treeview

build/npm/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "env": {
+    "browser": false,
+    "node": true
+  },
+  "parserOptions": {
+    "sourceType": "script"
+  },
+  "extends": "../../.eslintrc.json",
+  "rules": {
+    "no-console": "off",
+    "strict": "error"
+  }
+}

build/npm/DocsPlugins.js

@@ -1,45 +1,47 @@
+'use strict'
+
 const Plugins = [
   // AdminLTE Dist
   {
     from: 'dist/css/',
-    to  : 'docs/assets/css/'
+    to: 'docs/assets/css/'
   },
   {
     from: 'dist/js/',
-    to  : 'docs/assets/js/'
+    to: 'docs/assets/js/'
   },
   // jQuery
   {
     from: 'node_modules/jquery/dist/',
-    to  : 'docs/assets/plugins/jquery/'
+    to: 'docs/assets/plugins/jquery/'
   },
   // Popper
   {
     from: 'node_modules/popper.js/dist/',
-    to  : 'docs/assets/plugins/popper/'
+    to: 'docs/assets/plugins/popper/'
   },
   // Bootstrap
   {
     from: 'node_modules/bootstrap/dist/js/',
-    to  : 'docs/assets/plugins/bootstrap/js/'
+    to: 'docs/assets/plugins/bootstrap/js/'
   },
   // Font Awesome
   {
     from: 'node_modules/@fortawesome/fontawesome-free/css/',
-    to  : 'docs/assets/plugins/fontawesome-free/css/'
+    to: 'docs/assets/plugins/fontawesome-free/css/'
   },
   {
     from: 'node_modules/@fortawesome/fontawesome-free/webfonts/',
-    to  : 'docs/assets/plugins/fontawesome-free/webfonts/'
+    to: 'docs/assets/plugins/fontawesome-free/webfonts/'
   },
   // overlayScrollbars
   {
     from: 'node_modules/overlayscrollbars/js/',
-    to  : 'docs/assets/plugins/overlayScrollbars/js/'
+    to: 'docs/assets/plugins/overlayScrollbars/js/'
   },
   {
     from: 'node_modules/overlayscrollbars/css/',
-    to  : 'docs/assets/plugins/overlayScrollbars/css/'
+    to: 'docs/assets/plugins/overlayScrollbars/css/'
   }
 ]
 

build/npm/DocsPublish.js

@@ -1,5 +1,11 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const path = require('path')
+const fse = require('fs-extra')
+const fs = require('fs')
 const Plugins = require('./DocsPlugins')
-const fse     = require('fs-extra')
 
 class Publish {
   constructor() {
@@ -12,7 +18,7 @@ class Publish {
 
   getArguments() {
     if (process.argv.length > 2) {
-      let arg = process.argv[2]
+      const arg = process.argv[2]
       switch (arg) {
         case '-v':
         case '--verbose':
@@ -26,17 +32,26 @@ class Publish {
 
   run() {
     // Publish files
-    Plugins.forEach((module) => {
+    Plugins.forEach(module => {
       try {
-        fse.copySync(module.from, module.to)
+        fse.copySync(module.from, module.to, {
+          // Skip copying dot files
+          filter(src) {
+            return !path.basename(src).startsWith('.')
+          }
+        })
 
         if (this.options.verbose) {
           console.log(`Copied ${module.from} to ${module.to}`)
         }
-      } catch (err) {
-        console.error(`Error: ${err}`)
+      } catch (error) {
+        console.error(`Error: ${error}`)
       }
     })
+
+    const insertText = '---\r\nlayout: page\r\ntitle: \r\n---\r\n'
+
+    fs.writeFileSync('docs/how-to-contribute.md', insertText + fs.readFileSync('.github/CONTRIBUTING.md', 'utf8'))
   }
 }
 

build/npm/Plugins.js

@@ -1,102 +1,108 @@
+'use strict'
+
 const Plugins = [
   // jQuery
   {
     from: 'node_modules/jquery/dist',
-    to  : 'plugins/jquery'
+    to: 'plugins/jquery'
   },
   // Popper
   {
     from: 'node_modules/popper.js/dist',
-    to  : 'plugins/popper'
+    to: 'plugins/popper'
   },
   // Bootstrap
   {
     from: 'node_modules/bootstrap/dist/js',
-    to  : 'plugins/bootstrap/js'
+    to: 'plugins/bootstrap/js'
   },
   // Font Awesome
   {
     from: 'node_modules/@fortawesome/fontawesome-free/css',
-    to  : 'plugins/fontawesome-free/css'
+    to: 'plugins/fontawesome-free/css'
   },
   {
     from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
-    to  : 'plugins/fontawesome-free/webfonts'
+    to: 'plugins/fontawesome-free/webfonts'
   },
   // overlayScrollbars
   {
     from: 'node_modules/overlayscrollbars/js',
-    to  : 'plugins/overlayScrollbars/js'
+    to: 'plugins/overlayScrollbars/js'
   },
   {
     from: 'node_modules/overlayscrollbars/css',
-    to  : 'plugins/overlayScrollbars/css'
+    to: 'plugins/overlayScrollbars/css'
   },
   // Chart.js
   {
     from: 'node_modules/chart.js/dist/',
-    to  : 'plugins/chart.js'
+    to: 'plugins/chart.js'
   },
   // jQuery UI
   {
     from: 'node_modules/jquery-ui-dist/',
-    to  : 'plugins/jquery-ui'
+    to: 'plugins/jquery-ui'
   },
   // Flot
   {
     from: 'node_modules/flot/dist/es5/',
-    to  : 'plugins/flot'
+    to: 'plugins/flot'
+  },
+  {
+    from: 'node_modules/flot/source/',
+    to: 'plugins/flot/plugins'
   },
   // Summernote
   {
     from: 'node_modules/summernote/dist/',
-    to  : 'plugins/summernote'
+    to: 'plugins/summernote'
   },
   // Bootstrap Slider
   {
     from: 'node_modules/bootstrap-slider/dist/',
-    to  : 'plugins/bootstrap-slider'
+    to: 'plugins/bootstrap-slider'
   },
   {
     from: 'node_modules/bootstrap-slider/dist/css',
-    to  : 'plugins/bootstrap-slider/css'
+    to: 'plugins/bootstrap-slider/css'
   },
   // Bootstrap Colorpicker
   {
     from: 'node_modules/bootstrap-colorpicker/dist/js',
-    to  : 'plugins/bootstrap-colorpicker/js'
+    to: 'plugins/bootstrap-colorpicker/js'
   },
   {
     from: 'node_modules/bootstrap-colorpicker/dist/css',
-    to  : 'plugins/bootstrap-colorpicker/css'
+    to: 'plugins/bootstrap-colorpicker/css'
   },
   // Tempusdominus Bootstrap 4
   {
     from: 'node_modules/tempusdominus-bootstrap-4/build/js',
-    to  : 'plugins/tempusdominus-bootstrap-4/js'
+    to: 'plugins/tempusdominus-bootstrap-4/js'
   },
   {
     from: 'node_modules/tempusdominus-bootstrap-4/build/css',
-    to  : 'plugins/tempusdominus-bootstrap-4/css'
+    to: 'plugins/tempusdominus-bootstrap-4/css'
   },
   // Moment
   {
     from: 'node_modules/moment/min',
-    to  : 'plugins/moment'
+    to: 'plugins/moment'
   },
   {
     from: 'node_modules/moment/locale',
-    to  : 'plugins/moment/locale'
+    to: 'plugins/moment/locale'
   },
   // FastClick
   {
     from: 'node_modules/fastclick/lib',
-    to  : 'plugins/fastclick'
+    to: 'plugins/fastclick'
   },
   // Date Range Picker
   {
     from: 'node_modules/daterangepicker/',
-    to  : 'plugins/daterangepicker'
+    to: 'plugins/daterangepicker'
   },
   // DataTables
   {
@@ -239,6 +245,30 @@ const Plugins = [
     from: 'node_modules/datatables.net-scroller-bs4/css',
     to: 'plugins/datatables-scroller/css'
   },
+  {
+    from: 'node_modules/datatables.net-searchbuilder/js',
+    to: 'plugins/datatables-searchbuilder/js'
+  },
+  {
+    from: 'node_modules/datatables.net-searchbuilder-bs4/js',
+    to: 'plugins/datatables-searchbuilder/js'
+  },
+  {
+    from: 'node_modules/datatables.net-searchbuilder-bs4/css',
+    to: 'plugins/datatables-searchbuilder/css'
+  },
+  {
+    from: 'node_modules/datatables.net-searchpanes/js',
+    to: 'plugins/datatables-searchpanes/js'
+  },
+  {
+    from: 'node_modules/datatables.net-searchpanes-bs4/js',
+    to: 'plugins/datatables-searchpanes/js'
+  },
+  {
+    from: 'node_modules/datatables.net-searchpanes-bs4/css',
+    to: 'plugins/datatables-searchpanes/css'
+  },
   {
     from: 'node_modules/datatables.net-select/js',
     to: 'plugins/datatables-select/js'
@@ -254,97 +284,81 @@ const Plugins = [
 
   // Fullcalendar
   {
-    from: 'node_modules/@fullcalendar/core/',
-    to  : 'plugins/fullcalendar'
-  },
-  {
-    from: 'node_modules/@fullcalendar/bootstrap/',
-    to  : 'plugins/fullcalendar-bootstrap'
-  },
-  {
-    from: 'node_modules/@fullcalendar/daygrid/',
-    to  : 'plugins/fullcalendar-daygrid'
-  },
-  {
-    from: 'node_modules/@fullcalendar/timegrid/',
-    to  : 'plugins/fullcalendar-timegrid'
-  },
-  {
-    from: 'node_modules/@fullcalendar/interaction/',
-    to  : 'plugins/fullcalendar-interaction'
+    from: 'node_modules/fullcalendar/',
+    to: 'plugins/fullcalendar'
   },
   // icheck bootstrap
   {
     from: 'node_modules/icheck-bootstrap/',
-    to  : 'plugins/icheck-bootstrap'
+    to: 'plugins/icheck-bootstrap'
   },
   // inputmask
   {
     from: 'node_modules/inputmask/dist/',
-    to  : 'plugins/inputmask'
+    to: 'plugins/inputmask'
   },
   // ion-rangeslider
   {
     from: 'node_modules/ion-rangeslider/',
-    to  : 'plugins/ion-rangeslider'
+    to: 'plugins/ion-rangeslider'
   },
   // JQVMap (jqvmap-novulnerability)
   {
     from: 'node_modules/jqvmap-novulnerability/dist/',
-    to  : 'plugins/jqvmap'
+    to: 'plugins/jqvmap'
   },
   // jQuery Mapael
   {
     from: 'node_modules/jquery-mapael/js/',
-    to  : 'plugins/jquery-mapael'
+    to: 'plugins/jquery-mapael'
   },
   // Raphael
   {
     from: 'node_modules/raphael/',
-    to  : 'plugins/raphael'
+    to: 'plugins/raphael'
   },
   // jQuery Mousewheel
   {
     from: 'node_modules/jquery-mousewheel/',
-    to  : 'plugins/jquery-mousewheel'
+    to: 'plugins/jquery-mousewheel'
   },
   // jQuery Knob
   {
     from: 'node_modules/jquery-knob-chif/dist/',
-    to  : 'plugins/jquery-knob'
+    to: 'plugins/jquery-knob'
   },
   // pace-progress
   {
     from: 'node_modules/@lgaitan/pace-progress/dist/',
-    to  : 'plugins/pace-progress'
+    to: 'plugins/pace-progress'
   },
   // Select2
   {
     from: 'node_modules/select2/dist/',
-    to  : 'plugins/select2'
+    to: 'plugins/select2'
   },
   {
     from: 'node_modules/@ttskch/select2-bootstrap4-theme/dist/',
-    to  : 'plugins/select2-bootstrap4-theme'
+    to: 'plugins/select2-bootstrap4-theme'
   },
   // Sparklines
   {
     from: 'node_modules/sparklines/source/',
-    to  : 'plugins/sparklines'
+    to: 'plugins/sparklines'
   },
   // SweetAlert2
   {
     from: 'node_modules/sweetalert2/dist/',
-    to  : 'plugins/sweetalert2'
+    to: 'plugins/sweetalert2'
   },
   {
     from: 'node_modules/@sweetalert2/theme-bootstrap-4/',
-    to  : 'plugins/sweetalert2-theme-bootstrap-4'
+    to: 'plugins/sweetalert2-theme-bootstrap-4'
   },
   // Toastr
   {
     from: 'node_modules/toastr/build/',
-    to  : 'plugins/toastr'
+    to: 'plugins/toastr'
   },
   // jsGrid
   {
@@ -352,8 +366,8 @@ const Plugins = [
     to: 'plugins/jsgrid'
   },
   {
-    from: 'node_modules/jsgrid/demos/',
-    to: 'plugins/jsgrid/demos'
+    from: 'node_modules/jsgrid/demos/db.js',
+    to: 'plugins/jsgrid/demos/db.js'
   },
   // flag-icon-css
   {
@@ -384,6 +398,52 @@ const Plugins = [
     from: 'node_modules/bootstrap-switch/dist',
     to: 'plugins/bootstrap-switch/'
   },
+  // jQuery Validate
+  {
+    from: 'node_modules/jquery-validation/dist/',
+    to: 'plugins/jquery-validation'
+  },
+  // bs-custom-file-input
+  {
+    from: 'node_modules/bs-custom-file-input/dist/',
+    to: 'plugins/bs-custom-file-input'
+  },
+  // bs-stepper
+  {
+    from: 'node_modules/bs-stepper/dist/',
+    to: 'plugins/bs-stepper'
+  },
+  // CodeMirror
+  {
+    from: 'node_modules/codemirror/lib/',
+    to: 'plugins/codemirror'
+  },
+  {
+    from: 'node_modules/codemirror/addon/',
+    to: 'plugins/codemirror/addon'
+  },
+  {
+    from: 'node_modules/codemirror/keymap/',
+    to: 'plugins/codemirror/keymap'
+  },
+  {
+    from: 'node_modules/codemirror/mode/',
+    to: 'plugins/codemirror/mode'
+  },
+  {
+    from: 'node_modules/codemirror/theme/',
+    to: 'plugins/codemirror/theme'
+  },
+  // dropzonejs
+  {
+    from: 'node_modules/dropzone/dist/',
+    to: 'plugins/dropzone'
+  },
+  // uPlot
+  {
+    from: 'node_modules/uplot/dist/',
+    to: 'plugins/uplot'
+  }
 ]
 
 module.exports = Plugins

build/npm/Publish.js

@@ -1,5 +1,10 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const path = require('path')
+const fse = require('fs-extra')
 const Plugins = require('./Plugins')
-const fse     = require('fs-extra')
 
 class Publish {
   constructor() {
@@ -12,7 +17,7 @@ class Publish {
 
   getArguments() {
     if (process.argv.length > 2) {
-      let arg = process.argv[2]
+      const arg = process.argv[2]
       switch (arg) {
         case '-v':
         case '--verbose':
@@ -26,15 +31,26 @@ class Publish {
 
   run() {
     // Publish files
-    Plugins.forEach((module) => {
+    Plugins.forEach(module => {
+      const fseOptions = {
+        // Skip copying dot files
+        filter(src) {
+          return !path.basename(src).startsWith('.')
+        }
+      }
+
       try {
-        fse.copySync(module.from, module.to)
+        if (fse.existsSync(module.from)) {
+          fse.copySync(module.from, module.to, fseOptions)
+        } else {
+          fse.copySync(module.from.replace('node_modules/', '../'), module.to, fseOptions)
+        }
 
         if (this.options.verbose) {
           console.log(`Copied ${module.from} to ${module.to}`)
         }
-      } catch (err) {
-        console.error(`Error: ${err}`)
+      } catch (error) {
+        console.error(`Error: ${error}`)
       }
     })
   }

build/npm/vnu-jar.js

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+/*!
+ * Script to run vnu-jar if Java is available.
+ * Copyright 2017-2021 The Bootstrap Authors
+ * Copyright 2017-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+'use strict'
+
+const childProcess = require('child_process')
+const vnu = require('vnu-jar')
+
+childProcess.exec('java -version', (error, stdout, stderr) => {
+  if (error) {
+    console.error('Skipping vnu-jar test; Java is missing.')
+    return
+  }
+
+  const is32bitJava = !/64-Bit/.test(stderr)
+
+  // vnu-jar accepts multiple ignores joined with a `|`.
+  // Also note that the ignores are regular expressions.
+  const ignores = [
+    // "autocomplete" is included in <button> and checkboxes and radio <input>s due to
+    // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
+    'Attribute “autocomplete” is only allowed when the input type is.*'
+  ].join('|')
+
+  const args = [
+    '-jar',
+    vnu,
+    '--asciiquotes',
+    '--skip-non-html',
+    // Ignore the language code warnings
+    '--no-langdetect',
+    '--Werror',
+    `--filterpattern "${ignores}"`,
+    './*.html',
+    'docs_html/',
+    'pages/'
+  ]
+
+  // For the 32-bit Java we need to pass `-Xss512k`
+  if (is32bitJava) {
+    args.splice(0, 0, '-Xss512k')
+  }
+
+  return childProcess.spawn('java', args, {
+    shell: true,
+    stdio: 'inherit'
+  })
+    .on('exit', process.exit)
+})

build/scss/.csslintrc

@@ -1,23 +0,0 @@
-{
-  "adjoining-classes": false,
-  "box-sizing": false,
-  "box-model": false,
-  "compatible-vendor-prefixes": false,
-  "floats": false,
-  "font-sizes": false,
-  "gradients": false,
-  "important": false,
-  "known-properties": false,
-  "outline-none": false,
-  "qualified-headings": false,
-  "regex-selectors": false,
-  "shorthand": false,
-  "text-indent": false,
-  "unique-headings": false,
-  "universal-selector": false,
-  "unqualified-attributes": false,
-  "ids": false,
-  "fallback-colors": false,
-  "vendor-prefix": false,
-  "import": false
-}

build/scss/AdminLTE-raw.scss

@@ -1,85 +0,0 @@
-/*!
- *   AdminLTE v3.0.0-rc.3
- *   Author: Colorlib
- *	 Website: AdminLTE.io <http://adminlte.io>
- *   License: Open source - MIT <http://opensource.org/licenses/MIT>
- */
-//
-// ------------------------------------------------------------------
-// This file is to be included in your custom SCSS. Before importing
-// this file, you should include your custom AdminLTE and Bootstrap
-// variables followed by bootstrap.scss and then this file. It's
-// ok to import this file without custom variables too!
-// NOTE: be sure to keep the license notice in the generated css.
-// ------------------------------------------------------------------
-//
-// Variables and Mixins
-// ---------------------------------------------------
-@import 'bootstrap-variables';
-@import 'variables';
-@import 'mixins';
-
-// Core
-// ---------------------------------------------------
-@import 'layout';
-
-// Components
-// ---------------------------------------------------
-@import 'main-header';
-@import 'brand';
-@import 'main-sidebar';
-@import 'sidebar-mini';
-@import 'control-sidebar';
-@import 'dropdown';
-@import 'forms';
-@import 'progress-bars';
-@import 'small-box';
-@import 'cards';
-@import 'info-box';
-@import 'timeline';
-@import 'buttons';
-@import 'callout';
-@import 'alerts';
-@import 'navs';
-@import 'products';
-@import 'table';
-@import 'direct-chat';
-@import 'users-list';
-@import 'carousel';
-@import 'social-widgets';
-@import 'modals';
-@import 'toasts';
-
-// Pages
-// ---------------------------------------------------
-@import 'pages/mailbox';
-@import 'pages/lockscreen';
-@import 'pages/login_and_register';
-@import 'pages/404_500_errors';
-@import 'pages/invoice';
-@import 'pages/profile';
-@import 'pages/e_commerce';
-@import 'pages/projects';
-
-// Plugins
-// ---------------------------------------------------
-@import 'plugins/mixins';
-@import 'plugins/fullcalendar';
-@import 'plugins/select2';
-@import 'plugins/bootstrap-slider';
-@import 'plugins/icheck-bootstrap';
-@import 'plugins/mapael';
-@import 'plugins/jqvmap';
-@import 'plugins/sweetalert2';
-@import 'plugins/toastr';
-@import 'plugins/pace';
-@import 'plugins/bootstrap-switch';
-@import 'plugins/miscellaneous';
-
-// Miscellaneous
-// ---------------------------------------------------
-@import 'miscellaneous';
-@import 'print';
-@import 'text';
-@import 'elevation';
-@import 'colors';

build/scss/AdminLTE.scss

@@ -1,81 +0,0 @@
-/*!
- *   AdminLTE v3.0.0-rc.3
- *   Author: Colorlib
- *	 Website: AdminLTE.io <http://adminlte.io>
- *   License: Open source - MIT <http://opensource.org/licenses/MIT>
- */
-// Bootstrap
-// ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/bootstrap';
-
-// Variables and Mixins
-// ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
-
-// Core
-// ---------------------------------------------------
-@import 'layout';
-
-// Components
-// ---------------------------------------------------
-@import 'main-header';
-@import 'brand';
-@import 'main-sidebar';
-@import 'sidebar-mini';
-@import 'control-sidebar';
-@import 'dropdown';
-@import 'forms';
-@import 'progress-bars';
-@import 'small-box';
-@import 'cards';
-@import 'info-box';
-@import 'timeline';
-@import 'buttons';
-@import 'callout';
-@import 'alerts';
-@import 'navs';
-@import 'products';
-@import 'table';
-@import 'direct-chat';
-@import 'users-list';
-@import 'carousel';
-@import 'social-widgets';
-@import 'modals';
-@import 'toasts';
-
-// Pages
-// ---------------------------------------------------
-@import 'pages/mailbox';
-@import 'pages/lockscreen';
-@import 'pages/login_and_register';
-@import 'pages/404_500_errors';
-@import 'pages/invoice';
-@import 'pages/profile';
-@import 'pages/e_commerce';
-@import 'pages/projects';
-
-// Plugins
-// ---------------------------------------------------
-@import 'plugins/mixins';
-@import 'plugins/fullcalendar';
-@import 'plugins/select2';
-@import 'plugins/bootstrap-slider';
-@import 'plugins/icheck-bootstrap';
-@import 'plugins/mapael';
-@import 'plugins/jqvmap';
-@import 'plugins/sweetalert2';
-@import 'plugins/toastr';
-@import 'plugins/pace';
-@import 'plugins/bootstrap-switch';
-@import 'plugins/miscellaneous';
-
-// Miscellaneous
-// ---------------------------------------------------
-@import 'miscellaneous';
-@import 'print';
-@import 'text';
-@import 'elevation';
-@import 'colors';

build/scss/_adminlte.raw.scss

@@ -0,0 +1,30 @@
+/*!
+ *   AdminLTE v3.1.0
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+//
+// ------------------------------------------------------------------
+// This file is to be included in your custom SCSS. Before importing
+// this file, you should include your custom AdminLTE and Bootstrap
+// variables followed by bootstrap.scss and then this file. It's
+// ok to import this file without custom variables too!
+// NOTE: be sure to keep the license notice in the generated css.
+// ------------------------------------------------------------------
+
+//
+// Variables and Mixins
+// ---------------------------------------------------
+@import "bootstrap-variables";
+@import "variables";
+@import "variables-alt";
+@import "mixins";
+
+@import "parts/core";
+@import "parts/components";
+@import "parts/extra-components";
+@import "parts/pages";
+@import "parts/plugins";
+@import "parts/miscellaneous";

build/scss/_alerts.scss

@@ -23,28 +23,30 @@
 }
 
 //Alert Variants
-.alert-success {
-  @extend .bg-success;
-  border-color: darken(theme-color('success'), 5%);
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    color: color-yiq($value);
+    background-color: $value;
+    border-color: darken($value, 5%);
+  }
+
+  .alert-default-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
 }
 
-.alert-danger,
-.alert-error {
-  @extend .bg-danger;
-  border-color: darken(theme-color('danger'), 5%);
+.dark-mode {
+  @each $color, $value in $theme-colors-alt {
+    .alert-#{$color} {
+      color: color-yiq($value);
+      background-color: $value;
+      border-color: darken($value, 5%);
+    }
+
+    .alert-default-#{$color} {
+      @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+    }
+  }
 }
 
-.alert-warning {
-  @extend .bg-warning;
-  border-color: darken(theme-color('warning'), 5%);
-}
-
-.alert-info {
-  @extend .bg-info;
-  border-color: darken(theme-color('info'), 5%);
-}
-
-.alert-primary {
-  @extend .bg-primary;
-  border-color: darken(theme-color('primary'), 5%);
-}
+//

build/scss/_animation-effects.scss

@@ -0,0 +1,14 @@
+//
+// Component: Animation
+//
+
+.animation {
+  &__shake {
+    animation: shake 1500ms;
+  }
+  &__wobble {
+    animation: wobble 1500ms;
+  }
+}
+
+//

build/scss/_bootstrap-variables.scss

@@ -9,7 +9,7 @@
 //
 
 // stylelint-disable
-$white:    #ffffff !default;
+$white:    #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -23,15 +23,15 @@ $black:    #000 !default;
 
 $grays: () !default;
 $grays: map-merge((
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $gray-500,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
 ), $grays);
 
 $blue:    #007bff !default;
@@ -47,19 +47,19 @@ $cyan:    #17a2b8 !default;
 
 $colors: () !default;
 $colors: map-merge((
-        "blue":       $blue,
-        "indigo":     $indigo,
-        "purple":     $purple,
-        "pink":       $pink,
-        "red":        $red,
-        "orange":     $orange,
-        "yellow":     $yellow,
-        "green":      $green,
-        "teal":       $teal,
-        "cyan":       $cyan,
-        "white":      $white,
-        "gray":       $gray-600,
-        "gray-dark":  $gray-800
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "gray-dark":  $gray-800
 ), $colors);
 
 $primary:       $blue !default;
@@ -73,14 +73,14 @@ $dark:          $gray-800 !default;
 
 $theme-colors: () !default;
 $theme-colors: map-merge((
-        "primary":    $primary,
-        "secondary":  $secondary,
-        "success":    $success,
-        "info":       $info,
-        "warning":    $warning,
-        "danger":     $danger,
-        "light":      $light,
-        "dark":       $dark
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
 ), $theme-colors);
 // stylelint-enable
 
@@ -91,22 +91,26 @@ $theme-color-interval:      8% !default;
 $yiq-contrasted-threshold: 150 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: #1F2D3D !default;
+$yiq-text-dark: #1f2d3d !default;
 $yiq-text-light: $white !default;
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:              true !default;
-$enable-rounded:            true !default;
-$enable-shadows:            true !default;
-$enable-gradients:          false !default;
-$enable-transitions:        true !default;
-$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes:       true !default;
-$enable-print-styles:       true !default;
-
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              true !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
 
 // Spacing
 //
@@ -118,21 +122,21 @@ $enable-print-styles:       true !default;
 $spacer: 1rem !default;
 $spacers: () !default;
 $spacers: map-merge((
-        0: 0,
-        1: ($spacer * .25),
-        2: ($spacer * .5),
-        3: $spacer,
-        4: ($spacer * 1.5),
-        5: ($spacer * 3)
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3)
 ), $spacers);
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 $sizes: map-merge((
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
 ), $sizes);
 // stylelint-enable
 
@@ -165,11 +169,11 @@ $paragraph-margin-bottom:   1rem !default;
 // adapting to different screen sizes, for use in media queries.
 
 $grid-breakpoints: (
-        xs: 0,
-        sm: 576px,
-        md: 768px,
-        lg: 992px,
-        xl: 1200px
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -181,10 +185,10 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-        sm: 540px,
-        md: 720px,
-        lg: 960px,
-        xl: 1140px
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -410,11 +414,14 @@ $input-focus-color:                     $input-color !default;
 $input-focus-width:                     0 !default;
 $input-focus-box-shadow:                none !default;
 
-$input-placeholder-color:               $gray-600 !default;
+$input-placeholder-color:               lighten($gray-600, 15%) !default;
 
 $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:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
 
 $input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
@@ -440,7 +447,7 @@ $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
-$custom-control-gutter:                 1.5rem !default;
+$custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
 
 $custom-control-indicator-size:         1rem !default;
@@ -514,7 +521,7 @@ $custom-file-box-shadow:            $custom-select-focus-box-shadow !default;
 $custom-file-button-color:          $custom-file-color !default;
 $custom-file-button-bg:             $input-group-addon-bg !default;
 $custom-file-text: (
-        en: "Browse"
+  en: "Browse"
 ) !default;
 
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
@@ -692,6 +699,13 @@ $tooltip-arrow-width:         .8rem !default;
 $tooltip-arrow-height:        .4rem !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
 // Popovers
 
@@ -746,6 +760,7 @@ $modal-title-line-height:           $line-height-base !default;
 $modal-content-bg:               $white !default;
 $modal-content-border-color:     rgba($black, .2) !default;
 $modal-content-border-width:     $border-width !default;
+$modal-content-border-radius:    $border-radius-lg !default;
 $modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
 $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
 

build/scss/_brand.scss

@@ -20,14 +20,40 @@
     font-size: inherit;
   }
 
-  [class*='sidebar-dark'] & {
+  [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 10%);
-    color: rgba($white, .8);
+
+    &,
+    .pushmenu {
+      color: rgba($white, .8);
+
+      &:hover {
+        color: $white;
+      }
+    }
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
-    color: rgba($black, .8);
+
+    &,
+    .pushmenu {
+      color: rgba($black, .8);
+
+      &:hover {
+        color: $black;
+      }
+    }
+  }
+
+  .pushmenu {
+    margin-right: $sidebar-padding-x;
+    font-size: $font-size-base;
+  }
+
+  .brand-link {
+    padding: 0;
+    border-bottom: none;
   }
 
   .brand-image {
@@ -52,6 +78,10 @@
     line-height: .8;
     max-height: 40px;
     width: auto;
+
+    &.single {
+      margin-top: -.3rem;
+    }
   }
 
   &.text-sm,

build/scss/_buttons.scss

@@ -3,6 +3,11 @@
 //
 
 .btn {
+  &.disabled,
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   // Flat buttons
   &.btn-flat {
     @include border-radius(0);
@@ -15,8 +20,8 @@
     overflow: hidden;
     position: relative;
 
-    > input[type='file'] {
-      background: $white;
+    > input[type="file"] {
+      background-color: $white;
       cursor: inherit;
       display: block;
       font-size: 100px;
@@ -69,21 +74,27 @@
   > .fas,
   > .far,
   > .fab,
-  > .glyphicon,
+  > .fal,
+  > .fad,
+  > .svg-inline--fa,
   > .ion {
     display: block;
     font-size: 20px;
   }
 
+  > .svg-inline--fa {
+    margin: 0 auto;
+  }
+
   &:hover {
-    background: $button-default-background-color;
+    background-color: $button-default-background-color;
     border-color: darken($button-default-border-color, 20%);
     color: $button-default-color;
   }
 
   &:active,
   &:focus {
-    @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
+    @include box-shadow(inset 0 3px 5px rgba($black, .125));
   }
 
   // The badge
@@ -101,3 +112,43 @@
 .btn-xs {
   @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
 }
+
+.dark-mode {
+  .btn-default,
+  .btn-app {
+    background-color: lighten($dark, 2.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 5%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 2.5%);
+    }
+  }
+  .btn-light {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 10%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 5%);
+    }
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    .btn-#{$color} {
+      @include button-variant($value, $value);
+    }
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    .btn-outline-#{$color} {
+      @include button-outline-variant($value);
+    }
+  }
+}

build/scss/_callout.scss

@@ -9,14 +9,14 @@
   }
 
   @if $enable-shadows {
-    @extend .elevation-1;
+    box-shadow: map-get($elevations, 1);
   } @else {
     border: 1px solid $gray-300;
   }
 
-  @extend .mb-3;
   background-color: $white;
   border-left: 5px solid $gray-200;
+  margin-bottom: map-get($spacers, 3);
   padding: 1rem;
 
   a {
@@ -34,18 +34,40 @@
 
   // Themes for different contexts
   &.callout-danger {
-    border-left-color: darken(theme-color('danger'), 10%);
+    border-left-color: darken(theme-color("danger"), 10%);
   }
 
   &.callout-warning {
-    border-left-color: darken(theme-color('warning'), 10%);
+    border-left-color: darken(theme-color("warning"), 10%);
   }
 
   &.callout-info {
-    border-left-color: darken(theme-color('info'), 10%);
+    border-left-color: darken(theme-color("info"), 10%);
   }
 
   &.callout-success {
-    border-left-color: darken(theme-color('success'), 10%);
+    border-left-color: darken(theme-color("success"), 10%);
+  }
+}
+
+.dark-mode {
+  .callout {
+    background-color: lighten($dark, 5%);
+
+    &.callout-danger {
+      border-left-color: lighten($danger-alt, 10%);
+    }
+
+    &.callout-warning {
+      border-left-color: lighten($warning-alt, 10%);
+    }
+
+    &.callout-info {
+      border-left-color: lighten($info-alt, 10%);
+    }
+
+    &.callout-success {
+      border-left-color: lighten($success-alt, 10%);
+    }
   }
 }

build/scss/_cards.scss

@@ -2,9 +2,18 @@
 // Component: Cards
 //
 
+// Color variants
+@each $name, $color in $theme-colors {
+  @include cards-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include cards-variant($name, $color);
+}
+
 .card {
-  @extend .mb-3;
   @include box-shadow($card-shadow);
+  margin-bottom: map-get($spacers, 3);
 
   &.bg-dark {
     .card-header {
@@ -25,13 +34,17 @@
     position: fixed;
     top: 0;
     width: 100% !important;
-    z-index: 9999;
+    z-index: $zindex-modal-backdrop;
 
     &.was-collapsed .card-body {
       display: block !important;
     }
 
-    [data-widget='collapse'] {
+    .card-body {
+      overflow: auto;
+    }
+
+    [data-card-widgett="collapse"] {
       display: none;
     }
 
@@ -75,6 +88,113 @@
   .border-left {
     border-left: 1px solid $card-border-color;
   }
+
+  &.card-tabs {
+    &:not(.card-outline) {
+      > .card-header {
+        border-bottom: 0;
+
+        .nav-item {
+          &:first-child .nav-link {
+            border-left-color: transparent;
+          }
+        }
+      }
+    }
+
+    &.card-outline {
+      .nav-item {
+        border-bottom: 0;
+
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+    }
+
+    .card-tools {
+      margin: .3rem .5rem;
+    }
+
+    &:not(.expanding-card).collapsed-card {
+      .card-header {
+        border-bottom: 0;
+
+        .nav-tabs {
+          border-bottom: 0;
+
+          .nav-item {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
+  }
+
+  &.card-outline-tabs {
+    border-top: 0;
+
+    .card-header {
+      .nav-item {
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+
+      a {
+        border-top: 3px solid transparent;
+
+        &:hover {
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+
+        &.active {
+          &:hover {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+
+    .card-tools {
+      margin: .5rem .5rem .3rem;
+    }
+
+    &:not(.expanding-card).collapsed-card .card-header {
+      border-bottom: 0;
+
+      .nav-tabs {
+        border-bottom: 0;
+
+        .nav-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
+  }
+
 }
 
 // Maximized Card Body Scroll fix
@@ -86,7 +206,7 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix;
+  @include clearfix ();
 }
 
 // Box header
@@ -108,13 +228,14 @@ html.maximized-card {
     float: right;
     margin-right: -$card-spacer-x / 2;
 
+    .input-group,
     .nav,
     .pagination {
-      margin-bottom: -$card-spacer-y / 2;
-      margin-top: -$card-spacer-y / 2;
+      margin-bottom: -$card-spacer-y / 2.5;
+      margin-top: -$card-spacer-y / 2.5;
     }
 
-    [data-toggle='tooltip'] {
+    [data-toggle="tooltip"] {
       position: relative;
     }
   }
@@ -134,7 +255,7 @@ html.maximized-card {
 
 // Box Tools Buttons
 .btn-tool {
-  background: transparent;
+  background-color: transparent;
   color: $gray-500;
   font-size: $font-size-sm;
   margin: -(($card-spacer-y / 2) * 2) 0;
@@ -157,7 +278,7 @@ html.maximized-card {
   }
 
   .nav-link {
-    padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x; 
+    padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x;
   }
 }
 
@@ -193,7 +314,7 @@ html.maximized-card {
 }
 
 .chart-legend {
-  @extend .list-unstyled;
+  @include list-unstyled ();
   margin: 10px 0;
 
   > li {
@@ -206,10 +327,10 @@ html.maximized-card {
 
 // Comment Box
 .card-comments {
-  background: $gray-100;
+  background-color: $gray-100;
 
   .card-comment {
-    @include clearfix;
+    @include clearfix ();
     border-bottom: 1px solid $gray-200;
     padding: 8px 0;
 
@@ -222,7 +343,8 @@ html.maximized-card {
     }
 
     img {
-      @extend .img-sm;
+      height: $card-img-size;
+      width: $card-img-size;
       float: left;
     }
   }
@@ -257,7 +379,7 @@ html.maximized-card {
   // Todo list element
   > li {
     @include border-radius(2px);
-    background: $gray-100;
+    background-color: $gray-100;
     border-left: 2px solid $gray-200;
     color: $gray-700;
     margin-bottom: 2px;
@@ -267,7 +389,7 @@ html.maximized-card {
       margin-bottom: 0;
     }
 
-    > input[type='checkbox'] {
+    > input[type="checkbox"] {
       margin: 0 10px 0 5px;
     }
 
@@ -285,7 +407,7 @@ html.maximized-card {
 
     // Tools and options box
     .tools {
-      color: theme-color('danger');
+      color: theme-color("danger");
       display: none;
       float: right;
 
@@ -294,7 +416,9 @@ html.maximized-card {
       > .fas,
       > .far,
       > .fab,
-      > .glyphicon,
+      > .fal,
+      > .fad,
+      > .svg-inline--fa,
       > .ion {
         cursor: pointer;
         margin-right: 5px;
@@ -314,7 +438,7 @@ html.maximized-card {
       }
 
       .badge {
-        background: $gray-500 !important;
+        background-color: $gray-500 !important;
       }
     }
   }
@@ -346,16 +470,6 @@ html.maximized-card {
   max-width: 200px;
 }
 
-// Color variants
-@each $name, $color in $theme-colors {
-  @include cards-variant($name, $color);
-}
-
-@each $name, $color in $colors {
-  @include cards-variant($name, $color);
-}
-
-
 // Nav Tabs override
 .card-default {
   .nav-item {
@@ -364,3 +478,68 @@ html.maximized-card {
     }
   }
 }
+
+.dark-mode {
+
+  // Color variants
+  @each $name, $color in $theme-colors-alt {
+    @include cards-variant($name, $color);
+  }
+
+  @each $name, $color in $colors-alt {
+    @include cards-variant($name, $color);
+  }
+
+  .card {
+    background-color: $dark;
+    color: $white;
+
+    .card {
+      background-color: lighten($dark, 5%);
+      color: $white;
+    }
+    .nav.flex-column > li {
+      border-bottom-color: $gray-600;
+    }
+    .card-footer {
+      background-color: rgba($black, .1);
+    }
+    &.card-outline-tabs .card-header a:hover {
+      border-color: $gray-600;
+      border-bottom-color: transparent;
+    }
+    &:not(.card-outline) > .card-header a.active {
+      color: $white;
+    }
+  }
+
+  .card-comments {
+    background-color: lighten($dark, 1.25%);
+    .username {
+      color: $gray-400;
+    }
+    .card-comment {
+      border-bottom-color: lighten($dark, 7.5%);
+    }
+  }
+
+  .todo-list > li {
+    background-color: lighten($dark, 5%);
+    border-color: lighten($dark, 7.5%);
+    color: $white;
+  }
+
+  .todo-list {
+    @each $name, $color in $theme-colors-alt {
+      .#{$name} {
+        border-left-color: $color;
+      }
+    }
+
+    @each $name, $color in $colors-alt {
+      .#{$name} {
+        border-left-color: $color;
+      }
+    }
+  }
+}

build/scss/_carousel.scss

@@ -2,17 +2,21 @@
 // Component: Carousel
 //
 
-.carousel-control {
-  &.left,
-  &.right {
-    background-image: none;
+.carousel-control-custom-icon {
+  .carousel-control-prev & {
+    margin-left: -20px;
+  }
+  .carousel-control-next & {
+    margin-right: 20px;
   }
 
   > .fa,
   > .fas,
   > .far,
   > .fab,
-  > .glyphicon,
+  > .fal,
+  > .fad,
+  > .svg-inline--fa,
   > .ion {
     display: inline-block;
     font-size: 40px;

build/scss/_close.scss

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

build/scss/_colors.scss

@@ -43,7 +43,7 @@
 }
 
 // Backgrund Color Disabled
-[class^='bg-'].disabled {
+[class^="bg-"].disabled {
   opacity: .65;
 }
 
@@ -80,3 +80,65 @@ a.text-muted:hover {
 @each $name, $color in $colors {
   @include accent-variant($name, $color);
 }
+
+// Accent button override fix
+[class*="accent-"] {
+  @each $name, $color in $theme-colors {
+    a.btn-#{$name} {
+      color: color-yiq($color);
+    }
+  }
+}
+
+.dark-mode {
+  .bg-light {
+    background-color: lighten($dark, 7.5%) !important;
+    color: $white !important;
+  }
+  .text-black,
+  .text-dark,
+  .link-black,
+  .link-dark {
+    color: $gray-400;
+  }
+
+  // Background colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include background-variant($name, $color);
+  }
+
+  // Background colors (colors)
+  @each $name, $color in $colors-alt {
+    @include background-variant($name, $color);
+  }
+
+  // Gradient Background colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include background-gradient-variant($name, $color);
+  }
+
+  // Gradient Background colors (colors)
+  @each $name, $color in $colors-alt {
+    @include background-gradient-variant($name, $color);
+  }
+
+  // Accent colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    @include accent-variant($name, $color);
+  }
+
+  [class*="accent-"] {
+    @each $name, $color in $theme-colors-alt {
+      a.btn-#{$name} {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  // Accent colors (colors)
+  @each $name, $color in $colors-alt {
+    @include accent-variant($name, $color);
+  }
+}
+
+//

build/scss/_control-sidebar.scss

@@ -1,7 +1,7 @@
 //
 // Component: Control Sidebar
 //
- 
+
 html.control-sidebar-animate {
   overflow-x: hidden;
 }
@@ -11,7 +11,7 @@ html.control-sidebar-animate {
   position: absolute;
   top: $main-header-height;
   z-index: $zindex-control-sidebar;
-  
+
   &,
   &::before {
     bottom: $main-footer-height;
@@ -22,7 +22,7 @@ html.control-sidebar-animate {
   }
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     position: fixed;
     top: 0;
@@ -46,11 +46,11 @@ body.text-sm {
 }
 
 .control-sidebar-push-slide {
-    .content-wrapper,
-    .main-footer {
-      @include transition(margin-right $transition-speed $transition-fn);
-    }
+  .content-wrapper,
+  .main-footer {
+    @include transition(margin-right $transition-speed $transition-fn);
   }
+}
 
 // Control sidebar open state
 .control-sidebar-open {
@@ -95,17 +95,14 @@ body.text-sm {
 
 // Dark skin
 .control-sidebar-dark {
+  background-color: $sidebar-dark-bg;
+
   &,
   a,
   .nav-link {
     color: $sidebar-dark-color;
   }
 
-  //  Background
-  & {
-    background: $sidebar-dark-bg;
-  }
-
   a:hover {
     color: $sidebar-dark-hover-color;
   }
@@ -171,8 +168,6 @@ body.text-sm {
   color: lighten($sidebar-light-color, 10%);
 
   //  Background
-  & {
-    background: $sidebar-light-bg;
-    border-left: $main-header-bottom-border;
-  }
+  background-color: $sidebar-light-bg;
+  border-left: $main-header-bottom-border;
 }

build/scss/_direct-chat.scss

@@ -1,7 +1,7 @@
 //
 // Component: Direct Chat
 //
- 
+
 .direct-chat {
   .card-body {
     overflow-x: hidden;
@@ -14,6 +14,19 @@
       @include translate(0, 0);
     }
   }
+
+
+  &.timestamp-light {
+    .direct-chat-timestamp {
+      color: lighten(color-yiq($yiq-text-light), 10%);
+    }
+  }
+
+  &.timestamp-dark {
+    .direct-chat-timestamp {
+      color: darken(color-yiq($yiq-text-dark), 20%);
+    }
+  }
 }
 
 .direct-chat-messages {
@@ -29,7 +42,7 @@
 }
 
 .direct-chat-msg {
-  @include clearfix;
+  @include clearfix ();
   margin-bottom: 10px;
 }
 
@@ -43,7 +56,7 @@
     @include border-radius($border-radius-lg);
   }
 
-  background: $direct-chat-default-msg-bg;
+  background-color: $direct-chat-default-msg-bg;
   border: 1px solid $direct-chat-default-msg-border-color;
   color: $direct-chat-default-font-color;
   margin: 5px 0 0 50px;
@@ -55,7 +68,7 @@
   &::before {
     border: solid transparent;
     border-right-color: $direct-chat-default-msg-border-color;
-    content: ' ';
+    content: " ";
     height: 0;
     pointer-events: none;
     position: absolute;
@@ -122,7 +135,7 @@
 
 .direct-chat-contacts {
   @include translate(101%, 0);
-  background: $dark;
+  background-color: $dark;
   bottom: 0;
   color: $white;
   height: 250px;
@@ -133,7 +146,7 @@
 }
 
 .direct-chat-contacts-light {
-  background: $light;
+  background-color: $light;
 
   .contacts-list-name {
     color: $gray-700;
@@ -150,11 +163,11 @@
 
 //Contacts list -- for displaying contacts in direct chat contacts pane
 .contacts-list {
-  @extend .list-unstyled;
+  @include list-unstyled ();
 
   > li {
-    @include clearfix;
-    border-bottom: 1px solid rgba($black, 0.2);
+    @include clearfix ();
+    border-bottom: 1px solid rgba($black, .2);
     margin: 0;
     padding: 10px;
 
@@ -190,7 +203,7 @@
 
 .contacts-list-date {
   color: $gray-400;
-  font-weight: normal;
+  font-weight: 400;
 }
 
 .contacts-list-msg {
@@ -209,3 +222,38 @@
     @include direct-chat-variant($color);
   }
 }
+
+.dark-mode {
+  .direct-chat-text {
+    background-color: lighten($dark, 7.5%);
+    border-color: lighten($dark, 10%);
+    color: $white;
+
+    &::after,
+    &::before {
+      border-right-color: lighten($dark, 10%);
+    }
+  }
+  .direct-chat-timestamp {
+    color: $gray-500;
+  }
+  .right > .direct-chat-text {
+    &::after,
+    &::before {
+      border-right-color: transparent;
+    }
+  }
+
+  // Color variants
+  @each $name, $color in $theme-colors-alt {
+    .direct-chat-#{$name} {
+      @include direct-chat-variant($color);
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .direct-chat-#{$name} {
+      @include direct-chat-variant($color);
+    }
+  }
+}

build/scss/_dropdown.scss

@@ -18,7 +18,7 @@
   }
 
   .dropdown-toggle::after {
-    vertical-align: .2rem
+    vertical-align: .2rem;
   }
 }
 
@@ -57,17 +57,17 @@
 .dropdown-submenu {
   position: relative;
 
-  & > a:after {
-    @include caret-right;
+  > a::after {
+    @include caret-right ();
     float: right;
     margin-left: .5rem;
     margin-top: .5rem;
   }
 
-  & > .dropdown-menu {
+  > .dropdown-menu {
     left: 100%;
-    margin-left: 0px;
-    margin-top: 0px;
+    margin-left: 0;
+    margin-top: 0;
     top: 0;
   }
 }
@@ -85,7 +85,6 @@
 }
 
 
-
 // Dropdown Sizes
 .dropdown-menu-xl {
   max-width: 420px;
@@ -115,39 +114,13 @@
   text-align: center;
 }
 
-// Add fade animation to dropdown menus by appending 
+// Add fade animation to dropdown menus by appending
 // the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
 .open:not(.dropup) > .animated-dropdown-menu {
   @include animation(flipInX .7s both);
   backface-visibility: visible !important;
 }
 
-@keyframes flipInX {
-  0% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transition-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transition-timing-function: ease-in;
-  }
-
-  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    transform: perspective(400px);
-  }
-}
-
 // Fix dropdown menu in navbars
 .navbar-custom-menu > .navbar-nav {
   > li {
@@ -170,7 +143,7 @@
         right: 5%;
         left: auto;
         border: 1px solid #ddd;
-        background: $white;
+        background-color: $white;
       }
     }
   }
@@ -178,14 +151,13 @@
 
 // User Menu
 .navbar-nav > .user-menu {
-  > .nav-link:after {
-    content:none;
+  > .nav-link::after {
+    content: none;
   }
 
   > .dropdown-menu {
     @include border-top-radius(0);
     padding: 0;
-    border-top-width: 0;
     width: 280px;
 
     &,
@@ -206,7 +178,7 @@
         width: 90px;
         border: 3px solid;
         border-color: transparent;
-        border-color: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, .2);
       }
 
       > p {
@@ -224,14 +196,14 @@
 
     // Menu Body
     > .user-body {
-      @include clearfix;
+      @include clearfix ();
       border-bottom: 1px solid $gray-700;
       border-top: 1px solid $gray-300;
       padding: 15px;
 
       a {
         @include media-breakpoint-up(sm) {
-          background: $white !important;
+          background-color: $white !important;
           color: $gray-700 !important;
         }
       }
@@ -239,7 +211,7 @@
 
     // Menu Footer
     > .user-footer {
-      @include clearfix;
+      @include clearfix ();
       background-color: $gray-100;
       padding: 10px;
 
@@ -259,15 +231,65 @@
     @include media-breakpoint-up(sm) {
       float: none;
       line-height: 10px;
-      margin-right: 0;
+      margin-right: .4rem;
       margin-top: -8px;
     }
 
     border-radius: 50%;
     float: left;
-    height: 25px;
+    height: $sidebar-user-image-width;
     margin-right: 10px;
     margin-top: -2px;
-    width: 25px;
+    width: $sidebar-user-image-width;
+  }
+}
+
+.dark-mode {
+  .dropdown-menu {
+    background-color: $dark;
+    color: $white;
+  }
+  .dropdown-item {
+    color: $white;
+
+    &:focus,
+    &:hover {
+      background-color: lighten($dark, 5%);
+    }
+  }
+  .dropdown-divider {
+    border-color: $gray-600;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu {
+    > .user-footer {
+      background-color: lighten($dark, 2.5%);
+      color: $white;
+
+      .btn-default {
+        color: $white;
+
+        &:hover,
+        &:focus {
+          background-color: lighten($dark, 5%);
+          color: $gray-300;
+        }
+        &:focus {
+          background-color: lighten($dark, 7.5%);
+        }
+      }
+    }
+    > .user-body {
+      border-color: $gray-600;
+    }
+    > .user-body a {
+      background-color: transparent !important;
+      color: $white !important;
+
+      &:hover,
+      &:focus {
+        color: $gray-400 !important;
+      }
+    }
   }
 }

build/scss/_elevation.scss

@@ -6,22 +6,9 @@
   box-shadow: none !important;
 }
 
-.elevation-1 {
-  box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24) !important;
-}
-
-.elevation-2 {
-  box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23) !important;
-}
-
-.elevation-3 {
-  box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23) !important;
-}
-
-.elevation-4 {
-  box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22) !important;
-}
-
-.elevation-5 {
-  box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22) !important;
+// Background colors (colors)
+@each $name, $value in $elevations {
+  .elevation-#{$name} {
+    box-shadow: $value !important;
+  }
 }

build/scss/_forms.scss

@@ -1,7 +1,7 @@
 //
 // Component: Forms
 //
- 
+
 .form-group {
   &.has-icon {
     position: relative;
@@ -40,19 +40,23 @@
   &.fas,
   &.far,
   &.fab,
-  &.glyphicon,
+  &.fal,
+  &.fad,
+  &.svg-inline--fa,
   &.ion {
     line-height: $input-height;
   }
 }
 
-.input-lg  + .form-control-feedback,
+.input-lg + .form-control-feedback,
 .input-group-lg + .form-control-feedback {
   &.fa,
   &.fas,
   &.far,
   &.fab,
-  &.glyphicon,
+  &.fal,
+  &.fad,
+  &.svg-inline--fa,
   &.ion {
     line-height: $input-height-lg;
   }
@@ -64,20 +68,24 @@
     &.fas,
     &.far,
     &.fab,
-    &.glyphicon,
+    &.fal,
+    &.fad,
+    &.svg-inline--fa,
     &.ion {
       line-height: $input-height-lg;
     }
   }
 }
 
-.input-sm  + .form-control-feedback,
+.input-sm + .form-control-feedback,
 .input-group-sm + .form-control-feedback {
   &.fa,
   &.fas,
   &.far,
   &.fab,
-  &.glyphicon,
+  &.fal,
+  &.fad,
+  &.svg-inline--fa,
   &.ion {
     line-height: $input-height-sm;
   }
@@ -89,20 +97,22 @@
     &.fas,
     &.far,
     &.fab,
-    &.glyphicon,
+    &.fal,
+    &.fad,
+    &.svg-inline--fa,
     &.ion {
       line-height: $input-height-sm;
     }
   }
 }
 
-label:not(.form-check-label, .custom-file-label) {
+label:not(.form-check-label):not(.custom-file-label) {
   font-weight: $font-weight-bold;
 }
 
 .warning-feedback {
   @include font-size($form-feedback-font-size);
-  color: theme-color('warning');
+  color: theme-color("warning");
   display: none;
   margin-top: $form-feedback-margin-top;
   width: 100%;
@@ -111,8 +121,8 @@ label:not(.form-check-label, .custom-file-label) {
 .warning-tooltip {
   @include border-radius($form-feedback-tooltip-border-radius);
   @include font-size($form-feedback-tooltip-font-size);
-  background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
-  color: color-yiq(theme-color('warning'));
+  background-color: rgba(theme-color("warning"), $form-feedback-tooltip-opacity);
+  color: color-yiq(theme-color("warning"));
   display: none;
   line-height: $form-feedback-tooltip-line-height;
   margin-top: .1rem;
@@ -125,7 +135,7 @@ label:not(.form-check-label, .custom-file-label) {
 
 .form-control {
   &.is-warning {
-    border-color: theme-color('warning');
+    border-color: theme-color("warning");
 
     @if $enable-validation-icons {
       // padding-right: $input-height-inner;
@@ -136,8 +146,8 @@ label:not(.form-check-label, .custom-file-label) {
     }
 
     &:focus {
-      border-color: theme-color('warning');
-      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      border-color: theme-color("warning");
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
     }
 
     ~ .warning-feedback,
@@ -159,7 +169,7 @@ textarea.form-control {
 
 .custom-select {
   &.is-warning {
-    border-color: theme-color('warning');
+    border-color: theme-color("warning");
 
     @if $enable-validation-icons {
       // padding-right: $custom-select-feedback-icon-padding-right;
@@ -167,8 +177,8 @@ textarea.form-control {
     }
 
     &:focus {
-      border-color: theme-color('warning');
-      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      border-color: theme-color("warning");
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
     }
 
     ~ .warning-feedback,
@@ -191,7 +201,7 @@ textarea.form-control {
 .form-check-input {
   &.is-warning {
     ~ .form-check-label {
-      color: theme-color('warning');
+      color: theme-color("warning");
     }
 
     ~ .warning-feedback,
@@ -203,10 +213,10 @@ textarea.form-control {
 
 .custom-control-input.is-warning {
   ~ .custom-control-label {
-    color: theme-color('warning');
+    color: theme-color("warning");
 
     &::before {
-      border-color: theme-color('warning');
+      border-color: theme-color("warning");
     }
   }
 
@@ -217,18 +227,18 @@ textarea.form-control {
 
   &:checked {
     ~ .custom-control-label::before {
-      @include gradient-bg(lighten(theme-color('warning'), 10%));
-      border-color: lighten(theme-color('warning'), 10%);
+      @include gradient-bg(lighten(theme-color("warning"), 10%));
+      border-color: lighten(theme-color("warning"), 10%);
     }
   }
 
   &:focus {
     ~ .custom-control-label::before {
-      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
     }
 
     &:not(:checked) ~ .custom-control-label::before {
-      border-color: theme-color('warning');
+      border-color: theme-color("warning");
     }
   }
 }
@@ -237,7 +247,7 @@ textarea.form-control {
 .custom-file-input {
   &.is-warning {
     ~ .custom-file-label {
-      border-color: theme-color('warning');
+      border-color: theme-color("warning");
     }
 
     ~ .warning-feedback,
@@ -247,13 +257,39 @@ textarea.form-control {
 
     &:focus {
       ~ .custom-file-label {
-        border-color: theme-color('warning');
-        box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+        border-color: theme-color("warning");
+        box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
       }
     }
   }
 }
 
+// body.text-sm support
+body.text-sm {
+  .input-group-text {
+    font-size: $font-size-sm;
+  }
+}
+
+// custom .form-control styles
+.form-control,
+.custom-select {
+  &.form-control-border {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    box-shadow: inherit;
+
+    &.border-width-2 {
+      border-bottom-width: 2px;
+    }
+    &.border-width-3 {
+      border-bottom-width: 3px;
+    }
+  }
+}
+
 // custom switch color variations
 .custom-switch {
   @each $name, $color in $theme-colors {
@@ -275,3 +311,121 @@ textarea.form-control {
     @include custom-range-variant($name, $color);
   }
 }
+
+// custom control input variations
+@each $name, $color in $theme-colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include custom-control-input-variant($name, $color);
+}
+
+.custom-control-input-outline {
+  ~ .custom-control-label::before {
+    background-color: transparent !important;
+    box-shadow: none;
+  }
+  &:checked ~ .custom-control-label::before {
+    @include gradient-bg(transparent);
+  }
+}
+
+.navbar-dark {
+  .btn-navbar,
+  .form-control-navbar {
+    background-color: lighten($sidebar-dark-bg, 5%);
+    border: 1px solid lighten($sidebar-dark-bg, 15%);
+    color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
+  }
+  .btn-navbar {
+    &:hover {
+      background-color: lighten($sidebar-dark-bg, 7.5%);
+    }
+    &:focus {
+      background-color: lighten($sidebar-dark-bg, 10%);
+    }
+  }
+
+  .form-control-navbar + .input-group-prepend,
+  .form-control-navbar + .input-group-append {
+    > .btn-navbar {
+      background-color: lighten($sidebar-dark-bg, 5%);
+      color: $white;
+      border: 1px solid lighten($sidebar-dark-bg, 15%);
+      border-left: none;
+    }
+  }
+}
+
+.dark-mode {
+  .form-control:not(.form-control-navbar):not(.form-control-sidebar),
+  .custom-select,
+  .custom-file-label,
+  .custom-file-label::after,
+  .custom-control-label::before,
+  .input-group-text {
+    background-color: $dark;
+    color: $white;
+  }
+  .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus),
+  .custom-file-label,
+  .custom-file-label::after {
+    border-color: $gray-600;
+  }
+  select {
+    background-color: $dark;
+    color: $white;
+    border-color: $gray-600;
+  }
+
+  .input-group-text {
+    border-color: $gray-600;
+  }
+
+  .custom-control-input:disabled ~ .custom-control-label::before,
+  .custom-control-input[disabled] ~ .custom-control-label::before {
+    background-color: lighten($dark, 5%);
+    border-color: $gray-600;
+    color: $white;
+  }
+
+  .custom-range {
+    &::-webkit-slider-runnable-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-moz-range-track {
+      background-color: lighten($dark, 7.5%);
+    }
+    &::-ms-track {
+      background-color: lighten($dark, 7.5%);
+    }
+
+    @each $name, $color in $theme-colors-alt {
+      @include custom-range-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include custom-range-variant($name, $color);
+    }
+  }
+
+  // custom switch color variations
+  .custom-switch {
+    @each $name, $color in $theme-colors-alt {
+      @include custom-switch-variant($name, $color);
+    }
+
+    @each $name, $color in $colors-alt {
+      @include custom-switch-variant($name, $color);
+    }
+  }
+
+  @each $name, $color in $theme-colors-alt {
+    @include custom-control-input-variant($name, $color);
+  }
+
+  @each $name, $color in $colors-alt {
+    @include custom-control-input-variant($name, $color);
+  }
+}

build/scss/_info-box.scss

@@ -1,17 +1,18 @@
 //
 // Component: Info Box
 //
- 
+
 .info-box {
-  @extend .d-flex;
-  @extend .mb-3;
   @include box-shadow($card-shadow);
   @include border-radius($border-radius);
 
-  background: $white;
+  background-color: $white;
+  display: flex;
+  margin-bottom: map-get($spacers, 3);
   min-height: 80px;
   padding: .5rem;
   position: relative;
+  width: 100%;
 
   .progress {
     background-color: rgba($black, .125);
@@ -24,16 +25,14 @@
   }
 
   .info-box-icon {
-    @extend .d-flex;
-    @extend .align-items-center;
-    @extend .justify-content-center;
-
     @if $enable-rounded {
       border-radius: $border-radius;
     }
 
-    display: block;
+    align-items: center;
+    display: flex;
     font-size: 1.875rem;
+    justify-content: center;
     text-align: center;
     width: 70px;
 
@@ -43,12 +42,17 @@
   }
 
   .info-box-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    line-height: 1.8;
     flex: 1;
-    padding: 5px 10px;
+    padding: 0 10px;
   }
 
   .info-box-number {
     display: block;
+    margin-top: .25rem;
     font-weight: $font-weight-bold;
   }
 
@@ -140,3 +144,22 @@
     }
   }
 }
+
+.dark-mode {
+  .info-box {
+    background-color: $dark;
+    color: $white;
+    @each $name, $color in $theme-colors-alt {
+      .info-box {
+        .bg-#{$name},
+        .bg-gradient-#{$name} {
+          color: color-yiq($color);
+
+          .progress-bar {
+            background-color: color-yiq($color);
+          }
+        }
+      }
+    }
+  }
+}

build/scss/_layout.scss

@@ -2,7 +2,7 @@
 // Core: Layout
 //
 
-html {
+html.scroll-smooth {
   scroll-behavior: smooth;
 }
 
@@ -15,7 +15,7 @@ body,
 .wrapper {
   position: relative;
 
-  & .content-wrapper {
+  .content-wrapper {
     min-height: calc(100vh - #{$main-header-height} - #{$main-footer-height});
   }
 
@@ -28,11 +28,20 @@ body,
       max-width: $boxed-layout-max-width;
     }
 
-    & .main-sidebar {
+    .main-sidebar {
       left: inherit;
     }
   }
 
+  @supports not (-webkit-touch-callout: none) {
+    .layout-fixed & .sidebar {
+      height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+    }
+    .layout-fixed.text-sm & .sidebar {
+      height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
+    }
+  }
+
   .layout-navbar-fixed.layout-fixed & {
     .control-sidebar {
       top: $main-header-height;
@@ -61,7 +70,9 @@ body,
     }
   }
 
-  .layout-navbar-fixed.sidebar-collapse & {
+  .layout-navbar-fixed.sidebar-mini.sidebar-collapse &,
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse &,
+  .layout-navbar-fixed.sidebar-mini-xs.sidebar-collapse & {
     .brand-link {
       height: $main-header-height;
       width: $sidebar-mini-width;
@@ -72,12 +83,34 @@ body,
     }
   }
 
-  .layout-navbar-fixed.sidebar-collapse.text-sm & {
+  .layout-navbar-fixed.sidebar-mini.sidebar-collapse.text-sm &,
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse.text-sm &,
+  .layout-navbar-fixed.sidebar-mini-xs.sidebar-collapse.text-sm & {
     .brand-link {
       height: $main-header-height-sm;
     }
   }
 
+  body:not(.layout-fixed).layout-navbar-fixed & {
+    .main-sidebar {
+      // margin-top: calc(#{$main-header-height} / -1);
+
+      // .sidebar {
+      //   margin-top: $main-header-height;
+      // }
+    }
+  }
+
+  body:not(.layout-fixed).layout-navbar-fixed.text-sm & {
+    .main-sidebar {
+      margin-top: calc(#{$main-header-height-sm} / -1);
+
+      .sidebar {
+        margin-top: $main-header-height-sm;
+      }
+    }
+  }
+
   .layout-navbar-fixed & {
     .control-sidebar {
       top: 0;
@@ -269,6 +302,26 @@ body,
         }
       }
 
+      body:not(.layout-fixed).layout#{$infix}-navbar-fixed & {
+        // .main-sidebar {
+        //   margin-top: calc(#{$main-header-height} / -1);
+
+        //   .sidebar {
+        //     margin-top: $main-header-height;
+        //   }
+        // }
+      }
+
+      body:not(.layout-fixed).layout#{$infix}-navbar-fixed.text-sm & {
+        .main-sidebar {
+          margin-top: calc(#{$main-header-height-sm} / -1);
+
+          .sidebar {
+            margin-top: $main-header-height-sm;
+          }
+        }
+      }
+
       .layout#{$infix}-navbar-not-fixed & {
         .brand-link {
           position: static;
@@ -296,9 +349,7 @@ body,
     .control-sidebar {
       bottom: 0;
     }
-  }
 
-  .layout-footer-fixed & {
     .main-footer {
       bottom: 0;
       left: 0;
@@ -325,9 +376,7 @@ body,
         .control-sidebar {
           bottom: 0;
         }
-      }
 
-      .layout#{$infix}-footer-fixed & {
         .main-footer {
           bottom: 0;
           left: 0;
@@ -337,7 +386,7 @@ body,
         }
 
         .content-wrapper {
-          margin-bottom: $main-footer-height;
+          padding-bottom: $main-footer-height;
         }
       }
 
@@ -352,48 +401,32 @@ body,
   .layout-top-nav & {
     margin-left: 0;
 
-    & .text-sm {
+    .main-header {
       .brand-image {
         margin-top: -.5rem;
+        margin-right: .2rem;
+        height: 33px;
       }
     }
 
-    & .main-sidebar {
+    .main-sidebar {
       bottom: inherit;
       height: inherit;
     }
 
-    .brand-image {
-      height: 33px;
-    }
-
-    & .main-sidebar {
-      display: none;
-    }
-
-    & .content-wrapper,
-    & .main-header,
-    & .main-footer {
+    .content-wrapper,
+    .main-header,
+    .main-footer {
       margin-left: 0;
     }
   }
 }
 
-.content-wrapper,
-.main-footer,
-.main-header {
-  @include media-breakpoint-up(sm) {
-    @include transition(margin-left $transition-speed $transition-fn);
 
-    margin-left: $sidebar-width;
-    z-index: 3000;
-
-    .sidebar-collapse & {
-      margin-left: 0;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
+body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
     &,
     &::before {
       margin-left: 0;
@@ -401,8 +434,69 @@ body,
   }
 }
 
+body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: 0;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-left: 0;
+    }
+  }
+}
+
+.sidebar-mini-md {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: $sidebar-mini-width;
+      }
+    }
+    @include media-breakpoint-down(md) {
+      margin-left: $sidebar-mini-width;
+    }
+    @include media-breakpoint-down(sm) {
+      margin-left: 0;
+    }
+  }
+}
+
+.sidebar-mini-xs {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: $sidebar-mini-width;
+      }
+    }
+    @include media-breakpoint-down(md) {
+      margin-left: $sidebar-mini-width;
+    }
+  }
+}
+
 .content-wrapper {
-  background: $main-bg;
+  background-color: $main-bg;
 
   > .content {
     padding: $content-padding-y $content-padding-x;
@@ -417,6 +511,13 @@ body,
     width: $sidebar-width;
   }
 
+  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) & {
+    &,
+    &::before {
+      box-shadow: none !important;
+    }
+  }
+
   .sidebar-collapse & {
     &,
     &::before {
@@ -444,12 +545,16 @@ body,
   }
 }
 
-:not(.layout-fixed) {
+body:not(.layout-fixed) {
   .main-sidebar {
     height: inherit;
     min-height: 100%;
     position: absolute;
     top: 0;
+
+    .sidebar {
+      overflow-y: auto;
+    }
   }
 }
 
@@ -461,7 +566,6 @@ body,
   .main-sidebar {
     bottom: 0;
     float: none;
-    height: 100vh;
     left: 0;
     position: fixed;
     top: 0;
@@ -470,18 +574,27 @@ body,
   .control-sidebar {
     bottom: 0;
     float: none;
-    height: 100vh;
     position: fixed;
     top: 0;
 
     .control-sidebar-content {
       height: calc(100vh - #{$main-header-height});
+      overflow-y: auto;
+      @include scrollbar-width-thin();
+    }
+  }
+}
+
+@supports (-webkit-touch-callout: none) {
+  .layout-fixed {
+    .main-sidebar {
+      height: inherit;
     }
   }
 }
 
 .main-footer {
-  background: $main-footer-bg;
+  background-color: $main-footer-bg;
   border-top: $main-footer-border-top;
   color: lighten($gray-700, 25%);
   padding: $main-footer-padding;
@@ -509,7 +622,7 @@ body,
   }
 
   .breadcrumb {
-    background: transparent;
+    background-color: transparent;
     line-height: 1.8rem;
     margin-bottom: 0;
     padding: 0;
@@ -521,7 +634,6 @@ body,
 }
 
 
-
 .hold-transition {
   .content-wrapper,
   .main-header,
@@ -531,5 +643,62 @@ body,
   .control-sidebar *,
   .main-footer {
     transition: none !important;
+    animation-duration: 0s !important;
+  }
+}
+
+.dark-mode {
+  background-color: $dark-main-bg;
+  color: $white;
+
+  .wrapper {
+    .layout-navbar-fixed & {
+      @each $name, $color in $theme-colors-alt {
+        .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;
+        }
+      }
+    }
+
+    @each $breakpoint in map-keys($grid-breakpoints) {
+      @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .layout#{$infix}-navbar-fixed & {
+          @each $name, $color in $theme-colors-alt {
+            .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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .breadcrumb-item {
+    &.active,
+    + .breadcrumb-item::before {
+      color: $gray-500;
+    }
+  }
+  .main-footer {
+    background-color: $dark;
+    border-color: lighten($dark, 10%);
+  }
+  .content-wrapper {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+
+    .content-header {
+      color: $white;
+    }
   }
 }

build/scss/_main-header.scss

@@ -1,7 +1,7 @@
 //
 // Component: Main Header
 //
- 
+
 .main-header {
   border-bottom: $main-header-bottom-border;
   z-index: $zindex-main-header;
@@ -21,7 +21,9 @@
       > .fas,
       > .far,
       > .fab,
-      > .glyphicon,
+      > .fal,
+      > .fad,
+      > .svg-inline--fa,
       > .ion {
         font-size: $font-size-sm;
       }
@@ -34,7 +36,7 @@
       margin: 0;
     }
 
-    &[class*='-right'] {
+    &[class*="-right"] {
       .dropdown-menu {
         left: auto;
         margin-top: -3px;
@@ -47,6 +49,11 @@
       }
     }
   }
+
+  &.dropdown-legacy .dropdown-menu {
+    top: $nav-link-height + $navbar-padding-y;
+    margin-top: 0;
+  }
 }
 
 // Add this class to images within a nav-link
@@ -73,7 +80,7 @@
 .form-control-navbar {
   border-right-width: 0;
 
-  & + .input-group-append {
+  + .input-group-append {
     margin-left: 0;
   }
 }
@@ -87,20 +94,23 @@
   .form-control-navbar,
   .btn-navbar {
     background-color: $main-header-dark-form-control-bg;
-    border: $main-header-dark-form-control-border;
+    border-color: $main-header-dark-form-control-border-color;
   }
 
   .form-control-navbar {
-    &::placeholder,
+    &::placeholder {
+      color: $main-header-dark-placeholder-color;
+    }
+
     + .input-group-append > .btn-navbar {
       color: $main-header-dark-placeholder-color;
     }
 
     &:focus {
       &,
-      & + .input-group-append .btn-navbar {
+      + .input-group-append .btn-navbar {
         background-color: $main-header-dark-form-control-focused-bg;
-        border: $main-header-dark-form-control-focused-border !important;
+        border-color: $main-header-dark-form-control-focused-border-color !important;
         color: $main-header-dark-form-control-focused-color;
       }
     }
@@ -111,25 +121,59 @@
   .form-control-navbar,
   .btn-navbar {
     background-color: $main-header-light-form-control-bg;
-    border: $main-header-light-form-control-border;
+    border-color: $main-header-light-form-control-border-color;
   }
 
   .form-control-navbar {
-    &:ms-placeholder,
-    &:moz-placeholder,
-    &::moz-placeholder,
-    &::placeholder,
+    &::placeholder {
+      color: $main-header-light-placeholder-color;
+    }
+
     + .input-group-append > .btn-navbar {
       color: $main-header-light-placeholder-color;
     }
 
     &:focus {
       &,
-      & + .input-group-append .btn-navbar {
+      + .input-group-append .btn-navbar {
         background-color: $main-header-light-form-control-focused-bg;
-        border: $main-header-light-form-control-focused-border !important;
+        border-color: $main-header-light-form-control-focused-border-color !important;
         color: $main-header-light-form-control-focused-color;
       }
     }
   }
+
+  .navbar-search-block {
+    .form-control-navbar {
+      &:focus {
+        &,
+        + .input-group-append .btn-navbar {
+          color: $main-header-light-placeholder-color;
+        }
+      }
+    }
+  }
+}
+
+// Navbar Search
+.navbar-search-block {
+  position: absolute;
+  padding: 0 $nav-link-padding-x;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: none;
+  justify-content: center;
+  flex-direction: column;
+  background-color: initial;
+
+  &.navbar-search-open {
+    display: flex;
+  }
+
+  .input-group {
+    width: 100%;
+  }
 }

build/scss/_main-sidebar.scss

@@ -6,26 +6,37 @@
   height: 100vh;
   overflow-y: hidden;
   z-index: $zindex-main-sidebar;
+
+  // Remove Firefox Focusring
+  a {
+    &:-moz-focusring {
+      border: 0;
+      outline: none;
+    }
+  }
+
 }
 
 .sidebar {
-  height: calc(100% - 4rem);
-  overflow-y: auto;
+  height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  overflow-x: none;
+  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();
 }
 
 // Sidebar user panel
 .user-panel {
   position: relative;
 
-  [class*='sidebar-dark'] & {
+  [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 12%);
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
   }
 
@@ -89,7 +100,10 @@
     > .nav-treeview {
       display: block;
     }
+  }
 
+  .menu-open,
+  .menu-is-opening {
     > .nav-link {
       i.right {
         @include rotate(-90deg);
@@ -102,6 +116,7 @@
     margin-bottom: 0;
 
     .nav-icon {
+      margin-left: .05rem;
       font-size: 1.2rem;
       margin-right: .2rem;
       text-align: center;
@@ -111,7 +126,9 @@
       &.fas,
       &.far,
       &.fab,
-      &.glyphicon,
+      &.fal,
+      &.fad,
+      &.svg-inline--fa,
       &.ion {
         font-size: 1.1rem;
       }
@@ -141,21 +158,44 @@
     .nav-treeview {
       transition: padding $transition-speed $transition-fn;
       padding-left: 1rem;
+
+      .text-sm & {
+        padding-left: .5rem;
+      }
+    }
+
+    &.nav-legacy {
+      .nav-treeview {
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+
+          .text-sm & {
+            padding-left: 1rem;
+            margin-left: -.5rem;
+          }
+        }
+      }
     }
   }
 
   .nav-header {
     font-size: .9rem;
-    padding: $nav-link-padding-y;
-
-    &:not(:first-of-type) {
-      padding: 1.7rem 1rem .5rem;
-    }
+    padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
   }
 
   .nav-link p {
-    display: inline-block;
+    display: inline;
     margin: 0;
+    white-space: normal;
+  }
+}
+
+.sidebar-is-opening .nav-sidebar {
+  .nav-link p {
+    animation-name: fadeIn;
+    animation-duration: $transition-speed;
+    animation-fill-mode: both;
   }
 }
 
@@ -166,7 +206,7 @@
     }
   }
 
-  background-color: rgba($black, 0.1);
+  background-color: rgba($black, .1);
   bottom: 0;
   display: none;
   left: 0;
@@ -176,7 +216,7 @@
   z-index: $zindex-main-sidebar - 1;
 }
 
-[class*='sidebar-light-'] {
+[class*="sidebar-light-"] {
   // Sidebar background color
   background-color: $sidebar-light-bg;
 
@@ -187,13 +227,13 @@
     }
 
     .status {
-      background: $sidebar-light-hover-bg;
+      background-color: $sidebar-light-hover-bg;
       color: $sidebar-light-color;
 
       &:hover,
       &:focus,
       &:active {
-        background: darken($sidebar-light-hover-bg, 3%);
+        background-color: darken($sidebar-light-hover-bg, 3%);
         color: $sidebar-light-hover-color;
       }
     }
@@ -230,19 +270,19 @@
       color: $sidebar-light-active-color;
 
       @if $enable-shadows {
-        @extend .elevation-1;
+        box-shadow: map-get($elevations, 1);
       }
     }
 
     // First Level Submenu
     > .nav-treeview {
-      background: $sidebar-light-submenu-bg;
+      background-color: $sidebar-light-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    background: inherit;
+    background-color: inherit;
     color: darken($sidebar-light-color, 5%);
   }
 
@@ -262,6 +302,12 @@
     > .nav-item {
       > .nav-link {
         color: $sidebar-light-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-light-submenu-hover-bg;
+          color: $sidebar-light-submenu-hover-color;
+        }
       }
 
       > .nav-link.active {
@@ -282,7 +328,7 @@
   .nav-flat {
     .nav-item {
       .nav-treeview {
-        .nav-treeview {
+        .nav-treeview {
           border-color: $sidebar-light-submenu-active-bg;
         }
 
@@ -299,7 +345,7 @@
   }
 }
 
-[class*='sidebar-dark-'] {
+[class*="sidebar-dark-"] {
   // Sidebar background color
   background-color: $sidebar-dark-bg;
 
@@ -310,13 +356,13 @@
     }
 
     .status {
-      background: $sidebar-dark-hover-bg;
+      background-color: $sidebar-dark-hover-bg;
       color: $sidebar-dark-color;
 
       &:hover,
       &:focus,
       &:active {
-        background: darken($sidebar-dark-hover-bg, 3%);
+        background-color: darken($sidebar-dark-hover-bg, 3%);
         color: $sidebar-dark-hover-color;
       }
     }
@@ -344,7 +390,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;
     }
@@ -353,19 +399,19 @@
       color: $sidebar-dark-hover-color;
 
       @if $enable-shadows {
-        @extend .elevation-1;
+        box-shadow: map-get($elevations, 1);
       }
     }
 
     // First Level Submenu
     > .nav-treeview {
-      background: $sidebar-dark-submenu-bg;
+      background-color: $sidebar-dark-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    background: inherit; //darken($sidebar-dark-bg, 3%);
+    background-color: inherit; //darken($sidebar-dark-bg, 3%);
     color: lighten($sidebar-dark-color, 5%);
   }
 
@@ -409,7 +455,7 @@
   .nav-flat {
     .nav-item {
       .nav-treeview {
-        .nav-treeview {
+        .nav-treeview {
           border-color: $sidebar-dark-submenu-active-bg;
         }
 
@@ -430,35 +476,171 @@
 @each $name, $color in $theme-colors {
   .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include sidebar-color($color)
+    @include sidebar-color($color);
   }
 }
 
 @each $name, $color in $colors {
   .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include sidebar-color($color)
+    @include sidebar-color($color);
+  }
+}
+
+.sidebar-mini .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini .main-sidebar.sidebar-focused,
+.sidebar-mini-md .main-sidebar.sidebar-focused,
+.sidebar-mini-xs .main-sidebar.sidebar-focused {
+  .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
+    padding-left: 1rem;
+    margin-left: -.5rem;
   }
 }
 
 // Nav Flat
 .nav-flat {
-  margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
-
-  &.nav-child-indent {
-    .nav-treeview {
-      padding-left: 0 !important;
-
-      .nav-treeview {
-        border-left: .2rem solid;
-      }
-    }
-  }
+  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
 
   .nav-item {
     > .nav-link {
       border-radius: 0;
       margin-bottom: 0;
+
+      > .nav-icon {
+        margin-left: .55rem;
+      }
+    }
+  }
+
+  &:not(.nav-child-indent) {
+    .nav-treeview {
+      .nav-item {
+        > .nav-link {
+          > .nav-icon {
+            margin-left: .4rem;
+          }
+        }
+      }
+    }
+  }
+
+  &.nav-child-indent {
+    .nav-treeview {
+      padding-left: 0;
+
+      .nav-icon {
+        margin-left: .85rem;
+      }
+
+      .nav-treeview {
+        border-left: .2rem solid;
+
+        .nav-icon {
+          margin-left: 1.15rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: 1.45rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: 1.75rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: 2.05rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-collapse &.nav-child-indent {
+    .nav-treeview {
+      .nav-icon {
+        margin-left: .55rem;
+      }
+
+      .nav-link {
+        padding-left: calc(#{$nav-link-padding-x} - .2rem);
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: .35rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: .15rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: -.15rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: -.35rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-xs .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md .main-sidebar.sidebar-focused &,
+  .sidebar-mini-xs .main-sidebar.sidebar-focused & {
+    &.nav-compact.nav-sidebar .nav-treeview {
+      .nav-icon {
+        margin-left: .4rem;
+      }
+    }
+
+    &.nav-sidebar.nav-child-indent .nav-treeview {
+      .nav-icon {
+        margin-left: .85rem;
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: 1.15rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: 1.45rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: 1.75rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: 2.05rem;
+              }
+            }
+          }
+        }
+      }
     }
   }
 
@@ -472,22 +654,10 @@
     }
   }
 
-  .sidebar-collapse & {
-    .nav-icon {
-      margin-left: .5rem;
-    }
-
-    .nav-treeview {
-      .nav-icon {
-        margin-left: .3rem;
-      }
-    }
-  }
-
   &.nav-sidebar > .nav-item {
     .nav-treeview,
     > .nav-treeview {
-      background: rgba($white, .05);
+      background-color: rgba($white, .05);
 
       .nav-item {
         > .nav-link {
@@ -498,34 +668,247 @@
   }
 }
 
+.nav-legacy {
+  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+
+  &.nav-sidebar .nav-item {
+    > .nav-link {
+      border-radius: 0;
+      margin-bottom: 0;
+
+      > .nav-icon {
+        margin-left: .55rem;
+
+        .text-sm & {
+          margin-left: .75rem;
+        }
+      }
+    }
+  }
+
+  &.nav-sidebar > .nav-item {
+    > .nav-link {
+      &.active {
+        background-color: inherit;
+        border-left: 3px solid transparent;
+        box-shadow: none;
+
+        > .nav-icon {
+          margin-left: calc(.55rem - 3px);
+
+          .text-sm & {
+            margin-left: calc(.75rem - 3px);
+          }
+        }
+      }
+    }
+  }
+
+  .text-sm &.nav-sidebar.nav-flat .nav-treeview {
+    .nav-item {
+      > .nav-link {
+        > .nav-icon {
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
+  }
+
+  .sidebar-mini &,
+  .sidebar-mini-md &,
+  .sidebar-mini-xs & {
+    > .nav-item .nav-link {
+      .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;
+
+      .nav-treeview {
+        padding-left: 1rem;
+        margin-left: -.5rem;
+      }
+    }
+  }
+
+  .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;
+        }
+      }
+    }
+
+    &.nav-child-indent {
+      .nav-treeview {
+        .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;
+      }
+
+      &.active {
+        > .nav-icon{
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
+  }
+
+  [class*="sidebar-dark"] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background-color: rgba($white, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-dark-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        color: $sidebar-dark-active-color;
+      }
+    }
+  }
+
+  [class*="sidebar-light"] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background-color: rgba($black, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-light-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        color: $sidebar-light-active-color;
+      }
+    }
+  }
+}
+
+
+.nav-collapse-hide-child {
+  .menu-open > .nav-treeview {
+    max-height: min-content;
+    animation-name: fadeIn;
+    animation-duration: $transition-speed;
+    animation-fill-mode: both;
+  }
+
+  .sidebar-collapse & {
+    .menu-open > .nav-treeview {
+      max-height: 0;
+      animation-name: fadeOut;
+      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;
+    }
+  }
+}
 
 // Nav Compact
 .nav-compact {
   .nav-link,
   .nav-header {
-    padding: ($nav-link-padding-y / 2) ($nav-link-padding-x / 2);
+    padding-top: ($nav-link-padding-y / 2);
+    padding-bottom: ($nav-link-padding-y / 2);
   }
 
   .nav-header:not(:first-of-type) {
-    padding: ($nav-link-padding-y * 1.5) ($nav-link-padding-x / 2) ($nav-link-padding-y / 2);
+    padding-top: ($nav-link-padding-y * 1.5);
+    padding-bottom: ($nav-link-padding-y / 2);
   }
 
   .nav-link > .right,
   .nav-link > p > .right {
-    top: .5rem;
-    right: .5rem;
+    top: .465rem;
+  }
 
-    &:nth-child(2) {
-      right: 1.6rem;
+  .text-sm & {
+    .nav-link > .right,
+    .nav-link > p > .right {
+      top: .7rem;
     }
   }
 }
 
 // Sidebar Form Control
-[class*='sidebar-dark'] {
+[class*="sidebar-dark"] {
   .form-control-sidebar,
   .btn-sidebar {
-    background: lighten($sidebar-dark-bg, 5%);
+    background-color: lighten($sidebar-dark-bg, 5%);
     border: 1px solid lighten($sidebar-dark-bg, 15%);
     color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
   }
@@ -536,18 +919,36 @@
   }
 
   .btn-sidebar:hover {
-    background: lighten($sidebar-dark-bg, 7.5%);
+    background-color: lighten($sidebar-dark-bg, 7.5%);
   }
 
   .btn-sidebar:focus {
-    background: lighten($sidebar-dark-bg, 10%);
+    background-color: lighten($sidebar-dark-bg, 10%);
+  }
+
+  .list-group-item {
+    background-color: lighten($sidebar-dark-bg, 7.5%);
+    border-color: lighten($sidebar-dark-bg, 15%);
+    color: $sidebar-dark-color;
+
+    &:hover {
+      background-color: lighten($sidebar-dark-bg, 10%);
+    }
+
+    &:focus {
+      background-color: lighten($sidebar-dark-bg, 12.5%);
+    }
+
+    .search-path {
+      color: $gray-500;
+    }
   }
 }
 
-[class*='sidebar-light'] {
+[class*="sidebar-light"] {
   .form-control-sidebar,
   .btn-sidebar {
-    background: darken($sidebar-light-bg, 5%);
+    background-color: darken($sidebar-light-bg, 5%);
     border: 1px solid darken($sidebar-light-bg, 15%);
     color: color-yiq(darken($sidebar-light-bg, 5%));
   }
@@ -558,10 +959,218 @@
   }
 
   .btn-sidebar:hover {
-    background: darken($sidebar-light-bg, 7.5%);
+    background-color: darken($sidebar-light-bg, 7.5%);
   }
 
   .btn-sidebar:focus {
-    background: darken($sidebar-light-bg, 10%);
+    background-color: darken($sidebar-light-bg, 10%);
+  }
+
+  .list-group-item {
+    border-color: darken($sidebar-light-bg, 15%);
+
+    &:hover {
+      background-color: darken($sidebar-light-bg, 7.5%);
+    }
+
+    &:focus {
+      background-color: darken($sidebar-light-bg, 10%);
+    }
+
+    .search-path {
+      color: $gray-600;
+    }
   }
 }
+
+// Sidebar inline input-group fix
+.sidebar .form-inline .input-group {
+  width: 100%;
+  flex-wrap: nowrap;
+}
+.sidebar nav .form-inline {
+  margin-bottom: .2rem;
+}
+
+// Sidebar Collapse on Layout Boxed
+.layout-boxed:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) {
+  &.sidebar-collapse .main-sidebar {
+    margin-left: 0;
+  }
+  .content-wrapper,
+  .main-header,
+  .main-footer {
+    z-index: 9999;
+    position: relative;
+  }
+}
+
+// Sidebar Search
+.sidebar-collapse {
+  .form-control-sidebar,
+  .form-control-sidebar ~ .input-group-append,
+  .sidebar-search-results {
+    display: none;
+  }
+}
+
+[data-widget="sidebar-search"] {
+  input[type="search"] {
+    &::-ms-clear,
+    &::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+}
+
+.sidebar-search-results {
+  position: relative;
+  display: none;
+  width: 100%;
+
+  .sidebar-search-open & {
+    display: inline-block;
+  }
+
+  .search-title {
+    margin-bottom: -.1rem;
+  }
+
+  .list-group {
+    position: absolute;
+    width: 100%;
+    z-index: $zindex-main-sidebar + 1;
+
+    > .list-group-item {
+      padding: $input-padding-y $input-padding-x;
+
+      &:-moz-focusring {
+        margin-top: 0;
+        border-left: 1px solid transparent;
+        border-top: 0;
+        border-bottom: 1px solid transparent;
+      }
+
+      &:first-child {
+        margin-top: 0;
+        border-top: 0;
+        @include border-top-radius(0);
+      }
+    }
+  }
+}
+
+.sidebar-search-results .search-path {
+  font-size: $small-font-size;
+}
+
+.sidebar-search-open {
+  .btn,
+  .form-control {
+    @include border-bottom-radius(0);
+  }
+}
+
+// Custom Area
+.sidebar-custom {
+  [class*="sidebar-dark"] & {
+    border-top: 1px solid lighten($dark, 12%);
+  }
+
+  [class*="sidebar-light"] & {
+    border-top: 1px solid $gray-300;
+  }
+}
+
+.layout-fixed {
+  &.sidebar-collapse {
+    .hide-on-collapse {
+      display: none;
+    }
+  }
+
+  &.sidebar-collapse:hover {
+    .hide-on-collapse {
+      display: block;
+    }
+  }
+
+  .main-sidebar-custom {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height}) + #{$main-header-bottom-border-width}));
+    }
+
+    .sidebar-custom {
+      height: $sidebar-custom-height;
+      padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
+    }
+  }
+
+  .main-sidebar-custom-lg {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height-lg}) + #{$main-header-bottom-border-width}));
+    }
+
+    .sidebar-custom {
+      height: $sidebar-custom-height-lg;
+    }
+  }
+
+  .main-sidebar-custom-xl {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height-xl}) + #{$main-header-bottom-border-width}));
+    }
+
+    .sidebar-custom {
+      height: $sidebar-custom-height-xl;
+    }
+  }
+
+  .main-sidebar-custom,
+  .main-sidebar-custom-lg,
+  .main-sidebar-custom-xl {
+    .pos-right {
+      position: absolute;
+      right: .5rem;
+    }
+  }
+}
+
+.dark-mode {
+  @each $name, $color in $theme-colors-alt {
+    .sidebar-dark-#{$name},
+    .sidebar-light-#{$name} {
+      @include sidebar-color($color);
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .sidebar-dark-#{$name},
+    .sidebar-light-#{$name} {
+      @include sidebar-color($color);
+    }
+  }
+
+  [class*="sidebar-light-"] {
+    .sidebar {
+      a {
+        color: $sidebar-light-color;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+
+//

build/scss/_miscellaneous.scss

@@ -47,12 +47,12 @@
 .list-header {
   color: $gray-600;
   font-size: 15px;
-  font-weight: bold;
+  font-weight: 700;
   padding: 10px 4px;
 }
 
 .list-seperator {
-  background: $card-border-color;
+  background-color: $card-border-color;
   height: 1px;
   margin: 15px 0 9px;
 }
@@ -99,7 +99,8 @@
 
   &.user-block-sm {
     img {
-      @extend .img-sm;
+      width: $img-size-sm;
+      height: $img-size-sm;
     }
 
     .username,
@@ -122,29 +123,29 @@
 }
 
 .img-sm {
-  height: 30px !important;
-  width: 30px !important;
+  height: $img-size-sm;
+  width: $img-size-sm;
 
   + .img-push {
-    margin-left: 40px;
+    margin-left: $img-size-sm + $img-size-push;
   }
 }
 
 .img-md {
-  width: 60px;
-  height: 60px;
+  width: $img-size-md;
+  height: $img-size-md;
 
   + .img-push {
-    margin-left: 70px;
+    margin-left: $img-size-md + $img-size-push;
   }
 }
 
 .img-lg {
-  width: 100px;
-  height: 100px;
+  width: $img-size-lg;
+  height: $img-size-lg;
 
   + .img-push {
-    margin-left: 110px;
+    margin-left: $img-size-lg + $img-size-push;
   }
 }
 
@@ -161,7 +162,7 @@
 
 // Rounded and Circle Images
 .img-rounded {
-  @include border-radius($border-radius)
+  @include border-radius($border-radius);
 }
 
 .img-circle {
@@ -215,7 +216,7 @@
 
 // General attachemnt block
 .attachment-block {
-  background: $gray-100;
+  background-color: $gray-100;
   border: 1px solid $card-border-color;
   margin-bottom: 10px;
   padding: 5px;
@@ -258,7 +259,7 @@
   .overlay {
     @include border-radius($border-radius);
     align-items: center;
-    background: rgba($white, 0.7);
+    background-color: rgba($white, .7);
     display: flex;
     justify-content: center;
     z-index: 50;
@@ -267,19 +268,23 @@
     > .fas,
     > .far,
     > .fab,
-    > .glyphicon,
+    > .fal,
+    > .fad,
+    > .svg-inline--fa,
     > .ion {
       color: $gray-800;
     }
 
     &.dark {
-      background: rgba($black, 0.5);
+      background-color: rgba($black, .5);
 
       > .fa,
       > .fas,
       > .far,
       > .fab,
-      > .glyphicon,
+      > .fal,
+      > .fad,
+      > .svg-inline--fa,
       > .ion {
         color: $gray-400;
       }
@@ -287,6 +292,26 @@
   }
 }
 
+.tab-pane {
+  // Box overlay for LOADING STATE effect on Tab Panels
+  > .overlay-wrapper {
+    position: relative;
+    > .overlay {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      flex-direction: column;
+      margin-top: -$card-spacer-x;
+      margin-left: -$card-spacer-x;
+      height: calc(100% + 2 * #{$card-spacer-x});
+      width: calc(100% + 2 * #{$card-spacer-x});
+
+      &.dark {
+        color: $white;
+      }
+    }
+  }
+}
+
 // Ribbon
 .ribbon-wrapper {
   height: $ribbon-wrapper-size;
@@ -339,7 +364,7 @@
       border-right: $ribbon-border-size solid transparent;
       border-top: $ribbon-border-size solid #9e9e9e;
       bottom: -$ribbon-border-size;
-      content: '';
+      content: "";
       position: absolute;
     }
 
@@ -372,13 +397,13 @@ pre {
 
 // Blockquotes styles
 blockquote {
-  background: $white;
+  background-color: $white;
   border-left: .7rem solid $primary;
   margin: 1.5em .7rem;
-  padding: 0.5em .7rem;
+  padding: .5em .7rem;
 
   .box & {
-    background: $gray-200;
+    background-color: $gray-200;
   }
 
   p:last-child {
@@ -443,3 +468,74 @@ blockquote {
   margin-bottom: .5rem;
   padding-bottom: .5rem;
 }
+
+
+// Badge BTN Style
+.badge-btn {
+  border-radius: $button-border-radius-xs;
+  font-size: $button-font-size-xs;
+  font-weight: 400;
+  padding: $button-padding-y-xs * 2 $button-padding-x-xs * 2;
+}
+
+.badge-btn.badge-pill {
+  padding: .375rem .6rem;
+}
+
+.dark-mode {
+  a:not(.btn):hover {
+    color: lighten($link-color, 10%);
+  }
+  .attachment-block {
+    background-color: lighten($dark, 3.75%);
+
+    .attachment-text {
+      color: $gray-400;
+    }
+  }
+  blockquote {
+    background-color: lighten($dark, 5%);
+
+    @each $color, $value in $theme-colors {
+      &.quote-#{$color} {
+        border-color: $value;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: $value;
+        }
+      }
+    }
+
+    @each $color, $value in $colors {
+      &.quote-#{$color} {
+        border-color: $value;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          color: $value;
+        }
+      }
+    }
+  }
+  .close,
+  .mailbox-attachment-close {
+    color: $gray-500;
+    text-shadow: 0 1px 0 $gray-700;
+  }
+  .tab-custom-content {
+    border-color: $gray-600;
+  }
+  .list-group-item {
+    background-color: $dark;
+    border-color: $gray-600;
+  }
+}

build/scss/_mixins.scss

@@ -2,573 +2,14 @@
 // General: Mixins
 //
 
-
-// Cards Variant
-@mixin cards-variant($name, $color) {
-  .card-#{$name} {
-    &:not(.card-outline) {
-      > .card-header {
-        background-color: $color;
-        border-bottom: 0;
-
-        &,
-        a {
-          color: color-yiq($color);
-        }
-
-        a.active {
-          color: color-yiq($white);
-        }
-      }
-    }
-
-    &.card-outline {
-      border-top: 3px solid $color;
-
-      .nav-item {
-        border-bottom: 0;
-
-        &:first-child .nav-link {
-          margin-left: -1px;
-          border-left: 0;
-        }
-      }
-    }
-
-    &.card-outline-tabs {
-      border-top: 0;
-
-      > .card-header {
-        .nav-item {
-          &:first-child .nav-link {
-            margin-left: -1px;
-            border-left: 0;
-          }
-        }
-
-        a {
-          border-top: 3px solid transparent;
-
-          &:hover {
-            border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
-            margin-top: 2px;
-          }
-
-          &.active {
-            &:hover {
-              margin-top: 0;
-            }
-
-            border-top: 3px solid $color;
-          }
-        }
-      }
-    }
-  }
-
-  .bg-#{$name},
-  .bg-gradient-#{$name},
-  .card-#{$name}:not(.card-outline) {
-    .btn-tool {
-      color: rgba(color-yiq($color), 0.8);
-
-      &:hover {
-        color: color-yiq($color);
-      }
-    }
-  }
-
-  .card.bg-#{$name},
-  .card.bg-gradient-#{$name} {
-    .bootstrap-datetimepicker-widget {
-      .table td,
-      .table th {
-        border: none;
-      }
-
-      table thead tr:first-child th:hover,
-      table td.day:hover,
-      table td.hour:hover,
-      table td.minute:hover,
-      table td.second:hover {
-        background: darken($color, 8%);
-        color: color-yiq($color);
-      }
-
-      table td.today::before {
-        border-bottom-color: color-yiq($color);
-      }
-
-      table td.active,
-      table td.active:hover {
-        background: lighten($color, 10%);
-        color: color-yiq($color);
-      }
-    }
-  }
-}
-
-// Sidebar Color
-@mixin sidebar-color($color) {
-  .nav-sidebar > .nav-item {
-    & > .nav-link.active {
-      background-color: $color;
-      color: color-yiq($color);
-    }
-  }
-}
-
-// Sidebar Mini Breakpoints
-@mixin sidebar-mini-breakpoint() {
-  // A fix for text overflow while transitioning from sidebar mini to full sidebar
-  .nav-sidebar,
-  .nav-sidebar > .nav-header,
-  .nav-sidebar .nav-link {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  // When the sidebar is collapsed...
-  &.sidebar-collapse {
-    .d-hidden-mini {
-      display: none;
-    }
-
-    // Apply the new margins to the main content and footer
-    .content-wrapper,
-    .main-footer,
-    .main-header {
-      margin-left: $sidebar-mini-width !important;
-    }
-
-    // Make the sidebar headers
-    .nav-sidebar .nav-header {
-      display: none;
-    }
-
-    .nav-sidebar .nav-link p {
-      width: 0;
-    }
-
-    .sidebar .user-panel > .info,
-    .nav-sidebar .nav-link p,
-    .brand-text {
-      margin-left: -10px;
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    .logo-xl {
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    .logo-xs {
-      display: inline-block;
-      opacity: 1;
-      visibility: visible;
-    }
-
-    // Modify the sidebar to shrink instead of disappearing
-    .main-sidebar {
-      overflow-x: hidden;
-
-      &,
-      &::before {
-        // Don't go away! Just shrink
-        margin-left: 0;
-        width: $sidebar-mini-width;
-      }
-
-      .user-panel {
-        .image {
-          float: none;
-        }
-      }
-
-      &:hover,
-      &.sidebar-focused {
-        width: $sidebar-width;
-
-        .nav-sidebar.nav-child-indent .nav-treeview {
-          padding-left: 1rem;
-        }
-
-        .brand-link {
-          width: $sidebar-width;
-        }
-
-        .user-panel {
-          text-align: left;
-
-          .image {
-            float: left;
-          }
-        }
-
-        .user-panel > .info,
-        .nav-sidebar .nav-link p,
-        .brand-text,
-        .logo-xl {
-          display: inline-block;
-          margin-left: 0;
-          opacity: 1;
-          visibility: visible;
-        }
-
-        .nav-flat {
-          .nav-icon {
-            margin-left: 0;
-          }
-
-          .nav-treeview {
-            .nav-icon {
-              margin-left: -.2rem;
-            }
-          }
-        }
-
-        .logo-xs {
-          opacity: 0;
-          visibility: hidden;
-        }
-
-        .brand-image {
-          margin-right: .5rem;
-        }
-
-        // Make the sidebar links, menus, labels, badges
-        // and angle icons disappear
-        .sidebar-form,
-        .user-panel > .info {
-          display: block !important;
-          -webkit-transform: translateZ(0);
-        }
-
-        .nav-sidebar > .nav-item > .nav-link > span {
-          display: inline-block !important;
-        }
-      }
-    }
-
-    // Make an element visible only when sidebar mini is active
-    .visible-sidebar-mini {
-      display: block !important;
-    }
-
-    &.layout-fixed {
-      .main-sidebar:hover {
-        .brand-link {
-          width: $sidebar-width;
-        }
-      }
-
-      .brand-link {
-        width: $sidebar-mini-width;
-      }
-    }
-  }
-}
-
-// Navbar Variant
-@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
-  background-color: $color;
-
-  .nav > li > a {
-    color: $font-color;
-  }
-
-  .nav > li > a:hover,
-  .nav > li > a:active,
-  .nav > li > a:focus,
-  .nav .open > a,
-  .nav .open > a:hover,
-  .nav .open > a:focus,
-  .nav > .active > a {
-    background: $hover-bg;
-    color: $hover-color;
-  }
-
-  // Add color to the sidebar toggle button
-  .sidebar-toggle {
-    color: $font-color;
-
-    &:hover,
-    &:focus {
-      background: $hover-bg;
-      color: $hover-color;
-    }
-  }
-}
-
-// Logo color Variant
-@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
-  background-color: $bg-color;
-  border-bottom: $border-bottom-width solid $border-bottom-color;
-  color: $color;
-
-  &:hover,
-  &:focus {
-    background-color: darken($bg-color, 1%);
-  }
-}
-
-// Direct Chat Variant
-@mixin direct-chat-variant($bg-color, $color: #fff) {
-  .right > .direct-chat-text {
-    background: $bg-color;
-    border-color: $bg-color;
-    color: color-yiq($bg-color);
-
-    &::after,
-    &::before {
-      border-left-color: $bg-color;
-    }
-  }
-
-  @each $name, $color in $theme-colors {
-    &.bg-#{$name},
-    &.bg-gradient-#{$name} {
-      .direct-chat-timestamp {
-        @if (color-yiq($color) == $yiq-text-dark) {
-          color: lighten(color-yiq($color), 10%);
-        } @else {
-          color: darken(color-yiq($color), 20%);
-        }
-      }
-    }
-  }
-
-  @each $name, $color in $colors {
-    &.bg-#{$name},
-    &.bg-gradient-#{$name} {
-      .direct-chat-timestamp {
-        @if (color-yiq($color) == $yiq-text-dark) {
-          color: lighten(color-yiq($color), 10%);
-        } @else {
-          color: darken(color-yiq($color), 20%);
-        }
-      }
-    }
-  }
-}
-
-// Background Variant
-@mixin background-variant($name, $color) {
-  .bg-#{$name} {
-    background-color: #{$color} !important;
-
-    &,
-    > a {
-      color: color-yiq($color) !important;
-    }
-
-    &.btn {
-      &:hover {
-        border-color: darken($color, 10%);
-        color: darken(color-yiq($color), 7.5%);
-      }
-
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      &:active,
-      &.active {
-        background-color: darken($color, 10%) !important;
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
-}
-
-// Background Gradient Variant
-@mixin background-gradient-variant($name, $color) {
-  .bg-gradient-#{$name} {
-    @include bg-gradient-variant('&', $color);
-    color: color-yiq($color);
-
-    &.btn {
-      &.disabled,
-      &:disabled,
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
-        background-image: none !important;
-      }
-
-      &:hover {
-        @include bg-gradient-variant('&', darken($color, 7.5%));
-        border-color: darken($color, 10%);
-        color: darken(color-yiq($color), 7.5%);
-      }
-
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active,
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
-}
-
-// Custom Switch Variant
-@mixin custom-switch-variant($name, $color) {
-  &.custom-switch-off-#{$name} {
-    & .custom-control-input ~ .custom-control-label::before {
-      background: #{$color};
-      border-color: darken($color, 20%);
-    }
-
-    & .custom-control-input:focus ~ .custom-control-label::before {
-      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
-    }
-
-    & .custom-control-input ~ .custom-control-label::after {
-      background: darken($color, 25%);
-    }
-  }
-
-  &.custom-switch-on-#{$name} {
-    & .custom-control-input:checked ~ .custom-control-label::before {
-      background: #{$color};
-      border-color: darken($color, 20%);
-    }
-
-    & .custom-control-input:checked:focus ~ .custom-control-label::before {
-      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
-    }
-
-    & .custom-control-input:checked ~ .custom-control-label::after {
-      background: lighten($color, 30%);
-    }
-  }
-}
-
-// Custom Range Variant
-@mixin custom-range-variant($name, $color) {
-  &.custom-range-#{$name} {
-    &:focus {
-      outline: none;
-
-      &::-webkit-slider-thumb {
-        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
-      }
-
-      &::-moz-range-thumb     {
-        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
-      }
-
-      &::-ms-thumb            {
-        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
-      }
-    }
-
-    &::-webkit-slider-thumb {
-      background-color: $color;
-
-      &:active {
-        background-color: lighten($color, 35%);
-      }
-    }
-
-    &::-moz-range-thumb {
-      background-color: $color;
-
-      &:active {
-        background-color: lighten($color, 35%);
-      }
-    }
-
-    &::-ms-thumb {
-      background-color: $color;
-
-      &:active {
-        background-color: lighten($color, 35%);
-      }
-    }
-  }
-}
-
-// Toast Variant
-@mixin toast-variant($name, $color) {
-  &.bg-#{$name} {
-    background: rgba($color, .9) !important;
-    @if (color-yiq($color) == $yiq-text-light) {
-
-      .close {
-        color: color-yiq($color);
-        text-shadow: 0 1px 0 #000;
-      }
-    }
-
-    .toast-header {
-      background: rgba($color, .85);
-      color: color-yiq($color);
-    }
-  }
-}
-
-// Accent Variant
-@mixin accent-variant($name, $color) {
-  &.accent-#{$name} {
-    $link-color: $color;
-    $link-hover-color: darken($color, 15%);
-    $pagination-active-bg: $color;
-    $pagination-active-border-color: $color;
-
-    a {
-      color: $link-color;
-
-      @include hover {
-        color: $link-hover-color;
-      }
-    }
-
-    .page-item {
-      &.active .page-link {
-        background-color: $pagination-active-bg;
-        border-color: $pagination-active-border-color;
-      }
-
-      &.disabled .page-link {
-        background-color: $pagination-disabled-bg;
-        border-color: $pagination-disabled-border-color;
-      }
-    }
-  }
-}
-
-// ETC
-@mixin translate($x, $y) {
-  transform: translate($x, $y);
-}
-
-// Different radius each side
-@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
-  border-radius: $top-left $top-right $bottom-left $bottom-right;
-}
-
-@mixin calc($property, $expression) {
-  #{$property}: calc(#{$expression});
-}
-
-@mixin rotate($value) {
-  transform: rotate($value);
-}
-
-@mixin animation($animation) {
-  animation: $animation;
-}
-
-// Gradient background
-@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
-  background: $color;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
-  background: -ms-linear-gradient(bottom, $start, $stop);
-  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
-  background: -o-linear-gradient($stop, $start);
-}
-
+@import "mixins/animations";
+@import "mixins/cards";
+@import "mixins/sidebar";
+@import "mixins/navbar";
+@import "mixins/accent";
+@import "mixins/custom-forms";
+@import "mixins/backgrounds";
+@import "mixins/direct-chat";
+@import "mixins/toasts";
+@import "mixins/touch-support";
+@import "mixins/miscellaneous";

build/scss/_modals.scss

@@ -5,15 +5,19 @@
 // Overlay
 .modal-dialog {
   .overlay {
-    background-color: $black;
-    display: block;
-    height: 100%;
-    left: 0;
-    opacity: .7;
+    display: flex;
     position: absolute;
+    left: 0;
     top: 0;
-    width: 100%;
+    bottom: 0;
+    right: 0;
+    margin: -$modal-content-border-width;
     z-index: ($zindex-modal + 2);
+    justify-content: center;
+    align-items: center;
+    background-color: rgba($black, .7);
+    color: darken($gray-600, 2.5%);
+    @include border-radius($modal-content-border-radius);
   }
 }
 
@@ -34,7 +38,39 @@
   &.bg-success, {
     .close {
       color: $white;
-      text-shadow: 0 1px 0 #000;
+      text-shadow: 0 1px 0 $black;
+    }
+  }
+}
+
+.dark-mode {
+  .modal-header,
+  .modal-footer {
+    border-color: $gray-600;
+  }
+  .modal-content {
+    background-color: $dark;
+
+    &.bg-warning {
+      .modal-header,
+      .modal-footer {
+        border-color: $gray-600;
+      }
+      .close {
+        color: $dark !important;
+        text-shadow: 0 1px 0 $gray-700 !important;
+      }
+    }
+
+    &.bg-primary,
+    &.bg-secondary,
+    &.bg-info,
+    &.bg-danger,
+    &.bg-success {
+      .modal-header,
+      .modal-footer {
+        border-color: $white;
+      }
     }
   }
 }

build/scss/_navs.scss

@@ -7,7 +7,7 @@
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color('primary');
+      color: theme-color("primary");
     }
   }
 
@@ -30,7 +30,7 @@
     border-top-right-radius: 0;
     margin-right: -$nav-tabs-border-width;
 
-    @include hover-focus {
+    @include hover-focus () {
       border-color: $gray-200 transparent $gray-200 $gray-200;
     }
   }
@@ -51,7 +51,7 @@
       border-top-right-radius: $nav-tabs-border-radius;
       margin-left: -$nav-tabs-border-width;
 
-      @include hover-focus {
+      @include hover-focus () {
         border-color: $gray-200 $gray-200 $gray-200 transparent;
       }
     }
@@ -63,25 +63,106 @@
   }
 }
 
+.navbar-no-expand {
+  flex-direction: row;
+
+  .nav-link {
+    padding-left: $navbar-nav-link-padding-x;
+    padding-right: $navbar-nav-link-padding-x;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+  }
+}
+
 // Color variants
 @each $color, $value in $theme-colors {
   @if $color == dark or $color == light {
     .navbar-#{$color} {
       background-color: $value;
+      @if $color == dark {
+        border-color: lighten($dark, 10%);
+      }
     }
   }
 }
 
 @each $color, $value in $theme-colors {
   @if $color != dark and $color != light {
-    .navbar-#{$color} {
-      background-color: $value;
-    }
+    @include navbar-variant($color, $value);
   }
 }
 
 @each $color, $value in $colors {
-  .navbar-#{$color} {
-    background-color: $value;
+  @include navbar-variant($color, $value);
+}
+
+.dark-mode {
+  .nav-pills .nav-link {
+    color: $gray-400;
+  }
+
+  .nav-tabs {
+    border-color: lighten($dark, 15%);
+
+    .nav-link:focus,
+    .nav-link:hover {
+      border-color: lighten($dark, 15%);
+    }
+
+    .nav-item.show .nav-link,
+    .nav-link.active {
+      background-color: $dark;
+      border-color: lighten($dark, 15%) lighten($dark, 15%) transparent lighten($dark, 15%);
+      color: $white;
+    }
+
+    &.flex-column {
+      .nav-item.show .nav-link,
+      .nav-link {
+        &.active,
+        &:focus,
+        &:hover {
+          border-color: lighten($dark, 15%) transparent lighten($dark, 15%) lighten($dark, 15%);
+        }
+        &:focus,
+        &:hover {
+          background-color: lighten($dark, 5%);
+        }
+      }
+      &.nav-tabs-right {
+        border-color: lighten($dark, 15%);
+        .nav-link {
+          &.active,
+          &:focus,
+          &:hover {
+            border-color: lighten($dark, 15%) lighten($dark, 15%) lighten($dark, 15%) transparent;
+          }
+        }
+      }
+    }
+  }
+
+  // Color variants
+  @each $color, $value in $theme-colors-alt {
+    @if $color == dark or $color == light {
+      .navbar-#{$color} {
+        background-color: $value;
+        @if $color == dark {
+          border-color: lighten($dark, 10%);
+        }
+      }
+    }
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    @if $color != dark and $color != light {
+      @include navbar-variant($color, $value);
+    }
+  }
+
+  @each $color, $value in $colors-alt {
+    @include navbar-variant($color, $value);
   }
 }

build/scss/_pagination.scss

@@ -0,0 +1,82 @@
+//
+// Component: Pagination
+//
+
+.pagination-month {
+  .page-item {
+    justify-self: stretch;
+
+    .page-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      box-shadow: none;
+    }
+    &:first-child,
+    &:last-child {
+      .page-link {
+        height: 100%;
+        font-size: $font-size-lg;
+      }
+    }
+    .page-month {
+      margin-bottom: 0;
+      font-size: $font-size-lg;
+      font-weight: $font-weight-bold;
+    }
+    .page-year {
+      margin-bottom: 0;
+    }
+  }
+
+  &.pagination-lg {
+    .page-month {
+      font-size: ($font-size-lg * 1.25);
+    }
+  }
+  &.pagination-sm {
+    .page-month {
+      font-size: ($font-size-base);
+    }
+  }
+}
+
+.dark-mode {
+  .page-item {
+    &.disabled a,
+    &.disabled .page-link {
+      background-color: lighten($dark, 2.5%) !important;
+      border-color: $gray-600 !important;
+      color: $gray-600;
+    }
+
+    .page-link {
+      color: $primary-alt;
+    }
+
+    &.active {
+      .page-link {
+        background-color: $primary-alt;
+        color: $white;
+
+        &:hover,
+        &:focus {
+          color: $gray-400 !important;
+        }
+      }
+    }
+    &:not(.active) {
+      .page-link {
+        background-color: $dark;
+        border-color: $gray-600;
+
+        &:hover,
+        &:focus {
+          color: lighten($primary-alt, 5%);
+          background-color: lighten($dark, 5%);
+        }
+      }
+    }
+  }
+}

build/scss/_preloader.scss

@@ -0,0 +1,24 @@
+//
+// Core: Preloader
+//
+
+.preloader {
+  display: flex;
+  background-color: $main-bg;
+  height: 100vh;
+  width: 100%;
+  transition: height 200ms linear;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $zindex-preloader;
+}
+
+.dark-mode {
+  .preloader {
+    background-color: $dark-main-bg;
+    color: $white;
+  }
+}
+
+//

build/scss/_products.scss

@@ -8,14 +8,15 @@
   padding: 0;
 
   > .item {
-    @include clearfix;
+    @include clearfix ();
 
     @if $enable-rounded {
       @include border-radius($border-radius);
     }
 
-    background: $white;
+    background-color: $white;
     padding: 10px 0;
+
   }
 
   .product-img {
@@ -52,3 +53,16 @@
     border-bottom-width: 0;
   }
 }
+
+
+.dark-mode {
+  .products-list > .item {
+    background-color: $dark;
+    color: $white;
+    border-bottom-color: $gray-600;
+  }
+
+  .product-description {
+    color: $gray-400;
+  }
+}

build/scss/_progress-bars.scss

@@ -40,7 +40,7 @@
 }
 
 .progress-group {
-  @extend .mb-2;
+  margin-bottom: map-get($spacers, 2);
 }
 
 // size variation
@@ -64,3 +64,9 @@
     }
   }
 }
+
+.dark-mode {
+  .progress {
+    background: lighten($dark, 7.5%);
+  }
+}

build/scss/_root.scss

@@ -0,0 +1,14 @@
+.dark-mode {
+  :root {
+    // Custom variable values only support SassScript inside `#{}`.
+    @each $color, $value in $colors-alt {
+      --#{$color}: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-alt {
+      --#{$color}: #{$value};
+    }
+  }
+}
+
+//

build/scss/_sidebar-mini.scss

@@ -33,7 +33,7 @@
 .brand-link {
   &.logo-switch {
     &::before {
-      content: '\00a0';
+      content: "\00a0";
     }
   }
 }
@@ -41,65 +41,417 @@
 // Add sidebar-mini class to the body tag to activate this feature
 .sidebar-mini {
   @include media-breakpoint-up(lg) {
-    @include sidebar-mini-breakpoint;
+    @include sidebar-mini-breakpoint ();
+  }
+}
+@include media-breakpoint-down(md) {
+  .sidebar-mini.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
   }
 }
 
 .sidebar-mini-md {
   @include media-breakpoint-up(md) {
-    @include sidebar-mini-breakpoint;
+    @include sidebar-mini-breakpoint ();
+  }
+}
+@include media-breakpoint-down(sm) {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
+  }
+}
+
+.sidebar-mini-xs {
+  @include media-breakpoint-up(xs) {
+    @include sidebar-mini-breakpoint ();
+  }
+}
+
+.sidebar-mini,
+.sidebar-mini-md,
+.sidebar-mini-xs {
+  .main-sidebar {
+    .nav-child-indent .nav-treeview {
+      .nav-link {
+        width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1rem);
+      }
+
+      .nav-treeview {
+        .nav-link {
+          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2rem);
+        }
+
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 3rem);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 4rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 5rem);
+              }
+            }
+          }
+        }
+      }
+    }
+    .nav-legacy {
+      .nav-link {
+        width: $sidebar-width;
+      }
+      &.nav-child-indent {
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - 1rem);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - 1rem - 1rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - 1rem - 2rem);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - 1rem - 3rem);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - 1rem - 4rem);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .nav-flat {
+      .nav-link {
+        width: $sidebar-width;
+      }
+      &.nav-child-indent {
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width});
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - .2rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - .2rem * 2);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .2rem * 3);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - .2rem * 4);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .nav-child-indent.nav-compact .nav-treeview {
+      .nav-link {
+        width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - .5rem);
+      }
+
+      .nav-treeview {
+        .nav-link {
+          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1rem);
+        }
+
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1.5rem);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2.5rem);
+              }
+            }
+          }
+        }
+      }
+    }
+    .nav-child-indent.nav-legacy.nav-compact {
+      .nav-link {
+        width: $sidebar-width;
+      }
+      .nav-treeview {
+        .nav-link {
+          width: calc(#{$sidebar-width} - .5rem);
+        }
+
+        .nav-treeview {
+          .nav-link {
+            width: calc(#{$sidebar-width} - .5rem * 2);
+          }
+
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - .5rem * 3);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - .5rem * 4);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .5rem * 5);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .nav-link {
+      width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+      @include transition(width $transition-fn $transition-speed);
+    }
   }
 }
 
 .sidebar-collapse {
-  .sidebar-no-expand.main-sidebar.sidebar-focused,
-  .sidebar-no-expand.main-sidebar:hover {
-    width: $sidebar-mini-width;
+  &.sidebar-mini,
+  &.sidebar-mini-md,
+  &.sidebar-mini-xs {
+    .main-sidebar {
+      .nav-sidebar {
+        .nav-link {
+          width: $sidebar-mini-width - $sidebar-padding-x * 2;
+        }
 
-    .brand-link {
-      width: $sidebar-mini-width !important;
-    }
+        &.nav-flat,
+        &.nav-legacy {
+          .nav-link {
+            width: $sidebar-mini-width;
+          }
+        }
+        &.nav-child-indent.nav-compact {
+          .nav-treeview {
+            padding-left: 0 !important;
+            margin-left: 0 !important;
+          }
 
-    .user-panel .image {
-      float: none !important;
-    }
-
-    .logo-xs {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .logo-xl {
-      opacity: 0;
-      visibility: hidden;
-    }
-
-    .nav-sidebar.nav-child-indent .nav-treeview {
-      padding-left: 0;
-    }
-
-    .brand-text,
-    .user-panel > .info,
-    .nav-sidebar .nav-link p {
-      margin-left: -10px;
-      opacity: 0;
-      visibility: hidden;
-      width: 0;
-    }
-
-    .nav-sidebar > .nav-item .nav-icon {
-      margin-right: 0;
-    }
-
-    .nav-flat {
-      .nav-icon {
-        margin-left: .5rem;
+          .nav-link {
+            width: calc(#{$sidebar-mini-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
       }
 
-      .nav-treeview {
-        .nav-icon {
-          margin-left: .3rem;
+      &.sidebar-focused,
+      &:hover {
+        .nav-link {
+          width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
         }
+        .nav-header {
+          display: inline-block;
+        }
+
+        .nav-child-indent {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
+        .nav-legacy {
+          .nav-link {
+            width: $sidebar-width;
+          }
+          &.nav-child-indent {
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - 1rem);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - 1rem - 1rem);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - 1rem - 2rem);
+                  }
+
+                  .nav-treeview {
+                    .nav-link {
+                      width: calc(#{$sidebar-width} - 1rem - 3rem);
+                    }
+
+                    .nav-treeview {
+                      .nav-link {
+                        width: calc(#{$sidebar-width} - 1rem - 4rem);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .nav-flat {
+          .nav-link {
+            width: $sidebar-width;
+          }
+          &.nav-child-indent {
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width});
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .2rem);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - .2rem * 2);
+                  }
+
+                  .nav-treeview {
+                    .nav-link {
+                      width: calc(#{$sidebar-width} - .2rem * 3);
+                    }
+
+                    .nav-treeview {
+                      .nav-link {
+                        width: calc(#{$sidebar-width} - .2rem * 4);
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .nav-child-indent.nav-compact {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
+        .nav-child-indent.nav-legacy.nav-compact {
+          .nav-link {
+            width: $sidebar-width;
+          }
+          .nav-treeview {
+            .nav-link {
+              width: calc(#{$sidebar-width} - .5rem);
+            }
+
+            .nav-treeview {
+              .nav-link {
+                width: calc(#{$sidebar-width} - .5rem * 2);
+              }
+
+              .nav-treeview {
+                .nav-link {
+                  width: calc(#{$sidebar-width} - .5rem * 3);
+                }
+
+                .nav-treeview {
+                  .nav-link {
+                    width: calc(#{$sidebar-width} - .5rem * 4);
+                  }
+
+                  .nav-treeview {
+                    .nav-link {
+                      width: calc(#{$sidebar-width} - .5rem * 5);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .sidebar {
+          @include scrollbar-width-thin();
+        }
+      }
+
+      .sidebar {
+        @include scrollbar-width-none();
+      }
+    }
+
+    .sidebar-no-expand.main-sidebar.sidebar-focused,
+    .sidebar-no-expand.main-sidebar:hover {
+      width: $sidebar-mini-width;
+
+      .nav-header {
+        display: none;
+      }
+
+      .brand-link {
+        width: $sidebar-mini-width !important;
+      }
+
+      .user-panel .image {
+        float: none !important;
+      }
+
+      .logo-xs {
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: visible;
+      }
+
+      .logo-xl {
+        animation-name: fadeOut;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: hidden;
+      }
+
+      .nav-sidebar.nav-child-indent .nav-treeview {
+        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;
+      }
+
+      .nav-sidebar > .nav-item .nav-icon {
+        margin-right: 0;
       }
     }
   }
@@ -135,5 +487,5 @@
 .main-sidebar .logo-xs,
 .main-sidebar .logo-xl,
 .sidebar .user-panel .info {
-  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
+  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease);
 }

build/scss/_small-box.scss

@@ -5,7 +5,6 @@
 .small-box {
   @include border-radius($border-radius);
   @include box-shadow($card-shadow);
-  @extend .mb-3;
 
   display: block;
   margin-bottom: 20px;
@@ -17,8 +16,8 @@
   }
 
   > .small-box-footer {
-    background: rgba($black, 0.1);
-    color: rgba($white, 0.8);
+    background-color: rgba($black, .1);
+    color: rgba($white, .8);
     display: block;
     padding: 3px 0;
     position: relative;
@@ -27,15 +26,15 @@
     z-index: 10;
 
     &:hover {
-      background: rgba($black, 0.15);
+      background-color: rgba($black, .15);
       color: $white;
     }
   }
 
   h3 {
     @include font-size(2.2rem);
-    font-weight: bold;
-    margin: 0 0 10px 0;
+    font-weight: 700;
+    margin: 0 0 10px;
     padding: 0;
     white-space: nowrap;
   }
@@ -82,7 +81,7 @@
     > small {
       color: $gray-100;
       display: block;
-      font-size: 0.9rem;
+      font-size: .9rem;
       margin-top: 5px;
     }
   }
@@ -94,7 +93,7 @@
 
   // the icon
   .icon {
-    color: rgba($black, 0.15);
+    color: rgba($black, .15);
     z-index: 0;
 
     > i {
@@ -102,19 +101,27 @@
       position: absolute;
       right: 15px;
       top: 15px;
-      transition: all $transition-speed linear;
+      transition: transform $transition-speed linear;
 
       &.fa,
       &.fas,
       &.far,
       &.fab,
-      &.glyphicon,
+      &.fal,
+      &.fad,
       &.ion {
         font-size: 70px;
         top: 20px;
       }
     }
 
+    svg {
+      font-size: 70px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      transition: transform $transition-speed linear;
+    }
   }
 
   // Small box hover state
@@ -122,16 +129,21 @@
     text-decoration: none;
 
     // Animate icons on small box hover
-    .icon > i {
-      font-size: 95px;
-
-      &.fa,
-      &.fas,
-      &.far,
-      &.fab,
-      &.glyphicon,
-      &.ion {
-        font-size: 75px;
+    .icon {
+      > i {
+        &,
+        &.fa,
+        &.fas,
+        &.far,
+        &.fab,
+        &.fal,
+        &.fad,
+        &.ion {
+          transform: scale(1.1);
+        }
+      }
+      > svg {
+        transform: scale(1.1);
       }
     }
   }

build/scss/_social-widgets.scss

@@ -28,7 +28,7 @@
     font-weight: 300;
     margin-bottom: 0;
     margin-top: 0;
-    text-shadow: 0 1px 1px rgba($black, 0.2);
+    text-shadow: 0 1px 1px rgba($black, .2);
   }
 
   //User single line description

build/scss/_table.scss

@@ -12,8 +12,7 @@
     thead tr:nth-child(1) th {
       background-color: $white;
       border-bottom: 0;
-      box-shadow: inset 0 1px 0 $table-border-color,
-                  inset 0 -1px 0 $table-border-color;
+      box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
       position: sticky;
       top: 0;
       z-index: 10;
@@ -23,8 +22,7 @@
       thead tr {
         &:nth-child(1) th {
           background-color: $table-dark-bg;
-          box-shadow: inset 0 1px 0 $table-dark-border-color,
-                      inset 0 -1px 0 $table-dark-border-color;
+          box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
         }
       }
     }
@@ -60,14 +58,97 @@
   .card-body.p-0 & {
     thead > tr > th,
     thead > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td,
     tbody > tr > th,
     tbody > tr > td {
       &:first-of-type {
-        @extend .pl-4;
+        padding-left: map-get($spacers, 4);
       }
 
       &:last-of-type {
-        @extend .pr-4;
+        padding-right: map-get($spacers, 4);
+      }
+    }
+  }
+}
+
+// Expandable Table
+
+.table-hover tbody tr.expandable-body:hover {
+  background-color: inherit !important;
+}
+
+[data-widget="expandable-table"] {
+  cursor: pointer;
+
+  i.expandable-table-caret {
+    transition: transform $transition-speed linear;
+  }
+  &[aria-expanded="true"] {
+    td i.expandable-table-caret {
+      // stylelint-disable selector-max-attribute
+      &[class*="right"] {
+        transform: rotate(90deg);
+      }
+      &[class*="left"] {
+        transform: rotate(-90deg);
+      }
+      // stylelint-enable selector-max-attribute
+    }
+  }
+}
+
+.expandable-body {
+  > td {
+    padding: 0 !important;
+    width: 100%;
+
+    > div,
+    > p {
+      padding: $table-cell-padding;
+    }
+  }
+
+  .table {
+    width: calc(100% - #{$table-cell-padding});
+    margin: 0 0 0 $table-cell-padding;
+
+    tr:first-child {
+      td,
+      th {
+        border-top: none;
+      }
+    }
+  }
+}
+
+.dark-mode {
+  .table-bordered {
+    &,
+    td,
+    th {
+      border-color: $gray-600;
+    }
+  }
+  .table-hover {
+    tbody tr:hover {
+      color: $gray-300;
+      background-color: lighten($dark, 2.5%);
+      border-color: $gray-600;
+    }
+  }
+  .table {
+    thead th {
+      border-bottom-color: $gray-600;
+    }
+    th,
+    td {
+      border-top-color: $gray-600;
+    }
+    &.table-head-fixed {
+      thead tr:nth-child(1) th {
+        background-color: lighten($dark, 5%);
       }
     }
   }

build/scss/_text.scss

@@ -4,7 +4,9 @@
 
 // text modification
 .text-bold {
-  &, &.table td, &.table th {
+  &,
+  &.table td,
+  &.table th {
     font-weight: 700;
   }
 }
@@ -32,6 +34,18 @@
 // text color variations
 @each $name, $color in $colors {
   .text-#{$name} {
-    color: #{$color};
+    color: #{$color} !important;
+  }
+}
+
+.dark-mode {
+  .text-muted {
+    color: $gray-500 !important;
+  }
+
+  @each $name, $color in $colors-alt {
+    .text-#{$name} {
+      color: #{$color} !important;
+    }
   }
 }

build/scss/_timeline.scss

@@ -9,9 +9,9 @@
   // The line
   &::before {
     @include border-radius($border-radius);
-    background: $gray-300;
+    background-color: $gray-300;
     bottom: 0;
-    content: '';
+    content: "";
     left: 31px;
     margin: 0;
     position: absolute;
@@ -33,7 +33,7 @@
     > .timeline-item {
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
-      background: $white;
+      background-color: $white;
       color: $gray-700;
       margin-left: 60px;
       margin-right: 15px;
@@ -70,6 +70,11 @@
         > img {
           margin: 10px;
         }
+        > dl,
+        ol,
+        ul {
+          margin: 0;
+        }
       }
 
       > .timeline-footer {
@@ -83,11 +88,13 @@
     > .fas,
     > .far,
     > .fab,
-    > .glyphicon,
+    > .fal,
+    > .fad,
+    > .svg-inline--fa,
     > .ion {
-      background: $gray-500;
+      background-color: $gray-500;
       border-radius: 50%;
-      font-size: 15px;
+      font-size: 16px;
       height: 30px;
       left: 18px;
       line-height: 30px;
@@ -96,6 +103,9 @@
       top: 0;
       width: 30px;
     }
+    > .svg-inline--fa {
+      padding: 7px;
+    }
   }
   // Time label
   > .time-label {
@@ -113,7 +123,7 @@
   > div {
     > .timeline-item {
       @include box-shadow(none);
-      background: $gray-100;
+      background-color: $gray-100;
       border: 1px solid $gray-300;
 
       > .timeline-header {
@@ -122,3 +132,24 @@
     }
   }
 }
+
+.dark-mode {
+  .timeline {
+    &::before {
+      background-color: $gray-600;
+    }
+    > div > .timeline-item {
+      background-color: $dark;
+      color: $white;
+      border-color: $gray-600;
+
+      > .timeline-header {
+        color: $gray-400;
+        border-color: $gray-600;
+      }
+      > .time {
+        color: $gray-400;
+      }
+    }
+  }
+}

build/scss/_toasts.scss

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

build/scss/_users-list.scss

@@ -3,7 +3,7 @@
 //
 
 .users-list {
-  @extend .list-unstyled;
+  @include list-unstyled ();
 
   > li {
     float: left;
@@ -43,3 +43,12 @@
   color: darken($gray-500, 20%);
   font-size: 12px;
 }
+
+.dark-mode {
+  .users-list-name {
+    color: $gray-400;
+  }
+  .users-list-date {
+    color: $gray-500;
+  }
+}

build/scss/_variables-alt.scss

@@ -0,0 +1,107 @@
+//
+// Core: Variables for Dark Mode
+//
+
+// COLORS
+// --------------------------------------------------------
+
+// stylelint-disable
+// Gray color will be default in dark mode
+$white-alt:    $white !default;
+$gray-100-alt: $gray-100 !default;
+$gray-200-alt: $gray-200 !default;
+$gray-300-alt: $gray-300 !default;
+$gray-400-alt: $gray-400 !default;
+$gray-500-alt: $gray-500 !default;
+$gray-600-alt: $gray-600 !default;
+$gray-700-alt: $gray-700 !default;
+$gray-800-alt: $gray-800 !default;
+$gray-900-alt: $gray-900 !default;
+$black-alt:    $black !default;
+
+$grays-alt: () !default;
+$grays-alt: map-merge((
+  "100": $gray-100-alt,
+  "200": $gray-200-alt,
+  "300": $gray-300-alt,
+  "400": $gray-400-alt,
+  "500": $gray-500-alt,
+  "600": $gray-600-alt,
+  "700": $gray-700-alt,
+  "800": $gray-800-alt,
+  "900": $gray-900-alt
+), $grays-alt);
+
+// Below colors from bootwatch darkly
+$blue-alt:    #3f6791 !default;
+$indigo-alt:  #6610f2 !default;
+$purple-alt:  #6f42c1 !default;
+$pink-alt:    #e83e8c !default;
+$red-alt:     #e74c3c !default;
+$orange-alt:  #fd7e14 !default;
+$yellow-alt:  #f39c12 !default;
+$green-alt:   #00bc8c !default;
+$teal-alt:    #20c997 !default;
+$cyan-alt:    #3498db !default;
+
+// by darken function
+$lightblue-alt: lighten(#3c8dbc, 20%) !default;
+$navy-alt: lighten(#001f3f, 5%) !default;
+$olive-alt: lighten(#3d9970, 20%) !default;
+$lime-alt: lighten(#01ff70, 20%) !default;
+$fuchsia-alt: lighten(#f012be, 20%) !default;
+$maroon-alt: lighten(#d81b60, 20%) !default;
+$gray-x-light-alt: lighten(#d2d6de, 20%) !default;
+
+$colors-alt: () !default;
+$colors-alt: map-merge((
+  "blue":       $blue-alt,
+  "indigo":     $indigo-alt,
+  "purple":     $purple-alt,
+  "pink":       $pink-alt,
+  "red":        $red-alt,
+  "orange":     $orange-alt,
+  "yellow":     $yellow-alt,
+  "green":      $green-alt,
+  "teal":       $teal-alt,
+  "cyan":       $cyan-alt,
+  "white":      $white-alt,
+  "gray":       $gray-600-alt,
+  "gray-dark":  $gray-800-alt
+), $colors-alt);
+
+$primary-alt:       $blue-alt !default;
+$secondary-alt:     $gray-600-alt !default;
+$success-alt:       $green-alt !default;
+$info-alt:          $cyan-alt !default;
+$warning-alt:       $yellow-alt !default;
+$danger-alt:        $red-alt !default;
+$light-alt:         $gray-100-alt !default;
+$dark-alt:          $gray-800-alt !default;
+
+$theme-colors-alt: () !default;
+$theme-colors-alt: map-merge((
+  "primary":    $primary-alt,
+  "secondary":  $secondary-alt,
+  "success":    $success-alt,
+  "info":       $info-alt,
+  "warning":    $warning-alt,
+  "danger":     $danger-alt,
+  "light":      $light-alt,
+  "dark":       $dark-alt
+), $theme-colors-alt);
+
+$colors-alt: map-merge(
+  (
+    "lightblue": $lightblue-alt,
+    "navy": $navy-alt,
+    "olive": $olive-alt,
+    "lime": $lime-alt,
+    "fuchsia": $fuchsia-alt,
+    "maroon": $maroon-alt,
+  ),
+  $colors-alt
+);
+// stylelint-enable
+
+//

build/scss/_variables.scss

@@ -5,6 +5,7 @@
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
+$lightblue: #3c8dbc !default;
 $navy: #001f3f !default;
 $teal: #39cccc !default;
 $olive: #3d9970 !default;
@@ -16,13 +17,17 @@ $maroon: #d81b60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
-$colors: map-merge((
-    'navy': $navy,
-    'olive': $olive,
-    'lime': $lime,
-    'fuchsia': $fuchsia,
-    'maroon': $maroon,
-), $colors);
+$colors: map-merge(
+  (
+    "lightblue": $lightblue,
+    "navy": $navy,
+    "olive": $olive,
+    "lime": $lime,
+    "fuchsia": $fuchsia,
+    "maroon": $maroon,
+  ),
+  $colors
+);
 
 // LAYOUT
 // --------------------------------------------------------
@@ -31,31 +36,39 @@ $font-size-root: 1rem !default;
 
 // Sidebar
 $sidebar-width: 250px !default;
-$sidebar-padding-x: 0.5rem !default;
+$sidebar-padding-x: .5rem !default;
 $sidebar-padding-y: 0 !default;
+$sidebar-custom-height: 4rem !default;
+$sidebar-custom-height-lg: 6rem !default;
+$sidebar-custom-height-xl: 8rem !default;
+$sidebar-custom-padding-x: .85rem !default;
+$sidebar-custom-padding-y: .5rem !default;
 
 // Boxed layout maximum width
 $boxed-layout-max-width: 1250px !default;
 
-// When to show the smaller logo
-$screen-header-collapse: map-get($grid-breakpoints, md) !default;
-
 // Body background (Affects main content background only)
 $main-bg: #f4f6f9 !default;
 
+$dark-main-bg: lighten($dark, 7.5%) !important;
+
 // Content padding
 $content-padding-y: 0 !default;
 $content-padding-x: $navbar-padding-x !default;
 
+// IMAGE SIZES
+// --------------------------------------------------------
+$img-size-sm: 1.875rem !default;
+$img-size-md: 3.75rem !default;
+$img-size-lg: 6.25rem !default;
+$img-size-push: .625rem !default;
+
 // MAIN HEADER
 // --------------------------------------------------------
 $main-header-bottom-border-width: $border-width !default;
 $main-header-bottom-border-color: $gray-300 !default;
 $main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
 $main-header-link-padding-y: $navbar-padding-y !default;
-$main-header-link-padding-x: $navbar-padding-x !default;
-$main-header-brand-padding-y: $navbar-brand-padding-y !default;
-$main-header-brand-padding-x: $navbar-padding-x !default;
 $main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
 $main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;
 $nav-link-sm-padding-y: .35rem !default;
@@ -65,19 +78,19 @@ $main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bo
 
 
 // Main header skins
-$main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
-$main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
-$main-header-dark-form-control-focused-color: $gray-800 !default;
-$main-header-dark-form-control-border: 0 !default;
-$main-header-dark-form-control-focused-border: 0 !default;
-$main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-form-control-bg: $gray-800 !default;
+$main-header-dark-form-control-focused-bg: $gray-700 !default;
+$main-header-dark-form-control-focused-color: $gray-400 !default;
+$main-header-dark-form-control-border-color: $gray-600 !default;
+$main-header-dark-form-control-focused-border-color: $gray-600 !default;
+$main-header-dark-placeholder-color: rgba($white, .6) !default;
 
-$main-header-light-form-control-bg: darken($gray-100, 2%) !default;
-$main-header-light-form-control-focused-bg: $gray-200 !default;
-$main-header-light-form-control-focused-color: $gray-800 !default;
-$main-header-light-form-control-border: 0 !default;
-$main-header-light-form-control-focused-border: 0 !default;
-$main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
+$main-header-light-form-control-bg: darken($gray-200, 5%) !default;
+$main-header-light-form-control-focused-bg: darken($gray-200, 7.5%) !default;
+$main-header-light-form-control-focused-color: $gray-400 !default;
+$main-header-light-form-control-border-color: $gray-400 !default;
+$main-header-light-form-control-focused-border-color: darken($gray-400, 2.5%) !default;
+$main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default;
 
 // MAIN FOOTER
 // --------------------------------------------------------
@@ -90,44 +103,42 @@ $main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-foote
 $main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
 $main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
 $main-footer-height-sm: calc(#{$main-footer-height-sm-inner} + #{$main-footer-border-top-width}) !default;
-$main-footer-bg: $white;
+$main-footer-bg: $white !default;
 
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
 // Dark sidebar
 $sidebar-dark-bg: $dark !default;
-$sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
-$sidebar-dark-color: #C2C7D0 !default;
+$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
+$sidebar-dark-color: #c2c7d0 !default;
 $sidebar-dark-hover-color: $white !default;
 $sidebar-dark-active-color: $white !default;
 $sidebar-dark-submenu-bg: transparent !default;
-$sidebar-dark-submenu-color: #C2C7D0 !default;
+$sidebar-dark-submenu-color: #c2c7d0 !default;
 $sidebar-dark-submenu-hover-color: $white !default;
 $sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
 $sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
-$sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
-$sidebar-dark-header-color: $white !default;
+$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
 
 // Light sidebar
 $sidebar-light-bg: $white !default;
-$sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%) !default;
+$sidebar-light-hover-bg: rgba($black, .1) !default;
 $sidebar-light-color: $gray-800 !default;
 $sidebar-light-hover-color: $gray-900 !default;
-$sidebar-light-active-color: $white !default;
+$sidebar-light-active-color: $black !default;
 $sidebar-light-submenu-bg: transparent !default;
 $sidebar-light-submenu-color: #777 !default;
-$sidebar-light-submenu-hover-color: #000 !default;
+$sidebar-light-submenu-hover-color: $black !default;
 $sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
 $sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
 $sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
-$sidebar-light-header-color: $gray-800 !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
 $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);
-$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2);
+$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;
 
 // CONTROL SIDEBAR
 // --------------------------------------------------------
@@ -138,50 +149,43 @@ $control-sidebar-width: $sidebar-width !default;
 $card-border-color: $gray-100 !default;
 $card-dark-border-color: lighten($gray-900, 10%) !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
-$card-title-font-size: 1.1rem;
-$card-title-font-size-sm: 1rem;
-$card-title-font-weight: $font-weight-normal;
-$card-nav-link-padding-sm-y: .4rem;
-$card-nav-link-padding-sm-x: .8rem;
-
+$card-title-font-size: 1.1rem !default;
+$card-title-font-size-sm: 1rem !default;
+$card-title-font-weight: $font-weight-normal !default;
+$card-nav-link-padding-sm-y: .4rem !default;
+$card-nav-link-padding-sm-x: .8rem !default;
+$card-img-size: $img-size-sm !default;
 
 // PROGRESS BARS
 // --------------------------------------------------------
 $progress-bar-border-radius: 1px !default;
-$progress-bar-sm-border-radius: 1px !default;
-$progress-bar-xs-border-radius: 1px !default;
 
 // DIRECT CHAT
 // --------------------------------------------------------
-$direct-chat-height: 250px !default;
 $direct-chat-default-msg-bg: $gray-x-light !default;
 $direct-chat-default-font-color: #444 !default;
 $direct-chat-default-msg-border-color: $gray-x-light !default;
 
-// CHAT WIDGET
-// --------------------------------------------------------
-$attachment-border-radius: 3px !default;
-
 // Z-INDEX
 // --------------------------------------------------------
 $zindex-main-header: $zindex-fixed + 4 !default;
 $zindex-main-sidebar: $zindex-fixed + 8 !default;
 $zindex-main-footer: $zindex-fixed + 2 !default;
 $zindex-control-sidebar: $zindex-fixed + 1 !default;
-$zindex-sidebar-mini-links: 010 !default;
 $zindex-toasts: $zindex-main-sidebar + 2 !default;
+$zindex-preloader: 9999 !default;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
 
 // Transition global options
-$transition-speed: 0.3s !default;
+$transition-speed: .3s !default;
 $transition-fn: ease-in-out !default;
 
 // TEXT
 // --------------------------------------------------------
-$font-size-xs: ($font-size-base * .75);
-$font-size-xl: ($font-size-base * 2);
+$font-size-xs: ($font-size-base * .75) !default;
+$font-size-xl: ($font-size-base * 2) !default;
 
 
 // BUTTON
@@ -196,7 +200,21 @@ $button-line-height-xs: $line-height-sm !default;
 $button-font-size-xs: ($font-size-base * .75) !default;
 $button-border-radius-xs: .15rem !default;
 
-  
+
+// ELEVATION
+// --------------------------------------------------------
+$elevations: ();
+$elevations: map-merge(
+  (
+    1: unquote("0 1px 3px " + rgba($black, .12) + ", 0 1px 2px " + rgba($black, .24)),
+    2: unquote("0 3px 6px " + rgba($black, .16) + ", 0 3px 6px " + rgba($black, .23)),
+    3: unquote("0 10px 20px " + rgba($black, .19) + ", 0 6px 6px " + rgba($black, .23)),
+    4: unquote("0 14px 28px " + rgba($black, .25) + ", 0 10px 10px " + rgba($black, .22)),
+    5: unquote("0 19px 38px " + rgba($black, .3) + ", 0 15px 12px " + rgba($black, .22)),
+  ),
+  $elevations
+);
+
 // RIBBON
 // --------------------------------------------------------
 $ribbon-border-size: 3px !default;
@@ -210,7 +228,7 @@ $ribbon-right: -2px !default;
 $ribbon-lg-wrapper-size: 120px !default;
 $ribbon-lg-width: 160px !default;
 $ribbon-lg-top: 26px !default;
-$ribbon-lg-right: 0px !default;
+$ribbon-lg-right: 0 !default;
 $ribbon-xl-wrapper-size: 180px !default;
 $ribbon-xl-width: 240px !default;
 $ribbon-xl-top: 47px !default;

build/scss/adminlte.scss

@@ -0,0 +1,25 @@
+/*!
+ *   AdminLTE v3.1.0
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// Bootstrap
+// ---------------------------------------------------
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/bootstrap";
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import "variables";
+@import "variables-alt";
+@import "mixins";
+
+@import "parts/core";
+@import "parts/components";
+@import "parts/extra-components";
+@import "parts/pages";
+@import "parts/plugins";
+@import "parts/miscellaneous";

build/scss/mixins/_accent.scss

@@ -0,0 +1,104 @@
+//
+// Mixins: Accent
+//
+
+// Accent Variant
+@mixin accent-variant($name, $color) {
+  $link-color: $color;
+  .accent-#{$name} {
+    $link-hover-color: darken($color, 15%);
+    $pagination-active-bg: $color;
+    $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),
+    .nav-tabs .nav-link {
+      color: $link-color;
+
+      @include hover () {
+        color: $link-hover-color;
+      }
+    }
+
+    .dropdown-item {
+      &:active,
+      &.active {
+        background-color: $color;
+        color: color-yiq($color);
+      }
+    }
+
+    .custom-control-input:checked ~ .custom-control-label {
+      &::before {
+        background-color: $color;
+        border-color: darken($color, 20%);
+      }
+
+      &::after {
+        $new-color: color-yiq($color);
+        background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, "#", "%23"), str-replace(#{$new-color}, "#", "%23"));
+      }
+    }
+
+    .form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
+    .custom-select:focus,
+    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
+    .custom-file-input:focus ~ .custom-file-label {
+      border-color: lighten($color, 25%);
+    }
+
+    .page-item {
+      .page-link {
+        color: $link-color;
+      }
+
+      &.active a,
+      &.active .page-link {
+        background-color: $pagination-active-bg;
+        border-color: $pagination-active-border-color;
+        color: $pagination-active-color;
+      }
+
+      &.disabled a,
+      &.disabled .page-link {
+        background-color: $pagination-disabled-bg;
+        border-color: $pagination-disabled-border-color;
+        color: $pagination-disabled-color;
+      }
+    }
+
+    [class*="sidebar-dark-"] {
+      .sidebar {
+        a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
+          color: $sidebar-dark-color;
+
+          @include hover () {
+            color: $sidebar-dark-hover-color;
+          }
+        }
+      }
+    }
+
+    [class*="sidebar-light-"] {
+      .sidebar {
+        a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
+          color: $sidebar-light-color;
+
+          @include hover () {
+            color: $sidebar-light-hover-color;
+          }
+        }
+      }
+    }
+  }
+  .dark-mode.accent-#{$name} {
+    .page-item {
+      .page-link {
+        &:hover,
+        &:focus {
+          color: lighten($link-color, 5%);
+        }
+      }
+    }
+  }
+}

build/scss/mixins/_animations.scss

@@ -0,0 +1,119 @@
+//
+// Mixins: Animation
+//
+
+
+@keyframes flipInX {
+  0% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    transition-timing-function: ease-in;
+    opacity: 0;
+  }
+
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    transition-timing-function: ease-in;
+  }
+
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    opacity: 1;
+  }
+
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+
+  100% {
+    transform: perspective(400px);
+  }
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -2px) rotate(-2deg);
+  }
+  20% {
+    transform: translate(-3px, 0) rotate(3deg);
+  }
+  30% {
+    transform: translate(0, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(2px, 1px) rotate(-2deg);
+  }
+  80% {
+    transform: translate(-1px, -1px) rotate(4deg);
+  }
+  90% {
+    transform: translate(2px, 2px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+
+@keyframes wobble {
+  0% {
+    transform: none;
+  }
+
+  15% {
+    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+  }
+
+  30% {
+    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+  }
+
+  45% {
+    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+  }
+
+  60% {
+    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+  }
+
+  75% {
+    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+  }
+
+  100% {
+    transform: none;
+  }
+}
+
+//

build/scss/mixins/_backgrounds.scss

@@ -0,0 +1,64 @@
+//
+// Mixins: Backgrounds
+//
+
+// Background Variant
+@mixin background-variant($name, $color) {
+  .bg-#{$name} {
+    background-color: #{$color} !important;
+
+    &,
+    > a {
+      color: color-yiq($color) !important;
+    }
+
+    &.btn {
+      &:hover {
+        border-color: darken($color, 10%);
+        color: darken(color-yiq($color), 7.5%);
+      }
+
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      &:active,
+      &.active {
+        background-color: darken($color, 10%) !important;
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
+      }
+    }
+  }
+}
+
+// Background Gradient Variant
+@mixin background-gradient-variant($name, $color) {
+  .bg-gradient-#{$name} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+    color: color-yiq($color);
+
+    &.btn {
+      &.disabled,
+      &:disabled,
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-image: none !important;
+      }
+
+      &:hover {
+        background: $color linear-gradient(180deg, mix($body-bg, darken($color, 7.5%), 15%), darken($color, 7.5%)) repeat-x !important;
+        border-color: darken($color, 10%);
+        color: darken(color-yiq($color), 7.5%);
+      }
+
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      &:active,
+      &.active {
+        background: $color linear-gradient(180deg, mix($body-bg, darken($color, 10%), 15%), darken($color, 10%)) repeat-x !important;
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
+      }
+    }
+  }
+}