prep version

* Overlay for tab-panels

Don't know if i did it right, double check plz... 
There's a way to avoid the use of a overlay-wrapper? i'm not good in css....

* Update navbar.html

.babelrc

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

.browserslistrc

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

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+

.github/ISSUE_TEMPLATE/bug-report-for-adminlte-v2-4-x.md

@@ -0,0 +1,32 @@
+---
+name: Bug report for AdminLTE v2.4.x
+about: Create a report to help us improve AdminLTE v2.4.x
+title: "[BUG]"
+labels: type:bug, version:2.4.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. v2.4.18]
+ - 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/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.

.gitignore

@@ -1,12 +1,38 @@
+// System / Log files 
 *.DS_Store
 *.log
+
+// Archives
 *.zip
+
+// Sass Cache
+.sass-cache
+
+// Project files
 .idea
 nbproject
 nbproject/private
-node_modules
-.sass-cache
-bower_components
-ad.js
+.vscode/
+.vs/
+
+// Node / Bower
+node_modules/
+bower_components/
+
+// Plugins
+/plugins/*/*.md
+/plugins/*/*.html
+/plugins/*/package.json
+
+
+// Docs
+Gemfile.lock
+docs/_site
+docs_html/
+.jekyll-cache/
+.jekyll-metadata
+
+// ETC
 TODO
 test.html
+ad.js

.npmignore

@@ -0,0 +1 @@
+!/docs_html/

.travis.yml

@@ -0,0 +1,25 @@
+language: node_js
+
+node_js:
+  - 8
+  - 10
+  - 11
+  - 12
+
+env:
+  - INSTALL=yarn
+  - INSTALL=npm
+
+
+matrix:
+  fast_finish: true
+  exclude:
+    - node_js: 8
+      env: INSTALL=yarn
+
+install:
+  - if [ "yarn" == $INSTALL ]; then yarn install; fi
+  - if [ "npm" == $INSTALL ]; then npm install; fi
+
+script:
+  - echo 'Tests must be configured'

README.md

@@ -1,14 +1,19 @@
 Introduction
 ============
 
+[![Build Status](https://img.shields.io/travis/ColorlibHQ/AdminLTE/master.svg)](https://travis-ci.org/ColorlibHQ/AdminLTE)
+[![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)
+
 **AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4](https://getbootstrap.com)** framework.
 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
+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")
@@ -22,25 +27,34 @@ There are multiple ways to install AdminLTE.
 
 #### Download:
 
-Download from Github or [visit AdminLTE.io](https://adminlte.io) and download the latest release.
+Download from [Github releases](https://github.com/ColorlibHQ/AdminLTE/releases).
 
 #### Using The Command Line:
 
-**NPM**
+__Via NPM__
 ```bash
-npm install admin-lte
+npm install admin-lte@^3.0 --save
 ```
 
-**Github**
+__Via Yarn__
+```bash
+yarn add admin-lte@^3.0
+```
 
+__Via Composer__
+```bash
+composer require "almasaeed2010/adminlte=~3.0"
+```
+
+__Via Git__
 - Clone to your machine
 ```
-git clone https://github.com/almasaeed2010/AdminLTE.git
+git clone https://github.com/ColorlibHQ/AdminLTE.git
 ```
 
 Documentation
 -------------
-Visit the [online documentation](https://adminlte.io/themes/AdminLTE/documentation/index.html) for the most
+Visit the [online documentation](https://adminlte.io/docs/3.0/) for the most
 updated guide. Information will be added on a weekly basis.
 
 Browser Support
@@ -61,8 +75,14 @@ Contribution are always **welcome and recommended**! Here is how:
 - Make your changes
 - Create a pull request
 
-#### Contribution Requirements:
+#### Compile dist files
+To compile the dist files you need nodejs/npm, clone/download the repo then:
 
+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)
+
+#### 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](http://opensource.org/licenses) license.
 - Contributions are only accepted through Github pull requests.
@@ -75,12 +95,12 @@ reserves the right to change the license of future releases.
 
 Legacy Releases
 ---------------
-- [AdminLTE 2](https://github.com/almasaeed2010/AdminLTE/releases/tag/v2.4.3)
-- [AdminLTE 1](https://github.com/almasaeed2010/AdminLTE/releases/tag/1.3.1)
+- [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18)
+- [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1)
 
 Change log
 ----------
-Visit the [releases](https://github.com/almasaeed2010/AdminLTE/releases) page to view the changelog
+Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog
 
 Image Credits
 -------------

build/config/postcss.config.js

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

build/config/rollup.config.js

@@ -0,0 +1,29 @@
+import babel from '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: `/*!
+ * AdminLTE v${pkg.version} (${pkg.homepage})
+ * Copyright 2014-${year} ${pkg.author}
+ * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
+ */`,
+    file  : 'dist/js/adminlte.js',
+    format: 'umd',
+    globals,
+    name  : 'adminlte'
+  },
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+      externalHelpers: true
+    })
+  ]
+}

build/js/AdminLTE.js

@@ -2,12 +2,22 @@ import ControlSidebar from './ControlSidebar'
 import Layout from './Layout'
 import PushMenu from './PushMenu'
 import Treeview from './Treeview'
-import Widget from './Widget'
+import DirectChat from './DirectChat'
+import TodoList from './TodoList'
+import CardWidget from './CardWidget'
+import CardRefresh from './CardRefresh'
+import Dropdown from './Dropdown'
+import Toasts from './Toasts'
 
 export {
   ControlSidebar,
   Layout,
   PushMenu,
   Treeview,
-  Widget
+  DirectChat,
+  TodoList,
+  CardWidget,
+  CardRefresh,
+  Dropdown,
+  Toasts
 }

build/js/CardRefresh.js

@@ -0,0 +1,168 @@
+/**
+ * --------------------------------------------
+ * AdminLTE CardRefresh.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const CardRefresh = (($) => {
+  /**
+   * 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}`,
+    OVERLAY_ADDED: `overlay.added${EVENT_KEY}`,
+    OVERLAY_REMOVED: `overlay.removed${EVENT_KEY}`,
+  }
+
+  const ClassName = {
+    CARD: 'card',
+  }
+
+  const Selector = {
+    CARD: `.${ClassName.CARD}`,
+    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: function () {
+    },
+    onLoadDone: function (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(ClassName.CARD)) {
+        this._parent = element
+      }
+
+      if (this._settings.source === '') {
+        throw new Error('Source url was not defined. Please specify a url in your CardRefresh source option.');
+      }
+    }
+
+    load() {
+      this._addOverlay()
+      this._settings.onLoadStart.call($(this))
+
+      $.get(this._settings.source, this._settings.params, function (response) {
+        if (this._settings.loadInContent) {
+          if (this._settings.sourceSelector != '') {
+            response = $(response).find(this._settings.sourceSelector).html()
+          }
+
+          this._parent.find(this._settings.content).html(response)
+        }
+
+        this._settings.onLoadDone.call($(this), response)
+        this._removeOverlay();
+      }.bind(this), this._settings.responseType !== '' && this._settings.responseType)
+
+      const loadedEvent = $.Event(Event.LOADED)
+      $(this._element).trigger(loadedEvent)
+    }
+
+    _addOverlay() {
+      this._parent.append(this._overlay)
+
+      const overlayAddedEvent = $.Event(Event.OVERLAY_ADDED)
+      $(this._element).trigger(overlayAddedEvent)
+    };
+
+    _removeOverlay() {
+      this._parent.find(this._overlay).remove()
+
+      const overlayRemovedEvent = $.Event(Event.OVERLAY_REMOVED)
+      $(this._element).trigger(overlayRemovedEvent)
+    };
+
+
+    // Private
+
+    _init(card) {
+      $(this).find(this._settings.trigger).on('click', () => {
+        this.load()
+      })
+
+      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')
+  })
+
+  $(document).ready(function () {
+    $(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
+  }
+
+  return CardRefresh
+})(jQuery)
+
+export default CardRefresh

build/js/CardWidget.js

@@ -0,0 +1,253 @@
+/**
+ * --------------------------------------------
+ * AdminLTE CardWidget.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const CardWidget = (($) => {
+  /**
+   * 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}`,
+    COLLAPSED: `collapsed${EVENT_KEY}`,
+    MAXIMIZED: `maximized${EVENT_KEY}`,
+    MINIMIZED: `minimized${EVENT_KEY}`,
+    REMOVED: `removed${EVENT_KEY}`
+  }
+
+  const ClassName = {
+    CARD: 'card',
+    COLLAPSED: 'collapsed-card',
+    COLLAPSING: 'collapsing-card',
+    EXPANDING: 'expanding-card',
+    WAS_COLLAPSED: 'was-collapsed',
+    MAXIMIZED: 'maximized-card',
+  }
+
+  const Selector = {
+    DATA_REMOVE: '[data-card-widget="remove"]',
+    DATA_COLLAPSE: '[data-card-widget="collapse"]',
+    DATA_MAXIMIZE: '[data-card-widget="maximize"]',
+    CARD: `.${ClassName.CARD}`,
+    CARD_HEADER: '.card-header',
+    CARD_BODY: '.card-body',
+    CARD_FOOTER: '.card-footer',
+    COLLAPSED: `.${ClassName.COLLAPSED}`,
+  }
+
+  const Default = {
+    animationSpeed: 'normal',
+    collapseTrigger: Selector.DATA_COLLAPSE,
+    removeTrigger: Selector.DATA_REMOVE,
+    maximizeTrigger: Selector.DATA_MAXIMIZE,
+    collapseIcon: 'fa-minus',
+    expandIcon: 'fa-plus',
+    maximizeIcon: 'fa-expand',
+    minimizeIcon: 'fa-compress',
+  }
+
+  class CardWidget {
+    constructor(element, settings) {
+      this._element  = element
+      this._parent = element.parents(Selector.CARD).first()
+
+      if (element.hasClass(ClassName.CARD)) {
+        this._parent = element
+      }
+
+      this._settings = $.extend({}, Default, settings)
+    }
+
+    collapse() {
+      this._parent.addClass(ClassName.COLLAPSING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+        .slideUp(this._settings.animationSpeed, () => {
+          this._parent.addClass(ClassName.COLLAPSED).removeClass(ClassName.COLLAPSING)
+        })
+
+      this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
+        .addClass(this._settings.expandIcon)
+        .removeClass(this._settings.collapseIcon)
+
+      const collapsed = $.Event(Event.COLLAPSED)
+
+      this._element.trigger(collapsed, this._parent)
+    }
+
+    expand() {
+      this._parent.addClass(ClassName.EXPANDING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+        .slideDown(this._settings.animationSpeed, () => {
+          this._parent.removeClass(ClassName.COLLAPSED).removeClass(ClassName.EXPANDING)
+        })
+
+      this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
+        .addClass(this._settings.collapseIcon)
+        .removeClass(this._settings.expandIcon)
+
+      const expanded = $.Event(Event.EXPANDED)
+
+      this._element.trigger(expanded, this._parent)
+    }
+
+    remove() {
+      this._parent.slideUp()
+
+      const removed = $.Event(Event.REMOVED)
+
+      this._element.trigger(removed, this._parent)
+    }
+
+    toggle() {
+      if (this._parent.hasClass(ClassName.COLLAPSED)) {
+        this.expand()
+        return
+      }
+
+      this.collapse()
+    }
+    
+    maximize() {
+      this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
+        .addClass(this._settings.minimizeIcon)
+        .removeClass(this._settings.maximizeIcon)
+      this._parent.css({
+        'height': this._parent.height(),
+        'width': this._parent.width(),
+        'transition': 'all .15s'
+      }).delay(150).queue(function(){
+        $(this).addClass(ClassName.MAXIMIZED)
+        $('html').addClass(ClassName.MAXIMIZED)
+        if ($(this).hasClass(ClassName.COLLAPSED)) {
+          $(this).addClass(ClassName.WAS_COLLAPSED)
+        }
+        $(this).dequeue()
+      })
+
+      const maximized = $.Event(Event.MAXIMIZED)
+
+      this._element.trigger(maximized, this._parent)
+    }
+
+    minimize() {
+      this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
+        .addClass(this._settings.maximizeIcon)
+        .removeClass(this._settings.minimizeIcon)
+      this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
+        'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
+      ).delay(10).queue(function(){
+        $(this).removeClass(ClassName.MAXIMIZED)
+        $('html').removeClass(ClassName.MAXIMIZED)
+        $(this).css({
+          'height': 'inherit',
+          'width': 'inherit'
+        })
+        if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
+          $(this).removeClass(ClassName.WAS_COLLAPSED)
+        }
+        $(this).dequeue()
+      })
+
+      const MINIMIZED = $.Event(Event.MINIMIZED)
+
+      this._element.trigger(MINIMIZED, this._parent)
+    }
+
+    toggleMaximize() {
+      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
+        this.minimize()
+        return
+      }
+
+      this.maximize()
+    }
+
+    // Private
+
+    _init(card) {
+      this._parent = card
+
+      $(this).find(this._settings.collapseTrigger).click(() => {
+        this.toggle()
+      })
+
+      $(this).find(this._settings.maximizeTrigger).click(() => {
+        this.toggleMaximize()
+      })
+
+      $(this).find(this._settings.removeTrigger).click(() => {
+        this.remove()
+      })
+    }
+
+    // Static
+
+    static _jQueryInterface(config) {
+      let data = $(this).data(DATA_KEY)
+      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
+  }
+
+  return CardWidget
+})(jQuery)
+
+export default CardWidget

build/js/ControlSidebar.js

@@ -12,28 +12,46 @@ const ControlSidebar = (($) => {
    */
 
   const NAME               = 'ControlSidebar'
