Merge pull request #3146 from danny007in/layout-size-fix

layout size bug fixed

.babelrc

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

.babelrc.js

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

.browserslistrc

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

.bundlewatch.config.json

@@ -0,0 +1,60 @@
+{
+  "files": [
+    {
+      "path": "./dist/css/adminlte.css",
+      "maxSize": "82 kB"
+    },
+    {
+      "path": "./dist/css/adminlte.min.css",
+      "maxSize": "77.8 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.components.css",
+      "maxSize": "16 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.components.min.css",
+      "maxSize": "15.4 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.core.css",
+      "maxSize": "47 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.core.min.css",
+      "maxSize": "44 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.extra-components.css",
+      "maxSize": "4 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.extra-components.min.css",
+      "maxSize": "4 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.pages.css",
+      "maxSize": "3 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.pages.min.css",
+      "maxSize": "3 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.plugins.css",
+      "maxSize": "17 kB"
+    },
+    {
+      "path": "./dist/css/alt/adminlte.plugins.min.css",
+      "maxSize": "16.6 kB"
+    },
+    {
+      "path": "./dist/js/adminlte.js",
+      "maxSize": "15 kB"
+    },
+    {
+      "path": "./dist/js/adminlte.min.js",
+      "maxSize": "10.5 kB"
+    }
+  ]
+}

.editorconfig

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

.eslintignore

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

.eslintrc

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

.eslintrc.json

@@ -0,0 +1,64 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:compat/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:unicorn/recommended",
+    "xo/esnext",
+    "xo/browser"
+  ],
+  "env": {
+    "jquery": true
+  },
+  "rules": {
+    "capitalized-comments": "off",
+    "eqeqeq": "off",
+    "indent": [
+      "error",
+      2,
+      {
+        "MemberExpression": "off",
+        "SwitchCase": 1
+      }
+    ],
+    "multiline-ternary": [
+      "error",
+      "always-multiline"
+    ],
+    "new-cap": [
+      "error",
+      {
+        "properties": false
+      }
+    ],
+    "no-eq-null": "off",
+    "no-negated-condition": "off",
+    "no-console": "error",
+    "object-curly-spacing": [
+      "error",
+      "always"
+    ],
+    "prefer-template": "error",
+    "prefer-named-capture-group": "off",
+    "semi": [
+      "error",
+      "never"
+    ],
+    "unicorn/filename-case": "off",
+    "unicorn/import-index": "off",
+    "unicorn/no-fn-reference-in-iterator": "off",
+    "unicorn/no-for-loop": "off",
+    "unicorn/no-null": "off",
+    "unicorn/no-unused-properties": "error",
+    "unicorn/prefer-dataset": "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",
+    "unicorn/prefer-set-has": "off",
+    "unicorn/prevent-abbreviations": "off"
+  }
+}

.gitattributes

@@ -0,0 +1,2 @@
+# Enforce Unix newlines
+* text=auto eol=lf

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

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

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

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

.github/dependabot.yml

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

.github/workflows/ci.yml

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

.github/workflows/docs.yml

