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;
   }
 }

build/scss/_direct-chat.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Direct Chat
- * ----------------------
- */
+//
+// Component: Direct Chat
+//
  
 .direct-chat {
   .card-body {
@@ -100,7 +99,7 @@
   }
 }
 
-.direct-chat-info {
+.direct-chat-infos {
   display: block;
   font-size: $font-size-sm;
   margin-bottom: 2px;
@@ -182,23 +181,15 @@
   color: darken($gray-500, 25%);
 }
 
-//Direct Chat Variants
-.direct-chat-danger {
-  @include direct-chat-variant(theme-color('danger'));
-}
-
-.direct-chat-primary {
-  @include direct-chat-variant(theme-color('primary'));
-}
-
-.direct-chat-warning {
-  @include direct-chat-variant(theme-color('warning'));
-}
-
-.direct-chat-info {
-  @include direct-chat-variant(theme-color('info'));
+// Color variants
+@each $name, $color in $theme-colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
 }
 
-.direct-chat-success {
-  @include direct-chat-variant(theme-color('success'));
+@each $name, $color in $colors {
+  .direct-chat-#{$name} {
+    @include direct-chat-variant($color);
+  }
 }

build/scss/_dropdown.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Dropdown
- * -------------------
- */
+//
+// Component: Dropdown
+//
 
 // General Dropdown Rules
 //.dropdown-item {
@@ -38,6 +37,26 @@
   }
 }
 
+// Dropdown Sizes
+.dropdown-menu-xl {
+  max-width: 420px;
+  min-width: 360px;
+  padding: 0;
+
+  .dropdown-divider {
+    margin: 0;
+  }
+
+  .dropdown-item {
+    padding: $dropdown-padding-y $dropdown-item-padding-x;
+  }
+
+  p {
+    margin: 0;
+    white-space: normal;
+  }
+}
+
 // Dropdown header and footer
 .dropdown-footer,
 .dropdown-header {
@@ -47,8 +66,8 @@
   text-align: center;
 }
 
-/* Add fade animation to dropdown menus by appending
- the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
+// Add fade animation to dropdown menus by appending 
+// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
 .open:not(.dropup) > .animated-dropdown-menu {
   @include animation(flipInX .7s both);
   backface-visibility: visible !important;
@@ -80,33 +99,7 @@
   }
 }
 
-@-webkit-keyframes flipInX {
-  0% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    -webkit-transition-timing-function: ease-in;
-    opacity: 0;
-  }
-
-  40% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    -webkit-transition-timing-function: ease-in;
-  }
-
-  60% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
-    opacity: 1;
-  }
-
-  80% {
-    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
-  }
-
-  100% {
-    -webkit-transform: perspective(400px);
-  }
-}
-
-/* Fix dropdown menu in navbars */
+// Fix dropdown menu in navbars
 .navbar-custom-menu > .navbar-nav {
   > li {
     position: relative;
@@ -134,11 +127,12 @@
   }
 }
 
