Dev release

.babelrc

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

.eslintignore

@@ -1,5 +1,5 @@
 **/*.min.js
 **/plugins/*
 **/dist/*
-webpack.config.js
-ad.js
+**/build/npm
+ad.js

.eslintrc

@@ -3,19 +3,15 @@
   "parser": "babel-eslint",
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "amd": true
   },
   "extends": "eslint:recommended",
   "plugins": [
     "compat"
   ],
-  "parserOptions": {
-    "ecmaVersion": 8,
-    "sourceType": "module"
-  },
   "globals": {
-    "jQuery": false,
-    "module": true
+    "jQuery": true
   },
   "rules": {
     // Possible Errors
@@ -101,12 +97,12 @@
     "no-unused-expressions": "error",
     "no-useless-call": "error",
     "no-useless-concat": "error",
-    "no-useless-return": "off",
+    "no-useless-return": "error",
     "no-void": "error",
     "no-warning-comments": "off",
     "no-with": "error",
     "prefer-promise-reject-errors": "error",
-    "radix": "off",
+    "radix": "error",
     "require-await": "error",
     "vars-on-top": "error",
     "wrap-iife": "error",
@@ -156,8 +152,7 @@
     "id-blacklist": "error",
     "id-length": "off",
     "id-match": "error",
-    "indent": "off",
-    "indent-legacy": [
+    "indent": [
       "error",
       2,
       {
@@ -167,11 +162,11 @@
     "jsx-quotes": "error",
     "key-spacing": "off",
     "keyword-spacing": "error",
-    "line-comment-position": "off",
     "linebreak-style": [
       "error",
       "unix"
     ],
+    "line-comment-position": "off",
     "lines-around-comment": "off",
     "lines-around-directive": "error",
     "max-depth": [
@@ -191,15 +186,14 @@
         "capIsNewExceptionPattern": "$.*"
       }
     ],
-    "new-parens": "error",
     "newline-after-var": "off",
-    "newline-before-return": "off",
     "newline-per-chained-call": [
       "error",
       {
         "ignoreChainWithDepth": 5
       }
     ],
+    "new-parens": "error",
     "no-array-constructor": "error",
     "no-bitwise": "error",
     "no-continue": "off",
@@ -208,6 +202,7 @@
     "no-mixed-operators": "off",
     "no-multi-assign": "error",
     "no-multiple-empty-lines": "error",
+    "nonblock-statement-body-position": "error",
     "no-negated-condition": "off",
     "no-nested-ternary": "error",
     "no-new-object": "error",
@@ -219,7 +214,6 @@
     "no-underscore-dangle": "off",
     "no-unneeded-ternary": "error",
     "no-whitespace-before-property": "error",
-    "nonblock-statement-body-position": "error",
     "object-curly-newline": [
       "error",
       {
@@ -237,8 +231,12 @@
     ],
     "one-var-declaration-per-line": "error",
     "operator-assignment": "error",
-    "operator-linebreak": "off",
-    "padded-blocks": "off",
+    "operator-linebreak": "error",
+    "padded-blocks": [
+      "error",
+      "never"
+    ],
+    "padding-line-between-statements": "off",
     "quote-props": [
       "error",
       "as-needed"
@@ -299,4 +297,4 @@
     "template-curly-spacing": "error",
     "yield-star-spacing": "error"
   }
-}
+}

LICENSE

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

README.md

@@ -1,47 +1,41 @@
 Introduction
 ============
 
-**AdminLTE** -- is a fully responsive admin template. Based on **[Bootstrap 3](https://github.com/twbs/bootstrap)** framework. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops. Check out the live preview now and see for yourself.
+**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)**
 
 Looking for Premium Templates?
 ------------------------------
-**AdminLTE.io just opened a new premium templates page. Hand picked to insure the best quality and the most affordable prices. Visit https://adminlte.io/premium for more information.**
-
+AdminLTE.io just opened a new premium templates page. Hand picked to insure the best quality and the most affordable
+prices. Visit https://adminlte.io/premium for more information.
 
 !["AdminLTE Presentation"] (https://adminlte.io/AdminLTE2.png "AdminLTE Presentation")
 
-**AdminLTE** has been carefully coded with clear comments in all of its JS, LESS and HTML files. LESS has been used to increase code customizability.
+**AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
+SCSS has been used to increase code customizability.
 
 Installation
 ------------
 There are multiple ways to install AdminLTE.
 
-####Download:
+#### Download:
 
 Download from Github or [visit AdminLTE.io](https://adminlte.io) and download the latest release.
 
-####Using The Command Line:
-
-**Github**
-
-- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
-- Clone to your machine
-```
-git clone https://github.com/YOUR_USERNAME/AdminLTE.git
-```
-
-**Bower**
+#### Using The Command Line:
 
-```
-bower install admin-lte
+**NPM**
+```bash
+npm install admin-lte
 ```
 
-**Composer**
+**Github**
 
+- Clone to your machine
 ```
-composer require "almasaeed2010/adminlte=~2.0"
+git clone https://github.com/almasaeed2010/AdminLTE.git
 ```
 
 Documentation
@@ -51,7 +45,7 @@ updated guide. Information will be added on a weekly basis.
 
 Browser Support
 ---------------
-- IE 9+
+- IE 10+
 - Firefox (latest)
 - Chrome (latest)
 - Safari (latest)
@@ -63,6 +57,7 @@ Contribution are always **welcome and recommended**! Here is how:
 
 - Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
 - Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
+- Create a new branch
 - Make your changes
 - Create a pull request
 
@@ -78,136 +73,14 @@ License
 AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](http://opensource.org/licenses/MIT). AdminLTE.io
 reserves the right to change the license of future releases.
 
-Todo List
----------
-- ~~Light sidebar colors~~ (Done v2.1.0)
-- ~~Right sidebar~~ (Done v2.1.0)
-- ~~Minified main-sidebar~~ (Done v2.1.0)
-- Right to left support
-- ~~Custom pace style~~ (Done v2.3.1)
-
-Legacy Realeases
-----------------
-AdminLTE 1.x can be easily upgraded to 2.x using [this guide](https://adminlte.io/themes/AdminLTE/documentation/index.html#upgrade), but if you intend to keep using AdminLTE 1.x, you can download the latest release from the [releases](https://github.com/almasaeed2010/AdminLTE/releases) section above.
+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)
 
 Change log
 ----------
-**v2.3.1:**
-- Fix sidebar issue #676
-- Fix BootLint warnings and errors
-- Minor bug fixes and code reformat
-- Added Pace page
-
-**v2.3.0:**
-- Added social widgets (found in the widgets page)
-- Added profile page
-- Fix issue #430 (requires ```.hold-transition``` to be added to ```<body>```)
-- Fix issue #578
-- Fix issue #579
-
-**v2.2.1:**
-- Bug Fixes
-- Removed many ```!important``` statements in css
-- Activate boxWidget automatically when created after the page has loaded
-- Activate sidebar menu treeview links automatically when created after the page has loaded
-- Updated Font Awesome thanks to @Dennis14e
-- Added JSHint to Grunt tasks (Find JS errors)
-- Added CSSLint to Grunt tasks (Find CSS errors)
-- Added Image to Grunt tasks (compress images)
-- Added Clean to Grunt tasks (remove unwanted files like uncompressed images)
-- Updated Bootstrap to 3.3.5
-
-**v2.2.0:**
-- Bug fixes
-- Added support for [Select2](https://select2.github.io/)
-- Updated ChartJS
-
-**v2.1.2:**
-- Added explicit BoxWidget activation function issue #450
-- Crushed some bugs
-
-**v2.1.1:**
-- Fix version error
-
-**v2.1.0:**
-- Update Ion Icons
-- Added right sidebar ```.control-sidebar```
-- Control sidebar has 2 open effects: slide over content and push content
-- Control sidebar converts to always slide over content on small screens
-- Added 6 new light sidebar skins
-- Updated demo menu
-- Added ChartJS preview page
-- Fixed some minor bugs
-- Added light control sidebar skin
-- Added expand on hover option for sidebar mini
-- Added fixed control sidebar layout
-
-**v2.0.5:**
-- Fixed issue #288
-
-**v2.0.4:**
-- Fixed bower.json to pick up newest release.
-
-**v2.0.3**
-- Bug fixes
-- Fixed extra page when printing issue #264
-- Updated documentation and fixed links scrolling issue
-- Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
-- Fixed sidebar stretching issue #275
-- Fixed checkbox out of bounds issue in WYSIHTML5 editor.
-
-**v2.0.2:**
-- Solved issue with hidden arrow in select inputs.
-
-**v2.0.1:**
-- Updated README.md
-- Fixed versioning issue in CSS, LESS, and JS
-- Updated box-shadow for boxes
-- Updated docs
-
-**v2.0.0:**
-
-- Major layout bug fixes
-- Change in layout mark up
-- Added transitions to the sidebar
-- New skins and modified previous skins
-- Change in color scheme to a more complementing scheme
-- Added footer support
-- Removed pace.js from the main app.js
-- Added support for collapsed sidebar as an initial state (add .sidebar-collapse to the body tag)
-- Added boxed layout (.layout-boxed)
-- Enhanced consistency in padding and margining
-- Updated Bootstrap to 3.3.2
-- Fixed navbar dropdown menu on small screens positioning issues.
-- Updated Ion Icons to 2.0.0
-- Updated FontAwesome to 4.3.0
-- Added ChartJS 1.0.1
-- Removed iCheck dependency
-- Created Dashboard 2.0
-- Created new Chat widget (DirectChat)
-- Added transitions to DirectChat
-- Added contacts pane to DirectChat
-- Changed .right-side to .content-wrapper
-- Changed .navbar-right to .navbar-custom-menu
-- Removed unused files
-- Updated lockscreen style (HTML markup changed!)
-- Updated Login & Registration pages (HTML markup changed!)
-- Updated buttons style.
-- Enhanced border-radius consistency
-- Added mailbox: inbox, read, and compose pages
-- Bootstrap & jQuery are now hosted locally
-- Created documentation.
-
-**ver 1.2.0:**
-
-- Fixed the sidebar scroll issue when using the fixed layout.
-- Added [Bootstrap Social Buttons](http://lipis.github.io/bootstrap-social/ "Bootstrap Social") plugin.
-- Fixed RequireJS bug. Thanks to [StaticSphere](https://github.com/StaticSphere "github user").
-
-**ver 1.1.0:**
-
-- Added new skin. class: .skin-black
-- Added [pace](http://github.hubspot.com/pace/docs/welcome/ "pace") plugin.
+Visit the [releases](https://github.com/almasaeed2010/AdminLTE/releases) page to view the changelog
 
 Image Credits
 -------------
@@ -220,9 +93,3 @@ Image Credits
 [Unsplash](https://unsplash.com/)
 
 [Uifaces](http://uifaces.com/)
-
-Donations
----------
-Donations are **greatly appreciated!**
-
-[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif "AdminLTE Presentation")](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=629XCUSXBHCBC "Donate")

bower.json

@@ -1,39 +0,0 @@
-{
-  "name": "AdminLTE",
-  "homepage": "http://adminlte.io",
-  "authors": [
-    "Abdullah Almsaeed <support@adminlte.io>"
-  ],
-  "description": "Admin dashboard and control panel template",
-  "main": [
-    "starter.html",
-    "dist/css/AdminLTE.css",
-    "dist/js/app.js"
-  ],
-  "dependencies": {
-    "jquery": "^3",
-    "bootstrap": "https://github.com/twbs/bootstrap.git#v4.0.0-alpha.5",
-    "font-awesome": "^4",
-    "tether": "https://github.com/HubSpot/tether.git#v1.3.7",
-    "chart.js": "^2.4.0"
-  },
-  "keywords": [
-    "css",
-    "js",
-    "html",
-    "template",
-    "admin",
-    "bootstrap",
-    "theme",
-    "backend",
-    "responsive"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "/.*",
-    "node_modules",
-    "bower_components",
-    "composer.json",
-    "documentation"
-  ]
-}

build/js/AdminLTE.js

@@ -1,13 +1,13 @@
-/*!
- * AdminLTE v3.0.0-alpha (https://adminlte.io)
- * Copyright 2014-2017 Abdullah Almsaeed <abdullah@adminlte.io>
- * Licensed under MIT (https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE)
- */
+import ControlSidebar from './ControlSidebar'
+import Layout from './Layout'
+import PushMenu from './PushMenu'
+import Treeview from './Treeview'
+import Widget from './Widget'
 
-import './ControlSidebar'
-import './Layout'
-import './PushMenu'
-import './Search'
-import './SiteSearch'
-import './Treeview'
-import './Widget'
+export {
+  ControlSidebar,
+  Layout,
+  PushMenu,
+  Treeview,
+  Widget
+}

build/js/ControlSidebar.js

@@ -6,7 +6,6 @@
  */
 
 const ControlSidebar = (($) => {
-
   /**
    * Constants
    * ====================================================
@@ -24,7 +23,8 @@ const ControlSidebar = (($) => {
 
   const Selector = {
     CONTROL_SIDEBAR: '.control-sidebar',
-    DATA_TOGGLE    : '[data-widget="control-sidebar"]'
+    DATA_TOGGLE    : '[data-widget="control-sidebar"]',
+    MAIN_HEADER    : '.main-header'
   }
 
   const ClassName = {
@@ -42,7 +42,6 @@ const ControlSidebar = (($) => {
    */
 
   class ControlSidebar {
-
     constructor(element, config) {
       this._element = element
       this._config  = this._getConfig(config)
@@ -69,7 +68,11 @@ const ControlSidebar = (($) => {
     }
 
     toggle() {
-      if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
+      this._setMargin()
+
+      const shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
+        .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      if (shouldOpen) {
         // Open the control sidebar
         this.show()
       } else {
@@ -84,6 +87,12 @@ const ControlSidebar = (($) => {
       return $.extend({}, Default, config)
     }
 
+    _setMargin() {
+      $(Selector.CONTROL_SIDEBAR).css({
+        top: $(Selector.MAIN_HEADER).outerHeight()
+      })
+    }
+
     // Static
 
     static _jQueryInterface(operation) {
@@ -109,7 +118,6 @@ const ControlSidebar = (($) => {
    * Data Api implementation
    * ====================================================
    */
-
   $(document).on('click', Selector.DATA_TOGGLE, function (event) {
     event.preventDefault()
 
@@ -129,7 +137,6 @@ const ControlSidebar = (($) => {
   }
 
   return ControlSidebar
-
 })(jQuery)
 
 export default ControlSidebar

build/js/Layout.js

@@ -6,7 +6,6 @@
  */
 
 const Layout = (($) => {
-
   /**
    * Constants
    * ====================================================
@@ -44,7 +43,6 @@ const Layout = (($) => {
    */
 
   class Layout {
-
     constructor(element) {
       this._element = element
 
@@ -54,15 +52,16 @@ const Layout = (($) => {
     // Public
 
     fixLayoutHeight() {
-      const heights = [
-        $(window).height(),
-        $(Selector.HEADER).outerHeight(),
-        $(Selector.FOOTER).outerHeight(),
-        $(Selector.SIDEBAR).height()
-      ]
+      const heights = {
+        window : $(window).height(),
+        header : $(Selector.HEADER).outerHeight(),
+        footer : $(Selector.FOOTER).outerHeight(),
+        sidebar: $(Selector.SIDEBAR).height()
+      }
       const max     = this._max(heights)
 
-      $(Selector.CONTENT).css('min-height', max - (heights[1] + heights[2]))
+      $(Selector.CONTENT).css('min-height', max - (heights.header))
+      $(Selector.SIDEBAR).css('min-height', max - heights.header)
     }
 
     // Private
@@ -73,9 +72,11 @@ const Layout = (($) => {
 
       // Activate layout height watcher
       this.fixLayoutHeight()
-      $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
-        this.fixLayoutHeight()
-      })
+      $(Selector.SIDEBAR)
+        .on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
+          this.fixLayoutHeight()
+        })
+
       $(window).resize(() => {
         this.fixLayoutHeight()
       })
@@ -87,9 +88,9 @@ const Layout = (($) => {
       // Calculate the maximum number in a list
       let max = 0
 
-      numbers.forEach((v) => {
-        if (v > max) {
-          max = v
+      Object.keys(numbers).forEach((key) => {
+        if (numbers[key] > max) {
+          max = numbers[key]
         }
       })
 
@@ -100,7 +101,8 @@ const Layout = (($) => {
 
     static _jQueryInterface(operation) {
       return this.each(function () {
-        let data = $(this).data(DATA_KEY)
+        let data = $(this)
+          .data(DATA_KEY)
 
         if (!data) {
           data = new Layout(this)
@@ -135,7 +137,6 @@ const Layout = (($) => {
   }
 
   return Layout
-
 })(jQuery)
 
 export default Layout

build/js/PushMenu.js

@@ -6,25 +6,39 @@
  */
 
 const PushMenu = (($) => {
-
   /**
    * Constants
    * ====================================================
    */
 
-  const NAME = 'PushMenu'
-  const DATA_KEY = 'lte.pushmenu'
-  const EVENT_KEY = `.${DATA_KEY}`
+  const NAME               = 'PushMenu'
+  const DATA_KEY           = 'lte.pushmenu'
+  const EVENT_KEY          = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
   const Event = {
     COLLAPSED: `collapsed${EVENT_KEY}`,
-    SHOWN: `shown${EVENT_KEY}`
+    SHOWN    : `shown${EVENT_KEY}`
+  }
+
+  const Default = {
+    screenCollapseSize: 768
   }
 
   const Selector = {
-    COLLAPSED: 'sidebar-collapse',
-    TOGGLE_BUTTON: '[data-widget="pushmenu"]'
+    TOGGLE_BUTTON    : '[data-widget="pushmenu"]',
+    SIDEBAR_MINI     : '.sidebar-mini',
+    SIDEBAR_COLLAPSED: '.sidebar-collapse',
+    BODY             : 'body',
+    OVERLAY          : '#sidebar-overlay',
+    WRAPPER          : '.wrapper'
+  }
+
+  const ClassName = {
+    SIDEBAR_OPEN: 'sidebar-open',
+    COLLAPSED   : 'sidebar-collapse',
+    OPEN        : 'sidebar-open',
+    SIDEBAR_MINI: 'sidebar-mini'
   }
 
   /**
@@ -33,47 +47,59 @@ const PushMenu = (($) => {
    */
 
   class PushMenu {
-
-    constructor(element) {
+    constructor(element, options) {
       this._element = element
-      this._isShown = !$('body').hasClass(Selector.COLLAPSED) || $('body').hasClass('sidebar-open')
+      this._options = $.extend({}, Default, options)
+
+      if (!$(Selector.OVERLAY).length) {
+        this._addOverlay()
+      }
     }
 
     // Public
 
     show() {
-      $('body').addClass('sidebar-open')
-        .removeClass(Selector.COLLAPSED)
-
-      this._isShown = true
+      $(Selector.BODY).addClass(ClassName.OPEN).removeClass(ClassName.COLLAPSED)
 
       const shownEvent = $.Event(Event.SHOWN)
       $(this._element).trigger(shownEvent)
     }
 
     collapse() {
-      $('body').removeClass('sidebar-open')
-        .addClass(Selector.COLLAPSED)
-
-      this._isShown = false
+      $(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.COLLAPSED)
 
       const collapsedEvent = $.Event(Event.COLLAPSED)
       $(this._element).trigger(collapsedEvent)
     }
 
     toggle() {
-
-      if (typeof this._isShown === 'undefined') {
-        this._isShown = !$('body').hasClass(Selector.COLLAPSED) || $('body').hasClass('sidebar-open')
+      let isShown
+      if ($(window).width() >= this._options.screenCollapseSize) {
+        isShown = !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
+      } else {
+        isShown = $(Selector.BODY).hasClass(ClassName.OPEN)
       }
 
-      if (this._isShown) {
+      if (isShown) {
         this.collapse()
       } else {
         this.show()
       }
     }
 
+    // Private
+    _addOverlay() {
+      const overlay = $('<div />', {
+        id: 'sidebar-overlay'
+      })
+
+      overlay.on('click', () => {
+        this.collapse()
+      })
+
+      $(Selector.WRAPPER).append(overlay)
+    }
+
     // Static
 
     static _jQueryInterface(operation) {
@@ -116,13 +142,12 @@ const PushMenu = (($) => {
 
   $.fn[NAME] = PushMenu._jQueryInterface
   $.fn[NAME].Constructor = PushMenu
-  $.fn[NAME].noConflict = function () {
+  $.fn[NAME].noConflict  = function () {
     $.fn[NAME] = JQUERY_NO_CONFLICT
     return PushMenu._jQueryInterface
   }
 
   return PushMenu
-
 })(jQuery)
 
 export default PushMenu

build/js/Search.js

@@ -1,197 +0,0 @@
-/**
- * --------------------------------------------
- * AdminLTE Search.js
- * License MIT
- * --------------------------------------------
- */
-
-const Search = (($) => {
-
-  /**
-   * Constants
-   * ====================================================
-   */
-
-  const NAME               = 'Search'
-  const DATA_KEY           = 'lte.search'
-  const EVENT_KEY          = `.${DATA_KEY}`
-  const JQUERY_NO_CONFLICT = $.fn[NAME]
-
-  const Event = {
-    LOAD_DATA_API: `load${EVENT_KEY}`
-  }
-
-  const Selector = {
-    LI           : '.nav-item',
-    LINK         : '.nav-link',
-    OPEN         : '.menu-open',
-    ACTIVE       : '.active',
-    TREEVIEW_MENU: '[data-widget="treeview"]',
-    NAV_TREEVIEW : '.nav-treeview',
-    NAV_HEADER   : '.nav-header',
-    DATA_WIDGET  : '[data-widget="search"]'
-  }
-
-  const ClassName = {
-    LI          : 'nav-item',
-    LINK        : 'nav-link',
-    NAV_TREEVIEW: 'nav-treeview',
-    OPEN        : 'menu-open'
-  }
-
-  const Default = {
-    target        : '',
-    caseSensitive: false
-  }
-
-  /**
-   * Class Definition
-   * ====================================================
-   */
-  class Search {
-
-    constructor(element, config) {
-      this._config     = config
-      this._element    = element
-      this._openMenus = null
-    }
-
-    // Public
-
-    init() {
-      if (this._config.target === '') {
-        this._config.target = this._element.closest(Selector.TREEVIEW_MENU)
-      } else {
-        this._config.target = $(this._config.target)
-      }
-
-      // Set treeview original state
-      this._openMenus = this._config.target.find(Selector.OPEN)
-
-      // Prevent form submission
-      this._element.parents('form').first().submit((event) => {
-        event.preventDefault()
-      })
-
-      // Setup search function
-      this._element.keyup((event) => {
-        event.preventDefault()
-
-        let value = $(event.currentTarget).val()
-
-        if (!this._config.caseSensitive) {
-          value = value.toLowerCase()
-        }
-
-        this.search(value)
-      })
-    }
-
-    search(value) {
-      const items   = this._config.target.find(Selector.LI)
-      const headers = this._config.target.find(Selector.NAV_HEADER)
-
-      // If the value is back to null
-      if (!value) {
-        // Show all headers
-        headers.css('display', 'block')
-
-        // Close all treeviews
-        items.css('display', 'block')
-          .removeClass(ClassName.OPEN)
-          .find(Selector.NAV_TREEVIEW)
-          .css('display', 'none')
-
-        // Open the originally opened treeviews
-        for (const menu of this._openMenus) {
-          if (!$(menu).hasClass(ClassName.OPEN)) {
-            $(menu).addClass(ClassName.OPEN).css('display', 'block')
-            $(menu).children(Selector.NAV_TREEVIEW).css('display', 'block')
-          }
-        }
-
-        return
-      }
-
-      // Hide all elements
-      items.css('display', 'none')
-      headers.css('display', 'none')
-
-      // Search through the tree elements
-      for (const item of items) {
-        let text = $(item).children('a').text()
-
-        if (!this._config.caseSensitive) {
-          text = text.toLowerCase()
-        }
-
-        if (parseInt(text.indexOf(value)) !== -1) {
-          // Found the result
-          // Make the parent LI visible
-          $(item).parents(Selector.LI)
-            .css('display', 'block')
-            .addClass('menu-open')
-
-          $(item).parents(Selector.NAV_TREEVIEW)
-            .css('display', 'block')
-
-          // If this is a treeview parent, make all of its children visible
-          $(item).children(Selector.NAV_TREEVIEW)
-            .css('display', 'block')
-            .children(Selector.LI)
-            .css('display', 'block')
-            .addClass('menu-open')
-
-          // Make this element visible
-          $(item).css('display', 'block')
-        }
-      }
-    }
-
-    // Static
-
-    static _jQueryInterface(config) {
-      return this.each(function () {
-        let data    = $(this).data(DATA_KEY)
-        const _config = $.extend({}, Default, $(this).data())
-
-        if (!data) {
-          data = new Search($(this), _config)
-          $(this).data(DATA_KEY, data)
-        }
-
-        if (config === 'init') {
-          data[config]()
-        }
-      })
-    }
-  }
-
-  /**
-   * Data API
-   * ====================================================
-   */
-
-  $(window).on(Event.LOAD_DATA_API, () => {
-    $(Selector.DATA_WIDGET).each(function () {
-      Search._jQueryInterface.call($(this), 'init')
-    })
-  })
-
-  /**
-   * jQuery API
-   * ====================================================
-   */
-
-  $.fn[NAME] = Search._jQueryInterface
-  $.fn[NAME].Constructor = Search
-  $.fn[NAME].noConflict  = function () {
-    $.fn[NAME] = JQUERY_NO_CONFLICT
-    return Search._jQueryInterface
-  }
-
-  return Search
-
-})(jQuery)
-
-export default Search

build/js/SiteSearch.js

@@ -6,8 +6,6 @@
  */
 
 const SiteSearch = (($) => {
-  'use strict'
-
   /**
    * Constants
    * ====================================================
@@ -124,7 +122,6 @@ const SiteSearch = (($) => {
   }
 
   return SiteSearch
-
 })(jQuery)
 
 export default SiteSearch

build/js/Treeview.js

@@ -6,7 +6,6 @@
  */
 
 const Treeview = (($) => {
-
   /**
    * Constants
    * ====================================================
@@ -50,7 +49,6 @@ const Treeview = (($) => {
    * ====================================================
    */
   class Treeview {
-
     constructor(element, config) {
       this._config  = config
       this._element = element
@@ -88,14 +86,6 @@ const Treeview = (($) => {
       })
     }
 
-    collapseAll() {
-
-    }
-
-    expandAll() {
-
-    }
-
     toggle(event) {
       const $relativeTarget = $(event.currentTarget)
       const treeviewMenu    = $relativeTarget.next()
@@ -128,7 +118,7 @@ const Treeview = (($) => {
 
     static _jQueryInterface(config) {
       return this.each(function () {
-        let data    = $(this).data(DATA_KEY)
+        let data      = $(this).data(DATA_KEY)
         const _config = $.extend({}, Default, $(this).data())
 
         if (!data) {
@@ -150,8 +140,7 @@ const Treeview = (($) => {
 
   $(window).on(Event.LOAD_DATA_API, () => {
     $(Selector.DATA_WIDGET).each(function () {
-      const $treeview = $(this)
-      Treeview._jQueryInterface.call($treeview, 'init')
+      Treeview._jQueryInterface.call($(this), 'init')
     })
   })
 
@@ -168,7 +157,6 @@ const Treeview = (($) => {
   }
 
   return Treeview
-
 })(jQuery)
 
 export default Treeview

build/js/Widget.js

@@ -6,20 +6,156 @@
  */
 
 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
+      }
 
-    constructor(element) {
-      this._element = element
+      this.collapse()
     }
 
-    static _jQueryInterface(element) {
-      $(element).show()
+    // 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))
+        }
+      })
     }
   }
 
-  return Widget
+  /**
+   * 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

Plugins.js

@@ -22,6 +22,11 @@ const Plugins = [
   {
     from: 'node_modules/font-awesome/fonts',
     to  : 'plugins/font-awesome/fonts'
+  },
+  // Chart.js 2
+  {
+    from: 'node_modules/chart.js/dist/',
+    to: 'plugins/chart.js'
   }
 ]
 

build/npm/Publish.js

@@ -0,0 +1,44 @@
+const Plugins = require('./Plugins')
+const copydir = require('copy-dir')
+
+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) => {
+      copydir(module.from, module.to, (stat, filepath, filename) => {
+        if (this.options.verbose) {
+          console.log(`Copied ${filename} from ${module.from} to ${module.to}`)
+        }
+        return true
+      }, error => {
+        if (error) {
+          console.error(`Error: ${error}`)
+        }
+      })
+    })
+  }
+}
+
+(new Publish()).run()

build/scss/AdminLTE-raw.scss

@@ -0,0 +1,68 @@
+/*!
+ *   AdminLTE v3.0.0-alpha
+ *   Author: Abdullah Almsaeed
+ *	 Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+//
+// ------------------------------------------------------------------
+// This file is to be included in your custom SCSS. Before importing
+// this file, you should include your custom AdminLTE and Bootstrap
+// variables followed by bootstrap.scss and then this file. It's
+// ok to import this file without custom variables too!
+// NOTE: be sure to keep the license notice in the generated css.
+// ------------------------------------------------------------------
+//
+// VARIABLES AND MIXINS
+// ---------------------------------------------------
+@import "bootstrap-variables";
+@import "variables";
+@import "mixins";
+// Core
+// ---------------------------------------------------
+@import "layout";
+// COMPONENTS
+// ---------------------------------------------------
+@import "main-header";
+@import "brand";
+@import "main-sidebar";
+@import "sidebar-mini";
+@import "control-sidebar";
+@import "dropdown";
+@import "forms";
+@import "progress-bars";
+@import "small-box";
+@import "cards";
+@import "info-box";
+@import "timeline";
+@import "buttons";
+@import "callout";
+@import "alerts";
+@import "navs";
+@import "products";
+@import "table";
+@import "labels";
+@import "direct-chat";
+@import "users-list";
+@import "site-search";
+@import "carousel";
+@import "modal";
+@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";

build/scss/AdminLTE.scss

@@ -5,27 +5,29 @@
  *   License: Open source - MIT <http://opensource.org/licenses/MIT>
  */
 // Bootstrap
-@import "~bootstrap/scss/functions";
+// ---------------------------------------------------
+@import "../../node_modules/bootstrap/scss/functions";
 @import "bootstrap-variables";
-@import "~bootstrap/scss/bootstrap";
-// MISC
-// ----
+@import "../../node_modules/bootstrap/scss/bootstrap";
+// VARIABLES AND MIXINS
+// ---------------------------------------------------
 @import "variables";
 @import "mixins";
 // Core
-// ----
+// ---------------------------------------------------
 @import "layout";
 // COMPONENTS
-// ----------
-@import "header";
-@import "sidebar";
+// ---------------------------------------------------
+@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 "boxes";
+@import "cards";
 @import "info-box";
 @import "timeline";
 @import "buttons";
@@ -37,12 +39,12 @@
 @import "labels";
 @import "direct-chat";
 @import "users-list";
-@import "_site-search";
+@import "site-search";
 @import "carousel";
 @import "modal";
 @import "social-widgets";
 // PAGES
-// -----
+// ---------------------------------------------------
 @import "mailbox";
 @import "lockscreen";
 @import "login_and_register";
@@ -50,14 +52,12 @@
 @import "invoice";
 @import "profile";
 // Plugins
-// -------
-@import "bootstrap-social";
+// ---------------------------------------------------
 @import "fullcalendar";
 @import "select2";
 // Miscellaneous
-// -------------
+// ---------------------------------------------------
 @import "miscellaneous";
 @import "print";
-// Skins
-// -----
-@import "skins/all-skins";
+@import "text";
+@import "elevation";

build/scss/_alerts.scss

@@ -4,13 +4,10 @@
  */
 
 .alert {
-  @include border-radius(3px);
-  h4 {
-    font-weight: 600;
-  }
   .icon {
     margin-right: 10px;
   }
+
   .close {
     color: #000;
     opacity: .2;
@@ -18,30 +15,31 @@
       opacity: .5;
     }
   }
+
   a {
-    color: #fff;
+    color: $white;
     text-decoration: underline;
   }
 }
 
 //Alert Variants
 .alert-success {
-  @extend .bg-green;
+  @extend .bg-success;
   border-color: darken(theme-color("success"), 5%);
 }
 
 .alert-danger,
 .alert-error {
-  @extend .bg-red;
+  @extend .bg-danger;
   border-color: darken(theme-color("danger"), 5%);
 }
 
 .alert-warning {
-  @extend .bg-yellow;
+  @extend .bg-warning;
   border-color: darken(theme-color("warning"), 5%);
 }
 
 .alert-info {
-  @extend .bg-aqua;
+  @extend .bg-info;
   border-color: darken(theme-color("info"), 5%);
 }

build/scss/_bootstrap-social.scss

@@ -1,172 +0,0 @@
-/*
- * Social Buttons for Bootstrap
- *
- * Copyright 2013-2015 Panayiotis Lipiridis
- * Licensed under the MIT License
- *
- * https://github.com/lipis/bootstrap-social
- */
-
-$bs-height-base: ($line-height-base + $input-btn-padding-y * 2);
-$bs-height-lg: (floor($font-size-lg * $line-height-base) + $input-btn-padding-y-lg * 2);
-$bs-height-sm: (floor($font-size-sm * 1.5) + $input-btn-padding-y-sm * 2);
-$bs-height-xs: (floor($font-size-sm * 1.2) + $input-btn-padding-y-sm + 1);
-
-.btn-social {
-  position: relative;
-  padding-left: ($bs-height-base + $input-btn-padding-x);
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  > :first-child {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: $bs-height-base;
-    line-height: ($bs-height-base + 2);
-    font-size: 1.6em;
-    text-align: center;
-    border-right: 1px solid rgba(0, 0, 0, 0.2);
-  }
-  &.btn-lg {
-    padding-left: ($bs-height-lg + $input-btn-padding-y-lg);
-    > :first-child {
-      line-height: $bs-height-lg;
-      width: $bs-height-lg;
-      font-size: 1.8em;
-    }
-  }
-  &.btn-sm {
-    padding-left: ($bs-height-sm + $input-btn-padding-y-sm);
-    > :first-child {
-      line-height: $bs-height-sm;
-      width: $bs-height-sm;
-      font-size: 1.4em;
-    }
-  }
-  &.btn-xs {
-    padding-left: ($bs-height-xs + $input-btn-padding-y-sm);
-    > :first-child {
-      line-height: $bs-height-xs;
-      width: $bs-height-xs;
-      font-size: 1.2em;
-    }
-  }
-}
-
-.btn-social-icon {
-  //@include btn-social;
-  height: ($bs-height-base + 2);
-  width: ($bs-height-base + 2);
-  padding: 0;
-  > :first-child {
-    border: none;
-    text-align: center;
-    width: 100%;
-  }
-  &.btn-lg {
-    height: $bs-height-lg;
-    width: $bs-height-lg;
-    padding-left: 0;
-    padding-right: 0;
-  }
-  &.btn-sm {
-    height: ($bs-height-sm + 2);
-    width: ($bs-height-sm + 2);
-    padding-left: 0;
-    padding-right: 0;
-  }
-  &.btn-xs {
-    height: ($bs-height-xs + 2);
-    width: ($bs-height-xs + 2);
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-@mixin btn-social($color-bg, $color: #fff) {
-  background-color: $color-bg;
-  @include button-variant($color, $color-bg, rgba(0, 0, 0, .2));
-}
-
-.btn-adn {
-  @include btn-social(#d87a68);
-}
-
-.btn-bitbucket {
-  @include btn-social(#205081);
-}
-
-.btn-dropbox {
-  @include btn-social(#1087dd);
-}
-
-.btn-facebook {
-  @include btn-social(#3b5998);
-}
-
-.btn-flickr {
-  @include btn-social(#ff0084);
-}
-
-.btn-foursquare {
-  @include btn-social(#f94877);
-}
-
-.btn-github {
-  @include btn-social(#444444);
-}
-
-.btn-google {
-  @include btn-social(#dd4b39);
-}
-
-.btn-instagram {
-  @include btn-social(#3f729b);
-}
-
-.btn-linkedin {
-  @include btn-social(#007bb6);
-}
-
-.btn-microsoft {
-  @include btn-social(#2672ec);
-}
-
-.btn-openid {
-  @include btn-social(#f7931e);
-}
-
-.btn-pinterest {
-  @include btn-social(#cb2027);
-}
-
-.btn-reddit {
-  @include btn-social(#eff7ff, #000);
-}
-
-.btn-soundcloud {
-  @include btn-social(#ff5500);
-}
-
-.btn-tumblr {
-  @include btn-social(#2c4762);
-}
-
-.btn-twitter {
-  @include btn-social(#55acee);
-}
-
-.btn-vimeo {
-  @include btn-social(#1ab7ea);
-}
-
-.btn-vk {
-  @include btn-social(#587ea3);
-}
-
-.btn-yahoo {
-  @include btn-social(#720e9e);
-}

build/scss/_bootstrap-variables.scss

@@ -9,13 +9,13 @@
 //
 
 // stylelint-disable
-$white:    #fff !default;
+$white:    #ffffff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
 $gray-500: #adb5bd !default;
-$gray-600: #868e96 !default;
+$gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
@@ -87,6 +87,12 @@ $theme-colors: map-merge((
 // Set a specific jump point for requesting color jumps
 $theme-color-interval:      8% !default;
 
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: #1F2D3D !default;
+$yiq-text-light: $white !default;
 
 // Options
 //
@@ -94,10 +100,10 @@ $theme-color-interval:      8% !default;
 
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
-$enable-shadows:            false !default;
+$enable-shadows:            true !default;
 $enable-gradients:          false !default;
 $enable-transitions:        true !default;
-$enable-hover-media-query:  false !default;
+$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:       true !default;
 $enable-print-styles:       true !default;
 
@@ -108,23 +114,27 @@ $enable-print-styles:       true !default;
 // variables. Mostly focused on spacing.
 // You can add more entries to the $spacers map, should you need more variation.
 
+// stylelint-disable
 $spacer: 1rem !default;
-$spacers: (
+$spacers: () !default;
+$spacers: map-merge((
         0: 0,
         1: ($spacer * .25),
         2: ($spacer * .5),
         3: $spacer,
         4: ($spacer * 1.5),
         5: ($spacer * 3)
-) !default;
+), $spacers);
 
 // This variable affects the `.h-*` and `.w-*` classes.
-$sizes: (
+$sizes: () !default;
+$sizes: map-merge((
         25: 25%,
         50: 50%,
         75: 75%,
         100: 100%
-) !default;
+), $sizes);
+// stylelint-enable
 
 // Body
 //
@@ -140,7 +150,7 @@ $body-color:                $gray-900 !default;
 $link-color:                theme-color("primary") !default;
 $link-decoration:           none !default;
 $link-hover-color:          darken($link-color, 15%) !default;
-$link-hover-decoration:     underline !default;
+$link-hover-decoration:     none !default;
 
 // Paragraphs
 //
@@ -185,7 +195,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 $grid-columns:                12 !default;
-$grid-gutter-width:           30px !default;
+$grid-gutter-width:           15px !default;
 
 // Components
 //
@@ -195,7 +205,7 @@ $line-height-lg:              1.5 !default;
 $line-height-sm:              1.5 !default;
 
 $border-width:                1px !default;
-$border-color:                $gray-200 !default;
+$border-color:                $gray-300 !default;
 
 $border-radius:               .25rem !default;
 $border-radius-lg:            .3rem !default;
@@ -216,8 +226,8 @@ $transition-collapse:         height .35s ease !default;
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
-$font-family-monospace:       "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-sans-serif:      "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
@@ -266,19 +276,21 @@ $text-muted:                  $gray-600 !default;
 $blockquote-small-color:      $gray-600 !default;
 $blockquote-font-size:        ($font-size-base * 1.25) !default;
 
-$hr-border-color:             rgba($black,.1) !default;
+$hr-border-color:             rgba($black, .1) !default;
 $hr-border-width:             $border-width !default;
 
 $mark-padding:                .2em !default;
 
 $dt-font-weight:              $font-weight-bold !default;
 
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black,.25) !default;
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
 $nested-kbd-font-weight:      $font-weight-bold !default;
 
-$list-inline-padding:         5px !default;
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
 
-$mark-bg: #fcf8e3 !default;
+$hr-margin-y:                 $spacer !default;
 
 
 // Tables
@@ -289,12 +301,12 @@ $table-cell-padding:          .75rem !default;
 $table-cell-padding-sm:       .3rem !default;
 
 $table-bg:                    transparent !default;
-$table-accent-bg:             rgba($black,.05) !default;
-$table-hover-bg:              rgba($black,.075) !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-bg:              rgba($black, .075) !default;
 $table-active-bg:             $table-hover-bg !default;
 
 $table-border-width:          $border-width !default;
-$table-border-color:          $gray-200 !default;
+$table-border-color:          $gray-300 !default;
 
 $table-head-bg:               $gray-200 !default;
 $table-head-color:            $gray-700 !default;
@@ -306,16 +318,16 @@ $table-dark-border-color:     lighten($gray-900, 7.5%) !default;
 $table-dark-color:            $body-bg !default;
 
 
-// Buttons
+// Buttons + Forms
 //
-// For each of Bootstrap's buttons, define text, background and border color.
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
 
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
 $input-btn-line-height:       $line-height-base !default;
 
 $input-btn-focus-width:       .2rem !default;
-$input-btn-focus-color:       rgba(theme-color("primary"), .25) !default;
+$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
 $input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
 $input-btn-padding-y-sm:      .25rem !default;
@@ -326,9 +338,33 @@ $input-btn-padding-y-lg:      .5rem !default;
 $input-btn-padding-x-lg:      1rem !default;
 $input-btn-line-height-lg:    $line-height-lg !default;
 
+$input-btn-border-width:      $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-line-height:             $input-btn-line-height !default;
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$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:              inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black,.125) !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-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-disabled-color:     $gray-600 !default;
 
@@ -339,30 +375,44 @@ $btn-border-radius:           $border-radius !default;
 $btn-border-radius-lg:        $border-radius-lg !default;
 $btn-border-radius-sm:        $border-radius-sm !default;
 
-$btn-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 
 // Forms
 
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
 $input-bg:                              $white !default;
 $input-disabled-bg:                     $gray-200 !default;
 
 $input-color:                           $gray-700 !default;
 $input-border-color:                    $gray-400 !default;
-$input-btn-border-width:                $border-width !default; // For form controls and buttons
-$input-box-shadow:                      inset 0 1px 1px rgba($black,.075) !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      none !default;
 
 $input-border-radius:                   $border-radius !default;
 $input-border-radius-lg:                $border-radius-lg !default;
 $input-border-radius-sm:                $border-radius-sm !default;
 
 $input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              lighten(theme-color("primary"), 25%) !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-placeholder-color:               $gray-600 !default;
 
-$input-height-border:                   $input-btn-border-width * 2 !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:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
@@ -373,16 +423,16 @@ $input-height-sm:                       calc(#{$input-height-inner-sm} + #{$inpu
 $input-height-inner-lg:                 ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
 $input-height-lg:                       calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
 
-$input-transition:                      border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
+$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 $form-text-margin-top:                  .25rem !default;
 
-$form-check-margin-bottom:              .5rem !default;
 $form-check-input-gutter:               1.25rem !default;
-$form-check-input-margin-y:             .25rem !default;
+$form-check-input-margin-y:             .3rem !default;
 $form-check-input-margin-x:             .25rem !default;
 
 $form-check-inline-margin-x:            .75rem !default;
+$form-check-inline-input-margin-x:      .3125rem !default;
 
 $form-group-margin-bottom:              1rem !default;
 
@@ -391,31 +441,31 @@ $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
 $custom-control-gutter:                 1.5rem !default;
-$custom-control-spacer-y:               .25rem !default;
 $custom-control-spacer-x:               1rem !default;
 
 $custom-control-indicator-size:         1rem !default;
-$custom-control-indicator-bg:           #ddd !default;
+$custom-control-indicator-bg:           $gray-300 !default;
 $custom-control-indicator-bg-size:      50% 50% !default;
-$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black,.1) !default;
+$custom-control-indicator-box-shadow:   inset 0 .25rem .25rem rgba($black, .1) !default;
 
 $custom-control-indicator-disabled-bg:          $gray-200 !default;
-$custom-control-description-disabled-color:     $gray-600 !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
 
-$custom-control-indicator-checked-color:        $white !default;
-$custom-control-indicator-checked-bg:           theme-color("primary") !default;
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
 $custom-control-indicator-checked-box-shadow:   none !default;
 
 $custom-control-indicator-focus-box-shadow:     0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
 
-$custom-control-indicator-active-color:         $white !default;
-$custom-control-indicator-active-bg:            lighten(theme-color("primary"), 35%) !default;
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
 $custom-control-indicator-active-box-shadow:    none !default;
 
 $custom-checkbox-indicator-border-radius:       $border-radius !default;
 $custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
 
-$custom-checkbox-indicator-indeterminate-bg:    theme-color("primary") !default;
+$custom-checkbox-indicator-indeterminate-bg:    $component-active-bg !default;
 $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
 $custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
@@ -433,21 +483,24 @@ $custom-select-disabled-color:      $gray-600 !default;
 $custom-select-bg:                  $white !default;
 $custom-select-disabled-bg:         $gray-200 !default;
 $custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator-color:     #333 !default;
+$custom-select-indicator-color:     $gray-800 !default;
 $custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $custom-select-border-width:        $input-btn-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
 
-$custom-select-focus-border-color:  lighten(theme-color("primary"), 25%) !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-font-size-sm:        75% !default;
 $custom-select-height-sm:           $input-height-sm !default;
 
+$custom-select-font-size-lg:        125% !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
 $custom-file-height:                $input-height !default;
-$custom-file-width:                 14rem !default;
-$custom-file-focus-box-shadow:      0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-btn-focus-box-shadow !default;
 
 $custom-file-padding-y:             $input-btn-padding-y !default;
 $custom-file-padding-x:             $input-btn-padding-x !default;
@@ -461,16 +514,13 @@ $custom-file-box-shadow:            $input-box-shadow !default;
 $custom-file-button-color:          $custom-file-color !default;
 $custom-file-button-bg:             $input-group-addon-bg !default;
 $custom-file-text: (
-        placeholder: (
-                en: "Choose file..."
-        ),
-        button-label: (
-                en: "Browse"
-        )
+        en: "Browse"
 ) !default;
 
 
 // Form validation
+$form-feedback-margin-top:          $form-text-margin-top !default;
+$form-feedback-font-size:           $small-font-size !default;
 $form-feedback-valid-color:         theme-color("success") !default;
 $form-feedback-invalid-color:       theme-color("danger") !default;
 
@@ -483,10 +533,11 @@ $dropdown-min-width:                10rem !default;
 $dropdown-padding-y:                .5rem !default;
 $dropdown-spacer:                   .125rem !default;
 $dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black,.15) !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
 $dropdown-border-width:             $border-width !default;
 $dropdown-divider-bg:               $gray-200 !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black,.175) !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
 
 $dropdown-link-color:               $gray-900 !default;
 $dropdown-link-hover-color:         darken($gray-900, 5%) !default;
@@ -498,7 +549,7 @@ $dropdown-link-active-bg:           $component-active-bg !default;
 $dropdown-link-disabled-color:      $gray-600 !default;
 
 $dropdown-item-padding-y:           .25rem !default;
-$dropdown-item-padding-x:           1.5rem !default;
+$dropdown-item-padding-x:           1rem !default;
 
 $dropdown-header-color:             $gray-600 !default;
 
@@ -522,13 +573,13 @@ $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
 $nav-link-disabled-color:           $gray-600 !default;
 
-$nav-tabs-border-color:             #ddd !default;
+$nav-tabs-border-color:             $gray-300 !default;
 $nav-tabs-border-width:             $border-width !default;
 $nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-link-hover-border-color:  $gray-200 !default;
+$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
 $nav-tabs-link-active-color:        $gray-700 !default;
 $nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: #ddd !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 
 $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
@@ -537,7 +588,9 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 // Navbar
 
 $navbar-padding-y:                  ($spacer / 2) !default;
-$navbar-padding-x:                  $spacer !default;
+$navbar-padding-x:                  ($spacer / 2) !default;
+
+$navbar-nav-link-padding-x:         1rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
@@ -550,19 +603,19 @@ $navbar-toggler-padding-x:          .75rem !default;
 $navbar-toggler-font-size:          $font-size-lg !default;
 $navbar-toggler-border-radius:      $btn-border-radius !default;
 
-$navbar-dark-color:                 rgba($white,.5) !default;
-$navbar-dark-hover-color:           rgba($white,.75) !default;
+$navbar-dark-color:                 rgba($white, .75) !default;
+$navbar-dark-hover-color:           rgba($white, 1) !default;
 $navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white,.25) !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
 $navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-dark-toggler-border-color:  rgba($white,.1) !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 
-$navbar-light-color:                rgba($black,.5) !default;
-$navbar-light-hover-color:          rgba($black,.7) !default;
-$navbar-light-active-color:         rgba($black,.9) !default;
-$navbar-light-disabled-color:       rgba($black,.3) !default;
+$navbar-light-color:                rgba($black, .5) !default;
+$navbar-light-hover-color:          rgba($black, .7) !default;
+$navbar-light-active-color:         rgba($black, .9) !default;
+$navbar-light-disabled-color:       rgba($black, .3) !default;
 $navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
-$navbar-light-toggler-border-color: rgba($black,.1) !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
 
 // Pagination
 
@@ -577,19 +630,21 @@ $pagination-line-height:            1.25 !default;
 $pagination-color:                  $link-color !default;
 $pagination-bg:                     $white !default;
 $pagination-border-width:           $border-width !default;
-$pagination-border-color:           #ddd !default;
+$pagination-border-color:           $gray-300 !default;
+
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
 
 $pagination-hover-color:            $link-hover-color !default;
 $pagination-hover-bg:               $gray-200 !default;
-$pagination-hover-border-color:     #ddd !default;
+$pagination-hover-border-color:     $gray-300 !default;
 
-$pagination-active-color:           $white !default;
-$pagination-active-bg:              theme-color("primary") !default;
-$pagination-active-border-color:    theme-color("primary") !default;
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
 
 $pagination-disabled-color:         $gray-600 !default;
 $pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  #ddd !default;
+$pagination-disabled-border-color:  $gray-300 !default;
 
 
 // Jumbotron
@@ -602,9 +657,9 @@ $jumbotron-bg:                      $gray-200 !default;
 
 $card-spacer-y:                     .75rem !default;
 $card-spacer-x:                     1.25rem !default;
-$card-border-width:                 $border-width !default;
+$card-border-width:                 0 !default; //$border-width !default;
 $card-border-radius:                $border-radius !default;
-$card-border-color:                 rgba($black,.125) !default;
+$card-border-color:                 rgba($black, .125) !default;
 $card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
 $card-cap-bg:                       rgba($black, .03) !default;
 $card-bg:                           $white !default;
@@ -621,27 +676,30 @@ $card-columns-margin:               $card-spacer-y !default;
 
 // Tooltips
 
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-opacity:                   .9 !default;
-$tooltip-padding-y:                 3px !default;
-$tooltip-padding-x:                 8px !default;
-$tooltip-margin:                    0 !default;
-
+$tooltip-font-size:           $font-size-sm !default;
+$tooltip-max-width:           200px !default;
+$tooltip-color:               $white !default;
+$tooltip-bg:                  $black !default;
+$tooltip-border-radius:        $border-radius !default;
+$tooltip-opacity:             .9 !default;
+$tooltip-padding-y:           .25rem !default;
+$tooltip-padding-x:           .5rem !default;
+$tooltip-margin:              0 !default;
 
-$tooltip-arrow-width:               5px !default;
-$tooltip-arrow-height:              5px !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
+$tooltip-arrow-width:         .8rem !default;
+$tooltip-arrow-height:        .4rem !default;
+$tooltip-arrow-color:         $tooltip-bg !default;
 
 
 // Popovers
 
+$popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black,.2) !default;
-$popover-box-shadow:                0 .25rem .5rem rgba($black,.2) !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-lg !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
 
 $popover-header-bg:                 darken($popover-bg, 3%) !default;
 $popover-header-color:              $headings-color !default;
@@ -652,8 +710,8 @@ $popover-body-color:                $body-color !default;
 $popover-body-padding-y:            $popover-header-padding-y !default;
 $popover-body-padding-x:            $popover-header-padding-x !default;
 
-$popover-arrow-width:               .8rem !default;
-$popover-arrow-height:              .4rem !default;
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
@@ -676,26 +734,26 @@ $badge-pill-border-radius:          10rem !default;
 // Modals
 
 // Padding applied to the modal body
-$modal-inner-padding:               15px !default;
+$modal-inner-padding:         1rem !default;
 
-$modal-dialog-margin:               10px !default;
-$modal-dialog-margin-y-sm-up:       30px !default;
+$modal-dialog-margin:         .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
-$modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black,.2) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-box-shadow-xs:       0 3px 9px rgba($black,.5) !default;
-$modal-content-box-shadow-sm-up:    0 5px 15px rgba($black,.5) !default;
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black, .2) !default;
+$modal-content-border-width:     $border-width !default;
+$modal-content-box-shadow-xs:    0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
 
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $gray-200 !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
-$modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding:              15px !default;
+$modal-backdrop-bg:           $black !default;
+$modal-backdrop-opacity:      .5 !default;
+$modal-header-border-color:   $gray-200 !default;
+$modal-footer-border-color:   $modal-header-border-color !default;
+$modal-header-border-width:   $modal-content-border-width !default;
+$modal-footer-border-width:   $modal-header-border-width !default;
+$modal-header-padding:        1rem !default;
 
 $modal-lg:                          800px !default;
 $modal-md:                          500px !default;
@@ -715,6 +773,10 @@ $alert-border-radius:               $border-radius !default;
 $alert-link-font-weight:            $font-weight-bold !default;
 $alert-border-width:                $border-width !default;
 
+$alert-bg-level:                    -10 !default;
+$alert-border-level:                -9 !default;
+$alert-color-level:                 6 !default;
+
 
 // Progress bars
 
@@ -722,7 +784,7 @@ $progress-height:                   1rem !default;
 $progress-font-size:                ($font-size-base * .75) !default;
 $progress-bg:                       $gray-200 !default;
 $progress-border-radius:            $border-radius !default;
-$progress-box-shadow:               inset 0 .1rem .1rem rgba($black,.1) !default;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
 $progress-bar-color:                $white !default;
 $progress-bar-bg:                   theme-color("primary") !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
@@ -731,7 +793,7 @@ $progress-bar-transition:           width .6s ease !default;
 // List group
 
 $list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black,.125) !default;
+$list-group-border-color:           rgba($black, .125) !default;
 $list-group-border-width:           $border-width !default;
 $list-group-border-radius:          $border-radius !default;
 
@@ -758,10 +820,9 @@ $list-group-action-active-bg:       $gray-200 !default;
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
 $thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            #ddd !default;
+$thumbnail-border-color:            $gray-300 !default;
 $thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              0 1px 2px rgba($black,.075) !default;
-$thumbnail-transition:              all .2s ease-in-out !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
 
 
 // Figures
@@ -815,14 +876,19 @@ $close-text-shadow:                 0 1px 0 $white !default;
 
 // Code
 
-$code-font-size:                    90% !default;
-$code-padding-y:                    .2rem !default;
-$code-padding-x:                    .4rem !default;
-$code-color:                        #bd4147 !default;
-$code-bg:                           $gray-100 !default;
+$code-font-size:                    87.5% !default;
+$code-color:                        $pink !default;
 
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         $white !default;
 $kbd-bg:                            $gray-900 !default;
 
 $pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;
+
+
+// Printing
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

build/scss/_boxes.scss

@@ -1,494 +0,0 @@
-/*
- * Component: Box
- * --------------
- */
-
-.card {
-  background: #fff;
-}
-
-.box {
-  position: relative;
-  @include border-radius($box-border-radius);
-  background: #ffffff;
-  border-top: 3px solid $box-default-border-top-color;
-  margin-bottom: 20px;
-  width: 100%;
-  box-shadow: $box-boxshadow;
-
-  // Box color variations
-  &.box-primary {
-    border-top-color: theme-color("primary");
-  }
-  &.box-info {
-    border-top-color: theme-color("info");
-  }
-  &.box-danger {
-    border-top-color: theme-color("danger");
-  }
-  &.box-warning {
-    border-top-color: theme-color("warning");
-  }
-  &.box-success {
-    border-top-color: theme-color("success");
-  }
-  &.box-default {
-    border-top-color: $box-default-border-top-color;
-  }
-
-  // collapsed mode
-  &.collapsed-box {
-    .box-body,
-    .box-footer {
-      display: none;
-    }
-  }
-
-  .nav-stacked {
-    > li {
-      border-bottom: 1px solid $box-border-color;
-      margin: 0;
-      &:last-of-type {
-        border-bottom: none;
-      }
-    }
-  }
-
-  // fixed height to 300px
-  &.height-control {
-    .box-body {
-      max-height: 300px;
-      overflow: auto;
-    }
-  }
-
-  .border-right {
-    border-right: 1px solid $box-border-color;
-  }
-  .border-left {
-    border-left: 1px solid $box-border-color;
-  }
-
-  //SOLID BOX
-  //---------
-  //use this class to get a colored header and borders
-
-  &.box-solid {
-    border-top: 0;
-    > .box-header {
-      .btn.btn-default {
-        background: transparent;
-      }
-      .btn,
-      a {
-        &:hover {
-          background: rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-
-    // Box color variations
-    &.box-default {
-      @include box-solid-variant($gray-500, #444);
-    }
-    &.box-primary {
-      @include box-solid-variant(theme-color("primary"));
-    }
-    &.box-info {
-      @include box-solid-variant(theme-color("info"));
-    }
-    &.box-danger {
-      @include box-solid-variant(theme-color("danger"));
-    }
-    &.box-warning {
-      @include box-solid-variant(theme-color("warning"));
-    }
-    &.box-success {
-      @include box-solid-variant(theme-color("success"));
-    }
-
-    > .box-header > .box-tools .btn {
-      border: 0;
-      box-shadow: none;
-    }
-
-    // Fix font color for tiles
-    &[class*='bg'] {
-      > .box-header {
-        color: #fff;
-      }
-    }
-
-  }
-
-  //BOX GROUP
-  .box-group {
-    > .box {
-      margin-bottom: 5px;
-    }
-  }
-
-  // jQuery Knob in a box
-  .knob-label {
-    text-align: center;
-    color: #333;
-    font-weight: 100;
-    font-size: 12px;
-    margin-bottom: 0.3em;
-  }
-}
-
-.box,
-.overlay-wrapper {
-  // Box overlay for LOADING STATE effect
-  > .overlay,
-  > .loading-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .overlay {
-    z-index: 50;
-    background: rgba(255, 255, 255, 0.7);
-    @include border-radius($box-border-radius);
-    > .fa {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-left: -15px;
-      margin-top: -15px;
-      color: #000;
-      font-size: 30px;
-    }
-  }
-
-  .overlay.dark {
-    background: rgba(0, 0, 0, 0.5);
-  }
-}
-
-//Add clearfix to header, body and footer
-.box-header,
-.box-body,
-.box-footer {
-  @include clearfix();
-}
-
-//Box header
-.box-header {
-  color: #444;
-  display: block;
-  padding: $box-padding;
-  position: relative;
-
-  //Add bottom border
-  &.with-border {
-    border-bottom: 1px solid $box-border-color;
-    .collapsed-box & {
-      border-bottom: none;
-    }
-  }
-
-  //Icons and box title
-  > .fa,
-  > .glyphicon,
-  > .ion,
-  .box-title {
-    display: inline-block;
-    font-size: 18px;
-    margin: 0;
-    line-height: 1;
-  }
-  > .fa,
-  > .glyphicon,
-  > .ion {
-    margin-right: 5px;
-  }
-  > .box-tools {
-    position: absolute;
-    right: 10px;
-    top: 5px;
-    [data-toggle="tooltip"] {
-      position: relative;
-    }
-
-    &.pull-right {
-      .dropdown-menu {
-        right: 0;
-        left: auto;
-      }
-    }
-  }
-}
-
-//Box Tools Buttons
-.btn-box-tool {
-  padding: 5px;
-  font-size: 12px;
-  background: transparent;
-  color: $gray-200;
-  .open &,
-  &:hover {
-    color: $gray-500;
-  }
-  &.btn:active {
-    box-shadow: none;
-  }
-}
-
-//Box Body
-.box-body {
-  @include border-radius-sides(0, 0, $box-border-radius, $box-border-radius);
-  padding: $box-padding;
-  .no-header & {
-    @include border-top-radius($box-border-radius);
-  }
-  // Tables within the box body
-  > .table {
-    margin-bottom: 0;
-    > thead > tr > th,
-    > thead > tr > td {
-      border-top-width: 0;
-    }
-  }
-
-  // Calendar within the box body
-  .fc {
-    margin-top: 5px;
-  }
-
-  .full-width-chart {
-    margin: -19px;
-  }
-  &.no-padding .full-width-chart {
-    margin: -9px;
-  }
-
-  .box-pane {
-    //@include border-radius-sides(0, 0, $box-border-radius, 0);
-  }
-  .box-pane-right {
-    border-bottom-right-radius: $box-border-radius;
-  }
-}
-
-//Box footer
-.box-footer {
-  @include border-radius-sides(0, 0, $box-border-radius, $box-border-radius);
-  border-top: 1px solid $box-border-color;
-  padding: $box-padding;
-  background-color: $box-footer-bg;
-}
-
-.chart-legend {
-  @extend .list-unstyled;
-  margin: 10px 0;
-  > li {
-    @media (max-width: map-get($grid-breakpoints, sm)) {
-      float: left;
-      margin-right: 10px;
-    }
-  }
-}
-
-//Comment Box
-.box-comments {
-  background: #f7f7f7;
-  .box-comment {
-    @include clearfix();
-    padding: 8px 0;
-    border-bottom: 1px solid #eee;
-    &:last-of-type {
-      border-bottom: 0;
-    }
-    &:first-of-type {
-      padding-top: 0;
-    }
-    img {
-      @extend .img-sm;
-      float: left;
-    }
-  }
-  .comment-text {
-    margin-left: 40px;
-    color: #555;
-  }
-  .username {
-    color: #444;
-    display: block;
-    font-weight: 600;
-  }
-  .text-muted {
-    font-weight: 400;
-    font-size: 12px;
-  }
-}
-
-//Widgets
-//-----------
-
-/* Widget: TODO LIST */
-
-.todo-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-  // Todo list element
-  > li {
-    @include border-radius(2px);
-    padding: 10px;
-    background: #f4f4f4;
-    margin-bottom: 2px;
-    border-left: 2px solid #e6e7e8;
-    color: #444;
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-
-    > input[type='checkbox'] {
-      margin: 0 10px 0 5px;
-    }
-
-    .text {
-      display: inline-block;
-      margin-left: 5px;
-      font-weight: 600;
-    }
-
-    // Time labels
-    .label {
-      margin-left: 10px;
-      font-size: 9px;
-    }
-
-    // Tools and options box
-    .tools {
-      display: none;
-      float: right;
-      color: theme-color("danger");
-      // icons
-      > .fa, > .glyphicon, > .ion {
-        margin-right: 5px;
-        cursor: pointer;
-      }
-
-    }
-    &:hover .tools {
-      display: inline-block;
-    }
-
-    &.done {
-      color: #999;
-      .text {
-        text-decoration: line-through;
-        font-weight: 500;
-      }
-
-      .label {
-        background: $gray-500 !important;
-      }
-    }
-  }
-
-  // Color varaity
-  .danger {
-    border-left-color: theme-color("danger");
-  }
-  .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");
-  }
-
-  .handle {
-    display: inline-block;
-    cursor: move;
-    margin: 0 5px;
-  }
-
-}
-
-// END TODO WIDGET
-
-/* Chat widget (DEPRECATED - this will be removed in the next major release. Use Direct Chat instead)*/
-.chat {
-  padding: 5px 20px 5px 10px;
-
-  .item {
-    @include clearfix();
-    margin-bottom: 10px;
-    // The image
-    > img {
-      width: 40px;
-      height: 40px;
-      border: 2px solid transparent;
-      @include border-radius(50%);
-    }
-
-    > .online {
-      border: 2px solid theme-color("success");
-    }
-    > .offline {
-      border: 2px solid theme-color("danger");
-    }
-
-    // The message body
-    > .message {
-      margin-left: 55px;
-      margin-top: -40px;
-      > .name {
-        display: block;
-        font-weight: 600;
-      }
-    }
-
-    // The attachment
-    > .attachment {
-      @include border-radius($attachment-border-radius);
-      background: #f4f4f4;
-      margin-left: 65px;
-      margin-right: 15px;
-      padding: 10px;
-      > h4 {
-        margin: 0 0 5px 0;
-        font-weight: 600;
-        font-size: 14px;
-      }
-      > p, > .filename {
-        font-weight: 600;
-        font-size: 13px;
-        font-style: italic;
-        margin: 0;
-
-      }
-      @include clearfix();
-    }
-  }
-
-}
-
-//END CHAT WIDGET
-
-//Input in box
-.box-input {
-  max-width: 200px;
-}
-
-//A fix for panels body text color when placed within
-// a modal
-.modal {
-  .panel-body {
-    color: #444;
-  }
-}

build/scss/_brand.scss

@@ -0,0 +1,33 @@
+.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;
+  line-height: $line-height-lg;
+  white-space: nowrap;
+
+  &:hover {
+    color: $white;
+    text-decoration: none;
+  }
+
+  [class*="sidebar-dark"] & {
+    color: rgba(255,255,255,.8);
+    border-bottom: 1px solid lighten($dark, 10%);
+  }
+
+  [class*="sidebar-light"] & {
+    color: rgba(0,0,0,.8);
+    border-bottom: 1px solid $gray-300;
+  }
+}
+
+.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

@@ -4,14 +4,6 @@
  */
 
 .btn {
-  @include border-radius($btn-border-radius);
-  @include box-shadow($btn-boxshadow);
-  border: 1px solid transparent;
-
-  &.uppercase {
-    text-transform: uppercase
-  }
-
   // Flat buttons
   &.btn-flat {
     @include border-radius(0);
@@ -21,17 +13,6 @@
     border-width: 1px;
   }
 
-  // Active state
-  &:active {
-    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
   // input file btn
   &.btn-file {
     position: relative;
@@ -53,7 +34,7 @@
   }
 }
 
-//Button color variations
+// Button color variations
 .btn-default {
   background-color: #f4f4f4;
   color: #444;
@@ -65,66 +46,10 @@
   }
 }
 
-.btn-primary {
-  background-color: theme-color("primary");
-  border-color: darken(theme-color("primary"), 5%);
-  &:hover, &:active, &.hover {
-    background-color: darken(theme-color("primary"), 5%);
-  }
-}
-
-.btn-success {
-  background-color: theme-color("success");
-  border-color: darken(theme-color("success"), 5%);
-  &:hover, &:active, &.hover {
-    background-color: darken(theme-color("success"), 5%);
-  }
-}
-
-.btn-info {
-  background-color: theme-color("info");
-  border-color: darken(theme-color("info"), 5%);
-  &:hover, &:active, &.hover {
-    background-color: darken(theme-color("info"), 5%);
-  }
-}
-
-.btn-danger {
-  background-color: theme-color("danger");
-  border-color: darken(theme-color("danger"), 5%);
-  &:hover, &:active, &.hover {
-    background-color: darken(theme-color("danger"), 5%);
-  }
-}
-
-.btn-warning {
-  background-color: theme-color("warning");
-  border-color: darken(theme-color("warning"), 5%);
-  &:hover, &:active, &.hover {
-    background-color: darken(theme-color("warning"), 5%);
-  }
-}
-
-.btn-outline {
-  border: 1px solid #fff;
-  background: transparent;
-  color: #fff;
-  &:hover,
-  &:focus,
-  &:active {
-    color: rgba(255, 255, 255, 0.7);
-    border-color: rgba(255, 255, 255, 0.7);
-  }
-}
-
-.btn-link {
-  @include box-shadow(none);
-}
-
 //General .btn with bg class
-.btn[class*='bg-']:hover {
-  @include box-shadow(inset 0 0 100px rgba(0, 0, 0, 0.2));
-}
+//.btn[class*='bg-']:hover {
+//  @include box-shadow(inset 0 0 100px rgba(0, 0, 0, 0.2));
+//}
 
 // Application buttons
 .btn-app {
@@ -152,7 +77,7 @@
   }
 
   &:active, &:focus {
-    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0,  0.125);
+    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   }

build/scss/_callout.scss

@@ -5,44 +5,44 @@
 
 // Base styles (regardless of theme)
 .callout {
-  @include border-radius(3px);
-  margin: 0 0 20px 0;
-  padding: 15px 30px 15px 15px;
+  @if $enable-rounded {
+    @include border-radius($border-radius);
+  }
+
+  @if $enable-shadows {
+    @extend .elevation-1;
+  } @else {
+    border: 1px solid $gray-300;
+  }
+
+  @extend .mb-3;
+  background-color: $white;
+  padding: .5rem 1rem .5rem .5rem;
   border-left: 5px solid #eee;
+
   a {
-    color: #fff;
+    color: $white;
     text-decoration: underline;
     &:hover {
       color: #eee;
     }
   }
-  h4 {
-    margin-top: 0;
-    font-weight: 600;
-  }
+
   p:last-child {
     margin-bottom: 0;
   }
-  code,
-  .highlight {
-    background-color: #fff;
-  }
 
   // Themes for different contexts
   &.callout-danger {
-    @extend  .bg-red;
-    border-color: darken(theme-color("danger"), 10%);
+    border-left-color: darken(theme-color("danger"), 10%);
   }
   &.callout-warning {
-    @extend  .bg-yellow;
-    border-color: darken(theme-color("warning"), 10%);
+    border-left-color: darken(theme-color("warning"), 10%);
   }
   &.callout-info {
-    @extend  .bg-aqua;
-    border-color: darken(theme-color("info"), 10%);
+    border-left-color: darken(theme-color("info"), 10%);
   }
   &.callout-success {
-    @extend  .bg-green;
-    border-color: darken(theme-color("success"), 10%);
+    border-left-color: darken(theme-color("success"), 10%);
   }
 }

build/scss/_cards.scss

@@ -0,0 +1,341 @@
+/*
+ * Component: Box
+ * --------------
+ */
+
+.card {
+  @extend .mb-3;
+  @if $enable-shadows {
+    box-shadow: $card-shadow;
+  }
+  overflow: hidden;
+  position: relative;
+
+  &.bg-dark {
+    &,
+    .card-body {
+      color: $white;
+    }
+  }
+
+  // collapsed mode
+  &.collapsed-card {
+    .card-body,
+    .card-footer {
+      display: none;
+    }
+  }
+
+  .nav.flex-column {
+    > li {
+      border-bottom: 1px solid $card-border-color;
+      margin: 0;
+      &:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+
+  // fixed height to 300px
+  &.height-control {
+    .card-body {
+      max-height: 300px;
+      overflow: auto;
+    }
+  }
+
+  .border-right {
+    border-right: 1px solid $card-border-color;
+  }
+
+  .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%;
+  }
+
+  .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;
+    }
+  }
+
+  .overlay.dark {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
+
+// Add clearfix to header, body and footer
+.card-header,
+.card-body,
+.card-footer {
+  @include clearfix();
+}
+
+// Box header
+.card-header {
+  position: relative;
+  background-color: transparent;
+  border-bottom: 1px solid $card-border-color;
+
+  @if $enable-rounded {
+    @include border-top-radius($border-radius);
+  }
+
+  .collapsed-card & {
+    border-bottom: none;
+  }
+
+  > .card-tools {
+    position: absolute;
+    right: 1rem;
+    top: .5rem;
+
+    [data-toggle="tooltip"] {
+      position: relative;
+    }
+  }
+}
+
+.card-title {
+  font-size: $card-title-font-size;
+  font-weight: $card-title-font-weight;
+  margin: 0;
+}
+
+// Box Tools Buttons
+.btn-tool {
+  padding: .25rem .5rem;
+  font-size: $font-size-sm;
+  background: transparent;
+  color: $gray-500;
+
+  .btn-group.show &,
+  &:hover {
+    color: $gray-700;
+  }
+
+  .show &,
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+// Box Body
+.card-body {
+  // @include border-radius-sides(0, 0, $border-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;
+    }
+  }
+
+  // Calendar within the box body
+  .fc {
+    margin-top: 5px;
+  }
+
+  .full-width-chart {
+    margin: -19px;
+  }
+
+  &.p-0 .full-width-chart {
+    margin: -9px;
+  }
+}
+
+.chart-legend {
+  @extend .list-unstyled;
+  margin: 10px 0;
+  > li {
+    @media (max-width: map-get($grid-breakpoints, sm)) {
+      float: left;
+      margin-right: 10px;
+    }
+  }
+}
+
+// Comment Box
+.card-comments {
+  background: #f7f7f7;
+  .card-comment {
+    @include clearfix();
+    padding: 8px 0;
+    border-bottom: 1px solid #eee;
+    &:last-of-type {
+      border-bottom: 0;
+    }
+    &:first-of-type {
+      padding-top: 0;
+    }
+    img {
+      @extend .img-sm;
+      float: left;
+    }
+  }
+  .comment-text {
+    margin-left: 40px;
+    color: #555;
+  }
+  .username {
+    color: #444;
+    display: block;
+    font-weight: 600;
+  }
+  .text-muted {
+    font-weight: 400;
+    font-size: 12px;
+  }
+}
+
+// Widgets
+//-----------
+
+// Widget: TODO LIST
+.todo-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+  // Todo list element
+  > li {
+    @include border-radius(2px);
+    padding: 10px;
+    background: #f4f4f4;
+    margin-bottom: 2px;
+    border-left: 2px solid #e6e7e8;
+    color: #444;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    > input[type='checkbox'] {
+      margin: 0 10px 0 5px;
+    }
+
+    .text {
+      display: inline-block;
+      margin-left: 5px;
+      font-weight: 600;
+    }
+
+    // Time labels
+    .label {
+      margin-left: 10px;
+      font-size: 9px;
+    }
+
+    // Tools and options box
+    .tools {
+      display: none;
+      float: right;
+      color: theme-color("danger");
+      // icons
+      > .fa, > .glyphicon, > .ion {
+        margin-right: 5px;
+        cursor: pointer;
+      }
+
+    }
+    &:hover .tools {
+      display: inline-block;
+    }
+
+    &.done {
+      color: #999;
+      .text {
+        text-decoration: line-through;
+        font-weight: 500;
+      }
+
+      .label {
+        background: $gray-500 !important;
+      }
+    }
+  }
+
+  // Color varaity
+  .danger {
+    border-left-color: theme-color("danger");
+  }
+  .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");
+  }
+
+  .handle {
+    display: inline-block;
+    cursor: move;
+    margin: 0 5px;
+  }
+}
+
+// END TODO WIDGET
+
+// Input in box
+.card-input {
+  max-width: 200px;
+}
+
+@each $name, $color in $theme-colors {
+  .card-#{$name} {
+    &:not(.card-outline) {
+      .card-header {
+        background-color: $color;
+        &,
+        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);
+      }
+    }
+  }
+}

build/scss/_direct-chat.scss

@@ -3,8 +3,7 @@
  * ----------------------
  */
 .direct-chat {
-  .box-body {
-    @include border-bottom-radius(0);
+  .card-body {
     position: relative;
     overflow-x: hidden;
     padding: 0;
@@ -39,7 +38,10 @@
 }
 
 .direct-chat-text {
-  @include border-radius(5px);
+  @if $enable-rounded {
+    @include border-radius($border-radius-lg);
+  }
+
   position: relative;
   padding: 5px 10px;
   background: $direct-chat-default-msg-bg;
@@ -95,7 +97,7 @@
 .direct-chat-info {
   display: block;
   margin-bottom: 2px;
-  font-size: 12px;
+  font-size: $font-size-sm;
 }
 
 .direct-chat-name {
@@ -121,7 +123,7 @@
   height: 250px;
   width: 100%;
   background: #222d32;
-  color: #fff;
+  color: $white;
   overflow: auto;
 }
 
@@ -147,7 +149,7 @@
 
 .contacts-list-info {
   margin-left: 45px;
-  color: #fff;
+  color: $white;
 }
 
 .contacts-list-name,
@@ -160,7 +162,7 @@
 }
 
 .contacts-list-status {
-  font-size: 12px;
+  font-size: $font-size-sm;
 }
 
 .contacts-list-date {

build/scss/_dropdown.scss

@@ -46,7 +46,7 @@
 
 .dropdown-header {
   &:hover {
-    background-color: #fff;
+    background-color: $white;
     color: $gray-200;
   }
 }
@@ -122,7 +122,7 @@
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, sm)) {
+@include media-breakpoint-down(sm) {
   .navbar-custom-menu > .navbar-nav {
     float: right;
     > li {
@@ -132,8 +132,8 @@
         right: 5%;
         left: auto;
         border: 1px solid #ddd;
-        background: #fff;
+        background: $white;
       }
     }
   }
-}
+}

build/scss/_elevation.scss

@@ -0,0 +1,25 @@
+.elevation-0 {
+  box-shadow: none;
+}
+
+@if $enable-shadows {
+  .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);
+  }
+}

build/scss/_forms.scss

@@ -2,59 +2,7 @@
  * Component: Form
  * ---------------
  */
-.form-control {
-  //@include border-radius($input-radius);
-  box-shadow: none;
-  //border-color: $gray-500;
-  &:focus {
-    border-color: theme-color("primary");
-    box-shadow: none;
-  }
-  &::-moz-placeholder,
-  &:-ms-input-placeholder,
-  &::-webkit-input-placeholder {
-    color: #bbb;
-    opacity: 1;
-  }
-
-  &:not(select) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-}
-
 .form-group {
-  &.has-success {
-    label {
-      color: theme-color("success");
-    }
-    .form-control {
-      border-color: theme-color("success");
-      box-shadow: none;
-    }
-  }
-
-  &.has-warning {
-    label {
-      color: theme-color("warning");
-    }
-    .form-control {
-      border-color: theme-color("warning");
-      box-shadow: none;
-    }
-  }
-
-  &.has-error {
-    label {
-      color: theme-color("danger");
-    }
-    .form-control {
-      border-color: theme-color("danger");
-      box-shadow: none;
-    }
-  }
-
   &.has-icon {
     position: relative;
     .form-control {
@@ -66,7 +14,7 @@
       right: 3px;
       top: 0;
       padding: $input-btn-padding-y $input-btn-padding-x;
-      margin-top: -3px;
+      // margin-top: -3px;
       border: 0;
       background-color: transparent;
       font-size: 1rem;
@@ -74,15 +22,6 @@
   }
 }
 
-/* Input group */
-.input-group {
-  .input-group-addon {
-    //@include border-radius($input-radius);
-    border-color: $gray-500;
-    background-color: #fff;
-  }
-}
-
 /* button groups */
 .btn-group-vertical {
   .btn {
@@ -92,11 +31,7 @@
   }
 }
 
-.icheck > label {
-  padding-left: 0;
-}
-
-/* support Font Awesome icons in form-control */
+/* Support Font Awesome icons in form-control */
 .form-control-feedback.fa {
   line-height: $input-height;
 }
@@ -112,3 +47,7 @@
 .form-group-sm .form-control + .form-control-feedback.fa {
   line-height: $input-height-sm;
 }
+
+label:not(.form-check-label, .custom-file-label) {
+  font-weight: $font-weight-bold;
+}

build/scss/_fullcalendar.scss

@@ -54,7 +54,7 @@
 }
 
 .fc-toolbar {
-  padding: $box-padding;
+  padding: 1rem;
   margin: 0;
 }
 
@@ -90,9 +90,9 @@
   padding: 5px 10px;
   font-weight: bold;
   margin-bottom: 4px;
-  box-shadow: $box-boxshadow;
-  text-shadow: $box-boxshadow;
-  border-radius: $box-border-radius;
+  box-shadow: $card-shadow;
+  text-shadow: $card-shadow;
+  border-radius: $border-radius;
   cursor: move;
   &:hover {
     box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.2);

build/scss/_header.scss

@@ -1,95 +0,0 @@
-/*
- * Component: Main Header
- * ----------------------
- */
-
-.main-header {
-  padding: 0 16px 0 0;
-  .navbar-brand {
-    font-weight: 200;
-    width: $sidebar-width;
-    padding: $main-header-brand-padding-y $main-header-brand-padding-x;
-    background: darken(theme-color("primary"), 5%);
-    transition: width $transition-speed $transition-fn;
-    overflow: hidden;
-    margin-right: 0;
-
-    > .logo-mini {
-      display: none;
-    }
-
-    @include media-breakpoint-up(md) {
-      .sidebar-mini.sidebar-collapse & {
-        width: $sidebar-mini-width;
-        > .logo {
-          display: none;
-        }
-        > .logo-mini {
-          display: inline;
-        }
-      }
-    }
-
-    @include media-breakpoint-down(md) {
-      width: $sidebar-mini-width;
-      > .logo {
-        display: none;
-      }
-      > .logo-mini {
-        display: inline;
-      }
-    }
-  }
-
-  .navbar-nav .nav-item {
-    margin: 0;
-  }
-
-  .nav-link {
-    padding: $main-header-link-padding-y $main-header-link-padding-x;
-    position: relative;
-  }
-
-  .open > .nav-link,
-  .nav-link:hover {
-    background: rgba(0, 0, 0, .1);
-  }
-
-  .has-img {
-    padding-top: $main-header-link-padding-y - 2;
-    padding-bottom: $main-header-link-padding-y - 2;
-  }
-
-  .navbar-nav[class*="-right"] {
-    .dropdown-menu {
-      margin-top: -3px;
-      right: 0;
-      left: auto;
-      @media (max-width: breakpoint-max(xs)) {
-        left: 0;
-        right: auto;
-      }
-    }
-  }
-
-}
-
-// Add shadow to the navbar if wanted
-.navbar-shadow {
-  @include box-shadow(0 3px 3px rgba(0, 0, 0, 0.1));
-}
-
-// Add this class to images within a nav-link
-.navbar-img {
-  height: $main-header-height / 2;
-  width: auto;
-}
-
-// Navbar tags (used as badges in nav-link)
-.navbar-tag {
-  position: absolute;
-  top: 9px;
-  right: 5px;
-  font-size: $font-size-base - .1;
-  padding: 2px 4px;
-}

build/scss/_info-box.scss

@@ -3,40 +3,44 @@
  * -------------------
  */
 .info-box {
-  display: block;
+  @extend .d-flex;
+  @extend .mb-3;
+
+  padding: .5rem;
   min-height: 80px;
-  background: #fff;
-  width: 100%;
-  box-shadow: $box-boxshadow;
-  @include border-radius(2px);
-  margin-bottom: 15px;
+  background: $white;
+
+  @if $enable-shadows {
+    box-shadow: $card-shadow;
+  }
 
-  small {
-    font-size: $font-size-sm;
+  @if $enable-rounded {
+    border-radius: $border-radius;
   }
 
-  .progress[value] {
+  .progress {
     background-color: rgba(0, 0, 0, 0.125);
     margin: 5px 0;
     height: 2px;
-    //@include progress-variant(#fff);
-    @include border-radius(0);
-  }
-  .progress[value]::-webkit-progress-bar {
-    background-color: rgba(0, 0, 0, 0.125);
+    .progress-bar {
+      background-color: $white;
+    }
   }
 }
 
 .info-box-icon {
-  @include border-left-radius(2px);
+  @extend .d-flex;
+  @extend .align-items-center;
+  @extend .justify-content-center;
+
+  @if $enable-rounded {
+    border-radius: $border-radius;
+  }
+
   display: block;
-  float: left;
-  height: 80px;
-  width: 80px;
+  width: 70px;
   text-align: center;
-  font-size: 40px;
-  line-height: 80px;
-  background: rgba(0, 0, 0, 0.2);
+  font-size: 30px;
 
   > img {
     max-width: 100%;
@@ -45,25 +49,31 @@
 
 .info-box-content {
   padding: 5px 10px;
-  margin-left: 80px;
+  flex: 1;
 }
 
 .info-box-number {
   display: block;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 }
 
 .progress-description,
 .info-box-text {
   display: block;
-  font-size: $font-size-sm;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.info-box-text {
-  text-transform: uppercase;
+@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);
+    }
+  }
 }
 
 .info-box-more {

build/scss/_invoice.scss

@@ -5,10 +5,8 @@
 
 .invoice {
   position: relative;
-  background: #fff;
-  border: 1px solid #f4f4f4;
-  padding: 20px;
-  margin: 10px 25px;
+  background: $white;
+  border: 1px solid $card-border-color;
 }
 
 .invoice-title {

build/scss/_labels.scss

@@ -8,21 +8,21 @@
 }
 
 .label-danger {
-  @extend .bg-red;
+  @extend .bg-danger;
 }
 
 .label-info {
-  @extend .bg-aqua;
+  @extend .bg-info;
 }
 
 .label-warning {
-  @extend .bg-yellow;
+  @extend .bg-warning;
 }
 
 .label-primary {
-  @extend .bg-light-blue;
+  @extend .bg-primary;
 }
 
 .label-success {
-  @extend .bg-green;
+  @extend .bg-success;
 }

build/scss/_layout.scss

@@ -5,14 +5,10 @@
 html,
 body,
 .wrapper {
-  height: 100%;
+  min-height: 100%;
   overflow-x: hidden;
 }
 
-.layout-boxed {
-  background: url('#{$boxed-layout-bg-image-path}') #ccc repeat;
-}
-
 .wrapper {
   position: relative;
 
@@ -26,27 +22,14 @@ body,
   }
 }
 
-.wrapper:before,
-.main-sidebar:before {
-  content: " ";
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: -1;
-}
-
-.wrapper:before {
-  background: $main-bg;
-  width: 100%;
-}
-
 .content-wrapper,
-.main-footer {
+.main-footer,
+.main-header {
   @include media-breakpoint-up(md) {
+    @include transition(margin-left $transition-speed $transition-fn);
+
     margin-left: $sidebar-width;
     z-index: 3000;
-    $local-content-transition: margin-right $transition-speed $transition-fn, margin-left $transition-speed $transition-fn;
-    @include transition($local-content-transition);
 
     .sidebar-collapse & {
       margin-left: 0;
@@ -61,26 +44,19 @@ body,
   }
 }
 
-.content-wrapper,
-.main-sidebar {
-  @include calc("min-height", "100% - #{$main-header-height + $main-footer-height}");
-}
-
 .content-wrapper {
   background: $main-bg;
-  > .content-header,
-  > .content {
-    display: table;
-    width: 100%;
-  }
 
   > .content {
-    padding: 15px;
+    padding: $content-padding-y $content-padding-x;
   }
 }
 
 .main-sidebar {
-  float: left;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
 
   &,
   &:before {
@@ -99,8 +75,16 @@ body,
   @include media-breakpoint-down(md) {
     &,
     &:before {
+      box-shadow: none!important;
       margin-left: -$sidebar-width;
     }
+
+    .sidebar-open & {
+      &,
+      &:before {
+        margin-left: 0;
+      }
+    }
   }
 }
 
@@ -108,13 +92,12 @@ body,
   padding: $main-footer-padding;
   color: #555;
   border-top: $main-footer-border-top;
-  background: #fff;
+  background: $main-footer-bg;
 }
 
 .content-header {
-  padding: 15px;
-  background: #fff;
-  border-bottom: 1px solid $card-border-color;
+  padding: 15px $content-padding-x;
+
   h1 {
     font-size: 1.8rem;
     margin: 0;
@@ -125,4 +108,12 @@ body,
     background: transparent;
     line-height: 1.8rem;
   }
-}
+}
+
+.hold-transition {
+  .content-wrapper,
+  .main-header,
+  .main-footer {
+    transition: none!important;
+  }
+}

build/scss/_lockscreen.scss

@@ -4,7 +4,7 @@
  */
 /* ADD THIS CLASS TO THE <BODY> TAG */
 .lockscreen {
-  background: $gray-500;
+  background: $gray-200;
 }
 
 .lockscreen-logo {
@@ -33,7 +33,7 @@
 .lockscreen-item {
   @include border-radius(4px);
   padding: 0;
-  background: #fff;
+  background: $white;
   position: relative;
   margin: 10px auto 30px auto;
   width: 290px;
@@ -45,7 +45,7 @@
   position: absolute;
   left: -10px;
   top: -25px;
-  background: #fff;
+  background: $white;
   padding: 5px;
   z-index: 10;
   > img {
@@ -62,7 +62,7 @@
     border: 0;
   }
   .btn {
-    background-color: #fff;
+    background-color: $white;
     border: 0;
     padding: 0 10px;
   }

build/scss/_login_and_register.scss

@@ -16,7 +16,7 @@
 
 .login-page,
 .register-page {
-  background: $gray-500;
+  background: $gray-200;
 }
 
 .login-box,
@@ -31,7 +31,7 @@
 
 .login-box-body,
 .register-box-body {
-  background: #fff;
+  background: $white;
   padding: 20px;
   border-top: 0;
   color: #666;

build/scss/_mailbox.scss

@@ -11,12 +11,12 @@
 .mailbox-controls {
   padding: 5px;
   &.with-border {
-    border-bottom: 1px solid $box-border-color;
+    border-bottom: 1px solid $card-border-color;
   }
 }
 
 .mailbox-read-info {
-  border-bottom: 1px solid $box-border-color;
+  border-bottom: 1px solid $card-border-color;
   padding: 10px;
   h3 {
     font-size: 20px;

build/scss/_main-header.scss

@@ -0,0 +1,136 @@
+/*
+ * Component: Main Header
+ * ----------------------
+ */
+.main-header {
+  z-index: $zindex-main-header;
+
+  .navbar-nav .nav-item {
+    margin: 0;
+  }
+
+  .nav-link {
+    position: relative;
+    height: $nav-link-height;
+  }
+
+  .navbar-nav[class*="-right"] {
+    .dropdown-menu {
+      margin-top: -3px;
+      right: 0;
+      left: auto;
+      @media (max-width: breakpoint-max(xs)) {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+
+}
+
+// Add this class to images within a nav-link
+.navbar-img {
+  height: $main-header-height / 2;
+  width: auto;
+}
+
+// Navbar badge
+.navbar-badge {
+  position: absolute;
+  top: 9px;
+  right: 5px;
+  font-size: .6rem;
+  font-weight: 300;
+  padding: 2px 4px;
+}
+
+.btn-navbar {
+  border-left-width: 0;
+  background-color: transparent;
+}
+
+.form-control-navbar {
+  border-right-width: 0;
+  & + .input-group-append {
+    margin-left: 0;
+  }
+}
+
+.form-control-navbar,
+.btn-navbar {
+  transition: none;
+}
+
+.navbar-dark {
+  .form-control-navbar,
+  .btn-navbar {
+    background-color: $main-header-dark-form-control-bg;
+    border: $main-header-dark-form-control-border;
+  }
+
+  .form-control-navbar {
+    &::placeholder,
+    + .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;
+        color: $main-header-dark-form-control-focused-color;
+      }
+    }
+  }
+}
+
+.navbar-light {
+  .form-control-navbar,
+  .btn-navbar {
+    background-color: $main-header-light-form-control-bg;
+    border: $main-header-light-form-control-border;
+  }
+
+  .form-control-navbar {
+    &::placeholder,
+    + .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;
+        color: $main-header-light-form-control-focused-color;
+      }
+    }
+  }
+}

build/scss/_main-sidebar.scss

@@ -0,0 +1,164 @@
+/**
+ * Component: Sidebar
+ * ------------------
+ */
+
+.main-sidebar {
+  z-index: $zindex-main-sidebar;
+  height: 100vh;
+  overflow-y: hidden;
+}
+
+.sidebar {
+  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);
+}
+
+// Sidebar user panel
+.user-panel {
+  position: relative;
+
+  [class*="sidebar-dark"] & {
+    border-bottom: 1px solid lighten($dark, 12%);
+  }
+
+  [class*="sidebar-light"] & {
+    border-bottom: 1px solid $gray-300;
+  }
+
+  &,
+  .info {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .image {
+    padding-left: $nav-link-padding-x - .2;
+    display: inline-block;
+  }
+
+  img {
+    width: $sidebar-user-image-width;
+    height: auto;
+  }
+
+  .info {
+    display: inline-block;
+    padding: 5px 5px 5px 10px;
+  }
+
+  .status,
+  .dropdown-menu {
+    font-size: $font-size-sm;
+  }
+}
+
+// Sidebar navigation menu
+.nav-sidebar {
+  // All levels
+  .nav-item {
+    > .nav-link {
+      margin-bottom: 0.2rem;
+      .right {
+        @include transition(transform $transition-fn $transition-speed);
+      }
+    }
+  }
+
+  .nav-link > p > .right {
+    position: absolute;
+    right: 1rem;
+    top: 12px;
+  }
+
+  .menu-open {
+    > .nav-treeview {
+      display: block;
+    }
+
+    > .nav-link {
+      .right {
+        @include rotate(-90deg);
+      }
+    }
+  }
+
+  // First Level
+  > .nav-item {
+    margin-bottom: 0;
+
+    .nav-icon {
+      text-align: center;
+      width: $sidebar-nav-icon-width;
+      font-size: 1.2rem;
+      margin-right: .2rem;
+    }
+
+    .float-right {
+      margin-top: 3px;
+    }
+  }
+
+  // Tree view menu
+  .nav-treeview {
+    display: none;
+    list-style: none;
+    padding: 0;
+
+    > .nav-item {
+      > .nav-link {
+        > .nav-icon {
+          width: $sidebar-nav-icon-width;
+        }
+      }
+    }
+  }
+
+  .nav-header {
+    font-size: .9rem;
+    padding: $nav-link-padding-y;
+
+    &:not(:first-of-type) {
+      padding: 1.7rem 1rem .5rem 1rem;
+    }
+  }
+
+  .nav-link p {
+    display: inline-block;
+    margin: 0;
+  }
+}
+
+#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;
+    }
+  }
+}
+
+// Sidebar variants
+@each $name, $color in $theme-colors {
+  .sidebar-dark-#{$name} {
+    @include skin-dark-sidebar($color)
+  }
+
+  .sidebar-light-#{$name} {
+    @include skin-light-sidebar($color)
+  }
+}
+
+

build/scss/_miscellaneous.scss

@@ -2,30 +2,12 @@
  * General: Miscellaneous
  * ----------------------
  */
-// 10px padding and margins
-.pad {
-  padding: 10px;
+a.text-muted:hover {
+  color: theme-color(primary) !important;
 }
 
-.margin {
-  margin: 10px;
-}
-
-.margin-bottom {
-  margin-bottom: 20px;
-}
-
-.margin-bottom-none {
-  margin-bottom: 0;
-}
-
-.margin-r-5 {
-  margin-right: 5px;
-}
-
-// Display inline
-.inline {
-  display: inline;
+.border-transparent {
+  border-color: transparent !important;
 }
 
 // Description Blocks
@@ -48,37 +30,16 @@
 }
 
 // Background colors
-.bg-red,
-.bg-yellow,
-.bg-aqua,
-.bg-blue,
-.bg-light-blue,
-.bg-green,
-.bg-navy,
-.bg-teal,
-.bg-olive,
-.bg-lime,
-.bg-orange,
-.bg-fuchsia,
-.bg-purple,
-.bg-maroon,
-.bg-black,
-.bg-red-active,
-.bg-yellow-active,
-.bg-aqua-active,
-.bg-blue-active,
-.bg-light-blue-active,
-.bg-green-active,
-.bg-navy-active,
-.bg-teal-active,
-.bg-olive-active,
-.bg-lime-active,
-.bg-orange-active,
-.bg-fuchsia-active,
-.bg-purple-active,
-.bg-maroon-active,
-.bg-black-active {
-  color: #fff;
+@each $name, $color in $theme-colors {
+  .bg-#{$name} {
+    &,
+    a {
+      color: color-yiq($color);
+    }
+    a {
+      text-decoration: underline;
+    }
+  }
 }
 
 .bg-gray {
@@ -87,137 +48,16 @@
 }
 
 .bg-gray-light {
-  background-color: #f7f7f7;
+  background-color: lighten($gray-200, 3%);
 }
 
 .bg-black {
   background-color: $black;
-}
-
-.bg-red {
-  background-color: theme-color("danger");
-}
-
-.bg-yellow {
-  background-color: theme-color("warning");
-}
-
-.bg-aqua {
-  background-color: theme-color("info");
-}
-
-.bg-blue {
-  background-color: $blue;
-}
-
-.bg-light-blue {
-  background-color: theme-color("primary");
-}
-
-.bg-green {
-  background-color: theme-color("success");
-}
-
-.bg-navy {
-  background-color: $navy;
-}
-
-.bg-teal {
-  background-color: $teal;
-}
-
-.bg-olive {
-  background-color: $olive;
-}
-
-.bg-lime {
-  background-color: $lime;
-}
-
-.bg-orange {
-  background-color: $orange;
-}
-
-.bg-fuchsia {
-  background-color: $fuchsia;
-}
-
-.bg-purple {
-  background-color: $purple;
-}
-
-.bg-maroon {
-  background-color: $maroon;
-}
-
-// Set of Active Background Colors
-.bg-gray-active {
-  color: #000;
-  background-color: darken($gray-500, 10%);
-}
-
-.bg-black-active {
-  background-color: darken($black, 10%);
-}
-
-.bg-red-active {
-  background-color: darken(theme-color("danger"), 6%);
-}
-
-.bg-yellow-active {
-  background-color: darken(theme-color("warning"), 6%);
-}
-
-.bg-aqua-active {
-  background-color: darken(theme-color("info"), 6%);
-}
-
-.bg-blue-active {
-  background-color: darken($blue, 10%);
-}
-
-.bg-light-blue-active {
-  background-color: darken(theme-color("primary"), 6%);
-}
-
-.bg-green-active {
-  background-color: darken(theme-color("success"), 5%);
-}
-
-.bg-navy-active {
-  background-color: darken($navy, 2%);
-}
-
-.bg-teal-active {
-  background-color: darken($teal, 5%);
-}
-
-.bg-olive-active {
-  background-color: darken($olive, 5%);
-}
-
-.bg-lime-active {
-  background-color: darken($lime, 5%);
-}
-
-.bg-orange-active {
-  background-color: darken($orange, 5%);
-}
-
-.bg-fuchsia-active {
-  background-color: darken($fuchsia, 5%);
-}
-
-.bg-purple-active {
-  background-color: darken($purple, 5%);
-}
-
-.bg-maroon-active {
-  background-color: darken($maroon, 3%);
+  color: color-yiq($black);
 }
 
 .bg-white {
-  background-color: #fff;
+  background-color: $white;
 }
 
 // Disabled!
@@ -225,71 +65,6 @@
   opacity: .65;
 }
 
-// Text colors
-.text-red {
-  color: theme-color("danger");
-}
-
-.text-yellow {
-  color: theme-color("warning");
-}
-
-.text-aqua {
-  color: theme-color("info");
-}
-
-.text-blue {
-  color: $blue;
-}
-
-.text-black {
-  color: $black;
-}
-
-.text-light-blue {
-  color: theme-color("primary");
-}
-
-.text-green {
-  color: theme-color("success");
-}
-
-.text-gray {
-  color: $gray-500;
-}
-
-.text-navy {
-  color: $navy;
-}
-
-.text-teal {
-  color: $teal;
-}
-
-.text-olive {
-  color: $olive;
-}
-
-.text-lime {
-  color: $lime;
-}
-
-.text-orange {
-  color: $orange;
-}
-
-.text-fuchsia {
-  color: $fuchsia;
-}
-
-.text-purple {
-  color: $purple;
-}
-
-.text-maroon {
-  color: $maroon;
-}
-
 .link-muted {
   color: darken($gray-500, 30%);
   &:hover,
@@ -316,16 +91,6 @@
   border: 0 !important;
 }
 
-// Remove padding
-.no-padding {
-  padding: 0 !important;
-}
-
-// Remove margins
-.no-margin {
-  margin: 0 !important;
-}
-
 // Remove box shadow
 .no-shadow {
   box-shadow: none !important;
@@ -353,20 +118,6 @@
   @include border-radius(0 !important);
 }
 
-.text-bold {
-  &, &.table td, &.table th {
-    font-weight: 700;
-  }
-}
-
-.text-sm {
-  font-size: $font-size-sm;
-}
-
-.text-xs {
-  font-size: $font-size-base;
-}
-
 // _fix for sparkline tooltip
 .jqstooltip {
   padding: 5px !important;
@@ -375,54 +126,11 @@
 }
 
 // Gradient Background colors
-.bg-teal-gradient {
-  @include gradient($teal, $teal, lighten($teal, 16%));
-  color: #fff;
-}
-
-.bg-light-blue-gradient {
-  @include gradient(theme-color("primary"), theme-color("primary"), lighten(theme-color("primary"), 12%));
-  color: #fff;
-}
-
-.bg-blue-gradient {
-  @include gradient($blue, $blue, lighten($blue, 7%));
-  color: #fff;
-}
-
-.bg-aqua-gradient {
-  @include gradient(theme-color("info"), theme-color("info"), lighten(theme-color("info"), 7%));
-  color: #fff;
-}
-
-.bg-yellow-gradient {
-  @include gradient(theme-color("warning"), theme-color("warning"), lighten(theme-color("warning"), 16%));
-  color: #fff;
-}
-
-.bg-purple-gradient {
-  @include gradient($purple, $purple, lighten($purple, 16%));
-  color: #fff;
-}
-
-.bg-green-gradient {
-  @include gradient(theme-color("success"), theme-color("success"), lighten(theme-color("success"), 7%));
-  color: #fff;
-}
-
-.bg-red-gradient {
-  @include gradient(theme-color("danger"), theme-color("danger"), lighten(theme-color("danger"), 10%));
-  color: #fff;
-}
-
-.bg-black-gradient {
-  @include gradient($black, $black, lighten($black, 10%));
-  color: #fff;
-}
-
-.bg-maroon-gradient {
-  @include gradient($maroon, $maroon, lighten($maroon, 10%));
-  color: #fff;
+@each $name, $color in $theme-colors {
+  .bg-#{$name}-gradient {
+    @include gradient($color, $color, lighten($color, 10%));
+    color: color-yiq($color);
+  }
 }
 
 // Description Block Extension
@@ -432,16 +140,6 @@
   }
 }
 
-// Remove top padding
-.no-pad-top {
-  padding-top: 0;
-}
-
-// Make position static
-.position-static {
-  position: static !important;
-}
-
 // List utility classes
 .list-header {
   font-size: 15px;
@@ -452,7 +150,7 @@
 
 .list-seperator {
   height: 1px;
-  background: $box-border-color;
+  background: $card-border-color;
   margin: 15px 0 9px 0;
 }
 
@@ -466,11 +164,6 @@
   }
 }
 
-// Light font weight
-.font-light {
-  font-weight: 300;
-}
-
 // User block
 .user-block {
   @include clearfix();
@@ -606,7 +299,7 @@
 
 // General attachemnt block
 .attachment-block {
-  border: 1px solid $box-border-color;
+  border: 1px solid $card-border-color;
   padding: 5px;
   margin-bottom: 10px;
   background: #f7f7f7;
@@ -649,25 +342,12 @@
   margin-bottom: 10px;
 }
 
-.full-opacity-hover {
-  opacity: .65;
-  &:hover {
-    opacity: 1;
-  }
-}
-
 // Charts
 .chart {
   position: relative;
   overflow: hidden;
-  width: 100%;
-  svg,
-  canvas {
-    width: 100% !important;
-  }
 }
 
-// Icons
-.icon-wide {
-  width: 30px;
+.flex-1 {
+  flex: 1;
 }

build/scss/_mixins.scss

@@ -44,7 +44,7 @@
 // Box solid color variantion creator
 @mixin box-solid-variant($color, $text-color: #fff) {
   border: 1px solid $color;
-  > .box-header {
+  > .card-header {
     color: $text-color;
     background: $color;
     background-color: $color;
@@ -60,7 +60,7 @@
   .right > .direct-chat-text {
     background: $bg-color;
     border-color: $bg-color;
-    color: $color;
+    color: color-yiq($bg-color);
     &:after,
     &:before {
       border-left-color: $bg-color;
@@ -106,17 +106,13 @@
 
 // Dark Sidebar Mixin
 @mixin skin-dark-sidebar($link-hover-border-color) {
-  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .main-sidebar,
-  .main-sidebar:before {
-    background-color: $sidebar-dark-bg;
-  }
+  // Sidebar background color
+  background-color: $sidebar-dark-bg;
 
   // User Panel (resides in the sidebar)
   .user-panel {
-    .info,
-    .status {
-      color: #fff;
+    a:hover {
+      color: $sidebar-dark-hover-color;
     }
 
     .status {
@@ -144,7 +140,7 @@
   .nav-sidebar > .nav-item {
     // links
     > .nav-link {
-      border-left: 3px solid transparent;
+      // border-left: 3px solid transparent;
       &:active,
       &:focus {
         color: $sidebar-dark-color;
@@ -153,26 +149,28 @@
 
     // Hover and active states
     &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    > .nav-link.active {
+    &:hover > .nav-link {
       color: $sidebar-dark-hover-color;
-      background: $sidebar-dark-hover-bg;
+      background-color: $sidebar-dark-hover-bg;
     }
 
     > .nav-link.active {
-      border-left-color: $link-hover-border-color;
+      color: $sidebar-dark-hover-color;
+      background-color: $link-hover-border-color;
+      @if $enable-shadows {
+        @extend .elevation-1;
+      }
     }
 
     // First Level Submenu
     > .nav-treeview {
-      margin: 0 1px;
       background: $sidebar-dark-submenu-bg;
     }
   }
 
   // Section Heading
   .nav-header {
-    color: darken($sidebar-dark-color, 20%);
+    color: lighten($sidebar-dark-color, 5%);
     background: inherit; //darken($sidebar-dark-bg, 3%);
   }
 
@@ -189,114 +187,119 @@
     > .nav-item {
       > .nav-link {
         color: $sidebar-dark-submenu-color;
-      }
-      > .nav-link.active,
-      > .nav-link:hover {
-        color: $sidebar-dark-submenu-hover-color;
-        background: transparent;
-      }
-    }
-  }
 
-  // Sidebar form
-  .sidebar-form {
-    .form-control {
-      background: $sidebar-dark-submenu-bg;
-      border: 0;
-      &,
-      &:focus + .form-icon {
-        color: $sidebar-dark-hover-color;
+        &:hover {
+          color: $sidebar-dark-submenu-hover-color;
+          background-color: $sidebar-dark-submenu-hover-bg
+        }
       }
-      &:focus {
-        background: lighten($sidebar-dark-submenu-bg, 7%);
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          color: $sidebar-dark-submenu-active-color;
+          background-color: $sidebar-dark-submenu-active-bg;
+        }
       }
     }
-    .form-icon {
-      color: $sidebar-dark-color;
-    }
   }
 }
 
 // Light Sidebar Mixin
-@mixin skin-light-sidebar($icon-active-color) {
+@mixin skin-light-sidebar($link-hover-border-color) {
   // Sidebar background color
-  .main-sidebar,
-  .main-sidebar:before {
-    background-color: $sidebar-light-bg;
-  }
-  .content-wrapper,
-  .main-footer {
-    border-left: 1px solid $gray-500;
-  }
+  background-color: $sidebar-light-bg;
+
   // User Panel (resides in the sidebar)
   .user-panel {
-    > .info,
-    > .info > .nav-link {
+    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
-  .sidebar-menu > .nav-item {
-    transition: border-left-color .3s ease;
+  .nav-sidebar > .nav-item {
     // links
     > .nav-link {
-      border-left: 3px solid transparent;
-      font-weight: 600;
+      // border-left: 3px solid transparent;
+      &:active,
       &:focus {
         color: $sidebar-light-color;
       }
     }
+
     // Hover and active states
-    &:hover > .nav-link,
-    &.active > .nav-link {
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
       color: $sidebar-light-hover-color;
-      background: $sidebar-light-hover-bg;
+      background-color: $sidebar-light-hover-bg;
     }
-    &:hover > .nav-link {
 
-    }
-    &.active {
-      border-left-color: $icon-active-color;
-      > .nav-link {
-        font-weight: 600;
+    > .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 Headning
+
+  // Section Heading
   .nav-header {
-    color: lighten($sidebar-light-color, 25%);
-    background: $sidebar-light-bg;
+    color: darken($sidebar-light-color, 5%);
+    background: inherit;
   }
+
   // All links within the sidebar menu
-  .sidebar .nav-link {
+  .sidebar a {
     color: $sidebar-light-color;
     &:hover {
       text-decoration: none;
     }
   }
+
   // All submenus
   .nav-treeview {
     > .nav-item {
       > .nav-link {
         color: $sidebar-light-submenu-color;
       }
-      &.active > .nav-link,
-      > .nav-link:hover {
-        color: $sidebar-light-submenu-hover-color;
-      }
-      &.active > .nav-link {
-        font-weight: 600;
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          color: $sidebar-light-submenu-active-color;
+          background-color: $sidebar-light-submenu-active-bg;
+        }
       }
-    }
-  }
-  @include media-breakpoint-up(sm) {
-    &.sidebar-mini.sidebar-collapse {
-      .sidebar-menu > li > .nav-treeview {
-        border-left: 1px solid $gray-500;
+
+      > .nav-link:hover {
+        background-color: $sidebar-light-submenu-hover-bg;
       }
     }
   }

build/scss/_modal.scss

@@ -16,65 +16,65 @@
 }
 
 .modal-header {
-  border-bottom-color: $box-border-color;
+  border-bottom-color: $card-border-color;
 }
 
 .modal-footer {
-  border-top-color: $box-border-color;
+  border-top-color: $card-border-color;
 }
 
 //Modal variants
 .modal-primary {
   .modal-body {
-    @extend .bg-light-blue;
+    @extend .bg-primary;
   }
   .modal-header,
   .modal-footer {
-    @extend .bg-light-blue-active;
+    @extend .bg-primary;
     border-color: darken(theme-color("primary"), 10%);
   }
 }
 
 .modal-warning {
   .modal-body {
-    @extend .bg-yellow;
+    @extend .bg-warning;
   }
   .modal-header,
   .modal-footer {
-    @extend .bg-yellow-active;
+    @extend .bg-warning;
     border-color: darken(theme-color("warning"), 10%);
   }
 }
 
 .modal-info {
   .modal-body {
-    @extend .bg-aqua;
+    @extend .bg-info;
   }
   .modal-header,
   .modal-footer {
-    @extend .bg-aqua-active;
+    @extend .bg-info;
     border-color: darken(theme-color("info"), 10%);
   }
 }
 
 .modal-success {
   .modal-body {
-    @extend .bg-green;
+    @extend .bg-success;
   }
   .modal-header,
   .modal-footer {
-    @extend .bg-green-active;
+    @extend .bg-success;
     border-color: darken(theme-color("success"), 10%);
   }
 }
 
 .modal-danger {
   .modal-body {
-    @extend .bg-red;
+    @extend .bg-danger;
   }
   .modal-header,
   .modal-footer {
-    @extend .bg-red-active;
+    @extend .bg-danger;
     border-color: darken(theme-color("danger"), 10%);
   }
 }

build/scss/_navs.scss

@@ -2,225 +2,3 @@
  * Component: Nav
  * --------------
  */
-
-.nav {
-  > li > a:hover,
-  > li > a:active,
-  > li > a:focus {
-    color: #444;
-    //background: #f7f7f7;
-  }
-}
-
-/* NAV PILLS */
-.nav-pills {
-  > li > a {
-    @include border-radius(0);
-    border-top: 3px solid transparent;
-    color: #444;
-    > .fa,
-    > .glyphicon,
-    > .ion {
-      margin-right: 5px;
-    }
-  }
-  > li.active > a,
-  > li.active > a:hover,
-  > li.active > a:focus {
-    border-top-color: theme-color("primary");
-  }
-  > li.active > a {
-    font-weight: 600;
-  }
-}
-
-/* NAV STACKED */
-.nav-stacked {
-  > li > a {
-    @include border-radius(0);
-    border-top: 0;
-    border-left: 3px solid transparent;
-    color: #444;
-  }
-  > li.active > a,
-  > li.active > a:hover {
-    background: transparent;
-    color: #444;
-    border-top: 0;
-    border-left-color: theme-color("primary");
-  }
-
-  > li.header {
-    border-bottom: 1px solid #ddd;
-    color: #777;
-    margin-bottom: 10px;
-    padding: 5px 10px;
-    text-transform: uppercase;
-  }
-}
-
-/* NAV TABS */
-.nav-tabs-custom {
-  margin-bottom: 20px;
-  background: #fff;
-  box-shadow: $box-boxshadow;
-  border-radius: $box-border-radius;
-  > .nav-tabs {
-    margin: 0;
-    border-bottom-color: #f4f4f4;
-    @include border-top-radius($box-border-radius);
-    > li {
-      border-top: 3px solid transparent;
-      margin-bottom: -2px;
-      > a {
-        color: #444;
-        @include border-radius(0);
-        &.text-muted {
-          color: #999;
-        }
-        &,
-        &:hover {
-          background: transparent;
-          margin: 0;
-        }
-        &:hover {
-          color: #999;
-        }
-      }
-      &:not(.active) {
-        > a:hover,
-        > a:focus,
-        > a:active {
-          border-color: transparent;
-        }
-      }
-      margin-right: 5px;
-    }
-
-    > li.active {
-      border-top-color: theme-color("primary");
-      & > a,
-      &:hover > a {
-        background-color: #fff;
-        color: #444;
-      }
-      > a {
-        border-top-color: transparent;
-        border-left-color: #f4f4f4;
-        border-right-color: #f4f4f4;
-      }
-
-    }
-
-    > li:first-of-type {
-      margin-left: 0;
-      &.active {
-        > a {
-          border-left-color: transparent;
-        }
-      }
-    }
-
-    //Pulled to the right
-    &.pull-right {
-      float: none !important;
-      > li {
-        float: right;
-      }
-      > li:first-of-type {
-        margin-right: 0;
-        > a {
-          border-left-width: 1px;
-        }
-        &.active {
-          > a {
-            border-left-color: #f4f4f4;
-            border-right-color: transparent;
-          }
-        }
-      }
-    }
-
-    > li.header {
-      line-height: 35px;
-      padding: 0 10px;
-      font-size: 20px;
-      color: #444;
-      > .fa,
-      > .glyphicon,
-      > .ion {
-        margin-right: 5px;
-      }
-    }
-  }
-
-  > .tab-content {
-    background: #fff;
-    padding: 10px;
-    @include border-bottom-radius($box-border-radius);
-  }
-
-  .dropdown.open > a {
-    &:active,
-    &:focus {
-      background: transparent;
-      color: #999;
-    }
-  }
-  // Tab color variations
-  &.tab-primary {
-    > .nav-tabs {
-      > li.active {
-        border-top-color: theme-color("primary");
-      }
-    }
-  }
-  &.tab-info {
-    > .nav-tabs {
-      > li.active {
-        border-top-color: theme-color("info");
-      }
-    }
-  }
-  &.tab-danger {
-    > .nav-tabs {
-      > li.active {
-        border-top-color: theme-color("danger");
-      }
-    }
-  }
-  &.tab-warning {
-    > .nav-tabs {
-      > li.active {
-        border-top-color: theme-color("warning");
-      }
-    }
-  }
-  &.tab-success {
-    > .nav-tabs {
-      > li.active {
-        border-top-color: theme-color("success");
-      }
-    }
-  }
-  &.tab-default {
-    > .nav-tabs {
-      > li.active {
-        border-top-color: $gray-500;
-      }
-    }
-  }
-}
-
-/* PAGINATION */
-.pagination {
-  > li > a {
-    background: #fafafa;
-    color: #666;
-  }
-  &.pagination-flat {
-    > li > a {
-      @include border-radius(0 !important);
-    }
-  }
-}

build/scss/_products.scss

@@ -7,11 +7,12 @@
   margin: 0;
   padding: 0;
   > .item {
-    @include border-radius($box-border-radius);
-    @include box-shadow($box-boxshadow);
+    @if $enable-rounded {
+      @include border-radius($border-radius);
+    }
     @include clearfix();
     padding: 10px 0;
-    background: #fff;
+    background: $white;
   }
   .product-img {
     float: left;
@@ -28,17 +29,16 @@
   }
   .product-description {
     display: block;
-    color: #999;
+    color: $gray-600;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
 
-.product-list-in-box > .item {
-  @include box-shadow(none);
+.product-list-in-card > .item {
   @include border-radius(0);
-  border-bottom: 1px solid $box-border-color;
+  border-bottom: 1px solid $card-border-color;
   &:last-of-type {
     border-bottom-width: 0;
   }

build/scss/_progress-bars.scss

@@ -9,6 +9,10 @@
   @include border-radius($progress-bar-border-radius);
 }
 
+.progress-group {
+  @extend .mb-2;
+}
+
 // size variation
 .progress-sm {
   height: 10px;
@@ -51,17 +55,6 @@
   }
 }
 
-//Progress Groups
-.progress-group {
-  .progress-text {
-    //display: inline-block;
-    //margin-bottom: 5px;
-  }
-  .progress-number {
-    //float: right;
-  }
-}
-
 // Remove margins from progress bars when put in a table
 .table {
   tr > td .progress {

build/scss/_select2.scss

@@ -101,14 +101,14 @@
   background-color: theme-color("primary");
   border-color: darken(theme-color("primary"), 5%);
   padding: 1px 10px;
-  color: #fff;
+  color: $white;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
   margin-right: 5px;
   color: rgba(255, 255, 255, 0.7);
   &:hover {
-    color: #fff;
+    color: $white;
   }
 }
 

build/scss/_sidebar-mini.scss

@@ -5,105 +5,90 @@
 // 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(md) {
+  @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;
+    }
+
     // When the sidebar is collapsed...
     &.sidebar-collapse {
-      // Apply the new margining to the main content and footer
+      .d-hidden-mini {
+        display: none;
+      }
+
+      // Apply the new margins to the main content and footer
       .content-wrapper,
-      .main-footer {
+      .main-footer,
+      .main-header {
         margin-left: $sidebar-mini-width !important;
       }
 
+      // Make the sidebar headers
+      .nav-sidebar .nav-header {
+        display: none;
+      }
+
+      .sidebar .user-panel > .info,
+      .nav-sidebar .nav-link p,
+      .brand-text {
+        opacity: 0;
+        margin-left: -10px;
+      }
+
       // Modify the sidebar to shrink instead of disappearing
       .main-sidebar {
         &,
         &:before {
           // Don't go away! Just shrink
           margin-left: 0;
-          width: $sidebar-mini-width !important;
+          width: $sidebar-mini-width;
         }
 
         .user-panel {
-          margin-bottom: 10px;
-
           .image {
             float: none;
           }
         }
-      }
-
-      .nav-sidebar {
-        > .nav-label {
-          border-bottom-right-radius: $border-radius;
-        }
 
-        > .nav-item {
-          position: relative;
-          z-index: 999;
-
-          > .nav-link {
-            margin-right: 0;
-
-            > .nav-icon {
-              width: 100%;
-              text-align: center;
+        &:hover {
+          width: $sidebar-width;
+          .user-panel {
+            text-align: left;
+            .image {
+              float: left;
             }
           }
 
-          > .nav-treeview {
-            // Add some padding to the treeview menu
-            padding-top: 5px;
-            padding-bottom: 5px;
+          .user-panel > .info,
+          .nav-sidebar .nav-link p,
+          .brand-text {
+            opacity: 1;
+            margin-left: 0;
+            display: inline-block;
           }
 
-          // Show menu items on hover
-          &:hover {
-            > .nav-link {
-              overflow: visible;
-            }
-
-            > .nav-link > .text,
-            > .nav-treeview {
-              display: block !important;
-              position: absolute;
-              width: $sidebar-width - ($sidebar-mini-width/2);
-              left: $sidebar-mini-width;
-            }
-
-            // position the header & treeview menus
-            > .nav-link > .text {
-              top: 0;
-              margin-left: -3px;
-              padding: $nav-link-padding-x $nav-link-padding-y;
-              background-color: inherit;
-              @include border-right-radius($border-radius);
-            }
+          .brand-image {
+            margin-right: .5rem;
+          }
 
-            &.has-treeview > .nav-link > .text {
-              border-bottom-right-radius: 0;
-            }
+          // Make the sidebar links, menus, labels, badges
+          // and angle icons disappear
+          .sidebar-form,
+          .user-panel > .info {
+            display: block !important;
+            -webkit-transform: translateZ(0);
+          }
 
-            > .nav-treeview {
-              top: $nav-link-padding-y;
-              margin-left: 0;
-              border-bottom-right-radius: $border-radius;
-            }
+          .nav-sidebar > .nav-item > .nav-link > span {
+            display: inline-block !important;
           }
         }
       }
 
-      // Make the sidebar links, menus, labels, badges
-      // and angle icons disappear
-      .main-sidebar .user-panel > .info,
-      .sidebar-form,
-      .nav-sidebar > .nav-item > .nav-link > span,
-      .nav-sidebar > .nav-item > .nav-treeview,
-      .nav-sidebar > .nav-item > .nav-link > .pull-right,
-      .nav-sidebar .nav-header {
-        display: none !important;
-        -webkit-transform: translateZ(0);
-      }
-
       // Make an element visible only when sidebar mini is active
       .visible-sidebar-mini {
         display: block !important;
@@ -112,17 +97,6 @@
   }
 }
 
-// A fix for text overflow while transitioning from sidebar mini to full sidebar
-.nav-sidebar,
-.nav-sidebar > .nav-header {
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.nav-sidebar .nav-link {
-  white-space: normal;
-}
-
 .nav-sidebar {
   position: relative;
   &:hover {
@@ -138,7 +112,7 @@
 
 .nav-sidebar .nav-item > .nav-link {
   position: relative;
-  > .pull-right {
+  > .float-right {
     position: absolute;
     right: 10px;
     top: 50%;
@@ -146,7 +120,8 @@
   }
 }
 
-// Make an element visible only when sidebar mini is active
-.visible-sidebar-mini {
-  display: none !important;
+.sidebar .nav-link p,
+.main-sidebar .brand-text,
+.sidebar .user-panel .info {
+  @include transition(margin-left $transition-speed linear, opacity .5s ease)
 }

build/scss/_sidebar.scss

@@ -1,125 +0,0 @@
-/*
- * Component: Sidebar
- * ------------------
- */
-
-.sidebar {
-  padding-bottom: 10px;
-}
-
-//Sidebar user panel
-.user-panel {
-  padding: 10px;
-  margin-bottom: 6px;
-
-  .image {
-    float: left;
-  }
-
-  img {
-    width: 100%;
-    max-width: 45px;
-    height: auto;
-  }
-
-  .info {
-    padding: 5px 5px 5px 10px;
-    margin-left: 45px;
-  }
-
-  .status {
-    padding: 3px 7px;
-    border: 0;
-  }
-
-  h6 {
-    overflow: hidden;
-    white-space: nowrap;
-    margin: 0 0 3px 0;
-  }
-
-  .status,
-  .dropdown-menu {
-    font-size: $font-size-sm;
-  }
-}
-
-// Sidebar navigation menu
-.nav-sidebar {
-  //First Level
-  > .nav-item {
-    margin-top: 0 !important;
-
-    > .nav-link {
-      @include border-radius(0);
-
-      > .nav-icon {
-        width: 26px;
-      }
-    }
-
-    .float-xs-right {
-      margin-top: 3px;
-    }
-  }
-
-  // All other levels
-  .nav-link > .fa-angle-left {
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin-right: 10px;
-    margin-top: 3px;
-  }
-
-  .menu-open {
-    > .nav-treeview {
-      display: block;
-    }
-
-    > .nav-link {
-      .fa-angle-left {
-        @include rotate(-90deg);
-      }
-    }
-  }
-
-  // Tree view menu
-  .nav-treeview {
-    display: none;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    padding-left: 5px;
-
-    .nav-treeview {
-      padding-left: 20px;
-    }
-
-    > .nav-item {
-      margin: 0;
-      > .nav-link {
-        padding: 5px 5px 5px 15px;
-        display: block;
-        > .nav-icon {
-          width: 30px;
-        }
-      }
-    }
-  }
-
-  .nav-header {
-    font-size: .9em;
-    padding: $nav-link-padding-y;
-
-    &:not(:first-of-type) {
-      padding: 1.7em 1em .5em 1em;
-    }
-  }
-}
-
-.sidebar-form {
-  .form-control {
-    border-radius: 0;
-  }
-}

build/scss/_site-search.scss

@@ -55,8 +55,8 @@
 
   .site-search-submit {
     right: 0;
-    background: #fff;
+    background: $white;
     border: 0;
     padding: 0;
   }
-}
+}

build/scss/_small-box.scss

@@ -4,11 +4,19 @@
  */
 
 .small-box {
-  @include border-radius(2px);
+  @if $enable-rounded {
+    @include border-radius($border-radius);
+  }
+
+  @if $enable-shadows {
+    box-shadow: $card-shadow;
+  }
+
+  @extend .mb-3;
   position: relative;
   display: block;
   margin-bottom: 20px;
-  box-shadow: $box-boxshadow;
+
   // content wrapper
   > .inner {
     padding: 10px;
@@ -18,14 +26,14 @@
     position: relative;
     text-align: center;
     padding: 3px 0;
-    color: #fff;
+    color: $white;
     color: rgba(255, 255, 255, 0.8);
     display: block;
     z-index: 10;
     background: rgba(0, 0, 0, 0.1);
     text-decoration: none;
     &:hover {
-      color: #fff;
+      color: $white;
       background: rgba(0, 0, 0, 0.15);
     }
   }
@@ -50,7 +58,7 @@
   }
 
   h3, p {
-    z-index: 5px;
+    z-index: 5;
   }
 
   // the icon
@@ -67,7 +75,6 @@
   // Small box hover state
   &:hover {
     text-decoration: none;
-    color: #f9f9f9;
     // Animate icons on small box hover
     .icon {
       font-size: 95px;

build/scss/_social-widgets.scss

@@ -3,7 +3,7 @@
  * -------------------------
  */
 //General widget style
-.box-widget {
+.card-widget {
   border: none;
   position: relative;
 }
@@ -12,9 +12,11 @@
 .widget-user {
   //User name container
   .widget-user-header {
-    padding: 20px;
+    padding: 1rem;
     height: 120px;
-    @include border-top-radius($box-border-radius);
+    @if $enable-rounded {
+      @include border-top-radius($border-radius);
+    }
   }
   //User name
   .widget-user-username {
@@ -37,11 +39,12 @@
     > img {
       width: 90px;
       height: auto;
-      border: 3px solid #fff;
+      border: 3px solid $white;
     }
   }
-  .box-footer {
-    padding-top: 30px;
+
+  .card-footer {
+    padding-top: 40px;
   }
 }
 
@@ -49,8 +52,8 @@
 .widget-user-2 {
   //User name container
   .widget-user-header {
-    padding: 20px;
-    @include border-top-radius($box-border-radius);
+    padding: 1rem;
+    @include border-top-radius($border-radius);
   }
   //User name
   .widget-user-username {

build/scss/_table.scss

@@ -3,49 +3,6 @@
  * ----------------
  */
 
-.table {
-  //Cells
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        border-top: 1px solid $box-border-color;
-      }
-    }
-  }
-  //thead cells
-  > thead > tr > th {
-    border-bottom: 2px solid $box-border-color;
-  }
-  //progress bars in tables
-  tr td .progress {
-    margin-top: 5px;
-  }
-}
-
-//Bordered Table
-.table-bordered {
-  border: 1px solid $box-border-color;
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        border: 1px solid $box-border-color;
-      }
-    }
-  }
-  > thead > tr {
-    > th,
-    > td {
-      border-bottom-width: 2px;
-    }
-  }
-}
-
 .table.no-border {
   &,
   td,
@@ -54,18 +11,32 @@
   }
 }
 
-/* .text-xs-center in tables */
-table.text-xs-center {
+// .text-center in tables
+.table.text-center {
   &, td, th {
     text-align: center;
   }
 }
 
-.table.align {
-  th {
-    text-align: left;
+.table-valign-middle {
+  thead > tr > th,
+  thead > tr > td,
+  tbody > tr > th,
+  tbody > tr > td {
+    vertical-align: middle;
   }
-  td {
-    text-align: right;
+}
+
+.card-body.p-0 .table {
+  thead > tr > th,
+  thead > tr > td,
+  tbody > tr > th,
+  tbody > tr > td {
+    &:first-of-type {
+      @extend .pl-4;
+    }
+    &:last-of-type {
+      @extend .pr-4;
+    }
   }
 }

build/scss/_text.scss

@@ -0,0 +1,21 @@
+.text-bold {
+  &, &.table td, &.table th {
+    font-weight: 700;
+  }
+}
+
+.text-sm {
+  font-size: $font-size-sm;
+}
+
+.text-xs {
+  font-size: $font-size-base;
+}
+
+.text-lg {
+  font-size: $font-size-lg;
+}
+
+.text-xl {
+  font-size: $font-size-xl;
+}

build/scss/_timeline.scss

@@ -30,10 +30,10 @@
 
     // The content
     > .timeline-item {
-      @include box-shadow($box-boxshadow);
-      @include border-radius($box-border-radius);
+      @include box-shadow($card-shadow);
+      @include border-radius($border-radius);
       margin-top: 0;
-      background: #fff;
+      background: $white;
       color: #444;
       margin-left: 60px;
       margin-right: 15px;
@@ -50,7 +50,7 @@
       > .timeline-header {
         margin: 0;
         color: #555;
-        border-bottom: 1px solid $box-border-color;
+        border-bottom: 1px solid $card-border-color;
         padding: 10px;
         font-size: 16px;
         line-height: 1.1;
@@ -89,7 +89,7 @@
       font-weight: 600;
       padding: 5px;
       display: inline-block;
-      background-color: #fff;
+      background-color: $white;
 
       @include border-radius(4px);
     }

build/scss/_variables.scss

@@ -1,10 +1,6 @@
 // AdminLTE 3 Variables.less
 // =========================
 
-// PATHS
-// --------------------------------------------------------
-$boxed-layout-bg-image-path: "/css/img/boxed-bg.jpg" !default;
-
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
@@ -22,80 +18,105 @@ $gray-x-light: #d2d6de !default;
 // LAYOUT
 // --------------------------------------------------------
 
-$font-size-root: 16px !default;
+$font-size-root: 1rem !default;
+
+// Sidebar
+$sidebar-width: 250px !default;
+$sidebar-padding-x: 0.5rem !default;
+$sidebar-padding-y: 0 !default;
 
-// Side bar and logo width
-$sidebar-width: 230px !default;
 // Boxed layout maximum width
 $boxed-layout-max-width: 1250px !default;
+
 // When to show the smaller logo
 $screen-header-collapse: map-get($grid-breakpoints, md) !default;
 
-// Link colors (aka: <a> tags)
-$link-color: theme-color("primary") !default;
-$link-hover-color: lighten($link-color, 15%) !default;
-
 // Body background (Affects main content background only)
-$main-bg: $gray-100 !default;
+$main-bg: #f4f6f9 !default;
+
+// Content padding
+$content-padding-y: 0 !default;
+$content-padding-x: $navbar-padding-x !default;
 
 // MAIN HEADER
 // --------------------------------------------------------
-$main-header-link-padding-y: 15px !default;
-$main-header-link-padding-x: 15px !default;
-$main-header-brand-padding-y: 12px !default;
-$main-header-brand-padding-x: $main-header-brand-padding-y !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 skins
+$main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
+$main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-form-control-focused-color: $gray-800 !default;
+$main-header-dark-form-control-border: 0 !default;
+$main-header-dark-form-control-focused-border: 0 !default;
+$main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
+
+$main-header-light-form-control-bg: darken($gray-100, 2%) !default;
+$main-header-light-form-control-focused-bg: $gray-200 !default;
+$main-header-light-form-control-focused-color: $gray-800 !default;
+$main-header-light-form-control-border: 0 !default;
+$main-header-light-form-control-focused-border: 0 !default;
+$main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
+
 // MAIN FOOTER
 // --------------------------------------------------------
 $main-footer-padding: 15px !default;
-$main-footer-border-top-width: 2px !default;
-$main-footer-border-top: $main-footer-border-top-width solid darken($main-bg, 10%) !default;
-$main-footer-height: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) + $main-footer-border-top-width !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;
 
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
 // Dark sidebar
-$sidebar-dark-bg: #2c333c !default; //#222d32 !default;
-$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 4%) !default;
-$sidebar-dark-color: #C2C7D0 !default; //lighten($sidebar-dark-bg, 60%) !default;
-$sidebar-dark-hover-color: #fff !default;
-$sidebar-dark-submenu-bg: lighten($sidebar-dark-bg, 5%) !default;
-$sidebar-dark-submenu-color: #C2C7D0 !default; //lighten($sidebar-dark-submenu-bg, 40%) !default;
-$sidebar-dark-submenu-hover-color: #fff !default;
+$sidebar-dark-bg: $dark !default;
+$sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
+$sidebar-dark-color: #C2C7D0 !default;
+$sidebar-dark-hover-color: $white !default;
+$sidebar-dark-active-color: $white !default;
+$sidebar-dark-submenu-bg: transparent !default;
+$sidebar-dark-submenu-color: #C2C7D0 !default;
+$sidebar-dark-submenu-hover-color: $white !default;
+$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
+$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
+$sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
+$sidebar-dark-header-color: $white !default;
 
 // Light sidebar
-$sidebar-light-bg: #f9fafc !default;
+$sidebar-light-bg: $white !default;
 $sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%) !default;
-$sidebar-light-color: #444 !default;
-$sidebar-light-hover-color: #000 !default;
-$sidebar-light-submenu-bg: $sidebar-light-hover-bg !default;
+$sidebar-light-color: $gray-800 !default;
+$sidebar-light-hover-color: $gray-900 !default;
+$sidebar-light-active-color: $white !default;
+$sidebar-light-submenu-bg: transparent !default;
 $sidebar-light-submenu-color: #777 !default;
 $sidebar-light-submenu-hover-color: #000 !default;
+$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
+$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
+$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
+$sidebar-light-header-color: $gray-800 !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
-$sidebar-mini-width: 55px !default;
+$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
+$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2);
+$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2);
 
 // CONTROL SIDEBAR
 // --------------------------------------------------------
 $control-sidebar-width: $sidebar-width !default;
 
-// BOXES
+// Cards
 // --------------------------------------------------------
-$box-border-color: #f4f4f4 !default;
-$box-border-radius: 3px !default;
-$box-footer-bg: #fff !default;
-$box-boxshadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
-$box-padding: 10px !default;
-
-// Box variants
-$box-default-border-top-color: $gray-x-light !default; // #d2d6de !default;
-
-// BUTTONS
-// --------------------------------------------------------
-$btn-boxshadow: none !default;
+$card-border-color: #f4f4f4 !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;
 
 // PROGRESS BARS
 // --------------------------------------------------------
@@ -114,9 +135,19 @@ $direct-chat-default-msg-border-color: $gray-x-light !default;
 // --------------------------------------------------------
 $attachment-border-radius: 3px !default;
 
+// Z-INDEX
+// --------------------------------------------------------
+$zindex-main-header: 1000 !default;
+$zindex-main-sidebar: 1100 !default;
+$zindex-sidebar-mini-links: 010 !default;
+
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
 
 // Transition global options
 $transition-speed: 0.3s !default;
-$transition-fn: ease-in-out !default;
+$transition-fn: ease-in-out !default;
+
+// TEXT
+// --------------------------------------------------------
+$font-size-xl: ($font-size-base * 2);

build/scss/skins/_all-skins.scss

@@ -1,13 +0,0 @@
-//All skins in one file
-@import "skin-blue";
-@import "skin-blue-light";
-@import "skin-black";
-@import "skin-black-light";
-@import "skin-green";
-@import "skin-green-light";
-@import "skin-red";
-@import "skin-red-light";
-@import "skin-yellow";
-@import "skin-yellow-light";
-@import "skin-purple";
-@import "skin-purple-light";

build/scss/skins/skin-black-light.scss

@@ -1,54 +0,0 @@
-/*
- * Skin: Black
- * -----------
- */
-
-/* skin-black navbar */
-.skin-black-light {
-  //Navbar & Logo
-  .main-header {
-    @include box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
-    .navbar-toggle {
-      color: #333;
-    }
-    .navbar-brand {
-      color: #333;
-      border-right: 1px solid #eee;
-    }
-    > .navbar {
-      @include navbar-variant(#fff, #333, #999, #fff);
-      > .sidebar-toggle {
-        color: #333;
-        border-right: 1px solid #eee;
-      }
-      .navbar-nav {
-        > li > a {
-          border-right: 1px solid #eee;
-        }
-      }
-      .navbar-custom-menu .navbar-nav,
-      .navbar-right {
-        > li {
-          > a {
-            border-left: 1px solid #eee;
-            border-right-width: 0;
-          }
-        }
-      }
-    }
-    > .logo {
-      @include logo-variant(#fff, #333);
-      border-right: 1px solid #eee;
-      @media (max-width: $screen-header-collapse) {
-        @include logo-variant(#222, #fff);
-        border-right: none;
-      }
-    }
-
-    li.user-header {
-      background-color: #222;
-    }
-  }
-  //Create the sidebar skin
-  @include skin-light-sidebar(#fff);
-}

build/scss/skins/skin-black.scss

@@ -1,55 +0,0 @@
-/*
- * Skin: Black
- * -----------
- */
-
-/* skin-black navbar */
-.skin-black {
-  //Navbar & Logo
-  .main-header {
-    @include box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
-    .navbar-toggle {
-      color: #333;
-    }
-    .navbar-brand {
-      color: #333;
-      border-right: 1px solid #eee;
-    }
-    > .navbar {
-      @include navbar-variant(#fff, #333, #999, #fff);
-      > .sidebar-toggle {
-        color: #333;
-        border-right: 1px solid #eee;
-      }
-      .navbar-nav {
-        > li > a {
-          border-right: 1px solid #eee;
-        }
-      }
-      .navbar-custom-menu .navbar-nav,
-      .navbar-right {
-        > li {
-          > a {
-            border-left: 1px solid #eee;
-            border-right-width: 0;
-          }
-        }
-      }
-    }
-    > .logo {
-      @include logo-variant(#fff, #333);
-      border-right: 1px solid #eee;
-      @media (max-width: $screen-header-collapse) {
-        @include logo-variant(#222, #fff);
-        border-right: none;
-      }
-    }
-
-    li.user-header {
-      background-color: #222;
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-dark-sidebar(#fff);
-}

build/scss/skins/skin-blue-light.scss

@@ -1,52 +0,0 @@
-/*
- * Skin: Blue
- * ----------
- */
-
-.skin-blue-light {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("primary"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("primary"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("primary"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(theme-color("primary"));
-    }
-
-    li.user-header {
-      background-color: theme-color("primary");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-light-sidebar(theme-color("primary"));
-  .main-footer {
-    border-top-color: $gray-500;
-  }
-}
-
-.skin-blue.layout-top-nav .main-header > .logo {
-  @include logo-variant(theme-color("primary"));
-}

build/scss/skins/skin-blue.scss

@@ -1,48 +0,0 @@
-/*
- * Skin: Blue
- * ----------
- */
-.skin-blue {
-  //Navbar
-  .main-header {/*
-    .navbar {
-      @include navbar-variant(theme-color("primary"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("primary"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("primary"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }*/
-    //Logo
-    .logo {
-      @include logo-variant(darken(theme-color("primary"), 5%));
-    }
-
-    li.user-header {
-      background-color: theme-color("primary");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-dark-sidebar(theme-color("primary"));
-}
-
-.skin-blue.layout-top-nav .main-header > .logo {
-  @include logo-variant(theme-color("primary"));
-}

build/scss/skins/skin-green-light.scss

@@ -1,46 +0,0 @@
-/*
- * Skin: Green
- * -----------
- */
-
-.skin-green-light {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("success"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("success"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("success"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(theme-color("success"));
-    }
-
-    li.user-header {
-      background-color: theme-color("success");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-light-sidebar(theme-color("success"));
-
-}

build/scss/skins/skin-green.scss

@@ -1,46 +0,0 @@
-/*
- * Skin: Green
- * -----------
- */
-
-.skin-green {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("success"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("success"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("success"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(darken(theme-color("success"), 5%));
-    }
-
-    li.user-header {
-      background-color: theme-color("success");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-dark-sidebar(theme-color("success"));
-
-}

build/scss/skins/skin-purple-light.scss

@@ -1,45 +0,0 @@
-/*
- * Skin: Purple
- * ------------
- */
-
-.skin-purple-light {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant($purple, #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken($purple, 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken($purple, 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant($purple);
-    }
-
-    li.user-header {
-      background-color: $purple;
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-light-sidebar($purple);
-}

build/scss/skins/skin-purple.scss

@@ -1,45 +0,0 @@
-/*
- * Skin: Purple
- * ------------
- */
-
-.skin-purple {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant($purple, #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken($purple, 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken($purple, 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(darken($purple, 5%));
-    }
-
-    li.user-header {
-      background-color: $purple;
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-dark-sidebar($purple);
-}

build/scss/skins/skin-red-light.scss

@@ -1,45 +0,0 @@
-/*
- * Skin: Red
- * ---------
- */
-
-.skin-red-light {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("danger"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("danger"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("danger"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(theme-color("danger"));
-    }
-
-    li.user-header {
-      background-color: theme-color("danger");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-light-sidebar(theme-color("danger"));
-}

build/scss/skins/skin-red.scss

@@ -1,45 +0,0 @@
-/*
- * Skin: Red
- * ---------
- */
-
-.skin-red {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("danger"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("danger"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("danger"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(darken(theme-color("danger"), 5%));
-    }
-
-    li.user-header {
-      background-color: theme-color("danger");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-dark-sidebar(theme-color("danger"));
-}

build/scss/skins/skin-yellow-light.scss

@@ -1,45 +0,0 @@
-/*
- * Skin: Yellow
- * ------------
- */
-
-.skin-yellow-light {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("warning"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("warning"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("warning"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(theme-color("warning"));
-    }
-
-    li.user-header {
-      background-color: theme-color("warning");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-light-sidebar(theme-color("warning"));
-}

build/scss/skins/skin-yellow.scss

@@ -1,45 +0,0 @@
-/*
- * Skin: Yellow
- * ------------
- */
-
-.skin-yellow {
-  //Navbar
-  .main-header {
-    .navbar {
-      @include navbar-variant(theme-color("warning"), #fff);
-      .sidebar-toggle {
-        color: #fff;
-        &:hover {
-          background-color: darken(theme-color("warning"), 5%);
-        }
-      }
-      @media (max-width: $screen-header-collapse) {
-        .dropdown-menu {
-          li {
-            &.divider {
-              background-color: rgba(255, 255, 255, 0.1);
-            }
-            a {
-              color: #fff;
-              &:hover {
-                background: darken(theme-color("warning"), 5%);
-              }
-            }
-          }
-        }
-      }
-    }
-    //Logo
-    .logo {
-      @include logo-variant(darken(theme-color("warning"), 5%));
-    }
-
-    li.user-header {
-      background-color: theme-color("warning");
-    }
-  }
-
-  //Create the sidebar skin
-  @include skin-dark-sidebar(theme-color("warning"));
-}

changelog

@@ -1,104 +0,0 @@
-CHANGE LOG:
-v2.3.1:
-- Fix sidebar issue #676
-- Fix BootLint warnings and errors
-- Minor bug fixes and code reformat
-
-v2.3.0:
-- Added social widgets (found in the widgets page)
-- Added profile page
-- Fix issue #430 (requires ```.hold-transition``` to be added to ```<body>```)
-- Fix issue #578
-- Fix issue #579
-
-v2.2.1:
-- Bug Fixes
-- Removed many ```!important``` statements in css
-- Activate boxWidget automatically when created after the page has loaded
-- Activate sidebar menu treeview links automatically when created after the page has loaded
-- Updated Font Awesome thanks to @Dennis14e
-- Added JSHint to Grunt tasks (Find JS errors)
-- Added CSSLint to Grunt tasks (Find CSS errors)
-- Added Image to Grunt tasks (compress images)
-- Added Clean to Grunt tasks (remove unwanted files like uncompressed images)
-- Updated Bootstrap to 3.3.5
-
-v2.2.0:
-- Bug fixes
-- Added support for [Select2](https://select2.github.io/)
-- Updated ChartJS
-
-v2.1.2:
-- Added explicit BoxWidget activation function issue #450
-- Crushed some bugs
-
-v2.1.1:
-- Fix version error
-
-v2.1.0:
-- Update Ion Icons
-- Added right sidebar ```.control-sidebar```
-- Control sidebar has 2 open effects: slide over content and push content
-- Control sidebar converts to always slide over content on small screens
-- Added 6 new light sidebar skins
-- Updated demo menu
-- Added ChartJS preview page
-- Fixed some minor bugs
-- Added light control sidebar skin
-- Added expand on hover option for sidebar mini
-- Added fixed control sidebar layout
-
-v2.0.5:
-- Fixed issue #288
-
-v2.0.4:
-- Fixed bower.json to pick up newest release.
-
-v2.0.3:
-- Bug fixes
-- Fixed extra page when printing issue #264
-- Updated documentation and fixed links scrolling issue
-- Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
-- Fixed sidebar stretching issue #275
-- Fixed checkbox out of bounds issue in WYSIHTML5 editor.
-
-v2.0.2:
-- Solved issue with hidden arrow in select inputs.
-
-v2.0.1:
-- Updated README.md
-- Fixed versioning issue in CSS, LESS, and JS
-- Updated box-shadow for boxes
-- Updated docs
-
-v2.0.0
-- Major layout bug fixes
-- Change in layout mark up
-- Added transitions to the sidebar
-- New skins and modified previous skins
-- Change in color scheme to a more complementing scheme
-- Added footer support
-- Removed pace.js from the main app.js
-- Added support for collapsed sidebar as an initial state (add .sidebar-collapse to the body tag)
-- Added boxed layout (.layout-boxed)
-- Enhanced consistency in padding and margining
-- Updated Bootstrap to 3.3.2
-- Fixed navbar dropdown menu on small screens positioning issues.
-- Updated Ion Icons to 2.0.0
-- Updated FontAwesome to 4.3.0
-- Added ChartJS 1.0.1
-- Removed iCheck dependency
-- Created Dashboard 2.0
-- Created new Chat widget (DirectChat)
-- Added transitions to DirectChat
-- Added contacts pane to DirectChat
-- Changed .right-side to .content-wrapper
-- Changed .navbar-right to .navbar-custom-menu
-- Removed unused files
-- Updated lockscreen style (HTML markup changed!)
-- Updated Login & Registration pages (HTML markup changed!)
-- Updated buttons style.
-- Enhanced border-radius consistency
-- Added mailbox: inbox, read, and compose pages
-- Bootstrap & jQuery are now hosted locally
-- Created documentation.

dist/css/plugins/bootstrap/css/bootstrap-reboot.css

@@ -1,342 +0,0 @@
-/*!
- * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
- * Copyright 2011-2017 The Bootstrap Authors
- * Copyright 2011-2017 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: transparent;
-}
-
-@-ms-viewport {
-  width: device-width;
-}
-
-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  text-align: left;
-  background-color: #fff;
-}
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-abbr[title],
-abbr[data-original-title] {
-  text-decoration: underline;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-  cursor: help;
-  border-bottom: 0;
-}
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dd {
-  margin-bottom: .5rem;
-  margin-left: 0;
-}
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-dfn {
-  font-style: italic;
-}
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-}
-
-sup {
-  top: -.5em;
-}
-
-a {
-  color: #007bff;
-  text-decoration: none;
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-
-a:hover {
-  color: #0056b3;
-  text-decoration: underline;
-}
-
-a:not([href]):not([tabindex]) {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):focus {
-  outline: 0;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-pre {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  overflow: auto;
-  -ms-overflow-style: scrollbar;
-}
-
-figure {
-  margin: 0 0 1rem;
-}
-
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-a,
-area,
-button,
-[role="button"],
-input:not([type="range"]),
-label,
-select,
-summary,
-textarea {
-  -ms-touch-action: manipulation;
-      touch-action: manipulation;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  color: #868e96;
-  text-align: left;
-  caption-side: bottom;
-}
-
-th {
-  text-align: inherit;
-}
-
-label {
-  display: inline-block;
-  margin-bottom: .5rem;
-}
-
-button {
-  border-radius: 0;
-}
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: listbox;
-}
-
-textarea {
-  overflow: auto;
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  padding: 0;
-  margin-bottom: .5rem;
-  font-size: 1.5rem;
-  line-height: inherit;
-  color: inherit;
-  white-space: normal;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type="search"] {
-  outline-offset: -2px;
-  -webkit-appearance: none;
-}
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-summary {
-  display: list-item;
-}
-
-template {
-  display: none;
-}
-
-[hidden] {
-  display: none !important;
-}
-/*# sourceMappingURL=bootstrap-reboot.css.map */