update dist files to latest release (v3.2)

Bumps [postcss-cli](https://github.com/postcss/postcss-cli) from 8.3.1 to 9.1.0.
- [Release notes](https://github.com/postcss/postcss-cli/releases)
- [Changelog](https://github.com/postcss/postcss-cli/blob/master/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss-cli/compare/8.3.1...9.1.0)

---
updated-dependencies:
- dependency-name: postcss-cli
  dependency-type: direct:development
  update-type: version-update:semver-major
...

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

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

.bundlewatch.config.json

@@ -2,59 +2,67 @@
   "files": [
     {
       "path": "./dist/css/adminlte.css",
-      "maxSize": "82 kB"
+      "maxSize": "128.3 kB"
     },
     {
       "path": "./dist/css/adminlte.min.css",
-      "maxSize": "77.8 kB"
+      "maxSize": "121.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.css",
-      "maxSize": "16 kB"
+      "maxSize": "28.6 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.min.css",
-      "maxSize": "15.4 kB"
+      "maxSize": "27.8 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.css",
-      "maxSize": "47 kB"
+      "maxSize": "72.2 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.core.min.css",
-      "maxSize": "44 kB"
+      "maxSize": "69.4 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.extra-components.css",
-      "maxSize": "4 kB"
+      "maxSize": "4.6 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.extra-components.min.css",
-      "maxSize": "4 kB"
+      "maxSize": "4.5 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.light.css",
+      "maxSize": "94 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.light.min.css",
+      "maxSize": "89 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.pages.css",
-      "maxSize": "3 kB"
+      "maxSize": "3.5 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.pages.min.css",
-      "maxSize": "3 kB"
+      "maxSize": "3.1 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.plugins.css",
-      "maxSize": "17 kB"
+      "maxSize": "22.2 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.plugins.min.css",
-      "maxSize": "16.6 kB"
+      "maxSize": "21.5 kB"
     },
     {
       "path": "./dist/js/adminlte.js",
-      "maxSize": "15 kB"
+      "maxSize": "16.4 kB"
     },
     {
       "path": "./dist/js/adminlte.min.js",
-      "maxSize": "10.5 kB"
+      "maxSize": "10.9 kB"
     }
   ]
 }

.dockerignore

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

.eslintrc.json

@@ -5,14 +5,19 @@
     "plugin:import/errors",
     "plugin:import/warnings",
     "plugin:unicorn/recommended",
-    "xo/esnext",
+    "xo",
     "xo/browser"
   ],
   "env": {
     "jquery": true
   },
   "rules": {
+    "arrow-body-style": "off",
     "capitalized-comments": "off",
+    "comma-dangle": [
+      "error",
+      "never"
+    ],
     "eqeqeq": "off",
     "indent": [
       "error",
@@ -39,22 +44,29 @@
       "error",
       "always"
     ],
+    "operator-linebreak": [
+      "error",
+      "after"
+    ],
     "prefer-template": "error",
     "prefer-named-capture-group": "off",
+
     "semi": [
       "error",
       "never"
     ],
     "unicorn/filename-case": "off",
-    "unicorn/import-index": "off",
-    "unicorn/no-fn-reference-in-iterator": "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-dataset": "off",
+    "unicorn/prefer-dom-node-append": "off",
+    "unicorn/prefer-dom-node-dataset": "off",
+    "unicorn/prefer-dom-node-remove": "off",
+    "unicorn/prefer-export-from": "off",
     "unicorn/prefer-includes": "off",
-    "unicorn/prefer-node-append": "off",
-    "unicorn/prefer-node-remove": "off",
     "unicorn/prefer-number-properties": "off",
     "unicorn/prefer-optional-catch-binding": "off",
     "unicorn/prefer-query-selector": "off",

.gitattributes

@@ -1,2 +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 14 or higher/npm (node package manager)
+    * Delete ./package-lock.json file
+    * `npm install` (install npm deps)
+    * `npm run dev` (developer mode, autocompile with browsersync support for live demo)
+    * Make your changes only in ./build Folder OR package.json OR ./dist/js/demo.js OR package-lock.json OR ./dist/js/pages/ OR ./docs OR in any html files which are necessary for contribution
+    * Do not make changes in ./dist/css/ AND ./dist/js/ AND ./plugins Because it contains compiled files and do not include in PR (Pull Request)
+    * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request)
+4. Create a pull request
+
+## Online one-click setup for contributing
+
+You can use Gitpod(an online IDE which is free for Open Source) for working on issues or making PRs (Pull Requests). 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

@@ -2,7 +2,7 @@
 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.x
+labels: type:bug, version:3.1.x
 assignees: ''
 
 ---

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

@@ -1,8 +1,8 @@
 ---
-name: Feature request for AdminLTE v3.x
+name: Feature request for AdminLTE v4.x
 about: Suggest an idea for this project
 title: "[FEATURE]"
-labels: type:enhancement, version:3.x
+labels: type:enhancement, version:4.x
 assignees: ''
 
 ---

.github/codeql/codeql-config.yml

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

.github/dependabot.yml

@@ -1,5 +1,6 @@
 version: 2
 updates:
+  # for master branch
   - package-ecosystem: npm
     directory: "/"
     schedule:
@@ -7,7 +8,12 @@ updates:
       day: monday
       time: "03:00"
     open-pull-requests-limit: 10
+    target-branch: "master"
+    labels:
+      - dependencies
+      - version:3.1.x
     versioning-strategy: increase
+    rebase-strategy: disabled
   - package-ecosystem: bundler
     directory: "/docs/"
     schedule:
@@ -16,3 +22,19 @@ updates:
       time: "03:00"
     open-pull-requests-limit: 10
     versioning-strategy: increase
+    rebase-strategy: disabled
+
+  # for v4-dev branch
+  - package-ecosystem: npm
+    directory: "/"
+    schedule:
+      interval: weekly
+      day: tuesday
+      time: "03:00"
+    open-pull-requests-limit: 10
+    target-branch: "v4-dev"
+    labels:
+      - dependencies
+      - version:4.x
+    versioning-strategy: increase
+    rebase-strategy: disabled

.github/workflows/ci.yml

@@ -4,12 +4,13 @@ on:
   push:
     branches:
       - master
+      - v4-dev
   pull_request:
     branches:
       - "**"
 
 env:
-  CI: true
+  FORCE_COLOR: 2
 
 jobs:
   run:
@@ -19,9 +20,8 @@ jobs:
       fail-fast: false
       matrix:
         node:
-          - "10.x"
-          - "12.x"
           - "14.x"
+          - "16.x"
         os:
           - "ubuntu-latest"
           - "macos-latest"
@@ -32,7 +32,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node }}
 