-  const DATA_KEY           = 'lte.control.sidebar'
+  const DATA_KEY           = 'lte.controlsidebar'
   const EVENT_KEY          = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   const DATA_API_KEY       = '.data-api'
 
   const Event = {
-    CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+    COLLAPSED: `collapsed${EVENT_KEY}`,
+    EXPANDED: `expanded${EVENT_KEY}`,
   }
 
   const Selector = {
     CONTROL_SIDEBAR: '.control-sidebar',
-    DATA_TOGGLE    : '[data-widget="control-sidebar"]',
-    MAIN_HEADER    : '.main-header'
+    CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
+    DATA_TOGGLE: '[data-widget="control-sidebar"]',
+    CONTENT: '.content-wrapper',
+    HEADER: '.main-header',
+    FOOTER: '.main-footer',
   }
 
   const ClassName = {
-    CONTROL_SIDEBAR_OPEN : 'control-sidebar-open',
-    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
+    CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',
+    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open',
+    LAYOUT_FIXED: 'layout-fixed',
+    NAVBAR_FIXED: 'layout-navbar-fixed',
+    NAVBAR_SM_FIXED: 'layout-sm-navbar-fixed',
+    NAVBAR_MD_FIXED: 'layout-md-navbar-fixed',
+    NAVBAR_LG_FIXED: 'layout-lg-navbar-fixed',
+    NAVBAR_XL_FIXED: 'layout-xl-navbar-fixed',
+    FOOTER_FIXED: 'layout-footer-fixed',
+    FOOTER_SM_FIXED: 'layout-sm-footer-fixed',
+    FOOTER_MD_FIXED: 'layout-md-footer-fixed',
+    FOOTER_LG_FIXED: 'layout-lg-footer-fixed',
+    FOOTER_XL_FIXED: 'layout-xl-footer-fixed',
   }
 
   const Default = {
-    slide: true
+    controlsidebarSlide: true,
+    scrollbarTheme : 'os-theme-light',
+    scrollbarAutoHide: 'l',
   }
 
   /**
@@ -44,63 +62,194 @@ const ControlSidebar = (($) => {
   class ControlSidebar {
     constructor(element, config) {
       this._element = element
-      this._config  = this._getConfig(config)
+      this._config  = config
+
+      this._init()
     }
 
     // Public
 
-    show() {
+    collapse() {
       // Show the control sidebar
-      if (this._config.slide) {
-        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      if (this._config.controlsidebarSlide) {
+        $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
+          $(Selector.CONTROL_SIDEBAR).hide()
+          $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+          $(this).dequeue()
+        })
       } else {
         $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
+
+      const collapsedEvent = $.Event(Event.COLLAPSED)
+      $(this._element).trigger(collapsedEvent)
     }
 
-    collapse() {
+    show() {
       // Collapse the control sidebar
-      if (this._config.slide) {
-        $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      if (this._config.controlsidebarSlide) {
+        $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+        $(Selector.CONTROL_SIDEBAR).show().delay(10).queue(function(){
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
+            $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
+            $(this).dequeue()
+          })
+          $(this).dequeue()
+        })
       } else {
         $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
       }
+
+      const expandedEvent = $.Event(Event.EXPANDED)
+      $(this._element).trigger(expandedEvent)
     }
 
     toggle() {
-      this._setMargin()
-
-      const shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
+      const shouldClose = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
         .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)
-      if (shouldOpen) {
-        // Open the control sidebar
-        this.show()
-      } else {
+      if (shouldClose) {
         // Close the control sidebar
         this.collapse()
+      } else {
+        // Open the control sidebar
+        this.show()
       }
     }
 
     // Private
 
-    _getConfig(config) {
-      return $.extend({}, Default, config)
-    }
+    _init() {
+      this._fixHeight()
+      this._fixScrollHeight()
 
-    _setMargin() {
-      $(Selector.CONTROL_SIDEBAR).css({
-        top: $(Selector.MAIN_HEADER).outerHeight()
+      $(window).resize(() => {
+        this._fixHeight()
+        this._fixScrollHeight()
+      })
+
+      $(window).scroll(() => {
+        if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
+            this._fixScrollHeight()
+        }
       })
     }
 
+    _fixScrollHeight() {
+      const heights = {
+        scroll: $(document).height(),
+        window: $(window).height(),
+        header: $(Selector.HEADER).outerHeight(),
+        footer: $(Selector.FOOTER).outerHeight(),
+      }
+      const positions = {
+        bottom: Math.abs((heights.window + $(window).scrollTop()) - heights.scroll),
+        top: $(window).scrollTop(),
+      }
+
+      let navbarFixed = false;
+      let footerFixed = false;
+
+      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
+        if (
+          $('body').hasClass(ClassName.NAVBAR_FIXED)
+          || $('body').hasClass(ClassName.NAVBAR_SM_FIXED)
+          || $('body').hasClass(ClassName.NAVBAR_MD_FIXED)
+          || $('body').hasClass(ClassName.NAVBAR_LG_FIXED)
+          || $('body').hasClass(ClassName.NAVBAR_XL_FIXED)
+        ) {
+          if ($(Selector.HEADER).css("position") === "fixed") {
+            navbarFixed = true;
+          }
+        }
+        if (
+          $('body').hasClass(ClassName.FOOTER_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_SM_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_MD_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_LG_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_XL_FIXED)
+        ) {
+          if ($(Selector.FOOTER).css("position") === "fixed") {
+            footerFixed = true;
+          }
+        }
+
+        if (positions.top === 0 && positions.bottom === 0) {
+          $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer);
+          $(Selector.CONTROL_SIDEBAR).css('top', heights.header);
+          $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header + heights.footer))
+        } else if (positions.bottom <= heights.footer) {
+          if (footerFixed === false) {  
+            $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer - positions.bottom);
+            $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.footer - positions.bottom))
+          } else {
+            $(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer);
+          }
+        } else if (positions.top <= heights.header) {
+          if (navbarFixed === false) {
+            $(Selector.CONTROL_SIDEBAR).css('top', heights.header - positions.top);
+            $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header - positions.top))
+          } else {
+            $(Selector.CONTROL_SIDEBAR).css('top', heights.header);
+          }
+        } else {
+          if (navbarFixed === false) {
+            $(Selector.CONTROL_SIDEBAR).css('top', 0);
+            $(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window)
+          } else {
+            $(Selector.CONTROL_SIDEBAR).css('top', heights.header);
+          }
+        }
+      }
+    }
+
+    _fixHeight() {
+      const heights = {
+        window: $(window).height(),
+        header: $(Selector.HEADER).outerHeight(),
+        footer: $(Selector.FOOTER).outerHeight(),
+      }
+
+      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
+        let sidebarHeight = heights.window - heights.header;
+
+        if (
+          $('body').hasClass(ClassName.FOOTER_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_SM_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_MD_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_LG_FIXED)
+          || $('body').hasClass(ClassName.FOOTER_XL_FIXED)
+        ) {
+          if ($(Selector.FOOTER).css("position") === "fixed") {
+            sidebarHeight = heights.window - heights.header - heights.footer;
+          }
+        }
+
+        $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', sidebarHeight)
+        
+        if (typeof $.fn.overlayScrollbars !== 'undefined') {
+          $(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).overlayScrollbars({
+            className       : this._config.scrollbarTheme,
+            sizeAutoCapable : true,
+            scrollbars : {
+              autoHide: this._config.scrollbarAutoHide, 
+              clickScrolling : true
+            }
+          })
+        }
+      }
+    }
+
+
     // Static
 
     static _jQueryInterface(operation) {
       return this.each(function () {
         let data = $(this).data(DATA_KEY)
+        const _options = $.extend({}, Default, $(this).data())
 
         if (!data) {
-          data = new ControlSidebar(this, $(this).data())
+          data = new ControlSidebar(this, _options)
           $(this).data(DATA_KEY, data)
         }
 
@@ -140,3 +289,4 @@ const ControlSidebar = (($) => {
 })(jQuery)
 
 export default ControlSidebar
+  

build/js/DirectChat.js

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

build/js/Dropdown.js

@@ -0,0 +1,143 @@
+/**
+ * --------------------------------------------
+ * AdminLTE Dropdown.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const Dropdown = (($) => {
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'Dropdown'
+  const DATA_KEY           = 'lte.dropdown'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Selector = {
+    NAVBAR: '.navbar',
+    DROPDOWN_MENU: '.dropdown-menu',
+    DROPDOWN_MENU_ACTIVE: '.dropdown-menu.show',
+    DROPDOWN_TOGGLE: '[data-toggle="dropdown"]',
+  }
+
+  const ClassName = {
+    DROPDOWN_HOVER: 'dropdown-hover',
+    DROPDOWN_RIGHT: 'dropdown-menu-right'
+  }
+
+  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('.dropdown-menu').first().find('.show').removeClass("show").hide()
+      }
+
+      this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
+        $('.dropdown-submenu .show').removeClass("show").hide()
+      })
+    }
+
+    fixPosition() {
+      let elm = $(Selector.DROPDOWN_MENU_ACTIVE)
+
+      if (elm.length !== 0) {
+        if (elm.hasClass(ClassName.DROPDOWN_RIGHT)) {
+          elm.css('left', 'inherit')
+          elm.css('right', 0)
+        } else {
+          elm.css('left', 0)
+          elm.css('right', 'inherit')
+        }
+
+        let offset = elm.offset()
+        let width = elm.width()
+        let windowWidth = $(window).width()
+        let visiblePart = windowWidth - offset.left
+
+        if (offset.left < 0) {
+          elm.css('left', 'inherit')
+          elm.css('right', (offset.left - 5))
+        } else {
+          if (visiblePart < width) {
+            elm.css('left', 'inherit')
+            elm.css('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", function(event) {
+    event.preventDefault()
+
+    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
+  }
+
+  return Dropdown
+})(jQuery)
+
+export default Dropdown

build/js/Layout.js

@@ -21,20 +21,42 @@ const Layout = (($) => {
   }
 
   const Selector = {
-    SIDEBAR        : '.main-sidebar',
     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',
+    CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
+    CONTROL_SIDEBAR_BTN: '[data-widget="control-sidebar"]',
     LAYOUT_FIXED   : '.layout-fixed',
-    FOOTER         : '.main-footer'
+    FOOTER         : '.main-footer',
+    PUSHMENU_BTN   : '[data-widget="pushmenu"]',
+    LOGIN_BOX      : '.login-box',
+    REGISTER_BOX   : '.register-box'
   }
 
   const ClassName = {
-    HOLD        : 'hold-transition',
-    SIDEBAR     : 'main-sidebar',
-    LAYOUT_FIXED: 'layout-fixed'
+    HOLD           : 'hold-transition',
+    SIDEBAR        : 'main-sidebar',
+    CONTENT_FIXED  : 'content-fixed',
+    SIDEBAR_FOCUSED: 'sidebar-focused',
+    LAYOUT_FIXED   : 'layout-fixed',
+    NAVBAR_FIXED   : 'layout-navbar-fixed',
+    FOOTER_FIXED   : 'layout-footer-fixed',
+    LOGIN_PAGE     : 'login-page',
+    REGISTER_PAGE  : 'register-page',
+    CONTROL_SIDEBAR_SLIDE_OPEN: 'control-sidebar-slide-open',
+    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
+  }
+
+  const Default = {
+    scrollbarTheme : 'os-theme-light',
+    scrollbarAutoHide: 'l',
+    panelAutoHeight: true,
+    loginRegisterAutoHeight: true,
   }
 
   /**
@@ -43,7 +65,8 @@ const Layout = (($) => {
    */
 
   class Layout {
-    constructor(element) {
+    constructor(element, config) {
+      this._config  = config
       this._element = element
 
       this._init()
@@ -51,37 +74,103 @@ const Layout = (($) => {
 
     // Public
 
-    fixLayoutHeight() {
-      const heights = {
-        window : $(window).height(),
-        header : $(Selector.HEADER).outerHeight(),
-        footer : $(Selector.FOOTER).outerHeight(),
-        sidebar: $(Selector.SIDEBAR).height()
-      }
-      const max     = this._max(heights)
+    fixLayoutHeight(extra = null) {
+      let control_sidebar = 0
 
-      $(Selector.CONTENT).css('min-height', max - (heights.header))
-      $(Selector.SIDEBAR).css('min-height', max - heights.header)
+      if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra == 'control_sidebar') {
+        control_sidebar = $(Selector.CONTROL_SIDEBAR_CONTENT).height()
+      }
+
+      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,
+        control_sidebar: control_sidebar,
+      }
+
+      const max = this._max(heights)
+      let offset = this._config.panelAutoHeight
+
+      if (offset === true) {
+        offset = 0;
+      }
+
+      if (offset !== false) {
+        if (max == heights.control_sidebar) {
+          $(Selector.CONTENT).css('min-height', (max + offset))
+        } else if (max == heights.window) {
+          $(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer)
+        } else {
+          $(Selector.CONTENT).css('min-height', (max + offset) - heights.header)
+        }
+      }
+
+      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
+        if (offset !== false) {
+          $(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer)
+        }
+
+        if (typeof $.fn.overlayScrollbars !== 'undefined') {
+          $(Selector.SIDEBAR).overlayScrollbars({
+            className       : this._config.scrollbarTheme,
+            sizeAutoCapable : true,
+            scrollbars : {
+              autoHide: this._config.scrollbarAutoHide, 
+              clickScrolling : true
+            }
+          })
+        }
+      }
+    }
+
+    fixLoginRegisterHeight() {
+      if ($(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).length === 0) {
+        $('body, html').css('height', 'auto')
+      } else if ($(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).length !== 0) {
+        let box_height = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height()
+
+        if ($('body').css('min-height') !== box_height) {
+          $('body').css('min-height', box_height)
+        }
+      }
     }
 
     // Private
 
     _init() {
-      // Enable transitions
-      $('body').removeClass(ClassName.HOLD)
-
       // Activate layout height watcher
       this.fixLayoutHeight()
+
+      if (this._config.loginRegisterAutoHeight === true) {      
+        this.fixLoginRegisterHeight()
+      } else if (Number.isInteger(this._config.loginRegisterAutoHeight)) {      
+        setInterval(this.fixLoginRegisterHeight, this._config.loginRegisterAutoHeight);
+      }
+
       $(Selector.SIDEBAR)
-        .on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
+        .on('collapsed.lte.treeview expanded.lte.treeview', () => {
           this.fixLayoutHeight()
         })
 
+      $(Selector.PUSHMENU_BTN)
+        .on('collapsed.lte.pushmenu shown.lte.pushmenu', () => {
+          this.fixLayoutHeight()
+        })
+
+      $(Selector.CONTROL_SIDEBAR_BTN)
+        .on('collapsed.lte.controlsidebar', () => {
+          this.fixLayoutHeight()
+        })
+        .on('expanded.lte.controlsidebar', () => {
+          this.fixLayoutHeight('control_sidebar')
+        })
+
       $(window).resize(() => {
         this.fixLayoutHeight()
       })
 
-      $('body, html').css('height', 'auto')
+      $('body.hold-transition').removeClass('hold-transition')
     }
 
     _max(numbers) {
@@ -99,18 +188,20 @@ const Layout = (($) => {
 
     // Static
 
-    static _jQueryInterface(operation) {
+    static _jQueryInterface(config = '') {
       return this.each(function () {
-        let data = $(this)
-          .data(DATA_KEY)
+        let data = $(this).data(DATA_KEY)
+        const _options = $.extend({}, Default, $(this).data())
 
         if (!data) {
-          data = new Layout(this)
+          data = new Layout($(this), _options)
           $(this).data(DATA_KEY, data)
         }
 
-        if (operation) {
-          data[operation]()
+        if (config === 'init' || config === '') {
+          data['_init']()
+        } else if (config === 'fixLayoutHeight' || config === 'fixLoginRegisterHeight') {
+          data[config]()
         }
       })
     }
@@ -120,10 +211,19 @@ const Layout = (($) => {
    * Data API
    * ====================================================
    */
+
   $(window).on('load', () => {
     Layout._jQueryInterface.call($('body'))
   })
 
+  $(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
    * ====================================================
@@ -131,7 +231,7 @@ const Layout = (($) => {
 
   $.fn[NAME] = Layout._jQueryInterface
   $.fn[NAME].Constructor = Layout
-  $.fn[NAME].noConflict  = function () {
+  $.fn[NAME].noConflict = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return Layout._jQueryInterface
   }

build/js/PushMenu.js

@@ -18,27 +18,28 @@ const PushMenu = (($) => {
 
   const Event = {
     COLLAPSED: `collapsed${EVENT_KEY}`,
-    SHOWN    : `shown${EVENT_KEY}`
+    SHOWN: `shown${EVENT_KEY}`
   }
 
   const Default = {
-    screenCollapseSize: 768
+    autoCollapseSize: 992,
+    enableRemember: false,
+    noTransitionAfterReload: true
   }
 
   const Selector = {
-    TOGGLE_BUTTON    : '[data-widget="pushmenu"]',
-    SIDEBAR_MINI     : '.sidebar-mini',
+    TOGGLE_BUTTON: '[data-widget="pushmenu"]',
+    SIDEBAR_MINI: '.sidebar-mini',
     SIDEBAR_COLLAPSED: '.sidebar-collapse',
-    BODY             : 'body',
-    OVERLAY          : '#sidebar-overlay',
-    WRAPPER          : '.wrapper'
+    BODY: 'body',
+    OVERLAY: '#sidebar-overlay',
+    WRAPPER: '.wrapper'
   }
 
   const ClassName = {
-    SIDEBAR_OPEN: 'sidebar-open',
-    COLLAPSED   : 'sidebar-collapse',
-    OPEN        : 'sidebar-open',
-    SIDEBAR_MINI: 'sidebar-mini'
+    COLLAPSED: 'sidebar-collapse',
+    OPEN: 'sidebar-open',
+    CLOSED: 'sidebar-closed'
   }
 
   /**
@@ -54,40 +55,106 @@ const PushMenu = (($) => {
       if (!$(Selector.OVERLAY).length) {
         this._addOverlay()
       }
+
+      this._init()
     }
 
     // Public
 
-    show() {
-      $(Selector.BODY).addClass(ClassName.OPEN).removeClass(ClassName.COLLAPSED)
+    expand() {
+      if (this._options.autoCollapseSize) {
+        if ($(window).width() <= this._options.autoCollapseSize) {
+          $(Selector.BODY).addClass(ClassName.OPEN)
+        }
+      }
+
+      $(Selector.BODY).removeClass(ClassName.COLLAPSED).removeClass(ClassName.CLOSED)
+
+      if(this._options.enableRemember) {
+        localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN)
+      }
 
       const shownEvent = $.Event(Event.SHOWN)
       $(this._element).trigger(shownEvent)
     }
 
     collapse() {
-      $(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.COLLAPSED)
+      if (this._options.autoCollapseSize) {
+        if ($(window).width() <= this._options.autoCollapseSize) {
+          $(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.CLOSED)
+        }
+      }
+
+      $(Selector.BODY).addClass(ClassName.COLLAPSED)
+
+      if(this._options.enableRemember) {
+        localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED)
+      }
 
       const collapsedEvent = $.Event(Event.COLLAPSED)
       $(this._element).trigger(collapsedEvent)
     }
 
     toggle() {
-      let isShown
-      if ($(window).width() >= this._options.screenCollapseSize) {
-        isShown = !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
-      } else {
-        isShown = $(Selector.BODY).hasClass(ClassName.OPEN)
-      }
-
-      if (isShown) {
+      if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED)) {
         this.collapse()
       } else {
-        this.show()
+        this.expand()
+      }
+    }
+
+    autoCollapse(resize = false) {
+      if (this._options.autoCollapseSize) {
+        if ($(window).width() <= this._options.autoCollapseSize) {
+          if (!$(Selector.BODY).hasClass(ClassName.OPEN)) {
+            this.collapse()
+          }
+        } else if (resize == true) {
+          if ($(Selector.BODY).hasClass(ClassName.OPEN)) {
+            $(Selector.BODY).removeClass(ClassName.OPEN)
+          } else if($(Selector.BODY).hasClass(ClassName.CLOSED)) {
+            this.expand()
+          }
+        }
+      }
+    }
+
+    remember() {
+      if(this._options.enableRemember) {
+        let toggleState = localStorage.getItem(`remember${EVENT_KEY}`)
+        if (toggleState == ClassName.COLLAPSED){
+          if (this._options.noTransitionAfterReload) {
+              $("body").addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function() {
+                $(this).removeClass('hold-transition')
+                $(this).dequeue()
+              })
+          } else {
+            $("body").addClass(ClassName.COLLAPSED)
+          }
+        } else {
+          if (this._options.noTransitionAfterReload) {
+            $("body").addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function() {
+              $(this).removeClass('hold-transition')
+              $(this).dequeue()
+            })
+          } else {
+            $("body").removeClass(ClassName.COLLAPSED)
+          }
+        }
       }
     }
 
     // Private
+
+    _init() {
+      this.remember()
+      this.autoCollapse()
+
+      $(window).resize(() => {
+        this.autoCollapse(true)
+      })
+    }
+
     _addOverlay() {
       const overlay = $('<div />', {
         id: 'sidebar-overlay'
@@ -105,13 +172,14 @@ const PushMenu = (($) => {
     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)
+          data = new PushMenu(this, _options)
           $(this).data(DATA_KEY, data)
         }
 
-        if (operation) {
+        if (typeof operation === 'string' && operation.match(/collapse|expand|toggle/)) {
           data[operation]()
         }
       })
@@ -135,6 +203,10 @@ const PushMenu = (($) => {
     PushMenu._jQueryInterface.call($(button), 'toggle')
   })
 
+  $(window).on('load', () => {
+    PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON))
+  })
+
   /**
    * jQuery API
    * ====================================================

build/js/Toasts.js

@@ -0,0 +1,229 @@
+/**
+ * --------------------------------------------
+ * AdminLTE Toasts.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+const Toasts = (($) => {
+  /**
+   * 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}`,
+    CREATED: `created${EVENT_KEY}`,
+    REMOVED: `removed${EVENT_KEY}`,
+  }
+
+  const Selector = {
+    BODY: 'toast-body',
+    CONTAINER_TOP_RIGHT: '#toastsContainerTopRight',
+    CONTAINER_TOP_LEFT: '#toastsContainerTopLeft',
+    CONTAINER_BOTTOM_RIGHT: '#toastsContainerBottomRight',
+    CONTAINER_BOTTOM_LEFT: '#toastsContainerBottomLeft',
+  }
+
+  const ClassName = {
+    TOP_RIGHT: 'toasts-top-right',
+    TOP_LEFT: 'toasts-top-left',
+    BOTTOM_RIGHT: 'toasts-bottom-right',
+    BOTTOM_LEFT: 'toasts-bottom-left',
+    FADE: 'fade',
+  }
+
+  const Position = {
+    TOP_RIGHT: 'topRight',
+    TOP_LEFT: 'topLeft',
+    BOTTOM_RIGHT: 'bottomRight',
+    BOTTOM_LEFT: 'bottomLeft',
+  }
+
+  const Id = {
+    CONTAINER_TOP_RIGHT: 'toastsContainerTopRight',
+    CONTAINER_TOP_LEFT: 'toastsContainerTopLeft',
+    CONTAINER_BOTTOM_RIGHT: 'toastsContainerBottomRight',
+    CONTAINER_BOTTOM_LEFT: 'toastsContainerBottomLeft',
+  }
+
+  const Default = {
+    position: Position.TOP_RIGHT,
+    fixed: true,
+    autohide: false,
+    autoremove: true,
+    delay: 1000,
+    fade: true,
+    icon: null,
+    image: null,
+    imageAlt: null,
+    imageHeight: '25px',
+    title: null,
+    subtitle: null,
+    close: true,
+    body: null,
+    class: null,
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+  class Toasts {
+    constructor(element, config) {
+      this._config  = config
+
+      this._prepareContainer();
+
+      const initEvent = $.Event(Event.INIT)
+      $('body').trigger(initEvent)
+    }
+
+    // Public
+
+    create() {
+      var toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
+
+      toast.data('autohide', this._config.autohide)
+      toast.data('animation', this._config.fade)
+      
+      if (this._config.class) {
+        toast.addClass(this._config.class)
+      }
+
+      if (this._config.delay && this._config.delay != 500) {
+        toast.data('delay', this._config.delay)
+      }
+
+      var toast_header = $('<div class="toast-header">')
+
+      if (this._config.image != null) {
+        var toast_image = $('<img />').addClass('rounded mr-2').attr('src', this._config.image).attr('alt', this._config.imageAlt)
+        
+        if (this._config.imageHeight != null) {
+          toast_image.height(this._config.imageHeight).width('auto')
+        }
+
+        toast_header.append(toast_image)
+      }
+
+      if (this._config.icon != null) {
+        toast_header.append($('<i />').addClass('mr-2').addClass(this._config.icon))
+      }
+
+      if (this._config.title != null) {
+        toast_header.append($('<strong />').addClass('mr-auto').html(this._config.title))
+      }
+
+      if (this._config.subtitle != null) {
+        toast_header.append($('<small />').html(this._config.subtitle))
+      }
+
+      if (this._config.close == true) {
+        var toast_close = $('<button data-dismiss="toast" />').attr('type', 'button').addClass('ml-2 mb-1 close').attr('aria-label', 'Close').append('<span aria-hidden="true">&times;</span>')
+        
+        if (this._config.title == null) {
+          toast_close.toggleClass('ml-2 ml-auto')
+        }
+        
+        toast_header.append(toast_close)
+      }
+
+      toast.append(toast_header)
+
+      if (this._config.body != null) {
+        toast.append($('<div class="toast-body" />').html(this._config.body))
+      }
+
+      $(this._getContainerId()).prepend(toast)
+
+      const createdEvent = $.Event(Event.CREATED)
+      $('body').trigger(createdEvent)
+
+      toast.toast('show')
+
+
+      if (this._config.autoremove) {
+        toast.on('hidden.bs.toast', function () {
+          $(this).delay(200).remove();
+
+          const removedEvent = $.Event(Event.REMOVED)
+          $('body').trigger(removedEvent)
+        })
+      }
+
+
+    }
+
+    // Static
+
+    _getContainerId() {
+      if (this._config.position == Position.TOP_RIGHT) {
+        return Selector.CONTAINER_TOP_RIGHT;
+      } else if (this._config.position == Position.TOP_LEFT) {
+        return Selector.CONTAINER_TOP_LEFT;
+      } else if (this._config.position == Position.BOTTOM_RIGHT) {
+        return Selector.CONTAINER_BOTTOM_RIGHT;
+      } else if (this._config.position == Position.BOTTOM_LEFT) {
+        return Selector.CONTAINER_BOTTOM_LEFT;
+      }
+    }
+
+    _prepareContainer() {
+      if ($(this._getContainerId()).length === 0) {
+        var container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
+        if (this._config.position == Position.TOP_RIGHT) {
+          container.addClass(ClassName.TOP_RIGHT)
+        } else if (this._config.position == Position.TOP_LEFT) {
+          container.addClass(ClassName.TOP_LEFT)
+        } else if (this._config.position == Position.BOTTOM_RIGHT) {
+          container.addClass(ClassName.BOTTOM_RIGHT)
+        } else if (this._config.position == Position.BOTTOM_LEFT) {
+          container.addClass(ClassName.BOTTOM_LEFT)
+        }
+
+        $('body').append(container)
+      }
+
+      if (this._config.fixed) {
+        $(this._getContainerId()).addClass('fixed')
+      } else {
+        $(this._getContainerId()).removeClass('fixed')
+      }
+    }
+
+    // Static
+
+    static _jQueryInterface(option, config) {
+      return this.each(function () {
+        const _options = $.extend({}, Default, config)
+        var 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
+  }
+
+  return Toasts
+})(jQuery)
+
+export default Toasts

build/js/TodoList.js

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

build/js/Treeview.js

@@ -32,16 +32,19 @@ const Treeview = (($) => {
   }
 
   const ClassName = {
-    LI           : 'nav-item',
-    LINK         : 'nav-link',
-    TREEVIEW_MENU: 'nav-treeview',
-    OPEN         : 'menu-open'
+    LI               : 'nav-item',
+    LINK             : 'nav-link',
+    TREEVIEW_MENU    : 'nav-treeview',
+    OPEN             : 'menu-open',
+    SIDEBAR_COLLAPSED: 'sidebar-collapse'
   }
 
   const Default = {
-    trigger       : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
-    animationSpeed: 300,
-    accordion     : true
+    trigger              : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
+    animationSpeed       : 300,
+    accordion            : true,
+    expandSidebar        : false,
+    sidebarButtonSelector: '[data-widget="pushmenu"]'
   }
 
   /**
@@ -69,16 +72,20 @@ const Treeview = (($) => {
         this.collapse(openTreeview, openMenuLi)
       }
 
-      treeviewMenu.slideDown(this._config.animationSpeed, () => {
+      treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
         parentLi.addClass(ClassName.OPEN)
         $(this._element).trigger(expandedEvent)
       })
+
+      if (this._config.expandSidebar) {
+        this._expandSidebar()
+      }
     }
 
     collapse(treeviewMenu, parentLi) {
       const collapsedEvent = $.Event(Event.COLLAPSED)
 
-      treeviewMenu.slideUp(this._config.animationSpeed, () => {
+      treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
         parentLi.removeClass(ClassName.OPEN)
         $(this._element).trigger(collapsedEvent)
         treeviewMenu.find(`${Selector.OPEN} > ${Selector.TREEVIEW_MENU}`).slideUp()
@@ -87,13 +94,23 @@ const Treeview = (($) => {
     }
 
     toggle(event) {
+
       const $relativeTarget = $(event.currentTarget)
-      const treeviewMenu    = $relativeTarget.next()
+      const $parent = $relativeTarget.parent()
+
+      let treeviewMenu = $parent.find('> ' + Selector.TREEVIEW_MENU)
 
       if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
-        return
-      }
 
+        if (!$parent.is(Selector.LI)) {
+          treeviewMenu = $parent.parent().find('> ' + Selector.TREEVIEW_MENU)
+        }
+
+        if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
+          return
+        }
+      }
+      
       event.preventDefault()
 
       const parentLi = $relativeTarget.parents(Selector.LI).first()
@@ -114,15 +131,21 @@ const Treeview = (($) => {
       })
     }
 
+    _expandSidebar() {
+      if ($('body').hasClass(ClassName.SIDEBAR_COLLAPSED)) {
+        $(this._config.sidebarButtonSelector).PushMenu('expand')
+      }
+    }
+
     // Static
 
     static _jQueryInterface(config) {
       return this.each(function () {
-        let data      = $(this).data(DATA_KEY)
-        const _config = $.extend({}, Default, $(this).data())
+        let data = $(this).data(DATA_KEY)
+        const _options = $.extend({}, Default, $(this).data())
 
         if (!data) {
-          data = new Treeview($(this), _config)
+          data = new Treeview($(this), _options)
           $(this).data(DATA_KEY, data)
         }
 

build/js/Widget.js

@@ -1,161 +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}`,
-    REMOVED  : `removed${EVENT_KEY}`
-  }
-
-  const Selector = {
-    DATA_REMOVE  : '[data-widget="remove"]',
-    DATA_COLLAPSE: '[data-widget="collapse"]',
-    CARD         : '.card',
-    CARD_HEADER  : '.card-header',
-    CARD_BODY    : '.card-body',
-    CARD_FOOTER  : '.card-footer',
-    COLLAPSED    : '.collapsed-card'
-  }
-
-  const ClassName = {
-    COLLAPSED: 'collapsed-card'
-  }
-
-  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)
-        })
-
-      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)
-        })
-
-      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()
-    }
-
-    // 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(/remove|toggle/)) {
-          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')
-  })
-
-  /**
-   * 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/DocsPlugins.js

@@ -0,0 +1,46 @@
+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,43 @@
+const Plugins = require('./DocsPlugins')
+const fse     = require('fs-extra')
+
+class Publish {
+  constructor() {
+    this.options = {
+      verbose: false
+    }
+
+    this.getArguments()
+  }
+
+  getArguments() {
+    if (process.argv.length > 2) {
+      let 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)
+
+        if (this.options.verbose) {
+          console.log(`Copied ${module.from} to ${module.to}`)
+        }
+      } catch (err) {
+        console.error(`Error: ${err}`)
+      }
+    })
+  }
+}
+
+(new Publish()).run()

build/npm/Plugins.js

@@ -11,41 +11,389 @@ const Plugins = [
   },
   // Bootstrap
   {
-    from: 'node_modules/bootstrap/dist',
-    to  : 'plugins/bootstrap'
+    from: 'node_modules/bootstrap/dist/js',
+    to  : 'plugins/bootstrap/js'
   },
   // Font Awesome
   {
-    from: 'node_modules/font-awesome/css',
-    to  : 'plugins/font-awesome/css'
+    from: 'node_modules/@fortawesome/fontawesome-free/css',
+    to  : 'plugins/fontawesome-free/css'
   },
   {
-    from: 'node_modules/font-awesome/fonts',
-    to  : 'plugins/font-awesome/fonts'
+    from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
+    to  : 'plugins/fontawesome-free/webfonts'
   },
-  // Chart.js 2
+  // overlayScrollbars
+  {
+    from: 'node_modules/overlayscrollbars/js',
+    to  : 'plugins/overlayScrollbars/js'
+  },
+  {
+    from: 'node_modules/overlayscrollbars/css',
+    to  : 'plugins/overlayScrollbars/css'
+  },
+  // Chart.js
   {
     from: 'node_modules/chart.js/dist/',
     to  : 'plugins/chart.js'
   },
-  // CKEditor
+  // jQuery UI
   {
-    from: 'node_modules/@ckeditor/ckeditor5-build-classic/build/',
-    to  : 'plugins/ckeditor'
+    from: 'node_modules/jquery-ui-dist/',
+    to  : 'plugins/jquery-ui'
+  },
+  // Flot
+  {
+    from: 'node_modules/flot/dist/es5/',
+    to  : 'plugins/flot'
+  },
+  // Summernote
+  {
+    from: 'node_modules/summernote/dist/',
+    to  : 'plugins/summernote'
+  },
+  // Bootstrap Slider
+  {
+    from: 'node_modules/bootstrap-slider/dist/',
+    to  : 'plugins/bootstrap-slider'
+  },
+  {
+    from: 'node_modules/bootstrap-slider/dist/css',
+    to  : 'plugins/bootstrap-slider/css'
+  },
+  // Bootstrap Colorpicker
+  {
+    from: 'node_modules/bootstrap-colorpicker/dist/js',
+    to  : 'plugins/bootstrap-colorpicker/js'
+  },
+  {
+    from: 'node_modules/bootstrap-colorpicker/dist/css',
+    to  : 'plugins/bootstrap-colorpicker/css'
+  },
+  // Tempusdominus Bootstrap 4
+  {
+    from: 'node_modules/tempusdominus-bootstrap-4/build/js',
+    to  : 'plugins/tempusdominus-bootstrap-4/js'
+  },
+  {
+    from: 'node_modules/tempusdominus-bootstrap-4/build/css',
+    to  : 'plugins/tempusdominus-bootstrap-4/css'
+  },
+  // Moment
+  {
+    from: 'node_modules/moment/min',
+    to  : 'plugins/moment'
+  },
+  {
+    from: 'node_modules/moment/locale',
+    to  : 'plugins/moment/locale'
+  },
+  // FastClick
+  {
+    from: 'node_modules/fastclick/lib',
+    to  : 'plugins/fastclick'
+  },
+  // Date Range Picker
+  {
+    from: 'node_modules/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-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'
+  },
+  // icheck bootstrap
+  {
+    from: 'node_modules/icheck-bootstrap/',
+    to  : 'plugins/icheck-bootstrap'
+  },
+  // inputmask
+  {
+    from: 'node_modules/inputmask/dist/',
+    to  : 'plugins/inputmask'
+  },
+  // ion-rangeslider
+  {
+    from: 'node_modules/ion-rangeslider/',
+    to  : 'plugins/ion-rangeslider'
+  },
+  // JQVMap (jqvmap-novulnerability)
+  {
+    from: 'node_modules/jqvmap-novulnerability/dist/',
+    to  : 'plugins/jqvmap'
+  },
+  // jQuery Mapael
+  {
+    from: 'node_modules/jquery-mapael/js/',
+    to  : 'plugins/jquery-mapael'
+  },
+  // Raphael
+  {
+    from: 'node_modules/raphael/',
+    to  : 'plugins/raphael'
+  },
+  // jQuery Mousewheel
+  {
+    from: 'node_modules/jquery-mousewheel/',
+    to  : 'plugins/jquery-mousewheel'
+  },
+  // jQuery Knob
+  {
+    from: 'node_modules/jquery-knob-chif/dist/',
+    to  : 'plugins/jquery-knob'
+  },
+  // pace-progress
+  {
+    from: 'node_modules/@lgaitan/pace-progress/dist/',
+    to  : 'plugins/pace-progress'
+  },
+  // Select2
+  {
+    from: 'node_modules/select2/dist/',
+    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'
+  },
+  // SweetAlert2
+  {
+    from: 'node_modules/sweetalert2/dist/',
+    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'
+  },
+  // jsGrid
+  {
+    from: 'node_modules/jsgrid/dist',
+    to: 'plugins/jsgrid'
+  },
+  {
+    from: 'node_modules/jsgrid/demos/',
+    to: 'plugins/jsgrid/demos'
+  },
+  // flag-icon-css
+  {
+    from: 'node_modules/flag-icon-css/css',
+    to: 'plugins/flag-icon-css/css'
+  },
+  {
+    from: 'node_modules/flag-icon-css/flags',
+    to: 'plugins/flag-icon-css/flags'
+  },
+  // bootstrap4-duallistbox
+  {
+    from: 'node_modules/bootstrap4-duallistbox/dist',
+    to: 'plugins/bootstrap4-duallistbox/'
+  },
+  // filterizr
+  {
+    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'
+  },
 ]
 
 module.exports = Plugins

build/npm/Publish.js

@@ -1,5 +1,5 @@
 const Plugins = require('./Plugins')
-const ncp     = require('ncp').ncp
+const fse     = require('fs-extra')
 
 class Publish {
   constructor() {
@@ -27,13 +27,19 @@ class Publish {
   run() {
     // Publish files
     Plugins.forEach((module) => {
-      ncp(module.from, module.to, error => {
-        if (error) {
-          console.error(`Error: ${error}`)
-        } else if (this.options.verbose) {
+      try {
+        if (fse.existsSync(module.from)) {
+          fse.copySync(module.from, module.to)
+        } else {
+          fse.copySync(module.from.replace('node_modules/', '../'), module.to)
+        }
+
+        if (this.options.verbose) {
           console.log(`Copied ${module.from} to ${module.to}`)
         }
-      })
+      } catch (err) {
+        console.error(`Error: ${err}`)
+      }
     })
   }
 }

build/scss/AdminLTE-components.scss

@@ -0,0 +1,20 @@
+/*!
+ *   AdminLTE v3.0.4
+ *     Only Components
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+// @import '~bootstrap/scss/bootstrap';
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import 'variables';
+@import 'mixins';
+
+@import 'parts/components';

build/scss/AdminLTE-core.scss

@@ -0,0 +1,20 @@
+/*!
+ *   AdminLTE v3.0.4
+ *     Only Core
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '~bootstrap/scss/bootstrap';
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import 'variables';
+@import 'mixins';
+
+@import 'parts/core';
+@import 'parts/miscellaneous';

build/scss/AdminLTE-extra-components.scss

@@ -0,0 +1,20 @@
+/*!
+ *   AdminLTE v3.0.4
+ *     Only Extra Components
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+// @import '~bootstrap/scss/bootstrap';
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import 'variables';
+@import 'mixins';
+
+@import 'parts/extra-components';

build/scss/AdminLTE-pages.scss

@@ -0,0 +1,20 @@
+/*!
+ *   AdminLTE v3.0.4
+ *     Only Pages
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/close';
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import 'variables';
+@import 'mixins';
+
+@import 'parts/pages';

build/scss/AdminLTE-plugins.scss

@@ -0,0 +1,20 @@
+/*!
+ *   AdminLTE v3.0.4
+ *     Only Plugins
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+// Bootstrap
+// ---------------------------------------------------
+@import '~bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '~bootstrap/scss/mixins';
+// @import '~bootstrap/scss/bootstrap';
+
+// Variables and Mixins
+// ---------------------------------------------------
+@import 'variables';
+@import 'mixins';
+
+@import 'parts/plugins';

build/scss/AdminLTE-raw.scss

@@ -1,7 +1,7 @@
 /*!
- *   AdminLTE v3.0.0-alpha
- *   Author: Abdullah Almsaeed
- *	 Website: AdminLTE.io <http://adminlte.io>
+ *   AdminLTE v3.0.4
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <http://adminlte.io>
  *   License: Open source - MIT <http://opensource.org/licenses/MIT>
  */
 //
@@ -13,54 +13,15 @@
 // NOTE: be sure to keep the license notice in the generated css.
 // ------------------------------------------------------------------
 //
-// VARIABLES AND MIXINS
+// 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 "labels";
-@import "direct-chat";
-@import "users-list";
-@import "carousel";
-@import "social-widgets";
-// PAGES
-// ---------------------------------------------------
-@import "mailbox";
-@import "lockscreen";
-@import "login_and_register";
-@import "404_500_errors";
-@import "invoice";
-@import "profile";
-// Plugins
-// ---------------------------------------------------
-@import "fullcalendar";
-@import "select2";
-// Miscellaneous
-// ---------------------------------------------------
-@import "miscellaneous";
-@import "print";
-@import "text";
-@import "elevation";
+@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/AdminLTE.scss

@@ -1,61 +1,24 @@
 /*!
- *   AdminLTE v3.0.0-alpha
- *   Author: Abdullah Almsaeed
- *	 Website: AdminLTE.io <http://adminlte.io>
+ *   AdminLTE v3.0.4
+ *   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 '~bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '~bootstrap/scss/bootstrap';
+
+// Variables and Mixins
 // ---------------------------------------------------
-@import "variables";
-@import "mixins";
-// Core
-// ---------------------------------------------------
-@import "layout";
-// COMPONENTS
-// ---------------------------------------------------
-@import "main-header";
-@import "brand";
-@import "main-sidebar";
-@import "sidebar-mini";
-@import "control-sidebar";
-@import "dropdown";
-@import "forms";
-@import "progress-bars";
-@import "small-box";
-@import "cards";
-@import "info-box";
-@import "timeline";
-@import "buttons";
-@import "callout";
-@import "alerts";
-@import "navs";
-@import "products";
-@import "table";
-@import "labels";
-@import "direct-chat";
-@import "users-list";
-@import "carousel";
-@import "social-widgets";
-// PAGES
-// ---------------------------------------------------
-@import "mailbox";
-@import "lockscreen";
-@import "login_and_register";
-@import "404_500_errors";
-@import "invoice";
-@import "profile";
-// Plugins
-// ---------------------------------------------------
-@import "fullcalendar";
-@import "select2";
-// Miscellaneous
-// ---------------------------------------------------
-@import "miscellaneous";
-@import "print";
-@import "text";
-@import "elevation";
+@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

@@ -1,7 +1,6 @@
-/*
- * Component: alert
- * ----------------
- */
+//
+// Component: Alert
+//
 
 .alert {
   .icon {
@@ -9,8 +8,9 @@
   }
 
   .close {
-    color: #000;
+    color: $black;
     opacity: .2;
+
     &:hover {
       opacity: .5;
     }
@@ -23,23 +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: $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-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

@@ -98,15 +98,19 @@ $yiq-text-light: $white !default;
 //
 // 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
 //
@@ -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;
 
 
@@ -360,11 +364,11 @@ $btn-line-height-lg:          $input-btn-line-height-lg !default;
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-box-shadow:              none !default;
+$btn-focus-width:             0 !default;
+$btn-focus-box-shadow:        none !default;
 $btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
+$btn-active-box-shadow:       none !default;
 
 $btn-link-disabled-color:     $gray-600 !default;
 
@@ -407,14 +411,17 @@ $input-border-radius-sm:                $border-radius-sm !default;
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              lighten($component-active-bg, 25%) !default;
 $input-focus-color:                     $input-color !default;
-$input-focus-width:                     $input-btn-focus-width !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+$input-focus-width:                     0 !default;
+$input-focus-box-shadow:                none !default;
 
-$input-placeholder-color:               $gray-600 !default;
+$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,13 +517,15 @@ $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"
 ) !default;
 
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
 
 // Form validation
 $form-feedback-margin-top:          $form-text-margin-top !default;
@@ -690,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

@@ -1,9 +1,14 @@
+//
+// Component: Brand
+//
+
 .brand-link {
   $brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
-  padding: $brand-link-padding-y $sidebar-padding-x;
-  font-size: $navbar-brand-font-size;
   display: block;
+  font-size: $navbar-brand-font-size;
   line-height: $line-height-lg;
+  padding: $brand-link-padding-y $sidebar-padding-x;
+  transition: width $transition-speed $transition-fn;
   white-space: nowrap;
 
   &:hover {
@@ -11,23 +16,61 @@
     text-decoration: none;
   }
 
-  [class*="sidebar-dark"] & {
-    color: rgba(255,255,255,.8);
+  .text-sm & {
+    font-size: inherit;
+  }
+
+  [class*='sidebar-dark'] & {
     border-bottom: 1px solid lighten($dark, 10%);
+    color: rgba($white, .8);
   }
 
-  [class*="sidebar-light"] & {
-    color: rgba(0,0,0,.8);
+  [class*='sidebar-light'] & {
     border-bottom: 1px solid $gray-300;
+    color: rgba($black, .8);
+  }
+
+  .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;
+  }
+
+  &.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;
-  max-height: 34px;
-  width: auto;
-  margin-left: .8rem;
-  margin-right: .5rem;
-  margin-top: -3px;
-}

build/scss/_buttons.scss

@@ -1,87 +1,108 @@
-/*
- * Component: Button
- * -----------------
- */
+//
+// Component: Button
+//
 
 .btn {
+  &.disabled,
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   // Flat buttons
   &.btn-flat {
     @include border-radius(0);
-    box-shadow: none;
     border-width: 1px;
+    box-shadow: none;
   }
 
   // input file btn
   &.btn-file {
-    position: relative;
     overflow: hidden;
+    position: relative;
+
     > input[type='file'] {
-      position: absolute;
-      top: 0;
-      right: 0;
-      min-width: 100%;
-      min-height: 100%;
-      font-size: 100px;
-      text-align: right;
-      opacity: 0;
-      outline: none;
-      background: white;
+      background: $white;
       cursor: inherit;
       display: block;
+      font-size: 100px;
+      min-height: 100%;
+      min-width: 100%;
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      right: 0;
+      text-align: right;
+      top: 0;
     }
   }
+
+  .text-sm & {
+    font-size: $font-size-sm !important;
+  }
 }
 
 // Button color variations
 .btn-default {
-  background-color: #f4f4f4;
-  color: #444;
-  border-color: #ddd;
+  background-color: $button-default-background-color;
+  border-color: $button-default-border-color;
+  color: $button-default-color;
+
   &:hover,
   &:active,
   &.hover {
-    background-color: darken(#f4f4f4, 5%);
+    background-color: darken($button-default-background-color, 5%);
+    color: darken($button-default-color, 10%);
   }
 }
 
 // Application buttons
 .btn-app {
   @include border-radius(3px);
-  position: relative;
-  padding: 15px 5px;
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  color: $gray-600;
+  font-size: 12px;
+  height: 60px;
   margin: 0 0 10px 10px;
   min-width: 80px;
-  height: 60px;
+  padding: 15px 5px;
+  position: relative;
   text-align: center;
-  color: #666;
-  border: 1px solid #ddd;
-  background-color: #f4f4f4;
-  font-size: 12px;
+
   // Icons within the btn
   > .fa,
+  > .fas,
+  > .far,
+  > .fab,
   > .glyphicon,
   > .ion {
-    font-size: 20px;
     display: block;
+    font-size: 20px;
   }
 
   &:hover {
-    background: #f4f4f4;
-    color: #444;
-    border-color: #aaa;
+    background: $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(0, 0, 0, 0.125));
+    @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
   }
 
   // The badge
   > .badge {
-    position: absolute;
-    top: -3px;
-    right: -10px;
     font-size: 10px;
     font-weight: 400;
+    position: absolute;
+    right: -10px;
+    top: -3px;
   }
 }
+
+// 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);
+}

build/scss/_callout.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Callout
- * ------------------
- */
+//
+// Component: Callout
+//
 
 // Base styles (regardless of theme)
 .callout {
@@ -10,21 +9,22 @@
   }
 
   @if $enable-shadows {
-    @extend .elevation-1;
+    box-shadow: map-get($elevations, 1);
   } @else {
     border: 1px solid $gray-300;
   }
 
-  @extend .mb-3;
   background-color: $white;
-  padding: .5rem 1rem .5rem .5rem;
-  border-left: 5px solid #eee;
+  border-left: 5px solid $gray-200;
+  margin-bottom: map-get($spacers, 3);
+  padding: 1rem;
 
   a {
-    color: $white;
+    color: $gray-700;
     text-decoration: underline;
+
     &:hover {
-      color: #eee;
+      color: $gray-200;
     }
   }
 
@@ -34,15 +34,18 @@
 
   // 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%);
   }
 }

build/scss/_cards.scss

@@ -1,19 +1,55 @@
-/*
- * Component: Box
- * --------------
- */
+//
+// 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;
     }
   }
 
+  &.maximized-card {
+    height: 100% !important;
+    left: 0;
+    max-height: 100% !important;
+    max-width: 100% !important;
+    position: fixed;
+    top: 0;
+    width: 100% !important;
+    z-index: 9999;
+
+    &.was-collapsed .card-body {
+      display: block !important;
+    }
+
+    [data-widget='collapse'] {
+      display: none;
+    }
+
+    .card-header,
+    .card-footer {
+      @include border-radius(0 !important);
+    }
+  }
+
   // collapsed mode
   &.collapsed-card {
     .card-body,
@@ -26,8 +62,9 @@
     > li {
       border-bottom: 1px solid $card-border-color;
       margin: 0;
+
       &:last-of-type {
-        border-bottom: none;
+        border-bottom: 0;
       }
     }
   }
@@ -47,84 +84,178 @@
   .border-left {
     border-left: 1px solid $card-border-color;
   }
-}
 
-.card,
-.overlay-wrapper {
-  // Box overlay for LOADING STATE effect
-  > .overlay,
-  > .loading-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+  &.card-tabs {
+    &:not(.card-outline) {
+      & > .card-header {
+        border-bottom: 0;
 
-  .overlay {
-    z-index: 50;
-    background: rgba(255, 255, 255, 0.7);
-    @include border-radius($border-radius);
-    > .fa {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-left: -15px;
-      margin-top: -15px;
-      color: #000;
-      font-size: 30px;
+        .nav-item {
+          &:first-child .nav-link {
+            margin-left: -1px;
+          }
+        }
+      }
+    }
+
+    &.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;
+          }
+        }
+      }
     }
   }
 
-  .overlay.dark {
-    background: rgba(0, 0, 0, 0.5);
+  &.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
+html.maximized-card {
+  overflow: hidden;
 }
 
 // Add clearfix to header, body and footer
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix();
+  @include clearfix;
 }
 
 // Box header
 .card-header {
-  position: relative;
   background-color: transparent;
   border-bottom: 1px solid $card-border-color;
+  padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
+  position: relative;
 
   @if $enable-rounded {
     @include border-top-radius($border-radius);
   }
 
   .collapsed-card & {
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   > .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 {
-  padding: .25rem .5rem;
-  font-size: $font-size-sm;
   background: transparent;
   color: $gray-500;
+  font-size: $font-size-sm;
+  margin: -(($card-spacer-y / 2) * 2) 0;
+  padding: .25rem .5rem;
 
   .btn-group.show &,
   &:hover {
@@ -137,15 +268,27 @@
   }
 }
 
+.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 {
     margin-bottom: 0;
+
     > thead > tr > th,
     > thead > tr > td {
       border-top-width: 0;
@@ -167,8 +310,9 @@
 }
 
 .chart-legend {
-  @extend .list-unstyled;
+  @include list-unstyled;
   margin: 10px 0;
+
   > li {
     @media (max-width: map-get($grid-breakpoints, sm)) {
       float: left;
@@ -179,34 +323,42 @@
 
 // Comment Box
 .card-comments {
-  background: #f7f7f7;
+  background: $gray-100;
+
   .card-comment {
-    @include clearfix();
+    @include clearfix;
+    border-bottom: 1px solid $gray-200;
     padding: 8px 0;
-    border-bottom: 1px solid #eee;
+
     &:last-of-type {
       border-bottom: 0;
     }
+
     &:first-of-type {
       padding-top: 0;
     }
+
     img {
-      @extend .img-sm;
+      height: $card-img-size;
+      width: $card-img-size;
       float: left;
     }
   }
+
   .comment-text {
+    color: lighten($gray-700, 20%);
     margin-left: 40px;
-    color: #555;
   }
+
   .username {
-    color: #444;
+    color: $gray-700;
     display: block;
     font-weight: 600;
   }
+
   .text-muted {
-    font-weight: 400;
     font-size: 12px;
+    font-weight: 400;
   }
 }
 
@@ -215,18 +367,20 @@
 
 // Widget: TODO LIST
 .todo-list {
-  margin: 0;
-  padding: 0;
   list-style: none;
+  margin: 0;
   overflow: auto;
+  padding: 0;
+
   // Todo list element
   > li {
     @include border-radius(2px);
-    padding: 10px;
-    background: #f4f4f4;
+    background: $gray-100;
+    border-left: 2px solid $gray-200;
+    color: $gray-700;
     margin-bottom: 2px;
-    border-left: 2px solid #e6e7e8;
-    color: #444;
+    padding: 10px;
+
     &:last-of-type {
       margin-bottom: 0;
     }
@@ -237,65 +391,68 @@
 
     .text {
       display: inline-block;
-      margin-left: 5px;
       font-weight: 600;
+      margin-left: 5px;
     }
 
     // Time labels
-    .label {
+    .badge {
+      font-size: .7rem;
       margin-left: 10px;
-      font-size: 9px;
     }
 
     // Tools and options box
     .tools {
+      color: theme-color('danger');
       display: none;
       float: right;
-      color: theme-color("danger");
-      // icons
-      > .fa, > .glyphicon, > .ion {
-        margin-right: 5px;
-        cursor: pointer;
-      }
 
+      // icons
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
+      > .ion {
+        cursor: pointer;
+        margin-right: 5px;
+      }
     }
+
     &:hover .tools {
       display: inline-block;
     }
 
     &.done {
-      color: #999;
+      color: darken($gray-500, 25%);
+
       .text {
-        text-decoration: line-through;
         font-weight: 500;
+        text-decoration: line-through;
       }
 
-      .label {
+      .badge {
         background: $gray-500 !important;
       }
     }
   }
 
-  // Color varaity
-  .danger {
-    border-left-color: theme-color("danger");
+  // Color variants
+  @each $name, $color in $theme-colors {
+    .#{$name} {
+      border-left-color: $color;
+    }
   }
-  .warning {
-    border-left-color: theme-color("warning");
-  }
-  .info {
-    border-left-color: theme-color("info");
-  }
-  .success {
-    border-left-color: theme-color("success");
-  }
-  .primary {
-    border-left-color: theme-color("primary");
+
+  @each $name, $color in $colors {
+    .#{$name} {
+      border-left-color: $color;
+    }
   }
 
   .handle {
-    display: inline-block;
     cursor: move;
+    display: inline-block;
     margin: 0 5px;
   }
 }
@@ -307,32 +464,11 @@
   max-width: 200px;
 }
 
-@each $name, $color in $theme-colors {
-  .card-#{$name} {
-    &:not(.card-outline) {
-      .card-header {
-        background-color: $color;
-        border-bottom: 0;
-        &,
-        a {
-          color: color-yiq($color);
-        }
-      }
-    }
-
-    &.card-outline {
-      border-top: 3px solid $color;
-    }
-  }
-
-  .bg-#{$name},
-  .bg-#{$name}-gradient,
-  .card-#{$name}:not(.card-outline) {
-    .btn-tool {
-      color: rgba(color-yiq($color), 0.8);
-      &:hover {
-        color: color-yiq($color);
-      }
+// Nav Tabs override
+.card-default {
+  .nav-item {
+    &:first-child .nav-link {
+      border-left: 0;
     }
   }
 }

build/scss/_carousel.scss

@@ -1,18 +1,24 @@
-/*
- * Component: Carousel
- * -------------------
- */
+//
+// Component: Carousel
+//
+
 .carousel-control {
   &.left,
   &.right {
     background-image: none;
   }
-  > .fa {
+
+  > .fa,
+  > .fas,
+  > .far,
+  > .fab,
+  > .glyphicon,
+  > .ion {
+    display: inline-block;
     font-size: 40px;
+    margin-top: -20px;
     position: absolute;
     top: 50%;
     z-index: 5;
-    display: inline-block;
-    margin-top: -20px;
   }
 }

build/scss/_colors.scss

@@ -0,0 +1,91 @@
+//
+// Misc: Colors
+//
+
+// Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include background-variant($name, $color);
+}
+
+// Background colors (colors)
+@each $name, $color in $colors {
+  @include background-variant($name, $color);
+}
+
+.bg-gray {
+  background-color: $gray-500;
+  color: color-yiq($gray-500);
+}
+
+.bg-gray-light {
+  background-color: lighten($gray-200, 3%);
+  color: color-yiq(lighten($gray-200, 3%)) !important;
+}
+
+.bg-black {
+  background-color: $black;
+  color: color-yiq($black) !important;
+}
+
+.bg-white {
+  background-color: $white;
+  color: color-yiq($white) !important;
+}
+
+// Gradient Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include background-gradient-variant($name, $color);
+}
+
+// Gradient Background colors (colors)
+@each $name, $color in $colors {
+  @include background-gradient-variant($name, $color);
+}
+
+// Backgrund Color Disabled
+[class^='bg-'].disabled {
+  opacity: .65;
+}
+
+// Text muted hover
+a.text-muted:hover {
+  color: theme-color(primary) !important;
+}
+
+// Link Styles
+.link-muted {
+  color: darken($gray-500, 30%);
+
+  &:hover,
+  &:focus {
+    color: darken($gray-500, 40%);
+  }
+}
+
+.link-black {
+  color: $gray-600;
+
+  &:hover,
+  &:focus {
+    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);
+    }
+  }
+}

build/scss/_control-sidebar.scss

@@ -1,51 +1,73 @@
-/*
- * Component: Control sidebar. By default, this is the right sidebar.
- */
+//
+// 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 {
-    width: $control-sidebar-width;
+  &::before {
+    bottom: $main-footer-height;
+    display: none;
     right: -$control-sidebar-width;
-    bottom: 0;
-    @include transition(right $transition-speed $transition-fn);
+    width: $control-sidebar-width;
+    @include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
   }
 
-  &:before {
-    top: 0;
+  &::before {
+    content: '';
     display: block;
     position: fixed;
-    content: " ";
+    top: 0;
     z-index: -1;
   }
 }
 
-// Control sidebar open state
-.control-sidebar-open {
-  @include media-breakpoint-up(md) {
-    .control-sidebar {
-      &,
-      &:before {
-        right: 0;
-      }
-    }
+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 {
-      margin-right: $control-sidebar-width;
+      @include transition(margin-right $transition-speed $transition-fn);
     }
   }
 
-  @include media-breakpoint-down(md) {
-    .control-sidebar {
-      &,
-      &:before {
-        right: 0;
-      }
+// Control sidebar open state
+.control-sidebar-open {
+  .control-sidebar {
+    display: block;
+
+    &,
+    &::before {
+      right: 0;
+    }
+  }
+
+  &.control-sidebar-push,
+  &.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
     }
   }
 }
@@ -53,9 +75,20 @@
 // Control sidebar slide over content state
 .control-sidebar-slide-open {
   .control-sidebar {
+    display: block;
+
     &,
-    &:before {
+    &::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;
     }
   }
 }
@@ -69,8 +102,7 @@
   }
 
   //  Background
-  &,
-  &:before {
+  & {
     background: $sidebar-dark-bg;
   }
 
@@ -91,8 +123,8 @@
 
   // Tabs
   .nav-tabs {
-    border-bottom: 0;
     background-color: $sidebar-dark-hover-bg;
+    border-bottom: 0;
     margin-bottom: 5px;
 
     .nav-item {
@@ -100,10 +132,10 @@
     }
 
     .nav-link {
-      position: relative;
       border-radius: 0;
-      text-align: center;
       padding: 10px 20px;
+      position: relative;
+      text-align: center;
 
       &,
       &:hover,
@@ -117,8 +149,8 @@
       &:active,
       &:focus,
       &.active {
-        border-left-color: transparent;
         border-bottom-color: transparent;
+        border-left-color: transparent;
         border-top-color: transparent;
         color: $sidebar-dark-hover-color;
       }
@@ -139,9 +171,8 @@
   color: lighten($sidebar-light-color, 10%);
 
   //  Background
-  &,
-  &:before {
+  & {
     background: $sidebar-light-bg;
-    border-left: 1px solid $gray-500;
+    border-left: $main-header-bottom-border;
   }
 }

build/scss/_direct-chat.scss

@@ -1,25 +1,39 @@
-/*
- * Component: Direct Chat
- * ----------------------
- */
+//
+// Component: Direct Chat
+//
+ 
 .direct-chat {
   .card-body {
-    position: relative;
     overflow-x: hidden;
     padding: 0;
+    position: relative;
   }
+
   &.chat-pane-open {
     .direct-chat-contacts {
       @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 {
   @include translate(0, 0);
-  padding: 10px;
   height: 250px;
   overflow: auto;
+  padding: 10px;
 }
 
 .direct-chat-msg,
@@ -28,7 +42,7 @@
 }
 
 .direct-chat-msg {
-  @include clearfix();
+  @include clearfix;
   margin-bottom: 10px;
 }
 
@@ -42,44 +56,47 @@
     @include border-radius($border-radius-lg);
   }
 
-  position: relative;
-  padding: 5px 10px;
   background: $direct-chat-default-msg-bg;
   border: 1px solid $direct-chat-default-msg-border-color;
-  margin: 5px 0 0 50px;
   color: $direct-chat-default-font-color;
+  margin: 5px 0 0 50px;
+  padding: 5px 10px;
+  position: relative;
 
   //Create the arrow
-  &:after,
-  &:before {
-    position: absolute;
-    right: 100%;
-    top: 15px;
+  &::after,
+  &::before {
     border: solid transparent;
     border-right-color: $direct-chat-default-msg-border-color;
     content: ' ';
     height: 0;
-    width: 0;
     pointer-events: none;
+    position: absolute;
+    right: 100%;
+    top: 15px;
+    width: 0;
   }
 
-  &:after {
+  &::after {
     border-width: 5px;
     margin-top: -5px;
   }
-  &:before {
+
+  &::before {
     border-width: 6px;
     margin-top: -6px;
   }
+
   .right & {
-    margin-right: 50px;
     margin-left: 0;
-    &:after,
-    &:before {
-      right: auto;
-      left: 100%;
-      border-right-color: transparent;
+    margin-right: 50px;
+
+    &::after,
+    &::before {
       border-left-color: $direct-chat-default-msg-border-color;
+      border-right-color: transparent;
+      left: 100%;
+      right: auto;
     }
   }
 }
@@ -87,17 +104,18 @@
 .direct-chat-img {
   @include border-radius(50%);
   float: left;
-  width: 40px;
   height: 40px;
+  width: 40px;
+
   .right & {
     float: right;
   }
 }
 
-.direct-chat-info {
+.direct-chat-infos {
   display: block;
-  margin-bottom: 2px;
   font-size: $font-size-sm;
+  margin-bottom: 2px;
 }
 
 .direct-chat-name {
@@ -105,7 +123,7 @@
 }
 
 .direct-chat-timestamp {
-  color: #999;
+  color: darken($gray-500, 25%);
 }
 
 //Direct chat contacts pane
@@ -117,39 +135,57 @@
 
 .direct-chat-contacts {
   @include translate(101%, 0);
+  background: $dark;
+  bottom: 0;
+  color: $white;
+  height: 250px;
+  overflow: auto;
   position: absolute;
   top: 0;
-  bottom: 0;
-  height: 250px;
   width: 100%;
-  background: #222d32;
-  color: $white;
-  overflow: auto;
+}
+
+.direct-chat-contacts-light {
+  background: $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(0, 0, 0, 0.2);
-    padding: 10px;
+    @include clearfix;
+    border-bottom: 1px solid rgba($black, 0.2);
     margin: 0;
+    padding: 10px;
+
     &:last-of-type {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 }
 
 .contacts-list-img {
   @include border-radius(50%);
-  width: 40px;
   float: left;
+  width: 40px;
 }
 
 .contacts-list-info {
-  margin-left: 45px;
   color: $white;
+  margin-left: 45px;
 }
 
 .contacts-list-name,
@@ -166,31 +202,23 @@
 }
 
 .contacts-list-date {
-  color: #aaa;
+  color: $gray-400;
   font-weight: normal;
 }
 
 .contacts-list-msg {
-  color: #999;
+  color: darken($gray-400, 10%);
 }
 
-//Direct Chat Variants
-.direct-chat-danger {
-  @include direct-chat-variant(theme-color("danger"));
+// Color variants
+@each $name, $color in $theme-colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
 }
 
-.direct-chat-primary {
-  @include direct-chat-variant(theme-color("primary"));
-}
-
-.direct-chat-warning {
-  @include direct-chat-variant(theme-color("warning"));
-}
-
-.direct-chat-info {
-  @include direct-chat-variant(theme-color("info"));
-}
-
-.direct-chat-success {
-  @include direct-chat-variant(theme-color("success"));
+@each $name, $color in $colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
 }

build/scss/_dropdown.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Dropdown menus
- * -------------------------
- */
+//
+// Component: Dropdown
+//
 
 // General Dropdown Rules
 //.dropdown-item {
@@ -13,42 +12,114 @@
 //  }
 //}
 
+.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 {
-  min-width: 280px;
   max-width: 300px;
+  min-width: 280px;
   padding: 0;
+
   .dropdown-divider {
     margin: 0;
   }
+
   .dropdown-item {
     padding: $dropdown-padding-y $dropdown-item-padding-x;
   }
+
   p {
-    white-space: normal;
     margin: 0;
+    white-space: normal;
+  }
+}
+
+// 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: 0px;
+    margin-top: 0px;
+    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;
+  min-width: 360px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
   }
 }
 
 // Dropdown header and footer
 .dropdown-footer,
 .dropdown-header {
-  text-align: center;
   display: block;
-  padding: .5rem $dropdown-item-padding-x;
   font-size: $font-size-sm;
+  padding: .5rem $dropdown-item-padding-x;
+  text-align: center;
 }
 
-/* Add fade animation to dropdown menus by appending
- the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
+// Add fade animation to dropdown menus by appending 
+// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
 .open:not(.dropup) > .animated-dropdown-menu {
-  backface-visibility: visible !important;
   @include animation(flipInX .7s both);
+  backface-visibility: visible !important;
 }
 
 @keyframes flipInX {
@@ -77,33 +148,7 @@
   }
 }
 
-@-webkit-keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    -webkit-transition-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    -webkit-transition-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-  }
-}
-
-/* Fix dropdown menu in navbars */
+// Fix dropdown menu in navbars
 .navbar-custom-menu > .navbar-nav {
   > li {
     position: relative;
@@ -130,3 +175,98 @@
     }
   }
 }
+
+// User Menu
+.navbar-nav > .user-menu {
+  > .nav-link:after {
+    content:none;
+  }
+
+  > .dropdown-menu {
+    @include border-top-radius(0);
+    padding: 0;
+    width: 280px;
+
+    &,
+    > .user-body {
+      @include border-bottom-radius(4px);
+    }
+
+    // Header menu
+    > li.user-header {
+      height: 175px;
+      padding: 10px;
+      text-align: center;
+
+      // User image
+      > img {
+        z-index: 5;
+        height: 90px;
+        width: 90px;
+        border: 3px solid;
+        border-color: transparent;
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+
+      > p {
+        z-index: 5;
+        font-size: 17px;
+        //text-shadow: 2px 2px 3px #333333;
+        margin-top: 10px;
+
+        > small {
+          display: block;
+          font-size: 12px;
+        }
+      }
+    }
+
+    // Menu Body
+    > .user-body {
+      @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;
+          color: $gray-700 !important;
+        }
+      }
+    }
+
+    // Menu Footer
+    > .user-footer {
+      @include clearfix;
+      background-color: $gray-100;
+      padding: 10px;
+
+      .btn-default {
+        color: $gray-600;
+
+        &:hover {
+          @include media-breakpoint-up(sm) {
+            background-color: $gray-100;
+          }
+        }
+      }
+    }
+  }
+
+  .user-image {
+    @include media-breakpoint-up(sm) {
+      float: none;
+      line-height: 10px;
+      margin-right: .4rem;
+      margin-top: -8px;
+    }
+
+    border-radius: 50%;
+    float: left;
+    height: $sidebar-user-image-width;
+    margin-right: 10px;
+    margin-top: -2px;
+    width: $sidebar-user-image-width;
+  }
+}

build/scss/_elevation.scss

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

build/scss/_forms.scss

@@ -1,53 +1,277 @@
-/*
- * Component: Form
- * ---------------
- */
+//
+// Component: Forms
+//
+ 
 .form-group {
   &.has-icon {
     position: relative;
+
     .form-control {
       padding-right: 35px;
     }
+
     .form-icon {
+      background-color: transparent;
+      border: 0;
       cursor: pointer;
+      font-size: 1rem;
+      // margin-top: -3px;
+      padding: $input-btn-padding-y $input-btn-padding-x;
       position: absolute;
       right: 3px;
       top: 0;
-      padding: $input-btn-padding-y $input-btn-padding-x;
-      // margin-top: -3px;
-      border: 0;
-      background-color: transparent;
-      font-size: 1rem;
     }
   }
 }
 
-/* button groups */
+// Button groups
 .btn-group-vertical {
   .btn {
-    &.btn-flat:first-of-type, &.btn-flat:last-of-type {
+    &.btn-flat:first-of-type,
+    &.btn-flat:last-of-type {
       @include border-radius(0);
     }
   }
 }
 
-/* Support Font Awesome icons in form-control */
-.form-control-feedback.fa {
-  line-height: $input-height;
+// Support icons in form-control
+.form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height;
+  }
 }
 
-.input-lg + .form-control-feedback.fa,
-.input-group-lg + .form-control-feedback.fa,
-.form-group-lg .form-control + .form-control-feedback.fa {
-  line-height: $input-height-lg;
+.input-lg  + .form-control-feedback,
+.input-group-lg + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height-lg;
+  }
 }
 
-.input-sm + .form-control-feedback.fa,
-.input-group-sm + .form-control-feedback.fa,
-.form-group-sm .form-control + .form-control-feedback.fa {
-  line-height: $input-height-sm;
+.form-group-lg {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.glyphicon,
+    &.ion {
+      line-height: $input-height-lg;
+    }
+  }
 }
 
-label:not(.form-check-label, .custom-file-label) {
+.input-sm  + .form-control-feedback,
+.input-group-sm + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height-sm;
+  }
+}
+
+.form-group-sm {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.glyphicon,
+    &.ion {
+      line-height: $input-height-sm;
+    }
+  }
+}
+
+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');
+  display: none;
+  margin-top: $form-feedback-margin-top;
+  width: 100%;
+}
+
+.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'));
+  display: none;
+  line-height: $form-feedback-tooltip-line-height;
+  margin-top: .1rem;
+  max-width: 100%; // Contain to parent when possible
+  padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+}
+
+.form-control {
+  &.is-warning {
+    border-color: theme-color('warning');
+
+    @if $enable-validation-icons {
+      // padding-right: $input-height-inner;
+      // background-image: none;
+      // background-repeat: no-repeat;
+      // background-position: center right $input-height-inner-quarter;
+      // background-size: $input-height-inner-half $input-height-inner-half;
+    }
+
+    &:focus {
+      border-color: theme-color('warning');
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+// stylelint-disable-next-line selector-no-qualifying-type
+textarea.form-control {
+  &.is-warning {
+    @if $enable-validation-icons {
+      padding-right: $input-height-inner;
+      background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+    }
+  }
+}
+
+.custom-select {
+  &.is-warning {
+    border-color: theme-color('warning');
+
+    @if $enable-validation-icons {
+      // padding-right: $custom-select-feedback-icon-padding-right;
+      // background: $custom-select-background, none $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
+    }
+
+    &:focus {
+      border-color: theme-color('warning');
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+
+.form-control-file {
+  &.is-warning {
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+.form-check-input {
+  &.is-warning {
+    ~ .form-check-label {
+      color: theme-color('warning');
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+  }
+}
+
+.custom-control-input.is-warning {
+  ~ .custom-control-label {
+    color: theme-color('warning');
+
+    &::before {
+      border-color: theme-color('warning');
+    }
+  }
+
+  ~ .warning-feedback,
+  ~ .warning-tooltip {
+    display: block;
+  }
+
+  &:checked {
+    ~ .custom-control-label::before {
+      @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);
+    }
+
+    &:not(:checked) ~ .custom-control-label::before {
+      border-color: theme-color('warning');
+    }
+  }
+}
+
+// custom file
+.custom-file-input {
+  &.is-warning {
+    ~ .custom-file-label {
+      border-color: theme-color('warning');
+    }
+
+    ~ .warning-feedback,
+    ~ .warning-tooltip {
+      display: block;
+    }
+
+    &:focus {
+      ~ .custom-file-label {
+        border-color: theme-color('warning');
+        box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      }
+    }
+  }
+}
+
+// custom switch color variations
+.custom-switch {
+  @each $name, $color in $theme-colors {
+    @include custom-switch-variant($name, $color);
+  }
+
+  @each $name, $color in $colors {
+    @include custom-switch-variant($name, $color);
+  }
+}
+
+// custom range color variations
+.custom-range {
+  @each $name, $color in $theme-colors {
+    @include custom-range-variant($name, $color);
+  }
+
+  @each $name, $color in $colors {
+    @include custom-range-variant($name, $color);
+  }
+}

build/scss/_fullcalendar.scss

@@ -1,101 +0,0 @@
-/*
- * Plugin: Full Calendar
- * ---------------------
- */
-//Fullcalendar buttons
-.fc-button {
-  background: #f4f4f4;
-  background-image: none;
-  color: #444;
-  border-color: #ddd;
-  border-bottom-color: #ddd;
-  &:hover,
-  &:active,
-  &.hover {
-    background-color: #e9e9e9;
-  }
-}
-
-// Calendar title
-.fc-header-title h2 {
-  font-size: 15px;
-  line-height: 1.6em;
-  color: #666;
-  margin-left: 10px;
-}
-
-.fc-header-right {
-  padding-right: 10px;
-}
-
-.fc-header-left {
-  padding-left: 10px;
-}
-
-// Calendar table header cells
-.fc-widget-header {
-  background: #fafafa;
-}
-
-.fc-grid {
-  width: 100%;
-  border: 0;
-}
-
-.fc-widget-header:first-of-type,
-.fc-widget-content:first-of-type {
-  border-left: 0;
-  border-right: 0;
-}
-
-.fc-widget-header:last-of-type,
-.fc-widget-content:last-of-type {
-  border-right: 0;
-}
-
-.fc-toolbar {
-  padding: 1rem;
-  margin: 0;
-}
-
-.fc-day-number {
-  font-size: 20px;
-  font-weight: 300;
-  padding-right: 10px;
-}
-
-.fc-color-picker {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  > li {
-    float: left;
-    font-size: 30px;
-    margin-right: 5px;
-    line-height: 30px;
-    .fa {
-      transition: transform linear .3s;
-      &:hover {
-        @include rotate(30deg);
-      }
-    }
-  }
-}
-
-#add-new-event {
-  transition: all linear .3s;
-}
-
-.external-event {
-  @include box-shadow($card-shadow);
-
-  padding: 5px 10px;
-  font-weight: bold;
-  margin-bottom: 4px;
-  border-radius: $border-radius;
-  cursor: move;
-
-  &:hover {
-    @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));
-  }
-}

build/scss/_info-box.scss

@@ -1,79 +1,140 @@
-/*
- * Component: Info Box
- * -------------------
- */
+//
+// Component: Info Box
+//
+ 
 .info-box {
-  @extend .d-flex;
-  @extend .mb-3;
   @include box-shadow($card-shadow);
   @include border-radius($border-radius);
 
-  padding: .5rem;
-  min-height: 80px;
   background: $white;
+  display: flex;
+  margin-bottom: map-get($spacers, 3);
+  min-height: 80px;
+  padding: .5rem;
+  position: relative;
 
   .progress {
-    background-color: rgba(0, 0, 0, 0.125);
-    margin: 5px 0;
+    background-color: rgba($black, .125);
     height: 2px;
+    margin: 5px 0;
+
     .progress-bar {
       background-color: $white;
     }
   }
-}
 
-.info-box-icon {
-  @extend .d-flex;
-  @extend .align-items-center;
-  @extend .justify-content-center;
+  .info-box-icon {
+    @if $enable-rounded {
+      border-radius: $border-radius;
+    }
 
-  @if $enable-rounded {
-    border-radius: $border-radius;
+    align-items: center;
+    display: flex;
+    font-size: 1.875rem;
+    justify-content: center;
+    text-align: center;
+    width: 70px;
+
+    > img {
+      max-width: 100%;
+    }
   }
 
-  display: block;
-  width: 70px;
-  text-align: center;
-  font-size: 30px;
-
-  > img {
-    max-width: 100%;
+  .info-box-content {
+    flex: 1;
+    padding: 5px 10px;
   }
-}
 
-.info-box-content {
-  padding: 5px 10px;
-  flex: 1;
-}
+  .info-box-number {
+    display: block;
+    font-weight: $font-weight-bold;
+  }
 
-.info-box-number {
-  display: block;
-  font-weight: $font-weight-bold;
-}
+  .progress-description,
+  .info-box-text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.progress-description,
-.info-box-text {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  @each $name, $color in $theme-colors {
+    .info-box {
+      .bg-#{$name},
+      .bg-gradient-#{$name} {
+        color: color-yiq($color);
 
-@each $name, $color in $theme-colors {
-  .info-box.bg-#{$name},
-  .info-box.bg-#{$name}-gradient {
-    color: color-yiq($color);
+        .progress-bar {
+          background-color: color-yiq($color);
+        }
+      }
+    }
+  }
 
-    .progress-bar {
-      background-color: color-yiq($color);
+  .info-box-more {
+    display: block;
+  }
+
+  .progress-description {
+    margin: 0;
+
+  }
+
+  @include media-breakpoint-up(md) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      .progress-description {
+        display: none;
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      .progress-description {
+        display: none;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      .progress-description {
+        @include font-size(.75rem);
+        display: block;
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      .progress-description {
+        @include font-size(.75rem);
+        display: block;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      .progress-description {
+        @include font-size(1rem);
+        display: block;
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      .progress-description {
+        @include font-size(1rem);
+        display: block;
+      }
     }
   }
 }
-
-.info-box-more {
-  display: block;
-}
-
-.progress-description {
-  margin: 0;
-}

build/scss/_labels.scss

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

build/scss/_layout.scss

@@ -1,46 +1,483 @@
-/*
- * Core: General Layout Style
- * -------------------------
- */
+//
+// Core: Layout
+//
+
+html.scroll-smooth {
+  scroll-behavior: smooth;
+}
+
 html,
 body,
 .wrapper {
   min-height: 100%;
-  overflow-x: hidden;
 }
 
 .wrapper {
   position: relative;
 
+  & .content-wrapper {
+    min-height: calc(100vh - #{$main-header-height} - #{$main-footer-height});
+  }
+
   .layout-boxed & {
-    @include box-shadow(0 0 10px rgba(0, 0, 0, .3));
+    @include box-shadow(0 0 10 rgba($black, .3));
 
     &,
-    &:before {
+    &::before {
       margin: 0 auto;
       max-width: $boxed-layout-max-width;
     }
+
+    & .main-sidebar {
+      left: inherit;
+    }
+  }
+
+  @supports not (-webkit-touch-callout: none) {
+    .layout-fixed & .sidebar {
+      height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+    }
+    .layout-fixed.text-sm & .sidebar {
+      height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
+    }
+  }
+
+  .layout-navbar-fixed.layout-fixed & {
+    .control-sidebar {
+      top: $main-header-height;
+    }
+
+    .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;
+      top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
+    }
+
+    .main-sidebar:hover {
+      .brand-link {
+        transition: width $transition-speed $transition-fn;
+        width: $sidebar-width;
+      }
+    }
+
+    .brand-link {
+      overflow: hidden;
+      position: fixed;
+      top: 0;
+      transition: width $transition-speed $transition-fn;
+      width: $sidebar-width;
+      z-index: $zindex-main-header + 1;
+    }
+
+    // Sidebar variants brand-link fix
+    @each $name, $color in $theme-colors {
+      .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-dark-bg;
+      }
+
+      .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+        background-color: $sidebar-light-bg;
+      }
+    }
+
+    .content-wrapper {
+      margin-top: $main-header-height;
+    }
+
+    .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-header - 1;
+    }
+  }
+
+  .layout-navbar-fixed.text-sm & {
+    .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-not-fixed & {
+    .brand-link {
+      position: static;
+    }
+
+    .sidebar,
+    .content-wrapper {
+      margin-top: 0;
+    }
+
+    .main-header {
+      position: static;
+    }
+  }
+
+  .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;
+          top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
+        }
+
+        &.sidebar-collapse {
+          .brand-link {
+            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 {
+            .brand-link {
+              transition: width $transition-speed $transition-fn;
+              width: $sidebar-width;
+            }
+          }
+        }
+
+        .brand-link {
+          overflow: hidden;
+          position: fixed;
+          top: 0;
+          transition: width $transition-speed $transition-fn;
+          width: $sidebar-width;
+          z-index: $zindex-main-header + 1;
+        }
+
+        // Sidebar variants brand-link fix
+        @each $name, $color in $theme-colors {
+          .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
+            background-color: $sidebar-dark-bg;
+          }
+
+          .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
+            background-color: $sidebar-light-bg;
+          }
+        }
+
+        .content-wrapper {
+          margin-top: $main-header-height;
+        }
+
+        .text-sm & .main-header ~ .content-wrapper,
+        .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;
+        }
+      }
+
+      .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;
+        }
+
+        .sidebar,
+        .content-wrapper {
+          margin-top: 0;
+        }
+
+        .main-header {
+          position: static;
+        }
+      }
+
+      .layout#{$infix}-navbar-not-fixed.layout-fixed & {
+        .sidebar {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
+  .layout-footer-fixed & {
+    .control-sidebar {
+      bottom: 0;
+    }
+  }
+
+  .layout-footer-fixed & {
+    .main-footer {
+      bottom: 0;
+      left: 0;
+      position: fixed;
+      right: 0;
+      z-index: $zindex-main-footer;
+    }
+  }
+
+  .layout-footer-not-fixed & {
+    .main-footer {
+      position: static;
+    }
+
+    .content-wrapper {
+      margin-bottom: 0;
+    }
+  }
+
+  @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;
+        }
+      }
+
+      .layout#{$infix}-footer-fixed & {
+        .main-footer {
+          bottom: 0;
+          left: 0;
+          position: fixed;
+          right: 0;
+          z-index: $zindex-main-footer;
+        }
+
+        .content-wrapper {
+          padding-bottom: $main-footer-height;
+        }
+      }
+
+      .layout#{$infix}-footer-not-fixed & {
+        .main-footer {
+          position: static;
+        }
+      }
+    }
+  }
+
+  .layout-top-nav & {
+    margin-left: 0;
+
+    .main-header {    
+      .brand-image {
+        margin-top: -.5rem;
+        margin-right: .2rem;
+        height: 33px;
+      }
+    }
+
+    & .main-sidebar {
+      bottom: inherit;
+      height: inherit;
+    }
+
+    & .content-wrapper,
+    & .main-header,
+    & .main-footer {
+      margin-left: 0;
+    }
   }
 }
 
-.content-wrapper,
-.main-footer,
-.main-header {
-  @include media-breakpoint-up(md) {
-    @include transition(margin-left $transition-speed $transition-fn);
 
-    margin-left: $sidebar-width;
-    z-index: 3000;
-
-    .sidebar-collapse & {
+body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
+  .content-wrapper,
+  .main-footer,
+  .main-header {
+    &,
+    &::before {
       margin-left: 0;
     }
   }
+}
 
-  @include media-breakpoint-down(md) {
-    &,
-    &:before {
-      margin-left: 0;
+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;
+      }
     }
   }
 }
@@ -54,67 +491,141 @@ body,
 }
 
 .main-sidebar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-
   &,
-  &:before {
+  &::before {
     $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
     @include transition($local-sidebar-transition);
     width: $sidebar-width;
   }
 
-  .sidebar-collapse & {
+  .sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) & {
     &,
-    &:before {
-      margin-left: -$sidebar-width;
+    &::before {
+      box-shadow: none !important;
     }
   }
 
-  @include media-breakpoint-down(md) {
+  .sidebar-collapse & {
     &,
-    &:before {
-      box-shadow: none!important;
+    &::before {
+      margin-left: -$sidebar-width;
+    }
+
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    &,
+    &::before {
+      box-shadow: none !important;
       margin-left: -$sidebar-width;
     }
 
     .sidebar-open & {
       &,
-      &:before {
+      &::before {
         margin-left: 0;
       }
     }
   }
 }
 
+:not(.layout-fixed) {
+  .main-sidebar {
+    height: inherit;
+    min-height: 100%;
+    position: absolute;
+    top: 0;
+  }
+}
+
+.layout-fixed {
+  .brand-link {
+    width: $sidebar-width;
+  }
+
+  .main-sidebar {
+    bottom: 0;
+    float: none;
+    height: 100vh;
+    left: 0;
+    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 {
-  padding: $main-footer-padding;
-  color: #555;
-  border-top: $main-footer-border-top;
   background: $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 {
-    margin-bottom: 0;
-    padding: 0;
     background: 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;
+    transition: none !important;
   }
 }

build/scss/_lockscreen.scss

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

build/scss/_login_and_register.scss

@@ -1,52 +0,0 @@
-/*
- * Page: Login & Register
- * ----------------------
- */
-
-.login-logo,
-.register-logo {
-  font-size: 35px;
-  text-align: center;
-  margin-bottom: 25px;
-  font-weight: 300;
-  a {
-    color: #444;
-  }
-}
-
-.login-page,
-.register-page {
-  background: $gray-200;
-}
-
-.login-box,
-.register-box {
-  width: 360px;
-  margin: 7% auto;
-  @media (max-width: map-get($grid-breakpoints, sm)) {
-    width: 90%;
-    margin-top: 20px;
-  }
-}
-
-.login-box-body,
-.register-box-body {
-  background: $white;
-  padding: 20px;
-  border-top: 0;
-  color: #666;
-  .form-control-feedback {
-    color: #777;
-  }
-}
-
-.login-box-msg,
-.register-box-msg {
-  margin: 0;
-  text-align: center;
-  padding: 0 20px 20px 20px;
-}
-
-.social-auth-links {
-  margin: 10px 0;
-}

build/scss/_main-header.scss

@@ -1,31 +1,52 @@
-/*
- * Component: Main Header
- * ----------------------
- */
+//
+// Component: Main Header
+//
+ 
 .main-header {
+  border-bottom: $main-header-bottom-border;
   z-index: $zindex-main-header;
 
-  .navbar-nav .nav-item {
-    margin: 0;
-  }
-
   .nav-link {
-    position: relative;
     height: $nav-link-height;
+    position: relative;
   }
 
-  .navbar-nav[class*="-right"] {
-    .dropdown-menu {
-      margin-top: -3px;
-      right: 0;
-      left: auto;
-      @media (max-width: breakpoint-max(xs)) {
-        left: 0;
-        right: auto;
+  .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,
+      > .glyphicon,
+      > .ion {
+        font-size: $font-size-sm;
+      }
+    }
+
+  }
+
+  .navbar-nav {
+    .nav-item {
+      margin: 0;
+    }
+
+    &[class*='-right'] {
+      .dropdown-menu {
+        left: auto;
+        margin-top: -3px;
+        right: 0;
+
+        @media (max-width: breakpoint-max(xs)) {
+          left: 0;
+          right: auto;
+        }
       }
     }
   }
-
 }
 
 // Add this class to images within a nav-link
@@ -36,21 +57,22 @@
 
 // Navbar badge
 .navbar-badge {
-  position: absolute;
-  top: 9px;
-  right: 5px;
   font-size: .6rem;
   font-weight: 300;
   padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 9px;
 }
 
 .btn-navbar {
-  border-left-width: 0;
   background-color: transparent;
+  border-left-width: 0;
 }
 
 .form-control-navbar {
   border-right-width: 0;
+
   & + .input-group-append {
     margin-left: 0;
   }
@@ -69,29 +91,19 @@
   }
 
   .form-control-navbar {
-    &::placeholder,
+    &::placeholder {
+      color: $main-header-dark-placeholder-color;
+    }
+
     + .input-group-append > .btn-navbar {
       color: $main-header-dark-placeholder-color;
     }
 
-    // Support FF and IE
-    :-moz-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
-    ::-moz-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
-    :-ms-input-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
     &:focus {
       &,
       & + .input-group-append .btn-navbar {
-        border: $main-header-dark-form-control-focused-border !important;
         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;
       }
     }
@@ -106,29 +118,19 @@
   }
 
   .form-control-navbar {
-    &::placeholder,
+    &::placeholder {
+      color: $main-header-light-placeholder-color;
+    }
+
     + .input-group-append > .btn-navbar {
       color: $main-header-light-placeholder-color;
     }
 
-    // Support FF and IE
-    :-moz-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
-    ::-moz-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
-    :-ms-input-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
     &:focus {
       &,
       & + .input-group-append .btn-navbar {
-        border: $main-header-light-form-control-focused-border !important;
         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

@@ -1,32 +1,40 @@
-/**
- * Component: Sidebar
- * ------------------
- */
+//
+// Component: Main Sidebar
+//
 
 .main-sidebar {
-  z-index: $zindex-main-sidebar;
   height: 100vh;
   overflow-y: hidden;
+  z-index: $zindex-main-sidebar;
+
+  // Remove Firefox Focusring
+  a {
+    &:-moz-focusring {
+      border: 0;
+      outline: none;
+    }
+  }
+
 }
 
 .sidebar {
+  height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
+  overflow-y: auto;
   padding-bottom: $sidebar-padding-y;
-  padding-top: $sidebar-padding-y;
   padding-left: $sidebar-padding-x;
   padding-right: $sidebar-padding-x;
-  overflow-y: auto;
-  height: calc(100% - 4rem);
+  padding-top: $sidebar-padding-y;
 }
 
 // Sidebar user panel
 .user-panel {
   position: relative;
 
-  [class*="sidebar-dark"] & {
+  [class*='sidebar-dark'] & {
     border-bottom: 1px solid lighten($dark, 12%);
   }
 
-  [class*="sidebar-light"] & {
+  [class*='sidebar-light'] & {
     border-bottom: 1px solid $gray-300;
   }
 
@@ -37,13 +45,13 @@
   }
 
   .image {
-    padding-left: $nav-link-padding-x - .2;
     display: inline-block;
+    padding-left: $nav-link-padding-x - .2;
   }
 
   img {
-    width: $sidebar-user-image-width;
     height: auto;
+    width: $sidebar-user-image-width;
   }
 
   .info {
@@ -62,17 +70,28 @@
   // All levels
   .nav-item {
     > .nav-link {
-      margin-bottom: 0.2rem;
+      margin-bottom: .2rem;
+
       .right {
         @include transition(transform $transition-fn $transition-speed);
       }
     }
   }
 
+  .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.2rem;
+    }
   }
 
   .menu-open {
@@ -81,7 +100,7 @@
     }
 
     > .nav-link {
-      .right {
+      i.right {
         @include rotate(-90deg);
       }
     }
@@ -92,10 +111,20 @@
     margin-bottom: 0;
 
     .nav-icon {
-      text-align: center;
-      width: $sidebar-nav-icon-width;
+      margin-left: .05rem;
       font-size: 1.2rem;
       margin-right: .2rem;
+      text-align: center;
+      width: $sidebar-nav-icon-width;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.glyphicon,
+      &.ion {
+        font-size: 1.1rem;
+      }
     }
 
     .float-right {
@@ -118,12 +147,37 @@
     }
   }
 
+  &.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;
+          }
+        }
+      }
+    }
+  }
+
   .nav-header {
     font-size: .9rem;
     padding: $nav-link-padding-y;
 
     &:not(:first-of-type) {
-      padding: 1.7rem 1rem .5rem 1rem;
+      padding: 1.7rem 1rem .5rem;
     }
   }
 
@@ -134,31 +188,724 @@
 }
 
 #sidebar-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: none;
-  background-color: rgba(0, 0, 0, 0.1);
-  z-index: $zindex-main-sidebar - 1;
-
   @include media-breakpoint-down(md) {
     .sidebar-open & {
       display: block;
     }
   }
+
+  background-color: rgba($black, 0.1);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $zindex-main-sidebar - 1;
+}
+
+[class*='sidebar-light-'] {
+  // Sidebar background color
+  background-color: $sidebar-light-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-light-hover-color;
+    }
+
+    .status {
+      background: $sidebar-light-hover-bg;
+      color: $sidebar-light-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-light-hover-bg, 3%);
+        color: $sidebar-light-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-light-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active,
+      &:focus {
+        color: $sidebar-light-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
+      background-color: $sidebar-light-hover-bg;
+      color: $sidebar-light-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-light-active-color;
+
+      @if $enable-shadows {
+        box-shadow: map-get($elevations, 1);
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-light-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background: inherit;
+    color: darken($sidebar-light-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-light-color;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-light-submenu-color;
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          background-color: $sidebar-light-submenu-active-bg;
+          color: $sidebar-light-submenu-active-color;
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: $sidebar-light-submenu-hover-bg;
+      }
+    }
+  }
+
+  // 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-'] {
+  // Sidebar background color
+  background-color: $sidebar-dark-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-dark-hover-color;
+    }
+
+    .status {
+      background: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-dark-hover-bg, 3%);
+        color: $sidebar-dark-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-dark-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active {
+        color: $sidebar-dark-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    & > .nav-link:focus  {
+      background-color: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-dark-hover-color;
+
+      @if $enable-shadows {
+        box-shadow: map-get($elevations, 1);
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-dark-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background: inherit; //darken($sidebar-dark-bg, 3%);
+    color: lighten($sidebar-dark-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-dark-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-hover-bg;
+          color: $sidebar-dark-submenu-hover-color;
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-active-bg;
+          color: $sidebar-dark-submenu-active-color;
+        }
+      }
+    }
+  }
+
+  // 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} {
-    @include skin-dark-sidebar($color)
+  .sidebar-dark-#{$name},
+  .sidebar-light-#{$name} {
+    @include sidebar-color($color)
+  }
+}
+
+@each $name, $color in $colors {
+  .sidebar-dark-#{$name},
+  .sidebar-light-#{$name} {
+    @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;
+      }
+    }
   }
 
-  .sidebar-light-#{$name} {
-    @include skin-light-sidebar($color)
+  &: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: 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: 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: rgba($white, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-dark-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background: none;
+        color: $sidebar-dark-active-color;
+      }
+    }
+  }
+
+  [class*='sidebar-light'] & {
+    &.nav-sidebar > .nav-item {
+      .nav-treeview,
+      > .nav-treeview {
+        background: rgba($black, .05);
+      }
+
+      > .nav-link.active {
+        color: $sidebar-light-active-color;
+      }
+    }
+
+    .nav-treeview > .nav-item > .nav-link {
+      &.active,
+      &:focus,
+      &:hover {
+        background: none;
+        color: $sidebar-light-active-color;
+      }
+    }
   }
 }
 
 
+.nav-collapse-hide-child {
+  .menu-open > .nav-treeview {
+    max-height: min-content;
+    opacity: 1;
+  }
+
+  .sidebar-collapse & {
+    .menu-open > .nav-treeview {
+      max-height: 0;
+      opacity: 0;
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini.sidebar-collapse .main-sidebar:hover &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
+    .menu-open > .nav-treeview {
+      max-height: min-content;
+      opacity: 1;
+    }
+  }
+}
+
+// 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: 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: lighten($sidebar-dark-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: lighten($sidebar-dark-bg, 10%);
+  }
+}
+
+[class*='sidebar-light'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: 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: darken($sidebar-light-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: darken($sidebar-light-bg, 10%);
+  }
+}

build/scss/_miscellaneous.scss

@@ -1,10 +1,6 @@
-/*
- * General: Miscellaneous
- * ----------------------
- */
-a.text-muted:hover {
-  color: theme-color(primary) !important;
-}
+//
+// Misc: Miscellaneous
+//
 
 .border-transparent {
   border-color: transparent !important;
@@ -15,185 +11,104 @@ a.text-muted:hover {
   display: block;
   margin: 10px 0;
   text-align: center;
+
   &.margin-bottom {
     margin-bottom: 25px;
   }
+
   > .description-header {
+    font-size: 16px;
+    font-weight: 600;
     margin: 0;
     padding: 0;
-    font-weight: 600;
-    font-size: 16px;
   }
+
   > .description-text {
     text-transform: uppercase;
   }
-}
 
-// Background colors
-@each $name, $color in $theme-colors {
-  .bg-#{$name} {
-    &,
-    a {
-      color: color-yiq($color) !important;
-    }
-  }
-}
-
-.bg-gray {
-  color: #000;
-  background-color: $gray-500;
-}
-
-.bg-gray-light {
-  background-color: lighten($gray-200, 3%);
-  color: color-yiq(lighten($gray-200, 3%)) !important;
-}
-
-.bg-black {
-  background-color: $black;
-  color: color-yiq($black) !important;
-}
-
-.bg-white {
-  background-color: $white;
-  color: color-yiq($white) !important;
-}
-
-// Disabled!
-[class^="bg-"].disabled {
-  opacity: .65;
-}
-
-.link-muted {
-  color: darken($gray-500, 30%);
-  &:hover,
-  &:focus {
-    color: darken($gray-500, 40%);
-  }
-}
-
-.link-black {
-  color: #666;
-  &:hover,
-  &:focus {
-    color: #999;
-  }
-}
-
-// Hide elements by display none only
-.hide {
-  display: none !important;
-}
-
-// Remove borders
-.no-border {
-  border: 0 !important;
-}
-
-// Remove box shadow
-.no-shadow {
-  box-shadow: none !important;
-}
-
-// Unstyled List
-.list-unstyled {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.list-group-unbordered {
-  > .list-group-item {
-    border-left: 0;
-    border-right: 0;
-    border-radius: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-// Remove border radius
-.flat {
-  @include border-radius(0 !important);
-}
-
-// _fix for sparkline tooltip
-.jqstooltip {
-  padding: 5px !important;
-  width: auto !important;
-  height: auto !important;
-}
-
-// Gradient Background colors
-@each $name, $color in $theme-colors {
-  .bg-#{$name}-gradient {
-    @include gradient($color, $color, lighten($color, 10%));
-    color: color-yiq($color);
-  }
-}
-
-// Description Block Extension
-.description-block {
+  // Description Block Extension
   .description-icon {
     font-size: 16px;
   }
 }
 
 // List utility classes
+.list-group-unbordered {
+  > .list-group-item {
+    border-left: 0;
+    border-radius: 0;
+    border-right: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .list-header {
+  color: $gray-600;
   font-size: 15px;
-  padding: 10px 4px;
   font-weight: bold;
-  color: #666;
+  padding: 10px 4px;
 }
 
 .list-seperator {
-  height: 1px;
   background: $card-border-color;
-  margin: 15px 0 9px 0;
+  height: 1px;
+  margin: 15px 0 9px;
 }
 
 .list-link {
   > a {
+    color: $gray-600;
     padding: 4px;
-    color: #777;
+
     &:hover {
-      color: #222;
+      color: $gray-900;
     }
   }
 }
 
 // User block
 .user-block {
-  @include clearfix();
+  float: left;
+
   img {
-    width: 40px;
-    height: 40px;
     float: left;
+    height: 40px;
+    width: 40px;
   }
+
   .username,
   .description,
   .comment {
     display: block;
     margin-left: 50px;
   }
+
   .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,
     .description,
     .comment {
       margin-left: 40px;
     }
+
     .username {
       font-size: 14px;
     }
@@ -208,26 +123,29 @@ a.text-muted:hover {
 }
 
 .img-sm {
-  width: 30px !important;
-  height: 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;
   }
 }
 
@@ -279,74 +197,283 @@ a.text-muted:hover {
 }
 
 .size-32 {
-  width: 32px;
   height: 32px;
   line-height: 32px;
+  width: 32px;
 }
 
 .size-40 {
-  width: 40px;
   height: 40px;
   line-height: 40px;
+  width: 40px;
 }
 
 .size-50 {
-  width: 50px;
   height: 50px;
   line-height: 50px;
+  width: 50px;
 }
 
 // General attachemnt block
 .attachment-block {
+  background: $gray-100;
   border: 1px solid $card-border-color;
-  padding: 5px;
   margin-bottom: 10px;
-  background: #f7f7f7;
+  padding: 5px;
 
   .attachment-img {
-    max-width: 100px;
-    max-height: 100px;
-    height: auto;
     float: left;
+    height: auto;
+    max-height: 100px;
+    max-width: 100px;
   }
+
   .attachment-pushed {
     margin-left: 110px;
   }
+
   .attachment-heading {
     margin: 0;
   }
+
   .attachment-text {
-    color: #555;
+    color: $gray-700;
   }
 }
 
-.connectedSortable {
-  min-height: 100px;
+// Overlays for Card, InfoBox & SmallBox
+.card,
+.overlay-wrapper,
+.info-box,
+.small-box {
+  // Box overlay for LOADING STATE effect
+  > .overlay,
+  > .loading-img {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .overlay {
+    @include border-radius($border-radius);
+    align-items: center;
+    background: rgba($white, 0.7);
+    display: flex;
+    justify-content: center;
+    z-index: 50;
+
+    > .fa,
+    > .fas,
+    > .far,
+    > .fab,
+    > .glyphicon,
+    > .ion {
+      color: $gray-800;
+    }
+
+    &.dark {
+      background: rgba($black, 0.5);
+
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
+      > .ion {
+        color: $gray-400;
+      }
+    }
+  }
 }
 
-.ui-helper-hidden-accessible {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
+.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;
   overflow: hidden;
-  padding: 0;
   position: absolute;
-  width: 1px;
+  right: -2px;
+  top: -2px;
+  width: $ribbon-wrapper-size;
+  z-index: 10;
+
+  &.ribbon-lg {
+    height: $ribbon-lg-wrapper-size;
+    width: $ribbon-lg-wrapper-size;
+
+    .ribbon {
+      right: $ribbon-lg-right;
+      top: $ribbon-lg-top;
+      width: $ribbon-lg-width;
+    }
+  }
+
+  &.ribbon-xl {
+    height: $ribbon-xl-wrapper-size;
+    width: $ribbon-xl-wrapper-size;
+
+    .ribbon {
+      right: $ribbon-xl-right;
+      top: $ribbon-xl-top;
+      width: $ribbon-xl-width;
+    }
+  }
+
+  .ribbon {
+    box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
+    font-size: $ribbon-font-size;
+    line-height: $ribbon-line-height;
+    padding: $ribbon-padding;
+    position: relative;
+    right: $ribbon-right;
+    text-align: center;
+    text-shadow: 0 -1px 0 rgba($black, .4);
+    text-transform: uppercase;
+    top: $ribbon-top;
+    transform: rotate(45deg);
+    width: $ribbon-width;
+
+    &::before,
+    &::after {
+      border-left: $ribbon-border-size solid transparent;
+      border-right: $ribbon-border-size solid transparent;
+      border-top: $ribbon-border-size solid #9e9e9e;
+      bottom: -$ribbon-border-size;
+      content: '';
+      position: absolute;
+    }
+
+    &::before {
+      left: 0;
+    }
+
+    &::after {
+      right: 0;
+    }
+  }
 }
 
-.sort-highlight {
-  background: #f4f4f4;
-  border: 1px dashed #ddd;
-  margin-bottom: 10px;
+// Scroll To Top
+.back-to-top {
+  bottom: 1.25rem;
+  position: fixed;
+  right: 1.25rem;
+  z-index: $zindex-control-sidebar + 1;
+
+  &:focus {
+    box-shadow: none;
+  }
 }
 
-// Charts
-.chart {
-  position: relative;
-  overflow: hidden;
+// Pre
+pre {
+  padding: .75rem;
 }
 
-.flex-1 {
-  flex: 1;
+// Blockquotes styles
+blockquote {
+  background: $white;
+  border-left: .7rem solid $primary;
+  margin: 1.5em .7rem;
+  padding: 0.5em .7rem;
+
+  .box & {
+    background: $gray-200;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $primary;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+
+  @each $color, $value in $theme-colors {
+    &.quote-#{$color} {
+      border-color: $value;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $value;
+      }
+    }
+  }
+
+  @each $color, $value in $colors {
+    &.quote-#{$color} {
+      border-color: $value;
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        color: $value;
+      }
+    }
+  }
+}
+
+
+// Tab Custom Content
+
+.tab-custom-content {
+  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
+  margin-top: .5rem;
+  padding-top: .5rem;
+}
+
+.nav + .tab-custom-content {
+  border-top: none;
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  margin-top: 0;
+  margin-bottom: .5rem;
+  padding-bottom: .5rem;
+}
+
+
+// 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;
 }

build/scss/_mixins.scss

@@ -1,306 +1,13 @@
-// AdminLTE mixins
-// ===============
+//
+// General: Mixins
+//
 
-// Changes the color and the hovering properties of the navbar
-@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
-  background-color: $color;
-  // Navbar links
-  .nav > li > a {
-    color: $font-color;
-  }
-
-  .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 {
-      color: $hover-color;
-      background: $hover-bg;
-    }
-  }
-}
-
-// Logo color variation
-@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
-  background-color: $bg-color;
-  color: $color;
-  border-bottom: $border-bottom-width solid $border-bottom-color;
-
-  &:hover {
-    background-color: darken($bg-color, 1%);
-  }
-}
-
-// Box solid color variantion creator
-@mixin box-solid-variant($color, $text-color: #fff) {
-  border: 1px solid $color;
-  > .card-header {
-    color: $text-color;
-    background: $color;
-    background-color: $color;
-    a,
-    .btn {
-      color: $text-color;
-    }
-  }
-}
-
-// 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;
-    }
-  }
-}
-
-@mixin translate($x, $y) {
-  -webkit-transform: translate($x, $y);
-  -ms-transform: translate($x, $y); // IE9 only
-  transform: translate($x, $y);
-}
-
-// Different radius each side
-@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
-  border-radius: $top-left $top-right $bottom-left $bottom-right;
-}
-
-@mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
-  #{$property}: calc(#{$expression});
-}
-
-@mixin rotate($value) {
-  -ms-transform: rotate($value);
-  transform: rotate($value);
-}
-
-@mixin animation($animation) {
-  animation: $animation;
-}
-
-// Gradient background
-@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
-  background: $color;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
-  background: -ms-linear-gradient(bottom, $start, $stop);
-  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
-  background: -o-linear-gradient($stop, $start);
-}
-
-// Skins Mixins
-
-// Dark Sidebar Mixin
-@mixin skin-dark-sidebar($link-hover-border-color) {
-  // Sidebar background color
-  background-color: $sidebar-dark-bg;
-
-  // User Panel (resides in the sidebar)
-  .user-panel {
-    a:hover {
-      color: $sidebar-dark-hover-color;
-    }
-
-    .status {
-      color: $sidebar-dark-color;
-      background: $sidebar-dark-hover-bg;
-      &:hover,
-      &:focus,
-      &:active {
-        color: $sidebar-dark-hover-color;
-        background: darken($sidebar-dark-hover-bg, 3%);
-      }
-    }
-
-    .dropdown-menu {
-      border-color: darken($sidebar-dark-hover-bg, 5%);
-      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
-    }
-
-    .dropdown-item {
-      color: $body-color;
-    }
-  }
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active,
-      &:focus {
-        color: $sidebar-dark-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      color: $sidebar-dark-hover-color;
-      background-color: $sidebar-dark-hover-bg;
-    }
-
-    > .nav-link.active {
-      color: $sidebar-dark-hover-color;
-      background-color: $link-hover-border-color;
-      @if $enable-shadows {
-        @extend .elevation-1;
-      }
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background: $sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: lighten($sidebar-dark-color, 5%);
-    background: inherit; //darken($sidebar-dark-bg, 3%);
-  }
-
-  // All links within the sidebar menu
-  .sidebar a {
-    color: $sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $sidebar-dark-submenu-color;
-
-        &:hover {
-          color: $sidebar-dark-submenu-hover-color;
-          background-color: $sidebar-dark-submenu-hover-bg
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover {
-          color: $sidebar-dark-submenu-active-color;
-          background-color: $sidebar-dark-submenu-active-bg;
-        }
-      }
-    }
-  }
-}
-
-// Light Sidebar Mixin
-@mixin skin-light-sidebar($link-hover-border-color) {
-  // Sidebar background color
-  background-color: $sidebar-light-bg;
-
-  // User Panel (resides in the sidebar)
-  .user-panel {
-    a:hover {
-      color: $sidebar-light-hover-color;
-    }
-
-    .status {
-      color: $sidebar-light-color;
-      background: $sidebar-light-hover-bg;
-      &:hover,
-      &:focus,
-      &:active {
-        color: $sidebar-light-hover-color;
-        background: darken($sidebar-light-hover-bg, 3%);
-      }
-    }
-
-    .dropdown-menu {
-      border-color: darken($sidebar-light-hover-bg, 5%);
-      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
-    }
-
-    .dropdown-item {
-      color: $body-color;
-    }
-  }
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active,
-      &:focus {
-        color: $sidebar-light-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      color: $sidebar-light-hover-color;
-      background-color: $sidebar-light-hover-bg;
-    }
-
-    > .nav-link.active {
-      color: $sidebar-light-active-color;
-      background-color: $link-hover-border-color;
-      @if $enable-shadows {
-        @extend .elevation-1;
-      }
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background: $sidebar-light-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: darken($sidebar-light-color, 5%);
-    background: inherit;
-  }
-
-  // All links within the sidebar menu
-  .sidebar a {
-    color: $sidebar-light-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $sidebar-light-submenu-color;
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover {
-          color: $sidebar-light-submenu-active-color;
-          background-color: $sidebar-light-submenu-active-bg;
-        }
-      }
-
-      > .nav-link:hover {
-        background-color: $sidebar-light-submenu-hover-bg;
-      }
-    }
-  }
-}
+@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