-/* User Menu */
+// User Menu
 .navbar-nav > .user-menu {
   > .nav-link:after {
     content:none;
   }
+
   > .dropdown-menu {
     @include border-top-radius(0);
     padding: 0;
@@ -149,12 +143,13 @@
     > .user-body {
       @include border-bottom-radius(4px);
     }
-    
+
     // Header menu
     > li.user-header {
       height: 175px;
       padding: 10px;
       text-align: center;
+
       // User image
       > img {
         z-index: 5;
@@ -164,11 +159,13 @@
         border-color: transparent;
         border-color: rgba(255, 255, 255, 0.2);
       }
+
       > p {
         z-index: 5;
         font-size: 17px;
         //text-shadow: 2px 2px 3px #333333;
         margin-top: 10px;
+
         > small {
           display: block;
           font-size: 12px;
@@ -178,46 +175,50 @@
 
     // Menu Body
     > .user-body {
-      padding: 15px;
-      border-bottom: 1px solid #f4f4f4;
-      border-top: 1px solid #dddddd;
       @include clearfix;
+      border-bottom: 1px solid $gray-700;
+      border-top: 1px solid $gray-300;
+      padding: 15px;
+
       a {
-        color: #444 !important;
         @include media-breakpoint-up(sm) {
-          background: #fff !important;
-          color: #444 !important;
+          background: $white !important;
+          color: $gray-700 !important;
         }
       }
     }
 
     // Menu Footer
     > .user-footer {
-      background-color: #f9f9f9;
-      padding: 10px;
       @include clearfix;
+      background-color: $gray-100;
+      padding: 10px;
+
       .btn-default {
-        color: #666666;
+        color: $gray-600;
+
         &:hover {
           @include media-breakpoint-up(sm) {
-            background-color: #f9f9f9;
+            background-color: $gray-100;
           }
         }
       }
     }
   }
+
   .user-image {
-    float: left;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    margin-right: 10px;
-    margin-top: -2px;
     @include media-breakpoint-up(sm) {
       float: none;
+      line-height: 10px;
       margin-right: 0;
       margin-top: -8px;
-      line-height: 10px;
     }
+
+    border-radius: 50%;
+    float: left;
+    height: 25px;
+    margin-right: 10px;
+    margin-top: -2px;
+    width: 25px;
   }
 }

build/scss/_elevation.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Elevation
- * --------------------
- */
+//
+// Component: Elevation
+//
 
 .elevation-0 {
   box-shadow: none !important;

build/scss/_forms.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Forms
- * ----------------
- */
+//
+// Component: Forms
+//
  
 .form-group {
   &.has-icon {
@@ -28,7 +27,8 @@
 // Button groups
 .btn-group-vertical {
   .btn {
-    &.btn-flat:first-of-type, &.btn-flat:last-of-type {
+    &.btn-flat:first-of-type,
+    &.btn-flat:last-of-type {
       @include border-radius(0);
     }
   }
@@ -257,113 +257,21 @@ textarea.form-control {
 // custom switch color variations
 .custom-switch {
   @each $name, $color in $theme-colors {
-    &.custom-switch-off-#{$name} {
-      & .custom-control-input ~ .custom-control-label::before {
-        background: #{$color};
-        border-color: darken($color, 20%);
-      }
-
-      & .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 ~ .custom-control-label::after {
-        background: lighten($color, 30%);
-      }
-    }
+    @include custom-switch-variant($name, $color);
   }
 
   @each $name, $color in $colors {
-    &.custom-switch-off-#{$name} {
-      & .custom-control-input ~ .custom-control-label::before {
-        background: #{$color};
-        border-color: darken($color, 20%);
-      }
-
-      & .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 ~ .custom-control-label::after {
-        background: lighten($color, 30%);
-      }
-    }
+    @include custom-switch-variant($name, $color);
   }
 }
 
 // custom range color variations
 .custom-range {
   @each $name, $color in $theme-colors {
-    &.custom-range-#{$name} {
-      &:focus {
-        &::-webkit-slider-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-moz-range-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-ms-thumb {
-          background-color: lighten($color, 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-      }
-
-      &::-moz-range-thumb {
-        background-color: $color;
-      }
-
-      &::-ms-thumb {
-        background-color: $color;
-      }
-    }
+    @include custom-range-variant($name, $color);
   }
 
   @each $name, $color in $colors {
-    &.custom-range-#{$name} { 
-      &:focus {
-        &::-webkit-slider-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-moz-range-thumb {
-          background-color: lighten($color, 35%);
-        }
-
-        &::-ms-thumb {
-          background-color: lighten($color, 35%);
-        }
-      }
-
-      &::-webkit-slider-thumb {
-        background-color: $color;
-      }
-
-      &::-moz-range-thumb {
-        background-color: $color;
-      }
-
-      &::-ms-thumb {
-        background-color: $color;
-      }
-    }
+    @include custom-range-variant($name, $color);
   }
 }

build/scss/_info-box.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Info Box
- * -------------------
- */
+//
+// Component: Info Box
+//
  
 .info-box {
   @extend .d-flex;
@@ -14,7 +13,7 @@
   padding: .5rem;
 
   .progress {
-    background-color: rgba($black, 0.125);
+    background-color: rgba($black, .125);
     height: 2px;
     margin: 5px 0;
 
@@ -105,7 +104,7 @@
     .col-lg-2 &,
     .col-md-2 & {
       .progress-description {
-        @include font-size(0.75rem);
+        @include font-size(.75rem);
         display: block;
       }
     }
@@ -114,7 +113,7 @@
     .col-lg-3 &,
     .col-md-3 & {
       .progress-description {
-        @include font-size(0.75rem);
+        @include font-size(.75rem);
         display: block;
       }
     }

build/scss/_labels.scss

@@ -1,29 +0,0 @@
-/*
- * Component: Labels
- * -----------------
- */
-
-.label-default {
-  background-color: $gray-500;
-  color: $gray-700;
-}
-
-.label-danger {
-  @extend .bg-danger;
-}
-
-.label-info {
-  @extend .bg-info;
-}
-
-.label-warning {
-  @extend .bg-warning;
-}
-
-.label-primary {
-  @extend .bg-primary;
-}
-
-.label-success {
-  @extend .bg-success;
-}

build/scss/_layout.scss

@@ -1,7 +1,6 @@
-/*
- * Core: Layout
- * ------------
- */
+//
+// Core: Layout
+//
 
 html {
   scroll-behavior: smooth;
@@ -21,7 +20,7 @@ body,
   }
 
   .layout-boxed & {
-    @include box-shadow(0 0 10px rgba($black, .3));
+    @include box-shadow(0 0 10 rgba($black, .3));
 
     &,
     &::before {
@@ -101,7 +100,7 @@ body,
 
     .sidebar,
     .content-wrapper {
-      margin-top: 0px;
+      margin-top: 0;
     }
 
     .main-header {
@@ -181,7 +180,7 @@ body,
 
         .sidebar,
         .content-wrapper {
-          margin-top: 0px;
+          margin-top: 0;
         }
 
         .main-header {
@@ -208,7 +207,7 @@ body,
     }
 
     .content-wrapper {
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
   }
 

build/scss/_main-header.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Main Header
- * ----------------------
- */
+//
+// Component: Main Header
+//
  
 .main-header {
   border-bottom: $main-header-bottom-border;
@@ -79,19 +78,6 @@
       color: $main-header-dark-placeholder-color;
     }
 
-    // Support FF and IE
-    :-moz-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
-    ::-moz-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
-    :-ms-input-placeholder {
-      color: $main-header-dark-placeholder-color;
-    }
-
     &:focus {
       &,
       & + .input-group-append .btn-navbar {
@@ -111,24 +97,14 @@
   }
 
   .form-control-navbar {
+    &:ms-placeholder,
+    &:moz-placeholder,
+    &::moz-placeholder,
     &::placeholder,
     + .input-group-append > .btn-navbar {
       color: $main-header-light-placeholder-color;
     }
 
-    // Support FF and IE
-    :-moz-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
-    ::-moz-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
-    :-ms-input-placeholder {
-      color: $main-header-light-placeholder-color;
-    }
-
     &:focus {
       &,
       & + .input-group-append .btn-navbar {

build/scss/_main-sidebar.scss

@@ -1,7 +1,6 @@
-/**
- * Component: Main Sidebar
- * -----------------------
- */
+//
+// Component: Main Sidebar
+//
 
 .main-sidebar {
   height: 100vh;
@@ -62,7 +61,7 @@
   // All levels
   .nav-item {
     > .nav-link {
-      margin-bottom: 0.2rem;
+      margin-bottom: .2rem;
 
       .right {
         @include transition(transform $transition-fn $transition-speed);
@@ -143,7 +142,7 @@
     padding: $nav-link-padding-y;
 
     &:not(:first-of-type) {
-      padding: 1.7rem 1rem .5rem 1rem;
+      padding: 1.7rem 1rem .5rem;
     }
   }
 

build/scss/_miscellaneous.scss

@@ -1,7 +1,6 @@
-/*
- * Misc: Miscellaneous
- * -------------------
- */
+//
+// Misc: Miscellaneous
+//
 
 .border-transparent {
   border-color: transparent !important;
@@ -27,10 +26,8 @@
   > .description-text {
     text-transform: uppercase;
   }
-}
 
-// Description Block Extension
-.description-block {
+  // Description Block Extension
   .description-icon {
     font-size: 16px;
   }
@@ -57,7 +54,7 @@
 .list-seperator {
   background: $card-border-color;
   height: 1px;
-  margin: 15px 0 9px 0;
+  margin: 15px 0 9px;
 }
 
 .list-link {
@@ -237,7 +234,7 @@
   }
 
   .attachment-text {
-    color: #555;
+    color: $gray-700;
   }
 }
 
@@ -295,16 +292,16 @@
   position: absolute;
   right: -2px;
   top: -2px;
-  z-index: 10;
   width: $ribbon-wrapper-size;
+  z-index: 10;
 
   &.ribbon-lg {
     height: $ribbon-lg-wrapper-size;
     width: $ribbon-lg-wrapper-size;
 
     .ribbon {
-      top: $ribbon-lg-top;
       right: $ribbon-lg-right;
+      top: $ribbon-lg-top;
       width: $ribbon-lg-width;
     }
   }
@@ -314,8 +311,8 @@
     width: $ribbon-xl-wrapper-size;
 
     .ribbon {
-      top: $ribbon-xl-top;
       right: $ribbon-xl-right;
+      top: $ribbon-xl-top;
       width: $ribbon-xl-width;
     }
   }
@@ -340,7 +337,7 @@
       border-right: $ribbon-border-size solid transparent;
       border-top: $ribbon-border-size solid #9e9e9e;
       bottom: -$ribbon-border-size;
-      content: "";
+      content: '';
       position: absolute;
     }
 

build/scss/_mixins.scss

@@ -1,7 +1,6 @@
-/*
- * General: Mixins
- * ---------------
- */
+//
+// General: Mixins
+//
 
 
 // Cards Variant
@@ -72,7 +71,143 @@
   }
 }
 
+// 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;
+
+        .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;
+        }
+
+        .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;
 
@@ -94,6 +229,7 @@
   // Add color to the sidebar toggle button
   .sidebar-toggle {
     color: $font-color;
+
     &:hover,
     &:focus {
       background: $hover-bg;
@@ -102,7 +238,7 @@
   }
 }
 
-// Logo color variation
+// 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;
@@ -121,13 +257,115 @@
     border-color: $bg-color;
     color: color-yiq($bg-color);
 
-    &:after,
+    &::after,
     &::before {
       border-left-color: $bg-color;
     }
   }
 }
 
+// Background Variant
+@mixin background-variant($name, $color) {
+  .bg-#{$name} {
+    background-color: #{$color};
+
+    &,
+    > a {
+      color: color-yiq($color) !important;
+    }
+
+    &.btn {
+      &:hover {
+        border-color: darken($color, 10%);
+        color: color-yiq(darken($color, 7.5%));
+      }
+
+      &:active,
+      &.active {
+        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: 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%));
+      }
+    }
+  }
+}
+
+// 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 ~ .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 ~ .custom-control-label::after {
+      background: lighten($color, 30%);
+    }
+  }
+}
+
+// Custom Range Variant
+@mixin custom-range-variant($name, $color) {
+  &.custom-range-#{$name} {
+    &:focus {
+      &::-webkit-slider-thumb,
+      &::-moz-range-thumb,
+      &::-ms-thumb {
+        background-color: lighten($color, 35%);
+      }
+    }
+
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb,
+    &::-ms-thumb {
+      background-color: $color;
+    }
+  }
+}
+
+
+// ETC
 @mixin translate($x, $y) {
   transform: translate($x, $y);
 }
@@ -138,12 +376,10 @@
 }
 
 @mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
   #{$property}: calc(#{$expression});
 }
 
 @mixin rotate($value) {
-  -ms-transform: rotate($value);
   transform: rotate($value);
 }
 

build/scss/_modals.scss

@@ -1,8 +1,6 @@
-/*
- * Component: Modals
- * ---------
- ------
- */
+//
+// Component: Modals
+//
 
 // Overlay
 .modal-dialog {

build/scss/_navs.scss

@@ -1,16 +1,16 @@
-/*
- * Component: Nav
- * --------------
- */
+//
+// Component: Nav
+//
 
 .nav-pills {
   .nav-link {
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color('primary')
+      color: theme-color('primary');
     }
   }
+
   .nav-item {
     &.dropdown.show {
       .nav-link:hover {
@@ -60,7 +60,7 @@
 
 // Color variants
 @each $color, $value in $theme-colors {
-  @if $color==dark or $color==light {
+  @if $color == dark or $color == light {
     .navbar-#{$color} {
       background-color: $value;
     }
@@ -68,7 +68,7 @@
 }
 
 @each $color, $value in $theme-colors {
-  @if $color!=dark and $color!=light {
+  @if $color != dark and $color != light {
     .navbar-#{$color} {
       background-color: $value;
     }

build/scss/_print.scss

@@ -1,8 +1,7 @@
-/*
- * Misc: Print
- * -----------
- */
- 
+//
+// Misc: Print
+//
+
 @media print {
   //Add to elements that you do not want to show when printing
   .no-print {

build/scss/_products.scss

@@ -1,11 +1,12 @@
-/*
- * Component: Products
- * -------------------
- */
+//
+// Component: Products
+//
+
 .products-list {
   list-style: none;
   margin: 0;
   padding: 0;
+
   > .item {
     @include clearfix;
 
@@ -19,6 +20,7 @@
 
   .product-img {
     float: left;
+
     img {
       height: 50px;
       width: 50px;

build/scss/_progress-bars.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Progress Bar
- * -----------------------
- */
+//
+// Component: Progress Bar
+//
 
 //General CSS
 .progress {
@@ -59,7 +58,9 @@
 
 // Remove margins from progress bars when put in a table
 .table {
-  tr > td .progress {
-    margin: 0;
+  tr > td {
+    .progress {
+      margin: 0;
+    }
   }
 }

build/scss/_sidebar-mini.scss

@@ -1,145 +1,6 @@
-/*
- * Component: Sidebar Mini
- * -----------------------
- */
-
-// Mixin
-
-@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;
-        
-        .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;
-        }
-
-        .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;
-      }
-    }
-  }
-}
-
+//
+// Component: Sidebar Mini
+//
 
 // Logo style
 .logo-xs,

build/scss/_small-box.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Small Box
- * --------------------
- */
+//
+// Component: Small Box
+//
 
 .small-box {
   @include border-radius($border-radius);
@@ -19,7 +18,6 @@
 
   > .small-box-footer {
     background: rgba($black, 0.1);
-    color: $white;
     color: rgba($white, 0.8);
     display: block;
     padding: 3px 0;
@@ -82,14 +80,15 @@
     font-size: 1rem;
 
     > small {
-      color: #f9f9f9;
+      color: $gray-100;
       display: block;
       font-size: 0.9rem;
       margin-top: 5px;
     }
   }
 
-  h3, p {
+  h3,
+  p {
     z-index: 5;
   }
 

build/scss/_social-widgets.scss

@@ -1,10 +1,10 @@
-/*
- * Component: Social Widgets
- * -------------------------
- */
+//
+// Component: Social Widgets
+//
+
 //General widget style
 .card-widget {
-  border: none;
+  border: 0;
   position: relative;
 }
 

build/scss/_table.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Table
- * ----------------
- */
+//
+// Component: Table
+//
 
 .table {
   &:not(.table-dark) {

build/scss/_text.scss

@@ -1,7 +1,6 @@
-/*
- * Component: Text
- * -------------
- */
+//
+// Component: Text
+//
 
 // text modification
 .text-bold {
@@ -26,7 +25,6 @@
   font-size: $font-size-xl !important;
 }
 
-
 // text color variations
 @each $name, $color in $colors {
   .text-#{$name} {

build/scss/_timeline.scss

@@ -1,11 +1,10 @@
-/*
- * Component: Timeline
- * -------------------
- */
+//
+// Component: Timeline
+//
 
 .timeline {
   list-style: none;
-  margin: 0 0 30px 0;
+  margin: 0 0 30px;
   padding: 0;
   position: relative;
 
@@ -33,7 +32,7 @@
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
       background: $white;
-      color: #444;
+      color: $gray-700;
       margin-left: 60px;
       margin-right: 15px;
       margin-top: 0;
@@ -50,7 +49,7 @@
 
       > .timeline-header {
         border-bottom: 1px solid $card-border-color;
-        color: #555;
+        color: $gray-700;
         font-size: 16px;
         line-height: 1.1;
         margin: 0;
@@ -62,7 +61,8 @@
       }
 
       // Item body and footer
-      > .timeline-body, > .timeline-footer {
+      > .timeline-body,
+      > .timeline-footer {
         padding: 10px;
       }
 
@@ -92,7 +92,7 @@
   > .time-label {
     > span {
       @include border-radius(4px);
-      
+
       background-color: $white;
       display: inline-block;
       font-weight: 600;

build/scss/_users-list.scss

@@ -1,10 +1,10 @@
-/*
- * Component: Users List
- * ---------------------
- */
+//
+// Component: Users List
+//
 
 .users-list {
   @extend .list-unstyled;
+
   > li {
     float: left;
     padding: 10px;

build/scss/_variables.scss

@@ -1,19 +1,18 @@
-/*
- * Core: Variables
- * ---------------
- */
+//
+// Core: Variables
+//
 
 // COLORS
 // --------------------------------------------------------
 $blue: #0073b7 !default;
-$navy: #001F3F !default;
-$teal: #39CCCC !default;
-$olive: #3D9970 !default;
-$lime: #01FF70 !default;
-$orange: #FF851B !default;
-$fuchsia: #F012BE !default;
+$navy: #001f3f !default;
+$teal: #39cccc !default;
+$olive: #3d9970 !default;
+$lime: #01ff70 !default;
+$orange: #ff851b !default;
+$fuchsia: #f012be !default;
 $purple: #605ca8 !default;
-$maroon: #D81B60 !default;
+$maroon: #d81b60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
@@ -128,7 +127,7 @@ $control-sidebar-width: $sidebar-width !default;
 
 // Cards
 // --------------------------------------------------------
-$card-border-color: #f4f4f4 !default;
+$card-border-color: $gray-100 !default;
 $card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
 $card-title-font-size: $font-size-lg;
 $card-title-font-weight: $font-weight-normal;
@@ -170,7 +169,7 @@ $font-size-xl: ($font-size-base * 2);
 
 // BUTTON
 // --------------------------------------------------------
-$button-default-background-color: #f4f4f4 !default;
+$button-default-background-color: $gray-100 !default;
 $button-default-color: #444 !default;
 $button-default-border-color: #ddd !default;
   

build/scss/pages/_404_500_errors.scss

@@ -1,37 +1,43 @@
-/*
- * Pages: 400 and 500 error pages
- * ------------------------------
- */
+//
+// Pages: 400 and 500 error pages
+//
  
 .error-page {
+  margin: 20px auto 0;
   width: 600px;
-  margin: 20px auto 0 auto;
+
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
+
   //For the error number e.g: 404
   > .headline {
     float: left;
     font-size: 100px;
     font-weight: 300;
+
     @include media-breakpoint-down(sm) {
       float: none;
       text-align: center;
     }
   }
+
   //For the message
   > .error-content {
+    display: block;
     margin-left: 190px;
+
     @include media-breakpoint-down(sm) {
       margin-left: 0;
     }
+
     > h3 {
-      font-weight: 300;
       font-size: 25px;
+      font-weight: 300;
+
       @include media-breakpoint-down(sm) {
         text-align: center;
       }
     }
-    display: block;
   }
 }

build/scss/pages/_e_commerce.scss

@@ -1,7 +1,6 @@
-/*
- * Pages: E-commerce
- * -----------------
- */
+//
+// Pages: E-commerce
+//
 
 // product image
 .product-image {
@@ -10,15 +9,14 @@
 }
 
 // product image thumbnails list
-.product-image-thumbs {
-  display: flex;
+.product-image-thumbs {
   align-items: stretch;
+  display: flex;
   margin-top: 2rem;
 }
 
 // product image thumbnail
-.product-image-thumb {
-
+.product-image-thumb {
   @include box-shadow($thumbnail-box-shadow);
   @include border-radius($thumbnail-border-radius);
 
@@ -40,6 +38,8 @@
 }
 
 // product share
-.product-share a {
-  margin-right: 0.5rem;
+.product-share {
+  a {
+    margin-right: .5rem;
+  }
 }

build/scss/pages/_invoice.scss

@@ -1,12 +1,11 @@
-/*
- * Pages: Invoice
- * --------------
- */
+//
+// Pages: Invoice
+//
 
 .invoice {
-  position: relative;
   background: $white;
   border: 1px solid $card-border-color;
+  position: relative;
 }
 
 .invoice-title {

build/scss/pages/_lockscreen.scss

@@ -1,66 +1,71 @@
-/*
- * Pages: Lock Screen
- * ------------------
- */
-/* ADD THIS CLASS TO THE <BODY> TAG */
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
 .lockscreen {
   background: $gray-200;
+
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
 }
 
 .lockscreen-logo {
   font-size: 35px;
-  text-align: center;
-  margin-bottom: 25px;
   font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+
   a {
-    color: #444;
+    color: $gray-700;
   }
 }
 
 .lockscreen-wrapper {
-  max-width: 400px;
   margin: 0 auto;
   margin-top: 10%;
+  max-width: 400px;
 }
 
-/* User name [optional] */
-.lockscreen .lockscreen-name {
-  text-align: center;
-  font-weight: 600;
-}
 
-/* Will contain the image and the sign in form */
+// Will contain the image and the sign in form
 .lockscreen-item {
   @include border-radius(4px);
-  padding: 0;
   background: $white;
+  margin: 10px auto 30px;
+  padding: 0;
   position: relative;
-  margin: 10px auto 30px auto;
   width: 290px;
 }
 
-/* User image */
+// User image
 .lockscreen-image {
   @include border-radius(50%);
-  position: absolute;
-  left: -10px;
-  top: -25px;
   background: $white;
+  left: -10px;
   padding: 5px;
+  position: absolute;
+  top: -25px;
   z-index: 10;
+
   > img {
     @include border-radius(50%);
-    width: 70px;
     height: 70px;
+    width: 70px;
   }
 }
 
-/* Contains the password input and the login button */
+// Contains the password input and the login button
 .lockscreen-credentials {
   margin-left: 70px;
+
   .form-control {
     border: 0;
   }
+
   .btn {
     background-color: $white;
     border: 0;

build/scss/pages/_login_and_register.scss

@@ -1,16 +1,16 @@
-/*
- * Pages: Login & Register
- * -----------------------
- */
+//
+// Pages: Login & Register
+//
 
 .login-logo,
 .register-logo {
   font-size: 35px;
-  text-align: center;
-  margin-bottom: 25px;
   font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+
   a {
-    color: #444;
+    color: $gray-700;
   }
 }
 
@@ -21,35 +21,39 @@
 
 .login-box,
 .register-box {
-  width: 360px;
   margin: 7% auto;
+  width: 360px;
+
   @media (max-width: map-get($grid-breakpoints, sm)) {
-    width: 90%;
     margin-top: 20px;
+    width: 90%;
   }
 }
 
 .login-card-body,
 .register-card-body {
   background: $white;
-  padding: 20px;
   border-top: 0;
   color: #666;
+  padding: 20px;
+
   .input-group {
     .form-control {
-      border-right: none;
+      border-right: 0;
 
       &:focus {
         box-shadow: none;
+
         & ~ .input-group-append .input-group-text {
           border-color: $input-focus-border-color;
         }
       }
-      
+
       &.is-valid {
         &:focus {
           box-shadow: none;
         }
+
         & ~ .input-group-append .input-group-text {
           border-color: $success;
         }
@@ -59,19 +63,20 @@
         &:focus {
           box-shadow: none;
         }
+
         & ~ .input-group-append .input-group-text {
           border-color: $danger;
         }
       }
     }
+
     .input-group-text {
-      color: #777;
       background-color: transparent;
-      border-left: none;
-      transition: $input-transition;
-      // Fix boostrap issue temporarily https://github.com/twbs/bootstrap/issues/25110
       border-bottom-right-radius: $border-radius !important;
+      border-left: 0;
       border-top-right-radius: $border-radius !important;
+      color: #777;
+      transition: $input-transition;
     }
   }
 }
@@ -79,8 +84,8 @@
 .login-box-msg,
 .register-box-msg {
   margin: 0;
+  padding: 0 20px 20px;
   text-align: center;
-  padding: 0 20px 20px 20px;
 }
 
 .social-auth-links {

build/scss/pages/_mailbox.scss

@@ -1,7 +1,7 @@
-/*
- * Pages: Mailbox
- * --------------
- */
+//
+// Pages: Mailbox
+//
+
 .mailbox-messages {
   > .table {
     margin: 0;
@@ -10,6 +10,7 @@
 
 .mailbox-controls {
   padding: 5px;
+
   &.with-border {
     border-bottom: 1px solid $card-border-color;
   }
@@ -18,13 +19,15 @@
 .mailbox-read-info {
   border-bottom: 1px solid $card-border-color;
   padding: 10px;
+
   h3 {
     font-size: 20px;
     margin: 0;
   }
+
   h5 {
     margin: 0;
-    padding: 5px 0 0 0;
+    padding: 5px 0 0;
   }
 }
 
@@ -40,17 +43,17 @@
 .mailbox-attachments {
   @extend .list-unstyled;
   li {
-    float: left;
-    width: 200px;
     border: 1px solid #eee;
+    float: left;
     margin-bottom: 10px;
     margin-right: 10px;
+    width: 200px;
   }
 }
 
 .mailbox-attachment-name {
-  font-weight: bold;
   color: #666;
+  font-weight: bold;
 }
 
 .mailbox-attachment-icon,
@@ -60,13 +63,14 @@
 }
 
 .mailbox-attachment-info {
+  background: $gray-100;
   padding: 10px;
-  background: #f4f4f4;
 }
 
 .mailbox-attachment-size {
   color: #999;
   font-size: 12px;
+
   > span {
     display: inline-block;
     padding-top: 0.75rem;
@@ -74,16 +78,18 @@
 }
 
 .mailbox-attachment-icon {
-  text-align: center;
-  font-size: 65px;
   color: #666;
-  padding: 20px 10px;
+  font-size: 65px;
   max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+
   &.has-img {
     padding: 0;
+
     > img {
-      max-width: 100%;
       height: auto;
+      max-width: 100%;
     }
   }
 }

build/scss/pages/_profile.scss

@@ -1,13 +1,12 @@
-/*
- * Pages: Profile
- * --------------
- */
+//
+// Pages: Profile
+//
 
 .profile-user-img {
+  border: 3px solid $gray-500;
   margin: 0 auto;
-  width: 100px;
   padding: 3px;
-  border: 3px solid $gray-500;
+  width: 100px;
 }
 
 .profile-username {
@@ -17,14 +16,16 @@
 
 .post {
   border-bottom: 1px solid $gray-500;
+  color: #666;
   margin-bottom: 15px;
   padding-bottom: 15px;
-  color: #666;
+
   &:last-of-type {
     border-bottom: 0;
     margin-bottom: 0;
     padding-bottom: 0;
   }
+
   .user-block {
     margin-bottom: 15px;
   }

build/scss/pages/_projects.scss

@@ -1,7 +1,6 @@
-/*
- * Pages: Projects
- * ---------------
- */
+//
+// Pages: Projects
+//
 
 .projects {
   td {
@@ -14,7 +13,7 @@
 
   // table avatar
   img.table-avatar,
-  .table-avatar img{
+  .table-avatar img {
     border-radius: 50%;
     display: inline;
     width: 2.5rem;

build/scss/plugins/_bootstrap-slider.scss

@@ -1,7 +1,6 @@
-/*
- * Plugin: Bootstrap Slider
- * ------------------------
- */
+//
+// Plugin: Bootstrap Slider
+//
 
 // Style override
 .slider {
@@ -14,7 +13,7 @@
 }
 
 // Colors
-@each $name, $color in $colors {
+@each $name, $color in $theme-colors {
   .slider-#{$name} .slider {
     .slider-selection {
       background: $color;
@@ -22,4 +21,10 @@
   }
 }
 
-
+@each $name, $color in $colors {
+  .slider-#{$name} .slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}

build/scss/plugins/_fullcalendar.scss

@@ -1,15 +1,15 @@
-/*
- * Plugin: Full Calendar
- * ---------------------
- */
+//
+// Plugin: Full Calendar
+//
 
 // Buttons
 .fc-button {
-  background: #f4f4f4;
+  background: $gray-100;
   background-image: none;
-  color: #444;
-  border-color: #ddd;
   border-bottom-color: #ddd;
+  border-color: #ddd;
+  color: $gray-700;
+
   &:hover,
   &:active,
   &.hover {
@@ -19,9 +19,9 @@
 
 // Calendar title
 .fc-header-title h2 {
+  color: #666;
   font-size: 15px;
   line-height: 1.6em;
-  color: #666;
   margin-left: 10px;
 }
 
@@ -39,8 +39,8 @@
 }
 
 .fc-grid {
-  width: 100%;
   border: 0;
+  width: 100%;
 }
 
 .fc-widget-header:first-of-type,
@@ -55,8 +55,8 @@
 }
 
 .fc-toolbar {
-  padding: 1rem;
   margin: 0;
+  padding: 1rem;
 }
 
 .fc-day-number {
@@ -69,13 +69,21 @@
   list-style: none;
   margin: 0;
   padding: 0;
+
   > li {
     float: left;
     font-size: 30px;
-    margin-right: 5px;
     line-height: 30px;
-    .fa {
+    margin-right: 5px;
+
+    .fa,
+    .fas,
+    .far,
+    .fab,
+    .glyphicon,
+    .ion {
       transition: transform linear .3s;
+
       &:hover {
         @include rotate(30deg);
       }
@@ -90,11 +98,11 @@
 .external-event {
   @include box-shadow($card-shadow);
 
-  padding: 5px 10px;
-  font-weight: bold;
-  margin-bottom: 4px;
   border-radius: $border-radius;
   cursor: move;
+  font-weight: bold;
+  margin-bottom: 4px;
+  padding: 5px 10px;
 
   &:hover {
     @include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));

build/scss/plugins/_icheck-bootstrap.scss

@@ -1,19 +1,18 @@
-/*
- * Plugin: iCheck Bootstrap
- * ------------------------
- */
+//
+// Plugin: iCheck Bootstrap
+//
 
 // iCheck colors (theme colors)
 @each $name, $color in $theme-colors {
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
-      border-color: #{$color};
+    border-color: #{$color};
   }
 
   .icheck-#{$name} > input:first-child:checked + label::before,
   .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
-      background-color: #{$color};
-      border-color: #{$color};
+    background-color: #{$color};
+    border-color: #{$color};
   }
 }
 
@@ -21,12 +20,12 @@
 @each $name, $color in $colors {
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
   .icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
-      border-color: #{$color};
+    border-color: #{$color};
   }
 
   .icheck-#{$name} > input:first-child:checked + label::before,
   .icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
-      background-color: #{$color};
-      border-color: #{$color};
+    background-color: #{$color};
+    border-color: #{$color};
   }
 }

build/scss/plugins/_jqvmap.scss

@@ -1,23 +1,21 @@
-/*
- * Plugins: JQVMap
- * ---------------
- */
+//
+// Plugins: JQVMap
+//
 
 // Zoom Button size fixes
 .jqvmap-zoomin,
 .jqvmap-zoomout {
-    background-color: $button-default-background-color;
-    color: $button-default-color;
-    border: 1px solid $button-default-border-color;
-    border-radius: $btn-border-radius;
-
-    width: 15px;
-    height: 15px;
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  border-radius: $btn-border-radius;
+  color: $button-default-color;
+  height: 15px;
+  width: 15px;
 
   &:hover,
   &:active,
   &.hover {
-    color: darken($button-default-color, 10%);
     background-color: darken($button-default-background-color, 5%);
+    color: darken($button-default-color, 10%);
   }
 }

build/scss/plugins/_mapael.scss

@@ -1,7 +1,6 @@
-/*
- * Plugins: jQuery Mapael
- * ----------------------
- */
+//
+// Plugins: jQuery Mapael
+//
 
 .mapael {
   .map {
@@ -10,6 +9,8 @@
 
   .mapTooltip {
     @include reset-text();
+    @include border-radius($tooltip-border-radius);
+    @include font-size($tooltip-font-size);
     background-color: $tooltip-bg;
     color: $tooltip-color;
     display: block;
@@ -19,50 +20,44 @@
     text-align: center;
     word-wrap: break-word;
     z-index: $zindex-tooltip;
-    @include border-radius($tooltip-border-radius);
-    @include font-size($tooltip-font-size);
   }
 
   .myLegend {
-    background-color: #f4f4e8;
-    border: 1px solid #bebeb4;
+    background-color: $gray-100;
+    border: 1px solid $gray-500;
     padding: 10px;
     width: 600px;
   }
 
   .zoomButton {
-    border-radius: $btn-border-radius;
     background-color: $button-default-background-color;
-    color: $button-default-color;
     border: 1px solid $button-default-border-color;
-    padding-left: 1px;
-    width: 16px;
+    border-radius: $btn-border-radius;
+    color: $button-default-color;
+    cursor: pointer;
+    font-weight: bold;
     height: 16px;
+    left: 10px;
     line-height: 14px;
-    text-align: center;
-    cursor: pointer;
+    padding-left: 1px;
     position: absolute;
+    text-align: center;
     top: 0;
-    font-weight: bold;
-    left: 10px;
 
-    -webkit-user-select: none;
-    -khtml-user-select : none;
-    -moz-user-select: none;
-    -o-user-select : none;
     user-select: none;
+    width: 16px;
 
     &:hover,
     &:active,
     &.hover {
-      color: darken($button-default-color, 10%);
       background-color: darken($button-default-background-color, 5%);
+      color: darken($button-default-color, 10%);
     }
   }
 
   .zoomReset {
-    top: 10px;
     line-height: 12px;
+    top: 10px;
   }
 
   .zoomIn {

build/scss/plugins/_miscellaneous.scss

@@ -1,8 +1,7 @@
-/*
- * Plugins: Miscellaneous
- * ----------------------
- * Old plugin codes
- */
+//
+// Plugins: Miscellaneous
+// Old plugin codes
+//
 
 // _fix for sparkline tooltip
 .jqstooltip {

build/scss/plugins/_select2.scss

@@ -1,7 +1,6 @@
-/*
- * Plugin: Select2
- * ---------------
- */
+//
+// Plugin: Select2
+//
 
 //Signle select
 .select2-container--default,
@@ -11,16 +10,17 @@
   &:active {
     outline: none;
   }
+
   .select2-selection--single {
     border: 1px solid $gray-x-light;
     //border-radius: $input-radius;
-    padding: 6px 12px;
     height: 34px;
+    padding: 6px 12px;
   }
 }
 
 .select2-container--default.select2-container--open {
-  border-color: theme-color("primary");
+  border-color: theme-color('primary');
 }
 
 .select2-dropdown {
@@ -29,26 +29,25 @@
 }
 
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-  background-color: theme-color("primary");
-  color: white;
+  background-color: theme-color('primary');
+  color: $white;
 }
 
 .select2-results__option {
   padding: 6px 12px;
   user-select: none;
-  -webkit-user-select: none;
 }
 
 .select2-container .select2-selection--single .select2-selection__rendered {
-  padding-left: 0;
-  padding-right: 0;
   height: auto;
   margin-top: -4px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
-  padding-right: 6px;
+.select2-container[dir='rtl'] .select2-selection--single .select2-selection__rendered {
   padding-left: 20px;
+  padding-right: 6px;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__arrow {
@@ -64,9 +63,10 @@
 .select2-search--inline {
   .select2-search__field {
     border: 1px solid $gray-x-light;
+
     &:focus {
+      border: 1px solid theme-color('primary');
       outline: none;
-      border: 1px solid theme-color("primary");
     }
   }
 }
@@ -77,9 +77,10 @@
 
 .select2-container--default .select2-results__option[aria-selected=true] {
   background-color: #ddd;
+
   &,
   &:hover {
-    color: #444;
+    color: $gray-700;
   }
 }
 
@@ -87,9 +88,9 @@
 .select2-container--default {
   .select2-selection--multiple {
     border: 1px solid $gray-x-light;
-    //border-radius: $input-radius;
+
     &:focus {
-      border-color: theme-color("primary");
+      border-color: theme-color('primary');
     }
 
     .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
@@ -100,21 +101,23 @@
       }
     }
   }
+
   &.select2-container--focus .select2-selection--multiple {
     border-color: $gray-x-light;
   }
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
-  background-color: theme-color("primary");
-  border-color: darken(theme-color("primary"), 5%);
-  padding: 1px 10px;
+  background-color: theme-color('primary');
+  border-color: darken(theme-color('primary'), 5%);
   color: $white;
+  padding: 1px 10px;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
-  margin-right: 5px;
   color: rgba(255, 255, 255, 0.7);
+  margin-right: 5px;
+
   &:hover {
     color: $white;
   }

build/scss/plugins/_sweetalert2.scss

@@ -1,34 +1,38 @@
-/*
- * Plugin: SweetAlert2
- * -------------------
- */
+//
+// Plugin: SweetAlert2
+//
 
 // Icon Colors
 .swal2-icon {
   &.swal2-info {
-    color: $info;
     border-color: ligthen($info, 20%);
+    color: $info;
   }
+
   &.swal2-warning {
-    color: $warning;
     border-color: ligthen($warning, 20%);
+    color: $warning;
   }
+
   &.swal2-error {
-    color: $danger;
     border-color: ligthen($danger, 20%);
+    color: $danger;
   }
+
   &.swal2-question {
-    color: $secondary;
     border-color: ligthen($secondary, 20%);
+    color: $secondary;
   }
+
   &.swal2-success {
-    color: $success;
     border-color: ligthen($success, 20%);
-    
+    color: $success;
+
     .swal2-success-ring {
       border-color: ligthen($success, 20%);
     }
-    [class^="swal2-success-line"] {
+
+    [class^='swal2-success-line'] {
       background-color: $success;
     }
   }

build/scss/plugins/_toastr.scss

@@ -1,7 +1,6 @@
-/*
- * Plugin: Toastr
- * --------------
- */
+//
+// Plugin: Toastr
+//
 
 // Background to FontAwesome Icons
 // #toast-container > .toast {
@@ -35,15 +34,19 @@
 .toast {
   background-color: $primary;
 }
+
 .toast-success {
   background-color: $success;
 }
+
 .toast-error {
   background-color: $danger;
 }
+
 .toast-info {
   background-color: $info;
 }
+
 .toast-warning {
   background-color: $warning;
 }

dist/js/demo.js

@@ -73,17 +73,17 @@
   var $navbar_border = $('<input />', {
     type   : 'checkbox',
     value  : 1,
-    checked: $('.main-header').hasClass('border-bottom'),
+    checked: $('.main-header').hasClass('border-bottom-0'),
     'class': 'mr-1'
   }).on('click', function () {
     if ($(this).is(':checked')) {
-      $('.main-header').addClass('border-bottom')
+      $('.main-header').addClass('border-bottom-0')
     } else {
-      $('.main-header').removeClass('border-bottom')
+      $('.main-header').removeClass('border-bottom-0')
     }
   })
   $checkbox_container.append($navbar_border)
-  $checkbox_container.append('<span>Navbar border</span>')
+  $checkbox_container.append('<span>No Navbar border</span>')
   $container.append($checkbox_container)
 
 
@@ -92,7 +92,17 @@
     'bg-warning',
     'bg-info',
     'bg-danger',
-    'bg-success'
+    'bg-success',
+    'bg-indigo',
+    'bg-navy',
+    'bg-purple',
+    'bg-fuchsia',
+    'bg-pink',
+    'bg-maroon',
+    'bg-orange',
+    'bg-lime',
+    'bg-teal',
+    'bg-olive'
   ]
 
   var sidebar_skins = [
@@ -101,11 +111,31 @@
     'sidebar-dark-info',
     'sidebar-dark-danger',
     'sidebar-dark-success',
+    'sidebar-dark-indigo',
+    'sidebar-dark-navy',
+    'sidebar-dark-purple',
+    'sidebar-dark-fuchsia',
+    'sidebar-dark-pink',
+    'sidebar-dark-maroon',
+    'sidebar-dark-orange',
+    'sidebar-dark-lime',
+    'sidebar-dark-teal',
+    'sidebar-dark-olive',
     'sidebar-light-primary',
     'sidebar-light-warning',
     'sidebar-light-info',
     'sidebar-light-danger',
-    'sidebar-light-success'
+    'sidebar-light-success',
+    'sidebar-light-indigo',
+    'sidebar-light-navy',
+    'sidebar-light-purple',
+    'sidebar-light-fuchsia',
+    'sidebar-light-pink',
+    'sidebar-light-maroon',
+    'sidebar-light-orange',
+    'sidebar-light-lime',
+    'sidebar-light-teal',
+    'sidebar-light-olive'
   ]
 
   $container.append('<h6>Dark Sidebar Variants</h6>')

index.html

@@ -741,11 +741,11 @@
                 <div class="direct-chat-messages">
                   <!-- Message. Default to the left -->
                   <div class="direct-chat-msg">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-left">Alexander Pierce</span>
                       <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -757,11 +757,11 @@
 
                   <!-- Message to the right -->
                   <div class="direct-chat-msg right">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-right">Sarah Bullock</span>
                       <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -773,11 +773,11 @@
 
                   <!-- Message. Default to the left -->
                   <div class="direct-chat-msg">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-left">Alexander Pierce</span>
                       <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -789,11 +789,11 @@
 
                   <!-- Message to the right -->
                   <div class="direct-chat-msg right">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-right">Sarah Bullock</span>
                       <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">

index2.html

@@ -881,11 +881,11 @@
                     <div class="direct-chat-messages">
                       <!-- Message. Default to the left -->
                       <div class="direct-chat-msg">
-                        <div class="direct-chat-info clearfix">
+                        <div class="direct-chat-infos clearfix">
                           <span class="direct-chat-name float-left">Alexander Pierce</span>
                           <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                         </div>
-                        <!-- /.direct-chat-info -->
+                        <!-- /.direct-chat-infos -->
                         <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">
@@ -897,11 +897,11 @@
 
                       <!-- Message to the right -->
                       <div class="direct-chat-msg right">
-                        <div class="direct-chat-info clearfix">
+                        <div class="direct-chat-infos clearfix">
                           <span class="direct-chat-name float-right">Sarah Bullock</span>
                           <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                         </div>
-                        <!-- /.direct-chat-info -->
+                        <!-- /.direct-chat-infos -->
                         <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">
@@ -913,11 +913,11 @@
 
                       <!-- Message. Default to the left -->
                       <div class="direct-chat-msg">
-                        <div class="direct-chat-info clearfix">
+                        <div class="direct-chat-infos clearfix">
                           <span class="direct-chat-name float-left">Alexander Pierce</span>
                           <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
                         </div>
-                        <!-- /.direct-chat-info -->
+                        <!-- /.direct-chat-infos -->
                         <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">
@@ -929,11 +929,11 @@
 
                       <!-- Message to the right -->
                       <div class="direct-chat-msg right">
-                        <div class="direct-chat-info clearfix">
+                        <div class="direct-chat-infos clearfix">
                           <span class="direct-chat-name float-right">Sarah Bullock</span>
                           <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
                         </div>
-                        <!-- /.direct-chat-info -->
+                        <!-- /.direct-chat-infos -->
                         <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">

pages/UI/general.html

@@ -21,9 +21,16 @@
     .color-palette {
       height: 35px;
       line-height: 35px;
+      text-align: right;
+      padding-right: .75rem;
+    }
+    
+    .color-palette.disabled {
       text-align: center;
+      padding-right: 0;
+      display: block;
     }
-
+    
     .color-palette-set {
       margin-bottom: 15px;
     }
@@ -37,11 +44,16 @@
       display: block;
     }
 
+    .color-palette.disabled span {
+      display: block;
+      text-align: left;
+      padding-left: .75rem;
+    }
+
     .color-palette-box h4 {
       position: absolute;
-      top: 100%;
-      left: 25px;
-      margin-top: -40px;
+      left: 1.25rem;
+      margin-top: .75rem;
       color: rgba(255, 255, 255, 0.8);
       font-size: 12px;
       display: block;
@@ -649,13 +661,26 @@
             </h3>
           </div>
           <div class="card-body">
+            <div class="col-12">
+              <h5>Theme Colors</h5>
+            </div>
+            <!-- /.col-12 -->
             <div class="row">
               <div class="col-sm-4 col-md-2">
                 <h4 class="text-center">Primary</h4>
 
                 <div class="color-palette-set">
+                  <div class="bg-primary color-palette"><span>#007bff</span></div>
                   <div class="bg-primary disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-primary color-palette"><span>#3c8dbc</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center">Secondary</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-secondary color-palette"><span>#6c757d</span></div>
+                  <div class="bg-secondary disabled color-palette"><span>Disabled</span></div>
                 </div>
               </div>
               <!-- /.col -->
@@ -663,8 +688,8 @@
                 <h4 class="text-center">Info</h4>
 
                 <div class="color-palette-set">
+                  <div class="bg-info color-palette"><span>#17a2b8</span></div>
                   <div class="bg-info disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-info color-palette"><span>#00c0ef</span></div>
                 </div>
               </div>
               <!-- /.col -->
@@ -672,17 +697,17 @@
                 <h4 class="text-center">Success</h4>
 
                 <div class="color-palette-set">
+                  <div class="bg-success color-palette"><span>#28a745</span></div>
                   <div class="bg-success disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-success color-palette"><span>#00a65a</span></div>
                 </div>
               </div>
               <!-- /.col -->
               <div class="col-sm-4 col-md-2">
-                <h4 class="text-center">Warning</h4>
+                <h4 class="text-center bg-warning">Warning</h4>
 
                 <div class="color-palette-set">
+                  <div class="bg-warning color-palette"><span>#ffc107</span></div>
                   <div class="bg-warning disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-warning color-palette"><span>#f39c12</span></div>
                 </div>
               </div>
               <!-- /.col -->
@@ -690,8 +715,33 @@
                 <h4 class="text-center">Danger</h4>
 
                 <div class="color-palette-set">
+                  <div class="bg-danger color-palette"><span>#dc3545</span></div>
                   <div class="bg-danger disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-danger color-palette"><span>#f56954</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
+            <div class="col-12">
+              <h5 class="mt-3">Black/White Nuances</h5>
+            </div>
+            <!-- /.col-12 -->
+            <div class="row">
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center">Black</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-black color-palette"><span>#000000</span></div>
+                  <div class="bg-black disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center">Gray Dark</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-gray-dark color-palette"><span>#343a40</span></div>
+                  <div class="bg-gray-dark disabled color-palette"><span>Disabled</span></div>
                 </div>
               </div>
               <!-- /.col -->
@@ -699,21 +749,114 @@
                 <h4 class="text-center">Gray</h4>
 
                 <div class="color-palette-set">
+                  <div class="bg-gray color-palette"><span>#adb5bd</span></div>
                   <div class="bg-gray disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-gray color-palette"><span>#d2d6de</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-light">Light</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-light color-palette"><span>#1f2d3d</span></div>
+                  <div class="bg-light disabled color-palette"><span>Disabled</span></div>
                 </div>
               </div>
               <!-- /.col -->
             </div>
             <!-- /.row -->
+            <div class="col-12">
+              <h5 class="mt-3">Colors</h5>
+            </div>
+            <!-- /.col-12 -->
             <div class="row">
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-indigo">Indigo</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-indigo color-palette"><span>#6610f2</span></div>
+                  <div class="bg-indigo disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
               <!-- /.col -->
               <div class="col-sm-4 col-md-2">
-                <h4 class="text-center">Black</h4>
+                <h4 class="text-center bg-navy">Navy</h4>
 
                 <div class="color-palette-set">
-                  <div class="bg-black disabled color-palette"><span>Disabled</span></div>
-                  <div class="bg-black color-palette"><span>#111111</span></div>
+                  <div class="bg-navy color-palette"><span>#001f3f</span></div>
+                  <div class="bg-navy disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-purple">Purple</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-purple color-palette"><span>#605ca8</span></div>
+                  <div class="bg-purple disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-fuchsia">Fuchsia</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-fuchsia color-palette"><span>#f012be</span></div>
+                  <div class="bg-fuchsia disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-pink">Pink</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-pink color-palette"><span>#e83e8c</span></div>
+                  <div class="bg-pink disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-maroon">Maroon</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-maroon color-palette"><span>#d81b60</span></div>
+                  <div class="bg-maroon disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-orange">Orange</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-orange color-palette"><span>#ff851b</span></div>
+                  <div class="bg-orange disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-lime">Lime</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-lime color-palette"><span>#01ff70</span></div>
+                  <div class="bg-lime disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-teal">Teal</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-teal color-palette"><span>#39cccc</span></div>
+                  <div class="bg-teal disabled color-palette"><span>Disabled</span></div>
+                </div>
+              </div>
+              <!-- /.col -->
+              <div class="col-sm-4 col-md-2">
+                <h4 class="text-center bg-olive">Olive</h4>
+
+                <div class="color-palette-set">
+                  <div class="bg-olive color-palette"><span>#3d9970</span></div>
+                  <div class="bg-olive disabled color-palette"><span>Disabled</span></div>
                 </div>
               </div>
               <!-- /.col -->
@@ -1249,7 +1392,7 @@
               <div class="card-header">
                 <h3 class="card-title">
                   <i class="fas fa-text-width"></i>
-                  Block Quotes
+                  Primary Block Quotes
                 </h3>
               </div>
               <!-- /.card-header -->
@@ -1269,12 +1412,12 @@
               <div class="card-header">
                 <h3 class="card-title">
                   <i class="fas fa-text-width"></i>
-                  Block Quotes Pulled Right
+                  Secondary Block Quotes
                 </h3>
               </div>
               <!-- /.card-header -->
               <div class="card-body clearfix">
-                <blockquote class="float-right">
+                <blockquote class="quote-secondary">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                   <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                 </blockquote>

pages/widgets.html

@@ -1448,11 +1448,11 @@
                 <div class="direct-chat-messages">
                   <!-- Message. Default to the left -->
                   <div class="direct-chat-msg">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-left">Alexander Pierce</span>
                       <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1464,11 +1464,11 @@
 
                   <!-- Message to the right -->
                   <div class="direct-chat-msg right">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-right">Sarah Bullock</span>
                       <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1543,11 +1543,11 @@
                 <div class="direct-chat-messages">
                   <!-- Message. Default to the left -->
                   <div class="direct-chat-msg">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-left">Alexander Pierce</span>
                       <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1559,11 +1559,11 @@
 
                   <!-- Message to the right -->
                   <div class="direct-chat-msg right">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-right">Sarah Bullock</span>
                       <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1638,11 +1638,11 @@
                 <div class="direct-chat-messages">
                   <!-- Message. Default to the left -->
                   <div class="direct-chat-msg">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-left">Alexander Pierce</span>
                       <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1654,11 +1654,11 @@
 
                   <!-- Message to the right -->
                   <div class="direct-chat-msg right">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-right">Sarah Bullock</span>
                       <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1733,11 +1733,11 @@
                 <div class="direct-chat-messages">
                   <!-- Message. Default to the left -->
                   <div class="direct-chat-msg">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-left">Alexander Pierce</span>
                       <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">
@@ -1749,11 +1749,11 @@
 
                   <!-- Message to the right -->
                   <div class="direct-chat-msg right">
-                    <div class="direct-chat-info clearfix">
+                    <div class="direct-chat-infos clearfix">
                       <span class="direct-chat-name float-right">Sarah Bullock</span>
                       <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                     </div>
-                    <!-- /.direct-chat-info -->
+                    <!-- /.direct-chat-infos -->
                     <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="Message User Image">
                     <!-- /.direct-chat-img -->
                     <div class="direct-chat-text">