enhanced scss structure & compiled size

- reduced filesize by ~100kb
- splited _mixins into seperate files
- replaced `@extend`'s
- added split css files (core, components, extra-components, ...)
- changed cursor style for .btn.disabled
- enhanced package.json css* scripts

build/scss/AdminLTE-components.scss

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

build/scss/AdminLTE-core.scss

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

build/scss/AdminLTE-extra-components.scss

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

build/scss/AdminLTE-pages.scss

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

build/scss/AdminLTE-plugins.scss

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

build/scss/AdminLTE-raw.scss

@@ -19,67 +19,9 @@
 @import 'variables';
 @import 'mixins';
 
-// Core
-// ---------------------------------------------------
-@import 'layout';
-
-// Components
-// ---------------------------------------------------
-@import 'main-header';
-@import 'brand';
-@import 'main-sidebar';
-@import 'sidebar-mini';
-@import 'control-sidebar';
-@import 'dropdown';
-@import 'forms';
-@import 'progress-bars';
-@import 'small-box';
-@import 'cards';
-@import 'info-box';
-@import 'timeline';
-@import 'buttons';
-@import 'callout';
-@import 'alerts';
-@import 'navs';
-@import 'products';
-@import 'table';
-@import 'direct-chat';
-@import 'users-list';
-@import 'carousel';
-@import 'social-widgets';
-@import 'modals';
-@import 'toasts';
-
-// Pages
-// ---------------------------------------------------
-@import 'pages/mailbox';
-@import 'pages/lockscreen';
-@import 'pages/login_and_register';
-@import 'pages/404_500_errors';
-@import 'pages/invoice';
-@import 'pages/profile';
-@import 'pages/e_commerce';
-@import 'pages/projects';
-
-// Plugins
-// ---------------------------------------------------
-@import 'plugins/mixins';
-@import 'plugins/fullcalendar';
-@import 'plugins/select2';
-@import 'plugins/bootstrap-slider';
-@import 'plugins/icheck-bootstrap';
-@import 'plugins/mapael';
-@import 'plugins/jqvmap';
-@import 'plugins/sweetalert2';
-@import 'plugins/toastr';
-@import 'plugins/pace';
-@import 'plugins/bootstrap-switch';
-@import 'plugins/miscellaneous';
-
-// Miscellaneous
-// ---------------------------------------------------
-@import 'miscellaneous';
-@import 'print';
-@import 'text';
-@import 'elevation';
-@import 'colors';
+@import 'parts/core';
+@import 'parts/components';
+@import 'parts/extra-components';
+@import 'parts/pages';
+@import 'parts/plugins';
+@import 'parts/miscellaneous';

build/scss/AdminLTE.scss

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

build/scss/_alerts.scss

@@ -22,7 +22,6 @@
   }
 }
 