@@ -0,0 +1,40 @@
+//
+// Component: Modals
+//
+
+// Overlay
+.modal-dialog {
+  .overlay {
+    background-color: $black;
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: .7;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: ($zindex-modal + 2);
+  }
+}
+
+
+// BG Color Variations Fixes
+.modal-content {
+  &.bg-warning {
+    .modal-header,
+    .modal-footer {
+      border-color: $gray-800;
+    }
+  }
+
+  &.bg-primary,
+  &.bg-secondary,
+  &.bg-info,
+  &.bg-danger,
+  &.bg-success, {
+    .close {
+      color: $white;
+      text-shadow: 0 1px 0 #000;
+    }
+  }
+}

build/scss/_navs.scss

@@ -1,13 +1,100 @@
-/*
- * Component: Nav
- * --------------
- */
+//
+// Component: Nav
+//
+
 .nav-pills {
   .nav-link {
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color("primary")
+      color: theme-color('primary');
+    }
+  }
+
+  .nav-item {
+    &.dropdown.show {
+      .nav-link:hover {
+        color: $dropdown-link-active-color;
+      }
     }
   }
 }
+
+// Vertical Tabs
+.nav-tabs.flex-column {
+  border-bottom: 0;
+  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 transparent $gray-200 $gray-200;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    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 transparent;
+      }
+    }
+
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      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;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @if $color != dark and $color != light {
+    .navbar-#{$color} {
+      background-color: $value;
+    }
+  }
+}
+
+@each $color, $value in $colors {
+  .navbar-#{$color} {
+    background-color: $value;
+  }
+}

