further scss changes

- changed /* comments to // (to avoid displaying in compiled css file)
- added .alert-primary
- removed _label.scss (due renamed to badge with BS4)
- reworked bg-*, bg-gradient-*, custom-switch-*, custom-range-* as mixin
- changed control-sidebar-light border color to main-header border
- renamed `.direct-chat-info` to `.direct-chat-infos` (not theme color, its a extra block inside direct-chat & updated demo files
- enhanced direct-chat with all colors
- added `.dropdown-menu-xl`
- reworked color-palette in pages/UI/general
- changed `Block Quotes Pulled Right` to `Secondary Block Quotes` in pages/UI/general
- removed `@-webkit-keyframes flipInX` due autoprefixer
- enhanced demo.js with additional colors for sidebar & renamed `Navbar border` to `No Navbar border`

build/scss/AdminLTE-raw.scss

@@ -43,7 +43,6 @@
 @import 'navs';
 @import 'products';
 @import 'table';
-@import 'labels';
 @import 'direct-chat';
 @import 'users-list';
 @import 'carousel';

build/scss/AdminLTE.scss

@@ -39,7 +39,6 @@
 @import 'navs';
 @import 'products';
 @import 'table';
-@import 'labels';
 @import 'direct-chat';
 @import 'users-list';
 @import 'carousel';

build/scss/_alerts.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Alert
- * ----------------
- */
+//
+// Component: Alert
+//
 
 .alert {
   .icon {
@@ -44,3 +43,8 @@
   @extend .bg-info;
   border-color: darken(theme-color('info'), 5%);
 }
+
+.alert-primary {
+  @extend .bg-primary;
+  border-color: darken(theme-color('primary'), 5%);
+}

build/scss/_brand.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Brand
- * ----------------
- */
+//
+// Component: Brand
+//
 
 .brand-link {
   $brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;

build/scss/_buttons.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Button
- * -----------------
- */
+//
+// Component: Button
+//
 
 .btn {
   // Flat buttons

build/scss/_callout.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Callout
- * ------------------
- */
+//
+// Component: Callout
+//
 
 // Base styles (regardless of theme)
 .callout {

build/scss/_cards.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Cards
- * ----------------
- */
+//
+// Component: Cards
+//
 
 .card {
   @extend .mb-3;

build/scss/_carousel.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Carousel
- * -------------------
- */
+//
+// Component: Carousel
+//
 
 .carousel-control {
   &.left,

build/scss/_colors.scss

@@ -1,74 +1,15 @@
-/*
- * Misc: Colors
- * ------------
- */
+//
+// Misc: Colors
+//
 
 // Background colors (theme colors)
 @each $name, $color in $theme-colors {
-  .bg-#{$name} {
-    &,
-    > a {
-      color: color-yiq($color) !important;
-    }
-
-    &.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: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-variant($name, $color);
 }
 
 // Background colors (colors)
 @each $name, $color in $colors {
-  .bg-#{$name} {
-    background-color: #{$color};
-
-    &,
-    > a {
-      color: color-yiq($color) !important;
-    }
-
-    &.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: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-variant($name, $color);
 }
 
 .bg-gray {
@@ -93,64 +34,12 @@
 
 // Gradient Background colors (theme colors)
 @each $name, $color in $theme-colors {
-  .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: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-gradient-variant($name, $color);
 }
 
 // Gradient Background colors (colors)
 @each $name, $color in $colors {
-  .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: color-yiq(darken($color, 7.5%));
-      }
-
-      &:active,
-      &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
-        border-color: darken($color, 12.5%);
-        color: color-yiq(darken($color, 10%));
-      }
-    }
-  }
+  @include background-gradient-variant($name, $color);
 }
 
 // Backgrund Color Disabled

build/scss/_control-sidebar.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Control Sidebar
- * --------------------------
- */
+//
+// Component: Control Sidebar
+//
  
 html.control-sidebar-animate {
   overflow-x: hidden;
@@ -150,6 +149,6 @@ html.control-sidebar-animate {
   //  Background
   & {
     background: $sidebar-light-bg;
-    border-left: 1px solid $gray-500;
+    border-left: $main-header-bottom-border;
   }
 }