little scss changes

- reworked sidebar-dark-* & sidebar-light-* to reduce lines (~1000 lines)
- changed `border-bottom: none` to `border-bottom: 0`
- added colors to $colors array
- removed box-solid-variant mixin (unused)
- removed `skin-dark-sidebar` & `skin-light-sidebar` mixin
- added `cards-variant` & `sidebar-color` mixin

build/scss/_cards.scss

@@ -52,7 +52,7 @@
       margin: 0;
 
       &:last-of-type {
-        border-bottom: none;
+        border-bottom: 0;
       }
     }
   }
@@ -97,7 +97,7 @@ html.maximized-card {
   }
 
   .collapsed-card & {
-    border-bottom: none;
+    border-bottom: 0;
   }
 
   > .card-tools {
@@ -293,25 +293,17 @@ html.maximized-card {
     }
   }
 
-  // Color varaity
+  // Color variants
-  .danger {
+  @each $name, $color in $theme-colors {
-    border-left-color: theme-color('danger');
+    .#{$name} {
+      border-left-color: $color;
+    }
   }
 
-  .warning {
+  @each $name, $color in $colors {
-    border-left-color: theme-color('warning');
+    .#{$name} {
+      border-left-color: $color;
     }
-
-  .info {
-    border-left-color: theme-color('info');
-  }
-
-  .success {
-    border-left-color: theme-color('success');
-  }
-
-  .primary {
-    border-left-color: theme-color('primary');
   }
 
   .handle {
@@ -328,59 +320,11 @@ html.maximized-card {
   max-width: 200px;
 }
 
+// Color variants
 @each $name, $color in $theme-colors {
-  .card-#{$name} {
+  @include cards-variant($name, $color);
-    &:not(.card-outline) {
-      .card-header {
-        background-color: $color;
-        border-bottom: 0;
-
-        &,
-        a {
-          color: color-yiq($color);
-        }
-      }
 }
 
-    &.card-outline {
+@each $name, $color in $colors {
-      border-top: 3px solid $color;
+  @include cards-variant($name, $color);
-    }
-  }
-
-  .bg-#{$name},
-  .bg-#{$name}-gradient,
-  .card-#{$name}:not(.card-outline) {
-    .btn-tool {
-      color: rgba(color-yiq($color), 0.8);
-
-      &:hover {
-        color: color-yiq($color);
-      }
-    }
-  }
-
-  .card.bg-#{$name},
-  .card.bg-#{$name}-gradient {
-    .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.active,
-      table td.active:hover {
-        background: lighten($color, 10%);
-        color: color-yiq($color);
-      }
-    }
-  }
 }

build/scss/_direct-chat.scss

@@ -144,7 +144,7 @@
     padding: 10px;
 
     &:last-of-type {
-      border-bottom: none;
+      border-bottom: 0;
     }
   }
 }

build/scss/_main-sidebar.scss

@@ -97,10 +97,10 @@
     margin-bottom: 0;
 
     .nav-icon {
-      text-align: center;
-      width: $sidebar-nav-icon-width;
       font-size: 1.2rem;
       margin-right: .2rem;
+      text-align: center;
+      width: $sidebar-nav-icon-width;
 
       &.fa,
       &.fas,
@@ -132,7 +132,7 @@
     }
   }
 
-  &.nav-child-indent { 
+  &.nav-child-indent {
     .nav-treeview {
       padding-left: 1rem;
     }
@@ -154,6 +154,12 @@
 }
 
 #sidebar-overlay {
+  @include media-breakpoint-down(md) {
+    .sidebar-open & {
+      display: block;
+    }
+  }
+
   background-color: rgba($black, 0.1);
   bottom: 0;
   display: none;
@@ -162,15 +168,10 @@
   right: 0;
   top: 0;
   z-index: $zindex-main-sidebar - 1;
-
-  @include media-breakpoint-down(md) {
-    .sidebar-open & {
-      display: block;
-    }
-  }
 }
 
-.sidebar-mini-md.sidebar-open {
+.sidebar-mini-md {
+  &.sidebar-open {
     #sidebar-overlay {
       @include media-breakpoint-up(sm) {
         display: none;
@@ -180,27 +181,230 @@
       }
     }
   }
+}
 