build/scss/_print.scss

@@ -1,7 +1,7 @@
-/*
- * Misc: print
- * -----------
- */
+//
+// Misc: Print
+//
+
 @media print {
   //Add to elements that you do not want to show when printing
   .no-print {
@@ -18,9 +18,9 @@
   //This is the only element that should appear, so let's remove the margins
   .content-wrapper,
   .main-footer {
+    @include translate(0, 0);
     margin-left: 0 !important;
     min-height: 0 !important;
-    @include translate(0, 0);
   }
 
   .layout-fixed .content-wrapper {
@@ -29,10 +29,10 @@
 
   //Invoice printing
   .invoice {
-    width: 100%;
     border: 0;
     margin: 0;
     padding: 0;
+    width: 100%;
   }
 
   .invoice-col {
@@ -43,6 +43,7 @@
   //Make sure table content displays properly
   .table-responsive {
     overflow: auto;
+
     > .table tr th,
     > .table tr td {
       white-space: normal !important;

build/scss/_products.scss

@@ -1,44 +1,53 @@
-/*
- * Component: Products List
- * ------------------------
- */
+//
+// Component: Products
+//
+
 .products-list {
   list-style: none;
   margin: 0;
   padding: 0;
+
   > .item {
+    @include clearfix;
+
     @if $enable-rounded {
       @include border-radius($border-radius);
     }
-    @include clearfix();
-    padding: 10px 0;
+
     background: $white;
+    padding: 10px 0;
   }
+
   .product-img {
     float: left;
+
     img {
-      width: 50px;
       height: 50px;
+      width: 50px;
     }
   }
+
   .product-info {
     margin-left: 60px;
   }
+
   .product-title {
     font-weight: 600;
   }
+
   .product-description {
-    display: block;
     color: $gray-600;
+    display: block;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
 .product-list-in-card > .item {
   @include border-radius(0);
   border-bottom: 1px solid $card-border-color;
+
   &:last-of-type {
     border-bottom-width: 0;
   }

build/scss/_progress-bars.scss

@@ -1,16 +1,46 @@
-/*
- * Component: Progress Bar
- * -----------------------
- */
+//
+// Component: Progress Bar
+//
 
 //General CSS
 .progress {
   @include box-shadow(none);
   @include border-radius($progress-bar-border-radius);
+
+  // Vertical bars
+  &.vertical {
+    display: inline-block;
+    height: 200px;
+    margin-right: 10px;
+    position: relative;
+    width: 30px;
+
+    > .progress-bar {
+      bottom: 0;
+      position: absolute;
+      width: 100%;
+    }
+
+    //Sizes
+    &.sm,
+    &.progress-sm {
+      width: 20px;
+    }
+
+    &.xs,
+    &.progress-xs {
+      width: 10px;
+    }
+
+    &.xxs,
+    &.progress-xxs {
+      width: 3px;
+    }
+  }
 }
 
 .progress-group {
-  @extend .mb-2;
+  margin-bottom: map-get($spacers, 2);
 }
 
 // size variation
@@ -26,38 +56,11 @@
   height: 3px;
 }
 
-// Vertical bars
-.progress.vertical {
-  position: relative;
-  width: 30px;
-  height: 200px;
-  display: inline-block;
-  margin-right: 10px;
-  > .progress-bar {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-  }
-
-  //Sizes
-  &.sm,
-  &.progress-sm {
-    width: 20px;
-  }
-
-  &.xs,
-  &.progress-xs {
-    width: 10px;
-  }
-  &.xxs,
-  &.progress-xxs {
-    width: 3px;
-  }
-}
-
 // Remove margins from progress bars when put in a table
 .table {
-  tr > td .progress {
-    margin: 0;
+  tr > td {
+    .progress {
+      margin: 0;
+    }
   }
 }

build/scss/_select2.scss

@@ -1,117 +0,0 @@
-/*
- * Plugin: Select2
- * ---------------
- */
-
-//Signle select
-.select2-container--default,
-.select2-selection {
-  &.select2-container--focus,
-  &:focus,
-  &:active {
-    outline: none;
-  }
-  .select2-selection--single {
-    border: 1px solid $gray-x-light;
-    //border-radius: $input-radius;
-    padding: 6px 12px;
-    height: 34px;
-  }
-}
-
-.select2-container--default.select2-container--open {
-  border-color: theme-color("primary");
-}
-
-.select2-dropdown {
-  border: 1px solid $gray-x-light;
-  //border-radius: $input-radius;
-}
-
-.select2-container--default .select2-results__option--highlighted[aria-selected] {
-  background-color: theme-color("primary");
-  color: white;
-}
-
-.select2-results__option {
-  padding: 6px 12px;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.select2-container .select2-selection--single .select2-selection__rendered {
-  padding-left: 0;
-  padding-right: 0;
-  height: auto;
-  margin-top: -4px;
-}
-
-.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
-  padding-right: 6px;
-  padding-left: 20px;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow {
-  height: 28px;
-  right: 3px;
-}
-
-.select2-container--default .select2-selection--single .select2-selection__arrow b {
-  margin-top: 0;
-}
-
-.select2-dropdown,
-.select2-search--inline {
-  .select2-search__field {
-    border: 1px solid $gray-x-light;
-    &:focus {
-      outline: none;
-      border: 1px solid theme-color("primary");
-    }
-  }
-}
-
-.select2-container--default .select2-results__option[aria-disabled=true] {
-  color: #999;
-}
-
-.select2-container--default .select2-results__option[aria-selected=true] {
-  background-color: #ddd;
-  &,
-  &:hover {
-    color: #444;
-  }
-}
-
-//Multiple select
-.select2-container--default {
-  .select2-selection--multiple {
-    border: 1px solid $gray-x-light;
-    //border-radius: $input-radius;
-    &:focus {
-      border-color: theme-color("primary");
-    }
-  }
-  &.select2-container--focus .select2-selection--multiple {
-    border-color: $gray-x-light;
-  }
-}
-
-.select2-container--default .select2-selection--multiple .select2-selection__choice {
-  background-color: theme-color("primary");
-  border-color: darken(theme-color("primary"), 5%);
-  padding: 1px 10px;
-  color: $white;
-}
-
-.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
-  margin-right: 5px;
-  color: rgba(255, 255, 255, 0.7);
-  &:hover {
-    color: $white;
-  }
-}
-
-.select2-container .select2-selection--single .select2-selection__rendered {
-  padding-right: 10px;
-}

build/scss/_sidebar-mini.scss

@@ -1,104 +1,122 @@
-/*
- * Component: Sidebar Mini
- */
+//
+// Component: Sidebar Mini
+//
+
+// Logo style
+.logo-xs,
+.logo-xl {
+  opacity: 1;
+  position: absolute;
+  visibility: visible;
+
+  &.brand-image-xs {
+    left: 18px;
+    top: 12px;
+  }
+
+  &.brand-image-xl {
+    left: 12px;
+    top: 6px;
+  }
+}
+
+.logo-xs {
+  opacity: 0;
+  visibility: hidden;
+
+  &.brand-image-xl {
+    left: 16px;
+    top: 8px;
+  }
+}
+
+.brand-link {
+  &.logo-switch {
+    &::before {
+      content: '\00a0';
+    }
+  }
+}
 
 // Add sidebar-mini class to the body tag to activate this feature
 .sidebar-mini {
-  // Sidebar mini should work only on large devices
   @include media-breakpoint-up(lg) {
-    // 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;
+    @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 media-breakpoint-down(sm) {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar {
+    box-shadow: none !important;
+  }
+}
+
+.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;
     }
 
-    // When the sidebar is collapsed...
-    &.sidebar-collapse {
-      .d-hidden-mini {
-        display: none;
-      }
+    .brand-link {
+      width: $sidebar-mini-width !important;
+    }
 
-      // Apply the new margins to the main content and footer
-      .content-wrapper,
-      .main-footer,
-      .main-header {
-        margin-left: $sidebar-mini-width !important;
-      }
+    .user-panel .image {
+      float: none !important;
+    }
 
-      // Make the sidebar headers
-      .nav-sidebar .nav-header {
-        display: none;
-      }
+    .logo-xs {
+      opacity: 1;
+      visibility: visible;
+    }
 
-      .sidebar .user-panel > .info,
-      .nav-sidebar .nav-link p,
-      .brand-text {
-        opacity: 0;
-        margin-left: -10px;
-      }
+    .logo-xl {
+      opacity: 0;
+      visibility: hidden;
+    }
 
-      // Modify the sidebar to shrink instead of disappearing
-      .main-sidebar {
-        &,
-        &:before {
-          // Don't go away! Just shrink
-          margin-left: 0;
-          width: $sidebar-mini-width;
-        }
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding-left: 0;
+    }
 
-        .user-panel {
-          .image {
-            float: none;
-          }
-        }
+    .brand-text,
+    .user-panel > .info,
+    .nav-sidebar .nav-link p {
+      margin-left: -10px;
+      opacity: 0;
+      visibility: hidden;
+      width: 0;
+    }
 
-        &:hover {
-          width: $sidebar-width;
-          .user-panel {
-            text-align: left;
-            .image {
-              float: left;
-            }
-          }
-
-          .user-panel > .info,
-          .nav-sidebar .nav-link p,
-          .brand-text {
-            opacity: 1;
-            margin-left: 0;
-            display: inline-block;
-          }
-
-          .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;
-      }
+    .nav-sidebar > .nav-item .nav-icon {
+      margin-right: 0;
     }
   }
 }
 
 .nav-sidebar {
   position: relative;
+
   &:hover {
     overflow: visible;
   }
@@ -112,16 +130,19 @@
 
 .nav-sidebar .nav-item > .nav-link {
   position: relative;
+
   > .float-right {
+    margin-top: -7px;
     position: absolute;
     right: 10px;
     top: 50%;
-    margin-top: -7px;
   }
 }
 
 .sidebar .nav-link p,
 .main-sidebar .brand-text,
+.main-sidebar .logo-xs,
+.main-sidebar .logo-xl,
 .sidebar .user-panel .info {
-  @include transition(margin-left $transition-speed linear, opacity .5s ease)
+  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
 }

build/scss/_small-box.scss

@@ -1,16 +1,14 @@
-/*
- * Component: Small Box
- * --------------------
- */
+//
+// Component: Small Box
+//
 
 .small-box {
   @include border-radius($border-radius);
   @include box-shadow($card-shadow);
-  @extend .mb-3;
 
-  position: relative;
   display: block;
   margin-bottom: 20px;
+  position: relative;
 
   // content wrapper
   > .inner {
@@ -18,61 +16,122 @@
   }
 
   > .small-box-footer {
+    background: rgba($black, 0.1);
+    color: rgba($white, 0.8);
+    display: block;
+    padding: 3px 0;
     position: relative;
     text-align: center;
-    padding: 3px 0;
-    color: $white;
-    color: rgba(255, 255, 255, 0.8);
-    display: block;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.1);
     text-decoration: none;
+    z-index: 10;
+
     &:hover {
+      background: rgba($black, 0.15);
       color: $white;
-      background: rgba(0, 0, 0, 0.15);
     }
   }
 
   h3 {
-    font-size: 38px;
+    @include font-size(2.2rem);
     font-weight: bold;
     margin: 0 0 10px 0;
-    white-space: nowrap;
     padding: 0;
+    white-space: nowrap;
+  }
 
+  @include media-breakpoint-up(lg) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      h3 {
+        @include font-size(1.6rem);
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      h3 {
+        @include font-size(1.6rem);
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      h3 {
+        @include font-size(2.2rem);
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      h3 {
+        @include font-size(2.2rem);
+      }
+    }
   }
 
   p {
-    font-size: 15px;
+    font-size: 1rem;
+
     > small {
+      color: $gray-100;
       display: block;
-      color: #f9f9f9;
-      font-size: 13px;
+      font-size: 0.9rem;
       margin-top: 5px;
     }
   }
 
-  h3, p {
+  h3,
+  p {
     z-index: 5;
   }
 
   // the icon
   .icon {
-    transition: all $transition-speed linear;
-    position: absolute;
-    top: -10px;
-    right: 10px;
+    color: rgba($black, 0.15);
     z-index: 0;
-    font-size: 90px;
-    color: rgba(0, 0, 0, 0.15);
+
+    > i {
+      font-size: 90px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      transition: all $transition-speed linear;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.glyphicon,
+      &.ion {
+        font-size: 70px;
+        top: 20px;
+      }
+    }
+
   }
 
   // Small box hover state
   &:hover {
     text-decoration: none;
+
     // Animate icons on small box hover
-    .icon {
+    .icon > i {
       font-size: 95px;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.glyphicon,
+      &.ion {
+        font-size: 75px;
+      }
     }
   }
 }
@@ -81,9 +140,11 @@
   // No need for icons on very small devices
   .small-box {
     text-align: center;
+
     .icon {
       display: none;
     }
+
     p {
       font-size: 12px;
     }

build/scss/_social-widgets.scss

@@ -1,81 +1,93 @@
-/*
- * Component: Social Widgets
- * -------------------------
- */
+//
+// Component: Social Widgets
+//
+
 //General widget style
 .card-widget {
-  border: none;
+  border: 0;
   position: relative;
 }
 
 //User Widget Style 1
 .widget-user {
+
   //User name container
   .widget-user-header {
-    padding: 1rem;
-    height: 120px;
     @if $enable-rounded {
       @include border-top-radius($border-radius);
     }
+
+    height: 135px;
+    padding: 1rem;
+    text-align: center;
   }
+
   //User name
   .widget-user-username {
-    margin-top: 0;
-    margin-bottom: 5px;
     font-size: 25px;
     font-weight: 300;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    margin-bottom: 0;
+    margin-top: 0;
+    text-shadow: 0 1px 1px rgba($black, 0.2);
   }
+
   //User single line description
   .widget-user-desc {
     margin-top: 0;
   }
+
   //User image container
   .widget-user-image {
-    position: absolute;
-    top: 65px;
     left: 50%;
     margin-left: -45px;
+    position: absolute;
+    top: 80px;
+
     > img {
-      width: 90px;
-      height: auto;
       border: 3px solid $white;
+      height: auto;
+      width: 90px;
     }
   }
 
   .card-footer {
-    padding-top: 40px;
+    padding-top: 50px;
   }
 }
 
 //User Widget Style 2
 .widget-user-2 {
+
   //User name container
   .widget-user-header {
-    padding: 1rem;
     @include border-top-radius($border-radius);
+    padding: 1rem;
   }
+
   //User name
   .widget-user-username {
-    margin-top: 5px;
-    margin-bottom: 5px;
     font-size: 25px;
     font-weight: 300;
+    margin-bottom: 5px;
+    margin-top: 5px;
   }
+
   //User single line description
   .widget-user-desc {
     margin-top: 0;
   }
+
   .widget-user-username,
   .widget-user-desc {
     margin-left: 75px;
   }
+
   //User image container
   .widget-user-image {
     > img {
-      width: 65px;
-      height: auto;
       float: left;
+      height: auto;
+      width: 65px;
     }
   }
 }

build/scss/_table.scss

@@ -1,42 +1,74 @@
-/*
- * Component: Table
- * ----------------
- */
+//
+// Component: Table
+//
 
-.table.no-border {
-  &,
-  td,
-  th {
-    border: 0;
+.table {
+  &:not(.table-dark) {
+    color: inherit;
   }
-}
 
-// .text-center in tables
-.table.text-center {
-  &, td, th {
-    text-align: center;
-  }
-}
-
-.table-valign-middle {
-  thead > tr > th,
-  thead > tr > td,
-  tbody > tr > th,
-  tbody > tr > td {
-    vertical-align: middle;
-  }
-}
-
-.card-body.p-0 .table {
-  thead > tr > th,
-  thead > tr > td,
-  tbody > tr > th,
-  tbody > tr > td {
-    &:first-of-type {
-      @extend .pl-4;
+  // fixed table head
+  &.table-head-fixed {
+    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;
+      position: sticky;
+      top: 0;
+      z-index: 10;
     }
-    &:last-of-type {
-      @extend .pr-4;
+
+    &.table-dark {
+      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;
+        }
+      }
+    }
+  }
+
+  // no border
+  &.no-border {
+    &,
+    td,
+    th {
+      border: 0;
+    }
+  }
+
+  // .text-center in tables
+  &.text-center {
+    &,
+    td,
+    th {
+      text-align: center;
+    }
+  }
+
+  &.table-valign-middle {
+    thead > tr > th,
+    thead > tr > td,
+    tbody > tr > th,
+    tbody > tr > td {
+      vertical-align: middle;
+    }
+  }
+
+  .card-body.p-0 & {
+    thead > tr > th,
+    thead > tr > td,
+    tbody > tr > th,
+    tbody > tr > td {
+      &:first-of-type {
+        padding-left: map-get($spacers, 4);
+      }
+
+      &:last-of-type {
+        padding-right: map-get($spacers, 4);
+      }
     }
   }
 }

build/scss/_text.scss

@@ -1,21 +1,37 @@
+//
+// Component: Text
+//
+
+// text modification
 .text-bold {
   &, &.table td, &.table th {
     font-weight: 700;
   }
 }
 
-.text-sm {
-  font-size: $font-size-sm;
+.text-xs {
+  font-size: $font-size-xs !important;
 }
 
-.text-xs {
-  font-size: $font-size-base;
+.text-sm {
+  font-size: $font-size-sm !important;
+}
+
+.text-md {
+  font-size: $font-size-base !important;
 }
 
 .text-lg {
-  font-size: $font-size-lg;
+  font-size: $font-size-lg !important;
 }
 
 .text-xl {
-  font-size: $font-size-xl;
+  font-size: $font-size-xl !important;
+}
+
+// text color variations
+@each $name, $color in $colors {
+  .text-#{$name} {
+    color: #{$color};
+  }
 }

build/scss/_timeline.scss

@@ -1,108 +1,126 @@
-/*
- * Component: Timeline
- * -------------------
- */
+//
+// Component: Timeline
+//
 
 .timeline {
-  position: relative;
-  margin: 0 0 30px 0;
+  margin: 0 0 45px;
   padding: 0;
-  list-style: none;
-
+  position: relative;
   // The line
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
+  &::before {
+    @include border-radius($border-radius);
+    background: $gray-300;
     bottom: 0;
-    width: 4px;
-    background: #ddd;
+    content: '';
     left: 31px;
     margin: 0;
-    @include border-radius($border-radius);
+    position: absolute;
+    top: 0;
+    width: 4px;
   }
+  // Element
+  > div {
+    &::before,
+    &::after {
+      content: "";
+      display: table;
+    }
 
-  > li {
-    position: relative;
-    margin-right: 10px;
     margin-bottom: 15px;
-    @include clearfix();
-
+    margin-right: 10px;
+    position: relative;
     // The content
     > .timeline-item {
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
-      margin-top: 0;
       background: $white;
-      color: #444;
+      color: $gray-700;
       margin-left: 60px;
       margin-right: 15px;
+      margin-top: 0;
       padding: 0;
       position: relative;
-
       // The time and header
       > .time {
         color: #999;
         float: right;
-        padding: 10px;
         font-size: 12px;
-      }
-      > .timeline-header {
-        margin: 0;
-        color: #555;
-        border-bottom: 1px solid $card-border-color;
         padding: 10px;
+      }
+      // Header
+      > .timeline-header {
+        border-bottom: 1px solid $card-border-color;
+        color: $gray-700;
         font-size: 16px;
         line-height: 1.1;
+        margin: 0;
+        padding: 10px;
+        // Link in header
         > a {
           font-weight: 600;
         }
       }
       // Item body and footer
-      > .timeline-body, > .timeline-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,
     > .ion {
-      width: 30px;
-      height: 30px;
-      font-size: 15px;
-      line-height: 30px;
-      position: absolute;
       background: $gray-500;
       border-radius: 50%;
-      text-align: center;
+      font-size: 15px;
+      height: 30px;
       left: 18px;
+      line-height: 30px;
+      position: absolute;
+      text-align: center;
       top: 0;
+      width: 30px;
     }
   }
-
   // Time label
   > .time-label {
     > span {
+      @include border-radius(4px);
+      background-color: $white;
+      display: inline-block;
       font-weight: 600;
       padding: 5px;
-      display: inline-block;
-      background-color: $white;
-
-      @include border-radius(4px);
     }
   }
 }
 
 .timeline-inverse {
-  > li {
+  > div {
     > .timeline-item {
-      background: $gray-100;
-      border: 1px solid #ddd;
       @include box-shadow(none);
+      background: $gray-100;
+      border: 1px solid $gray-300;
+
       > .timeline-header {
-        border-bottom-color: #ddd;
+        border-bottom-color: $gray-300;
       }
     }
   }

build/scss/_toasts.scss

@@ -0,0 +1,56 @@
+//
+// 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;
+  }
+}
+
+.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

@@ -1,19 +1,22 @@
-/*
- * Component: Users List
- * ---------------------
- */
+//
+// Component: Users List
+//
+
 .users-list {
-  @extend .list-unstyled;
+  @include list-unstyled;
+
   > li {
-    width: 25%;
     float: left;
     padding: 10px;
     text-align: center;
+    width: 25%;
+
     img {
       @include border-radius(50%);
-      max-width: 100%;
       height: auto;
+      max-width: 100%;
     }
+
     > a:hover {
       &,
       .users-list-name {
@@ -29,14 +32,14 @@
 }
 
 .users-list-name {
+  color: $gray-700;
   font-size: $font-size-sm;
-  color: #444;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .users-list-date {
-  color: #999;
+  color: darken($gray-500, 20%);
   font-size: 12px;
 }

build/scss/_variables.scss

@@ -1,20 +1,31 @@
-// AdminLTE 3 Variables.less
-// =========================
+//
+// Core: Variables
+//
 
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
-$navy: #001F3F !default;
-$teal: #39CCCC !default;
-$olive: #3D9970 !default;
-$lime: #01FF70 !default;
-$orange: #FF851B !default;
-$fuchsia: #F012BE !default;
+$lightblue: #3c8dbc !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$orange: #ff851b !default;
+$fuchsia: #f012be !default;
 $purple: #605ca8 !default;
-$maroon: #D81B60 !default;
+$maroon: #d81b60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
+$colors: map-merge((
+    'lightblue': $lightblue,
+    'navy': $navy,
+    'olive': $olive,
+    'lime': $lime,
+    'fuchsia': $fuchsia,
+    'maroon': $maroon,
+), $colors);
+
 // LAYOUT
 // --------------------------------------------------------
 
@@ -38,13 +49,29 @@ $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;
+$main-header-bottom-border-color: $gray-300 !default;
+$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
 $main-header-link-padding-y: $navbar-padding-y !default;
 $main-header-link-padding-x: $navbar-padding-x !default;
 $main-header-brand-padding-y: $navbar-brand-padding-y !default;
 $main-header-brand-padding-x: $navbar-padding-x !default;
-$main-header-height: (($font-size-root * $line-height-base) + ($main-header-link-padding-y * 2)) !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;
@@ -63,12 +90,16 @@ $main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
 
 // MAIN FOOTER
 // --------------------------------------------------------
-$main-footer-padding: 15px !default;
+$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: 30px; //(($font-size-root * $line-height-base) + ($main-footer-padding * 2)) + $main-footer-border-top-width !default;
-$main-footer-bg: $white;
+$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-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
 // --------------------------------------------------------
@@ -89,10 +120,10 @@ $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;
@@ -104,8 +135,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
 // --------------------------------------------------------
@@ -113,10 +144,15 @@ $control-sidebar-width: $sidebar-width !default;
 
 // Cards
 // --------------------------------------------------------
-$card-border-color: #f4f4f4 !default;
+$card-border-color: $gray-100 !default;
+$card-dark-border-color: lighten($gray-900, 10%) !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
-$card-title-font-size: $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
 // --------------------------------------------------------
@@ -137,9 +173,12 @@ $attachment-border-radius: 3px !default;
 
 // Z-INDEX
 // --------------------------------------------------------
-$zindex-main-header: 1000 !default;
-$zindex-main-sidebar: 1100 !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
 // --------------------------------------------------------
@@ -150,4 +189,49 @@ $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
+// --------------------------------------------------------
+$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, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
+    2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
+    3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
+    4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
+    5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.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: 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: 0px !default;
+$ribbon-xl-wrapper-size: 180px !default;
+$ribbon-xl-width: 240px !default;
+$ribbon-xl-top: 47px !default;
+$ribbon-xl-right: 4px !default;

build/scss/mixins/_accent.scss

@@ -0,0 +1,94 @@
+//
+// Mixins: Accent
+//
+
+// Accent Variant
+@mixin accent-variant($name, $color) {
+  .accent-#{$name} {
+    $link-color: $color;
+    $link-hover-color: darken($color, 15%);
+    $pagination-active-bg: $color;
+    $pagination-active-border-color: $color;
+
+    .btn-link,
+    a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link) {
+      color: $link-color;
+
+      @include hover {
+        color: $link-hover-color;
+      }
+    }
+
+    .dropdown-item {
+      &:active,
+      &.active {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+
+    .custom-control-input:checked ~ .custom-control-label {
+      &::before {
+        background: $color;
+        border-color: darken($color, 20%);
+      }
+
+      &::after {
+        $newColor: color-yiq($color);
+        background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, '#', '%23'), str-replace(#{$newColor}, '#', '%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;
+          }
+        }
+      }
+    }
+  }
+}
+

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} {
+    @include bg-gradient-variant('&', $color);
+    color: color-yiq($color);
+
+    &.btn {
+      &.disabled,
+      &:disabled,
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      .show > &.dropdown-toggle {
+        background-image: none !important;
+      }
+
+      &:hover {
+        @include bg-gradient-variant('&', darken($color, 7.5%));
+        border-color: darken($color, 10%);
+        color: darken(color-yiq($color), 7.5%);
+      }
+
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
+      &:active,
+      &.active {
+        @include bg-gradient-variant('&', darken($color, 10%));
+        border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
+      }
+    }
+  }
+}

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), 0.8);
+
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .card.bg-#{$name},
+  .card.bg-gradient-#{$name} {
+    .bootstrap-datetimepicker-widget {
+      .table td,
+      .table th {
+        border: none;
+      }
+
+      table thead tr:first-child th:hover,
+      table td.day:hover,
+      table td.hour:hover,
+      table td.minute:hover,
+      table td.second:hover {
+        background: darken($color, 8%);
+        color: color-yiq($color);
+      }
+
+      table td.today::before {
+        border-bottom-color: color-yiq($color);
+      }
+
+      table td.active,
+      table td.active:hover {
+        background: lighten($color, 10%);
+        color: color-yiq($color);
+      }
+    }
+  }
+}
+

build/scss/mixins/_custom-forms.scss

@@ -0,0 +1,81 @@
+//
+// 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};
+      border-color: darken($color, 20%);
+    }
+
+    & .custom-control-input:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
+    & .custom-control-input ~ .custom-control-label::after {
+      background: darken($color, 25%);
+    }
+  }
+
+  &.custom-switch-on-#{$name} {
+    & .custom-control-input:checked ~ .custom-control-label::before {
+      background: #{$color};
+      border-color: darken($color, 20%);
+    }
+
+    & .custom-control-input:checked:focus ~ .custom-control-label::before {
+      box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+    }
+
+    & .custom-control-input:checked ~ .custom-control-label::after {
+      background: lighten($color, 30%);
+    }
+  }
+}
+
+// Custom Range Variant
+@mixin custom-range-variant($name, $color) {
+  &.custom-range-#{$name} {
+    &:focus {
+      outline: none;
+
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+
+      &::-moz-range-thumb     {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+
+      &::-ms-thumb            {
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
+      }
+    }
+
+    &::-webkit-slider-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-moz-range-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-ms-thumb {
+      background-color: $color;
+
+      &:active {
+        background-color: lighten($color, 35%);
+      }
+    }
+  }
+}

build/scss/mixins/_direct-chat.scss

@@ -0,0 +1,17 @@
+//
+// Mixins: Direct Chat
+//
+
+// 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;
+    }
+  }
+}

build/scss/mixins/_miscellaneous.scss

@@ -0,0 +1,35 @@
+//
+// 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: #FFF) {
+  background: $color;
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
+  background: -ms-linear-gradient(bottom, $start, $stop);
+  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
+  background: -o-linear-gradient($stop, $start);
+}
+

build/scss/mixins/_navbar.scss

@@ -0,0 +1,34 @@
+//
+// Mixins: Navbar
+//
+
+// 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;
+    }
+  }
+}

build/scss/mixins/_sidebar.scss

@@ -0,0 +1,155 @@
+//
+// 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;
+      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;
+      }
+    }
+  }
+}

