Merge pull request #2256 from REJack/v3-dev

first changes after v3.0.0-rc.1
2019-10-02 12:49:22 +02:00
parent 07720d6094 0997acea1e
commit 9dc6d1dfd3
436 changed files with 35380 additions and 15240 deletions
--- a/build/js/AdminLTE.js
+++ b/build/js/AdminLTE.js
@@ -7,6 +7,7 @@ import TodoList from './TodoList'
 import CardWidget from './CardWidget'
 import CardRefresh from './CardRefresh'
 import Dropdown from './Dropdown'
+import Toasts from './Toasts'

 export {
  ControlSidebar,
@@ -17,5 +18,6 @@ export {
  TodoList,
  CardWidget,
  CardRefresh,
-  Dropdown
+  Dropdown,
+  Toasts
 }
--- a/build/js/Layout.js
+++ b/build/js/Layout.js
@@ -30,7 +30,9 @@ const Layout = (($) => {
    WRAPPER        : '.wrapper',
    CONTROL_SIDEBAR: '.control-sidebar',
    LAYOUT_FIXED   : '.layout-fixed',
-    FOOTER         : '.main-footer'
+    FOOTER         : '.main-footer',
+    LOGIN_BOX      : '.login-box',
+    REGISTER_BOX   : '.register-box'
  }

  const ClassName = {
@@ -41,6 +43,8 @@ const Layout = (($) => {
    LAYOUT_FIXED   : 'layout-fixed',
    NAVBAR_FIXED   : 'layout-navbar-fixed',
    FOOTER_FIXED   : 'layout-footer-fixed',
+    LOGIN_PAGE     : 'login-page',
+    REGISTER_PAGE  : 'register-page',
  }

  const Default = {
@@ -65,19 +69,17 @@ const Layout = (($) => {

    fixLayoutHeight() {
      const heights = {
-        window     : $(window).height(),
-        header     : $(Selector.HEADER).outerHeight(),
-        footer     : $(Selector.FOOTER).outerHeight(),
-        sidebar    : $(Selector.SIDEBAR).height(),
+        window: $(window).height(),
+        header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0,
+        footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0,
+        sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0,
      }

      const max = this._max(heights)

-
+      $(Selector.CONTENT).css('min-height', max - heights.footer)
+      
      if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
-        $(Selector.CONTENT).css('min-height', max - heights.header - heights.footer)
-        // $(Selector.SIDEBAR).css('min-height', max - heights.header)
-        
        if (typeof $.fn.overlayScrollbars !== 'undefined') {
          $(Selector.SIDEBAR).overlayScrollbars({
            className       : this._config.scrollbarTheme,
@@ -88,21 +90,12 @@ const Layout = (($) => {
            }
          })
        }
-      } else {
-        if (heights.window > heights.sidebar) {
-          $(Selector.CONTENT).css('min-height', heights.window - heights.header - heights.footer)
-        } else {
-          $(Selector.CONTENT).css('min-height', heights.sidebar - heights.header)
-        }
      }
    }

    // Private

    _init() {
-      // Enable transitions
-      $('body').removeClass(ClassName.HOLD)
-
      // Activate layout height watcher
      this.fixLayoutHeight()
      $(Selector.SIDEBAR)
@@ -114,7 +107,15 @@ const Layout = (($) => {
        this.fixLayoutHeight()
      })

-      $('body, html').css('height', 'auto')
+      if (!$('body').hasClass(ClassName.LOGIN_PAGE) && !$('body').hasClass(ClassName.REGISTER_PAGE)) {
+        $('body, html').css('height', 'auto')
+      } else if ($('body').hasClass(ClassName.LOGIN_PAGE) || $('body').hasClass(ClassName.REGISTER_PAGE)) {
+        let box_height = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height()
+
+        $('body').css('min-height', box_height);
+      }
+
+      $('body.hold-transition').removeClass('hold-transition')
    }

    _max(numbers) {
--- a/build/js/PushMenu.js
+++ b/build/js/PushMenu.js
@@ -23,7 +23,6 @@ const PushMenu = (($) => {

  const Default = {
    autoCollapseSize: false,
-    screenCollapseSize: 768,
    enableRemember: false,
    noTransitionAfterReload: true
  }
@@ -40,8 +39,7 @@ const PushMenu = (($) => {
  const ClassName = {
    SIDEBAR_OPEN: 'sidebar-open',
    COLLAPSED: 'sidebar-collapse',
-    OPEN: 'sidebar-open',
-    SIDEBAR_MINI: 'sidebar-mini'
+    OPEN: 'sidebar-open'
  }

  /**
@@ -54,11 +52,16 @@ const PushMenu = (($) => {
      this._element = element
      this._options = $.extend({}, Default, options)

-      this._init()
+
+      if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED) && !$(Selector.BODY).hasClass(ClassName.OPEN)) {
+        $(Selector.BODY).addClass(ClassName.OPEN)
+      }

      if (!$(Selector.OVERLAY).length) {
        this._addOverlay()
      }
+
+      this._init()
    }

    // Public
@@ -67,7 +70,7 @@ const PushMenu = (($) => {
      $(Selector.BODY).addClass(ClassName.OPEN).removeClass(ClassName.COLLAPSED)

      if(this._options.enableRemember) {
-          localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN);
+          localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN)
      }

      const shownEvent = $.Event(Event.SHOWN)
@@ -78,23 +81,15 @@ const PushMenu = (($) => {
      $(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.COLLAPSED)

      if(this._options.enableRemember) {
-          localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED);
+          localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED)
      }

      const collapsedEvent = $.Event(Event.COLLAPSED)
      $(this._element).trigger(collapsedEvent)
    }

-    isShown() {
-      if ($(window).width() >= this._options.screenCollapseSize) {
-        return !$(Selector.BODY).hasClass(ClassName.COLLAPSED)
-      } else {
-        return $(Selector.BODY).hasClass(ClassName.OPEN)
-      }
-    }
-
    toggle() {
-      if (this.isShown()) {
+      if ($(Selector.BODY).hasClass(ClassName.OPEN)) {
        this.collapse()
      } else {
        this.show()
@@ -104,11 +99,11 @@ const PushMenu = (($) => {
    autoCollapse() {
      if (this._options.autoCollapseSize) {
        if ($(window).width() <= this._options.autoCollapseSize) {
-          if (this.isShown()) {
+          if ($(Selector.BODY).hasClass(ClassName.OPEN)) {
            this.toggle()
          }
        } else {
-          if (!this.isShown()) {
+          if (!$(Selector.BODY).hasClass(ClassName.OPEN)) {
            this.toggle()
          }
        }
@@ -117,15 +112,24 @@ const PushMenu = (($) => {

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

    toggle(event) {
+
      const $relativeTarget = $(event.currentTarget)
-      const treeviewMenu    = $relativeTarget.next()
+      const $parent = $relativeTarget.parent()
+
+      let treeviewMenu = $parent.find(Selector.TREEVIEW_MENU)

      if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
-        return
-      }

+        if (!$parent.is(Selector.LI)) {
+          treeviewMenu = $parent.parent().find(Selector.TREEVIEW_MENU)
+        }
+
+        if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
+          return
+        }
+      }
+      
      event.preventDefault()

      const parentLi = $relativeTarget.parents(Selector.LI).first()
--- a/build/npm/DocsPlugins.js
+++ b/build/npm/DocsPlugins.js
@@ -0,0 +1,46 @@
+const Plugins = [
+  // AdminLTE Dist
+  {
+    from: 'dist/css/',
+    to  : 'docs/assets/css/'
+  },
+  {
+    from: 'dist/js/',
+    to  : 'docs/assets/js/'
+  },
+  // jQuery
+  {
+    from: 'node_modules/jquery/dist/',
+    to  : 'docs/assets/plugins/jquery/'
+  },
+  // Popper
+  {
+    from: 'node_modules/popper.js/dist/',
+    to  : 'docs/assets/plugins/popper/'
+  },
+  // Bootstrap
+  {
+    from: 'node_modules/bootstrap/dist/js/',
+    to  : 'docs/assets/plugins/bootstrap/js/'
+  },
+  // Font Awesome
+  {
+    from: 'node_modules/@fortawesome/fontawesome-free/css/',
+    to  : 'docs/assets/plugins/fontawesome-free/css/'
+  },
+  {
+    from: 'node_modules/@fortawesome/fontawesome-free/webfonts/',
+    to  : 'docs/assets/plugins/fontawesome-free/webfonts/'
+  },
+  // overlayScrollbars
+  {
+    from: 'node_modules/overlayscrollbars/js/',
+    to  : 'docs/assets/plugins/overlayScrollbars/js/'
+  },
+  {
+    from: 'node_modules/overlayscrollbars/css/',
+    to  : 'docs/assets/plugins/overlayScrollbars/css/'
+  }
+]
+
+module.exports = Plugins
--- a/build/npm/DocsPublish.js
+++ b/build/npm/DocsPublish.js
@@ -0,0 +1,43 @@
+const Plugins = require('./DocsPlugins')
+const fse     = require('fs-extra')
+
+class Publish {
+  constructor() {
+    this.options = {
+      verbose: false
+    }
+
+    this.getArguments()
+  }
+
+  getArguments() {
+    if (process.argv.length > 2) {
+      let arg = process.argv[2]
+      switch (arg) {
+        case '-v':
+        case '--verbose':
+          this.options.verbose = true
+          break
+        default:
+          throw new Error(`Unknown option ${arg}`)
+      }
+    }
+  }
+
+  run() {
+    // Publish files
+    Plugins.forEach((module) => {
+      try {
+        fse.copySync(module.from, module.to)
+
+        if (this.options.verbose) {
+          console.log(`Copied ${module.from} to ${module.to}`)
+        }
+      } catch (err) {
+        console.error(`Error: ${err}`)
+      }
+    })
+  }
+}
+
+(new Publish()).run()
--- a/build/npm/Plugins.js
+++ b/build/npm/Plugins.js
@@ -379,49 +379,11 @@ const Plugins = [
    from: 'node_modules/ekko-lightbox/dist',
    to: 'plugins/ekko-lightbox/'
  },
-
-  // AdminLTE Dist
+  // bootstrap-switch
  {
-    from: 'dist/css',
-    to  : 'docs/assets/css'
+    from: 'node_modules/bootstrap-switch/dist',
+    to: 'plugins/bootstrap-switch/'
  },
-  {
-    from: 'dist/js',
-    to  : 'docs/assets/js'
-  },
-  // jQuery
-  {
-    from: 'node_modules/jquery/dist',
-    to  : 'docs/assets/plugins/jquery'
-  },
-  // Popper
-  {
-    from: 'node_modules/popper.js/dist',
-    to  : 'docs/assets/plugins/popper'
-  },
-  // Bootstrap
-  {
-    from: 'node_modules/bootstrap/dist/js',
-    to  : 'docs/assets/plugins/bootstrap/js'
-  },
-  // Font Awesome
-  {
-    from: 'node_modules/@fortawesome/fontawesome-free/css',
-    to  : 'docs/assets/plugins/fontawesome-free/css'
-  },
-  {
-    from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
-    to  : 'docs/assets/plugins/fontawesome-free/webfonts'
-  },
-  // overlayScrollbars
-  {
-    from: 'node_modules/overlayscrollbars/js',
-    to  : 'docs/assets/plugins/overlayScrollbars/js'
-  },
-  {
-    from: 'node_modules/overlayscrollbars/css',
-    to  : 'docs/assets/plugins/overlayScrollbars/css'
-  }
 ]

 module.exports = Plugins
--- a/build/npm/Publish.js
+++ b/build/npm/Publish.js
@@ -27,13 +27,15 @@ class Publish {
  run() {
    // Publish files
    Plugins.forEach((module) => {
-      fse.copy(module.from, module.to, error => {
-        if (error) {
-          console.error(`Error: ${error}`)
-        } else if (this.options.verbose) {
+      try {
+        fse.copySync(module.from, module.to)
+
+        if (this.options.verbose) {
          console.log(`Copied ${module.from} to ${module.to}`)
        }
-      })
+      } catch (err) {
+        console.error(`Error: ${err}`)
+      }
    })
  }
 }
--- a/build/scss/AdminLTE-raw.scss
+++ b/build/scss/AdminLTE-raw.scss
@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.0.0-rc.1
+ *   AdminLTE v3.0.0-rc.2
 *   Author: Colorlib
 *	 Website: AdminLTE.io <http://adminlte.io>
 *   License: Open source - MIT <http://opensource.org/licenses/MIT>
@@ -48,6 +48,7 @@
@import 'carousel';
@import 'social-widgets';
@import 'modals';
+@import 'toasts';

 // Pages
 // ---------------------------------------------------
@@ -62,6 +63,7 @@

 // Plugins
 // ---------------------------------------------------
+@import 'plugins/mixins';
@import 'plugins/fullcalendar';
@import 'plugins/select2';
@import 'plugins/bootstrap-slider';
@@ -70,6 +72,8 @@
@import 'plugins/jqvmap';
@import 'plugins/sweetalert2';
@import 'plugins/toastr';
+@import 'plugins/pace';
+@import 'plugins/bootstrap-switch';
@import 'plugins/miscellaneous';

 // Miscellaneous
--- a/build/scss/AdminLTE.scss
+++ b/build/scss/AdminLTE.scss
@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v3.0.0-rc.1
+ *   AdminLTE v3.0.0-rc.2
 *   Author: Colorlib
 *	 Website: AdminLTE.io <http://adminlte.io>
 *   License: Open source - MIT <http://opensource.org/licenses/MIT>
@@ -44,6 +44,7 @@
@import 'carousel';
@import 'social-widgets';
@import 'modals';
+@import 'toasts';

 // Pages
 // ---------------------------------------------------
@@ -58,6 +59,7 @@

 // Plugins
 // ---------------------------------------------------
+@import 'plugins/mixins';
@import 'plugins/fullcalendar';
@import 'plugins/select2';
@import 'plugins/bootstrap-slider';
@@ -66,6 +68,8 @@
@import 'plugins/jqvmap';
@import 'plugins/sweetalert2';
@import 'plugins/toastr';
+@import 'plugins/pace';
+@import 'plugins/bootstrap-switch';
@import 'plugins/miscellaneous';

 // Miscellaneous
--- a/build/scss/_brand.scss
+++ b/build/scss/_brand.scss
@@ -16,6 +16,10 @@
    text-decoration: none;
  }

+  .text-sm & {
+    font-size: inherit;
+  }
+
  [class*='sidebar-dark'] & {
    border-bottom: 1px solid lighten($dark, 10%);
    color: rgba($white, .8);
@@ -25,32 +29,48 @@
    border-bottom: 1px solid $gray-300;
    color: rgba($black, .8);
  }
-}

-.brand-image {
-  float: left;
-  line-height: .8;
-  margin-left: .8rem;
-  margin-right: .5rem;
-  margin-top: -3px;
-  max-height: 33px;
-  width: auto;
-}
+  .brand-image {
+    float: left;
+    line-height: .8;
+    margin-left: .8rem;
+    margin-right: .5rem;
+    margin-top: -3px;
+    max-height: 33px;
+    width: auto;
+  }

-.brand-image-xs {
-  float: left;
-  line-height: .8;
-  margin-left: .8rem;
-  margin-right: .5rem;
-  margin-top: -3px;
-  max-height: 33px;
-  width: auto;
-}
+  .brand-image-xs {
+    float: left;
+    line-height: .8;
+    margin-top: -.1rem;
+    max-height: 33px;
+    width: auto;
+  }

-.brand-image-xl {
-  line-height: .8;
-  margin-bottom: -10px;
-  margin-top: -14px;
-  max-height: 40px;
-  width: auto;
+  .brand-image-xl {
+    line-height: .8;
+    max-height: 40px;
+    width: auto;
+  }
+
+  &.text-sm,
+  .text-sm & {
+    .brand-image {
+      height: 29px;
+      margin-bottom: -.25rem;
+      margin-left: .95rem;
+      margin-top: -.25rem;
+    }
+
+    .brand-image-xs {
+      margin-top: -.2rem;
+      max-height: 29px;
+    }
+
+    .brand-image-xl {
+      margin-top: -.225rem;
+      max-height: 38px;
+    }
+  }
 }
--- a/build/scss/_buttons.scss
+++ b/build/scss/_buttons.scss
@@ -30,6 +30,10 @@
      top: 0;
    }
  }
+
+  .text-sm & {
+    font-size: $font-size-sm !important;
+  }
 }

 // Button color variations
--- a/build/scss/_cards.scss
+++ b/build/scss/_cards.scss
@@ -93,8 +93,8 @@ html.maximized-card {
 .card-header {
  background-color: transparent;
  border-bottom: 1px solid $card-border-color;
-  position: relative;
  padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
+  position: relative;

  @if $enable-rounded {
    @include border-top-radius($border-radius);
@@ -106,7 +106,13 @@ html.maximized-card {

  > .card-tools {
    float: right;
-    margin-right: -$card-spacer-x/2;
+    margin-right: -$card-spacer-x / 2;
+
+    .nav,
+    .pagination {
+      margin-bottom: -$card-spacer-y / 2;
+      margin-top: -$card-spacer-y / 2;
+    }

    [data-toggle='tooltip'] {
      position: relative;
@@ -121,6 +127,11 @@ html.maximized-card {
  margin: 0;
 }

+.card-text {
+  clear: both;
+}
+
+
 // Box Tools Buttons
 .btn-tool {
  background: transparent;
@@ -140,12 +151,22 @@ html.maximized-card {
  }
 }

+.text-sm {
+  .card-title {
+    font-size: $card-title-font-size-sm;
+  }
+
+  .nav-link {
+    padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x; 
+  }
+}
+
 // Box Body
 .card-body {
  // @include border-radius-sides(0, 0, $border-radius, $border-radius);
-  .no-header & {
-    // @include border-top-radius($border-radius);
-  }
+  // .no-header & {
+  //   @include border-top-radius($border-radius);
+  // }

  // Tables within the box body
  > .table {
@@ -333,3 +354,13 @@ html.maximized-card {
@each $name, $color in $colors {
  @include cards-variant($name, $color);
 }
+
+
+// Nav Tabs override
+.card-default {
+  .nav-item {
+    &:first-child .nav-link {
+      border-left: 0;
+    }
+  }
+}
--- a/build/scss/_colors.scss
+++ b/build/scss/_colors.scss
@@ -70,3 +70,13 @@ a.text-muted:hover {
    color: lighten($gray-500, 20%);
  }
 }
+
+// Accent colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include accent-variant($name, $color);
+}
+
+// Accent colors (colors)
+@each $name, $color in $colors {
+  @include accent-variant($name, $color);
+}
--- a/build/scss/_control-sidebar.scss
+++ b/build/scss/_control-sidebar.scss
@@ -30,6 +30,21 @@ html.control-sidebar-animate {
  }
 }

+body.text-sm {
+  .control-sidebar {
+    bottom: $main-footer-height-sm;
+    top: $main-header-height-sm;
+  }
+}
+
+.main-header.text-sm ~ .control-sidebar {
+  top: $main-header-height-sm;
+}
+
+.main-footer.text-sm ~ .control-sidebar {
+  bottom: $main-footer-height-sm;
+}
+
 .control-sidebar-push-slide {
    .content-wrapper,
    .main-footer {
@@ -39,31 +54,20 @@ html.control-sidebar-animate {

 // Control sidebar open state
 .control-sidebar-open {
-  @include media-breakpoint-up(md) {
-    .control-sidebar {
-      display: block;
+  .control-sidebar {
+    display: block;

-      &,
-      &::before {
-        right: 0;
-      }
-    }
-
-    &.control-sidebar-push,
-    &.control-sidebar-push-slide {
-      .content-wrapper,
-      .main-footer {
-        margin-right: $control-sidebar-width;
-      }
+    &,
+    &::before {
+      right: 0;
    }
  }

-  @include media-breakpoint-down(md) {
-    .control-sidebar {
-      &,
-      &::before {
-        right: 0;
-      }
+  &.control-sidebar-push,
+  &.control-sidebar-push-slide {
+    .content-wrapper,
+    .main-footer {
+      margin-right: $control-sidebar-width;
    }
  }
 }
--- a/build/scss/_dropdown.scss
+++ b/build/scss/_dropdown.scss
@@ -12,11 +12,27 @@
 //  }
 //}

+.text-sm {
+  .dropdown-menu {
+    font-size: $font-size-sm !important;
+  }
+
+  .dropdown-toggle::after {
+    vertical-align: .2rem
+  }
+}
+
 .dropdown-item-title {
  font-size: $font-size-base;
  margin: 0;
 }

+.dropdown-icon {
+  &::after {
+    margin-left: 0;
+  }
+}
+
 // Dropdown Sizes
 .dropdown-menu-lg {
  max-width: 300px;
--- a/build/scss/_layout.scss
+++ b/build/scss/_layout.scss
@@ -37,15 +37,44 @@ body,
    .control-sidebar {
      top: $main-header-height;
    }
+
+    .main-header.text-sm ~ .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
    .sidebar {
      margin-top: $main-header-height;
    }
+
+    .brand-link.text-sm ~ .sidebar {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
+  .layout-navbar-fixed.layout-fixed.text-sm & {
+    .control-sidebar {
+      top: $main-header-height-sm;
+    }
+
+    .sidebar {
+      margin-top: $main-header-height-sm;
+    }
  }

  .layout-navbar-fixed.sidebar-collapse & {
    .brand-link {
      height: $main-header-height;
      width: $sidebar-mini-width;
+
+      &.text-sm {
+        height: $main-header-height-sm;
+      }
+    }
+  }
+
+  .layout-navbar-fixed.sidebar-collapse.text-sm & {
+    .brand-link {
+      height: $main-header-height-sm;
    }
  }

@@ -78,11 +107,11 @@ body,

    // Sidebar variants brand-link fix
    @each $name, $color in $theme-colors {
-      .sidebar-dark-#{$name} .brand-link {
+      .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
        background-color: $sidebar-dark-bg;
      }

-      .sidebar-light-#{$name} .brand-link {
+      .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
        background-color: $sidebar-light-bg;
      }
    }
@@ -91,6 +120,10 @@ body,
      margin-top: $main-header-height;
    }

+    .main-header.text-sm ~ .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+
    .main-header {
      left: 0;
      position: fixed;
@@ -100,6 +133,12 @@ body,
    }
  }

+  .layout-navbar-fixed.text-sm & {
+    .content-wrapper {
+      margin-top: $main-header-height-sm;
+    }
+  }
+
  .layout-navbar-not-fixed & {
    .brand-link {
      position: static;
@@ -115,6 +154,12 @@ body,
    }
  }

+  .layout-navbar-not-fixed.layout-fixed & {
+    .sidebar {
+      margin-top: 0;
+    }
+  }
+
  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@@ -123,9 +168,30 @@ body,
        .control-sidebar {
          top: $main-header-height;
        }
+
+        .text-sm & .main-header ~ .control-sidebar,
+        .main-header.text-sm ~ .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
        .sidebar {
          margin-top: $main-header-height;
        }
+
+        .text-sm & .brand-link ~ .sidebar,
+        .brand-link.text-sm ~ .sidebar {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
+      .layout#{$infix}-navbar-fixed.layout-fixed.text-sm & {
+        .control-sidebar {
+          top: $main-header-height-sm;
+        }
+
+        .sidebar {
+          margin-top: $main-header-height-sm;
+        }
      }

      .layout#{$infix}-navbar-fixed & {
@@ -144,6 +210,11 @@ body,
            height: $main-header-height;
            transition: width $transition-speed $transition-fn;
            width: $sidebar-mini-width;
+
+            .text-sm &,
+            &.text-sm {
+              height: $main-header-height-sm;
+            }
          }

          .main-sidebar:hover {
@@ -165,11 +236,11 @@ body,

        // Sidebar variants brand-link fix
        @each $name, $color in $theme-colors {
-          .sidebar-dark-#{$name} .brand-link {
+          .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
            background-color: $sidebar-dark-bg;
          }

-          .sidebar-light-#{$name} .brand-link {
+          .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
            background-color: $sidebar-light-bg;
          }
        }
@@ -178,6 +249,11 @@ body,
          margin-top: $main-header-height;
        }

+        .text-sm & .main-header ~ .content-wrapper,
+        .main-header.text-sm ~ .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+
        .main-header {
          left: 0;
          position: fixed;
@@ -187,6 +263,12 @@ body,
        }
      }

+      .layout#{$infix}-navbar-fixed.text-sm & {
+        .content-wrapper {
+          margin-top: $main-header-height-sm;
+        }
+      }
+
      .layout#{$infix}-navbar-not-fixed & {
        .brand-link {
          position: static;
@@ -202,6 +284,11 @@ body,
        }
      }

+      .layout#{$infix}-navbar-not-fixed.layout-fixed & {
+        .sidebar {
+          margin-top: 0;
+        }
+      }
    }
  }

@@ -265,6 +352,11 @@ body,
  .layout-top-nav & {
    margin-left: 0;

+    & .text-sm {
+      .brand-image {
+        margin-top: -.5rem;
+      }
+    }

    & .main-sidebar {
      bottom: inherit;
@@ -393,14 +485,27 @@ body,
  border-top: $main-footer-border-top;
  color: lighten($gray-700, 25%);
  padding: $main-footer-padding;
+
+  .text-sm &,
+  &.text-sm {
+    padding: $main-footer-padding-sm;
+  }
 }

 .content-header {
  padding: 15px $content-padding-x;

+  .text-sm & {
+    padding: 10px $content-padding-x;
+  }
+
  h1 {
    font-size: 1.8rem;
    margin: 0;
+
+    .text-sm & {
+      font-size: 1.5rem;
+    }
  }

  .breadcrumb {
@@ -408,9 +513,15 @@ body,
    line-height: 1.8rem;
    margin-bottom: 0;
    padding: 0;
+
+    .text-sm & {
+      line-height: 1.5rem;
+    }
  }
 }

+
+
 .hold-transition {
  .content-wrapper,
  .main-header,
--- a/build/scss/_main-header.scss
+++ b/build/scss/_main-header.scss
@@ -11,6 +11,24 @@
    position: relative;
  }

+  .text-sm &,
+  &.text-sm {
+    .nav-link {
+      height: $nav-link-sm-height;
+      padding: $nav-link-sm-padding-y $nav-link-padding-x;
+
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
+      > .ion {
+        font-size: $font-size-sm;
+      }
+    }
+
+  }
+
  .navbar-nav {
    .nav-item {
      margin: 0;
--- a/build/scss/_main-sidebar.scss
+++ b/build/scss/_main-sidebar.scss
@@ -176,19 +176,6 @@
  z-index: $zindex-main-sidebar - 1;
 }

-.sidebar-mini-md {
-  &.sidebar-open {
-    #sidebar-overlay {
-      @include media-breakpoint-up(sm) {
-        display: none;
-      }
-      @include media-breakpoint-down(sm) {
-        display: block;
-      }
-    }
-  }
-}
-
 [class*='sidebar-light-'] {
  // Sidebar background color
  background-color: $sidebar-light-bg;
@@ -290,6 +277,26 @@
      }
    }
  }
+
+  // Flat style
+  .nav-flat {
+    .nav-item {
+      .nav-treeview {
+        .nav-treeview {
+          border-color: $sidebar-light-submenu-active-bg;
+        }
+
+        > .nav-item {
+          > .nav-link {
+            &,
+            &.active {
+              border-color: $sidebar-light-submenu-active-bg;
+            }
+          }
+        }
+      }
+    }
+  }
 }

 [class*='sidebar-dark-'] {
@@ -397,6 +404,26 @@
      }
    }
  }
+
+  // Flat Style
+  .nav-flat {
+    .nav-item {
+      .nav-treeview {
+        .nav-treeview {
+          border-color: $sidebar-dark-submenu-active-bg;
+        }
+
+        > .nav-item {
+          > .nav-link {
+            &,
+            &.active {
+              border-color: $sidebar-dark-submenu-active-bg;
+            }
+          }
+        }
+      }
+    }
+  }
 }

 // Sidebar variants
@@ -414,6 +441,63 @@
  }
 }

+// Nav Flat
+.nav-flat {
+  margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
+
+  &.nav-child-indent {
+    .nav-treeview {
+      padding-left: 0 !important;
+
+      .nav-treeview {
+        border-left: .2rem solid;
+      }
+    }
+  }
+
+  .nav-item {
+    > .nav-link {
+      border-radius: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  .nav-icon {
+    @include transition(margin-left $transition-fn $transition-speed);
+  }
+
+  .nav-treeview {
+    .nav-icon {
+      margin-left: -.2rem;
+    }
+  }
+
+  .sidebar-collapse & {
+    .nav-icon {
+      margin-left: .5rem;
+    }
+
+    .nav-treeview {
+      .nav-icon {
+        margin-left: .3rem;
+      }
+    }
+  }
+
+  &.nav-sidebar > .nav-item {
+    .nav-treeview,
+    > .nav-treeview {
+      background: rgba($white, .05);
+
+      .nav-item {
+        > .nav-link {
+          border-left: .2rem solid;
+        }
+      }
+    }
+  }
+}
+

 // Nav Compact
 .nav-compact {
@@ -436,3 +520,48 @@
    }
  }
 }
+
+// Sidebar Form Control
+[class*='sidebar-dark'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: lighten($sidebar-dark-bg, 5%);
+    border: 1px solid lighten($sidebar-dark-bg, 15%);
+    color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid lighten($sidebar-dark-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background: lighten($sidebar-dark-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: lighten($sidebar-dark-bg, 10%);
+  }
+}
+
+[class*='sidebar-light'] {
+  .form-control-sidebar,
+  .btn-sidebar {
+    background: darken($sidebar-light-bg, 5%);
+    border: 1px solid darken($sidebar-light-bg, 15%);
+    color: color-yiq(darken($sidebar-light-bg, 5%));
+  }
+
+  .form-control-sidebar:focus,
+  .btn-sidebar:focus {
+    border: 1px solid darken($sidebar-light-bg, 30%);
+  }
+
+  .btn-sidebar:hover {
+    background: darken($sidebar-light-bg, 7.5%);
+  }
+
+  .btn-sidebar:focus {
+    background: darken($sidebar-light-bg, 10%);
+  }
+}
--- a/build/scss/_miscellaneous.scss
+++ b/build/scss/_miscellaneous.scss
@@ -358,6 +358,7 @@
  bottom: 1.25rem;
  position: fixed;
  right: 1.25rem;
+  z-index: $zindex-control-sidebar + 1;

  &:focus {
    box-shadow: none;
--- a/build/scss/_mixins.scss
+++ b/build/scss/_mixins.scss
@@ -15,11 +15,54 @@
        a {
          color: color-yiq($color);
        }
+
+        a.active {
+          color: color-yiq($white);
+        }
      }
    }

    &.card-outline {
      border-top: 3px solid $color;
+
+      .nav-item {
+        border-bottom: 0;
+
+        &:first-child .nav-link {
+          margin-left: -1px;
+          border-left: 0;
+        }
+      }
+    }
+
+    &.card-outline-tabs {
+      border-top: 0;
+
+      > .card-header {
+        .nav-item {
+          &:first-child .nav-link {
+            margin-left: -1px;
+            border-left: 0;
+          }
+        }
+
+        a {
+          border-top: 3px solid transparent;
+
+          &:hover {
+            border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
+            margin-top: 2px;
+          }
+
+          &.active {
+            &:hover {
+              margin-top: 0;
+            }
+
+            border-top: 3px solid $color;
+          }
+        }
+      }
    }
  }

@@ -173,6 +216,18 @@
          visibility: visible;
        }

+        .nav-flat {
+          .nav-icon {
+            margin-left: 0;
+          }
+
+          .nav-treeview {
+            .nav-icon {
+              margin-left: -.2rem;
+            }
+          }
+        }
+
        .logo-xs {
          opacity: 0;
          visibility: hidden;
@@ -314,10 +369,13 @@
        color: darken(color-yiq($color), 7.5%);
      }

+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
      &:active,
      &.active {
+        background-color: darken($color, 10%) !important;
        border-color: darken($color, 12.5%);
-        color: darken(color-yiq($color), 10%);
+        color: color-yiq(darken($color, 10%));
      }
    }
  }
@@ -344,11 +402,13 @@
        color: darken(color-yiq($color), 7.5%);
      }

+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active,
      &:active,
      &.active {
        @include bg-gradient-variant('&', darken($color, 10%));
        border-color: darken($color, 12.5%);
-        color: darken(color-yiq($color), 10%);
+        color: color-yiq(darken($color, 10%));
      }
    }
  }
@@ -432,6 +492,54 @@
  }
 }

+// Toast Variant
+@mixin toast-variant($name, $color) {
+  &.bg-#{$name} {
+    background: rgba($color, .9) !important;
+    @if (color-yiq($color) == $yiq-text-light) {
+
+      .close {
+        color: color-yiq($color);
+        text-shadow: 0 1px 0 #000;
+      }
+    }
+
+    .toast-header {
+      background: rgba($color, .85);
+      color: color-yiq($color);
+    }
+  }
+}
+
+// Accent Variant
+@mixin accent-variant($name, $color) {
+  &.accent-#{$name} {
+    $link-color: $color;
+    $link-hover-color: darken($color, 15%);
+    $pagination-active-bg: $color;
+    $pagination-active-border-color: $color;
+
+    a {
+      color: $link-color;
+
+      @include hover {
+        color: $link-hover-color;
+      }
+    }
+
+    .page-item {
+      &.active .page-link {
+        background-color: $pagination-active-bg;
+        border-color: $pagination-active-border-color;
+      }
+
+      &.disabled .page-link {
+        background-color: $pagination-disabled-bg;
+        border-color: $pagination-disabled-border-color;
+      }
+    }
+  }
+}

 // ETC
@mixin translate($x, $y) {
--- a/build/scss/_modals.scss
+++ b/build/scss/_modals.scss
@@ -34,6 +34,7 @@
  &.bg-success, {
    .close {
      color: $white;
+      text-shadow: 0 1px 0 #000;
    }
  }
 }
--- a/build/scss/_navs.scss
+++ b/build/scss/_navs.scss
@@ -26,34 +26,39 @@
  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;

  .nav-link {
+    border-bottom-left-radius: $nav-tabs-border-radius;
+    border-top-right-radius: 0;
    margin-right: -$nav-tabs-border-width;

    @include hover-focus {
-      border-color: $gray-200 $nav-tabs-border-color $gray-200 $gray-200;
+      border-color: $gray-200 transparent $gray-200 $gray-200;
    }
  }

  .nav-link.active,
  .nav-item.show .nav-link {
-    border-color: $gray-300 $nav-tabs-link-active-bg $gray-300 $gray-300;
+    border-color: $gray-300 transparent $gray-300 $gray-300;
  }

  &.nav-tabs-right {
    border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
    border-right: 0;

-
    .nav-link {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: $nav-tabs-border-radius;
+      border-top-left-radius: 0;
+      border-top-right-radius: $nav-tabs-border-radius;
      margin-left: -$nav-tabs-border-width;

      @include hover-focus {
-        border-color: $gray-200 $gray-200 $gray-200 $nav-tabs-border-color;
+        border-color: $gray-200 $gray-200 $gray-200 transparent;
      }
    }

    .nav-link.active,
    .nav-item.show .nav-link {
-      border-color: $gray-300 $gray-300 $gray-300 $nav-tabs-link-active-bg;
+      border-color: $gray-300 $gray-300 $gray-300 transparent;
    }
  }
 }
--- a/build/scss/_sidebar-mini.scss
+++ b/build/scss/_sidebar-mini.scss
@@ -5,7 +5,6 @@
 // Logo style
 .logo-xs,
 .logo-xl {
-  margin: 0;
  opacity: 1;
  position: absolute;
  visibility: visible;
@@ -65,6 +64,20 @@
      float: none !important;
    }

+    .logo-xs {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .logo-xl {
+      opacity: 0;
+      visibility: hidden;
+    }
+
+    .nav-sidebar.nav-child-indent .nav-treeview {
+      padding-left: 0;
+    }
+
    .brand-text,
    .user-panel > .info,
    .nav-sidebar .nav-link p {
@@ -77,6 +90,18 @@
    .nav-sidebar > .nav-item .nav-icon {
      margin-right: 0;
    }
+
+    .nav-flat {
+      .nav-icon {
+        margin-left: .5rem;
+      }
+
+      .nav-treeview {
+        .nav-icon {
+          margin-left: .3rem;
+        }
+      }
+    }
  }
 }

--- a/build/scss/_text.scss
+++ b/build/scss/_text.scss
@@ -9,11 +9,15 @@
  }
 }

+.text-xs {
+  font-size: $font-size-xs !important;
+}
+
 .text-sm {
  font-size: $font-size-sm !important;
 }

-.text-xs {
+.text-md {
  font-size: $font-size-base !important;
 }

--- a/build/scss/_toasts.scss
+++ b/build/scss/_toasts.scss
@@ -0,0 +1,56 @@
+//
+// Component: Toasts
+//
+
+.toasts-top-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-top-left {
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-bottom-right {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toasts-bottom-left {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  z-index: $zindex-toasts;
+
+  &.fixed {
+    position: fixed;
+  }
+}
+
+.toast {
+  @each $name, $color in $theme-colors {
+    @include toast-variant($name, $color);
+  }
+  @each $name, $color in $colors {
+    @include toast-variant($name, $color);
+  }
+}
--- a/build/scss/_variables.scss
+++ b/build/scss/_variables.scss
@@ -58,6 +58,11 @@ $main-header-brand-padding-y: $navbar-brand-padding-y !default;
 $main-header-brand-padding-x: $navbar-padding-x !default;
 $main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
 $main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;
+$nav-link-sm-padding-y: .35rem !default;
+$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
+$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
+$main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}) !default;
+

 // Main header skins
 $main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
@@ -77,11 +82,14 @@ $main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
 // MAIN FOOTER
 // --------------------------------------------------------
 $main-footer-padding: 1rem !default;
+$main-footer-padding-sm: $main-footer-padding * .812 !default;
 $main-footer-border-top-width: 1px !default;
 $main-footer-border-top-color: $gray-300 !default;
 $main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
 $main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
 $main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
+$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
+$main-footer-height-sm: calc(#{$main-footer-height-sm-inner} + #{$main-footer-border-top-width}) !default;
 $main-footer-bg: $white;

 // SIDEBAR SKINS
@@ -131,7 +139,11 @@ $card-border-color: $gray-100 !default;
 $card-dark-border-color: lighten($gray-900, 10%) !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
 $card-title-font-size: 1.1rem;
+$card-title-font-size-sm: 1rem;
 $card-title-font-weight: $font-weight-normal;
+$card-nav-link-padding-sm-y: .4rem;
+$card-nav-link-padding-sm-x: .8rem;
+

 // PROGRESS BARS
 // --------------------------------------------------------
@@ -157,6 +169,7 @@ $zindex-main-sidebar: $zindex-fixed + 8 !default;
 $zindex-main-footer: $zindex-fixed + 2 !default;
 $zindex-control-sidebar: $zindex-fixed + 1 !default;
 $zindex-sidebar-mini-links: 010 !default;
+$zindex-toasts: $zindex-main-sidebar + 2 !default;

 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
@@ -167,6 +180,7 @@ $transition-fn: ease-in-out !default;

 // TEXT
 // --------------------------------------------------------
+$font-size-xs: ($font-size-base * .75);
 $font-size-xl: ($font-size-base * 2);


--- a/build/scss/pages/_login_and_register.scss
+++ b/build/scss/pages/_login_and_register.scss
@@ -6,7 +6,7 @@
 .register-logo {
  font-size: 2.1rem;
  font-weight: 300;
-  margin-bottom: 0.9rem;
+  margin-bottom: .9rem;
  text-align: center;

  a {
@@ -16,12 +16,15 @@

 .login-page,
 .register-page {
+  align-items: center;
  background: $gray-200;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
 }

 .login-box,
 .register-box {
-  margin: 7% auto;
  width: 360px;

  @media (max-width: map-get($grid-breakpoints, sm)) {
@@ -72,9 +75,9 @@

    .input-group-text {
      background-color: transparent;
-      border-bottom-right-radius: $border-radius !important;
+      border-bottom-right-radius: $border-radius;
      border-left: 0;
-      border-top-right-radius: $border-radius !important;
+      border-top-right-radius: $border-radius;
      color: #777;
      transition: $input-transition;
    }
--- a/build/scss/pages/_profile.scss
+++ b/build/scss/pages/_profile.scss
@@ -28,5 +28,10 @@

  .user-block {
    margin-bottom: 15px;
+    width: 100%;
+  }
+
+  .row {
+    width: 100%;
  }
 }
--- a/build/scss/plugins/_bootstrap-switch.scss
+++ b/build/scss/plugins/_bootstrap-switch.scss
@@ -0,0 +1,175 @@
+/**
+  * bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
+  *
+  * @version v3.4 (MODDED)
+  * @homepage https://bttstrp.github.io/bootstrap-switch
+  * @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
+  * @license MIT
+  */
+
+$bootstrap-switch-border-radius: $btn-border-radius;
+$bootstrap-switch-handle-border-radius: .1rem;
+
+.bootstrap-switch {
+  border: $input-border-width solid $input-border-color;
+  border-radius: $bootstrap-switch-border-radius;
+  cursor: pointer;
+  direction: ltr;
+  display: inline-block;
+  line-height: .5rem;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  user-select: none;
+  vertical-align: middle;
+  z-index: 0;
+
+  .bootstrap-switch-container {
+    border-radius: $bootstrap-switch-border-radius;
+    display: inline-block;
+    top: 0;
+    transform: translate3d(0, 0, 0);
+
+  }
+
+  &:focus-within {
+    box-shadow: $input-btn-focus-box-shadow;
+  }
+
+  .bootstrap-switch-handle-on,
+  .bootstrap-switch-handle-off,
+  .bootstrap-switch-label {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: table-cell;
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.2rem;
+    padding: .25rem .5rem;
+    vertical-align: middle;
+  }
+
+  .bootstrap-switch-handle-on,
+  .bootstrap-switch-handle-off {
+    text-align: center;
+    z-index: 1;
+
+    &.bootstrap-switch-default {
+      background: $gray-200;
+      color: color-yiq($gray-200);
+    }
+
+    @each $name, $color in $theme-colors {
+      &.bootstrap-switch-#{$name} {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+
+    @each $name, $color in $colors {
+      &.bootstrap-switch-#{$name} {
+        background: $color;
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .bootstrap-switch-handle-on {
+    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
+    border-top-left-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  .bootstrap-switch-handle-off {
+    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
+    border-top-right-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    filter: alpha(opacity=0);
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    z-index: -1;
+  }
+
+  &.bootstrap-switch-mini {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: .875rem;
+      line-height: 1.5;
+      padding: .1rem .3rem;
+    }
+  }
+
+  &.bootstrap-switch-small {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: .875rem;
+      line-height: 1.5;
+      padding: .2rem .4rem;
+    }
+  }
+
+  &.bootstrap-switch-large {
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      font-size: 1.25rem;
+      line-height: 1.3333333rem;
+      padding: .3rem .5rem;
+    }
+  }
+
+  &.bootstrap-switch-disabled,
+  &.bootstrap-switch-readonly,
+  &.bootstrap-switch-indeterminate {
+    cursor: default;
+
+    .bootstrap-switch-handle-on,
+    .bootstrap-switch-handle-off,
+    .bootstrap-switch-label {
+      cursor: default;
+      filter: alpha(opacity=50);
+      opacity: .5;
+    }
+  }
+
+  &.bootstrap-switch-animate .bootstrap-switch-container {
+    transition: margin-left .5s;
+  }
+
+  &.bootstrap-switch-inverse {
+    .bootstrap-switch-handle-on {
+      border-radius: 0 $bootstrap-switch-handle-border-radius $bootstrap-switch-handle-border-radius 0;
+    }
+
+    .bootstrap-switch-handle-off {
+      border-radius: $bootstrap-switch-handle-border-radius 0 0 $bootstrap-switch-handle-border-radius;
+    }
+  }
+
+  // &.bootstrap-switch-focused {
+  //   border-color: $input-btn-focus-color;
+  //   box-shadow: $input-btn-focus-box-shadow;
+  //   outline: 0;
+  // }
+
+  &.bootstrap-switch-on .bootstrap-switch-label,
+  &.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
+    border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
+    border-top-right-radius: $bootstrap-switch-handle-border-radius;
+  }
+
+  &.bootstrap-switch-off .bootstrap-switch-label,
+  &.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
+    border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
+    border-top-left-radius: $bootstrap-switch-handle-border-radius;
+  }
+}
--- a/build/scss/plugins/_mixins.scss
+++ b/build/scss/plugins/_mixins.scss
@@ -0,0 +1,64 @@
+//
+// General: Mixins
+//
+
+// Select2 Variant
+@mixin select2-variant($name, $color) {
+  .select2-#{$name} {
+
+    .select2-container--default &,
+    .select2-container--default {
+      &.select2-dropdown,
+      .select2-dropdown,
+      .select2-search--inline {
+        .select2-search__field {
+          &:focus {
+            border: $input-border-width solid lighten($color, 25%);
+          }
+        }
+      }
+
+      .select2-results__option--highlighted {
+        background-color: $color;
+        color: color-yiq($color);
+
+        &[aria-selected] {
+          &,
+          &:hover {
+            background-color: darken($color, 3%);
+            color: color-yiq(darken($color, 3%));
+          }
+        }
+      }
+
+      //Multiple select
+      & {
+        .select2-selection--multiple {
+          &:focus {
+            border-color: lighten($color, 25%);
+          }
+        }
+
+        &.select2-container--focus .select2-selection--multiple {
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      .select2-selection--multiple {
+        .select2-selection__choice {
+          background-color: $color;
+          border-color: darken($color, 5%);
+          color: color-yiq($color);
+        }
+
+        .select2-selection__choice__remove {
+          color: rgba(color-yiq($color), 0.7);
+
+          &:hover {
+            color: color-yiq($color);
+          }
+        }
+      }
+    }
+  }
+}
--- a/build/scss/plugins/_pace.scss
+++ b/build/scss/plugins/_pace.scss
@@ -0,0 +1,211 @@
+//
+// Plugin: Pace
+//
+
+.pace {
+  z-index: $zindex-main-sidebar + 10;
+
+  .pace-progress {
+    z-index: $zindex-main-sidebar + 11;
+  }
+
+  .pace-activity {
+    z-index: $zindex-main-sidebar + 12;
+  }
+}
+
+// Mixin 
+@mixin pace-variant($name, $color) {
+  .pace-#{$name} {
+    .pace {
+      .pace-progress {
+        background: $color;
+      }
+    }
+  }
+
+  .pace-barber-shop-#{$name} {
+    .pace {
+      background: color-yiq($color);
+
+      .pace-progress {
+        background: $color;
+      }
+
+      .pace-activity {
+        background-image: linear-gradient(45deg, rgba(color-yiq($color), 0.2) 25%, transparent 25%, transparent 50%, rgba(color-yiq($color), 0.2) 50%, rgba(color-yiq($color), 0.2) 75%, transparent 75%, transparent);
+      }
+    }
+  }
+
+  .pace-big-counter-#{$name} {
+    .pace {
+      .pace-progress::after {
+        color: rgba($color, .19999999999999996);
+      }
+    }
+  }
+
+  .pace-bounce-#{$name} {
+    .pace {
+      .pace-activity {
+        background: $color;
+      }
+    }
+  }
+
+  .pace-center-atom-#{$name} {
+    .pace-progress {
+      height: 100px;
+      width: 80px;
+
+      &::before {
+        background: $color;
+        color: color-yiq($color);
+        font-size: .8rem;
+        line-height: .7rem;
+        padding-top: 17%;
+      }
+    }
+
+    .pace-activity {
+      border-color: $color;
+
+      &::after,
+      &::before {
+        border-color: $color;
+      }
+    }
+  }
+
+  .pace-center-circle-#{$name} {
+    .pace {
+      .pace-progress {
+        background: rgba($color, .8);
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .pace-center-radar-#{$name} {
+    .pace {
+      .pace-activity {
+        border-color: $color transparent transparent;
+      }
+
+      .pace-activity::before {
+        border-color: $color transparent transparent;
+      }
+    }
+  }
+
+  .pace-center-simple-#{$name} {
+    .pace {
+      background: color-yiq($color);
+      border-color: $color;
+
+      .pace-progress {
+        background: $color;
+      }
+    }
+  }
+
+  .pace-material-#{$name} {
+    .pace {
+      color: $color;
+    }
+  }
+
+  .pace-corner-indicator-#{$name} {
+    .pace {
+      .pace-activity {
+        background: $color;
+      }
+
+      .pace-activity::after,
+      .pace-activity::before {
+        border: 5px solid color-yiq($color);
+      }
+
+
+      .pace-activity::before {
+          border-right-color: rgba($color, .2);
+          border-left-color: rgba($color, .2);
+      }
+
+      .pace-activity::after {
+          border-top-color: rgba($color, .2);
+          border-bottom-color: rgba($color, .2);
+      }
+    }
+  }
+
+  .pace-fill-left-#{$name} {
+    .pace {
+      .pace-progress {
+        background-color: rgba($color, 0.19999999999999996);
+      }
+    }
+  }
+
+  .pace-flash-#{$name} {
+    .pace {
+      .pace-progress {
+        background: $color;
+      }
+
+      .pace-progress-inner {
+        box-shadow: 0 0 10px $color, 0 0 5px $color;
+      }
+
+      .pace-activity {
+        border-top-color: $color;
+        border-left-color: $color;
+      }
+    }
+  }
+
+  .pace-loading-bar-#{$name} {
+    .pace {
+      .pace-progress {
+        background: $color;
+        color: $color;
+        box-shadow: 120px 0 color-yiq($color), 240px 0 color-yiq($color);
+      }
+
+      .pace-activity {
+        box-shadow: inset 0 0 0 2px $color, inset 0 0 0 7px color-yiq($color);
+      }
+    }
+  }
+
+  .pace-mac-osx-#{$name} {
+    .pace {
+      .pace-progress {
+        background-color: $color;
+        box-shadow: inset -1px 0 $color, inset 0 -1px $color, inset 0 2px rgba(color-yiq($color), 0.5), inset 0 6px rgba(color-yiq($color), .3);
+      }
+
+      .pace-activity {
+        background-image: radial-gradient(rgba(color-yiq($color), .65) 0%, rgba(color-yiq($color), .15) 100%);
+        height: 12px;
+      }
+    }
+  }
+
+  .pace-progress-color-#{$name} {
+    .pace-progress {
+      color: $color;
+    }
+  }
+}
+
+
+@each $name, $color in $theme-colors {
+  @include pace-variant($name, $color);
+}
+
+@each $name, $color in $colors {
+  @include pace-variant($name, $color);
+}
+
--- a/build/scss/plugins/_select2.scss
+++ b/build/scss/plugins/_select2.scss
@@ -3,36 +3,32 @@
 //

 //Signle select