+[class*='sidebar-light-'] {
+  // Sidebar background color
+  background-color: $sidebar-light-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-light-hover-color;
+    }
+
+    .status {
+      background: $sidebar-light-hover-bg;
+      color: $sidebar-light-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-light-hover-bg, 3%);
+        color: $sidebar-light-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-light-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active,
+      &:focus {
+        color: $sidebar-light-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link {
+      background-color: $sidebar-light-hover-bg;
+      color: $sidebar-light-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-light-active-color;
+
+      @if $enable-shadows {
+        @extend .elevation-1;
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-light-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background: inherit;
+    color: darken($sidebar-light-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-light-color;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-light-submenu-color;
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover {
+          background-color: $sidebar-light-submenu-active-bg;
+          color: $sidebar-light-submenu-active-color;
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: $sidebar-light-submenu-hover-bg;
+      }
+    }
+  }
+}
+
+[class*='sidebar-dark-'] {
+  // Sidebar background color
+  background-color: $sidebar-dark-bg;
+
+  // User Panel (resides in the sidebar)
+  .user-panel {
+    a:hover {
+      color: $sidebar-dark-hover-color;
+    }
+
+    .status {
+      background: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: darken($sidebar-dark-hover-bg, 3%);
+        color: $sidebar-dark-hover-color;
+      }
+    }
+
+    .dropdown-menu {
+      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-dark-hover-bg, 5%);
+    }
+
+    .dropdown-item {
+      color: $body-color;
+    }
+  }
+
+  // Sidebar Menu. First level links
+  .nav-sidebar > .nav-item {
+    // links
+    > .nav-link {
+      // border-left: 3px solid transparent;
+      &:active {
+        color: $sidebar-dark-color;
+      }
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    & > .nav-link:focus  {
+      background-color: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-hover-color;
+    }
+
+    > .nav-link.active {
+      color: $sidebar-dark-hover-color;
+
+      @if $enable-shadows {
+        @extend .elevation-1;
+      }
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background: $sidebar-dark-submenu-bg;
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    background: inherit; //darken($sidebar-dark-bg, 3%);
+    color: lighten($sidebar-dark-color, 5%);
+  }
+
+  // All links within the sidebar menu
+  .sidebar {
+    a {
+      color: $sidebar-dark-color;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: $sidebar-dark-submenu-color;
+
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-hover-bg;
+          color: $sidebar-dark-submenu-hover-color;
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          background-color: $sidebar-dark-submenu-active-bg;
+          color: $sidebar-dark-submenu-active-color;
+        }
+      }
+    }
+  }
+}
 
 // Sidebar variants
 @each $name, $color in $theme-colors {
-  .sidebar-dark-#{$name} {
+  .sidebar-dark-#{$name},
-    @include skin-dark-sidebar($color)
-  }
-
   .sidebar-light-#{$name} {
-    @include skin-light-sidebar($color)
+    @include sidebar-color($color)
   }
 }
 
 @each $name, $color in $colors {
-  .sidebar-dark-#{$name} {
+  .sidebar-dark-#{$name},
-    @include skin-dark-sidebar($color)
-  }
-
   .sidebar-light-#{$name} {
-    @include skin-light-sidebar($color)
+    @include sidebar-color($color)
   }
 }
 
-

build/scss/_mixins.scss

@@ -3,10 +3,79 @@
  * ---------------
  */
 
-// Changes the color and the hovering properties of the navbar
+
+// 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);
+        }
+      }
+    }
+
+    &.card-outline {
+      border-top: 3px solid $color;
+    }
+  }
+
+  .bg-#{$name},
+  .bg-#{$name}-gradient,
+  .card-#{$name}:not(.card-outline) {
+    .btn-tool {
+      color: rgba(color-yiq($color), 0.8);
+
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .card.bg-#{$name},
+  .card.bg-#{$name}-gradient {
+    .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.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);
+    }
+  }
+}
+
+
 @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;
-  // Navbar links
+
   .nav > li > a {
     color: $font-color;
   }
@@ -45,22 +114,6 @@
   }
 }
 