build/scss/mixins/_toasts.scss

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

build/scss/pages/_404_500_errors.scss

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

build/scss/pages/_e-commerce.scss

@@ -0,0 +1,45 @@
+//
+// Pages: E-commerce
+//
+
+// product image
+.product-image {
+  @include img-fluid;
+  width: 100%;
+}
+
+// product image thumbnails list
+.product-image-thumbs {
+  align-items: stretch;
+  display: flex;
+  margin-top: 2rem;
+}
+
+// product image thumbnail
+.product-image-thumb {
+  @include box-shadow($thumbnail-box-shadow);
+  @include border-radius($thumbnail-border-radius);
+
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 6.5rem + ($thumbnail-padding * 2);
+  padding: $thumbnail-padding * 2;
+
+  img {
+    @include img-fluid;
+    align-self: center;
+  }
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+// product share
+.product-share {
+  a {
+    margin-right: .5rem;
+  }
+}

build/scss/pages/_invoice.scss

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

build/scss/pages/_lockscreen.scss

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

build/scss/pages/_login_and_register.scss

@@ -0,0 +1,97 @@
+//
+// Pages: Login & Register
+//
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+
+  a {
+    color: $gray-700;
+  }
+}
+
+.login-page,
+.register-page {
+  align-items: center;
+  background: $gray-200;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    margin-top: .5rem;
+    width: 90%;
+  }
+}
+
+.login-card-body,
+.register-card-body {
+  background: $white;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+
+  .input-group {
+    .form-control {
+      border-right: 0;
+
+      &:focus {
+        box-shadow: none;
+
+        & ~ .input-group-append .input-group-text {
+          border-color: $input-focus-border-color;
+        }
+      }
+
+      &.is-valid {
+        &:focus {
+          box-shadow: none;
+        }
+
+        & ~ .input-group-append .input-group-text {
+          border-color: $success;
+        }
+      }
+
+      &.is-invalid {
+        &:focus {
+          box-shadow: none;
+        }
+
+        & ~ .input-group-append .input-group-text {
+          border-color: $danger;
+        }
+      }
+    }
+
+    .input-group-text {
+      background-color: transparent;
+      border-bottom-right-radius: $border-radius;
+      border-left: 0;
+      border-top-right-radius: $border-radius;
+      color: #777;
+      transition: $input-transition;
+    }
+  }
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}