-.select2-container--default,
-.select2-selection {
-  &.select2-container--focus,
-  &:focus,
-  &:active {
-    outline: none;
-  }
+// .select2-container--default,
+// .select2-selection {
+//   &.select2-container--focus,
+//   &:focus,
+//   &:active {
+//     outline: none;
+//   }
+// }
+
+.select2-container--default {
  .select2-selection--single {
-    border: 1px solid $gray-x-light;
+    border: $input-border-width solid $input-border-color;
    //border-radius: $input-radius;
    padding: 6px 12px;
    height: $input-height;
  }
-}

-.select2-container--default {
  &.select2-container--open {
-    border-color: theme-color("primary");
+    border-color: $primary;
  }

  & .select2-dropdown {
-    border: 1px solid $gray-x-light;
+    border: $input-border-width solid $input-border-color;
    //border-radius: $input-radius;
  }

-  & .select2-results__option--highlighted[aria-selected] {
-    background-color: theme-color("primary");
-    color: white;
-  }
-
  & .select2-results__option {
    padding: 6px 12px;
    user-select: none;
@@ -63,66 +59,130 @@
  .select2-dropdown,
  .select2-search--inline {
    .select2-search__field {
-      border: 1px solid $gray-x-light;
+      border: $input-border-width solid $input-border-color;
+
      &:focus {
        outline: none;
-        border: 1px solid theme-color("primary");
+        border: $input-border-width solid $input-focus-border-color;
      }
    }
  }

-  & .select2-results__option[aria-disabled=true] {
-    color: #999;
+  .select2-dropdown {
+    &.select2-dropdown--below {
+      border-top: 0;
+    }
+
+    &.select2-dropdown--above {
+      border-bottom: 0;
+    }
  }

-  & .select2-results__option[aria-selected=true] {
-    background-color: #ddd;
-    &,
-    &:hover {
-      color: #444;
+  .select2-results__option {
+    &[aria-disabled='true'] {
+      color: $gray-600;
+    }
+
+    &[aria-selected='true'] {
+      $color: $gray-300;
+
+      background-color: $color;
+
+      &,
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .select2-results__option--highlighted {
+    $color: $primary;
+    background-color: $color;
+    color: color-yiq($color);
+
+    &[aria-selected] {
+      $color: darken($color, 3%);
+
+      &,
+      &:hover {
+        background-color: $color;
+        color: color-yiq($color);
+      }
    }
  }

  //Multiple select
  & {
    .select2-selection--multiple {
-      min-height: $input-height;
-      border: 1px solid $gray-x-light;
-      //border-radius: $input-radius;
+      border: $input-border-width solid $input-border-color;
+      height: $input-height;
+
      &:focus {
-        border-color: theme-color("primary");
+        border-color: $input-focus-border-color;
      }

-      .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
-        width: 100%;
+      .select2-selection__rendered {
+        padding: 0 $input-padding-y;

-        .select2-search__field {
-          width: 100% !important;
+        li:first-child.select2-search.select2-search--inline {
+          width: 100%;
+
+          .select2-search__field {
+            width: 100% !important;
+          }
+        }
+
+
+        .select2-search.select2-search--inline {
+          .select2-search__field {
+            border: 0;
+            margin-top: 6px;
+          }
        }
      }
    }
+
    &.select2-container--focus .select2-selection--multiple {
-      border-color: $gray-x-light;
+      border-color: $input-focus-border-color;
+
+      .select2-search__field {
+        border: 0;
+      }
    }
  }

-  & .select2-selection--multiple .select2-selection__choice {
-    background-color: theme-color("primary");
-    border-color: darken(theme-color("primary"), 5%);
-    padding: 0 10px;
-    color: $white;
-  }
+  .select2-selection--multiple {
+    .select2-selection__choice {
+      background-color: $primary;
+      border-color: darken($primary, 5%);
+      color: color-yiq($primary);
+      padding: 0 10px;
+    }

-  & .select2-selection--multiple .select2-selection__choice__remove {
-    margin-right: 5px;
-    color: rgba(255, 255, 255, 0.7);
-    &:hover {
-      color: $white;
+    .select2-selection__choice__remove {
+      color: rgba(255, 255, 255, 0.7);
+      float: right;
+      margin-left: 5px;
+      margin-right: -2px;
+
+      &:hover {
+        color: $white;
+      }
    }
  }

  & .select2-selection--single .select2-selection__rendered li {
    padding-right: 10px;
  }
-
+}
+
+
+// Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include select2-variant($name, $color);
+}
+
+// Background colors (colors)
+@each $name, $color in $colors {
+  @include select2-variant($name, $color);
 }
--- a/build/scss/plugins/_toastr.scss
+++ b/build/scss/plugins/_toastr.scss
@@ -30,23 +30,25 @@
 // }


-// Background color
-.toast {
-  background-color: $primary;
-}
+#toast-container {
+  // Background color
+  .toast {
+    background-color: $primary;
+  }

-.toast-success {
-  background-color: $success;
-}
+  .toast-success {
+    background-color: $success;
+  }

-.toast-error {
-  background-color: $danger;
-}
+  .toast-error {
+    background-color: $danger;
+  }

-.toast-info {
-  background-color: $info;
-}
+  .toast-info {
+    background-color: $info;
+  }

-.toast-warning {
-  background-color: $warning;
+  .toast-warning {
+    background-color: $warning;
+  }
 }