Replace labels with tags according to BS4 implementation

build/js/dist/Layout.js

@@ -77,8 +77,10 @@ var Layout = function ($) {
       value: function _init() {
         var _this = this;
 
+        // Enable transitions
         $('body').removeClass(ClassName.HOLD);
 
+        // Activate layout height watcher
         this.fixLayoutHeight();
         $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', function () {
           _this.fixLayoutHeight();
@@ -90,6 +92,7 @@ var Layout = function ($) {
     }, {
       key: '_max',
       value: function _max(numbers) {
+        // Calculate the maximum number in a list
         var max = 0;
 
         numbers.forEach(function (v) {

build/js/dist/Layout.js.map

-{"version":3,"sources":["../src/Layout.js"],"names":["Layout","$","NAME","DATA_KEY","EVENT_KEY","JQUERY_NO_CONFLICT","fn","Event","SIDEBAR","Selector","HEADER","CONTENT","CONTENT_HEADER","WRAPPER","CONTROL_SIDEBAR","LAYOUT_FIXED","FOOTER","ClassName","HOLD","element","_element","_init","heights","window","height","outerHeight","max","_max","css","removeClass","fixLayoutHeight","on","resize","numbers","forEach","v","operation","each","data","_jQueryInterface","Constructor","noConflict","jQuery"],"mappings":"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","file":"Layout.js","sourcesContent":["/**\n * --------------------------------------------\n * AdminLTE Layout.js\n * License MIT\n * --------------------------------------------\n */\n\nconst Layout = (($) => {\n  'use strict'\n\n  /**\n   * Constants\n   * ====================================================\n   */\n\n  const NAME = 'Layout'\n  const DATA_KEY = 'lte.layout'\n  const EVENT_KEY = `.${DATA_KEY}`\n  const JQUERY_NO_CONFLICT = $.fn[NAME]\n\n  const Event = {\n    SIDEBAR: 'sidebar'\n  }\n\n  const Selector = {\n    SIDEBAR: '.main-sidebar',\n    HEADER: '.main-header',\n    CONTENT: '.content-wrapper',\n    CONTENT_HEADER: '.content-header',\n    WRAPPER: '.wrapper',\n    CONTROL_SIDEBAR: '.control-sidebar',\n    LAYOUT_FIXED: '.layout-fixed',\n    FOOTER: '.main-footer'\n  }\n\n  const ClassName = {\n    HOLD: 'hold-transition',\n    SIDEBAR: 'main-sidebar',\n    LAYOUT_FIXED: 'layout-fixed'\n  }\n\n  /**\n   * Class Definition\n   * ====================================================\n   */\n\n  class Layout {\n\n    constructor(element) {\n      this._element = element\n\n      this._init()\n    }\n\n    // Public\n\n    fixLayoutHeight() {\n      let heights = [\n          $(window).height(),\n          $(Selector.HEADER).outerHeight(),\n          $(Selector.FOOTER).outerHeight(),\n          $(Selector.SIDEBAR).height()\n        ],\n        max = this._max(heights)\n\n      $(Selector.CONTENT).css('min-height', max - (heights[1] + heights[2]))\n    }\n\n    // Private\n\n    _init() {\n      $('body').removeClass(ClassName.HOLD)\n\n      this.fixLayoutHeight()\n      $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {\n        this.fixLayoutHeight()\n      })\n      $(window).resize(() => {\n        this.fixLayoutHeight()\n      })\n    }\n\n    _max(numbers) {\n      let max = 0\n\n      numbers.forEach((v) => {\n        if (v > max) {\n          max = v\n        }\n      })\n\n      return max\n    }\n\n    // Static\n\n    static _jQueryInterface(operation) {\n      return this.each(function () {\n        let data = $(this).data(DATA_KEY)\n\n        if (!data) {\n          data = new Layout(this)\n          $(this).data(DATA_KEY, data)\n        }\n\n        if (operation) {\n          data[operation]()\n        }\n      })\n    }\n  }\n\n  /**\n   * jQuery API\n   * ====================================================\n   */\n\n  $.fn[NAME] = Layout._jQueryInterface\n  $.fn[NAME].Constructor = Layout\n  $.fn[NAME].noConflict = function () {\n    $.fn[NAME] = JQUERY_NO_CONFLICT\n    return Layout._jQueryInterface\n  }\n\n  return Layout\n\n})(jQuery)\n"]}
\ No newline at end of file
+{"version":3,"sources":["../src/Layout.js"],"names":["Layout","$","NAME","DATA_KEY","EVENT_KEY","JQUERY_NO_CONFLICT","fn","Event","SIDEBAR","Selector","HEADER","CONTENT","CONTENT_HEADER","WRAPPER","CONTROL_SIDEBAR","LAYOUT_FIXED","FOOTER","ClassName","HOLD","element","_element","_init","heights","window","height","outerHeight","max","_max","css","removeClass","fixLayoutHeight","on","resize","numbers","forEach","v","operation","each","data","_jQueryInterface","Constructor","noConflict","jQuery"],"mappings":"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","file":"Layout.js","sourcesContent":["/**\n * --------------------------------------------\n * AdminLTE Layout.js\n * License MIT\n * --------------------------------------------\n */\n\nconst Layout = (($) => {\n  'use strict'\n\n  /**\n   * Constants\n   * ====================================================\n   */\n\n  const NAME = 'Layout'\n  const DATA_KEY = 'lte.layout'\n  const EVENT_KEY = `.${DATA_KEY}`\n  const JQUERY_NO_CONFLICT = $.fn[NAME]\n\n  const Event = {\n    SIDEBAR: 'sidebar'\n  }\n\n  const Selector = {\n    SIDEBAR: '.main-sidebar',\n    HEADER: '.main-header',\n    CONTENT: '.content-wrapper',\n    CONTENT_HEADER: '.content-header',\n    WRAPPER: '.wrapper',\n    CONTROL_SIDEBAR: '.control-sidebar',\n    LAYOUT_FIXED: '.layout-fixed',\n    FOOTER: '.main-footer'\n  }\n\n  const ClassName = {\n    HOLD: 'hold-transition',\n    SIDEBAR: 'main-sidebar',\n    LAYOUT_FIXED: 'layout-fixed'\n  }\n\n  /**\n   * Class Definition\n   * ====================================================\n   */\n\n  class Layout {\n\n    constructor(element) {\n      this._element = element\n\n      this._init()\n    }\n\n    // Public\n\n    fixLayoutHeight() {\n      let heights = [\n          $(window).height(),\n          $(Selector.HEADER).outerHeight(),\n          $(Selector.FOOTER).outerHeight(),\n          $(Selector.SIDEBAR).height()\n        ],\n        max = this._max(heights)\n\n      $(Selector.CONTENT).css('min-height', max - (heights[1] + heights[2]))\n    }\n\n    // Private\n\n    _init() {\n      // Enable transitions\n      $('body').removeClass(ClassName.HOLD)\n\n      // Activate layout height watcher\n      this.fixLayoutHeight()\n      $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {\n        this.fixLayoutHeight()\n      })\n      $(window).resize(() => {\n        this.fixLayoutHeight()\n      })\n    }\n\n    _max(numbers) {\n      // Calculate the maximum number in a list\n      let max = 0\n\n      numbers.forEach((v) => {\n        if (v > max) {\n          max = v\n        }\n      })\n\n      return max\n    }\n\n\n    // Static\n\n    static _jQueryInterface(operation) {\n      return this.each(function () {\n        let data = $(this).data(DATA_KEY)\n\n        if (!data) {\n          data = new Layout(this)\n          $(this).data(DATA_KEY, data)\n        }\n\n        if (operation) {\n          data[operation]()\n        }\n      })\n    }\n  }\n\n  /**\n   * jQuery API\n   * ====================================================\n   */\n\n  $.fn[NAME] = Layout._jQueryInterface\n  $.fn[NAME].Constructor = Layout\n  $.fn[NAME].noConflict = function () {\n    $.fn[NAME] = JQUERY_NO_CONFLICT\n    return Layout._jQueryInterface\n  }\n\n  return Layout\n\n})(jQuery)\n"]}
\ No newline at end of file

build/js/src/AdminLTE.js

@@ -68,8 +68,10 @@ const Layout = (($) => {
     // Private
 
     _init() {
+      // Enable transitions
       $('body').removeClass(ClassName.HOLD)
 
+      // Activate layout height watcher
       this.fixLayoutHeight()
       $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
         this.fixLayoutHeight()
@@ -80,6 +82,7 @@ const Layout = (($) => {
     }
 
     _max(numbers) {
+      // Calculate the maximum number in a list
       let max = 0
 
       numbers.forEach((v) => {
@@ -91,6 +94,7 @@ const Layout = (($) => {
       return max
     }
 
+
     // Static
 
     static _jQueryInterface(operation) {
@@ -431,3 +435,132 @@ const Widget = (($) => {
   return Widget
 
 })(jQuery)
+
+const ControlSidebar = (($) => {
+  'use strict'
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  const NAME               = 'ControlSidebar'
+  const DATA_KEY           = 'lte.control.sidebar'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+  const DATA_API_KEY       = '.data-api'
+
+  const Event = {
+    CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+  }
+
+  const Selector = {
+    CONTROL_SIDEBAR: '.control-sidebar',
+    DATA_TOGGLE    : '[data-widget="control-sidebar"]'
+  }
+
+  const ClassName = {
+    CONTROL_SIDEBAR_OPEN : 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
+  }
+
+  const Default = {
+    slide: true
+  }
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  class ControlSidebar {
+
+    constructor(element, config) {
+      this._element = element
+      this._config  = this._getConfig(config);
+    }
+
+    // Public
+
+    show() {
+      console.log('showing', this._config.slide)
+      // Show the control sidebar
+      if (this._config.slide) {
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      } else {
+        $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
+      }
+    }
+
+    collapse() {
+      // Collapse the control sidebar
+      if (this._config.slide) {
+        $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE)
+      } else {
+        $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
+      }
+    }
+
+    toggle() {
+      if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
+        // Open the control sidebar
+        this.show()
+      } else {
+        // Close the control sidebar
+        this.collapse()
+      }
+    }
+
+    // Private
+
+    _getConfig(config) {
+      return $.extend({}, Default, config)
+    }
+
+    // Static
+
+    static _jQueryInterface(operation) {
+      return this.each(function () {
+        let data = $(this).data(DATA_KEY)
+
+        if (!data) {
+          data = new ControlSidebar(this, $(this).data())
+          $(this).data(DATA_KEY, data)
+        }
+
+        if(data[operation] === undefined) {
+          throw new Error(`${operation} is not a function`)
+        }
+
+        data[operation]();
+      })
+    }
+  }
+
+  /**
+   *
+   * Data Api implementation
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+    event.preventDefault()
+
+    ControlSidebar._jQueryInterface.call($(this), 'toggle')
+  })
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = ControlSidebar._jQueryInterface
+  $.fn[NAME].Constructor = ControlSidebar
+  $.fn[NAME].noConflict  = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return ControlSidebar._jQueryInterface
+  }
+
+  return ControlSidebar
+
+})(jQuery)

build/js/src/Layout.js

@@ -69,8 +69,10 @@ const Layout = (($) => {
     // Private
 
     _init() {
+      // Enable transitions
       $('body').removeClass(ClassName.HOLD)
 
+      // Activate layout height watcher
       this.fixLayoutHeight()
       $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', () => {
         this.fixLayoutHeight()
@@ -81,6 +83,7 @@ const Layout = (($) => {
     }
 
     _max(numbers) {
+      // Calculate the maximum number in a list
       let max = 0
 
       numbers.forEach((v) => {
@@ -92,6 +95,7 @@ const Layout = (($) => {
       return max
     }
 
+
     // Static
 
     static _jQueryInterface(operation) {

build/scss/_bootstrap_variables.scss

@@ -105,7 +105,7 @@ $border-width: 1px !default;
 // Settings for the `<body>` element.
 
 $body-bg:    #fff !default;
-$body-color: $gray-dark !default;
+$body-color: $gray !default;
 
 
 // Links
@@ -467,7 +467,7 @@ $dropdown-link-active-bg:        $component-active-bg !default;
 
 $dropdown-link-disabled-color:   $gray-light !default;
 
-$dropdown-item-padding-x:        0.5rem !default;
+$dropdown-item-padding-x:        1rem !default;
 
 $dropdown-header-color:          $gray-light !default;
 
@@ -523,7 +523,7 @@ $nav-tabs-border-width:                       $border-width !default;
 $nav-tabs-border-radius:                      $border-radius !default;
 $nav-tabs-link-hover-border-color:            $gray-lighter !default;
 $nav-tabs-active-link-hover-color:            $gray !default;
-$nav-tabs-active-link-hover-bg:               $body-bg !default;
+$nav-tabs-active-link-hover-bg:               transparent !default;
 $nav-tabs-active-link-hover-border-color:     #ddd !default;
 $nav-tabs-justified-link-border-color:        #ddd !default;
 $nav-tabs-justified-active-link-border-color: $body-bg !default;

build/scss/_control-sidebar.scss

 /*
  * Component: Control sidebar. By default, this is the right sidebar.
  */
-//The sidebar's background control class
-//This is a hack to make the background visible while scrolling
-.control-sidebar-bg {
-  position: fixed;
-  z-index: 820;
-  bottom: 0;
-}
 
-//Transitions
-.control-sidebar-bg,
-.control-sidebar {
-  top: 0;
-  bottom: 0;
-  right: -$control-sidebar-width;
-  width: $control-sidebar-width;
-  transition: right $transition-speed ease-in-out
-}
-
-//The sidebar
 .control-sidebar {
   position: absolute;
-  padding-top: $main-header-height;
   z-index: 830;
-  height: 100%;
-  overflow: auto;
-  //Tab panes
-  > .tab-content {
-    padding: 10px 15px;
+
+  &,
+  &:before {
+    width: $control-sidebar-width;
+    top: $main-header-height;
+    right: -$control-sidebar-width;
+    bottom: 0;
+    @include transition(right $transition-speed $transition-fn);
   }
-  //Open state with slide over content effect
-  &.control-sidebar-open {
-    &,
-    + .control-sidebar-bg {
-      right: 0;
-    }
+
+  &:before {
+    display: block;
+    position: fixed;
+    content: " ";
+    z-index: -1;
   }
 }
 
-//Open without slide over content
+// Control sidebar open state
 .control-sidebar-open {
-  .control-sidebar-bg,
   .control-sidebar {
-    right: 0;
-  }
-  @media (min-width: map-get($grid-breakpoints, sm)) {
-    .content-wrapper {
-      margin-right: $control-sidebar-width;
+    &,
+    &:before {
+      right: 0;
     }
   }
-}
-
-//Control sidebar tabs
-.nav-tabs.control-sidebar-tabs {
-  //display: table;
-  //width: 100%;
-  > .nav-item {
-    //display: table-cell;
-    //width: auto;
-    &:first-of-type > .nav-link {
-      &,
-      &:hover,
-      &:focus {
-        border-left-width: 0;
-      }
-    }
-    > .nav-link {
-      @include border-radius(0);
 
-      //Hover and active states
-      &,
-      &:hover {
-        border-top: none;
-        border-right: none;
-        border-left: 1px solid transparent;
-        border-bottom: 1px solid transparent;
-      }
-      .icon {
-        font-size: 16px;
-      }
-    }
-    //Active state
-    &.active {
-      > .nav-link {
-        &,
-        &:hover,
-        &:focus,
-        &:active {
-          border-top: none;
-          border-right: none;
-          border-bottom: none;
-        }
-      }
-    }
+  .content-wrapper,
+  .main-footer {
+    margin-right: $control-sidebar-width;
   }
-  //Remove responsiveness on small screens
-  @media (max-width: map-get($grid-breakpoints, md)) {
-    display: table;
-    > li {
-      display: table-cell;
+}
+
+// Control sidebar slide over content state
+.control-sidebar-slide-open {
+  .control-sidebar {
+    &,
+    &:before {
+      right: 0;
     }
   }
 }
 
-//Headings in the sidebar content
-.control-sidebar-heading {
-  font-weight: 400;
-  font-size: 16px;
-  padding: 10px 0;
-  margin-bottom: 10px;
-}
+// Dark skin
+.control-sidebar-dark {
+  &,
+  a,
+  .nav-link {
+    color: $sidebar-dark-color;
+  }
 
-//Subheadings
-.control-sidebar-subheading {
-  display: block;
-  font-weight: 400;
-  font-size: 14px;
-}
+  //  Background
+  &,
+  &:before {
+    background: $sidebar-dark-bg;
+  }
 
-//Control Sidebar Menu
-.control-sidebar-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0 -15px;
-  > li > a {
-    @include clearfix();
-    display: block;
-    padding: 10px 15px;
-    > .control-sidebar-subheading {
-      margin-top: 0;
-    }
+  a:hover {
+    color: $sidebar-dark-hover-color;
   }
-  .menu-icon {
-    float: left;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 35px;
+
+  // Headers
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  label {
+    color: $sidebar-dark-hover-color;
   }
-  .menu-info {
-    margin-left: 45px;
-    margin-top: 3px;
-    > .control-sidebar-subheading {
-      margin: 0;
-    }
-    > p {
+
+  // Tabs
+  .nav-tabs {
+    border-bottom: 0;
+    background-color: $sidebar-dark-submenu-bg;
+    margin-bottom: 5px;
+
+    .nav-item {
       margin: 0;
-      font-size: 11px;
     }
-  }
-  .progress {
-    margin: 0;
-  }
-}
 
-//Dark skin
-.control-sidebar-dark {
-  color: $sidebar-dark-color;
-  // Background
-  &,
-  + .control-sidebar-bg {
-    background: $sidebar-dark-bg;
-  }
-  // Sidebar tabs
-  .nav-tabs.control-sidebar-tabs {
-    border-bottom: darken($sidebar-dark-bg, 3%);
-    > li {
-      > a {
-        background: darken($sidebar-dark-bg, 5%);
-        color: $sidebar-dark-color;
-        //Hover and active states
-        &,
-        &:hover,
-        &:focus {
-          border-left-color: darken($sidebar-dark-bg, 7%);
-          border-bottom-color: darken($sidebar-dark-bg, 7%);
-        }
-        &:hover,
-        &:focus,
-        &:active {
-          background: darken($sidebar-dark-bg, 3%);
-        }
-        &:hover {
-          color: #fff;
-        }
+    .nav-link {
+      position: relative;
+      border-radius: 0;
+      text-align: center;
+      padding: 10px 20px;
+
+      &,
+      &:hover,
+      &:active,
+      &:focus,
+      &.active {
+        border: 0;
       }
-      //Active state
+
+      &:hover,
+      &:active,
+      &:focus,
       &.active {
-        > a {
-          &,
-          &:hover,
-          &:focus,
-          &:active {
-            background: $sidebar-dark-bg;
-            color: #fff;
-          }
-        }
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+        border-top-color: transparent;
+        color: $sidebar-dark-hover-color;
       }
-    }
-  }
-  //Heading & subheading
-  .control-sidebar-heading,
-  .control-sidebar-subheading {
-    color: #fff;
-  }
-  //Sidebar list
-  .control-sidebar-menu {
-    > li {
-      > a {
-        &:hover {
-          background: $sidebar-dark-hover-bg;
-        }
-        .menu-info {
-          > p {
-            color: $sidebar-dark-color;
-          }
-        }
+
+      &.active {
+        background-color: $sidebar-dark-bg;
       }
     }
   }
+
+  .tab-pane {
+    padding: 10px 15px;
+  }
 }
 
-//Light skin
+// Light skin
 .control-sidebar-light {
   color: lighten($sidebar-light-color, 10%);
-  // Background
+
+  //  Background
   &,
-  + .control-sidebar-bg {
+  &:before {
     background: $sidebar-light-bg;
     border-left: 1px solid $gray;
   }
-  // Sidebar tabs
-  .nav-tabs.control-sidebar-tabs {
-    border-bottom: $gray;
-    > li {
-      > a {
-        background: darken($sidebar-light-bg, 5%);
-        color: $sidebar-light-color;
-        //Hover and active states
-        &,
-        &:hover,
-        &:focus {
-          border-left-color: $gray;
-          border-bottom-color: $gray;
-        }
-        &:hover,
-        &:focus,
-        &:active {
-          background: darken($sidebar-light-bg, 3%);
-        }
-      }
-      //Active state
-      &.active {
-        > a {
-          &,
-          &:hover,
-          &:focus,
-          &:active {
-            background: $sidebar-light-bg;
-            color: #111;
-          }
-        }
-      }
-    }
-  }
-  //Heading & subheading
-  .control-sidebar-heading,
-  .control-sidebar-subheading {
-    color: #111;
-  }
-  //Sidebar list
-  .control-sidebar-menu {
-    margin-left: -14px;
-    > li {
-      > a {
-        &:hover {
-          background: $sidebar-light-hover-bg;
-        }
-        .menu-info {
-          > p {
-            color: lighten($sidebar-light-color, 10%);
-          }
-        }
-      }
-    }
-  }
 }

build/scss/_dropdown.scss

@@ -3,14 +3,53 @@
  * -------------------------
  */
 
+// General Dropdown Rules
+.dropdown-item {
+  &:first-of-type {
+    @include border-top-radius($border-radius);
+  }
+  &:last-of-type {
+    @include border-bottom-radius($border-radius);
+  }
+}
+
+.dropdown-item-title {
+  font-size: $font-size-base;
+  margin: 0;
+}
+
+// Dropdown Sizes
 .dropdown-menu-lg {
-  min-width: 230px;
-  .dropdown-footer {
-    text-align: center;
-    display: block;
+  min-width: 280px;
+  max-width: 300px;
+  padding: 0;
+  .dropdown-divider {
+    margin: 0;
   }
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+  p {
+    white-space: normal;
+    margin: 0;
+  }
+}
+
+// Dropdown header and footer
+.dropdown-footer,
+.dropdown-header {
+  text-align: center;
+  display: block;
+  padding: .5rem $dropdown-item-padding-x;
+  font-size: $font-size-sm;
 }
 
+.dropdown-header {
+  &:hover {
+    background-color: #fff;
+    color: $gray-light;
+  }
+}
 
 /* Add fade animation to dropdown menus by appending
  the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/

build/scss/_forms.scss

@@ -54,6 +54,24 @@
       box-shadow: none;
     }
   }
+
+  &.has-icon {
+    position: relative;
+    .form-control {
+      padding-right: 35px;
+    }
+    .form-icon {
+      cursor: pointer;
+      position: absolute;
+      right: 3px;
+      top: 0;
+      padding: $input-padding-y $input-padding-x;
+      margin-top: -3px;
+      border: 0;
+      background-color: transparent;
+      font-size: 1rem;
+    }
+  }
 }
 
 /* Input group */

build/scss/_header.scss

@@ -12,6 +12,7 @@
     background: darken($brand-primary, 5%);
     transition: width $transition-speed $transition-fn;
     overflow: hidden;
+    margin-right: 0;
 
     > .logo-mini {
       display: none;
@@ -28,6 +29,7 @@
         }
       }
     }
+
     @include media-breakpoint-down(md) {
       width: $sidebar-mini-width;
       > .logo {
@@ -39,8 +41,18 @@
     }
   }
 
+  .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(#000, .1);
   }
 
   .has-img {
@@ -49,28 +61,35 @@
   }
 
   .navbar-nav[class*="-right"] {
-    .nav-item:first-of-type {
-      @media (max-width: breakpoint-max(md)) {
-        margin-left: 1rem;
-      }
-    }
     .dropdown-menu {
       margin-top: -3px;
       right: 0;
       left: auto;
-      @media (max-width: breakpoint-max(md)) {
+      @media (max-width: breakpoint-max(xs)) {
         left: 0;
         right: auto;
       }
     }
   }
+
 }
 
+// Add shadow to the navbar if wanted
 .navbar-shadow {
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
+  @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-xs - .1;
+  padding: 2px 4px;
 }
\ No newline at end of file

build/scss/_layout.scss

@@ -2,11 +2,6 @@
  * Core: General Layout Style
  * -------------------------
  */
-html,
-body {
-  height: 100%;
-}
-
 html,
 body,
 .wrapper {
@@ -19,6 +14,8 @@ body,
 }
 
 .wrapper {
+  position: relative;
+
   .layout-boxed & {
     box-shadow: 0 0 10px rgba(0, 0, 0, .3);
     &,
@@ -47,9 +44,13 @@ body,
 .main-footer {
   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;
   }
+
   @media(max-width: breakpoint-max(md)) {
     &,
     &:before {
@@ -63,16 +64,6 @@ body,
   @include calc("min-height", "100% - #{$main-header-height + $main-footer-height}");
 }
 
-.content-wrapper,
-.main-footer,
-.main-sidebar,
-.main-sidebar {
-  &,
-  &:before {
-    @include transition(margin-left $transition-speed $transition-fn);
-  }
-}
-
 .content-wrapper {
   background: $main-bg;
   > .content-header,
@@ -91,7 +82,8 @@ body,
 
   &,
   &:before {
-    @include transition(width $transition-speed $transition-fn);
+    $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
+    @include transition($local-sidebar-transition);
     width: $sidebar-width;
   }
 
@@ -102,7 +94,7 @@ body,
     }
   }
 
-  @media(max-width: breakpoint-max(md)) {
+  @include media-breakpoint-down(md) {
     &,
     &:before {
       margin-left: -$sidebar-width;
@@ -120,7 +112,7 @@ body,
 .content-header {
   padding: 15px;
   background: #fff;
-  @include box-shadow(3px 0 6px rgba(0, 0, 0, 0.2));
+  border-bottom: 1px solid $card-border-color;
   h1 {
     font-size: 1.8rem;
     margin: 0;

build/scss/_miscellaneous.scss

@@ -360,7 +360,11 @@
 }
 
 .text-sm {
-  font-size: 12px;
+  font-size: $font-size-sm;
+}
+
+.text-xs {
+  font-size: $font-size-xs;
 }
 
 // _fix for sparkline tooltip
@@ -555,6 +559,51 @@
   @include border-radius(50%);
 }
 
+// Image sizes
+.img-size-64,
+.img-size-50,
+.img-size-32 {
+  height: auto;
+}
+
+.img-size-64 {
+  width: 64px;
+}
+
+.img-size-50 {
+  width: 50px;
+}
+
+.img-size-32 {
+  width: 32px;
+}
+
+// Block sizes
+.size-32,
+.size-40,
+.size-50 {
+  display: block;
+  text-align: center;
+}
+
+.size-32 {
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.size-40 {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.size-50 {
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+}
+
 //General attachemnt block
 .attachment-block {
   border: 1px solid $box-border-color;
@@ -617,3 +666,8 @@
     width: 100% !important;
   }
 }
+
+// Icons
+.icon-wide {
+  width: 30px;
+}

build/scss/_mixins.scss

@@ -132,7 +132,7 @@
 
     .dropdown-menu {
       border-color: darken($sidebar-dark-hover-bg, 5%);
-      @include box-shadow(0 2px 4px rgba(0,0,0,.4));
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
     }
 
     .dropdown-item {
@@ -193,29 +193,27 @@
       > .nav-link.active,
       > .nav-link:hover {
         color: $sidebar-dark-submenu-hover-color;
+        background: transparent;
       }
     }
   }
 
   // Sidebar form
   .sidebar-form {
-    margin: 5px 0;
     .form-control {
-      &::-webkit-input-placeholder,
-      &:-moz-placeholder,
-      &::-moz-placeholder,
-      &:-ms-input-placeholder {
-        color: red;
-      }
-      font-size: 14px;
-      background: $sidebar-dark-hover-bg;
+      background: $sidebar-dark-submenu-bg;
       border: 0;
-      color: $sidebar-dark-hover-color;
-      padding: 10px 10px;
+      &,
+      &:focus + .form-icon {
+        color: $sidebar-dark-hover-color;
+      }
       &:focus {
-        background: lighten($sidebar-dark-bg, 3%);
+        background: lighten($sidebar-dark-submenu-bg, 7%);
       }
     }
+    .form-icon {
+      color: $sidebar-dark-color;
+    }
   }
 }
 

build/scss/_sidebar-mini.scss

@@ -33,6 +33,10 @@
       }
 
       .nav-sidebar {
+        > .nav-label {
+          border-bottom-right-radius: $border-radius;
+        }
+
         > .nav-item {
           position: relative;
           z-index: 999;
@@ -57,11 +61,12 @@
             > .nav-link {
               overflow: visible;
             }
+
             > .nav-link > .text,
             > .nav-treeview {
               display: block !important;
               position: absolute;
-              width: $sidebar-width - $sidebar-mini-width;
+              width: $sidebar-width - ($sidebar-mini-width/2);
               left: $sidebar-mini-width;
             }
 
@@ -71,7 +76,11 @@
               margin-left: -3px;
               padding: $nav-link-padding;
               background-color: inherit;
-              border-top-right-radius: $border-radius;
+              @include border-right-radius($border-radius);
+            }
+
+            &.has-treeview > .nav-link > .text {
+              border-bottom-right-radius: 0;
             }
 
             > .nav-treeview {
@@ -94,6 +103,11 @@
         display: none !important;
         -webkit-transform: translateZ(0);
       }
+
+      // Make an element visible only when sidebar mini is active
+      .visible-sidebar-mini {
+        display: block !important;
+      }
     }
   }
 }
@@ -105,6 +119,10 @@
   overflow: hidden;
 }
 
+.nav-sidebar .nav-link {
+  white-space: normal;
+}
+
 .nav-sidebar {
   position: relative;
   &:hover {
@@ -127,3 +145,8 @@
     margin-top: -7px;
   }
 }
+
+// Make an element visible only when sidebar mini is active
+.visible-sidebar-mini {
+  display: none !important;
+}

build/scss/_sidebar.scss

@@ -9,7 +9,8 @@
 
 //Sidebar user panel
 .user-panel {
-  padding: 10px 10px 0 10px;
+  padding: 10px;
+  margin-bottom: 6px;
 
   .image {
     float: left;
@@ -58,26 +59,20 @@
 .nav-sidebar {
   //First Level
   > .nav-item {
-    margin-bottom: 0;
+    margin-top: 0 !important;
 
     > .nav-link {
       @include border-radius(0);
       > .nav-icon {
-        width: 20px;
+        width: 26px;
       }
     }
 
-    .pull-right {
+    .float-xs-right {
       margin-top: 3px;
-      margin-right: 5px;
     }
   }
 
-  .nav-header {
-    padding: $nav-link-padding;
-    font-size: .9em;
-  }
-
   // All other levels
   .nav-link > .fa-angle-left {
     width: auto;
@@ -87,10 +82,6 @@
     margin-top: 3px;
   }
 
-  .nav-item > .nav-link.active {
-    font-weight: $display1-weight;
-  }
-
   .menu-open {
     > .nav-treeview {
       display: block;
@@ -117,11 +108,18 @@
       > .nav-link {
         padding: 5px 5px 5px 15px;
         display: block;
-        font-size: 14px;
         > .nav-icon {
-          width: 20px;
+          width: 30px;
         }
       }
     }
   }
-}
\ No newline at end of file
+
+  .nav-header {
+    font-size: .9em;
+    padding: $nav-link-padding;
+    &:not(:first-of-type) {
+      padding: 1.7em 1em .5em 1em;
+    }
+  }
+}

build/scss/_variables.scss

@@ -40,7 +40,7 @@ $main-bg: $gray-lighter !default;
 // MAIN HEADER
 // --------------------------------------------------------
 $main-header-link-padding-y:  15px !default;
-$main-header-link-padding-x:  5px !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-height:          (($font-size-root * $line-height-base) + ($main-header-link-padding-y * 2)) !default;
@@ -57,7 +57,7 @@ $main-footer-height:           (($font-size-root * $line-height-base) + ($main-f
 
 // Dark sidebar
 $sidebar-dark-bg: #2c333c !default;//#222d32 !default;
-$sidebar-dark-hover-bg: darken($sidebar-dark-bg, 2%) !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;

dist/js/adminlte.js

@@ -76,8 +76,10 @@ var Layout = function ($) {
       value: function _init() {
         var _this = this;
 
+        // Enable transitions
         $('body').removeClass(ClassName.HOLD);
 
+        // Activate layout height watcher
         this.fixLayoutHeight();
         $(Selector.SIDEBAR).on('collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu', function () {
           _this.fixLayoutHeight();
@@ -89,6 +91,7 @@ var Layout = function ($) {
     }, {
       key: '_max',
       value: function _max(numbers) {
+        // Calculate the maximum number in a list
         var max = 0;
 
         numbers.forEach(function (v) {
@@ -472,4 +475,144 @@ var Widget = function ($) {
 
   return Widget;
 }(jQuery);
+
+var ControlSidebar = function ($) {
+  'use strict';
+
+  /**
+   * Constants
+   * ====================================================
+   */
+
+  var NAME = 'ControlSidebar';
+  var DATA_KEY = 'lte.control.sidebar';
+  var EVENT_KEY = '.' + DATA_KEY;
+  var JQUERY_NO_CONFLICT = $.fn[NAME];
+  var DATA_API_KEY = '.data-api';
+
+  var Event = {
+    CLICK_DATA_API: 'click' + EVENT_KEY + DATA_API_KEY
+  };
+
+  var Selector = {
+    CONTROL_SIDEBAR: '.control-sidebar',
+    DATA_TOGGLE: '[data-widget="control-sidebar"]'
+  };
+
+  var ClassName = {
+    CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
+    CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open'
+  };
+
+  var Default = {
+    slide: true
+  };
+
+  /**
+   * Class Definition
+   * ====================================================
+   */
+
+  var ControlSidebar = function () {
+    function ControlSidebar(element, config) {
+      _classCallCheck(this, ControlSidebar);
+
+      this._element = element;
+      this._config = this._getConfig(config);
+    }
+
+    // Public
+
+    _createClass(ControlSidebar, [{
+      key: 'show',
+      value: function show() {
+        console.log('showing', this._config.slide);
+        // Show the control sidebar
+        if (this._config.slide) {
+          $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+        } else {
+          $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN);
+        }
+      }
+    }, {
+      key: 'collapse',
+      value: function collapse() {
+        // Collapse the control sidebar
+        if (this._config.slide) {
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE);
+        } else {
+          $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN);
+        }
+      }
+    }, {
+      key: 'toggle',
+      value: function toggle() {
+        if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
+          // Open the control sidebar
+          this.show();
+        } else {
+          // Close the control sidebar
+          this.collapse();
+        }
+      }
+
+      // Private
+
+    }, {
+      key: '_getConfig',
+      value: function _getConfig(config) {
+        return $.extend({}, Default, config);
+      }
+
+      // Static
+
+    }], [{
+      key: '_jQueryInterface',
+      value: function _jQueryInterface(operation) {
+        return this.each(function () {
+          var data = $(this).data(DATA_KEY);
+
+          if (!data) {
+            data = new ControlSidebar(this, $(this).data());
+            $(this).data(DATA_KEY, data);
+          }
+
+          if (data[operation] === undefined) {
+            throw new Error(operation + ' is not a function');
+          }
+
+          data[operation]();
+        });
+      }
+    }]);
+
+    return ControlSidebar;
+  }();
+
+  /**
+   *
+   * Data Api implementation
+   * ====================================================
+   */
+
+  $(document).on('click', Selector.DATA_TOGGLE, function (event) {
+    event.preventDefault();
+
+    ControlSidebar._jQueryInterface.call($(this), 'toggle');
+  });
+
+  /**
+   * jQuery API
+   * ====================================================
+   */
+
+  $.fn[NAME] = ControlSidebar._jQueryInterface;
+  $.fn[NAME].Constructor = ControlSidebar;
+  $.fn[NAME].noConflict = function () {
+    $.fn[NAME] = JQUERY_NO_CONFLICT;
+    return ControlSidebar._jQueryInterface;
+  };
+
+  return ControlSidebar;
+}(jQuery);
 //# sourceMappingURL=adminlte.js.map

dist/js/adminlte.min.js

-"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Layout=function(a){var b="Layout",c="lte.layout",d=a.fn[b],e={SIDEBAR:".main-sidebar",HEADER:".main-header",CONTENT:".content-wrapper",CONTENT_HEADER:".content-header",WRAPPER:".wrapper",CONTROL_SIDEBAR:".control-sidebar",LAYOUT_FIXED:".layout-fixed",FOOTER:".main-footer"},f={HOLD:"hold-transition",SIDEBAR:"main-sidebar",LAYOUT_FIXED:"layout-fixed"},g=function(){function b(a){_classCallCheck(this,b),this._element=a,this._init()}return _createClass(b,[{key:"fixLayoutHeight",value:function(){var b=[a(window).height(),a(e.HEADER).outerHeight(),a(e.FOOTER).outerHeight(),a(e.SIDEBAR).height()],c=this._max(b);a(e.CONTENT).css("min-height",c-(b[1]+b[2]))}},{key:"_init",value:function(){var b=this;a("body").removeClass(f.HOLD),this.fixLayoutHeight(),a(e.SIDEBAR).on("collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu",function(){b.fixLayoutHeight()}),a(window).resize(function(){b.fixLayoutHeight()})}},{key:"_max",value:function(a){var b=0;return a.forEach(function(a){a>b&&(b=a)}),b}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c);e||(e=new b(this),a(this).data(c,e)),d&&e[d]()})}}]),b}();return a.fn[b]=g._jQueryInterface,a.fn[b].Constructor=g,a.fn[b].noConflict=function(){return a.fn[b]=d,g._jQueryInterface},g}(jQuery),Treeview=function(a){var b="Treeview",c="lte.treeview",d="."+c,e=a.fn[b],f={SELECTED:"selected"+d,EXPANDED:"expanded"+d,COLLAPSED:"collapsed"+d,LOAD_DATA_API:"load"+d},g={LI:".nav-item",LINK:".nav-link",TREEVIEW_MENU:".nav-treeview",OPEN:".menu-open",DATA_WIDGET:'[data-widget="treeview"]'},h={LI:"nav-item",LINK:"nav-link",TREEVIEW_MENU:"nav-treeview",OPEN:"menu-open"},i={trigger:g.DATA_WIDGET+" "+g.LINK,animationSpeed:300,accordion:!0},j=function(){function b(a,c){_classCallCheck(this,b),this._config=c,this._element=a}return _createClass(b,[{key:"init",value:function(){this._setupListeners()}},{key:"expand",value:function(b,c){var d=this,e=a.Event(f.EXPANDED);if(this._config.accordion){var i=c.siblings(g.OPEN).first(),j=i.find(g.TREEVIEW_MENU).first();this.collapse(j,i)}b.slideDown(this._config.animationSpeed,function(){c.addClass(h.OPEN),a(d._element).trigger(e)})}},{key:"collapse",value:function(b,c){var d=this,e=a.Event(f.COLLAPSED);b.slideUp(this._config.animationSpeed,function(){c.removeClass(h.OPEN),a(d._element).trigger(e),b.find(g.OPEN+" > "+g.TREEVIEW_MENU).slideUp(),b.find(g.OPEN).removeClass(h.OPEN)})}},{key:"collapseAll",value:function(){}},{key:"expandAll",value:function(){}},{key:"toggle",value:function(b){var c=a(b.currentTarget),d=c.next();if(d.is(g.TREEVIEW_MENU)){b.preventDefault();var e=c.parents(g.LI).first(),f=e.hasClass(h.OPEN);f?this.collapse(a(d),e):this.expand(a(d),e)}}},{key:"_setupListeners",value:function(){var b=this;a(document).on("click",this._config.trigger,function(a){b.toggle(a)})}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c),f=a.extend({},i,a(this).data());e||(e=new b(a(this),f),a(this).data(c,e)),"init"===d&&e[d]()})}}]),b}();return a(window).on(f.LOAD_DATA_API,function(){a(g.DATA_WIDGET).each(function(){var b=a(this);j._jQueryInterface.call(b,"init")})}),a.fn[b]=j._jQueryInterface,a.fn[b].Constructor=j,a.fn[b].noConflict=function(){return a.fn[b]=e,j._jQueryInterface},j}(jQuery),PushMenu=function(a){var b="PushMenu",c="lte.pushmenu",d="."+c,e=a.fn[b],f={COLLAPSED:"collapsed"+d,SHOWN:"shown"+d},g={COLLAPSED:"sidebar-collapse",TOGGLE_BUTTON:'[data-widget="pushmenu"]'},h=function(){function b(c){_classCallCheck(this,b),this._element=c,this._isShown=!a("body").hasClass(g.COLLAPSED)||a("body").hasClass("sidebar-open")}return _createClass(b,[{key:"show",value:function(){a("body").addClass("sidebar-open").removeClass(g.COLLAPSED),this._isShown=!0;var b=a.Event(f.SHOWN);a(this._element).trigger(b)}},{key:"collapse",value:function(){a("body").removeClass("sidebar-open").addClass(g.COLLAPSED),this._isShown=!1;var b=a.Event(f.COLLAPSED);a(this._element).trigger(b)}},{key:"toggle",value:function(){"undefined"==typeof this._isShown&&(this._isShown=!a("body").hasClass(g.COLLAPSED)||a("body").hasClass("sidebar-open")),this._isShown?this.collapse():this.show()}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c);e||(e=new b(this),a(this).data(c,e)),d&&e[d]()})}}]),b}();return a(document).on("click",g.TOGGLE_BUTTON,function(b){b.preventDefault();var c=b.currentTarget;"pushmenu"!==a(c).data("widget")&&(c=a(c).closest(g.TOGGLE_BUTTON)),h._jQueryInterface.call(a(c),"toggle")}),a.fn[b]=h._jQueryInterface,a.fn[b].Constructor=h,a.fn[b].noConflict=function(){return a.fn[b]=e,h._jQueryInterface},h}(jQuery),Widget=function(a){var b=function(){function b(a){_classCallCheck(this,b),this._element=a}return _createClass(b,null,[{key:"_jQueryInterface",value:function(b){var c=a(b);c.show()}}]),b}();return b}(jQuery);
\ No newline at end of file
+"use strict";function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),Layout=function(a){var b="Layout",c="lte.layout",d=a.fn[b],e={SIDEBAR:".main-sidebar",HEADER:".main-header",CONTENT:".content-wrapper",CONTENT_HEADER:".content-header",WRAPPER:".wrapper",CONTROL_SIDEBAR:".control-sidebar",LAYOUT_FIXED:".layout-fixed",FOOTER:".main-footer"},f={HOLD:"hold-transition",SIDEBAR:"main-sidebar",LAYOUT_FIXED:"layout-fixed"},g=function(){function b(a){_classCallCheck(this,b),this._element=a,this._init()}return _createClass(b,[{key:"fixLayoutHeight",value:function(){var b=[a(window).height(),a(e.HEADER).outerHeight(),a(e.FOOTER).outerHeight(),a(e.SIDEBAR).height()],c=this._max(b);a(e.CONTENT).css("min-height",c-(b[1]+b[2]))}},{key:"_init",value:function(){var b=this;a("body").removeClass(f.HOLD),this.fixLayoutHeight(),a(e.SIDEBAR).on("collapsed.lte.treeview expanded.lte.treeview collapsed.lte.pushmenu expanded.lte.pushmenu",function(){b.fixLayoutHeight()}),a(window).resize(function(){b.fixLayoutHeight()})}},{key:"_max",value:function(a){var b=0;return a.forEach(function(a){a>b&&(b=a)}),b}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c);e||(e=new b(this),a(this).data(c,e)),d&&e[d]()})}}]),b}();return a.fn[b]=g._jQueryInterface,a.fn[b].Constructor=g,a.fn[b].noConflict=function(){return a.fn[b]=d,g._jQueryInterface},g}(jQuery),Treeview=function(a){var b="Treeview",c="lte.treeview",d="."+c,e=a.fn[b],f={SELECTED:"selected"+d,EXPANDED:"expanded"+d,COLLAPSED:"collapsed"+d,LOAD_DATA_API:"load"+d},g={LI:".nav-item",LINK:".nav-link",TREEVIEW_MENU:".nav-treeview",OPEN:".menu-open",DATA_WIDGET:'[data-widget="treeview"]'},h={LI:"nav-item",LINK:"nav-link",TREEVIEW_MENU:"nav-treeview",OPEN:"menu-open"},i={trigger:g.DATA_WIDGET+" "+g.LINK,animationSpeed:300,accordion:!0},j=function(){function b(a,c){_classCallCheck(this,b),this._config=c,this._element=a}return _createClass(b,[{key:"init",value:function(){this._setupListeners()}},{key:"expand",value:function(b,c){var d=this,e=a.Event(f.EXPANDED);if(this._config.accordion){var i=c.siblings(g.OPEN).first(),j=i.find(g.TREEVIEW_MENU).first();this.collapse(j,i)}b.slideDown(this._config.animationSpeed,function(){c.addClass(h.OPEN),a(d._element).trigger(e)})}},{key:"collapse",value:function(b,c){var d=this,e=a.Event(f.COLLAPSED);b.slideUp(this._config.animationSpeed,function(){c.removeClass(h.OPEN),a(d._element).trigger(e),b.find(g.OPEN+" > "+g.TREEVIEW_MENU).slideUp(),b.find(g.OPEN).removeClass(h.OPEN)})}},{key:"collapseAll",value:function(){}},{key:"expandAll",value:function(){}},{key:"toggle",value:function(b){var c=a(b.currentTarget),d=c.next();if(d.is(g.TREEVIEW_MENU)){b.preventDefault();var e=c.parents(g.LI).first(),f=e.hasClass(h.OPEN);f?this.collapse(a(d),e):this.expand(a(d),e)}}},{key:"_setupListeners",value:function(){var b=this;a(document).on("click",this._config.trigger,function(a){b.toggle(a)})}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c),f=a.extend({},i,a(this).data());e||(e=new b(a(this),f),a(this).data(c,e)),"init"===d&&e[d]()})}}]),b}();return a(window).on(f.LOAD_DATA_API,function(){a(g.DATA_WIDGET).each(function(){var b=a(this);j._jQueryInterface.call(b,"init")})}),a.fn[b]=j._jQueryInterface,a.fn[b].Constructor=j,a.fn[b].noConflict=function(){return a.fn[b]=e,j._jQueryInterface},j}(jQuery),PushMenu=function(a){var b="PushMenu",c="lte.pushmenu",d="."+c,e=a.fn[b],f={COLLAPSED:"collapsed"+d,SHOWN:"shown"+d},g={COLLAPSED:"sidebar-collapse",TOGGLE_BUTTON:'[data-widget="pushmenu"]'},h=function(){function b(c){_classCallCheck(this,b),this._element=c,this._isShown=!a("body").hasClass(g.COLLAPSED)||a("body").hasClass("sidebar-open")}return _createClass(b,[{key:"show",value:function(){a("body").addClass("sidebar-open").removeClass(g.COLLAPSED),this._isShown=!0;var b=a.Event(f.SHOWN);a(this._element).trigger(b)}},{key:"collapse",value:function(){a("body").removeClass("sidebar-open").addClass(g.COLLAPSED),this._isShown=!1;var b=a.Event(f.COLLAPSED);a(this._element).trigger(b)}},{key:"toggle",value:function(){"undefined"==typeof this._isShown&&(this._isShown=!a("body").hasClass(g.COLLAPSED)||a("body").hasClass("sidebar-open")),this._isShown?this.collapse():this.show()}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c);e||(e=new b(this),a(this).data(c,e)),d&&e[d]()})}}]),b}();return a(document).on("click",g.TOGGLE_BUTTON,function(b){b.preventDefault();var c=b.currentTarget;"pushmenu"!==a(c).data("widget")&&(c=a(c).closest(g.TOGGLE_BUTTON)),h._jQueryInterface.call(a(c),"toggle")}),a.fn[b]=h._jQueryInterface,a.fn[b].Constructor=h,a.fn[b].noConflict=function(){return a.fn[b]=e,h._jQueryInterface},h}(jQuery),Widget=function(a){var b=function(){function b(a){_classCallCheck(this,b),this._element=a}return _createClass(b,null,[{key:"_jQueryInterface",value:function(b){var c=a(b);c.show()}}]),b}();return b}(jQuery),ControlSidebar=function(a){var b="ControlSidebar",c="lte.control.sidebar",d=a.fn[b],e={CONTROL_SIDEBAR:".control-sidebar",DATA_TOGGLE:'[data-widget="control-sidebar"]'},f={CONTROL_SIDEBAR_OPEN:"control-sidebar-open",CONTROL_SIDEBAR_SLIDE:"control-sidebar-slide-open"},g={slide:!0},h=function(){function b(a,c){_classCallCheck(this,b),this._element=a,this._config=this._getConfig(c)}return _createClass(b,[{key:"show",value:function(){console.log("showing",this._config.slide),this._config.slide?a("body").removeClass(f.CONTROL_SIDEBAR_SLIDE):a("body").removeClass(f.CONTROL_SIDEBAR_OPEN)}},{key:"collapse",value:function(){this._config.slide?a("body").addClass(f.CONTROL_SIDEBAR_SLIDE):a("body").addClass(f.CONTROL_SIDEBAR_OPEN)}},{key:"toggle",value:function(){a("body").hasClass(f.CONTROL_SIDEBAR_OPEN)||a("body").hasClass(f.CONTROL_SIDEBAR_SLIDE)?this.show():this.collapse()}},{key:"_getConfig",value:function(b){return a.extend({},g,b)}}],[{key:"_jQueryInterface",value:function(d){return this.each(function(){var e=a(this).data(c);if(e||(e=new b(this,a(this).data()),a(this).data(c,e)),void 0===e[d])throw new Error(d+" is not a function");e[d]()})}}]),b}();return a(document).on("click",e.DATA_TOGGLE,function(b){b.preventDefault(),h._jQueryInterface.call(a(this),"toggle")}),a.fn[b]=h._jQueryInterface,a.fn[b].Constructor=h,a.fn[b].noConflict=function(){return a.fn[b]=d,h._jQueryInterface},h}(jQuery);
\ No newline at end of file

dist/js/app.js

@@ -8,5 +8,5 @@
   'use strict';
 
   // Activate the layout manager
-  $(document).Layout();
+  $('body').Layout();
 }(jQuery));

dist/js/app.min.js

@@ -4,4 +4,4 @@
  * Homepage  Almsaeed Studio <https://almsaeedstudio.com>
  * License   MIT <https://github.com/almasaeed2010/AdminLTE/blob/master/LICENSE>
  */
-!function(a){"use strict";a(document).Layout()}(jQuery);
\ No newline at end of file
+!function(a){"use strict";a("body").Layout()}(jQuery);
\ No newline at end of file

dist/js/demo.js

@@ -50,56 +50,56 @@
 
   //Layout options
   demo_settings.append(
-      "<h4 class='control-sidebar-heading'>"
+      "<h5 class='control-sidebar-heading'>"
       + "Layout Options"
-      + "</h4>"
+      + "</h5>"
         //Fixed layout
-      + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
+      + "<div class='form-check'>"
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-layout='fixed' class='form-check-input float-xs-right'/> "
       + "Fixed layout"
       + "</label>"
-      + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
+      + "<small class='form-text'>Activate the fixed layout. You can't use fixed and boxed layouts together</small>"
       + "</div>"
         //Boxed layout
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-layout='layout-boxed'class='float-xs-right'/> "
       + "Boxed Layout"
       + "</label>"
-      + "<p>Activate the boxed layout</p>"
+      + "<small class='form-text'>Activate the boxed layout</small>"
       + "</div>"
         //Sidebar Toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-layout='sidebar-collapse' class='float-xs-right'/> "
       + "Toggle Sidebar"
       + "</label>"
-      + "<p>Toggle the left sidebar's state (open or collapse)</p>"
+      + "<small class='form-text'>Toggle the left sidebar's state (open or collapse)</small>"
       + "</div>"
         //Sidebar mini expand on hover toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-enable='expandOnHover' class='float-xs-right'/> "
       + "Sidebar Expand on Hover"
       + "</label>"
-      + "<p>Let the sidebar mini expand on hover</p>"
+      + "<small class='form-text'>Let the sidebar mini expand on hover</small>"
       + "</div>"
         //Control Sidebar Toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='float-xs-right'/> "
       + "Toggle Right Sidebar Slide"
       + "</label>"
-      + "<p>Toggle between slide over content and push content effects</p>"
+      + "<small class='form-text'>Toggle between slide over content and push content effects</small>"
       + "</div>"
         //Control Sidebar Skin Toggle
       + "<div class='form-group'>"
-      + "<label class='control-sidebar-subheading'>"
-      + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
+      + "<label class='form-control-label d-block'>"
+      + "<input type='checkbox' data-sidebarskin='toggle' class='float-xs-right'/> "
       + "Toggle Right Sidebar Skin"
       + "</label>"
-      + "<p>Toggle between dark and light skins for the right sidebar</p>"
+      + "<small class='form-text'>Toggle between dark and light skins for the right sidebar</small>"
       + "</div>"
   );
   var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
@@ -204,7 +204,7 @@
           + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
   skins_list.append(skin_yellow_light);
 
-  demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>");
+  demo_settings.append("<h5 class='control-sidebar-heading'>Skins</h5>");
   demo_settings.append(skins_list);
 
   tab_pane.append(demo_settings);

documentation/build/include/components.html

@@ -40,7 +40,7 @@
               <li class="dropdown messages-menu">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-envelope-o"></i>
-                  <span class="label label-success">4</span>
+                  <span class="tag tag-success">4</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 4 messages</li>
@@ -68,7 +68,7 @@
               <li class="dropdown notifications-menu">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-bell-o"></i>
-                  <span class="label label-warning">10</span>
+                  <span class="tag tag-warning">10</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 10 notifications</li>
@@ -89,7 +89,7 @@
               <li class="dropdown tasks-menu">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-flag-o"></i>
-                  <span class="label label-danger">9</span>
+                  <span class="tag tag-danger">9</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 9 tasks</li>
@@ -174,7 +174,7 @@
         &LT;li class="dropdown messages-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-envelope-o">&LT;/i>
-            &LT;span class="label label-success">4&LT;/span>
+            &LT;span class="tag tag-success">4&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 4 messages&LT;/li>
@@ -203,7 +203,7 @@
         &LT;li class="dropdown notifications-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-bell-o">&LT;/i>
-            &LT;span class="label label-warning">10&LT;/span>
+            &LT;span class="tag tag-warning">10&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 10 notifications&LT;/li>
@@ -225,7 +225,7 @@
         &LT;li class="dropdown tasks-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-flag-o">&LT;/i>
-            &LT;span class="label label-danger">9&LT;/span>
+            &LT;span class="tag tag-danger">9&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 9 tasks&LT;/li>
@@ -449,8 +449,8 @@
       &LT;li class="treeview">
         &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
         &LT;ul class="treeview-menu">
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
         &LT;/ul>
       &LT;/li>
     &LT;/ul>&LT;!-- /.sidebar-menu -->
@@ -640,7 +640,7 @@
       <div class="box-tools pull-right">
         <!-- Buttons, labels, and many other things can be placed here! -->
         <!-- Here is a label for example -->
-        <span class="label label-primary">Label</span>
+        <span class="tag tag-primary">Label</span>
       </div><!-- /.box-tools -->
     </div><!-- /.box-header -->
     <div class="box-body">
@@ -656,7 +656,7 @@
     &LT;div class="box-tools pull-right">
       &LT;!-- Buttons, labels, and many other things can be placed here! -->
       &LT;!-- Here is a label for example -->
-      &LT;span class="label label-primary">Label&LT;/span>
+      &LT;span class="tag tag-primary">Label&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">
@@ -906,7 +906,7 @@
         <div class="box-header with-border">
           <h3 class="box-title">Labels</h3>
           <div class="box-tools pull-right">
-            <span class="label label-default">Some Label</span>
+            <span class="tag tag-default">Some Label</span>
           </div><!-- /.box-tools -->
         </div><!-- /.box-header -->
         <div class="box-body">
@@ -918,7 +918,7 @@
   &LT;div class="box-header with-border">
     &LT;h3 class="box-title">Labels&LT;/h3>
     &LT;div class="box-tools pull-right">
-      &LT;span class="label label-default">8 New Messages&LT;/span>
+      &LT;span class="tag tag-default">8 New Messages&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">

documentation/build/include/download.html

@@ -8,7 +8,7 @@
       <div class="box box-primary">
         <div class="box-header with-border">
           <h3 class="box-title">Ready</h3>
-          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
+          <span class="tag tag-primary pull-right"><i class="fa fa-html5"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.</p>
@@ -20,7 +20,7 @@
       <div class="box box-danger">
         <div class="box-header with-border">
           <h3 class="box-title">Source Code</h3>
-          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
+          <span class="tag tag-danger pull-right"><i class="fa fa-database"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>All files including the compiled CSS. Download this version if you plan on customizing the template. <b>Requires a LESS compiler.</b></p>

documentation/index.html

@@ -129,7 +129,7 @@
       <div class="box box-primary">
         <div class="box-header with-border">
           <h3 class="box-title">Ready</h3>
-          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
+          <span class="tag tag-primary pull-right"><i class="fa fa-html5"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.</p>
@@ -141,7 +141,7 @@
       <div class="box box-danger">
         <div class="box-header with-border">
           <h3 class="box-title">Source Code</h3>
-          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
+          <span class="tag tag-danger pull-right"><i class="fa fa-database"></i></span>
         </div><!-- /.box-header -->
         <div class="box-body">
           <p>All files including the compiled CSS. Download this version if you plan on customizing the template. <b>Requires a LESS compiler.</b></p>
@@ -471,7 +471,7 @@ AdminLTE/
               <li class="dropdown messages-menu">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-envelope-o"></i>
-                  <span class="label label-success">4</span>
+                  <span class="tag tag-success">4</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 4 messages</li>
@@ -499,7 +499,7 @@ AdminLTE/
               <li class="dropdown notifications-menu">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-bell-o"></i>
-                  <span class="label label-warning">10</span>
+                  <span class="tag tag-warning">10</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 10 notifications</li>
@@ -520,7 +520,7 @@ AdminLTE/
               <li class="dropdown tasks-menu">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                   <i class="fa fa-flag-o"></i>
-                  <span class="label label-danger">9</span>
+                  <span class="tag tag-danger">9</span>
                 </a>
                 <ul class="dropdown-menu">
                   <li class="header">You have 9 tasks</li>
@@ -605,7 +605,7 @@ AdminLTE/
         &LT;li class="dropdown messages-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-envelope-o">&LT;/i>
-            &LT;span class="label label-success">4&LT;/span>
+            &LT;span class="tag tag-success">4&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 4 messages&LT;/li>
@@ -634,7 +634,7 @@ AdminLTE/
         &LT;li class="dropdown notifications-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-bell-o">&LT;/i>
-            &LT;span class="label label-warning">10&LT;/span>
+            &LT;span class="tag tag-warning">10&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 10 notifications&LT;/li>
@@ -656,7 +656,7 @@ AdminLTE/
         &LT;li class="dropdown tasks-menu">
           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
             &LT;i class="fa fa-flag-o">&LT;/i>
-            &LT;span class="label label-danger">9&LT;/span>
+            &LT;span class="tag tag-danger">9&LT;/span>
           &LT;/a>
           &LT;ul class="dropdown-menu">
             &LT;li class="header">You have 9 tasks&LT;/li>
@@ -880,8 +880,8 @@ AdminLTE/
       &LT;li class="treeview">
         &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
         &LT;ul class="treeview-menu">
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
-          &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
+          &LT;li>&LT;a href="#">Level Two&LT;/a>&LT;/li>
         &LT;/ul>
       &LT;/li>
     &LT;/ul>&LT;!-- /.sidebar-menu -->
@@ -1071,7 +1071,7 @@ AdminLTE/
       <div class="box-tools pull-right">
         <!-- Buttons, labels, and many other things can be placed here! -->
         <!-- Here is a label for example -->
-        <span class="label label-primary">Label</span>
+        <span class="tag tag-primary">Label</span>
       </div><!-- /.box-tools -->
     </div><!-- /.box-header -->
     <div class="box-body">
@@ -1087,7 +1087,7 @@ AdminLTE/
     &LT;div class="box-tools pull-right">
       &LT;!-- Buttons, labels, and many other things can be placed here! -->
       &LT;!-- Here is a label for example -->
-      &LT;span class="label label-primary">Label&LT;/span>
+      &LT;span class="tag tag-primary">Label&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">
@@ -1337,7 +1337,7 @@ AdminLTE/
         <div class="box-header with-border">
           <h3 class="box-title">Labels</h3>
           <div class="box-tools pull-right">
-            <span class="label label-default">Some Label</span>
+            <span class="tag tag-default">Some Label</span>
           </div><!-- /.box-tools -->
         </div><!-- /.box-header -->
         <div class="box-body">
@@ -1349,7 +1349,7 @@ AdminLTE/
   &LT;div class="box-header with-border">
     &LT;h3 class="box-title">Labels&LT;/h3>
     &LT;div class="box-tools pull-right">
-      &LT;span class="label label-default">8 New Messages&LT;/span>
+      &LT;span class="tag tag-default">8 New Messages&LT;/span>
     &LT;/div>&LT;!-- /.box-tools -->
   &LT;/div>&LT;!-- /.box-header -->
   &LT;div class="box-body">

pages/UI/buttons.html

@@ -52,7 +52,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -172,7 +172,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -333,7 +333,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -1532,7 +1532,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1544,7 +1544,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1556,7 +1556,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1568,7 +1568,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/general.html

@@ -83,7 +83,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -160,7 +160,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -203,7 +203,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -364,7 +364,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -1480,7 +1480,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1492,7 +1492,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1504,7 +1504,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -1516,7 +1516,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/icons.html

@@ -102,7 +102,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -179,7 +179,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -221,7 +221,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -382,7 +382,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -2855,7 +2855,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -2867,7 +2867,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -2879,7 +2879,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -2891,7 +2891,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/modals.html

@@ -68,7 +68,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -145,7 +145,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -188,7 +188,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -345,7 +345,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -723,7 +723,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -735,7 +735,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -747,7 +747,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -759,7 +759,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/sliders.html

@@ -58,7 +58,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -135,7 +135,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -177,7 +177,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -338,7 +338,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -646,7 +646,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -658,7 +658,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -670,7 +670,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -682,7 +682,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/UI/timeline.html

@@ -52,7 +52,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -129,7 +129,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -171,7 +171,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -727,7 +727,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -739,7 +739,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -751,7 +751,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -763,7 +763,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/calendar.html

@@ -55,7 +55,7 @@
           <li class="dropdown messages-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-envelope-o"></i>
-              <span class="label label-success">4</span>
+              <span class="tag tag-success">4</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 4 messages</li>
@@ -132,7 +132,7 @@
           <li class="dropdown notifications-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-bell-o"></i>
-              <span class="label label-warning">10</span>
+              <span class="tag tag-warning">10</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 10 notifications</li>
@@ -175,7 +175,7 @@
           <li class="dropdown tasks-menu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               <i class="fa fa-flag-o"></i>
-              <span class="label label-danger">9</span>
+              <span class="tag tag-danger">9</span>
             </a>
             <ul class="dropdown-menu">
               <li class="header">You have 9 tasks</li>
@@ -332,7 +332,7 @@
           <a href="#">
             <i class="fa fa-files-o"></i>
             <span>Layout Options</span>
-            <span class="label label-primary pull-right">4</span>
+            <span class="tag tag-primary pull-right">4</span>
           </a>
           <ul class="treeview-menu">
             <li><a href="layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
@@ -628,7 +628,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Custom Template Design
-                <span class="label label-danger pull-right">70%</span>
+                <span class="tag tag-danger pull-right">70%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -640,7 +640,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Update Resume
-                <span class="label label-success pull-right">95%</span>
+                <span class="tag tag-success pull-right">95%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -652,7 +652,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Laravel Integration
-                <span class="label label-warning pull-right">50%</span>
+                <span class="tag tag-warning pull-right">50%</span>
               </h4>
 
               <div class="progress progress-xxs">
@@ -664,7 +664,7 @@
             <a href="javascript:;">
               <h4 class="control-sidebar-subheading">
                 Back End Framework
-                <span class="label label-primary pull-right">68%</span>
+                <span class="tag tag-primary pull-right">68%</span>
               </h4>
 
               <div class="progress progress-xxs">

pages/layout/top-nav.html

@@ -72,7 +72,7 @@
               <!-- Menu toggle button -->
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-envelope-o"></i>
-                <span class="label label-success">4</span>
+                <span class="tag tag-success">4</span>
               </a>
               <ul class="dropdown-menu">
                 <li class="header">You have 4 messages</li>
@@ -108,7 +108,7 @@
               <!-- Menu toggle button -->
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-bell-o"></i>
-                <span class="label label-warning">10</span>
+                <span class="tag tag-warning">10</span>
               </a>
               <ul class="dropdown-menu">
                 <li class="header">You have 10 notifications</li>
@@ -131,7 +131,7 @@
               <!-- Menu Toggle Button -->
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-flag-o"></i>
-                <span class="label label-danger">9</span>
+                <span class="tag tag-danger">9</span>
               </a>
               <ul class="dropdown-menu">
                 <li class="header">You have 9 tasks</li>