build/scss/pages/_mailbox.scss

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

build/scss/pages/_profile.scss

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

build/scss/pages/_projects.scss

@@ -0,0 +1,26 @@
+//
+// Pages: Projects
+//
+
+.projects {
+  td {
+    vertical-align: middle;
+  }
+
+  .list-inline {
+    margin-bottom: 0;
+  }
+
+  // table avatar
+  img.table-avatar,
+  .table-avatar img {
+    border-radius: 50%;
+    display: inline;
+    width: 2.5rem;
+  }
+
+  // project state
+  .project-state {
+    text-align: center;
+  }
+}

build/scss/parts/_components.scss

@@ -0,0 +1,14 @@
+//
+// Part: Components
+//
+
+@import '../forms';
+@import '../progress-bars';
+@import '../cards';
+@import '../modals';
+@import '../toasts';
+@import '../buttons';
+@import '../callout';
+@import '../alerts';
+@import '../table';
+@import '../carousel';

build/scss/parts/_core.scss

@@ -0,0 +1,12 @@
+//
+// Part: Core
+//
+
+@import '../layout';
+@import '../main-header';
+@import '../brand';
+@import '../main-sidebar';
+@import '../sidebar-mini';
+@import '../control-sidebar';
+@import '../dropdown';
+@import '../navs';