-// Box solid color variantion creator
-@mixin box-solid-variant($color, $text-color: #fff) {
-  border: 1px solid $color;
-
-  > .card-header {
-    background: $color;
-    background-color: $color;
-    color: $text-color;
-
-    a,
-    .btn {
-      color: $text-color;
-    }
-  }
-}
-
 // Direct Chat Variant
 @mixin direct-chat-variant($bg-color, $color: #fff) {
   .right > .direct-chat-text {
@@ -107,214 +160,3 @@
   background: -o-linear-gradient($stop, $start);
 }
 
-// Skins Mixins
-
-// Dark Sidebar Mixin
-@mixin skin-dark-sidebar($link-hover-border-color) {
-  // Sidebar background color
-  background-color: $sidebar-dark-bg;
-
-  // User Panel (resides in the sidebar)
-  .user-panel {
-    a:hover {
-      color: $sidebar-dark-hover-color;
-    }
-
-    .status {
-      background: $sidebar-dark-hover-bg;
-      color: $sidebar-dark-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: darken($sidebar-dark-hover-bg, 3%);
-        color: $sidebar-dark-hover-color;
-      }
-    }
-
-    .dropdown-menu {
-      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
-      border-color: darken($sidebar-dark-hover-bg, 5%);
-    }
-
-    .dropdown-item {
-      color: $body-color;
-    }
-  }
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active {
-        color: $sidebar-dark-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    & > .nav-link:focus  {
-      background-color: $sidebar-dark-hover-bg;
-      color: $sidebar-dark-hover-color;
-    }
-
-    > .nav-link.active {
-      background-color: $link-hover-border-color;
-      color: $sidebar-dark-hover-color;
-
-      @if $enable-shadows {
-        @extend .elevation-1;
-      }
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background: $sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    background: inherit; //darken($sidebar-dark-bg, 3%);
-    color: lighten($sidebar-dark-color, 5%);
-  }
-
-  // All links within the sidebar menu
-  .sidebar a {
-    color: $sidebar-dark-color;
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $sidebar-dark-submenu-color;
-
-        &:hover,
-        &:focus {
-          background-color: $sidebar-dark-submenu-hover-bg;
-          color: $sidebar-dark-submenu-hover-color;
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
-          background-color: $sidebar-dark-submenu-active-bg;
-          color: $sidebar-dark-submenu-active-color;
-        }
-      }
-    }
-  }
-}
-
-// Light Sidebar Mixin
-@mixin skin-light-sidebar($link-hover-border-color) {
-  // Sidebar background color
-  background-color: $sidebar-light-bg;
-
-  // User Panel (resides in the sidebar)
-  .user-panel {
-    a:hover {
-      color: $sidebar-light-hover-color;
-    }
-
-    .status {
-      background: $sidebar-light-hover-bg;
-      color: $sidebar-light-color;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: darken($sidebar-light-hover-bg, 3%);
-        color: $sidebar-light-hover-color;
-      }
-    }
-
-    .dropdown-menu {
-      @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
-      border-color: darken($sidebar-light-hover-bg, 5%);
-    }
-
-    .dropdown-item {
-      color: $body-color;
-    }
-  }
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active,
-      &:focus {
-        color: $sidebar-light-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      background-color: $sidebar-light-hover-bg;
-      color: $sidebar-light-hover-color;
-    }
-
-    > .nav-link.active {
-      background-color: $link-hover-border-color;
-      color: $sidebar-light-active-color;
-      
-      @if $enable-shadows {
-        @extend .elevation-1;
-      }
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background: $sidebar-light-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    background: inherit;
-    color: darken($sidebar-light-color, 5%);
-  }
-
-  // All links within the sidebar menu
-  .sidebar a {
-    color: $sidebar-light-color;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $sidebar-light-submenu-color;
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover {
-          background-color: $sidebar-light-submenu-active-bg;
-          color: $sidebar-light-submenu-active-color;
-        }
-      }
-
-      > .nav-link:hover {
-        background-color: $sidebar-light-submenu-hover-bg;
-      }
-    }
-  }
-}

build/scss/_table.scss

@@ -12,7 +12,7 @@
   &.table-head-fixed {
     thead tr:nth-child(1) th {
       background-color: $white;
-      border-bottom: none;
+      border-bottom: 0;
       box-shadow: inset 0 1px 0 $table-border-color,
                   inset 0 -1px 0 $table-border-color;
       position: sticky;

build/scss/_variables.scss

@@ -17,6 +17,14 @@ $maroon: #D81B60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
+$colors: map-merge((
+    'navy': $navy,
+    'olive': $olive,
+    'lime': $lime,
+    'fuchsia': $fuchsia,
+    'maroon': $maroon,
+), $colors);
+
 // LAYOUT
 // --------------------------------------------------------