@@ -0,0 +1,78 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - "**"
+
+env:
+  CI: true
+  NODE: 12.x
+  RUBY: 2.6.x
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "${{ env.NODE }}"
+
+      - name: Set up Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: ${{ env.RUBY }}
+
+      - name: Disable gem docs
+        run: 'echo "gem: --no-document" > ~/.gemrc'
+
+      - name: Get npm cache directory
+        id: npm-cache
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+
+      - name: Set up npm cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.npm-cache.outputs.dir }}
+          key: ${{ runner.os }}-node-v${{ 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
+
+      - 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
+
+      - name: Run HTML validator
+        run: npm run docs-lint

.github/workflows/lint.yml

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

.gitignore

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

.gitpod.yml

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

.lgtm.yml

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

.npmignore

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

.stylelintignore

@@ -0,0 +1,4 @@
+**/*.min.css
+**/dist/
+**/docs_html/
+**/plugins/

.stylelintrc

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

LICENSE

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

README.md

@@ -1,95 +1,130 @@
-Introduction
-============
+# Introduction
 
-**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4](https://getbootstrap.com)** framework.
+[![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
+[![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
+[![CDNJS](https://img.shields.io/cdnjs/v/admin-lte.svg)](https://cdnjs.com/libraries/admin-lte)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
+
+**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4.5](https://getbootstrap.com/)** framework and also the JS/jQuery plugin.
 Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.
 
-**Download & Preview on [AdminLTE.io](https://adminlte.io)**
+**Preview on [AdminLTE.io](https://adminlte.io/themes/v3)**
 
-Looking for Premium Templates?
-------------------------------
-AdminLTE.io just opened a new premium templates page. Hand picked to insure the best quality and the most affordable
-prices. Visit https://adminlte.io/premium for more information.
+## Looking for Premium Templates?
+
+AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable
+prices. Visit <https://adminlte.io/premium> for more information.
 
 !["AdminLTE Presentation"](https://adminlte.io/AdminLTE3.png "AdminLTE Presentation")
 
 **AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
 SCSS has been used to increase code customizability.
 
-Installation
-------------
+## Installation
+
 There are multiple ways to install AdminLTE.
 
-#### Download:
+### Download & Changelog:
 
-Download from Github or [visit AdminLTE.io](https://adminlte.io) and download the latest release.
+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.
+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).
 
-#### Using The Command Line:
+### Using The Command Line:
 
-**NPM**
-```bash
-npm install admin-lte
-```
+_**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or higher._
 
-**Github**
+- **Via npm**
 
-- Clone to your machine
-```
-git clone https://github.com/ColorlibHQ/AdminLTE.git
-```
+    ```bash
+    npm install admin-lte@^3.0 --save
+    ```
 
-Documentation
--------------
-Visit the [online documentation](https://adminlte.io/themes/AdminLTE/documentation/index.html) for the most
+- **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
+    ```
+
+## Documentation
+
+Visit the [online documentation](https://adminlte.io/docs/3.1/) for the most
 updated guide. Information will be added on a weekly basis.
 
-Browser Support
----------------
-- IE 10+
-- Firefox (latest)
-- Chrome (latest)
-- Safari (latest)
-- Opera (latest)
+## Browsers support
 
-Contribution
-------------
-Contribution are always **welcome and recommended**! Here is how:
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png" alt="Vivaldi" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Vivaldi | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Electron |
+| --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
-- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
-- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
-- Create a new branch
-- Make your changes
-- Create a pull request
+## How to Contribute
 
-#### Contribution Requirements:
+Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
 
-- When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
-- If you use content provided by another party, it must be appropriately licensed using an [open source](http://opensource.org/licenses) license.
-- Contributions are only accepted through Github pull requests.
-- Finally, contributed code must work in all supported browsers (see above for browser support).
+1. 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
 
-License
--------
-AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](http://opensource.org/licenses/MIT). AdminLTE.io
-reserves the right to change the license of future releases.
+    ```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
 
-Legacy Releases
----------------
-- [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.3)
-- [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1)
+### Online one-click setup for contributing
 
-Change log
-----------
-Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog
+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:
 
-Image Credits
--------------
-[Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
+- clone the `AdminLTE` repo.
+- install the dependencies.
+- run `yarn dev` to start the server.
 
-[Graphicsfuel](http://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
 
-[Pickaface](http://pickaface.net/)
+### Compile dist files
 
-[Unsplash](https://unsplash.com/)
+To compile the dist files you need Node.js/npm, clone/download the repo then:
 
-[Uifaces](http://uifaces.com/)
+1. `npm install` (install npm deps)
+2. _Optional:_ `npm run dev` (developer mode, autocompile with browsersync support for live demo)
+3. `npm run production` (compile css/js files)
+
+## License
+
+AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](https://opensource.org/licenses/MIT).
+AdminLTE.io reserves the right to change the license of future releases.
+
+## Image Credits
+
+- [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
+- [Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
+- [Pickaface](https://pickaface.net/)
+- [Unsplash](https://unsplash.com/)
+- [Uifaces](http://uifaces.com/)

build/config/.eslintrc.json

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

build/config/postcss.config.js

@@ -1,7 +1,7 @@
 'use strict'
 
-module.exports = (ctx) => ({
-  map: ctx.file.dirname.includes('examples') ? false : {
+module.exports = () => ({
+  map: {
     inline: false,
     annotation: true,
     sourcesContent: true

build/config/rollup.config.js

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

build/js/.jscsrc

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

build/js/AdminLTE.js

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

build/js/CardRefresh.js

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

build/js/CardWidget.js

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

build/js/ControlSidebar.js

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

build/js/DirectChat.js

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

build/js/Dropdown.js

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

build/js/ExpandableTable.js

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

build/js/Fullscreen.js

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

build/js/IFrame.js

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

build/js/Layout.js

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

build/js/PushMenu.js

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

build/js/SidebarSearch.js

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

build/js/SiteSearch.js

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

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

build/js/TodoList.js

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

build/js/Treeview.js

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

build/js/Widget.js

@@ -1,226 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE Widget.js
- * License MIT
- * --------------------------------------------
- */
-
-const Widget = (($) => {
-  /**
-   * Constants
-   * ====================================================
-   */
-
-  const NAME               = 'Widget'
-  const DATA_KEY           = 'lte.widget'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
-
-  const Event = {
-    EXPANDED : `expanded${EVENT_KEY}`,
-    COLLAPSED: `collapsed${EVENT_KEY}`,
-    MAXIMIZED: `maximized${EVENT_KEY}`,
-    MINIMIZED: `minimized${EVENT_KEY}`,
-    REMOVED  : `removed${EVENT_KEY}`
-  }
-
-  const Selector = {
-    DATA_REMOVE   : '[data-widget="remove"]',
-    DATA_COLLAPSE : '[data-widget="collapse"]',
-    DATA_MAXIMIZE : '[data-widget="maximize"]',
-    CARD          : '.card',
-    CARD_HEADER   : '.card-header',
-    CARD_BODY     : '.card-body',
-    CARD_FOOTER   : '.card-footer',
-    COLLAPSED     : '.collapsed-card',
-    COLLAPSE_ICON : '.fa-minus',
-    EXPAND_ICON   : '.fa-plus'
-  }
-
-  const ClassName = {
-    COLLAPSED     : 'collapsed-card',
-    WAS_COLLAPSED : 'was-collapsed',
-    MAXIMIZED     : 'maximized-card',
-    COLLAPSE_ICON : 'fa-minus',
-    EXPAND_ICON   : 'fa-plus',
-    MAXIMIZE_ICON : 'fa-expand',
-    MINIMIZE_ICON : 'fa-compress',
-  }
-
-  const Default = {
-    animationSpeed : 'normal',
-    collapseTrigger: Selector.DATA_COLLAPSE,
-    removeTrigger  : Selector.DATA_REMOVE
-  }
-
-  class Widget {
-    constructor(element, settings) {
-      this._element  = element
-      this._parent   = element.parents(Selector.CARD).first()
-      this._settings = $.extend({}, Default, settings)
-    }
-
-    collapse() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
-        .slideUp(this._settings.animationSpeed, () => {
-          this._parent.addClass(ClassName.COLLAPSED)
-        })
-
-      this._element.children(Selector.COLLAPSE_ICON)
-        .addClass(ClassName.EXPAND_ICON)
-        .removeClass(ClassName.COLLAPSE_ICON)
-
-      const collapsed = $.Event(Event.COLLAPSED)
-
-      this._element.trigger(collapsed, this._parent)
-    }
-
-    expand() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
-        .slideDown(this._settings.animationSpeed, () => {
-          this._parent.removeClass(ClassName.COLLAPSED)
-        })
-
-      this._element.children(Selector.EXPAND_ICON)
-        .addClass(ClassName.COLLAPSE_ICON)
-        .removeClass(ClassName.EXPAND_ICON)
-
-      const expanded = $.Event(Event.EXPANDED)
-
-      this._element.trigger(expanded, this._parent)
-    }
-
-    remove() {
-      this._parent.slideUp()
-
-      const removed = $.Event(Event.REMOVED)
-
-      this._element.trigger(removed, this._parent)
-    }
-
-    toggle() {
-      if (this._parent.hasClass(ClassName.COLLAPSED)) {
-        this.expand()
-        return
-      }
-
-      this.collapse()
-    }
-    
-    toggleMaximize() {
-      var button = this._element.find('i')
-
-      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
-        button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON)
-        this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
-          'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
-        ).delay(100).queue(function(){
-          $(this).removeClass(ClassName.MAXIMIZED)
-          $('html').removeClass(ClassName.MAXIMIZED)
-          $(this).trigger(Event.MINIMIZED)
-          $(this).css({
-            'height': 'inherit',
-            'width': 'inherit'
-          })
-          if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
-            $(this).removeClass(ClassName.WAS_COLLAPSED)
-          }
-          $(this).dequeue()
-        })
-      } else {
-        button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON)
-        this._parent.css({
-          'height': this._parent.height(),
-          'width': this._parent.width(),
-          'transition': 'all .15s'
-        }).delay(150).queue(function(){
-          $(this).addClass(ClassName.MAXIMIZED)
-          $('html').addClass(ClassName.MAXIMIZED)
-          $(this).trigger(Event.MAXIMIZED)
-          if ($(this).hasClass(ClassName.COLLAPSED)) {
-            $(this).addClass(ClassName.WAS_COLLAPSED)
-          }
-          $(this).dequeue()
-        })
-      }
-    }
-
-    // Private
-
-    _init(card) {
-      this._parent = card
-
-      $(this).find(this._settings.collapseTrigger).click(() => {
-        this.toggle()
-      })
-
-      $(this).find(this._settings.removeTrigger).click(() => {
-        this.remove()
-      })
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data = $(this).data(DATA_KEY)
-
-        if (!data) {
-          data = new Widget($(this), data)
-          $(this).data(DATA_KEY, typeof config === 'string' ? data : config)
-        }
-
-        if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|toggleMaximize/)) {
-          data[config]()
-        } else if (typeof config === 'object') {
-          data._init($(this))
-        }
-      })
-    }
-  }
-
-  /**
-   * Data API
-   * ====================================================
-   */
-
-  $(document).on('click', Selector.DATA_COLLAPSE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    Widget._jQueryInterface.call($(this), 'toggle')
-  })
-
-  $(document).on('click', Selector.DATA_REMOVE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    Widget._jQueryInterface.call($(this), 'remove')
-  })
-
-  $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
-    if (event) {
-      event.preventDefault()
-    }
-
-    Widget._jQueryInterface.call($(this), 'toggleMaximize')
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = Widget._jQueryInterface
-  $.fn[NAME].Constructor = Widget
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Widget._jQueryInterface
-  }
-
-  return Widget
-})(jQuery)
-
-export default Widget

build/npm/.eslintrc.json

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

build/npm/DocsPlugins.js

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

build/npm/DocsPublish.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const path = require('path')
+const fse = require('fs-extra')
+const Plugins = require('./DocsPlugins')
+
+class Publish {
+  constructor() {
+    this.options = {
+      verbose: false
+    }
+
+    this.getArguments()
+  }
+
+  getArguments() {
+    if (process.argv.length > 2) {
+      const arg = process.argv[2]
+      switch (arg) {
+        case '-v':
+        case '--verbose':
+          this.options.verbose = true
+          break
+        default:
+          throw new Error(`Unknown option ${arg}`)
+      }
+    }
+  }
+
+  run() {
+    // Publish files
+    Plugins.forEach(module => {
+      try {
+        fse.copySync(module.from, module.to, {
+          // Skip copying dot files
+          filter(src) {
+            return !path.basename(src).startsWith('.')
+          }
+        })
+
+        if (this.options.verbose) {
+          console.log(`Copied ${module.from} to ${module.to}`)
+        }
+      } catch (error) {
+        console.error(`Error: ${error}`)
+      }
+    })
+  }
+}
+
+(new Publish()).run()

build/npm/Plugins.js

@@ -1,201 +1,352 @@
+'use strict'
+
 const Plugins = [
   // jQuery
   {
     from: 'node_modules/jquery/dist',
-    to  : 'plugins/jquery'
+    to: 'plugins/jquery'
   },
   // Popper
   {
     from: 'node_modules/popper.js/dist',
-    to  : 'plugins/popper'
+    to: 'plugins/popper'
   },
   // Bootstrap
   {
     from: 'node_modules/bootstrap/dist/js',
-    to  : 'plugins/bootstrap/js'
+    to: 'plugins/bootstrap/js'
   },
   // Font Awesome
   {
     from: 'node_modules/@fortawesome/fontawesome-free/css',
-    to  : 'plugins/fontawesome-free/css'
+    to: 'plugins/fontawesome-free/css'
   },
   {
     from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
-    to  : 'plugins/fontawesome-free/webfonts'
+    to: 'plugins/fontawesome-free/webfonts'
   },
   // overlayScrollbars
   {
     from: 'node_modules/overlayscrollbars/js',
-    to  : 'plugins/overlayScrollbars/js'
+    to: 'plugins/overlayScrollbars/js'
   },
   {
     from: 'node_modules/overlayscrollbars/css',
-    to  : 'plugins/overlayScrollbars/css'
+    to: 'plugins/overlayScrollbars/css'
   },
   // Chart.js
   {
     from: 'node_modules/chart.js/dist/',
-    to  : 'plugins/chart.js'
+    to: 'plugins/chart.js'
   },
   // jQuery UI
   {
     from: 'node_modules/jquery-ui-dist/',
-    to  : 'plugins/jquery-ui'
+    to: 'plugins/jquery-ui'
   },
   // Flot
   {
     from: 'node_modules/flot/dist/es5/',
-    to  : 'plugins/flot'
+    to: 'plugins/flot'
+  },
+  {
+    from: 'node_modules/flot/source/',
+    to: 'plugins/flot/plugins'
   },
   // Summernote
   {
     from: 'node_modules/summernote/dist/',
-    to  : 'plugins/summernote'
+    to: 'plugins/summernote'
   },
   // Bootstrap Slider
   {
     from: 'node_modules/bootstrap-slider/dist/',
-    to  : 'plugins/bootstrap-slider'
+    to: 'plugins/bootstrap-slider'
   },
   {
     from: 'node_modules/bootstrap-slider/dist/css',
-    to  : 'plugins/bootstrap-slider/css'
+    to: 'plugins/bootstrap-slider/css'
   },
   // Bootstrap Colorpicker
   {
     from: 'node_modules/bootstrap-colorpicker/dist/js',
-    to  : 'plugins/bootstrap-colorpicker/js'
+    to: 'plugins/bootstrap-colorpicker/js'
   },
   {
     from: 'node_modules/bootstrap-colorpicker/dist/css',
-    to  : 'plugins/bootstrap-colorpicker/css'
+    to: 'plugins/bootstrap-colorpicker/css'
   },
   // Tempusdominus Bootstrap 4
   {
     from: 'node_modules/tempusdominus-bootstrap-4/build/js',
-    to  : 'plugins/tempusdominus-bootstrap-4/js'
+    to: 'plugins/tempusdominus-bootstrap-4/js'
   },
   {
     from: 'node_modules/tempusdominus-bootstrap-4/build/css',
-    to  : 'plugins/tempusdominus-bootstrap-4/css'
+    to: 'plugins/tempusdominus-bootstrap-4/css'
   },
   // Moment
   {
     from: 'node_modules/moment/min',
-    to  : 'plugins/moment'
+    to: 'plugins/moment'
   },
   {
     from: 'node_modules/moment/locale',
-    to  : 'plugins/moment/locale'
+    to: 'plugins/moment/locale'
   },
   // FastClick
   {
     from: 'node_modules/fastclick/lib',
-    to  : 'plugins/fastclick'
+    to: 'plugins/fastclick'
   },
   // Date Range Picker
   {
     from: 'node_modules/daterangepicker/',
-    to  : 'plugins/daterangepicker'
+    to: 'plugins/daterangepicker'
   },
   // DataTables
+  {
+    from: 'node_modules/pdfmake/build',
+    to: 'plugins/pdfmake'
+  },
+  {
+    from: 'node_modules/jszip/dist',
+    to: 'plugins/jszip'
+  },
   {
     from: 'node_modules/datatables.net/js',
     to: 'plugins/datatables'
   },
   {
     from: 'node_modules/datatables.net-bs4/js',
-    to: 'plugins/datatables'
+    to: 'plugins/datatables-bs4/js'
   },
   {
     from: 'node_modules/datatables.net-bs4/css',
-    to: 'plugins/datatables'
+    to: 'plugins/datatables-bs4/css'
   },
+  {
+    from: 'node_modules/datatables.net-autofill/js',
+    to: 'plugins/datatables-autofill/js'
+  },
+  {
+    from: 'node_modules/datatables.net-autofill-bs4/js',
+    to: 'plugins/datatables-autofill/js'
+  },
+  {
+    from: 'node_modules/datatables.net-autofill-bs4/css',
+    to: 'plugins/datatables-autofill/css'
+  },
+  {
+    from: 'node_modules/datatables.net-buttons/js',
+    to: 'plugins/datatables-buttons/js'
+  },
+  {
+    from: 'node_modules/datatables.net-buttons-bs4/js',
+    to: 'plugins/datatables-buttons/js'
+  },
+  {
+    from: 'node_modules/datatables.net-buttons-bs4/css',
+    to: 'plugins/datatables-buttons/css'
+  },
+  {
+    from: 'node_modules/datatables.net-colreorder/js',
+    to: 'plugins/datatables-colreorder/js'
+  },
+  {
+    from: 'node_modules/datatables.net-colreorder-bs4/js',
+    to: 'plugins/datatables-colreorder/js'
+  },
+  {
+    from: 'node_modules/datatables.net-colreorder-bs4/css',
+    to: 'plugins/datatables-colreorder/css'
+  },
+  {
+    from: 'node_modules/datatables.net-fixedcolumns/js',
+    to: 'plugins/datatables-fixedcolumns/js'
+  },
+  {
+    from: 'node_modules/datatables.net-fixedcolumns-bs4/js',
+    to: 'plugins/datatables-fixedcolumns/js'
+  },
+  {
+    from: 'node_modules/datatables.net-fixedcolumns-bs4/css',
+    to: 'plugins/datatables-fixedcolumns/css'
+  },
+  {
+    from: 'node_modules/datatables.net-fixedheader/js',
+    to: 'plugins/datatables-fixedheader/js'
+  },
+  {
+    from: 'node_modules/datatables.net-fixedheader-bs4/js',
+    to: 'plugins/datatables-fixedheader/js'
+  },
+  {
+    from: 'node_modules/datatables.net-fixedheader-bs4/css',
+    to: 'plugins/datatables-fixedheader/css'
+  },
+  {
+    from: 'node_modules/datatables.net-keytable/js',
+    to: 'plugins/datatables-keytable/js'
+  },
+  {
+    from: 'node_modules/datatables.net-keytable-bs4/js',
+    to: 'plugins/datatables-keytable/js'
+  },
+  {
+    from: 'node_modules/datatables.net-keytable-bs4/css',
+    to: 'plugins/datatables-keytable/css'
+  },
+  {
+    from: 'node_modules/datatables.net-responsive/js',
+    to: 'plugins/datatables-responsive/js'
+  },
+  {
+    from: 'node_modules/datatables.net-responsive-bs4/js',
+    to: 'plugins/datatables-responsive/js'
+  },
+  {
+    from: 'node_modules/datatables.net-responsive-bs4/css',
+    to: 'plugins/datatables-responsive/css'
+  },
+  {
+    from: 'node_modules/datatables.net-rowgroup/js',
+    to: 'plugins/datatables-rowgroup/js'
+  },
+  {
+    from: 'node_modules/datatables.net-rowgroup-bs4/js',
+    to: 'plugins/datatables-rowgroup/js'
+  },
+  {
+    from: 'node_modules/datatables.net-rowgroup-bs4/css',
+    to: 'plugins/datatables-rowgroup/css'
+  },
+  {
+    from: 'node_modules/datatables.net-rowreorder/js',
+    to: 'plugins/datatables-rowreorder/js'
+  },
+  {
+    from: 'node_modules/datatables.net-rowreorder-bs4/js',
+    to: 'plugins/datatables-rowreorder/js'
+  },
+  {
+    from: 'node_modules/datatables.net-rowreorder-bs4/css',
+    to: 'plugins/datatables-rowreorder/css'
+  },
+  {
+    from: 'node_modules/datatables.net-scroller/js',
+    to: 'plugins/datatables-scroller/js'
+  },
+  {
+    from: 'node_modules/datatables.net-scroller-bs4/js',
+    to: 'plugins/datatables-scroller/js'
+  },
+  {
+    from: 'node_modules/datatables.net-scroller-bs4/css',
+    to: 'plugins/datatables-scroller/css'
+  },
+  {
+    from: 'node_modules/datatables.net-searchpanes/js',
+    to: 'plugins/datatables-searchpanes/js'
+  },
+  {
+    from: 'node_modules/datatables.net-searchpanes-bs4/js',
+    to: 'plugins/datatables-searchpanes/js'
+  },
+  {
+    from: 'node_modules/datatables.net-searchpanes-bs4/css',
+    to: 'plugins/datatables-searchpanes/css'
+  },
+  {
+    from: 'node_modules/datatables.net-select/js',
+    to: 'plugins/datatables-select/js'
+  },
+  {
+    from: 'node_modules/datatables.net-select-bs4/js',
+    to: 'plugins/datatables-select/js'
+  },
+  {
+    from: 'node_modules/datatables.net-select-bs4/css',
+    to: 'plugins/datatables-select/css'
+  },
+
   // Fullcalendar
   {
-    from: 'node_modules/@fullcalendar/core/',
-    to  : 'plugins/fullcalendar'
-  },
-  {
-    from: 'node_modules/@fullcalendar/bootstrap/',
-    to  : 'plugins/fullcalendar-bootstrap'
-  },
-  {
-    from: 'node_modules/@fullcalendar/daygrid/',
-    to  : 'plugins/fullcalendar-daygrid'
-  },
-  {
-    from: 'node_modules/@fullcalendar/timegrid/',
-    to  : 'plugins/fullcalendar-timegrid'
-  },
-  {
-    from: 'node_modules/@fullcalendar/interaction/',
-    to  : 'plugins/fullcalendar-interaction'
+    from: 'node_modules/fullcalendar/',
+    to: 'plugins/fullcalendar'
   },
   // icheck bootstrap
   {
     from: 'node_modules/icheck-bootstrap/',
-    to  : 'plugins/icheck-bootstrap'
+    to: 'plugins/icheck-bootstrap'
   },
   // inputmask
   {
     from: 'node_modules/inputmask/dist/',
-    to  : 'plugins/inputmask'
+    to: 'plugins/inputmask'
   },
   // ion-rangeslider
   {
     from: 'node_modules/ion-rangeslider/',
-    to  : 'plugins/ion-rangeslider'
+    to: 'plugins/ion-rangeslider'
   },
-  // JQVMap
+  // JQVMap (jqvmap-novulnerability)
   {
-    from: 'node_modules/jqvmap/dist/',
-    to  : 'plugins/jqvmap'
+    from: 'node_modules/jqvmap-novulnerability/dist/',
+    to: 'plugins/jqvmap'
   },
   // jQuery Mapael
   {
     from: 'node_modules/jquery-mapael/js/',
-    to  : 'plugins/jquery-mapael'
+    to: 'plugins/jquery-mapael'
   },
   // Raphael
   {
     from: 'node_modules/raphael/',
-    to  : 'plugins/raphael'
+    to: 'plugins/raphael'
   },
   // jQuery Mousewheel
   {
     from: 'node_modules/jquery-mousewheel/',
-    to  : 'plugins/jquery-mousewheel'
+    to: 'plugins/jquery-mousewheel'
   },
   // jQuery Knob
   {
     from: 'node_modules/jquery-knob-chif/dist/',
-    to  : 'plugins/jquery-knob'
+    to: 'plugins/jquery-knob'
   },
   // pace-progress
   {
     from: 'node_modules/@lgaitan/pace-progress/dist/',
-    to  : 'plugins/pace-progress'
+    to: 'plugins/pace-progress'
   },
   // Select2
   {
     from: 'node_modules/select2/dist/',
-    to  : 'plugins/select2'
+    to: 'plugins/select2'
+  },
+  {
+    from: 'node_modules/@ttskch/select2-bootstrap4-theme/dist/',
+    to: 'plugins/select2-bootstrap4-theme'
   },
   // Sparklines
   {
     from: 'node_modules/sparklines/source/',
-    to  : 'plugins/sparklines'
+    to: 'plugins/sparklines'
   },
   // SweetAlert2
   {
     from: 'node_modules/sweetalert2/dist/',
-    to  : 'plugins/sweetalert2'
+    to: 'plugins/sweetalert2'
+  },
+  {
+    from: 'node_modules/@sweetalert2/theme-bootstrap-4/',
+    to: 'plugins/sweetalert2-theme-bootstrap-4'
   },
   // Toastr
   {
     from: 'node_modules/toastr/build/',
-    to  : 'plugins/toastr'
+    to: 'plugins/toastr'
   },
   // jsGrid
   {
@@ -203,8 +354,8 @@ const Plugins = [
     to: 'plugins/jsgrid'
   },
   {
-    from: 'node_modules/jsgrid/demos/',
-    to: 'plugins/jsgrid/demos'
+    from: 'node_modules/jsgrid/demos/db.js',
+    to: 'plugins/jsgrid/demos/db.js'
   },
   // flag-icon-css
   {
@@ -220,49 +371,66 @@ const Plugins = [
     from: 'node_modules/bootstrap4-duallistbox/dist',
     to: 'plugins/bootstrap4-duallistbox/'
   },
-
-
-  // AdminLTE Dist
+  // filterizr
   {
-    from: 'dist/css',
-    to  : 'docs/assets/css'
+    from: 'node_modules/filterizr/dist',
+    to: 'plugins/filterizr/'
+  },
+  // ekko-lightbox
+  {
+    from: 'node_modules/ekko-lightbox/dist',
+    to: 'plugins/ekko-lightbox/'
+  },
+  // bootstrap-switch
+  {
+    from: 'node_modules/bootstrap-switch/dist',
+    to: 'plugins/bootstrap-switch/'
+  },
+  // jQuery Validate
+  {
+    from: 'node_modules/jquery-validation/dist/',
+    to: 'plugins/jquery-validation'
+  },
+  // bs-custom-file-input
+  {
+    from: 'node_modules/bs-custom-file-input/dist/',
+    to: 'plugins/bs-custom-file-input'
+  },
+  // bs-stepper
+  {
+    from: 'node_modules/bs-stepper/dist/',
+    to: 'plugins/bs-stepper'
+  },
+  // CodeMirror
+  {
+    from: 'node_modules/codemirror/lib/',
+    to: 'plugins/codemirror'
   },
   {
-    from: 'dist/js',
-    to  : 'docs/assets/js'
-  },
-  // jQuery
-  {
-    from: 'node_modules/jquery/dist',
-    to  : 'docs/assets/plugins/jquery'
-  },
-  // Popper
-  {
-    from: 'node_modules/popper.js/dist',
-    to  : 'docs/assets/plugins/popper'
-  },
-  // Bootstrap
-  {
-    from: 'node_modules/bootstrap/dist/js',
-    to  : 'docs/assets/plugins/bootstrap/js'
-  },
-  // Font Awesome
-  {
-    from: 'node_modules/@fortawesome/fontawesome-free/css',
-    to  : 'docs/assets/plugins/fontawesome-free/css'
+    from: 'node_modules/codemirror/addon/',
+    to: 'plugins/codemirror/addon'
   },
   {
-    from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
-    to  : 'docs/assets/plugins/fontawesome-free/webfonts'
-  },
-  // overlayScrollbars
-  {
-    from: 'node_modules/overlayscrollbars/js',
-    to  : 'docs/assets/plugins/overlayScrollbars/js'
+    from: 'node_modules/codemirror/keymap/',
+    to: 'plugins/codemirror/keymap'
   },
   {
-    from: 'node_modules/overlayscrollbars/css',
-    to  : 'docs/assets/plugins/overlayScrollbars/css'
+    from: 'node_modules/codemirror/mode/',
+    to: 'plugins/codemirror/mode'
+  },
+  {
+    from: 'node_modules/codemirror/theme/',
+    to: 'plugins/codemirror/theme'
+  },
+  // dropzonejs
+  {
+    from: 'node_modules/dropzone/dist/',
+    to: 'plugins/dropzone'
+  },
+  // uPlot
+  {
+    from: 'node_modules/uplot/dist/',
+    to: 'plugins/uplot'
   }
 ]
 

build/npm/Publish.js

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

build/npm/vnu-jar.js

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

build/scss/.csslintrc

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

build/scss/AdminLTE-raw.scss

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

build/scss/AdminLTE.scss

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

build/scss/_adminlte.raw.scss

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

build/scss/_alerts.scss

@@ -23,28 +23,14 @@
 }
 
 //Alert Variants
-.alert-success {
-  @extend .bg-success;
-  border-color: darken(theme-color('success'), 5%);
-}
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    color: color-yiq($value);
+    background-color: $value;
+    border-color: darken($value, 5%);
+  }
 
-.alert-danger,
-.alert-error {
-  @extend .bg-danger;
-  border-color: darken(theme-color('danger'), 5%);
-}
-
-.alert-warning {
-  @extend .bg-warning;
-  border-color: darken(theme-color('warning'), 5%);
-}
-
-.alert-info {
-  @extend .bg-info;
-  border-color: darken(theme-color('info'), 5%);
-}
-
-.alert-primary {
-  @extend .bg-primary;
-  border-color: darken(theme-color('primary'), 5%);
+  .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/_bootstrap-variables.scss

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

build/scss/_brand.scss

@@ -16,41 +16,91 @@
     text-decoration: none;
   }
 
-  [class*='sidebar-dark'] & {
+  .text-sm & {
+    font-size: inherit;
+  }
+
+  [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 10%);
-    color: rgba($white, .8);
+
+    &,
+    .pushmenu {
+      color: rgba($white, .8);
+
+      &:hover {
+        color: $white;
+      }
+    }
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
-    color: rgba($black, .8);
+
+    &,
+    .pushmenu {
+      color: rgba($black, .8);
+
+      &:hover {
+        color: $black;
+      }
+    }
+  }
+
+  .pushmenu {
+    margin-right: $sidebar-padding-x;
+    font-size: $font-size-base;
+  }
+
+  .brand-link {
+    padding: 0;
+    border-bottom: none;
+  }
+
+  .brand-image {
+    float: left;
+    line-height: .8;
+    margin-left: .8rem;
+    margin-right: .5rem;
+    margin-top: -3px;
+    max-height: 33px;
+    width: auto;
+  }
+
+  .brand-image-xs {
+    float: left;
+    line-height: .8;
+    margin-top: -.1rem;
+    max-height: 33px;
+    width: auto;
+  }
+
+  .brand-image-xl {
+    line-height: .8;
+    max-height: 40px;
+    width: auto;
+
+    &.single {
+      margin-top: -.3rem;
+    }
+  }
+
+  &.text-sm,
+  .text-sm & {
+    .brand-image {
+      height: 29px;
+      margin-bottom: -.25rem;
+      margin-left: .95rem;
+      margin-top: -.25rem;
+    }
+
+    .brand-image-xs {
+      margin-top: -.2rem;
+      max-height: 29px;
+    }
+
+    .brand-image-xl {
+      margin-top: -.225rem;
+      max-height: 38px;
+    }
   }
 }
-
-.brand-image {
-  float: left;
-  line-height: .8;
-  margin-left: .8rem;
-  margin-right: .5rem;
-  margin-top: -3px;
-  max-height: 34px;
-  width: auto;
-}
-
-.brand-image-xs {
-  float: left;
-  line-height: .8;
-  margin-left: .8rem;
-  margin-right: .5rem;
-  margin-top: -3px;
-  max-height: 34px;
-  width: auto;
-}
-
-.brand-image-xl {
-  line-height: .8;
-  margin-bottom: -10px;
-  margin-top: -14px;
-  max-height: 40px;
-  width: auto;
-}

build/scss/_buttons.scss

@@ -3,6 +3,11 @@
 //
 
 .btn {
+  &.disabled,
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   // Flat buttons
   &.btn-flat {
     @include border-radius(0);
@@ -15,8 +20,8 @@
     overflow: hidden;
     position: relative;
 
-    > input[type='file'] {
-      background: $white;
+    > input[type="file"] {
+      background-color: $white;
       cursor: inherit;
       display: block;
       font-size: 100px;
@@ -30,6 +35,10 @@
       top: 0;
     }
   }
+
+  .text-sm & {
+    font-size: $font-size-sm !important;
+  }
 }
 
 // Button color variations
@@ -65,21 +74,27 @@
   > .fas,
   > .far,
   > .fab,
-  > .glyphicon,
+  > .fal,
+  > .fad,
+  > .svg-inline--fa,
   > .ion {
     display: block;
     font-size: 20px;
   }
 
+  > .svg-inline--fa {
+    margin: 0 auto;
+  }
+
   &:hover {
-    background: $button-default-background-color;
+    background-color: $button-default-background-color;
     border-color: darken($button-default-border-color, 20%);
     color: $button-default-color;
   }
 
   &:active,
   &:focus {
-    @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
+    @include box-shadow(inset 0 3px 5px rgba($black, .125));
   }
 
   // The badge
@@ -92,3 +107,36 @@
   }
 }
 
+// Extra Button Size
+
+.btn-xs {
+  @include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
+}
+
+.dark-mode {
+  .btn-default,
+  .btn-app {
+    background-color: lighten($dark, 2.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 5%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 2.5%);
+    }
+  }
+  .btn-light {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+    border-color: $gray-600;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($dark, 10%);
+      color: $gray-300;
+      border-color: lighten($gray-600, 5%);
+    }
+  }
+}

build/scss/_callout.scss

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

build/scss/_cards.scss

@@ -2,11 +2,24 @@
 // Component: Cards
 //
 
+// Color variants
+@each $name, $color in $theme-colors {
+  @include cards-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include cards-variant($name, $color);
+}
+
 .card {
-  @extend .mb-3;
   @include box-shadow($card-shadow);
+  margin-bottom: map-get($spacers, 3);
 
   &.bg-dark {
+    .card-header {
+      border-color: $card-dark-border-color;
+    }
+
     &,
     .card-body {
       color: $white;
@@ -21,13 +34,17 @@
     position: fixed;
     top: 0;
     width: 100% !important;
-    z-index: 9999;
+    z-index: $zindex-modal-backdrop;
 
     &.was-collapsed .card-body {
       display: block !important;
     }
 
-    [data-widget='collapse'] {
+    .card-body {
+      overflow: auto;
+    }
+
+    [data-widget="collapse"] {
       display: none;
     }
 
@@ -71,6 +88,113 @@
   .border-left {
     border-left: 1px solid $card-border-color;
   }
+
+  &.card-tabs {
+    &:not(.card-outline) {
+      > .card-header {
+        border-bottom: 0;
+
+        .nav-item {
+          &:first-child .nav-link {
+            border-left-color: transparent;
+          }
+        }
+      }
+    }
+
+    &.card-outline {
+      .nav-item {
+        border-bottom: 0;
+
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+    }
+
+    .card-tools {
+      margin: .3rem .5rem;
+    }
+
+    &:not(.expanding-card).collapsed-card {
+      .card-header {
+        border-bottom: 0;
+
+        .nav-tabs {
+          border-bottom: 0;
+
+          .nav-item {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
+  }
+
+  &.card-outline-tabs {
+    border-top: 0;
+
+    .card-header {
+      .nav-item {
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+
+      a {
+        border-top: 3px solid transparent;
+
+        &:hover {
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+
+        &.active {
+          &:hover {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+
+    .card-tools {
+      margin: .5rem .5rem .3rem;
+    }
+
+    &:not(.expanding-card).collapsed-card .card-header {
+      border-bottom: 0;
+
+      .nav-tabs {
+        border-bottom: 0;
+
+        .nav-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
+  }
+
 }
 
 // Maximized Card Body Scroll fix
@@ -82,13 +206,14 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix;
+  @include clearfix ();
 }
 
 // Box header
 .card-header {
   background-color: transparent;
   border-bottom: 1px solid $card-border-color;
+  padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
   position: relative;
 
   @if $enable-rounded {
@@ -100,27 +225,40 @@ html.maximized-card {
   }
 
   > .card-tools {
-    position: absolute;
-    right: 1rem;
-    top: .5rem;
+    float: right;
+    margin-right: -$card-spacer-x / 2;
 
-    [data-toggle='tooltip'] {
+    .input-group,
+    .nav,
+    .pagination {
+      margin-bottom: -$card-spacer-y / 2.5;
+      margin-top: -$card-spacer-y / 2.5;
+    }
+
+    [data-toggle="tooltip"] {
       position: relative;
     }
   }
 }
 
 .card-title {
+  float: left;
   font-size: $card-title-font-size;
   font-weight: $card-title-font-weight;
   margin: 0;
 }
 
+.card-text {
+  clear: both;
+}
+
+
 // Box Tools Buttons
 .btn-tool {
-  background: transparent;
+  background-color: transparent;
   color: $gray-500;
   font-size: $font-size-sm;
+  margin: -(($card-spacer-y / 2) * 2) 0;
   padding: .25rem .5rem;
 
   .btn-group.show &,
@@ -134,12 +272,22 @@ html.maximized-card {
   }
 }
 
+.text-sm {
+  .card-title {
+    font-size: $card-title-font-size-sm;
+  }
+
+  .nav-link {
+    padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x;
+  }
+}
+
 // Box Body
 .card-body {
   // @include border-radius-sides(0, 0, $border-radius, $border-radius);
-  .no-header & {
-    // @include border-top-radius($border-radius);
-  }
+  // .no-header & {
+  //   @include border-top-radius($border-radius);
+  // }
 
   // Tables within the box body
   > .table {
@@ -166,7 +314,7 @@ html.maximized-card {
 }
 
 .chart-legend {
-  @extend .list-unstyled;
+  @include list-unstyled ();
   margin: 10px 0;
 
   > li {
@@ -179,10 +327,10 @@ html.maximized-card {
 
 // Comment Box
 .card-comments {
-  background: $gray-100;
+  background-color: $gray-100;
 
   .card-comment {
-    @include clearfix;
+    @include clearfix ();
     border-bottom: 1px solid $gray-200;
     padding: 8px 0;
 
@@ -195,7 +343,8 @@ html.maximized-card {
     }
 
     img {
-      @extend .img-sm;
+      height: $card-img-size;
+      width: $card-img-size;
       float: left;
     }
   }
@@ -230,7 +379,7 @@ html.maximized-card {
   // Todo list element
   > li {
     @include border-radius(2px);
-    background: $gray-100;
+    background-color: $gray-100;
     border-left: 2px solid $gray-200;
     color: $gray-700;
     margin-bottom: 2px;
@@ -240,7 +389,7 @@ html.maximized-card {
       margin-bottom: 0;
     }
 
-    > input[type='checkbox'] {
+    > input[type="checkbox"] {
       margin: 0 10px 0 5px;
     }
 
@@ -258,7 +407,7 @@ html.maximized-card {
 
     // Tools and options box
     .tools {
-      color: theme-color('danger');
+      color: theme-color("danger");
       display: none;
       float: right;
 
@@ -267,7 +416,9 @@ html.maximized-card {
       > .fas,
       > .far,
       > .fab,
-      > .glyphicon,
+      > .fal,
+      > .fad,
+      > .svg-inline--fa,
       > .ion {
         cursor: pointer;
         margin-right: 5px;
@@ -287,7 +438,7 @@ html.maximized-card {
       }
 
       .badge {
-        background: $gray-500 !important;
+        background-color: $gray-500 !important;
       }
     }
   }
@@ -319,11 +470,52 @@ html.maximized-card {
   max-width: 200px;
 }
 
-// Color variants
-@each $name, $color in $theme-colors {
-  @include cards-variant($name, $color);
+// Nav Tabs override
+.card-default {
+  .nav-item {
+    &:first-child .nav-link {
+      border-left: 0;
+    }
+  }
 }
 
-@each $name, $color in $colors {
-  @include cards-variant($name, $color);
+.dark-mode {
+
+  .card {
+    background-color: $dark;
+    color: $white;
+
+    .card {
+      background-color: lighten($dark, 5%);
+      color: $white;
+    }
+    .nav.flex-column > li {
+      border-bottom-color: $gray-600;
+    }
+    .card-footer {
+      background-color: rgba($black, .1);
+    }
+    &.card-outline-tabs .card-header a:hover {
+      border-color: $gray-600;
+    }
+    &:not(.card-outline) > .card-header a.active {
+      color: $white;
+    }
+  }
+
+  .card-comments {
+    background-color: lighten($dark, 1.25%);
+    .username {
+      color: $gray-400;
+    }
+    .card-comment {
+      border-bottom-color: lighten($dark, 7.5%);
+    }
+  }
+
+  .todo-list > li {
+    background-color: lighten($dark, 5%);
+    border-color: lighten($dark, 7.5%);
+    color: $white;
+  }
 }

build/scss/_carousel.scss

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

build/scss/_close.scss

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

build/scss/_colors.scss

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

build/scss/_control-sidebar.scss

@@ -1,27 +1,28 @@
 //
 // Component: Control Sidebar
 //
- 
+
 html.control-sidebar-animate {
   overflow-x: hidden;
 }
 
 .control-sidebar {
+  bottom: $main-footer-height;
   position: absolute;
   top: $main-header-height;
-  z-index: 830;
+  z-index: $zindex-control-sidebar;
 
   &,
   &::before {
-    bottom: 0;
+    bottom: $main-footer-height;
     display: none;
     right: -$control-sidebar-width;
     width: $control-sidebar-width;
-    @include transition(right $transition-speed $transition-fn);
+    @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
   }
 
   &::before {
-    content: " ";
+    content: "";
     display: block;
     position: fixed;
     top: 0;
@@ -29,30 +30,44 @@ html.control-sidebar-animate {
   }
 }
 
+body.text-sm {
+  .control-sidebar {
+    bottom: $main-footer-height-sm;
+    top: $main-header-height-sm;
+  }
+}
+
+.main-header.text-sm ~ .control-sidebar {
+  top: $main-header-height-sm;
+}
+
+.main-footer.text-sm ~ .control-sidebar {
+  bottom: $main-footer-height-sm;
+}
+
+.control-sidebar-push-slide {
+  .content-wrapper,
+  .main-footer {
+    @include transition(margin-right $transition-speed $transition-fn);
+  }
+}
+
 // Control sidebar open state
 .control-sidebar-open {
-  @include media-breakpoint-up(md) {
-    .control-sidebar {
-      display: block;
+  .control-sidebar {
+    display: block;
 
-      &,
-      &::before {
-        right: 0;
-      }
-    }
-
-    .content-wrapper,
-    .main-footer {
-      margin-right: $control-sidebar-width;
+    &,
+    &::before {
+      right: 0;
     }
   }
 
-  @include media-breakpoint-down(md) {
-    .control-sidebar {
-      &,
-      &::before {
-        right: 0;
-      }
+  &.control-sidebar-push,
+  &.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
     }
   }
 }
@@ -65,23 +80,29 @@ html.control-sidebar-animate {
     &,
     &::before {
       right: 0;
+      @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
+    }
+  }
+
+  &.control-sidebar-push,
+  &.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
     }
   }
 }
 
 // Dark skin
 .control-sidebar-dark {
+  background-color: $sidebar-dark-bg;
+
   &,
   a,
   .nav-link {
     color: $sidebar-dark-color;
   }
 
-  //  Background
-  & {
-    background: $sidebar-dark-bg;
-  }
-
   a:hover {
     color: $sidebar-dark-hover-color;
   }
@@ -147,8 +168,6 @@ html.control-sidebar-animate {
   color: lighten($sidebar-light-color, 10%);
 
   //  Background
-  & {
-    background: $sidebar-light-bg;
-    border-left: $main-header-bottom-border;
-  }
+  background-color: $sidebar-light-bg;
+  border-left: $main-header-bottom-border;
 }

build/scss/_direct-chat.scss

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

build/scss/_dropdown.scss

@@ -12,11 +12,27 @@
 //  }
 //}
 
+.text-sm {
+  .dropdown-menu {
+    font-size: $font-size-sm !important;
+  }
+
+  .dropdown-toggle::after {
+    vertical-align: .2rem;
+  }
+}
+
 .dropdown-item-title {
   font-size: $font-size-base;
   margin: 0;
 }
 
+.dropdown-icon {
+  &::after {
+    margin-left: 0;
+  }
+}
+
 // Dropdown Sizes
 .dropdown-menu-lg {
   max-width: 300px;
@@ -37,6 +53,38 @@
   }
 }
 
+// Dropdown Submenu
+.dropdown-submenu {
+  position: relative;
+
+  > a::after {
+    @include caret-right ();
+    float: right;
+    margin-left: .5rem;
+    margin-top: .5rem;
+  }
+
+  > .dropdown-menu {
+    left: 100%;
+    margin-left: 0;
+    margin-top: 0;
+    top: 0;
+  }
+}
+
+// Dropdown Hover
+.dropdown-hover {
+  &:hover,
+  &.nav-item.dropdown:hover,
+  .dropdown-submenu:hover,
+  &.dropdown-submenu:hover {
+    > .dropdown-menu {
+      display: block;
+    }
+  }
+}
+
+
 // Dropdown Sizes
 .dropdown-menu-xl {
   max-width: 420px;
@@ -66,7 +114,7 @@
   text-align: center;
 }
 
-// Add fade animation to dropdown menus by appending 
+// Add fade animation to dropdown menus by appending
 // the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
 .open:not(.dropup) > .animated-dropdown-menu {
   @include animation(flipInX .7s both);
@@ -121,7 +169,7 @@
         right: 5%;
         left: auto;
         border: 1px solid #ddd;
-        background: $white;
+        background-color: $white;
       }
     }
   }
@@ -129,14 +177,13 @@
 
 // User Menu
 .navbar-nav > .user-menu {
-  > .nav-link:after {
-    content:none;
+  > .nav-link::after {
+    content: none;
   }
 
   > .dropdown-menu {
     @include border-top-radius(0);
     padding: 0;
-    border-top-width: 0;
     width: 280px;
 
     &,
@@ -157,7 +204,7 @@
         width: 90px;
         border: 3px solid;
         border-color: transparent;
-        border-color: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, .2);
       }
 
       > p {
@@ -175,14 +222,14 @@
 
     // Menu Body
     > .user-body {
-      @include clearfix;
+      @include clearfix ();
       border-bottom: 1px solid $gray-700;
       border-top: 1px solid $gray-300;
       padding: 15px;
 
       a {
         @include media-breakpoint-up(sm) {
-          background: $white !important;
+          background-color: $white !important;
           color: $gray-700 !important;
         }
       }
@@ -190,7 +237,7 @@
 
     // Menu Footer
     > .user-footer {
-      @include clearfix;
+      @include clearfix ();
       background-color: $gray-100;
       padding: 10px;
 
@@ -210,15 +257,65 @@
     @include media-breakpoint-up(sm) {
       float: none;
       line-height: 10px;
-      margin-right: 0;
+      margin-right: .4rem;
       margin-top: -8px;
     }
 
     border-radius: 50%;
     float: left;
-    height: 25px;
+    height: $sidebar-user-image-width;
     margin-right: 10px;
     margin-top: -2px;
-    width: 25px;
+    width: $sidebar-user-image-width;
+  }
+}
+
+.dark-mode {
+  .dropdown-menu {
+    background-color: $dark;
+    color: $white;
+  }
+  .dropdown-item {
+    color: $white;
+
+    &:focus,
+    &:hover {
+      background-color: lighten($dark, 5%);
+    }
+  }
+  .dropdown-divider {
+    border-color: $gray-600;
+  }
+
+  .navbar-nav > .user-menu > .dropdown-menu {
+    > .user-footer {
+      background-color: lighten($dark, 2.5%);
+      color: $white;
+
+      .btn-default {
+        color: $white;
+
+        &:hover,
+        &:focus {
+          background-color: lighten($dark, 5%);
+          color: $gray-300;
+        }
+        &:focus {
+          background-color: lighten($dark, 7.5%);
+        }
+      }
+    }
+    > .user-body {
+      border-color: $gray-600;
+    }
+    > .user-body a {
+      background-color: transparent !important;
+      color: $white !important;
+
+      &:hover,
+      &:focus {
+        color: $gray-400 !important;
+      }
+    }
   }
 }

build/scss/_elevation.scss

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

build/scss/_forms.scss

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

build/scss/_info-box.scss

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

build/scss/_layout.scss

@@ -2,7 +2,7 @@
 // Core: Layout
 //
 
-html {
+html.scroll-smooth {
   scroll-behavior: smooth;
 }
 
@@ -15,8 +15,8 @@ body,
 .wrapper {
   position: relative;
 
-  & .content-wrapper {
-    min-height: calc(100vh - 112px);
+  .content-wrapper {
+    min-height: calc(100vh - #{$main-header-height} - #{$main-footer-height});
   }
 
   .layout-boxed & {
@@ -28,25 +28,92 @@ body,
       max-width: $boxed-layout-max-width;
     }
 
-    & .main-sidebar {
+    .main-sidebar {
       left: inherit;
     }
   }
 
-  .layout-navbar-fixed.layout-fixed & {
-    .sidebar {
-      margin-top: $main-header-height;
+  @supports not (-webkit-touch-callout: none) {
+    .layout-fixed & .sidebar {
+      height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+    }
+    .layout-fixed.text-sm & .sidebar {
+      height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
     }
   }
 
-  .layout-navbar-fixed.sidebar-collapse & {
+  .layout-navbar-fixed.layout-fixed & {
+    .control-sidebar {
+      top: $main-header-height;
+    }
+
+    .main-header.text-sm ~ .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
+    .sidebar {
+      margin-top: $main-header-height;
+    }
+
+    .brand-link.text-sm ~ .sidebar {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-fixed.layout-fixed.text-sm & {
+    .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
+    .sidebar {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-fixed.sidebar-mini.sidebar-collapse &,
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse & {
     .brand-link {
       height: $main-header-height;
       width: $sidebar-mini-width;
+
+      &.text-sm {
+        height: $main-header-height-sm;
+      }
+    }
+  }
+
+  .layout-navbar-fixed.sidebar-mini.sidebar-collapse.text-sm &,
+  .layout-navbar-fixed.sidebar-mini-md.sidebar-collapse.text-sm & {
+    .brand-link {
+      height: $main-header-height-sm;
+    }
+  }
+
+  body:not(.layout-fixed).layout-navbar-fixed & {
+    .main-sidebar {
+      // margin-top: calc(#{$main-header-height} / -1);
+
+      // .sidebar {
+      //   margin-top: $main-header-height;
+      // }
+    }
+  }
+
+  body:not(.layout-fixed).layout-navbar-fixed.text-sm & {
+    .main-sidebar {
+      margin-top: calc(#{$main-header-height-sm} / -1);
+
+      .sidebar {
+        margin-top: $main-header-height-sm;
+      }
     }
   }
 
   .layout-navbar-fixed & {
+    .control-sidebar {
+      top: 0;
+    }
+
     a.anchor {
       display: block;
       position: relative;
@@ -66,16 +133,16 @@ body,
       top: 0;
       transition: width $transition-speed $transition-fn;
       width: $sidebar-width;
-      z-index: $zindex-main-sidebar + 1;
+      z-index: $zindex-main-header + 1;
     }
 
     // Sidebar variants brand-link fix
     @each $name, $color in $theme-colors {
-      .sidebar-dark-#{$name} .brand-link {
+      .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
         background-color: $sidebar-dark-bg;
       }
 
-      .sidebar-light-#{$name} .brand-link {
+      .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
         background-color: $sidebar-light-bg;
       }
     }
@@ -84,12 +151,22 @@ body,
       margin-top: $main-header-height;
     }
 
+    .main-header.text-sm ~ .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+
     .main-header {
       left: 0;
       position: fixed;
       right: 0;
       top: 0;
-      z-index: $zindex-main-sidebar - 1;
+      z-index: $zindex-main-header - 1;
+    }
+  }
+
+  .layout-navbar-fixed.text-sm & {
+    .content-wrapper {
+      margin-top: $main-header-height-sm;
     }
   }
 
@@ -108,17 +185,51 @@ body,
     }
   }
 
+  .layout-navbar-not-fixed.layout-fixed & {
+    .sidebar {
+      margin-top: 0;
+    }
+  }
+
   @each $breakpoint in map-keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
       $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
       .layout#{$infix}-navbar-fixed.layout-fixed & {
+        .control-sidebar {
+          top: $main-header-height;
+        }
+
+        .text-sm & .main-header ~ .control-sidebar,
+        .main-header.text-sm ~ .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
         .sidebar {
           margin-top: $main-header-height;
         }
+
+        .text-sm & .brand-link ~ .sidebar,
+        .brand-link.text-sm ~ .sidebar {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
+      .layout#{$infix}-navbar-fixed.layout-fixed.text-sm & {
+        .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
+        .sidebar {
+          margin-top: $main-header-height-sm;
+        }
       }
 
       .layout#{$infix}-navbar-fixed & {
+        .control-sidebar {
+          top: 0;
+        }
+
         a.anchor {
           display: block;
           position: relative;
@@ -130,6 +241,11 @@ body,
             height: $main-header-height;
             transition: width $transition-speed $transition-fn;
             width: $sidebar-mini-width;
+
+            .text-sm &,
+            &.text-sm {
+              height: $main-header-height-sm;
+            }
           }
 
           .main-sidebar:hover {
@@ -146,16 +262,16 @@ body,
           top: 0;
           transition: width $transition-speed $transition-fn;
           width: $sidebar-width;
-          z-index: $zindex-main-sidebar + 1;
+          z-index: $zindex-main-header + 1;
         }
 
         // Sidebar variants brand-link fix
         @each $name, $color in $theme-colors {
-          .sidebar-dark-#{$name} .brand-link {
+          .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
             background-color: $sidebar-dark-bg;
           }
 
-          .sidebar-light-#{$name} .brand-link {
+          .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
             background-color: $sidebar-light-bg;
           }
         }
@@ -164,6 +280,11 @@ body,
           margin-top: $main-header-height;
         }
 
+        .text-sm & .main-header ~ .content-wrapper,
+        .main-header.text-sm ~ .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+
         .main-header {
           left: 0;
           position: fixed;
@@ -173,6 +294,32 @@ body,
         }
       }
 
+      .layout#{$infix}-navbar-fixed.text-sm & {
+        .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
+      body:not(.layout-fixed).layout#{$infix}-navbar-fixed & {
+        // .main-sidebar {
+        //   margin-top: calc(#{$main-header-height} / -1);
+
+        //   .sidebar {
+        //     margin-top: $main-header-height;
+        //   }
+        // }
+      }
+
+      body:not(.layout-fixed).layout#{$infix}-navbar-fixed.text-sm & {
+        .main-sidebar {
+          margin-top: calc(#{$main-header-height-sm} / -1);
+
+          .sidebar {
+            margin-top: $main-header-height-sm;
+          }
+        }
+      }
+
       .layout#{$infix}-navbar-not-fixed & {
         .brand-link {
           position: static;
@@ -188,16 +335,25 @@ body,
         }
       }
 
+      .layout#{$infix}-navbar-not-fixed.layout-fixed & {
+        .sidebar {
+          margin-top: 0;
+        }
+      }
     }
   }
 
   .layout-footer-fixed & {
+    .control-sidebar {
+      bottom: 0;
+    }
+
     .main-footer {
       bottom: 0;
       left: 0;
       position: fixed;
       right: 0;
-      z-index: $zindex-main-sidebar - 1;
+      z-index: $zindex-main-footer;
     }
   }
 
@@ -214,18 +370,21 @@ body,
   @each $breakpoint in map-keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
       $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
       .layout#{$infix}-footer-fixed & {
+        .control-sidebar {
+          bottom: 0;
+        }
+
         .main-footer {
           bottom: 0;
           left: 0;
           position: fixed;
           right: 0;
-          z-index: $zindex-main-sidebar - 1;
+          z-index: $zindex-main-footer;
         }
 
         .content-wrapper {
-          margin-bottom: $main-footer-height;
+          padding-bottom: $main-footer-height;
         }
       }
 
@@ -240,43 +399,32 @@ body,
   .layout-top-nav & {
     margin-left: 0;
 
+    .main-header {
+      .brand-image {
+        margin-top: -.5rem;
+        margin-right: .2rem;
+        height: 33px;
+      }
+    }
 
-    & .main-sidebar {
+    .main-sidebar {
       bottom: inherit;
       height: inherit;
     }
 
-    .brand-image {
-      height: 33px;
-    }
-
-    & .main-sidebar {
-      display: none;
-    }
-
-    & .content-wrapper,
-    & .main-header,
-    & .main-footer {
+    .content-wrapper,
+    .main-header,
+    .main-footer {
       margin-left: 0;
     }
   }
 }
 
-.content-wrapper,
-.main-footer,
-.main-header {
-  @include media-breakpoint-up(sm) {
-    @include transition(margin-left $transition-speed $transition-fn);
 
-    margin-left: $sidebar-width;
-    z-index: 3000;
-
-    .sidebar-collapse & {
-      margin-left: 0;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
+body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
     &,
     &::before {
       margin-left: 0;
@@ -284,8 +432,54 @@ body,
   }
 }
 
+body:not(.sidebar-mini-md) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: 0;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      &,
+      &::before {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.sidebar-mini-md {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    @include media-breakpoint-up(md) {
+      @include transition(margin-left $transition-speed $transition-fn);
+
+      margin-left: $sidebar-width;
+
+      .sidebar-collapse & {
+        margin-left: $sidebar-mini-width;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      &,
+      &::before {
+        margin-left: $sidebar-mini-width;
+      }
+    }
+  }
+}
+
 .content-wrapper {
-  background: $main-bg;
+  background-color: $main-bg;
 
   > .content {
     padding: $content-padding-y $content-padding-x;
@@ -300,11 +494,22 @@ body,
     width: $sidebar-width;
   }
 
+  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) & {
+    &,
+    &::before {
+      box-shadow: none !important;
+    }
+  }
+
   .sidebar-collapse & {
     &,
     &::before {
       margin-left: -$sidebar-width;
     }
+
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding: 0;
+    }
   }
 
   @include media-breakpoint-down(sm) {
@@ -345,35 +550,102 @@ body,
     position: fixed;
     top: 0;
   }
+
+  .control-sidebar {
+    bottom: 0;
+    float: none;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+
+    .control-sidebar-content {
+      height: calc(100vh - #{$main-header-height});
+    }
+  }
+}
+
+@supports (-webkit-touch-callout: none) {
+  .layout-fixed {
+    .main-sidebar {
+      height: inherit;
+    }
+  }
 }
 
 .main-footer {
-  background: $main-footer-bg;
+  background-color: $main-footer-bg;
   border-top: $main-footer-border-top;
   color: lighten($gray-700, 25%);
   padding: $main-footer-padding;
+
+  .text-sm &,
+  &.text-sm {
+    padding: $main-footer-padding-sm;
+  }
 }
 
 .content-header {
   padding: 15px $content-padding-x;
 
+  .text-sm & {
+    padding: 10px $content-padding-x;
+  }
+
   h1 {
     font-size: 1.8rem;
     margin: 0;
+
+    .text-sm & {
+      font-size: 1.5rem;
+    }
   }
 
   .breadcrumb {
-    background: transparent;
+    background-color: transparent;
     line-height: 1.8rem;
     margin-bottom: 0;
     padding: 0;
+
+    .text-sm & {
+      line-height: 1.5rem;
+    }
   }
 }
 
+
 .hold-transition {
   .content-wrapper,
   .main-header,
+  .main-sidebar,
+  .main-sidebar *,
+  .control-sidebar,
+  .control-sidebar *,
   .main-footer {
     transition: none !important;
+    animation-duration: 0s !important;
+  }
+}
+
+.dark-mode {
+  background-color: lighten($dark, 7.5%) !important;
+  color: $white;
+
+  .breadcrumb-item {
+    &.active,
+    + .breadcrumb-item::before {
+      color: $gray-500;
+    }
+  }
+  .main-footer {
+    background-color: $dark;
+    border-color: lighten($dark, 10%);
+  }
+  .content-wrapper {
+    background-color: lighten($dark, 7.5%);
+    color: $white;
+
+    .content-header {
+      color: $white;
+    }
   }
 }

build/scss/_main-header.scss

@@ -1,7 +1,7 @@
 //
 // Component: Main Header
 //
- 
+
 .main-header {
   border-bottom: $main-header-bottom-border;
   z-index: $zindex-main-header;
@@ -11,12 +11,32 @@
     position: relative;
   }
 
+  .text-sm &,
+  &.text-sm {
+    .nav-link {
+      height: $nav-link-sm-height;
+      padding: $nav-link-sm-padding-y $nav-link-padding-x;
+
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .fal,
+      > .fad,
+      > .svg-inline--fa,
+      > .ion {
+        font-size: $font-size-sm;
+      }
+    }
+
+  }
+
   .navbar-nav {
     .nav-item {
       margin: 0;
     }
 
-    &[class*='-right'] {
+    &[class*="-right"] {
       .dropdown-menu {
         left: auto;
         margin-top: -3px;
@@ -29,6 +49,11 @@
       }
     }
   }
+
+  &.dropdown-legacy .dropdown-menu {
+    top: $nav-link-height + $navbar-padding-y;
+    margin-top: 0;
+  }
 }
 
 // Add this class to images within a nav-link
@@ -55,7 +80,7 @@
 .form-control-navbar {
   border-right-width: 0;
 
-  & + .input-group-append {
+  + .input-group-append {
     margin-left: 0;
   }
 }
@@ -73,14 +98,17 @@
   }
 
   .form-control-navbar {
-    &::placeholder,
+    &::placeholder {
+      color: $main-header-dark-placeholder-color;
+    }
+
     + .input-group-append > .btn-navbar {
       color: $main-header-dark-placeholder-color;
     }
 
     &:focus {
       &,
-      & + .input-group-append .btn-navbar {
+      + .input-group-append .btn-navbar {
         background-color: $main-header-dark-form-control-focused-bg;
         border: $main-header-dark-form-control-focused-border !important;
         color: $main-header-dark-form-control-focused-color;
@@ -97,17 +125,17 @@
   }
 
   .form-control-navbar {
-    &:ms-placeholder,
-    &:moz-placeholder,
-    &::moz-placeholder,
-    &::placeholder,
+    &::placeholder {
+      color: $main-header-light-placeholder-color;
+    }
+
     + .input-group-append > .btn-navbar {
       color: $main-header-light-placeholder-color;
     }
 
     &:focus {
       &,
-      & + .input-group-append .btn-navbar {
+      + .input-group-append .btn-navbar {
         background-color: $main-header-light-form-control-focused-bg;
         border: $main-header-light-form-control-focused-border !important;
         color: $main-header-light-form-control-focused-color;

build/scss/_main-sidebar.scss

@@ -6,11 +6,20 @@
   height: 100vh;
   overflow-y: hidden;
   z-index: $zindex-main-sidebar;
+
+  // Remove Firefox Focusring
+  a {
+    &:-moz-focusring {
+      border: 0;
+      outline: none;
+    }
+  }
+
 }
 
 .sidebar {
-  height: calc(100% - 4rem);
-  overflow-y: auto;
+  height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  overflow-y: initial;
   padding-bottom: $sidebar-padding-y;
   padding-left: $sidebar-padding-x;
   padding-right: $sidebar-padding-x;
@@ -21,11 +30,11 @@
 .user-panel {
   position: relative;
 
-  [class*='sidebar-dark'] & {
+  [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 12%);
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
   }
 
@@ -69,13 +78,19 @@
     }
   }
 
+  .nav-link > .right,
   .nav-link > p > .right {
     position: absolute;
     right: 1rem;
-    top: 12px;
+    top: .7rem;
+
+    i,
+    span {
+      margin-left: .5rem;
+    }
 
     &:nth-child(2) {
-      right: 2.5rem;
+      right: 2.2rem;
     }
   }
 
@@ -83,7 +98,10 @@
     > .nav-treeview {
       display: block;
     }
+  }
 
+  .menu-open,
+  .menu-is-opening {
     > .nav-link {
       i.right {
         @include rotate(-90deg);
@@ -96,6 +114,7 @@
     margin-bottom: 0;
 
     .nav-icon {
+      margin-left: .05rem;
       font-size: 1.2rem;
       margin-right: .2rem;
       text-align: center;
@@ -105,7 +124,9 @@
       &.fas,
       &.far,
       &.fab,
-      &.glyphicon,
+      &.fal,
+      &.fad,
+      &.svg-inline--fa,
       &.ion {
         font-size: 1.1rem;
       }
@@ -133,7 +154,26 @@
 
   &.nav-child-indent {
     .nav-treeview {
+      transition: padding $transition-speed $transition-fn;
       padding-left: 1rem;
+
+      .text-sm & {
+        padding-left: .5rem;
+      }
+    }
+
+    &.nav-legacy {
+      .nav-treeview {
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+
+          .text-sm & {
+            padding-left: 1rem;
+            margin-left: -.5rem;
+          }
+        }
+      }
     }
   }
 
@@ -152,6 +192,14 @@
   }
 }
 
+.sidebar-is-opening .nav-sidebar {
+  .nav-link p {
+    animation-name: fadeIn;
+    animation-duration: $transition-speed;
+    animation-fill-mode: both;
+  }
+}
+
 #sidebar-overlay {
   @include media-breakpoint-down(md) {
     .sidebar-open & {
@@ -159,7 +207,7 @@
     }
   }
 
-  background-color: rgba($black, 0.1);
+  background-color: rgba($black, .1);
   bottom: 0;
   display: none;
   left: 0;
@@ -169,20 +217,7 @@
   z-index: $zindex-main-sidebar - 1;
 }
 
-.sidebar-mini-md {
-  &.sidebar-open {
-    #sidebar-overlay {
-      @include media-breakpoint-up(sm) {
-        display: none;
-      }
-      @include media-breakpoint-down(sm) {
-        display: block;
-      }
-    }
-  }
-}
-
-[class*='sidebar-light-'] {
+[class*="sidebar-light-"] {
   // Sidebar background color
   background-color: $sidebar-light-bg;
 
@@ -193,13 +228,13 @@
     }
 
     .status {
-      background: $sidebar-light-hover-bg;
+      background-color: $sidebar-light-hover-bg;
       color: $sidebar-light-color;
 
       &:hover,
       &:focus,
       &:active {
-        background: darken($sidebar-light-hover-bg, 3%);
+        background-color: darken($sidebar-light-hover-bg, 3%);
         color: $sidebar-light-hover-color;
       }
     }
@@ -236,19 +271,19 @@
       color: $sidebar-light-active-color;
 
       @if $enable-shadows {
-        @extend .elevation-1;
+        box-shadow: map-get($elevations, 1);
       }
     }
 
     // First Level Submenu
     > .nav-treeview {
-      background: $sidebar-light-submenu-bg;
+      background-color: $sidebar-light-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    background: inherit;
+    background-color: inherit;
     color: darken($sidebar-light-color, 5%);
   }
 
@@ -283,9 +318,29 @@
       }
     }
   }
+
+  // Flat style
+  .nav-flat {
+    .nav-item {
+      .nav-treeview {
+        .nav-treeview {
+          border-color: $sidebar-light-submenu-active-bg;
+        }
+
+        > .nav-item {
+          > .nav-link {
+            &,
+            &.active {
+              border-color: $sidebar-light-submenu-active-bg;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
-[class*='sidebar-dark-'] {
+[class*="sidebar-dark-"] {
   // Sidebar background color
   background-color: $sidebar-dark-bg;
 
@@ -296,13 +351,13 @@
     }
 
     .status {
-      background: $sidebar-dark-hover-bg;
+      background-color: $sidebar-dark-hover-bg;
       color: $sidebar-dark-color;
 
       &:hover,
       &:focus,
       &:active {
-        background: darken($sidebar-dark-hover-bg, 3%);
+        background-color: darken($sidebar-dark-hover-bg, 3%);
         color: $sidebar-dark-hover-color;
       }
     }
@@ -330,7 +385,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;
     }
@@ -339,19 +394,19 @@
       color: $sidebar-dark-hover-color;
 
       @if $enable-shadows {
-        @extend .elevation-1;
+        box-shadow: map-get($elevations, 1);
       }
     }
 
     // First Level Submenu
     > .nav-treeview {
-      background: $sidebar-dark-submenu-bg;
+      background-color: $sidebar-dark-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    background: inherit; //darken($sidebar-dark-bg, 3%);
+    background-color: inherit; //darken($sidebar-dark-bg, 3%);
     color: lighten($sidebar-dark-color, 5%);
   }
 
@@ -390,20 +445,681 @@
       }
     }
   }
+
+  // Flat Style
+  .nav-flat {
+    .nav-item {
+      .nav-treeview {
+        .nav-treeview {
+          border-color: $sidebar-dark-submenu-active-bg;
+        }
+
+        > .nav-item {
+          > .nav-link {
+            &,
+            &.active {
+              border-color: $sidebar-dark-submenu-active-bg;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 // Sidebar variants
 @each $name, $color in $theme-colors {
   .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include sidebar-color($color)
+    @include sidebar-color($color);
   }
 }
 
 @each $name, $color in $colors {
   .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include sidebar-color($color)
+    @include sidebar-color($color);
   }
 }
 
+.sidebar-mini .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
+.sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
+.sidebar-mini .main-sidebar.sidebar-focused,
+.sidebar-mini-md .main-sidebar.sidebar-focused {
+  .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
+    padding-left: 1rem;
+    margin-left: -.5rem;
+  }
+}
+
+// Nav Flat
+.nav-flat {
+  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+
+  .nav-item {
+    > .nav-link {
+      border-radius: 0;
+      margin-bottom: 0;
+
+      > .nav-icon {
+        margin-left: .55rem;
+      }
+    }
+  }
+
+  &:not(.nav-child-indent) {
+    .nav-treeview {
+      .nav-item {
+        > .nav-link {
+          > .nav-icon {
+            margin-left: .4rem;
+          }
+        }
+      }
+    }
+  }
+
+  &.nav-child-indent {
+    .nav-treeview {
+      padding-left: 0;
+
+      .nav-icon {
+        margin-left: .85rem;
+      }
+
+      .nav-treeview {
+        border-left: .2rem solid;
+
+        .nav-icon {
+          margin-left: 1.15rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: 1.45rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: 1.75rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: 2.05rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-collapse &.nav-child-indent {
+    .nav-treeview {
+      .nav-icon {
+        margin-left: .55rem;
+      }
+
+      .nav-link {
+        padding-left: calc(#{$nav-link-padding-x} - .2rem);
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: .35rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: .15rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: -.15rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: -.35rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md .main-sidebar.sidebar-focused & {
+    &.nav-compact.nav-sidebar .nav-treeview {
+      .nav-icon {
+        margin-left: .4rem;
+      }
+    }
+
+    &.nav-sidebar.nav-child-indent .nav-treeview {
+      .nav-icon {
+        margin-left: .85rem;
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: 1.15rem;
+        }
+
+        .nav-treeview {
+          .nav-icon {
+            margin-left: 1.45rem;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: 1.75rem;
+            }
+
+            .nav-treeview {
+              .nav-icon {
+                margin-left: 2.05rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .nav-icon {
+    @include transition(margin-left $transition-fn $transition-speed);
+  }
+
+  .nav-treeview {
+    .nav-icon {
+      margin-left: -.2rem;
+    }
+  }
+
+  &.nav-sidebar > .nav-item {
+    .nav-treeview,
+    > .nav-treeview {
+      background-color: rgba($white, .05);
+
+      .nav-item {
+        > .nav-link {
+          border-left: .2rem solid;
+        }
+      }
+    }
+  }
+}
+
+.nav-legacy {
+  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
+
+  &.nav-sidebar .nav-item {
+    > .nav-link {
+      border-radius: 0;
+      margin-bottom: 0;
+
+      > .nav-icon {
+        margin-left: .55rem;
+
+        .text-sm & {
+          margin-left: .75rem;
+        }
+      }
+    }
+  }
+
+  &.nav-sidebar > .nav-item {
+    > .nav-link {
+      &.active {
+        background-color: inherit;
+        border-left: 3px solid transparent;
+        box-shadow: none;
+
+        > .nav-icon {
+          margin-left: calc(.55rem - 3px);
+
+          .text-sm & {
+            margin-left: calc(.75rem - 3px);
+          }
+        }
+      }
+    }
+  }
+
+  .text-sm &.nav-sidebar.nav-flat .nav-treeview {
+    .nav-item {
+      > .nav-link {
+        > .nav-icon {
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
+  }
+
+  .sidebar-mini &,
+  .sidebar-mini-md & {
+    > .nav-item .nav-link {
+      .nav-icon {
+        @include transition(margin-left $transition-fn $transition-speed);
+        margin-left: .75rem;
+      }
+    }
+  }
+
+  .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;
+
+      .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;
+        }
+      }
+    }
+
+    &.nav-child-indent {
+      .nav-treeview {
+        .nav-treeview {
+          padding-left: 0;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+
+  .sidebar-mini.sidebar-collapse.text-sm &,
+  .sidebar-mini-md.sidebar-collapse.text-sm & {
+    > .nav-item > .nav-link {
+      .nav-icon {
+        margin-left: .75rem;
+      }
+
+      &.active {
+        > .nav-icon{
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
+  }
+
+  [class*="sidebar-dark"] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background-color: rgba($white, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-dark-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        color: $sidebar-dark-active-color;
+      }
+    }
+  }
+
+  [class*="sidebar-light"] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background-color: rgba($black, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-light-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background-color: transparent;
+        color: $sidebar-light-active-color;
+      }
+    }
+  }
+}
+
+
+.nav-collapse-hide-child {
+  .menu-open > .nav-treeview {
+    max-height: min-content;
+    animation-name: fadeIn;
+    animation-duration: $transition-speed;
+    animation-fill-mode: both;
+  }
+
+  .sidebar-collapse & {
+    .menu-open > .nav-treeview {
+      max-height: 0;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
+    .menu-open > .nav-treeview {
+      max-height: min-content;
+      animation-name: fadeIn;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
+    }
+  }
+}
+
+// Nav Compact
+.nav-compact {
+  .nav-link,
+  .nav-header {
+    padding-top: ($nav-link-padding-y / 2);
+    padding-bottom: ($nav-link-padding-y / 2);
+  }
+
+  .nav-header:not(:first-of-type) {
+    padding-top: ($nav-link-padding-y * 1.5);
+    padding-bottom: ($nav-link-padding-y / 2);
+  }
+
+  .nav-link > .right,
+  .nav-link > p > .right {
+    top: .465rem;
+  }
+
+  .text-sm & {
+    .nav-link > .right,
+    .nav-link > p > .right {
+      top: .7rem;
+    }
+  }
+}
+
+// Sidebar Form Control
+[class*="sidebar-dark"] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    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%);
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid lighten($sidebar-dark-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background-color: lighten($sidebar-dark-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background-color: lighten($sidebar-dark-bg, 10%);
+  }
+
+  .list-group-item {
+    background-color: lighten($sidebar-dark-bg, 7.5%);
+    border-color: lighten($sidebar-dark-bg, 15%);
+    color: $sidebar-dark-color;
+
+    &:hover {
+      background-color: lighten($sidebar-dark-bg, 10%);
+    }
+
+    &:focus {
+      background-color: lighten($sidebar-dark-bg, 12.5%);
+    }
+
+    .search-path {
+      color: $gray-500;
+    }
+  }
+}
+
+[class*="sidebar-light"] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background-color: darken($sidebar-light-bg, 5%);
+    border: 1px solid darken($sidebar-light-bg, 15%);
+    color: color-yiq(darken($sidebar-light-bg, 5%));
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid darken($sidebar-light-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background-color: darken($sidebar-light-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background-color: darken($sidebar-light-bg, 10%);
+  }
+
+  .list-group-item {
+    border-color: darken($sidebar-light-bg, 15%);
+
+    &:hover {
+      background-color: darken($sidebar-light-bg, 7.5%);
+    }
+
+    &:focus {
+      background-color: darken($sidebar-light-bg, 10%);
+    }
+
+    .search-path {
+      color: $gray-600;
+    }
+  }
+}
+
+// Sidebar inline input-group fix
+.sidebar .form-inline .input-group {
+  width: 100%;
+}
+.sidebar nav .form-inline {
+  margin-bottom: .2rem;
+}
+
+// Sidebar Collapse on Layout Boxed
+.layout-boxed:not(.sidebar-mini):not(.sidebar-mini-md) {
+  &.sidebar-collapse .main-sidebar {
+    margin-left: 0;
+  }
+  .content-wrapper,
+  .main-header,
+  .main-footer {
+    z-index: 9999;
+    position: relative;
+  }
+}
+
+// Sidebar Search
+.sidebar-collapse {
+  .form-control-sidebar,
+  .form-control-sidebar ~ .input-group-append,
+  .sidebar-search-results {
+    display: none;
+  }
+}
+
+[data-widget="sidebar-search"] {
+  input[type="search"] {
+    &::-ms-clear,
+    &::-ms-reveal {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+}
+
+.sidebar-search-results {
+  position: relative;
+  display: none;
+  width: 100%;
+
+  .sidebar-search-open & {
+    display: inline-block;
+  }
+
+  .search-title {
+    margin-bottom: -.1rem;
+  }
+
+  .list-group {
+    position: absolute;
+    width: 100%;
+    z-index: $zindex-main-sidebar + 1;
+
+    > .list-group-item {
+      padding: $input-padding-y $input-padding-x;
+
+      &:-moz-focusring {
+        margin-top: 0;
+        border-left: 1px solid transparent;
+        border-top: 0;
+        border-bottom: 1px solid transparent;
+      }
+
+      &:first-child {
+        margin-top: 0;
+        border-top: 0;
+        @include border-top-radius(0);
+      }
+    }
+  }
+}
+
+.sidebar-search-results .search-path {
+  font-size: $small-font-size;
+}
+
+.sidebar-search-open {
+  .btn,
+  .form-control {
+    @include border-bottom-radius(0);
+  }
+}
+
+// Custom Area
+.sidebar-custom {
+  [class*="sidebar-dark"] & {
+    border-top: 1px solid lighten($dark, 12%);
+  }
+
+  [class*="sidebar-light"] & {
+    border-top: 1px solid $gray-300;
+  }
+}
+
+.layout-fixed {
+  &.sidebar-collapse {
+    .hide-on-collapse {
+      display: none;
+    }
+  }
+
+  &.sidebar-collapse:hover {
+    .hide-on-collapse {
+      display: block;
+    }
+  }
+
+  .main-sidebar-custom {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height}) + #{$main-header-bottom-border-width}));
+    }
+
+    .sidebar-custom {
+      height: $sidebar-custom-height;
+      padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
+    }
+  }
+
+  .main-sidebar-custom-lg {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height-lg}) + #{$main-header-bottom-border-width}));
+    }
+
+    .sidebar-custom {
+      height: $sidebar-custom-height-lg;
+    }
+  }
+
+  .main-sidebar-custom-xl {
+    .sidebar {
+      height: calc(100% - ((#{$main-header-height-inner} + #{$sidebar-custom-height-xl}) + #{$main-header-bottom-border-width}));
+    }
+
+    .sidebar-custom {
+      height: $sidebar-custom-height-xl;
+    }
+  }
+
+  .main-sidebar-custom,
+  .main-sidebar-custom-lg,
+  .main-sidebar-custom-xl {
+    .pos-right {
+      position: absolute;
+      right: .5rem;
+    }
+  }
+}

build/scss/_miscellaneous.scss

@@ -47,12 +47,12 @@
 .list-header {
   color: $gray-600;
   font-size: 15px;
-  font-weight: bold;
+  font-weight: 700;
   padding: 10px 4px;
 }
 
 .list-seperator {
-  background: $card-border-color;
+  background-color: $card-border-color;
   height: 1px;
   margin: 15px 0 9px;
 }
@@ -70,7 +70,7 @@
 
 // User block
 .user-block {
-  @include clearfix;
+  float: left;
 
   img {
     float: left;
@@ -88,16 +88,19 @@
   .username {
     font-size: 16px;
     font-weight: 600;
+    margin-top: -1px;
   }
 
   .description {
-    color: #999;
+    color: $gray-600;
     font-size: 13px;
+    margin-top: -3px;
   }
 
   &.user-block-sm {
     img {
-      @extend .img-sm;
+      width: $img-size-sm;
+      height: $img-size-sm;
     }
 
     .username,
@@ -120,29 +123,29 @@
 }
 
 .img-sm {
-  height: 30px !important;
-  width: 30px !important;
+  height: $img-size-sm;
+  width: $img-size-sm;
 
   + .img-push {
-    margin-left: 40px;
+    margin-left: $img-size-sm + $img-size-push;
   }
 }
 
 .img-md {
-  width: 60px;
-  height: 60px;
+  width: $img-size-md;
+  height: $img-size-md;
 
   + .img-push {
-    margin-left: 70px;
+    margin-left: $img-size-md + $img-size-push;
   }
 }
 
 .img-lg {
-  width: 100px;
-  height: 100px;
+  width: $img-size-lg;
+  height: $img-size-lg;
 
   + .img-push {
-    margin-left: 110px;
+    margin-left: $img-size-lg + $img-size-push;
   }
 }
 
@@ -159,7 +162,7 @@
 
 // Rounded and Circle Images
 .img-rounded {
-  @include border-radius($border-radius)
+  @include border-radius($border-radius);
 }
 
 .img-circle {
@@ -213,7 +216,7 @@
 
 // General attachemnt block
 .attachment-block {
-  background: $gray-100;
+  background-color: $gray-100;
   border: 1px solid $card-border-color;
   margin-bottom: 10px;
   padding: 5px;
@@ -256,7 +259,7 @@
   .overlay {
     @include border-radius($border-radius);
     align-items: center;
-    background: rgba($white, 0.7);
+    background-color: rgba($white, .7);
     display: flex;
     justify-content: center;
     z-index: 50;
@@ -265,19 +268,23 @@
     > .fas,
     > .far,
     > .fab,
-    > .glyphicon,
+    > .fal,
+    > .fad,
+    > .svg-inline--fa,
     > .ion {
       color: $gray-800;
     }
 
     &.dark {
-      background: rgba($black, 0.5);
+      background-color: rgba($black, .5);
 
       > .fa,
       > .fas,
       > .far,
       > .fab,
-      > .glyphicon,
+      > .fal,
+      > .fad,
+      > .svg-inline--fa,
       > .ion {
         color: $gray-400;
       }
@@ -285,6 +292,26 @@
   }
 }
 
+.tab-pane {
+  // Box overlay for LOADING STATE effect on Tab Panels
+  > .overlay-wrapper {
+    position: relative;
+    > .overlay {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      flex-direction: column;
+      margin-top: -$card-spacer-x;
+      margin-left: -$card-spacer-x;
+      height: calc(100% + 2 * #{$card-spacer-x});
+      width: calc(100% + 2 * #{$card-spacer-x});
+
+      &.dark {
+        color: $white;
+      }
+    }
+  }
+}
+
 // Ribbon
 .ribbon-wrapper {
   height: $ribbon-wrapper-size;
@@ -337,7 +364,7 @@
       border-right: $ribbon-border-size solid transparent;
       border-top: $ribbon-border-size solid #9e9e9e;
       bottom: -$ribbon-border-size;
-      content: '';
+      content: "";
       position: absolute;
     }
 
@@ -356,6 +383,7 @@
   bottom: 1.25rem;
   position: fixed;
   right: 1.25rem;
+  z-index: $zindex-control-sidebar + 1;
 
   &:focus {
     box-shadow: none;
@@ -369,13 +397,13 @@ pre {
 
 // Blockquotes styles
 blockquote {
-  background: $white;
+  background-color: $white;
   border-left: .7rem solid $primary;
   margin: 1.5em .7rem;
-  padding: 0.5em .7rem;
+  padding: .5em .7rem;
 
   .box & {
-    background: $gray-200;
+    background-color: $gray-200;
   }
 
   p:last-child {
@@ -440,3 +468,44 @@ blockquote {
   margin-bottom: .5rem;
   padding-bottom: .5rem;
 }
+
+
+// Badge BTN Style
+.badge-btn {
+  border-radius: $button-border-radius-xs;
+  font-size: $button-font-size-xs;
+  font-weight: 400;
+  padding: $button-padding-y-xs * 2 $button-padding-x-xs * 2;
+}
+
+.badge-btn.badge-pill {
+  padding: .375rem .6rem;
+}
+
+.dark-mode {
+  a:not(.btn):hover {
+    color: lighten($link-color, 10%);
+  }
+  .attachment-block {
+    background-color: lighten($dark, 3.75%);
+
+    .attachment-text {
+      color: $gray-400;
+    }
+  }
+  blockquote {
+    background-color: lighten($dark, 5%);
+  }
+  .close,
+  .mailbox-attachment-close {
+    color: $gray-500;
+    text-shadow: 0 1px 0 $gray-700;
+  }
+  .tab-custom-content {
+    border-color: $gray-600;
+  }
+  .list-group-item {
+    background-color: $dark;
+    border-color: $gray-600;
+  }
+}

build/scss/_mixins.scss

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

build/scss/_modals.scss

@@ -34,6 +34,39 @@
   &.bg-success, {
     .close {
       color: $white;
+      text-shadow: 0 1px 0 $black;
+    }
+  }
+}
+
+.dark-mode {
+  .modal-header,
+  .modal-footer {
+    border-color: $gray-600;
+  }
+  .modal-content {
+    background-color: $dark;
+
+    &.bg-warning {
+      .modal-header,
+      .modal-footer {
+        border-color: $gray-600;
+      }
+      .close {
+        color: $dark !important;
+        text-shadow: 0 1px 0 $gray-700 !important;
+      }
+    }
+
+    &.bg-primary,
+    &.bg-secondary,
+    &.bg-info,
+    &.bg-danger,
+    &.bg-success {
+      .modal-header,
+      .modal-footer {
+        border-color: $white;
+      }
     }
   }
 }

build/scss/_navs.scss

@@ -7,7 +7,7 @@
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color('primary');
+      color: theme-color("primary");
     }
   }
 
@@ -26,43 +26,64 @@
   border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
 
   .nav-link {
+    border-bottom-left-radius: $nav-tabs-border-radius;
+    border-top-right-radius: 0;
     margin-right: -$nav-tabs-border-width;
 
-    @include hover-focus {
-      border-color: $gray-200 $nav-tabs-border-color $gray-200 $gray-200;
+    @include hover-focus () {
+      border-color: $gray-200 transparent $gray-200 $gray-200;
     }
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    border-color: $gray-300 $nav-tabs-link-active-bg $gray-300 $gray-300;
+    border-color: $gray-300 transparent $gray-300 $gray-300;
   }
 
   &.nav-tabs-right {
     border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
     border-right: 0;
 
-
     .nav-link {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $nav-tabs-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: $nav-tabs-border-radius;
       margin-left: -$nav-tabs-border-width;
 
-      @include hover-focus {
-        border-color: $gray-200 $gray-200 $gray-200 $nav-tabs-border-color;
+      @include hover-focus () {
+        border-color: $gray-200 $gray-200 $gray-200 transparent;
       }
     }
 
     .nav-link.active,
     .nav-item.show .nav-link {
-      border-color: $gray-300 $gray-300 $gray-300 $nav-tabs-link-active-bg;
+      border-color: $gray-300 $gray-300 $gray-300 transparent;
     }
   }
 }
 
+.navbar-no-expand {
+  flex-direction: row;
+
+  .nav-link {
+    padding-left: $navbar-nav-link-padding-x;
+    padding-right: $navbar-nav-link-padding-x;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+  }
+}
+
 // Color variants
 @each $color, $value in $theme-colors {
   @if $color == dark or $color == light {
     .navbar-#{$color} {
       background-color: $value;
+      @if $color == dark {
+        border-color: lighten($dark, 10%);
+      }
     }
   }
 }
@@ -80,3 +101,49 @@
     background-color: $value;
   }
 }
+
+.dark-mode {
+  .nav-pills .nav-link {
+    color: $gray-400;
+  }
+  .nav-tabs {
+    border-color: lighten($dark, 15%);
+
+    .nav-link:focus,
+    .nav-link:hover {
+      border-color: lighten($dark, 15%);
+    }
+
+    .nav-item.show .nav-link,
+    .nav-link.active {
+      background-color: $dark;
+      border-color: lighten($dark, 15%) lighten($dark, 15%) transparent lighten($dark, 15%);
+      color: $white;
+    }
+
+    &.flex-column {
+      .nav-item.show .nav-link,
+      .nav-link {
+        &.active,
+        &:focus,
+        &:hover {
+          border-color: lighten($dark, 15%) transparent lighten($dark, 15%) lighten($dark, 15%);
+        }
+        &:focus,
+        &:hover {
+          background-color: lighten($dark, 5%);
+        }
+      }
+      &.nav-tabs-right {
+        border-color: lighten($dark, 15%);
+        .nav-link {
+          &.active,
+          &:focus,
+          &:hover {
+            border-color: lighten($dark, 15%) lighten($dark, 15%) lighten($dark, 15%) transparent;
+          }
+        }
+      }
+    }
+  }
+}

build/scss/_pagination.scss

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

build/scss/_products.scss

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

build/scss/_progress-bars.scss

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

build/scss/_sidebar-mini.scss

@@ -5,7 +5,6 @@
 // Logo style
 .logo-xs,
 .logo-xl {
-  margin: 0;
   opacity: 1;
   position: absolute;
   visibility: visible;
@@ -34,7 +33,7 @@
 .brand-link {
   &.logo-switch {
     &::before {
-      content: '\00a0';
+      content: "\00a0";
     }
   }
 }
@@ -42,13 +41,102 @@
 // Add sidebar-mini class to the body tag to activate this feature
 .sidebar-mini {
   @include media-breakpoint-up(lg) {
-    @include sidebar-mini-breakpoint;
+    @include sidebar-mini-breakpoint ();
+  }
+}
+@include media-breakpoint-down(md) {
+  .sidebar-mini.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
   }
 }
 
 .sidebar-mini-md {
   @include media-breakpoint-up(md) {
-    @include sidebar-mini-breakpoint;
+    @include sidebar-mini-breakpoint ();
+  }
+}
+@include media-breakpoint-down(sm) {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.sidebar-collapse {
+  .main-sidebar.sidebar-focused,
+  .main-sidebar:hover {
+    .nav-header {
+      display: inline-block;
+    }
+  }
+
+  .sidebar-no-expand.main-sidebar.sidebar-focused,
+  .sidebar-no-expand.main-sidebar:hover {
+    width: $sidebar-mini-width;
+
+    .nav-header {
+      display: none;
+    }
+
+    .brand-link {
+      width: $sidebar-mini-width !important;
+    }
+
+    .user-panel .image {
+      float: none !important;
+    }
+
+    .logo-xs {
+      animation-name: fadeIn;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
+      visibility: visible;
+    }
+
+    .logo-xl {
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
+      visibility: hidden;
+    }
+
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding-left: 0;
+    }
+
+    .brand-text,
+    .user-panel > .info,
+    .nav-sidebar .nav-link p {
+      margin-left: -10px;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
+      visibility: hidden;
+      width: 0;
+    }
+
+    .nav-sidebar > .nav-item .nav-icon {
+      margin-right: 0;
+    }
   }
 }
 
@@ -82,5 +170,5 @@
 .main-sidebar .logo-xs,
 .main-sidebar .logo-xl,
 .sidebar .user-panel .info {
-  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
+  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease);
 }

build/scss/_small-box.scss

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

build/scss/_social-widgets.scss

@@ -17,17 +17,18 @@
       @include border-top-radius($border-radius);
     }
 
-    height: 120px;
+    height: 135px;
     padding: 1rem;
+    text-align: center;
   }
 
   //User name
   .widget-user-username {
     font-size: 25px;
     font-weight: 300;
-    margin-bottom: 5px;
+    margin-bottom: 0;
     margin-top: 0;
-    text-shadow: 0 1px 1px rgba($black, 0.2);
+    text-shadow: 0 1px 1px rgba($black, .2);
   }
 
   //User single line description
@@ -40,7 +41,7 @@
     left: 50%;
     margin-left: -45px;
     position: absolute;
-    top: 65px;
+    top: 80px;
 
     > img {
       border: 3px solid $white;
@@ -50,7 +51,7 @@
   }
 
   .card-footer {
-    padding-top: 40px;
+    padding-top: 50px;
   }
 }
 

build/scss/_table.scss

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

build/scss/_text.scss

@@ -4,16 +4,22 @@
 
 // text modification
 .text-bold {
-  &, &.table td, &.table th {
+  &,
+  &.table td,
+  &.table th {
     font-weight: 700;
   }
 }
 
+.text-xs {
+  font-size: $font-size-xs !important;
+}
+
 .text-sm {
   font-size: $font-size-sm !important;
 }
 
-.text-xs {
+.text-md {
   font-size: $font-size-base !important;
 }
 
@@ -28,6 +34,12 @@
 // text color variations
 @each $name, $color in $colors {
   .text-#{$name} {
-    color: #{$color};
+    color: #{$color} !important;
+  }
+}
+
+.dark-mode {
+  .text-muted {
+    color: $gray-500 !important;
   }
 }

build/scss/_timeline.scss

@@ -3,42 +3,43 @@
 //
 
 .timeline {
-  list-style: none;
-  margin: 0 0 30px;
+  margin: 0 0 45px;
   padding: 0;
   position: relative;
-
   // The line
   &::before {
     @include border-radius($border-radius);
-    background: $gray-300;
+    background-color: $gray-300;
     bottom: 0;
-    content: '';
+    content: "";
     left: 31px;
     margin: 0;
     position: absolute;
     top: 0;
     width: 4px;
   }
+  // Element
+  > div {
+    &::before,
+    &::after {
+      content: "";
+      display: table;
+    }
 
-  > li {
-    @include clearfix;
     margin-bottom: 15px;
     margin-right: 10px;
     position: relative;
-
     // The content
     > .timeline-item {
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
-      background: $white;
+      background-color: $white;
       color: $gray-700;
       margin-left: 60px;
       margin-right: 15px;
       margin-top: 0;
       padding: 0;
       position: relative;
-
       // The time and header
       > .time {
         color: #999;
@@ -46,7 +47,7 @@
         font-size: 12px;
         padding: 10px;
       }
-
+      // Header
       > .timeline-header {
         border-bottom: 1px solid $card-border-color;
         color: $gray-700;
@@ -54,30 +55,46 @@
         line-height: 1.1;
         margin: 0;
         padding: 10px;
-
+        // Link in header
         > a {
           font-weight: 600;
         }
       }
-
       // Item body and footer
       > .timeline-body,
       > .timeline-footer {
         padding: 10px;
       }
 
-    }
+      > .timeline-body {
+        > img {
+          margin: 10px;
+        }
+        > dl,
+        ol,
+        ul {
+          margin: 0;
+        }
+      }
 
-    // The icons
+      > .timeline-footer {
+        > a {
+          color: $white;
+        }
+      }
+    }
+    // The icons at line
     > .fa,
     > .fas,
     > .far,
     > .fab,
-    > .glyphicon,
+    > .fal,
+    > .fad,
+    > .svg-inline--fa,
     > .ion {
-      background: $gray-500;
+      background-color: $gray-500;
       border-radius: 50%;
-      font-size: 15px;
+      font-size: 16px;
       height: 30px;
       left: 18px;
       line-height: 30px;
@@ -86,13 +103,14 @@
       top: 0;
       width: 30px;
     }
+    > .svg-inline--fa {
+      padding: 7px;
+    }
   }
-
   // Time label
   > .time-label {
     > span {
       @include border-radius(4px);
-
       background-color: $white;
       display: inline-block;
       font-weight: 600;
@@ -102,10 +120,10 @@
 }
 
 .timeline-inverse {
-  > li {
+  > div {
     > .timeline-item {
       @include box-shadow(none);
-      background: $gray-100;
+      background-color: $gray-100;
       border: 1px solid $gray-300;
 
       > .timeline-header {
@@ -114,3 +132,24 @@
     }
   }
 }
+
+.dark-mode {
+  .timeline {
+    &::before {
+      background-color: $gray-600;
+    }
+    > div > .timeline-item {
+      background-color: $dark;
+      color: $white;
+      border-color: $gray-600;
+
+      > .timeline-header {
+        color: $gray-400;
+        border-color: $gray-600;
+      }
+      > .time {
+        color: $gray-400;
+      }
+    }
+  }
+}

build/scss/_toasts.scss

@@ -0,0 +1,68 @@
+//
+// Component: Toasts
+//
+
+.toasts-top-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-top-left {
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-bottom-right {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-bottom-left {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.dark-mode {
+  .toast {
+    background-color: rgba($dark, .85);
+    color: $white;
+
+    .toast-header {
+      background-color: rgba($dark, .7);
+      color: $gray-100;
+    }
+  }
+}
+
+.toast {
+  @each $name, $color in $theme-colors {
+    @include toast-variant($name, $color);
+  }
+  @each $name, $color in $colors {
+    @include toast-variant($name, $color);
+  }
+}

build/scss/_users-list.scss

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

build/scss/_variables.scss

@@ -5,6 +5,7 @@
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
+$lightblue: #3c8dbc !default;
 $navy: #001f3f !default;
 $teal: #39cccc !default;
 $olive: #3d9970 !default;
@@ -16,13 +17,17 @@ $maroon: #d81b60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
-$colors: map-merge((
-    'navy': $navy,
-    'olive': $olive,
-    'lime': $lime,
-    'fuchsia': $fuchsia,
-    'maroon': $maroon,
-), $colors);
+$colors: map-merge(
+  (
+    "lightblue": $lightblue,
+    "navy": $navy,
+    "olive": $olive,
+    "lime": $lime,
+    "fuchsia": $fuchsia,
+    "maroon": $maroon,
+  ),
+  $colors
+);
 
 // LAYOUT
 // --------------------------------------------------------
@@ -31,8 +36,13 @@ $font-size-root: 1rem !default;
 
 // Sidebar
 $sidebar-width: 250px !default;
-$sidebar-padding-x: 0.5rem !default;
+$sidebar-padding-x: .5rem !default;
 $sidebar-padding-y: 0 !default;
+$sidebar-custom-height: 4rem !default;
+$sidebar-custom-height-lg: 6rem !default;
+$sidebar-custom-height-xl: 8rem !default;
+$sidebar-custom-padding-x: .85rem !default;
+$sidebar-custom-padding-y: .5rem !default;
 
 // Boxed layout maximum width
 $boxed-layout-max-width: 1250px !default;
@@ -47,6 +57,13 @@ $main-bg: #f4f6f9 !default;
 $content-padding-y: 0 !default;
 $content-padding-x: $navbar-padding-x !default;
 
+// IMAGE SIZES
+// --------------------------------------------------------
+$img-size-sm: 1.875rem !default;
+$img-size-md: 3.75rem !default;
+$img-size-lg: 6.25rem !default;
+$img-size-push: .625rem !default;
+
 // MAIN HEADER
 // --------------------------------------------------------
 $main-header-bottom-border-width: $border-width !default;
@@ -58,55 +75,63 @@ $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;
+$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
+$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
+$main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}) !default;
+
 
 // Main header skins
-$main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
-$main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-form-control-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: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-placeholder-color: rgba(255, 255, 255, .6) !default;
 
 $main-header-light-form-control-bg: darken($gray-100, 2%) !default;
 $main-header-light-form-control-focused-bg: $gray-200 !default;
 $main-header-light-form-control-focused-color: $gray-800 !default;
 $main-header-light-form-control-border: 0 !default;
 $main-header-light-form-control-focused-border: 0 !default;
-$main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
+$main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default;
 
 // MAIN FOOTER
 // --------------------------------------------------------
 $main-footer-padding: 1rem !default;
+$main-footer-padding-sm: $main-footer-padding * .812 !default;
 $main-footer-border-top-width: 1px !default;
 $main-footer-border-top-color: $gray-300 !default;
 $main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
 $main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
 $main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
-$main-footer-bg: $white;
+$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
+$main-footer-height-sm: calc(#{$main-footer-height-sm-inner} + #{$main-footer-border-top-width}) !default;
+$main-footer-bg: $white !default;
 
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
 // Dark sidebar
 $sidebar-dark-bg: $dark !default;
-$sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
-$sidebar-dark-color: #C2C7D0 !default;
+$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
+$sidebar-dark-color: #c2c7d0 !default;
 $sidebar-dark-hover-color: $white !default;
 $sidebar-dark-active-color: $white !default;
 $sidebar-dark-submenu-bg: transparent !default;
-$sidebar-dark-submenu-color: #C2C7D0 !default;
+$sidebar-dark-submenu-color: #c2c7d0 !default;
 $sidebar-dark-submenu-hover-color: $white !default;
 $sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
 $sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
-$sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
+$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
 $sidebar-dark-header-color: $white !default;
 
 // Light sidebar
 $sidebar-light-bg: $white !default;
-$sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%) !default;
+$sidebar-light-hover-bg: rgba($black, .1) !default;
 $sidebar-light-color: $gray-800 !default;
 $sidebar-light-hover-color: $gray-900 !default;
-$sidebar-light-active-color: $white !default;
+$sidebar-light-active-color: $black !default;
 $sidebar-light-submenu-bg: transparent !default;
 $sidebar-light-submenu-color: #777 !default;
 $sidebar-light-submenu-hover-color: #000 !default;
@@ -118,8 +143,8 @@ $sidebar-light-header-color: $gray-800 !default;
 // SIDEBAR MINI
 // --------------------------------------------------------
 $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
-$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2);
-$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2);
+$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
+$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
 
 // CONTROL SIDEBAR
 // --------------------------------------------------------
@@ -128,9 +153,14 @@ $control-sidebar-width: $sidebar-width !default;
 // Cards
 // --------------------------------------------------------
 $card-border-color: $gray-100 !default;
+$card-dark-border-color: lighten($gray-900, 10%) !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
-$card-title-font-size: $font-size-lg;
-$card-title-font-weight: $font-weight-normal;
+$card-title-font-size: 1.1rem !default;
+$card-title-font-size-sm: 1rem !default;
+$card-title-font-weight: $font-weight-normal !default;
+$card-nav-link-padding-sm-y: .4rem !default;
+$card-nav-link-padding-sm-x: .8rem !default;
+$card-img-size: $img-size-sm !default;
 
 // PROGRESS BARS
 // --------------------------------------------------------
@@ -151,20 +181,24 @@ $attachment-border-radius: 3px !default;
 
 // Z-INDEX
 // --------------------------------------------------------
-$zindex-main-header: $zindex-fixed + 2 !default;
-$zindex-main-sidebar: $zindex-fixed + 6 !default;
+$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;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
 
 // Transition global options
-$transition-speed: 0.3s !default;
+$transition-speed: .3s !default;
 $transition-fn: ease-in-out !default;
 
 // TEXT
 // --------------------------------------------------------
-$font-size-xl: ($font-size-base * 2);
+$font-size-xs: ($font-size-base * .75) !default;
+$font-size-xl: ($font-size-base * 2) !default;
 
 
 // BUTTON
@@ -172,22 +206,43 @@ $font-size-xl: ($font-size-base * 2);
 $button-default-background-color: $gray-100 !default;
 $button-default-color: #444 !default;
 $button-default-border-color: #ddd !default;
-  
+
+$button-padding-y-xs: .125rem !default;
+$button-padding-x-xs: .25rem !default;
+$button-line-height-xs: $line-height-sm !default;
+$button-font-size-xs: ($font-size-base * .75) !default;
+$button-border-radius-xs: .15rem !default;
+
+
+// ELEVATION
+// --------------------------------------------------------
+$elevations: ();
+$elevations: map-merge(
+  (
+    1: unquote("0 1px 3px " + rgba($black, .12) + ", 0 1px 2px " + rgba($black, .24)),
+    2: unquote("0 3px 6px " + rgba($black, .16) + ", 0 3px 6px " + rgba($black, .23)),
+    3: unquote("0 10px 20px " + rgba($black, .19) + ", 0 6px 6px " + rgba($black, .23)),
+    4: unquote("0 14px 28px " + rgba($black, .25) + ", 0 10px 10px " + rgba($black, .22)),
+    5: unquote("0 19px 38px " + rgba($black, .3) + ", 0 15px 12px " + rgba($black, .22)),
+  ),
+  $elevations
+);
+
 // RIBBON
 // --------------------------------------------------------
 $ribbon-border-size: 3px !default;
 $ribbon-line-height: 100% !default;
 $ribbon-padding: .375rem 0 !default;
 $ribbon-font-size: .8rem !default;
-$ribbon-width: 110px !default;
-$ribbon-wrapper-size: 90px !default;
-$ribbon-top: 9px !default;
-$ribbon-right: -12px !default;
-$ribbon-lg-wrapper-size: 180px !default;
+$ribbon-width: 90px !default;
+$ribbon-wrapper-size: 70px !default;
+$ribbon-top: 10px !default;
+$ribbon-right: -2px !default;
+$ribbon-lg-wrapper-size: 120px !default;
 $ribbon-lg-width: 160px !default;
 $ribbon-lg-top: 26px !default;
-$ribbon-lg-right: -59px !default;
-$ribbon-xl-wrapper-size: 240px !default;
+$ribbon-lg-right: 0 !default;
+$ribbon-xl-wrapper-size: 180px !default;
 $ribbon-xl-width: 240px !default;
-$ribbon-xl-top: 59px !default;
-$ribbon-xl-right: -48px !default;
+$ribbon-xl-top: 47px !default;
+$ribbon-xl-right: 4px !default;

build/scss/adminlte.scss

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

build/scss/mixins/_accent.scss

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

build/scss/mixins/_backgrounds.scss

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

build/scss/mixins/_cards.scss

@@ -0,0 +1,82 @@
+//
+// Mixins: Cards Variant
+//
+
+@mixin cards-variant($name, $color) {
+  .card-#{$name} {
+    &:not(.card-outline) {
+      > .card-header {
+        background-color: $color;
+
+        &,
+        a {
+          color: color-yiq($color);
+        }
+
+        a.active {
+          color: color-yiq($white);
+        }
+      }
+    }
+
+    &.card-outline {
+      border-top: 3px solid $color;
+    }
+
+    &.card-outline-tabs {
+      > .card-header {
+        a {
+          &:hover {
+            border-top: 3px solid $nav-tabs-border-color;
+          }
+
+          &.active {
+            border-top: 3px solid $color;
+          }
+        }
+      }
+    }
+  }
+
+  .bg-#{$name},
+  .bg-gradient-#{$name},
+  .card-#{$name}:not(.card-outline) {
+    .btn-tool {
+      color: rgba(color-yiq($color), .8);
+
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .card.bg-#{$name},
+  .card.bg-gradient-#{$name} {
+    .bootstrap-datetimepicker-widget {
+      .table td,
+      .table th {
+        border: none;
+      }
+
+      table thead tr:first-child th:hover,
+      table td.day:hover,
+      table td.hour:hover,
+      table td.minute:hover,
+      table td.second:hover {
+        background-color: darken($color, 8%);
+        color: color-yiq($color);
+      }
+
+      table td.today::before {
+        border-bottom-color: color-yiq($color);
+      }
+
+      table td.active,
+      table td.active:hover {
+        background-color: lighten($color, 10%);
+        color: color-yiq($color);
+      }
+    }
+  }
+}
+

build/scss/mixins/_custom-forms.scss

@@ -0,0 +1,123 @@
+//
+// Mixins: Custom Forms
+//
+
+// Custom Switch Variant
+@mixin custom-switch-variant($name, $color) {
+  &.custom-switch-off-#{$name} {
+    .custom-control-input ~ .custom-control-label::before {
+      background-color: #{$color};
+      border-color: darken($color, 20%);
+    }
+
+    .custom-control-input:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
+    .custom-control-input ~ .custom-control-label::after {
+      background-color: darken($color, 25%);
+    }
+  }
+
+  &.custom-switch-on-#{$name} {
+    .custom-control-input:checked ~ .custom-control-label::before {
+      background-color: #{$color};
+      border-color: darken($color, 20%);
+    }
+
+    .custom-control-input:checked:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
+    .custom-control-input:checked ~ .custom-control-label::after {
+      background-color: lighten($color, 30%);
+    }
+  }
+}
+
+// Custom Range Variant
+@mixin custom-range-variant($name, $color) {
+  &.custom-range-#{$name} {
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+
+      &::-moz-range-thumb     {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+
+      &::-ms-thumb            {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-moz-range-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-ms-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+  }
+}
+
+
+// Custom Control Input Variant
+@mixin custom-control-input-variant($name, $color) {
+  $custom-control-indicator-checked-color: $color;
+  $custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23");
+  $custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23");
+
+  .custom-control-input-#{$name} {
+    &:checked ~ .custom-control-label::before {
+      border-color: $color;
+      @include gradient-bg($color);
+    }
+
+    &.custom-control-input-outline:checked {
+      &[type="checkbox"] ~ .custom-control-label::after {
+        background-image: $custom-checkbox-indicator-icon-checked !important;
+      }
+      &[type="radio"] ~ .custom-control-label::after {
+        background-image: $custom-radio-indicator-icon-checked !important;
+      }
+    }
+
+    &:focus ~ .custom-control-label::before {
+      // the mixin is not used here to make sure there is feedback
+      @if $enable-shadows {
+        box-shadow: $input-box-shadow, 0 0 0 $input-btn-focus-width rgba($color, .25);
+      } @else {
+        box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
+      }
+    }
+
+    &:focus:not(:checked) ~ .custom-control-label::before {
+      border-color: lighten($color, 25%);
+    }
+
+    &:not(:disabled):active ~ .custom-control-label::before {
+      background-color: lighten($color, 35%);
+      border-color: lighten($color, 35%);
+    }
+  }
+}

build/scss/mixins/_direct-chat.scss

@@ -0,0 +1,17 @@
+//
+// Mixins: Direct Chat
+//
+
+// Direct Chat Variant
+@mixin direct-chat-variant($bg-color, $color: $white) {
+  .right > .direct-chat-text {
+    background-color: $bg-color;
+    border-color: $bg-color;
+    color: color-yiq($bg-color);
+
+    &::after,
+    &::before {
+      border-left-color: $bg-color;
+    }
+  }
+}

build/scss/mixins/_miscellaneous.scss

@@ -0,0 +1,32 @@
+//
+// Mixins: Miscellaneous
+//
+
+// ETC
+@mixin translate($x, $y) {
+  transform: translate($x, $y);
+}
+
+// Different radius each side
+@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
+  border-radius: $top-left $top-right $bottom-left $bottom-right;
+}
+
+@mixin calc($property, $expression) {
+  #{$property}: calc(#{$expression});
+}
+
+@mixin rotate($value) {
+  transform: rotate($value);
+}
+
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+// Gradient background
+@mixin gradient($color: #f5f5f5, $start: #eee, $stop: $white) {
+  background-color: $color;
+  background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
+}
+

build/scss/mixins/_navbar.scss

@@ -0,0 +1,34 @@
+//
+// Mixins: Navbar
+//
+
+// 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;
+
+  .nav > li > a {
+    color: $font-color;
+  }
+
+  .nav > li > a:hover,
+  .nav > li > a:active,
+  .nav > li > a:focus,
+  .nav .open > a,
+  .nav .open > a:hover,
+  .nav .open > a:focus,
+  .nav > .active > a {
+    background-color: $hover-bg;
+    color: $hover-color;
+  }
+
+  // Add color to the sidebar toggle button
+  .sidebar-toggle {
+    color: $font-color;
+
+    &:hover,
+    &:focus {
+      background-color: $hover-bg;
+      color: $hover-color;
+    }
+  }
+}

build/scss/mixins/_sidebar.scss

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

build/scss/mixins/_toasts.scss

@@ -0,0 +1,23 @@
+//
+// Mixins: Toasts
+//
+
+// Toast Variant
+@mixin toast-variant($name, $color) {
+  &.bg-#{$name} {
+    background-color: rgba($color, .9) !important;
+    @if (color-yiq($color) == $yiq-text-light) {
+
+      .close {
+        color: color-yiq($color);
+        text-shadow: 0 1px 0 $black;
+      }
+    }
+
+    .toast-header {
+      background-color: rgba($color, .85);
+      color: color-yiq($color);
+    }
+  }
+}
+

build/scss/pages/_404_500_errors.scss

@@ -1,7 +1,7 @@
 //
 // Pages: 400 and 500 error pages
 //
- 
+
 .error-page {
   margin: 20px auto 0;
   width: 600px;

build/scss/pages/_e-commerce.scss

@@ -4,7 +4,7 @@
 
 // product image
 .product-image {
-  @include img-fluid;
+  @include img-fluid ();
   width: 100%;
 }
 
@@ -28,12 +28,12 @@
   padding: $thumbnail-padding * 2;
 
   img {
-    @include img-fluid;
+    @include img-fluid ();
     align-self: center;
   }
 
   &:hover {
-    opacity: 0.5;
+    opacity: .5;
   }
 }