build/scss/parts/_extra-components.scss

@@ -0,0 +1,11 @@
+//
+// Part: Extra Components
+//
+
+@import '../small-box';
+@import '../info-box';
+@import '../timeline';
+@import '../products';
+@import '../direct-chat';
+@import '../users-list';
+@import '../social-widgets';

build/scss/parts/_miscellaneous.scss

@@ -0,0 +1,9 @@
+//
+// Part: Miscellaneous
+//
+
+@import '../miscellaneous';
+@import '../print';
+@import '../text';
+@import '../elevation';
+@import '../colors';

build/scss/parts/_pages.scss

@@ -0,0 +1,12 @@
+//
+// Part: 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';

build/scss/parts/_plugins.scss

@@ -0,0 +1,16 @@
+//
+// Part: Plugins
+//
+
+@import '../plugins/mixins';
+@import '../plugins/fullcalendar';
+@import '../plugins/select2';
+@import '../plugins/bootstrap-slider';
+@import '../plugins/icheck-bootstrap';
+@import '../plugins/mapael';
+@import '../plugins/jqvmap';
+@import '../plugins/sweetalert2';
+@import '../plugins/toastr';
+@import '../plugins/pace';
+@import '../plugins/bootstrap-switch';
+@import '../plugins/miscellaneous';