-
 //Alert Variants
 @each $color, $value in $theme-colors {
   .alert-#{$color} {

build/scss/_bootstrap-variables.scss

@@ -98,15 +98,19 @@ $yiq-text-light: $white !default;
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-caret:              true !default;
-$enable-rounded:            true !default;
-$enable-shadows:            true !default;
-$enable-gradients:          false !default;
-$enable-transitions:        true !default;
-$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes:       true !default;
-$enable-print-styles:       true !default;
-
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              true !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
 
 // Spacing
 //
@@ -415,6 +419,9 @@ $input-placeholder-color:               lighten($gray-600, 15%) !default;
 $input-height-border:                   $input-border-width * 2 !default;
 
 $input-height-inner:                    ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
+
 $input-height:                          calc(#{$input-height-inner} + #{$input-height-border}) !default;
 
 $input-height-inner-sm:                 ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
@@ -692,6 +699,13 @@ $tooltip-arrow-width:         .8rem !default;
 $tooltip-arrow-height:        .4rem !default;
 $tooltip-arrow-color:         $tooltip-bg !default;
 
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
 // Popovers
 

build/scss/_buttons.scss

@@ -3,6 +3,11 @@
 //
 
 .btn {
+  &.disabled,
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   // Flat buttons
   &.btn-flat {
     @include border-radius(0);

build/scss/_callout.scss

@@ -9,14 +9,14 @@
   }
 
   @if $enable-shadows {
-    @extend .elevation-1;
+    box-shadow: map-get($elevations, 1);
   } @else {
     border: 1px solid $gray-300;
   }
 
-  @extend .mb-3;
   background-color: $white;
   border-left: 5px solid $gray-200;
+  margin-bottom: map-get($spacers, 3);
   padding: 1rem;
 
   a {

build/scss/_cards.scss

@@ -3,8 +3,8 @@
 //
 
 .card {
-  @extend .mb-3;
   @include box-shadow($card-shadow);
+  margin-bottom: map-get($spacers, 3);
 
   &.bg-dark {
     .card-header {
@@ -75,6 +75,56 @@
   .border-left {
     border-left: 1px solid $card-border-color;
   }
+
+  &:not(.card-outline) {
+    > .card-header {
+      border-bottom: 0;
+
+      .nav-item {
+        &:first-child .nav-link {
+          margin-left: -1px;
+        }
+      }
+    }
+  }
+
+  &.card-outline {
+    .nav-item {
+      border-bottom: 0;
+
+      &:first-child .nav-link {
+        border-left: 0;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &.card-outline-tabs {
+    border-top: 0;
+
+    > .card-header {
+      .nav-item {
+        &:first-child .nav-link {
+          border-left: 0;
+          margin-left: 0;
+        }
+      }
+
+      a {
+        border-top: 3px solid transparent;
+
+        &:hover {
+          border-top: 3px solid $nav-tabs-border-color;
+        }
+
+        &.active {
+          &:hover {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+  }
 }
 
 // Maximized Card Body Scroll fix
@@ -194,7 +244,7 @@ html.maximized-card {
 }
 
 .chart-legend {
-  @extend .list-unstyled;
+  @include list-unstyled;
   margin: 10px 0;
 
   > li {
@@ -223,7 +273,8 @@ html.maximized-card {
     }
 
     img {
-      @extend .img-sm;
+      height: $card-img-size;
+      width: $card-img-size;
       float: left;
     }
   }

build/scss/_direct-chat.scss

@@ -14,6 +14,19 @@
       @include translate(0, 0);
     }
   }
+
+
+  &.timestamp-light {
+    .direct-chat-timestamp {
+      color: lighten(color-yiq($yiq-text-light), 10%);
+    }
+  }
+
+  &.timestamp-dark {
+    .direct-chat-timestamp {
+      color: darken(color-yiq($yiq-text-dark), 20%);
+    }
+  }
 }
 
 .direct-chat-messages {
@@ -150,7 +163,7 @@
 
 //Contacts list -- for displaying contacts in direct chat contacts pane
 .contacts-list {
-  @extend .list-unstyled;
+  @include list-unstyled;
 
   > li {
     @include clearfix;

build/scss/_elevation.scss

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

build/scss/_info-box.scss

@@ -3,12 +3,12 @@
 //
  
 .info-box {
-  @extend .d-flex;
-  @extend .mb-3;
   @include box-shadow($card-shadow);
   @include border-radius($border-radius);
 
   background: $white;
+  display: flex;
+  margin-bottom: map-get($spacers, 3);
   min-height: 80px;
   padding: .5rem;
   position: relative;
@@ -24,16 +24,14 @@
   }
 
   .info-box-icon {
-    @extend .d-flex;
-    @extend .align-items-center;
-    @extend .justify-content-center;
-
     @if $enable-rounded {
       border-radius: $border-radius;
     }
 
+    align-items: center;
     display: block;
     font-size: 1.875rem;
+    justify-content: center;
     text-align: center;
     width: 70px;
 

build/scss/_main-sidebar.scss

@@ -230,7 +230,7 @@
       color: $sidebar-light-active-color;
 
       @if $enable-shadows {
-        @extend .elevation-1;
+        box-shadow: map-get($elevations, 1);
       }
     }
 
@@ -353,7 +353,7 @@
       color: $sidebar-dark-hover-color;
 
       @if $enable-shadows {
-        @extend .elevation-1;
+        box-shadow: map-get($elevations, 1);
       }
     }
 

build/scss/_miscellaneous.scss

@@ -99,7 +99,8 @@
 
   &.user-block-sm {
     img {
-      @extend .img-sm;
+      width: $img-size-sm;
+      height: $img-size-sm;
     }
 
     .username,
@@ -122,29 +123,29 @@
 }
 
 .img-sm {
-  height: 30px !important;
-  width: 30px !important;
+  height: $img-size-sm;
+  width: $img-size-sm;
 
   + .img-push {
-    margin-left: 40px;
+    margin-left: $img-size-sm + $img-size-push;
   }
 }
 
 .img-md {
-  width: 60px;
-  height: 60px;
+  width: $img-size-md;
+  height: $img-size-md;
 
   + .img-push {
-    margin-left: 70px;
+    margin-left: $img-size-md + $img-size-push;
   }
 }
 
 .img-lg {
-  width: 100px;
-  height: 100px;
+  width: $img-size-lg;
+  height: $img-size-lg;
 
   + .img-push {
-    margin-left: 110px;
+    margin-left: $img-size-lg + $img-size-push;
   }
 }
 

build/scss/_mixins.scss

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

build/scss/_progress-bars.scss

@@ -40,7 +40,7 @@
 }
 
 .progress-group {
-  @extend .mb-2;
+  margin-bottom: map-get($spacers, 2);
 }
 
 // size variation

build/scss/_small-box.scss

@@ -5,7 +5,6 @@
 .small-box {
   @include border-radius($border-radius);
   @include box-shadow($card-shadow);
-  @extend .mb-3;
 
   display: block;
   margin-bottom: 20px;

build/scss/_table.scss

@@ -63,11 +63,11 @@
     tbody > tr > th,
     tbody > tr > td {
       &:first-of-type {
-        @extend .pl-4;
+        padding-left: map-get($spacers, 4);
       }
 
       &:last-of-type {
-        @extend .pr-4;
+        padding-right: map-get($spacers, 4);
       }
     }
   }

build/scss/_users-list.scss

@@ -3,7 +3,7 @@
 //
 
 .users-list {
-  @extend .list-unstyled;
+  @include list-unstyled;
 
   > li {
     float: left;

build/scss/_variables.scss

@@ -47,6 +47,13 @@ $main-bg: #f4f6f9 !default;
 $content-padding-y: 0 !default;
 $content-padding-x: $navbar-padding-x !default;
 
+// IMAGE SIZES
+// --------------------------------------------------------
+$img-size-sm: 1.875rem !default;
+$img-size-md: 3.75rem !default;
+$img-size-lg: 6.25rem !default;
+$img-size-push: .625rem !default;
+
 // MAIN HEADER
 // --------------------------------------------------------
 $main-header-bottom-border-width: $border-width !default;
@@ -126,8 +133,8 @@ $sidebar-light-header-color: $gray-800 !default;
 // SIDEBAR MINI
 // --------------------------------------------------------
 $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
-$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2);
-$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2);
+$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
+$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
 
 // CONTROL SIDEBAR
 // --------------------------------------------------------
@@ -138,12 +145,12 @@ $control-sidebar-width: $sidebar-width !default;
 $card-border-color: $gray-100 !default;
 $card-dark-border-color: lighten($gray-900, 10%) !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
-$card-title-font-size: 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;
-
+$card-title-font-size: 1.1rem !default;
+$card-title-font-size-sm: 1rem !default;
+$card-title-font-weight: $font-weight-normal !default;
+$card-nav-link-padding-sm-y: .4rem !default;
+$card-nav-link-padding-sm-x: .8rem !default;
+$card-img-size: $img-size-sm !default;
 
 // PROGRESS BARS
 // --------------------------------------------------------
@@ -180,8 +187,8 @@ $transition-fn: ease-in-out !default;
 
 // TEXT
 // --------------------------------------------------------
-$font-size-xs: ($font-size-base * .75);
-$font-size-xl: ($font-size-base * 2);
+$font-size-xs: ($font-size-base * .75) !default;
+$font-size-xl: ($font-size-base * 2) !default;
 
 
 // BUTTON
@@ -197,6 +204,17 @@ $button-font-size-xs: ($font-size-base * .75) !default;
 $button-border-radius-xs: .15rem !default;
 
   
+// ELEVATION
+// --------------------------------------------------------
+$elevations: ();
+$elevations: map-merge((
+    1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
+    2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
+    3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
+    4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
+    5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
+), $elevations);
+  
 // RIBBON
 // --------------------------------------------------------
 $ribbon-border-size: 3px !default;

build/scss/mixins/_accent.scss

@@ -0,0 +1,34 @@
+//
+// Mixins: Accent
+//
+
+// Accent Variant
+@mixin accent-variant($name, $color) {
+  .accent-#{$name} {
+    $link-color: $color;
+    $link-hover-color: darken($color, 15%);
+    $pagination-active-bg: $color;
+    $pagination-active-border-color: $color;
+
+    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;
+      }
+    }
+  }
+}
+

build/scss/mixins/_backgrounds.scss

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

build/scss/mixins/_cards.scss

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

build/scss/mixins/_custom-forms.scss

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

build/scss/mixins/_direct-chat.scss

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

build/scss/mixins/_miscellaneous.scss

@@ -0,0 +1,35 @@
+//
+// Mixins: Miscellaneous
+//
+
+// ETC
+@mixin translate($x, $y) {
+  transform: translate($x, $y);
+}
+
+// Different radius each side
+@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
+  border-radius: $top-left $top-right $bottom-left $bottom-right;
+}
+
+@mixin calc($property, $expression) {
+  #{$property}: calc(#{$expression});
+}
+
+@mixin rotate($value) {
+  transform: rotate($value);
+}
+
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+// Gradient background
+@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
+  background: $color;
+  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
+  background: -ms-linear-gradient(bottom, $start, $stop);
+  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
+  background: -o-linear-gradient($stop, $start);
+}
+

build/scss/mixins/_navbar.scss

@@ -0,0 +1,34 @@
+//
+// Mixins: Navbar
+//
+
+// Navbar Variant
+@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
+  background-color: $color;
+
+  .nav > li > a {
+    color: $font-color;
+  }
+
+  .nav > li > a:hover,
+  .nav > li > a:active,
+  .nav > li > a:focus,
+  .nav .open > a,
+  .nav .open > a:hover,
+  .nav .open > a:focus,
+  .nav > .active > a {
+    background: $hover-bg;
+    color: $hover-color;
+  }
+
+  // Add color to the sidebar toggle button
+  .sidebar-toggle {
+    color: $font-color;
+
+    &:hover,
+    &:focus {
+      background: $hover-bg;
+      color: $hover-color;
+    }
+  }
+}

build/scss/mixins/_sidebar.scss

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

build/scss/mixins/_toasts.scss

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

build/scss/pages/_mailbox.scss

@@ -41,7 +41,7 @@
 }
 
 .mailbox-attachments {
-  @extend .list-unstyled;
+  @include list-unstyled;
   li {
     border: 1px solid #eee;
     float: left;

build/scss/parts/_components.scss

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

build/scss/parts/_core.scss

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

build/scss/parts/_extra-components.scss

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

build/scss/parts/_miscellaneous.scss

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

build/scss/parts/_pages.scss

@@ -0,0 +1,12 @@
+//
+// Part: Pages
+//
+
+@import '../pages/mailbox';
+@import '../pages/lockscreen';
+@import '../pages/login_and_register';
+@import '../pages/404_500_errors';
+@import '../pages/invoice';
+@import '../pages/profile';
+@import '../pages/e_commerce';
+@import '../pages/projects';

build/scss/parts/_plugins.scss

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

build/scss/plugins/_mixins.scss

@@ -37,27 +37,25 @@
           &: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 {
+            background-color: $color;
+            border-color: darken($color, 5%);
+            color: color-yiq($color);
+          }
 
-        .select2-selection__choice__remove {
-          color: rgba(color-yiq($color), 0.7);
+          .select2-selection__choice__remove {
+            color: rgba(color-yiq($color), 0.7);
 
-          &:hover {
-            color: color-yiq($color);
+            &:hover {
+              color: color-yiq($color);
+            }
           }
         }
+
+        &.select2-container--focus .select2-selection--multiple {
+          border-color: lighten($color, 25%);
+        }
       }
     }
   }

dist/css/alt/adminlte.pages.css

@@ -0,0 +1,444 @@
+/*!
+ *   AdminLTE: Pages v3.0.0-rc.5
+ *     Only Pages
+ *   Author: Colorlib
+ *	 Website: AdminLTE.io <http://adminlte.io>
+ *   License: Open source - MIT <http://opensource.org/licenses/MIT>
+ */
+.close, .mailbox-attachment-close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: .5;
+}
+
+.close:hover, .mailbox-attachment-close:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus {
+  opacity: .75;
+}
+
+button.close, button.mailbox-attachment-close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  appearance: none;
+}
+
+a.close.disabled, a.disabled.mailbox-attachment-close {
+  pointer-events: none;
+}
+
+.mailbox-messages > .table {
+  margin: 0;
+}
+
+.mailbox-controls {
+  padding: 5px;
+}
+
+.mailbox-controls.with-border {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.mailbox-read-info {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  padding: 10px;
+}
+
+.mailbox-read-info h3 {
+  font-size: 20px;
+  margin: 0;
+}
+
+.mailbox-read-info h5 {
+  margin: 0;
+  padding: 5px 0 0;
+}
+
+.mailbox-read-time {
+  color: #999;
+  font-size: 13px;
+}
+
+.mailbox-read-message {
+  padding: 10px;
+}
+
+.mailbox-attachments {
+  padding-left: 0;
+  list-style: none;
+}
+
+.mailbox-attachments li {
+  border: 1px solid #eee;
+  float: left;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  width: 200px;
+}
+
+.mailbox-attachment-name {
+  color: #666;
+  font-weight: bold;
+}
+
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+  display: block;
+}
+
+.mailbox-attachment-info {
+  background: #f8f9fa;
+  padding: 10px;
+}
+
+.mailbox-attachment-size {
+  color: #999;
+  font-size: 12px;
+}
+
+.mailbox-attachment-size > span {
+  display: inline-block;
+  padding-top: 0.75rem;
+}
+
+.mailbox-attachment-icon {
+  color: #666;
+  font-size: 65px;
+  max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+}
+
+.mailbox-attachment-icon.has-img {
+  padding: 0;
+}
+
+.mailbox-attachment-icon.has-img > img {
+  height: auto;
+  max-width: 100%;
+}
+
+.lockscreen {
+  background: #e9ecef;
+}
+
+.lockscreen .lockscreen-name {
+  font-weight: 600;
+  text-align: center;
+}
+
+.lockscreen-logo {
+  font-size: 35px;
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.lockscreen-logo a {
+  color: #495057;
+}
+
+.lockscreen-wrapper {
+  margin: 0 auto;
+  margin-top: 10%;
+  max-width: 400px;
+}
+
+.lockscreen-item {
+  border-radius: 4px;
+  background: #ffffff;
+  margin: 10px auto 30px;
+  padding: 0;
+  position: relative;
+  width: 290px;
+}
+
+.lockscreen-image {
+  border-radius: 50%;
+  background: #ffffff;
+  left: -10px;
+  padding: 5px;
+  position: absolute;
+  top: -25px;
+  z-index: 10;
+}
+
+.lockscreen-image > img {
+  border-radius: 50%;
+  height: 70px;
+  width: 70px;
+}
+
+.lockscreen-credentials {
+  margin-left: 70px;
+}
+
+.lockscreen-credentials .form-control {
+  border: 0;
+}
+
+.lockscreen-credentials .btn {
+  background-color: #ffffff;
+  border: 0;
+  padding: 0 10px;
+}
+
+.lockscreen-footer {
+  margin-top: 10px;
+}
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+}
+
+.login-logo a,
+.register-logo a {
+  color: #495057;
+}
+
+.login-page,
+.register-page {
+  align-items: center;
+  background: #e9ecef;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+}
+
+@media (max-width: 576px) {
+  .login-box,
+  .register-box {
+    margin-top: 20px;
+    width: 90%;
+  }
+}
+
+.login-card-body,
+.register-card-body {
+  background: #ffffff;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+}
+
+.login-card-body .input-group .form-control,
+.register-card-body .input-group .form-control {
+  border-right: 0;
+}
+
+.login-card-body .input-group .form-control:focus,
+.register-card-body .input-group .form-control:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
+  border-color: #80bdff;
+}
+
+.login-card-body .input-group .form-control.is-valid:focus,
+.register-card-body .input-group .form-control.is-valid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
+  border-color: #28a745;
+}
+
+.login-card-body .input-group .form-control.is-invalid:focus,
+.register-card-body .input-group .form-control.is-invalid:focus {
+  box-shadow: none;
+}
+
+.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
+.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
+  border-color: #dc3545;
+}
+
+.login-card-body .input-group .input-group-text,
+.register-card-body .input-group .input-group-text {
+  background-color: transparent;
+  border-bottom-right-radius: 0.25rem;
+  border-left: 0;
+  border-top-right-radius: 0.25rem;
+  color: #777;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}
+
+.error-page {
+  margin: 20px auto 0;
+  width: 600px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page {
+    width: 100%;
+  }
+}
+
+.error-page > .headline {
+  float: left;
+  font-size: 100px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .headline {
+    float: none;
+    text-align: center;
+  }
+}
+
+.error-page > .error-content {
+  display: block;
+  margin-left: 190px;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content {
+    margin-left: 0;
+  }
+}
+
+.error-page > .error-content > h3 {
+  font-size: 25px;
+  font-weight: 300;
+}
+
+@media (max-width: 767.98px) {
+  .error-page > .error-content > h3 {
+    text-align: center;
+  }
+}
+
+.invoice {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  position: relative;
+}
+
+.invoice-title {
+  margin-top: 0;
+}
+
+.profile-user-img {
+  border: 3px solid #adb5bd;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.profile-username {
+  font-size: 21px;
+  margin-top: 5px;
+}
+
+.post {
+  border-bottom: 1px solid #adb5bd;
+  color: #666;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+}
+
+.post:last-of-type {
+  border-bottom: 0;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.post .user-block {
+  margin-bottom: 15px;
+  width: 100%;
+}
+
+.post .row {
+  width: 100%;
+}
+
+.product-image {
+  max-width: 100%;
+  height: auto;
+  width: 100%;
+}
+
+.product-image-thumbs {
+  align-items: stretch;
+  display: flex;
+  margin-top: 2rem;
+}
+
+.product-image-thumb {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  border-radius: 0.25rem;
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 7rem;
+  padding: 0.5rem;
+}
+
+.product-image-thumb img {
+  max-width: 100%;
+  height: auto;
+  align-self: center;
+}
+
+.product-image-thumb:hover {
+  opacity: 0.5;
+}
+
+.product-share a {
+  margin-right: .5rem;
+}
+
+.projects td {
+  vertical-align: middle;
+}
+
+.projects .list-inline {
+  margin-bottom: 0;
+}
+
+.projects img.table-avatar,
+.projects .table-avatar img {
+  border-radius: 50%;
+  display: inline;
+  width: 2.5rem;
+}
+
+.projects .project-state {
+  text-align: center;
+}
+
+/*# sourceMappingURL=adminlte.pages.css.map */

package.json

@@ -7,10 +7,25 @@
   "main": "dist/js/adminlte.min.js",
   "scripts": {
     "css": "npm-run-all --sequential css-compile css-prefix css-minify",
-    "css-compile": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --output-style expanded --source-map true --source-map-contents true --precision 6 build/scss/AdminLTE.scss dist/css/adminlte.css",
+    "css-all": "npm-run-all --sequential css-compile css-compile-splits css-prefix css-minify css-minify-splits",
+    "css-compile-bash": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --output-style expanded --source-map true --source-map-contents true --precision 6 $*",
+    "css-compile": "npm run css-compile-bash build/scss/AdminLTE.scss dist/css/adminlte.css",
+    "css-compile-splits": "npm-run-all --sequential css-compile:core css-compile:components css-compile:extra-components css-compile:pages css-compile:plugins",
+    "css-compile:core": "npm run css-compile-bash build/scss/AdminLTE-core.scss dist/css/alt/adminlte.core.css",
+    "css-compile:components": "npm run css-compile-bash build/scss/AdminLTE-components.scss dist/css/alt/adminlte.components.css",
+    "css-compile:extra-components": "npm run css-compile-bash build/scss/AdminLTE-extra-components.scss dist/css/alt/adminlte.extra-components.css",
+    "css-compile:pages": "npm run css-compile-bash build/scss/AdminLTE-pages.scss dist/css/alt/adminlte.pages.css",
+    "css-compile:plugins": "npm run css-compile-bash build/scss/AdminLTE-plugins.scss dist/css/alt/adminlte.plugins.css",
     "css-prefix": "postcss --config build/config/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
-    "css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/adminlte.min.css dist/css/adminlte.css",
-    "compile": "npm-run-all --parallel js css",
+    "css-minify-bash": "cleancss --level 1 --source-map --source-map-inline-sources --output $*",
+    "css-minify": "npm run css-minify-bash dist/css/adminlte.min.css dist/css/adminlte.css",
+    "css-minify-splits": "npm-run-all --sequential css-minify:core css-minify:components css-minify:extra-components css-minify:pages css-minify:plugins",
+    "css-minify:core": "npm run css-minify-bash dist/css/alt/adminlte.core.min.css dist/css/alt/adminlte.core.css",
+    "css-minify:components": "npm run css-minify-bash dist/css/alt/adminlte.components.min.css dist/css/alt/adminlte.components.css",
+    "css-minify:extra-components": "npm run css-minify-bash dist/css/alt/adminlte.extra-components.min.css dist/css/alt/adminlte.extra-components.css",
+    "css-minify:pages": "npm run css-minify-bash dist/css/alt/adminlte.pages.min.css dist/css/alt/adminlte.pages.css",
+    "css-minify:plugins": "npm run css-minify-bash dist/css/alt/adminlte.plugins.min.css dist/css/alt/adminlte.plugins.css",
+    "compile": "npm-run-all --parallel js css-all",
     "dev": "npm-run-all --parallel watch sync",
     "docs": "npm-run-all --sequential docs-clean docs-prepare docs-compile",
     "docs-clean": "cd docs/ && bundle exec jekyll clean -d ../docs_html",