@@ -45,10 +45,10 @@ jobs:
         uses: actions/cache@v2
         with:
           path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-v${{ env.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          key: ${{ runner.os }}-node-v${{ matrix.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 }}-
+            ${{ 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
@@ -58,6 +58,6 @@ jobs:
 
       - name: Run bundlewatch
         run: npm run bundlewatch
-        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.node, '12')
+        if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.node, '16')
         env:
           BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"

.github/workflows/codeql.yml

@@ -0,0 +1,36 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches:
+      - master
+      - v4-dev
+      - "!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

@@ -4,14 +4,15 @@ on:
   push:
     branches:
       - master
+      - v4-dev
   pull_request:
     branches:
       - "**"
 
 env:
-  CI: true
-  NODE: 12.x
-  RUBY: 2.6.x
+  FORCE_COLOR: 2
+  NODE: 16.x
+  RUBY: 2.7
 
 jobs:
   run:
@@ -22,55 +23,36 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: "${{ env.NODE }}"
 
       - name: Set up Ruby
-        uses: actions/setup-ruby@v1
+        uses: ruby/setup-ruby@v1
         with:
-          ruby-version: ${{ env.RUBY }}
+          ruby-version: "${{ env.RUBY }}"
+          bundler-cache: true
+          working-directory: docs
 
-      - name: Disable gem docs
-        run: 'echo "gem: --no-document" > ~/.gemrc'
-
-      - name: Get npm cache directory
-        id: npm-cache
+      - name: Version info
         run: |
-          echo "::set-output name=dir::$(npm config get cache)"
+          ruby --version
+          gem --version
+          bundle --version
+          java -version
 
       - name: Set up npm cache
         uses: actions/cache@v2
         with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-v${{ env.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          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: Set up Ruby cache
-        uses: actions/cache@v2
-        with:
-          path: docs/vendor/bundle
-          key: ${{ runner.os }}-ruby-v${{ env.RUBY }}-${{ hashFiles('docs/Gemfile') }}-${{ hashFiles('docs/Gemfile.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-ruby-v${{ env.RUBY }}-${{ hashFiles('docs/Gemfile') }}-${{ hashFiles('docs/Gemfile.lock') }}
-            ${{ runner.os }}-ruby-v${{ env.RUBY }}-
-
-      - name: Set up Bundler
-        run: gem install bundler -v "~> 1.17"
-
-      - run: ruby --version
-      - run: gem --version
-      - run: bundle --version
-      - run: java -version
+            ${{ 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: Install bundler dependencies
-        run: bundle install --gemfile docs/Gemfile --deployment --jobs=4 --retry=3 --clean
-
       - name: Build docs
         run: npm run docs-compile
 

.github/workflows/lint.yml

@@ -4,13 +4,14 @@ on:
   push:
     branches:
       - master
+      - v4-dev
   pull_request:
     branches:
       - "**"
 
 env:
-  CI: true
-  NODE: 12.x
+  FORCE_COLOR: 2
+  NODE: 16.x
 
 jobs:
   run:
@@ -21,7 +22,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: "${{ env.NODE }}"
 
@@ -29,10 +30,10 @@ jobs:
         uses: actions/cache@v2
         with:
           path: ~/.npm
-          key: ${{ runner.os }}-node-v${{ env.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          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 }}-
+            ${{ 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

.stylelintignore

@@ -1,3 +1,5 @@
+**/*.html
+**/*.md
 **/*.min.css
 **/dist/
 **/docs_html/

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

Dockerfile

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

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2020 ColorlibHQ
+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,11 +1,13 @@
-# Introduction
+# [AdminLTE - Bootstrap 4 Admin Dashboard](https://adminlte.io)
 
 [![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)
-[![CDNJS](https://img.shields.io/cdnjs/v/admin-lte.svg)](https://cdnjs.com/libraries/admin-lte)
+[![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
 [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/ColorlibHQ/AdminLTE)
+[![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz)
 
-**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4.5](https://getbootstrap.com/)** framework and also the JS/jQuery plugin.
+**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.
 
 **Preview on [AdminLTE.io](https://adminlte.io/themes/v3)**
@@ -20,49 +22,45 @@ prices. Visit <https://adminlte.io/premium> for more information.
 **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 & Changelog:
-
-Download from GitHub latest release [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/latest).
-Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the 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).
 
+## 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.2/dist/js/adminlte.min.js"></script>
+```
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
+```
 ### Using The Command Line:
-
-_**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or higher._
-
-- **Via npm**
-
-    ```bash
-    npm install admin-lte@^3.0 --save
-    ```
-
-- **Via Yarn**
-
-    ```bash
-    yarn add admin-lte@^3.0
-    ```
-
-- **Via Composer**
-
-    ```bash
-    composer require "almasaeed2010/adminlte=~3.0"
-    ```
-
-- **Via Git**
-
-    Clone to your machine
-
-    ```bash
-    git clone https://github.com/ColorlibHQ/AdminLTE.git
-    ```
+_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
+#### Via npm
+```bash
+npm install admin-lte@^3.2 --save
+```
+#### Via Yarn
+```bash
+yarn add admin-lte@^3.2
+```
+#### Via Composer
+```bash
+composer require "almasaeed2010/adminlte=~3.2"
+```
+#### 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
+Visit the [online documentation](https://adminlte.io/docs/3.2/) for the most
 updated guide. Information will be added on a weekly basis.
 
 ## Browsers support
@@ -71,44 +69,13 @@ updated guide. Information will be added on a weekly basis.
 | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-## How to Contribute
+## Light Mode (Only Dark Mode Removed)
+You can use light-mode-only version, if you are not using dark mode and also file size less without dark-mode.
 
-Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
+File Location `./dist/css/alt/adminlte.light.css`
 
-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 `yarn dev` to start the server.
-
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
-
-### Compile dist files
+## Compile dist files
 
 To compile the dist files you need Node.js/npm, clone/download the repo then:
 
@@ -116,6 +83,14 @@ To compile the dist files you need Node.js/npm, clone/download the repo then:
 2. _Optional:_ `npm run dev` (developer mode, autocompile with browsersync support for live demo)
 3. `npm run production` (compile css/js files)
 
+
+## Contributing
+
+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.
+
+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/>.
+
+
 ## License
 
 AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](https://opensource.org/licenses/MIT).

build/config/.eslintrc.json

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

build/config/postcss.config.js

@@ -1,14 +1,14 @@
 'use strict'
 
-module.exports = () => ({
+module.exports = {
   map: {
     inline: false,
     annotation: true,
     sourcesContent: true
   },
-  plugins: {
-    autoprefixer: {
+  plugins: [
+    require('autoprefixer')({
       cascade: false
-    }
-  }
-})
+    })
+  ]
+}

build/js/AdminLTE.js

@@ -9,6 +9,7 @@ import IFrame from './IFrame'
 import Layout from './Layout'
 import PushMenu from './PushMenu'
 import SidebarSearch from './SidebarSearch'
+import NavbarSearch from './NavbarSearch'
 import Toasts from './Toasts'
 import TodoList from './TodoList'
 import Treeview from './Treeview'
@@ -25,6 +26,7 @@ export {
   Layout,
   PushMenu,
   SidebarSearch,
+  NavbarSearch,
   Toasts,
   TodoList,
   Treeview

build/js/CardRefresh.js

@@ -34,13 +34,15 @@ const Default = {
   content: '.card-body',
   loadInContent: true,
   loadOnInit: true,
+  loadErrorTemplate: true,
   responseType: '',
   overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
-  onLoadStart() {
-  },
+  errorTemplate: '<span class="text-danger"></span>',
+  onLoadStart() {},
   onLoadDone(response) {
     return response
-  }
+  },
+  onLoadFail(_jqXHR, _textStatus, _errorThrown) {}
 }
 
 class CardRefresh {
@@ -75,6 +77,16 @@ class CardRefresh {
       this._settings.onLoadDone.call($(this), response)
       this._removeOverlay()
     }, this._settings.responseType !== '' && this._settings.responseType)
+    .fail((jqXHR, textStatus, errorThrown) => {
+      this._removeOverlay()
+
+      if (this._settings.loadErrorTemplate) {
+        const msg = $(this._settings.errorTemplate).text(errorThrown)
+        this._parent.find(this._settings.content).empty().append(msg)
+      }
+
+      this._settings.onLoadFail.call($(this), jqXHR, textStatus, errorThrown)
+    })
 
     $(this._element).trigger($.Event(EVENT_LOADED))
   }
@@ -112,7 +124,7 @@ class CardRefresh {
       $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
     }
 
-    if (typeof config === 'string' && config.match(/load/)) {
+    if (typeof config === 'string' && /load/.test(config)) {
       data[config]()
     } else {
       data._init($(this))

build/js/CardWidget.js

@@ -186,7 +186,7 @@ class CardWidget {
       $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
     }
 
-    if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
+    if (typeof config === 'string' && /collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/.test(config)) {
       data[config]()
     } else if (typeof config === 'object') {
       data._init($(this))

build/js/ControlSidebar.js

@@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 
 const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
@@ -44,7 +45,9 @@ const CLASS_NAME_FOOTER_XL_FIXED = 'layout-xl-footer-fixed'
 const Default = {
   controlsidebarSlide: true,
   scrollbarTheme: 'os-theme-light',
-  scrollbarAutoHide: 'l'
+  scrollbarAutoHide: 'l',
+  target: SELECTOR_CONTROL_SIDEBAR,
+  animationSpeed: 300
 }
 
 /**
@@ -56,8 +59,6 @@ class ControlSidebar {
   constructor(element, config) {
     this._element = element
     this._config = config
-
-    this._init()
   }
 
   // Public
@@ -79,16 +80,24 @@ class ControlSidebar {
     }
 
     $(this._element).trigger($.Event(EVENT_COLLAPSED))
+
+    setTimeout(() => {
+      $(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
+    }, this._config.animationSpeed)
   }
 
-  show() {
+  show(toggle = false) {
     const $body = $('body')
     const $html = $('html')
 
+    if (toggle) {
+      $(SELECTOR_CONTROL_SIDEBAR).hide()
+    }
+
     // Collapse the control sidebar
     if (this._config.controlsidebarSlide) {
       $html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
-      $(SELECTOR_CONTROL_SIDEBAR).show().delay(10).queue(function () {
+      $(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()
@@ -107,21 +116,37 @@ class ControlSidebar {
 
   toggle() {
     const $body = $('body')
-    const shouldClose = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
-        $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
+    const { target } = this._config
 
-    if (shouldClose) {
+    const notVisible = !$(target).is(':visible')
+    const shouldClose = ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+      $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE))
+    const shouldToggle = notVisible && ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
+      $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE))
+
+    if (notVisible || shouldToggle) {
+      // Open the control sidebar
+      this.show(notVisible)
+    } else if (shouldClose) {
       // Close the control sidebar
       this.collapse()
-    } else {
-      // Open the control sidebar
-      this.show()
     }
   }
 
   // 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()
+    }
+
     this._fixHeight()
     this._fixScrollHeight()
 
@@ -141,8 +166,31 @@ class ControlSidebar {
     })
   }
 
+  _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
@@ -159,24 +207,11 @@ class ControlSidebar {
       top: $(window).scrollTop()
     }
 
-    const navbarFixed = (
-      $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)
-    ) && $(SELECTOR_HEADER).css('position') === 'fixed'
+    const navbarFixed = this._isNavbarFixed() && $(SELECTOR_HEADER).css('position') === 'fixed'
 
-    const footerFixed = (
-      $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)
-    ) && $(SELECTOR_FOOTER).css('position') === 'fixed'
+    const footerFixed = this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed'
 
-    const $controlSidebar = $(SELECTOR_CONTROL_SIDEBAR)
-    const $controlsidebarContent = $(`${SELECTOR_CONTROL_SIDEBAR}, ${SELECTOR_CONTROL_SIDEBAR} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
+    const $controlsidebarContent = $(`${this._config.target}, ${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
 
     if (positions.top === 0 && positions.bottom === 0) {
       $controlSidebar.css({
@@ -205,12 +240,22 @@ class ControlSidebar {
     } else {
       $controlSidebar.css('top', heights.header)
     }
+
+    if (footerFixed && navbarFixed) {
+      $controlsidebarContent.css('height', '100%')
+      $controlSidebar.css('height', '')
+    } else if (footerFixed || navbarFixed) {
+      $controlsidebarContent.css('height', '100%')
+      $controlsidebarContent.css('height', '')
+    }
   }
 
   _fixHeight() {
     const $body = $('body')
+    const $controlSidebar = $(`${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
 
     if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
+      $controlSidebar.attr('style', '')
       return
     }
 
@@ -222,19 +267,10 @@ class ControlSidebar {
 
     let sidebarHeight = heights.window - heights.header
 
-    if (
-      $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)
-    ) {
-      if ($(SELECTOR_FOOTER).css('position') === 'fixed') {
-        sidebarHeight = heights.window - heights.header - heights.footer
-      }
+    if (this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed') {
+      sidebarHeight = heights.window - heights.header - heights.footer
     }
 
-    const $controlSidebar = $(`${SELECTOR_CONTROL_SIDEBAR} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
     $controlSidebar.css('height', sidebarHeight)
 
     if (typeof $.fn.overlayScrollbars !== 'undefined') {
@@ -281,6 +317,10 @@ $(document).on('click', SELECTOR_DATA_TOGGLE, function (event) {
   ControlSidebar._jQueryInterface.call($(this), 'toggle')
 })
 
+$(document).ready(() => {
+  ControlSidebar._jQueryInterface.call($(SELECTOR_DATA_TOGGLE), '_init')
+})
+
 /**
  * jQuery API
  * ====================================================

build/js/Dropdown.js

@@ -25,8 +25,7 @@ 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 = {
-}
+const Default = {}
 
 /**
  * Class Definition

build/js/ExpandableTable.js

@@ -21,6 +21,7 @@ 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'
 
@@ -39,7 +40,7 @@ class ExpandableTable {
   init() {
     $(SELECTOR_DATA_TOGGLE).each((_, $header) => {
       const $type = $($header).attr(SELECTOR_ARIA_ATTR)
-      const $body = $($header).next().children().first().children()
+      const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
       if ($type === 'true') {
         $body.show()
       } else if ($type === 'false') {
@@ -50,20 +51,28 @@ class ExpandableTable {
   }
 
   toggleRow() {
-    const $element = this._element
+    let $element = this._element
+
+    if ($element[0].nodeName !== 'TR') {
+      $element = $element.parent()
+      if ($element[0].nodeName !== 'TR') {
+        $element = $element.parent()
+      }
+    }
+
     const time = 500
     const $type = $element.attr(SELECTOR_ARIA_ATTR)
-    const $body = $element.next().children().first().children()
+    const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
 
     $body.stop()
     if ($type === 'true') {
       $body.slideUp(time, () => {
-        $element.next().addClass('d-none')
+        $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().removeClass('d-none')
+      $element.next(SELECTOR_EXPANDABLE_BODY).removeClass('d-none')
       $body.slideDown(time)
       $element.attr(SELECTOR_ARIA_ATTR, 'true')
       $element.trigger($.Event(EVENT_EXPANDED))
@@ -81,7 +90,7 @@ class ExpandableTable {
         $(this).data(DATA_KEY, data)
       }
 
-      if (typeof operation === 'string' && operation.match(/init|toggleRow/)) {
+      if (typeof operation === 'string' && /init|toggleRow/.test(operation)) {
         data[operation]()
       }
     })

build/js/Fullscreen.js

@@ -19,6 +19,8 @@ const JQUERY_NO_CONFLICT = $.fn[NAME]
 const SELECTOR_DATA_WIDGET = '[data-widget="fullscreen"]'
 const SELECTOR_ICON = `${SELECTOR_DATA_WIDGET} i`
 
+const EVENT_FULLSCREEN_CHANGE = 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange'
+
 const Default = {
   minimizeIcon: 'fa-compress-arrows-alt',
   maximizeIcon: 'fa-expand-arrows-alt'
@@ -48,6 +50,17 @@ class Fullscreen {
     }
   }
 
+  toggleIcon() {
+    if (document.fullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement ||
+      document.msFullscreenElement) {
+      $(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon)
+    } else {
+      $(SELECTOR_ICON).removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon)
+    }
+  }
+
   fullscreen() {
     if (document.documentElement.requestFullscreen) {
       document.documentElement.requestFullscreen()
@@ -56,8 +69,6 @@ class Fullscreen {
     } else if (document.documentElement.msRequestFullscreen) {
       document.documentElement.msRequestFullscreen()
     }
-
-    $(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon)
   }
 
   windowed() {
@@ -68,8 +79,6 @@ class Fullscreen {
     } else if (document.msExitFullscreen) {
       document.msExitFullscreen()
     }
-
-    $(SELECTOR_ICON).removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon)
   }
 
   // Static
@@ -86,7 +95,7 @@ class Fullscreen {
 
     $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
 
-    if (typeof config === 'string' && config.match(/toggle|fullscreen|windowed/)) {
+    if (typeof config === 'string' && /toggle|toggleIcon|fullscreen|windowed/.test(config)) {
       plugin[config]()
     } else {
       plugin.init()
@@ -102,6 +111,10 @@ $(document).on('click', SELECTOR_DATA_WIDGET, function () {
   Fullscreen._jQueryInterface.call($(this), 'toggle')
 })
 
+$(document).on(EVENT_FULLSCREEN_CHANGE, () => {
+  Fullscreen._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggleIcon')
+})
+
 /**
  * jQuery API
  * ====================================================

build/js/IFrame.js

@@ -23,13 +23,16 @@ const SELECTOR_DATA_TOGGLE_SCROLL_RIGHT = '[data-widget="iframe-scrollright"]'
 const SELECTOR_DATA_TOGGLE_FULLSCREEN = '[data-widget="iframe-fullscreen"]'
 const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
 const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
-const SELECTOR_TAB_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .nav`
-const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
+const SELECTOR_TAB_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .nav`
+const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .navbar-nav`
 const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
-const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
+const SELECTOR_TAB_NAVBAR_NAV_LINK = `${SELECTOR_TAB_NAVBAR_NAV} .nav-link`
+const SELECTOR_TAB_CONTENT = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .tab-content`
 const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
 const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
+const SELECTOR_TAB_PANE = `${SELECTOR_TAB_CONTENT} .tab-pane`
 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'
@@ -48,6 +51,9 @@ const Default = {
   autoIframeMode: true,
   autoItemActive: true,
   autoShowNewTab: true,
+  autoDarkMode: false,
+  allowDuplicates: false,
+  allowReload: true,
   loadingScreen: true,
   useNavbarItems: true,
   scrollOffset: 40,
@@ -65,7 +71,6 @@ class IFrame {
   constructor(element, config) {
     this._config = config
     this._element = element
-
     this._init()
   }
 
@@ -84,14 +89,19 @@ class IFrame {
   }
 
   createTab(title, link, uniqueName, autoOpen) {
-    const tabId = `panel-${uniqueName}-${Math.floor(Math.random() * 1000)}`
-    const navId = `tab-${uniqueName}-${Math.floor(Math.random() * 1000)}`
+    let tabId = `panel-${uniqueName}`
+    let navId = `tab-${uniqueName}`
 
-    const newNavItem = `<li class="nav-item" role="presentation"><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(newNavItem)
+    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(newTabItem)
+    $(SELECTOR_TAB_CONTENT).append(unescape(escape(newTabItem)))
 
     if (autoOpen) {
       if (this._config.loadingScreen) {
@@ -99,12 +109,12 @@ class IFrame {
         $loadingScreen.fadeIn()
         $(`${tabId} iframe`).ready(() => {
           if (typeof this._config.loadingScreen === 'number') {
-            this.switchTab(`#${navId}`, this._config.loadingScreen)
+            this.switchTab(`#${navId}`)
             setTimeout(() => {
               $loadingScreen.fadeOut()
             }, this._config.loadingScreen)
           } else {
-            this.switchTab(`#${navId}`, this._config.loadingScreen)
+            this.switchTab(`#${navId}`)
             $loadingScreen.fadeOut()
           }
         })
@@ -122,7 +132,7 @@ class IFrame {
       $item = $(item).parent('a').clone()
     }
 
-    $item.find('.right').remove()
+    $item.find('.right, .search-path').remove()
     let title = $item.find('p').text()
     if (title === '') {
       title = $item.text()
@@ -133,15 +143,47 @@ class IFrame {
       return
     }
 
-    this.createTab(title, link, link.replace('.html', '').replace('./', '').replaceAll('/', '-'), autoOpen)
+    const uniqueName = unescape(link).replace('./', '').replace(/["#&'./:=?[\]]/gi, '-').replace(/(--)/gi, '')
+    const navId = `tab-${uniqueName}`
+
+    if (!this._config.allowDuplicates && $(`#${navId}`).length > 0) {
+      return this.switchTab(`#${navId}`, this._config.allowReload)
+    }
+
+    if ((!this._config.allowDuplicates && $(`#${navId}`).length === 0) || this._config.allowDuplicates) {
+      this.createTab(title, link, uniqueName, autoOpen)
+    }
   }
 
-  switchTab(item) {
+  switchTab(item, reload = false) {
     const $item = $(item)
     const tabId = $item.attr('href')
 
     $(SELECTOR_TAB_EMPTY).hide()
+
+    if (reload) {
+      const $loadingScreen = $(SELECTOR_TAB_LOADING)
+      if (this._config.loadingScreen) {
+        $loadingScreen.show(0, () => {
+          $(`${tabId} iframe`).attr('src', $(`${tabId} iframe`).attr('src')).ready(() => {
+            if (this._config.loadingScreen) {
+              if (typeof this._config.loadingScreen === 'number') {
+                setTimeout(() => {
+                  $loadingScreen.fadeOut()
+                }, this._config.loadingScreen)
+              } else {
+                $loadingScreen.fadeOut()
+              }
+            }
+          })
+        })
+      } else {
+        $(`${tabId} iframe`).attr('src', $(`${tabId} iframe`).attr('src'))
+      }
+    }
+
     $(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
+
     this._fixHeight()
 
     $item.tab('show')
@@ -153,18 +195,40 @@ class IFrame {
     }
   }
 
-  removeActiveTab() {
-    const $navItem = $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`)
-    const $navItemParent = $navItem.parent()
-    const navItemIndex = $navItem.index()
-    $navItem.remove()
-    $('.tab-pane.active').remove()
-
-    if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
+  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 prevNavItemIndex = navItemIndex - 1
-      this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a'))
+      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'))
+      }
     }
   }
 
@@ -172,9 +236,9 @@ class IFrame {
     if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
       $(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMinimize).addClass(this._config.iconMaximize)
       $('body').removeClass(CLASS_NAME_FULLSCREEN_MODE)
-      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('auto')
-      $(SELECTOR_CONTENT_WRAPPER).height('auto')
-      $(SELECTOR_CONTENT_IFRAME).height('auto')
+      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('100%')
+      $(SELECTOR_CONTENT_WRAPPER).height('100%')
+      $(SELECTOR_CONTENT_IFRAME).height('100%')
     } else {
       $(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
       $('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
@@ -187,11 +251,30 @@ class IFrame {
   // Private
 
   _init() {
+    const usingDefTab = ($(SELECTOR_TAB_CONTENT).children().length > 2)
+
+    this._setupListeners()
+    this._fixHeight(true)
+
+    if (usingDefTab) {
+      const $el = $(`${SELECTOR_TAB_PANE}`).first()
+      // eslint-disable-next-line no-console
+      console.log($el)
+      const uniqueName = $el.attr('id').replace('panel-', '')
+      const navId = `#tab-${uniqueName}`
+
+      this.switchTab(navId, true)
+    }
+  }
+
+  _initFrameElement() {
     if (window.frameElement && this._config.autoIframeMode) {
-      $('body').addClass(CLASS_NAME_IFRAME_MODE)
-    } else if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
-      this._setupListeners()
-      this._fixHeight(true)
+      const $body = $('body')
+      $body.addClass(CLASS_NAME_IFRAME_MODE)
+
+      if (this._config.autoDarkMode) {
+        $body.addClass('dark-mode')
+      }
     }
   }
 
@@ -206,26 +289,38 @@ class IFrame {
         this._fixHeight()
       }, 1)
     })
-    $(document).on('click', SELECTOR_SIDEBAR_MENU_ITEM, e => {
-      e.preventDefault()
-      this.openTabSidebar(e.target)
-    })
-
-    if (this._config.useNavbarItems) {
-      $(document).on('click', `${SELECTOR_HEADER_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`, e => {
+    if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
+      $(document).on('click', `${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_SIDEBAR_SEARCH_ITEM}`, e => {
         e.preventDefault()
         this.openTabSidebar(e.target)
       })
+      if (this._config.useNavbarItems) {
+        $(document).on('click', `${SELECTOR_HEADER_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`, e => {
+          e.preventDefault()
+          this.openTabSidebar(e.target)
+        })
+      }
     }
 
-    $(document).on('click', SELECTOR_TAB_NAVBAR_NAV_ITEM, e => {
+    $(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()
-      this.removeActiveTab()
+      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()
@@ -299,11 +394,11 @@ class IFrame {
   _fixHeight(tabEmpty = false) {
     if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
       const windowHeight = $(window).height()
-      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(windowHeight)
+      const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
+      $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}, ${SELECTOR_CONTENT_IFRAME}`).height(windowHeight - navbarHeight)
       $(SELECTOR_CONTENT_WRAPPER).height(windowHeight)
-      $(SELECTOR_CONTENT_IFRAME).height(windowHeight)
     } else {
-      const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('min-height'))
+      const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('height'))
       const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
       if (tabEmpty == true) {
         setTimeout(() => {
@@ -317,17 +412,26 @@ class IFrame {
 
   // Static
 
-  static _jQueryInterface(operation, ...args) {
-    let data = $(this).data(DATA_KEY)
-    const _options = $.extend({}, Default, $(this).data())
+  static _jQueryInterface(config) {
+    if ($(SELECTOR_DATA_TOGGLE).length > 0) {
+      let data = $(this).data(DATA_KEY)
 
-    if (!data) {
-      data = new IFrame(this, _options)
-      $(this).data(DATA_KEY, data)
-    }
+      if (!data) {
+        data = $(this).data()
+      }
 
-    if (typeof operation === 'string' && operation.match(/createTab|openTabSidebar|switchTab|removeActiveTab/)) {
-      data[operation](...args)
+      const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
+      localStorage.setItem('AdminLTE:IFrame:Options', JSON.stringify(_options))
+
+      const plugin = new IFrame($(this), _options)
+
+      $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
+
+      if (typeof config === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(config)) {
+        plugin[config]()
+      }
+    } else {
+      new IFrame($(this), JSON.parse(localStorage.getItem('AdminLTE:IFrame:Options')))._initFrameElement()
     }
   }
 }

build/js/Layout.js

@@ -26,18 +26,21 @@ 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 CLASS_NAME_LAYOUT_TOP_NAV = 'layout-top-nav'
+const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
 
 const Default = {
   scrollbarTheme: 'os-theme-light',
   scrollbarAutoHide: 'l',
   panelAutoHeight: true,
   panelAutoHeightMode: 'min-height',
+  preloadDuration: 200,
   loginRegisterAutoHeight: true
 }
 
@@ -50,8 +53,6 @@ class Layout {
   constructor(element, config) {
     this._config = config
     this._element = element
-
-    this._init()
   }
 
   // Public
@@ -61,14 +62,14 @@ class Layout {
     let controlSidebar = 0
 
     if ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN) || $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) || extra === 'control_sidebar') {
-      controlSidebar = $(SELECTOR_CONTROL_SIDEBAR_CONTENT).height()
+      controlSidebar = $(SELECTOR_CONTROL_SIDEBAR_CONTENT).outerHeight()
     }
 
     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,
+      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
     }
 
@@ -83,11 +84,7 @@ class Layout {
 
     if (offset !== false) {
       if (max === heights.controlSidebar) {
-        if ($body.hasClass(CLASS_NAME_LAYOUT_TOP_NAV)) {
-          $contentSelector.css(this._config.panelAutoHeightMode, (max + offset) + heights.header + heights.footer)
-        } else {
-          $contentSelector.css(this._config.panelAutoHeightMode, (max + offset))
-        }
+        $contentSelector.css(this._config.panelAutoHeightMode, (max + offset))
       } else if (max === heights.window) {
         $contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header - heights.footer)
       } else {
@@ -103,10 +100,6 @@ class Layout {
       return
     }
 
-    if (offset !== false) {
-      $contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header - heights.footer)
-    }
-
     if (typeof $.fn.overlayScrollbars !== 'undefined') {
       $(SELECTOR_SIDEBAR).overlayScrollbars({
         className: this._config.scrollbarTheme,
@@ -116,6 +109,8 @@ class Layout {
           clickScrolling: true
         }
       })
+    } else {
+      $(SELECTOR_SIDEBAR).css('overflow-y', 'auto')
     }
   }
 
@@ -123,7 +118,11 @@ class Layout {
     const $body = $('body')
     const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
 
-    if ($selector.length === 0) {
+    if ($body.hasClass(CLASS_NAME_IFRAME_MODE)) {
+      $body.css('height', '100%')
+      $('.wrapper').css('height', '100%')
+      $('html').css('height', '100%')
+    } else if ($selector.length === 0) {
       $body.css('height', 'auto')
       $('html').css('height', 'auto')
     } else {
@@ -152,9 +151,18 @@ class Layout {
         this.fixLayoutHeight()
       })
 
+    $(SELECTOR_MAIN_SIDEBAR)
+      .on('mouseenter mouseleave', () => {
+        if ($('body').hasClass(CLASS_NAME_SIDEBAR_COLLAPSED)) {
+          this.fixLayoutHeight()
+        }
+      })
+
     $(SELECTOR_PUSHMENU_BTN)
       .on('collapsed.lte.pushmenu shown.lte.pushmenu', () => {
-        this.fixLayoutHeight()
+        setTimeout(() => {
+          this.fixLayoutHeight()
+        }, 300)
       })
 
     $(SELECTOR_CONTROL_SIDEBAR_BTN)
@@ -169,13 +177,19 @@ class Layout {
       this.fixLayoutHeight()
     })
 
-    $(document).ready(() => {
-      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) {
@@ -225,13 +239,13 @@ $(window).on('load', () => {
   Layout._jQueryInterface.call($('body'))
 })
 
-$(`${SELECTOR_SIDEBAR} a`).on('focusin', () => {
-  $(SELECTOR_MAIN_SIDEBAR).addClass(CLASS_NAME_SIDEBAR_FOCUSED)
-})
-
-$(`${SELECTOR_SIDEBAR} a`).on('focusout', () => {
-  $(SELECTOR_MAIN_SIDEBAR).removeClass(CLASS_NAME_SIDEBAR_FOCUSED)
-})
+$(`${SELECTOR_SIDEBAR} a`)
+  .on('focusin', () => {
+    $(SELECTOR_MAIN_SIDEBAR).addClass(CLASS_NAME_SIDEBAR_FOCUSED)
+  })
+  .on('focusout', () => {
+    $(SELECTOR_MAIN_SIDEBAR).removeClass(CLASS_NAME_SIDEBAR_FOCUSED)
+  })
 
 /**
  * jQuery API

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

@@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 
 const SELECTOR_TOGGLE_BUTTON = '[data-widget="pushmenu"]'
@@ -33,7 +34,8 @@ const CLASS_NAME_CLOSED = 'sidebar-closed'
 const Default = {
   autoCollapseSize: 992,
   enableRemember: false,
-  noTransitionAfterReload: true
+  noTransitionAfterReload: true,
+  animationSpeed: 300
 }
 
 /**
@@ -58,10 +60,8 @@ class PushMenu {
   expand() {
     const $bodySelector = $(SELECTOR_BODY)
 
-    if (this._options.autoCollapseSize) {
-      if ($(window).width() <= this._options.autoCollapseSize) {
-        $bodySelector.addClass(CLASS_NAME_OPEN)
-      }
+    if (this._options.autoCollapseSize && $(window).width() <= this._options.autoCollapseSize) {
+      $bodySelector.addClass(CLASS_NAME_OPEN)
     }
 
     $bodySelector.addClass(CLASS_NAME_IS_OPENING).removeClass(`${CLASS_NAME_COLLAPSED} ${CLASS_NAME_CLOSED}`).delay(50).queue(function () {
@@ -79,10 +79,8 @@ class PushMenu {
   collapse() {
     const $bodySelector = $(SELECTOR_BODY)
 
-    if (this._options.autoCollapseSize) {
-      if ($(window).width() <= this._options.autoCollapseSize) {
-        $bodySelector.removeClass(CLASS_NAME_OPEN).addClass(CLASS_NAME_CLOSED)
-      }
+    if (this._options.autoCollapseSize && $(window).width() <= this._options.autoCollapseSize) {
+      $bodySelector.removeClass(CLASS_NAME_OPEN).addClass(CLASS_NAME_CLOSED)
     }
 
     $bodySelector.addClass(CLASS_NAME_COLLAPSED)
@@ -92,6 +90,10 @@ class PushMenu {
     }
 
     $(this._element).trigger($.Event(EVENT_COLLAPSED))
+
+    setTimeout(() => {
+      $(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
+    }, this._options.animationSpeed)
   }
 
   toggle() {
@@ -184,7 +186,7 @@ class PushMenu {
         $(this).data(DATA_KEY, data)
       }
 
-      if (typeof operation === 'string' && operation.match(/collapse|expand|toggle/)) {
+      if (typeof operation === 'string' && /collapse|expand|toggle/.test(operation)) {
         data[operation]()
       }
     })

build/js/SidebarSearch.js

@@ -61,17 +61,17 @@ class SidebarSearch {
   // Public
 
   init() {
-    if ($(SELECTOR_DATA_WIDGET).length == 0) {
+    if ($(SELECTOR_DATA_WIDGET).length === 0) {
       return
     }
 
-    if ($(SELECTOR_DATA_WIDGET).next(SELECTOR_SEARCH_RESULTS).length == 0) {
+    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) {
+    if ($(SELECTOR_SEARCH_RESULTS).children(SELECTOR_SEARCH_LIST_GROUP).length === 0) {
       $(SELECTOR_SEARCH_RESULTS).append(
         $('<div />', { class: CLASS_NAME_LIST_GROUP })
       )
@@ -101,7 +101,7 @@ class SidebarSearch {
       this._addNotFound()
     } else {
       endResults.each((i, result) => {
-        $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(result.name, result.link, result.path))
+        $(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), encodeURI(result.link), result.path))
       })
     }
 
@@ -160,6 +160,8 @@ class SidebarSearch {
 
   _renderItem(name, link, path) {
     path = path.join(` ${this.options.arrowSign} `)
+    name = unescape(name)
+    link = decodeURI(link)
 
     if (this.options.highlightName || this.options.highlightPath) {
       const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase()
@@ -169,7 +171,7 @@ class SidebarSearch {
         name = name.replace(
           regExp,
           str => {
-            return `<b class="${this.options.highlightClass}">${str}</b>`
+            return `<strong class="${this.options.highlightClass}">${str}</strong>`
           }
         )
       }
@@ -178,20 +180,26 @@ class SidebarSearch {
         path = path.replace(
           regExp,
           str => {
-            return `<b class="${this.options.highlightClass}">${str}</b>`
+            return `<strong class="${this.options.highlightClass}">${str}</strong>`
           }
         )
       }
     }
 
-    return `<a href="${link}" class="list-group-item">
-        <div class="search-title">
-          ${name}
-        </div>
-        <div class="search-path">
-          ${path}
-        </div>
-      </a>`
+    const groupItemElement = $('<a/>', {
+      href: decodeURIComponent(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() {
@@ -212,7 +220,7 @@ class SidebarSearch {
 
     $(this).data(DATA_KEY, typeof config === 'object' ? config : data)
 
-    if (typeof config === 'string' && config.match(/init|toggle|close|open|search/)) {
+    if (typeof config === 'string' && /init|toggle|close|open|search/.test(config)) {
       plugin[config]()
     } else {
       plugin.init()
@@ -243,9 +251,7 @@ $(document).on('keyup', SELECTOR_SEARCH_INPUT, event => {
     return
   }
 
-  let timer = 0
-  clearTimeout(timer)
-  timer = setTimeout(() => {
+  setTimeout(() => {
     SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'search')
   }, 100)
 })

build/js/SiteSearch.js

@@ -1,117 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE SiteSearch.js
- * License MIT
- * --------------------------------------------
- */
-
-import $ from 'jquery'
-
-/**
- * Constants
- * ====================================================
- */
-
-const NAME = 'SiteSearch'
-const DATA_KEY = 'lte.site-search'
-const JQUERY_NO_CONFLICT = $.fn[NAME]
-
-const SELECTOR_TOGGLE_BUTTON = '[data-widget="site-search"]'
-const SELECTOR_SEARCH_BLOCK = '.site-search-block'
-const SELECTOR_SEARCH_BACKDROP = '.site-search-backdrop'
-const SELECTOR_SEARCH_INPUT = '.site-search-block .form-control'
-
-const CLASS_NAME_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(CLASS_NAME_OPEN)
-  }
-
-  close() {
-    $(SELECTOR_SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
-    $(SELECTOR_SEARCH_BACKDROP).hide(0)
-    $(SELECTOR_SEARCH_BLOCK).removeClass(CLASS_NAME_OPEN)
-  }
-
-  toggle() {
-    if ($(SELECTOR_SEARCH_BLOCK).hasClass(CLASS_NAME_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 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') !== '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
-}
-
-export default SiteSearch

build/js/Treeview.js

@@ -52,7 +52,7 @@ class Treeview {
   // Public
 
   init() {
-    $(`${SELECTOR_LI}${SELECTOR_OPEN} ${SELECTOR_TREEVIEW_MENU}`).css('display', 'block')
+    $(`${SELECTOR_LI}${SELECTOR_OPEN} ${SELECTOR_TREEVIEW_MENU}${SELECTOR_OPEN}`).css('display', 'block')
     this._setupListeners()
   }
 
@@ -83,7 +83,7 @@ class Treeview {
     treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
       $(this._element).trigger(collapsedEvent)
       treeviewMenu.find(`${SELECTOR_OPEN} > ${SELECTOR_TREEVIEW_MENU}`).slideUp()
-      treeviewMenu.find(SELECTOR_OPEN).removeClass(CLASS_NAME_OPEN)
+      treeviewMenu.find(SELECTOR_OPEN).removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_OPEN}`)
     })
   }
 

build/npm/.eslintrc.json

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

build/npm/DocsPublish.js

@@ -4,6 +4,7 @@
 
 const path = require('path')
 const fse = require('fs-extra')
+const fs = require('fs')
 const Plugins = require('./DocsPlugins')
 
 class Publish {
@@ -47,6 +48,10 @@ class Publish {
         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

@@ -245,6 +245,18 @@ 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'

build/npm/vnu-jar.js

@@ -2,8 +2,8 @@
 
 /*!
  * Script to run vnu-jar if Java is available.
- * Copyright 2017-2020 The Bootstrap Authors
- * Copyright 2017-2020 Twitter, Inc.
+ * Copyright 2017-2021 The Bootstrap Authors
+ * Copyright 2017-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 

build/scss/_adminlte.raw.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -19,6 +19,7 @@
 // ---------------------------------------------------
 @import "bootstrap-variables";
 @import "variables";
+@import "variables-alt";
 @import "mixins";
 
 @import "parts/core";

build/scss/_alerts.scss

@@ -34,3 +34,19 @@
     @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
   }
 }
+
+@include 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));
+    }
+  }
+}
+
+//

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

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

@@ -53,6 +53,23 @@
     background-color: darken($button-default-background-color, 5%);
     color: darken($button-default-color, 10%);
   }
+
+  &.disabled,
+  &:disabled {
+    color: $button-default-color;
+    background-color: $button-default-background-color;
+  }
+}
+
+.btn-outline-light {
+  color: darken($light, 20%);
+  border-color: darken($light, 20%);
+
+  &.disabled,
+  &:disabled {
+    color: darken($light, 20%);
+    border-color: darken($light, 20%);
+  }
 }
 
 // Application buttons
@@ -113,7 +130,7 @@
   @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
 }
 
-.dark-mode {
+@include dark-mode () {
   .btn-default,
   .btn-app {
     background-color: lighten($dark, 2.5%);
@@ -139,4 +156,24 @@
       border-color: lighten($gray-600, 5%);
     }
   }
+
+  @each $color, $value in $theme-colors-alt {
+    .btn-#{$color} {
+      @if $color == dark {
+        @include button-variant(darken($value, 5%), lighten($value, 10%));
+      } @else {
+        @include button-variant($value, $value);
+      }
+    }
+  }
+
+  @each $color, $value in $theme-colors-alt {
+    .btn-outline-#{$color} {
+      @if $color == dark {
+        @include button-outline-variant(darken($value, 20%));
+      } @else {
+        @include button-outline-variant($value);
+      }
+    }
+  }
 }

build/scss/_callout.scss

@@ -50,8 +50,24 @@
   }
 }
 
-.dark-mode {
+@include 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

@@ -44,7 +44,7 @@
       overflow: auto;
     }
 
-    [data-widget="collapse"] {
+    [data-card-widgett="collapse"] {
       display: none;
     }
 
@@ -62,7 +62,7 @@
     }
   }
 
-  .nav.flex-column {
+  .nav.flex-column:not(.nav-sidebar) {
     > li {
       border-bottom: 1px solid $card-border-color;
       margin: 0;
@@ -213,7 +213,7 @@ html.maximized-card {
 .card-header {
   background-color: transparent;
   border-bottom: 1px solid $card-border-color;
-  padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
+  padding: (($card-spacer-y * .5) * 2) $card-spacer-x;
   position: relative;
 
   @if $enable-rounded {
@@ -226,13 +226,13 @@ html.maximized-card {
 
   > .card-tools {
     float: right;
-    margin-right: -$card-spacer-x / 2;
+    margin-right: -$card-spacer-x * .5;
 
     .input-group,
     .nav,
     .pagination {
-      margin-bottom: -$card-spacer-y / 2.5;
-      margin-top: -$card-spacer-y / 2.5;
+      margin-bottom: -$card-spacer-y * .4;
+      margin-top: -$card-spacer-y * .4;
     }
 
     [data-toggle="tooltip"] {
@@ -258,7 +258,7 @@ html.maximized-card {
   background-color: transparent;
   color: $gray-500;
   font-size: $font-size-sm;
-  margin: -(($card-spacer-y / 2) * 2) 0;
+  margin: -(($card-spacer-y * .5) * 2) 0;
   padding: .25rem .5rem;
 
   .btn-group.show &,
@@ -479,7 +479,16 @@ html.maximized-card {
   }
 }
 
-.dark-mode {
+@include 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;
@@ -495,8 +504,12 @@ html.maximized-card {
     .card-footer {
       background-color: rgba($black, .1);
     }
+    &.card-outline-tabs {
+      border-top: 0;
+    }
     &.card-outline-tabs .card-header a:hover {
-      border-color: $gray-600;
+      border-top-color: $gray-600;
+      border-bottom-color: transparent;
     }
     &:not(.card-outline) > .card-header a.active {
       color: $white;
@@ -518,4 +531,18 @@ html.maximized-card {
     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/_colors.scss

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

build/scss/_control-sidebar.scss

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

build/scss/_direct-chat.scss

@@ -223,7 +223,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .direct-chat-text {
     background-color: lighten($dark, 7.5%);
     border-color: lighten($dark, 10%);
@@ -243,4 +243,17 @@
       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

@@ -121,32 +121,6 @@
   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 {
@@ -270,7 +244,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .dropdown-menu {
     background-color: $dark;
     color: $white;

build/scss/_forms.scss

@@ -331,8 +331,35 @@ body.text-sm {
   }
 }
 
-.dark-mode {
-  .form-control,
+.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;
+    }
+  }
+}
+
+@include dark-mode () {
+  .form-control:not(.form-control-navbar):not(.form-control-sidebar),
   .custom-select,
   .custom-file-label,
   .custom-file-label::after,
@@ -341,7 +368,9 @@ body.text-sm {
     background-color: $dark;
     color: $white;
   }
-  .form-control:not(.form-control-navbar):not(.is-invalid):not(:focus) {
+  .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 {
@@ -350,6 +379,14 @@ body.text-sm {
     border-color: $gray-600;
   }
 
+  .custom-select {
+    background: $dark $custom-select-dark-background;
+
+    &[multiple]{
+      background: $dark;
+    }
+  }
+
   .input-group-text {
     border-color: $gray-600;
   }
@@ -361,6 +398,18 @@ body.text-sm {
     color: $white;
   }
 
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    -webkit-text-fill-color: $white;
+  }
+
   .custom-range {
     &::-webkit-slider-runnable-track {
       background-color: lighten($dark, 7.5%);
@@ -371,31 +420,32 @@ body.text-sm {
     &::-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);
+    }
   }
 
-  .navbar-dark {
-    .btn-navbar,
-    .form-control-navbar {
-      background-color: $dark;
-      border: $input-border-width solid $gray-600;
-    }
-    .btn-navbar {
-      &:hover {
-        background-color: lighten($sidebar-dark-bg, 7.5%);
-      }
-      &:focus {
-        background-color: lighten($sidebar-dark-bg, 10%);
-      }
+  // custom switch color variations
+  .custom-switch {
+    @each $name, $color in $theme-colors-alt {
+      @include custom-switch-variant($name, $color);
     }
 
-    .form-control-navbar + .input-group-prepend,
-    .form-control-navbar + .input-group-append {
-      > .btn-navbar {
-        background-color: lighten($dark, 5%);
-        color: $white;
-        border: $input-border-width solid $gray-600;
-        border-left: none;
-      }
+    @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

@@ -48,6 +48,7 @@
     line-height: 1.8;
     flex: 1;
     padding: 0 10px;
+    overflow: hidden;
   }
 
   .info-box-number {
@@ -145,9 +146,21 @@
   }
 }
 
-.dark-mode {
+@include 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

@@ -26,6 +26,7 @@ body,
     &::before {
       margin: 0 auto;
       max-width: $boxed-layout-max-width;
+      overflow: hidden;
     }
 
     .main-sidebar {
@@ -71,7 +72,8 @@ body,
   }
 
   .layout-navbar-fixed.sidebar-mini.sidebar-collapse &,
-  .layout-navbar-fixed.sidebar-mini-md.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;
@@ -83,7 +85,8 @@ body,
   }
 
   .layout-navbar-fixed.sidebar-mini.sidebar-collapse.text-sm &,
-  .layout-navbar-fixed.sidebar-mini-md.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;
     }
@@ -147,6 +150,19 @@ body,
       }
     }
 
+    @each $name, $color in $colors {
+      .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-dark-bg;
+      }
+
+      .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-light-bg;
+      }
+    }
+
+    .main-header.border-bottom-0 ~ .content-wrapper {
+      margin-top: $main-header-height-inner;
+    }
     .content-wrapper {
       margin-top: $main-header-height;
     }
@@ -265,17 +281,6 @@ body,
           z-index: $zindex-main-header + 1;
         }
 
-        // Sidebar variants brand-link fix
-        @each $name, $color in $theme-colors {
-          .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
-            background-color: $sidebar-dark-bg;
-          }
-
-          .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
-            background-color: $sidebar-light-bg;
-          }
-        }
-
         .content-wrapper {
           margin-top: $main-header-height;
         }
@@ -421,7 +426,7 @@ body,
 }
 
 
-body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
+body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) {
   .content-wrapper,
   .main-footer,
   .main-header {
@@ -432,7 +437,7 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
   }
 }
 
-body:not(.sidebar-mini-md) {
+body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) {
   .content-wrapper,
   .main-footer,
   .main-header {
@@ -447,10 +452,7 @@ body:not(.sidebar-mini-md) {
     }
 
     @include media-breakpoint-down(md) {
-      &,
-      &::before {
-        margin-left: 0;
-      }
+      margin-left: 0;
     }
   }
 }
@@ -468,13 +470,31 @@ body:not(.sidebar-mini-md) {
         margin-left: $sidebar-mini-width;
       }
     }
-
     @include media-breakpoint-down(md) {
-      &,
-      &::before {
+      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;
+    }
   }
 }
 
@@ -494,7 +514,7 @@ body:not(.sidebar-mini-md) {
     width: $sidebar-width;
   }
 
-  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) & {
+  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) & {
     &,
     &::before {
       box-shadow: none !important;
@@ -528,12 +548,16 @@ body:not(.sidebar-mini-md) {
   }
 }
 
-:not(.layout-fixed) {
+body:not(.layout-fixed) {
   .main-sidebar {
     height: inherit;
     min-height: 100%;
     position: absolute;
     top: 0;
+
+    .sidebar {
+      overflow-y: auto;
+    }
   }
 }
 
@@ -545,7 +569,6 @@ body:not(.sidebar-mini-md) {
   .main-sidebar {
     bottom: 0;
     float: none;
-    height: 100vh;
     left: 0;
     position: fixed;
     top: 0;
@@ -554,12 +577,14 @@ body:not(.sidebar-mini-md) {
   .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();
+      @include scrollbar-color-gray();
     }
   }
 }
@@ -626,10 +651,42 @@ body:not(.sidebar-mini-md) {
   }
 }
 
-.dark-mode {
-  background-color: lighten($dark, 7.5%) !important;
+@include 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 {

build/scss/_main-header.scss

@@ -58,7 +58,7 @@
 
 // Add this class to images within a nav-link
 .navbar-img {
-  height: $main-header-height / 2;
+  height: calc(#{$main-header-height} * .5);
   width: auto;
 }
 
@@ -94,7 +94,7 @@
   .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 {
@@ -110,7 +110,7 @@
       &,
       + .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;
       }
     }
@@ -121,7 +121,7 @@
   .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 {
@@ -137,9 +137,43 @@
       &,
       + .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

@@ -14,16 +14,26 @@
       outline: none;
     }
   }
-
 }
 
 .sidebar {
   height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  overflow-x: hidden;
   overflow-y: initial;
   padding-bottom: $sidebar-padding-y;
   padding-left: $sidebar-padding-x;
   padding-right: $sidebar-padding-x;
   padding-top: $sidebar-padding-y;
+  @include scrollbar-color-gray();
+  @include scrollbar-width-none();
+
+  &:hover {
+    @include scrollbar-width-thin();
+  }
+
+  .brand-link.border-bottom-0 ~ & {
+    height: calc(100% - #{$main-header-height-inner});
+  }
 }
 
 // Sidebar user panel
@@ -103,6 +113,7 @@
   .menu-open,
   .menu-is-opening {
     > .nav-link {
+      svg.right,
       i.right {
         @include rotate(-90deg);
       }
@@ -179,20 +190,17 @@
 
   .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 {
+.sidebar-is-opening .sidebar .nav-sidebar {
   .nav-link p {
     animation-name: fadeIn;
     animation-duration: $transition-speed;
@@ -303,6 +311,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 {
@@ -385,7 +399,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;
     }
@@ -484,10 +498,13 @@
 
 .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-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;
@@ -496,7 +513,7 @@
 
 // Nav Flat
 .nav-flat {
-  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+  margin: (-$sidebar-padding-x * .5) (-$sidebar-padding-x) 0;
 
   .nav-item {
     > .nav-link {
@@ -557,7 +574,7 @@
     }
   }
 
-  .sidebar-collapse &.nav-child-indent {
+  .sidebar-collapse &.nav-child-indent .sidebar {
     .nav-treeview {
       .nav-icon {
         margin-left: .55rem;
@@ -595,8 +612,10 @@
 
   .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-md .main-sidebar.sidebar-focused &,
+  .sidebar-mini-xs .main-sidebar.sidebar-focused & {
     &.nav-compact.nav-sidebar .nav-treeview {
       .nav-icon {
         margin-left: .4rem;
@@ -659,7 +678,7 @@
 }
 
 .nav-legacy {
-  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+  margin: (-$sidebar-padding-x * .5) (-$sidebar-padding-x) 0;
 
   &.nav-sidebar .nav-item {
     > .nav-link {
@@ -705,78 +724,86 @@
   }
 
   .sidebar-mini &,
-  .sidebar-mini-md & {
+  .sidebar-mini-md &,
+  .sidebar-mini-xs & {
     > .nav-item .nav-link {
       .nav-icon {
         @include transition(margin-left $transition-fn $transition-speed);
-        margin-left: .75rem;
+        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 {
-    .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 {
-    .nav-treeview {
-      padding-left: .5rem;
-
+  .sidebar-mini.sidebar-collapse,
+  .sidebar-mini-md.sidebar-collapse,
+  .sidebar-mini-xs.sidebar-collapse {
+    .main-sidebar.sidebar-focused &.nav-child-indent,
+    .main-sidebar:hover &.nav-child-indent {
       .nav-treeview {
         padding-left: 1rem;
-        margin-left: -.5rem;
+
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+        }
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse.text-sm,
+  .sidebar-mini-md.sidebar-collapse.text-sm,
+  .sidebar-mini-xs.sidebar-collapse.text-sm {
+    .main-sidebar.sidebar-focused &.nav-child-indent,
+    .main-sidebar:hover &.nav-child-indent {
+      .nav-treeview {
+        padding-left: .5rem;
+
+        .nav-treeview {
+          padding-left: 1rem;
+          margin-left: -.5rem;
+        }
       }
     }
   }
 
   .sidebar-mini.sidebar-collapse &,
-  .sidebar-mini-md.sidebar-collapse & {
-    > .nav-item > .nav-link {
-      .nav-icon {
-        margin-left: .55rem;
-      }
-
-      &.active {
-        > .nav-icon{
-          margin-left: .36rem;
+  .sidebar-mini-md.sidebar-collapse &,
+  .sidebar-mini-xs.sidebar-collapse & {
+    .sidebar {
+      > .nav-item > .nav-link {
+        .nav-icon {
+          margin-left: .55rem;
+        }
+        &.active {
+          > .nav-icon {
+            margin-left: .36rem;
+          }
         }
       }
-    }
-
-    &.nav-child-indent {
-      .nav-treeview {
+      &.nav-child-indent {
         .nav-treeview {
-          padding-left: 0;
-          margin-left: 0;
+          .nav-treeview {
+            padding-left: 0;
+            margin-left: 0;
+          }
         }
       }
     }
   }
 
-
   .sidebar-mini.sidebar-collapse.text-sm &,
-  .sidebar-mini-md.sidebar-collapse.text-sm & {
-    > .nav-item > .nav-link {
-      .nav-icon {
-        margin-left: .75rem;
-      }
+  .sidebar-mini-md.sidebar-collapse.text-sm &,
+  .sidebar-mini-xs.sidebar-collapse.text-sm & {
+    .sidebar {
+      > .nav-item > .nav-link {
+        .nav-icon {
+          margin-left: .75rem;
+        }
 
-      &.active {
-        > .nav-icon{
-          margin-left: calc(.75rem - 3px);
+        &.active {
+          > .nav-icon {
+            margin-left: calc(.75rem - 3px);
+          }
         }
       }
     }
@@ -827,7 +854,6 @@
   }
 }
 
-
 .nav-collapse-hide-child {
   .menu-open > .nav-treeview {
     max-height: min-content;
@@ -836,7 +862,7 @@
     animation-fill-mode: both;
   }
 
-  .sidebar-collapse & {
+  .sidebar-collapse .sidebar:not(:hover) & {
     .menu-open > .nav-treeview {
       max-height: 0;
       animation-name: fadeOut;
@@ -845,15 +871,17 @@
     }
   }
 
-  .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 & {
-    .menu-open > .nav-treeview {
-      max-height: min-content;
-      animation-name: fadeIn;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
+  .sidebar-mini.sidebar-collapse,
+  .sidebar-mini-md.sidebar-collapse,
+  .sidebar-mini-xs.sidebar-collapse {
+    .main-sidebar.sidebar-focused &,
+    .main-sidebar:not(.sidebar-no-expand):hover & {
+      .menu-open > .nav-treeview {
+        max-height: min-content;
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+      }
     }
   }
 }
@@ -862,13 +890,13 @@
 .nav-compact {
   .nav-link,
   .nav-header {
-    padding-top: ($nav-link-padding-y / 2);
-    padding-bottom: ($nav-link-padding-y / 2);
+    padding-top: ($nav-link-padding-y * .5);
+    padding-bottom: ($nav-link-padding-y * .5);
   }
 
   .nav-header:not(:first-of-type) {
     padding-top: ($nav-link-padding-y * 1.5);
-    padding-bottom: ($nav-link-padding-y / 2);
+    padding-bottom: ($nav-link-padding-y * .5);
   }
 
   .nav-link > .right,
@@ -966,13 +994,14 @@
 // 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) {
+.layout-boxed:not(.sidebar-mini):not(.sidebar-mini-md):not(.sidebar-mini-xs) {
   &.sidebar-collapse .main-sidebar {
     margin-left: 0;
   }
@@ -982,6 +1011,9 @@
     z-index: 9999;
     position: relative;
   }
+  .control-sidebar {
+    z-index: 9999;
+  }
 }
 
 // Sidebar Search
@@ -1083,6 +1115,15 @@
     }
   }
 
+  &.text-sm .main-sidebar-custom {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-sm-inner} + #{$sidebar-custom-height * .95}) + #{$main-header-bottom-border-width}));
+    }
+    .sidebar-custom {
+      height: $sidebar-custom-height * .95;
+      padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
+    }
+  }
   .main-sidebar-custom {
     .sidebar {
       height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height}) + #{$main-header-bottom-border-width}));
@@ -1092,6 +1133,8 @@
       height: $sidebar-custom-height;
       padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
     }
+
+    height: stretch;
   }
 
   .main-sidebar-custom-lg {
@@ -1123,3 +1166,44 @@
     }
   }
 }
+
+.sidebar-hidden,
+.sidebar-hidden.sidebar-mini.sidebar-collapse {
+  .main-sidebar {
+    display: none !important;
+  }
+  .content-wrapper,
+  .main-header {
+    margin-left: 0 !important;
+  }
+}
+
+@include dark-mode() {
+  @each $name, $color in $theme-colors-alt {
+    .sidebar-dark-#{$name},
+    .sidebar-light-#{$name} {
+      @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

@@ -482,7 +482,7 @@ blockquote {
   padding: .375rem .6rem;
 }
 
-.dark-mode {
+@include dark-mode () {
   a:not(.btn):hover {
     color: lighten($link-color, 10%);
   }
@@ -495,6 +495,36 @@ blockquote {
   }
   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 {

build/scss/_mixins.scss

@@ -2,12 +2,16 @@
 // General: Mixins
 //
 
+@import "mixins/animations";
+@import "mixins/scrollbar";
 @import "mixins/cards";
 @import "mixins/sidebar";
 @import "mixins/navbar";
 @import "mixins/accent";
 @import "mixins/custom-forms";
 @import "mixins/backgrounds";
+@import "mixins/dark-mode";
 @import "mixins/direct-chat";
 @import "mixins/toasts";
+@import "mixins/touch-support";
 @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);
   }
 }
 
@@ -39,7 +43,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .modal-header,
   .modal-footer {
     border-color: $gray-600;

build/scss/_navs.scss

@@ -90,22 +90,33 @@
 
 @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);
+}
+
+.navbar-nav-not-expanded {
+  flex-direction: row;
+
+  .dropdown-menu {
+    position: absolute;
+  }
+
+  .nav-link {
+    padding-right: $navbar-nav-link-padding-x;
+    padding-left: $navbar-nav-link-padding-x;
   }
 }
 
-.dark-mode {
+
+@include dark-mode () {
   .nav-pills .nav-link {
     color: $gray-400;
   }
+
   .nav-tabs {
     border-color: lighten($dark, 15%);
 
@@ -146,4 +157,26 @@
       }
     }
   }
+
+  // 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

@@ -42,18 +42,28 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .page-item {
+    &.disabled a,
     &.disabled .page-link {
-      background-color: lighten($dark, 2.5%);
-      border-color: $gray-600;
+      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;
+        border-color: $primary-alt;
+        color: $white;
+
         &:hover,
         &:focus {
-          color: $gray-400;
+          color: $gray-400 !important;
         }
       }
     }
@@ -64,7 +74,7 @@
 
         &:hover,
         &:focus {
-          color: lighten($primary, 5%);
+          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;
+}
+
+@include dark-mode () {
+  .preloader {
+    background-color: $dark-main-bg;
+    color: $white;
+  }
+}
+
+//

build/scss/_products.scss

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

build/scss/_progress-bars.scss

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

build/scss/_root.scss

@@ -0,0 +1,14 @@
+@include 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

@@ -61,81 +61,415 @@
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
+.sidebar-mini-xs {
+  @include media-breakpoint-up(xs) {
+    @include sidebar-mini-breakpoint ();
   }
 }
 
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
+.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);
+      }
 
-  to {
-    opacity: 0;
+      .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 {
-  .main-sidebar.sidebar-focused,
-  .main-sidebar:hover {
-    .nav-header {
-      display: inline-block;
-    }
-  }
+  &.sidebar-mini,
+  &.sidebar-mini-md,
+  &.sidebar-mini-xs {
+    .main-sidebar {
 
-  .sidebar-no-expand.main-sidebar.sidebar-focused,
-  .sidebar-no-expand.main-sidebar:hover {
-    width: $sidebar-mini-width;
+      // Hide the sidebar search results when mini mode is active.
+      .sidebar-search-results {
+        display: none;
+      }
 
-    .nav-header {
-      display: none;
+      .nav-sidebar {
+        .nav-link {
+          width: $sidebar-mini-width - $sidebar-padding-x * 2;
+        }
+
+        &.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;
+          }
+
+          .nav-link {
+            width: calc(#{$sidebar-mini-width} - #{$sidebar-padding-x} * 2);
+          }
+        }
+      }
+
+      &.sidebar-focused,
+      &:hover {
+        &:not(.hide-nav-header-on-hover) {
+          .nav-header {
+            display: inline-block;
+          }
+        }
+
+        // Show sidebar search when hover/focus on the sidebar mini mode.
+        &:not(.sidebar-no-expand) {
+          .nav-link {
+            width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
+          }
+          .form-control-sidebar {
+            display: inline-block;
+          }
+          .form-control-sidebar ~ .input-group-append {
+            display: flex;
+          }
+          .sidebar-search-open .sidebar-search-results {
+            display: inline-block;
+          }
+        }
+
+        .nav-child-indent {
+          .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);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
 
-    .brand-link {
-      width: $sidebar-mini-width !important;
-    }
+    .sidebar-no-expand.main-sidebar.sidebar-focused,
+    .sidebar-no-expand.main-sidebar:hover {
+      width: $sidebar-mini-width;
 
-    .user-panel .image {
-      float: none !important;
-    }
+      .nav-header {
+        display: none;
+      }
 
-    .logo-xs {
-      animation-name: fadeIn;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
-      visibility: visible;
-    }
+      .brand-link {
+        width: $sidebar-mini-width !important;
+      }
 
-    .logo-xl {
-      animation-name: fadeOut;
-      animation-duration: $transition-speed;
-      animation-fill-mode: both;
-      visibility: hidden;
-    }
+      .user-panel .image {
+        float: none !important;
+      }
 
-    .nav-sidebar.nav-child-indent .nav-treeview {
-      padding-left: 0;
-    }
+      .logo-xs {
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: visible;
+      }
 
-    .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;
-    }
+      .logo-xl {
+        animation-name: fadeOut;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: hidden;
+      }
 
-    .nav-sidebar > .nav-item .nav-icon {
-      margin-right: 0;
+      .nav-sidebar.nav-child-indent .nav-treeview {
+        padding-left: 0;
+      }
+
+      .sidebar {
+        .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;
+          display: inline-block;
+          width: 0;
+        }
+
+        .nav-sidebar > .nav-item .nav-icon {
+          margin-right: 0;
+        }
+      }
     }
   }
 }

build/scss/_table.scss

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

build/scss/_text.scss

@@ -38,8 +38,14 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .text-muted {
     color: $gray-500 !important;
   }
+
+  @each $name, $color in $colors-alt {
+    .text-#{$name} {
+      color: #{$color} !important;
+    }
+  }
 }

build/scss/_timeline.scss

@@ -133,7 +133,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .timeline {
     &::before {
       background-color: $gray-600;

build/scss/_toasts.scss

@@ -46,7 +46,7 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .toast {
     background-color: rgba($dark, .85);
     color: $white;
@@ -55,9 +55,18 @@
       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

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

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

@@ -47,12 +47,11 @@ $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;
@@ -70,9 +69,6 @@ $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;
@@ -82,18 +78,18 @@ $main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bo
 
 
 // Main header skins
-$main-header-dark-form-control-bg: rgba(255, 255, 255, .2) !default;
-$main-header-dark-form-control-focused-bg: rgba(255, 255, 255, .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: rgba(255, 255, 255, .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-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
@@ -124,7 +120,6 @@ $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: rgba(255, 255, 255, .9) !default;
-$sidebar-dark-header-color: $white !default;
 
 // Light sidebar
 $sidebar-light-bg: $white !default;
@@ -134,17 +129,16 @@ $sidebar-light-hover-color: $gray-900 !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) !default;
-$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
+$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
 
 // CONTROL SIDEBAR
 // --------------------------------------------------------
@@ -165,28 +159,21 @@ $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
 // --------------------------------------------------------
@@ -246,3 +233,16 @@ $ribbon-xl-wrapper-size: 180px !default;
 $ribbon-xl-width: 240px !default;
 $ribbon-xl-top: 47px !default;
 $ribbon-xl-right: 4px !default;
+
+// CUSTOM FORM SELECT
+// --------------------------------------------------------
+
+$custom-select-dark-indicator-color:     $white !default;
+$custom-select-dark-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-dark-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-dark-background:          escape-svg($custom-select-dark-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+// ENABLE DARK MODE
+// --------------------------------------------------------
+$enable-dark-mode: true !default;  // requires `@import "variables-alt";`
+
+//

build/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -14,6 +14,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "variables";
+@import "variables-alt";
 @import "mixins";
 
 @import "parts/core";

build/scss/mixins/_accent.scss

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

build/scss/mixins/_animations.scss

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

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

build/scss/mixins/_cards.scss

@@ -25,14 +25,12 @@
 
     &.card-outline-tabs {
       > .card-header {
-        a {
-          &:hover {
-            border-top: 3px solid $nav-tabs-border-color;
-          }
-
-          &.active {
-            border-top: 3px solid $color;
-          }
+        a:hover{
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+        a.active,
+        a.active:hover{
+          border-top: 3px solid $color;
         }
       }
     }
@@ -41,11 +39,13 @@
   .bg-#{$name},
   .bg-gradient-#{$name},
   .card-#{$name}:not(.card-outline) {
-    .btn-tool {
-      color: rgba(color-yiq($color), .8);
+    > .card-header {
+      .btn-tool {
+        color: rgba(color-yiq($color), .8);
 
-      &:hover {
-        color: color-yiq($color);
+        &:hover {
+          color: color-yiq($color);
+        }
       }
     }
   }

build/scss/mixins/_dark-mode.scss

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

build/scss/mixins/_miscellaneous.scss

@@ -30,3 +30,4 @@
   background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
 }
 
+//

build/scss/mixins/_navbar.scss

@@ -3,32 +3,60 @@
 //
 
 // Navbar Variant
-@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, .8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, .1)) {
-  background-color: $color;
+@mixin navbar-variant($name, $color) {
+  .navbar-#{$name} {
+    background-color: $color;
+    color: color-yiq($color);
 
-  .nav > li > a {
-    color: $font-color;
-  }
+    &.navbar-light {
+      .form-control-navbar {
+        &::placeholder {
+          color: rgba($gray-800, .8);
+        }
+        &,
+        + .input-group-append > .btn-navbar {
+          background-color: darken($color, 4%);
+          border-color: darken($color, 9%);
+          color: rgba($gray-800, .8);
+        }
 
-  .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-color: $hover-bg;
-    color: $hover-color;
-  }
+        &:focus {
+          &::placeholder {
+            color: $gray-800;
+          }
+          &,
+          + .input-group-append .btn-navbar {
+            background-color: darken($color, 5%);
+            border-color: darken($color, 9%) !important;
+            color: $gray-800;
+          }
+        }
+      }
+    }
+    &.navbar-dark {
+      .form-control-navbar {
+        &::placeholder {
+          color: rgba($white, .8);
+        }
+        &,
+        + .input-group-append > .btn-navbar {
+          background-color: lighten($color, 4%);
+          border-color: lighten($color, 9%);
+          color: rgba($white, .8);
+        }
 
-  // Add color to the sidebar toggle button
-  .sidebar-toggle {
-    color: $font-color;
-
-    &:hover,
-    &:focus {
-      background-color: $hover-bg;
-      color: $hover-color;
+        &:focus {
+          &::placeholder {
+            color: $white;
+          }
+          &,
+          + .input-group-append .btn-navbar {
+            background-color: lighten($color, 5%);
+            border-color: lighten($color, 9%) !important;
+            color: $white;
+          }
+        }
+      }
     }
   }
 }

build/scss/mixins/_scrollbar.scss

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

build/scss/mixins/_sidebar.scss

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

build/scss/mixins/_touch-support.scss

@@ -0,0 +1,11 @@
+//
+// Mixins: Touch Support
+//
+
+@mixin on-touch-device {
+  @media (hover: none) and (pointer: coarse) {
+    @content;
+  }
+}
+
+//

build/scss/pages/_iframe.scss

@@ -15,12 +15,37 @@ body.iframe-mode {
 
 body.iframe-mode-fullscreen {
   overflow: hidden;
+
+  &.layout-navbar-fixed .wrapper .content-wrapper {
+    margin-top: 0 !important;
+  }
 }
 
 .content-wrapper {
   height: 100%;
 
   &.iframe-mode {
+    .btn-iframe-close {
+      color: $danger;
+      position: absolute;
+      line-height: 1;
+      right: .125rem;
+      top: .125rem;
+      z-index: 10;
+      visibility: hidden;
+
+      &:hover,
+      &:focus {
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: visible;
+      }
+
+      @include on-touch-device() {
+        visibility: visible;
+      }
+    }
     .navbar-nav {
       overflow-y: auto;
       width: 100%;
@@ -28,10 +53,30 @@ body.iframe-mode-fullscreen {
       .nav-link {
         white-space: nowrap;
       }
+      .nav-item {
+        position: relative;
+
+        &:hover,
+        &:focus {
+          .btn-iframe-close {
+            animation-name: fadeIn;
+            animation-duration: $transition-speed;
+            animation-fill-mode: both;
+            visibility: visible;
+
+            @include on-touch-device() {
+              visibility: visible;
+            }
+          }
+        }
+      }
     }
     .tab-content {
       position: relative;
     }
+    .tab-pane + .tab-empty {
+      display: none;
+    }
     .tab-empty {
       width: 100%;
       display: flex;
@@ -59,6 +104,7 @@ body.iframe-mode-fullscreen {
       border: 0;
       width: 100%;
       height: 100%;
+      margin-bottom: -8px;
 
       .content-wrapper {
         padding-bottom: 0 !important;
@@ -78,3 +124,19 @@ body.iframe-mode-fullscreen {
     }
   }
 }
+
+.permanent-btn-iframe-close {
+  .btn-iframe-close {
+    animation: none !important;
+    visibility: visible !important;
+    opacity: 1;
+  }
+}
+
+@include dark-mode () {
+  .content-wrapper.iframe-mode {
+    .tab-loading {
+      background-color: $dark;
+    }
+  }
+}

build/scss/pages/_invoice.scss

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

build/scss/pages/_kanban.scss

@@ -32,11 +32,15 @@
       }
 
       .card-body {
-        height: 100%;
+        height: calc(100% - (12px + (1.8rem * #{$headings-line-height}) + .5rem));
         overflow-y: auto;
       }
 
       .card {
+        &:last-child {
+          margin-bottom: 0;
+          border-bottom-width: 1px;
+        }
         .card-header {
           padding: .5rem .75rem;
         }

build/scss/pages/_lockscreen.scss

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

build/scss/pages/_login_and_register.scss

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

build/scss/pages/_profile.scss

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

build/scss/parts/_core.scss

@@ -2,6 +2,9 @@
 // Part: Core
 //
 
+@import "../root";
+@import "../animation-effects";
+@import "../preloader";
 @import "../layout";
 @import "../main-header";
 @import "../brand";

build/scss/parts/_plugins.scss

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

build/scss/parts/adminlte.components.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *     Only Components
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "components";

build/scss/parts/adminlte.core.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *     Only Core
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "core";

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

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *     Only Extra Components
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "extra-components";

build/scss/parts/adminlte.light.scss

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

build/scss/parts/adminlte.pages.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *     Only Pages
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -16,6 +16,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "pages";

build/scss/parts/adminlte.plugins.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.1.0-rc
+ *   AdminLTE v3.2.0
  *     Only Plugins
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -15,6 +15,7 @@
 // Variables and Mixins
 // ---------------------------------------------------
 @import "../variables";
+@import "../variables-alt";
 @import "../mixins";
 
 @import "plugins";

build/scss/plugins/_bootstrap-slider.scss

@@ -34,9 +34,25 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .slider-track {
     background-color: lighten($dark, 10%);
     background-image: none;
   }
+
+  @each $name, $color in $theme-colors-alt {
+    .slider-#{$name} .slider {
+      .slider-selection {
+        background: $color;
+      }
+    }
+  }
+
+  @each $name, $color in $colors-alt {
+    .slider-#{$name} .slider {
+      .slider-selection {
+        background: $color;
+      }
+    }
+  }
 }

build/scss/plugins/_bootstrap-switch.scss

@@ -174,7 +174,7 @@ $bootstrap-switch-handle-border-radius: .1rem;
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   .bootstrap-switch {
     border-color: $gray-600;
 
@@ -184,5 +184,21 @@ $bootstrap-switch-handle-border-radius: .1rem;
       color: $white;
       border-color: lighten($dark, 7.5%);
     }
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off {
+      @each $name, $color in $theme-colors-alt {
+        &.bootstrap-switch-#{$name} {
+          background: $color;
+          color: color-yiq($color);
+        }
+      }
+
+      @each $name, $color in $colors-alt {
+        &.bootstrap-switch-#{$name} {
+          background: $color;
+          color: color-yiq($color);
+        }
+      }
+    }
   }
 }

build/scss/plugins/_daterangepicker.scss

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

build/scss/plugins/_icheck-bootstrap.scss

@@ -40,11 +40,48 @@
   }
 }
 
-.dark-mode {
+@include dark-mode () {
   [class*="icheck-"] > input:first-child:not(:checked) {
     + input[type="hidden"] + label::before,
     + label::before {
       border-color: $gray-600;
     }
   }
+  // iCheck colors (theme colors)
+  @each $name, $color in $theme-colors-alt {
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:checked + label::before,
+    .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+      background-color: #{$color};
+      border-color: #{$color};
+    }
+  }
+
+  // iCheck colors (colors)
+  @each $name, $color in $colors-alt {
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + label::before,
+    .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):focus + input[type="hidden"] + label::before {
+      border-color: #{$color};
+    }
+
+    .icheck-#{$name} > input:first-child:checked + label::before,
+    .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
+      background-color: #{$color};
+      border-color: #{$color};
+    }
+  }
 }