build/scss/plugins/_bootstrap-slider.scss

@@ -0,0 +1,35 @@
+//
+// Plugin: Bootstrap Slider
+//
+
+// Tooltip fix
+.slider .tooltip.in {
+  opacity: $tooltip-opacity;
+}
+
+// Style override
+.slider {
+  &.slider-vertical {
+    height: 100%;
+  }
+  &.slider-horizontal {
+    width: 100%;
+  }
+}
+
+// Colors
+@each $name, $color in $theme-colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}
+
+@each $name, $color in $colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}

build/scss/plugins/_bootstrap-switch.scss

@@ -0,0 +1,175 @@
+/**
+  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
+  *
+  * @version v3.4 (MODDED)
+  * @homepage https://bttstrp.github.io/bootstrap-switch
+  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
+  * @license MIT
+  */
+
+$bootstrap-switch-border-radius: $btn-border-radius;
+$bootstrap-switch-handle-border-radius: .1rem;
+
+.bootstrap-switch {
+  border: $input-border-width solid $input-border-color;
+  border-radius: $bootstrap-switch-border-radius;
+  cursor: pointer;
+  direction: ltr;
+  display: inline-block;
+  line-height: .5rem;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  user-select: none;
+  vertical-align: middle;
+  z-index: 0;
+
+  .bootstrap-switch-container {
+    border-radius: $bootstrap-switch-border-radius;
+    display: inline-block;
+    top: 0;
+    transform: translate3d(0, 0, 0);
+
+  }
+
+  &:focus-within {
+    box-shadow: $input-btn-focus-box-shadow;
+  }
+
+  .bootstrap-switch-handle-on,
+  .bootstrap-switch-handle-off,
+  .bootstrap-switch-label {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: table-cell;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.2rem;
+    padding: .25rem .5rem;
+    vertical-align: middle;
+  }
+
+  .bootstrap-switch-handle-on,
+  .bootstrap-switch-handle-off {
+    text-align: center;
+    z-index: 1;
+
+    &.bootstrap-switch-default {
+      background: $gray-200;
+      color: color-yiq($gray-200);
+    }
+
+    @each $name, $color in $theme-colors {
+      &.bootstrap-switch-#{$name} {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+
+    @each $name, $color in $colors {
+      &.bootstrap-switch-#{$name} {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .bootstrap-switch-handle-on {
+    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
+    border-top-left-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  .bootstrap-switch-handle-off {
+    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
+    border-top-right-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    filter: alpha(opacity=0);
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    z-index: -1;
+  }
+
+  &.bootstrap-switch-mini {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: .875rem;
+      line-height: 1.5;
+      padding: .1rem .3rem;
+    }
+  }
+
+  &.bootstrap-switch-small {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: .875rem;
+      line-height: 1.5;
+      padding: .2rem .4rem;
+    }
+  }
+
+  &.bootstrap-switch-large {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: 1.25rem;
+      line-height: 1.3333333rem;
+      padding: .3rem .5rem;
+    }
+  }
+
+  &.bootstrap-switch-disabled,
+  &.bootstrap-switch-readonly,
+  &.bootstrap-switch-indeterminate {
+    cursor: default;
+
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      cursor: default;
+      filter: alpha(opacity=50);
+      opacity: .5;
+    }
+  }
+
+  &.bootstrap-switch-animate .bootstrap-switch-container {
+    transition: margin-left .5s;
+  }
+
+  &.bootstrap-switch-inverse {
+    .bootstrap-switch-handle-on {
+      border-radius: 0 $bootstrap-switch-handle-border-radius $bootstrap-switch-handle-border-radius 0;
+    }
+
+    .bootstrap-switch-handle-off {
+      border-radius: $bootstrap-switch-handle-border-radius 0 0 $bootstrap-switch-handle-border-radius;
+    }
+  }
+
+  // &.bootstrap-switch-focused {
+  //   border-color: $input-btn-focus-color;
+  //   box-shadow: $input-btn-focus-box-shadow;
+  //   outline: 0;
+  // }
+
+  &.bootstrap-switch-on .bootstrap-switch-label,
+  &.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
+    border-top-right-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  &.bootstrap-switch-off .bootstrap-switch-label,
+  &.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
+    border-top-left-radius: $bootstrap-switch-handle-border-radius;
+  }
+}

build/scss/plugins/_fullcalendar.scss

@@ -0,0 +1,131 @@
+//
+// Plugin: Full Calendar
+//
+
+// Buttons
+.fc-button {
+  background: $gray-100;
+  background-image: none;
+  border-bottom-color: #ddd;
+  border-color: #ddd;
+  color: $gray-700;
+
+  &:hover,
+  &:active,
+  &.hover {
+    background-color: #e9e9e9;
+  }
+}
+
+// Calendar title
+.fc-header-title h2 {
+  color: #666;
+  font-size: 15px;
+  line-height: 1.6em;
+  margin-left: 10px;
+}
+
+.fc-header-right {
+  padding-right: 10px;
+}
+
+.fc-header-left {
+  padding-left: 10px;
+}
+
+// Calendar table header cells
+.fc-widget-header {
+  background: #fafafa;
+}
+
+.fc-grid {
+  border: 0;
+  width: 100%;
+}
+
+.fc-widget-header:first-of-type,
+.fc-widget-content:first-of-type {
+  border-left: 0;
+  border-right: 0;
+}
+
+.fc-widget-header:last-of-type,
+.fc-widget-content:last-of-type {
+  border-right: 0;
+}
+
+.fc-toolbar,
+.fc-toolbar.fc-header-toolbar {
+  margin: 0;
+  padding: 1rem;
+}
+
+@include media-breakpoint-down(xs) {
+  .fc-toolbar {
+    flex-direction: column;
+
+    .fc-left {
+      order: 1;
+      margin-bottom: .5rem;
+    }
+
+    .fc-center {
+      order: 0;
+      margin-bottom: .375rem;
+    }
+
+    .fc-right {
+      order: 2;
+    }
+  }
+}
+
+.fc-day-number {
+  font-size: 20px;
+  font-weight: 300;
+  padding-right: 10px;
+}
+
+.fc-color-picker {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  > li {
+    float: left;
+    font-size: 30px;
+    line-height: 30px;
+    margin-right: 5px;
+
+    .fa,
+    .fas,
+    .far,
+    .fab,
+    .glyphicon,
+    .ion {
+      transition: transform linear .3s;
+
+      &:hover {
+        @include rotate(30deg);
+      }
+    }
+  }
+}
+
+#add-new-event {
+  transition: all linear .3s;
+}
+
+.external-event {
+  @include box-shadow($card-shadow);
+
+  border-radius: $border-radius;
+  cursor: move;
+  font-weight: bold;
+  margin-bottom: 4px;
+  padding: 5px 10px;
+
+  &:hover {
+    @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));
+  }
+}

build/scss/plugins/_icheck-bootstrap.scss

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