Adjusted skins and main-header to function with BS4

build/scss/AdminLTE.scss

@@ -62,3 +62,7 @@
 // -------------
 @import "miscellaneous";
 @import "print";
+
+// Skins
+// -----
+@import "skins/all-skins";

build/scss/_boxes.scss

@@ -28,7 +28,7 @@
     border-top-color: $green;
   }
   &.box-default {
-    border-top-color: $gray;
+    border-top-color: $box-default-border-top-color;
   }
 
   // collapsed mode
@@ -224,10 +224,10 @@
   padding: 5px;
   font-size: 12px;
   background: transparent;
-  color: darken($box-default-border-top-color, 20%);
+  color: $gray-light;
   .open &,
   &:hover {
-    color: darken($box-default-border-top-color, 40%);
+    color: $gray;
   }
   &.btn:active {
     box-shadow: none;

build/scss/_core.scss

@@ -13,8 +13,6 @@ body {
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 400;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -35,7 +33,7 @@ body {
 }
 
 .layout-boxed {
-  background: url('${boxed-layout-bg-image-path}') repeat fixed;
+  background: url('#{$boxed-layout-bg-image-path}') repeat fixed;
 }
 
 /*
@@ -75,7 +73,7 @@ transition: transform $transition-rule;
 .content-wrapper,
 .right-side {
   min-height: 100%;
-  background-color: $body-bg;
+  background-color: $main-bg;
   z-index: 800;
 }
 
@@ -83,7 +81,7 @@ transition: transform $transition-rule;
   background: #fff;
   padding: 15px;
   color: #444;
-  border-top: 1px solid $gray;
+  border-top: 1px solid $gray-lighter;
 }
 
 /* Fixed layout */

build/scss/_header.scss

@@ -4,244 +4,5 @@
  */
 
 .main-header {
-  position: relative;
-  max-height: 100px;
-  z-index: 1030;
-  //Navbar
-  > .navbar {
-    transition: margin-left $transition-speed $transition-fn;
-    margin-bottom: 0;
-    margin-left: $sidebar-width;
-    border: none;
-    padding: $navbar-padding-vertical $navbar-padding-horizontal;
-    border-radius: 0;
-    .layout-top-nav & {
-      margin-left: 0;
-    }
-  }
-  //Navbar search text input
-  #navbar-search-input.form-control {
-    background: rgba(255, 255, 255, 0.2);
-    border-color: transparent;
-    &:focus,
-    &:active {
-      border-color: rgba(0, 0, 0, 1);
-      background: rgba(255, 255, 255, 1);
-    }
-    &::-moz-placeholder {
-      color: #ccc;
-      opacity: 1;
-    }
-    &:-ms-input-placeholder {
-      color: #ccc;
-    }
-    &::-webkit-input-placeholder {
-      color: #ccc;
-    }
-  }
-  //Navbar Right Menu
-  .navbar-custom-menu,
-  .navbar-right {
-    float: right;
-    @media (max-width: map-get($grid-breakpoints, sm)) {
-      a {
-        color: inherit;
-        background: transparent;
-      }
-    }
-  }
-  .navbar-right {
-    @media (max-width: $screen-header-collapse) {
-      float: none;
-      .navbar-collapse & {
-        margin: 7.5px -15px;
-      }
 
-      > li {
-        color: inherit;
-        border: 0;
-      }
-    }
-  }
-  //Navbar toggle button
-  .sidebar-toggle {
-    float: left;
-    background-color: transparent;
-    background-image: none;
-    padding: $navbar-padding-vertical $navbar-padding-horizontal;
-    //Add the fontawesome bars icon
-    font-family: fontAwesome;
-    &:before {
-      content: "\f0c9";
-    }
-    &:hover {
-      color: #fff;
-    }
-    &:focus,
-    &:active {
-      background: transparent;
-    }
-  }
-  .sidebar-toggle .icon-bar {
-    display: none;
-  }
-  //Navbar User Menu
-  .navbar .nav > li.user > a {
-    > .fa,
-    > .glyphicon,
-    > .ion {
-      margin-right: 5px;
-    }
-  }
-
-  //Labels in navbar
-  .navbar .nav > li > a > .label {
-    position: absolute;
-    top: 9px;
-    right: 7px;
-    text-align: center;
-    font-size: 9px;
-    padding: 2px 3px;
-    line-height: 9px;
-  }
-
-  //Logo bar
-  .logo {
-    transition: width $transition-speed $transition-fn;
-    display: block;
-    float: left;
-    font-size: 20px;
-    line-height: 50px;
-    text-align: center;
-    width: $sidebar-width;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    padding: $navbar-padding-vertical $navbar-padding-horizontal;
-    font-weight: 300;
-    overflow: hidden;
-    //Add support to sidebar mini by allowing the user to create
-    //2 logo designs. mini and lg
-    .logo-lg {
-      //should be visibile when sidebar isn't collapsed
-      display: block;
-    }
-    .logo-mini {
-      display: none;
-    }
-  }
-  //Navbar Brand. Alternative logo with layout-top-nav
-  .navbar-brand {
-    color: #fff;
-  }
-}
-
-// Content Header
-.content-header {
-  position: relative;
-  padding: 15px 15px 0 15px;
-  // Header Text
-  > h1 {
-    margin: 0;
-    font-size: 24px;
-    > small {
-      font-size: 15px;
-      display: inline-block;
-      padding-left: 4px;
-      font-weight: 300;
-    }
-  }
-
-  > .breadcrumb {
-    float: right;
-    background: transparent;
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 12px;
-    padding: 7px 5px;
-    position: absolute;
-    top: 15px;
-    right: 10px;
-    @include border-radius(2px);
-    > li > a {
-      color: #444;
-      text-decoration: none;
-      display: inline-block;
-      > .fa, > .glyphicon, > .ion {
-        margin-right: 5px;
-      }
-    }
-    > li + li:before {
-      content: '>\00a0';
-    }
-  }
-
-  @media (max-width: map-get($grid-breakpoints, sm)) {
-    > .breadcrumb {
-      position: relative;
-      margin-top: 5px;
-      top: 0;
-      right: 0;
-      float: none;
-      background: $gray;
-      padding-left: 10px;
-      li:before {
-        color: darken($gray, 20%);
-      }
-    }
-  }
-}
-
-.navbar-toggle {
-  color: #fff;
-  border: 0;
-  margin: 0;
-  padding: $navbar-padding-vertical $navbar-padding-horizontal;
-}
-
-//Control navbar scaffolding on x-small screens
-@media (max-width: map-get($grid-breakpoints, sm)) {
-  .navbar-custom-menu .navbar-nav > li {
-    float: left;
-  }
-
-  //Dont't let links get full width
-  .navbar-custom-menu .navbar-nav {
-    margin: 0;
-    float: left;
-  }
-
-  .navbar-custom-menu .navbar-nav > li > a {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    line-height: 20px;
-  }
-}
-
-// Collapse header
-@media (max-width: $screen-header-collapse) {
-  .main-header {
-    position: relative;
-    .logo,
-    .navbar {
-      width: 100%;
-      float: none;
-    }
-    .navbar {
-      margin: 0;
-    }
-    .navbar-custom-menu {
-      float: right;
-    }
-  }
-}
-
-.navbar-collapse.pull-left {
-  @media (max-width: map-get($grid-breakpoints, sm)) {
-    float: none !important;
-    + .navbar-custom-menu {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 40px;
-    }
-  }
-}
+}

build/scss/_mixins.scss

@@ -174,7 +174,7 @@
     }
     input[type="text"] {
       color: #666;
-      @include border-radius(2px, 0, 2px, 0);
+      @include border-radius-sides(2px, 0, 2px, 0);
       &:focus, &:focus + .input-group-btn .btn {
         background-color: #fff;
         color: #666;
@@ -185,7 +185,7 @@
     }
     .btn {
       color: #999;
-      @include border-radius(0, 2px, 0, 2px);
+      @include border-radius-sides(0, 2px, 0, 2px);
     }
   }
 }
@@ -279,7 +279,7 @@
     }
     input[type="text"] {
       color: #666;
-      @include border-radius(2px, 0, 2px, 0);
+      @include border-radius-sides(2px, 0, 2px, 0);
       &:focus,
       &:focus + .input-group-btn .btn {
         background-color: #fff;
@@ -291,7 +291,7 @@
     }
     .btn {
       color: #999;
-      @include border-radius(0, 2px, 0, 2px);
+      @include border-radius-sides(0, 2px, 0, 2px);
     }
   }
   @media (min-width: map-get($grid-breakpoints, sm)) {

build/scss/_navs.scss

@@ -8,7 +8,7 @@
   > li > a:active,
   > li > a:focus {
     color: #444;
-    background: #f7f7f7;
+    //background: #f7f7f7;
   }
 }
 

build/scss/_variables.scss

@@ -28,7 +28,7 @@ $fuchsia: #F012BE;
 $purple: #605ca8;
 $maroon: #D81B60;
 $black: #111;
-$gray: #d2d6de;
+//$gray: #d2d6de;
 
 //LAYOUT
 //--------------------------------------------------------
@@ -40,12 +40,12 @@ $boxed-layout-max-width: 1024px;
 //When the logo should go to the top of the screen
 $screen-header-collapse: map-get($grid-breakpoints, xs);
 
-//Link colors (Aka: <a> tags)
+//Link colors (aka: <a> tags)
 $link-color: $light-blue;
 $link-hover-color: lighten($link-color, 15%);
 
 //Body background (Affects main content background only)
-$body-bg: #ecf0f5;
+$main-bg: #ecf0f5;
 
 //SIDEBAR SKINS
 //--------------------------------------------------------
@@ -81,7 +81,7 @@ $box-boxshadow: 0 1px 1px rgba(0, 0, 0, 0.125);
 $box-padding: 10px;
 
 //Box variants
-$box-default-border-top-color: #d2d6de;
+$box-default-border-top-color: $gray-light;//#d2d6de;
 
 //BUTTONS
 //--------------------------------------------------------
@@ -118,6 +118,5 @@ $attachment-border-radius: 3px;
 //--------------------------------------------------------
 
 //Transition global options
-$transition-speed: 3s;
-$transition-fn: ease-in-out;
-//cubic-bezier(0.32,1.25,0.375,1.15);
+$transition-speed: 0.3s;
+$transition-fn: ease-in-out;

build/scss/skins/_all-skins.scss

@@ -1,13 +1,13 @@
 //All skins in one file
-@import "skin-blue.less";
-@import "skin-blue-light.less";
-@import "skin-black.less";
-@import "skin-black-light.less";
-@import "skin-green.less";
-@import "skin-green-light.less";
-@import "skin-red.less";
-@import "skin-red-light.less";
-@import "skin-yellow.less";
-@import "skin-yellow-light.less";
-@import "skin-purple.less";
-@import "skin-purple-light.less";
+@import "skin-blue";
+@import "skin-blue-light";
+@import "skin-black";
+@import "skin-black-light";
+@import "skin-green";
+@import "skin-green-light";
+@import "skin-red";
+@import "skin-red-light";
+@import "skin-yellow";
+@import "skin-yellow-light";
+@import "skin-purple";
+@import "skin-purple-light";

build/scss/skins/skin-black-light.scss

@@ -2,10 +2,6 @@
  * Skin: Black
  * -----------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 /* skin-black navbar */
 .skin-black-light {
@@ -20,7 +16,7 @@
       border-right: 1px solid #eee;
     }
     > .navbar {
-      @include navbar-variant(#fff; #333; #999; #fff);
+      @include navbar-variant(#fff, #333, #999, #fff);
       > .sidebar-toggle {
         color: #333;
         border-right: 1px solid #eee;
@@ -41,10 +37,10 @@
       }
     }
     > .logo {
-      @include logo-variant(#fff; #333);
+      @include logo-variant(#fff, #333);
       border-right: 1px solid #eee;
       @media (max-width: $screen-header-collapse) {
-        @include logo-variant(#222; #fff);
+        @include logo-variant(#222, #fff);
         border-right: none;
       }
     }

build/scss/skins/skin-black.scss

@@ -2,10 +2,6 @@
  * Skin: Black
  * -----------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 /* skin-black navbar */
 .skin-black {
@@ -20,7 +16,7 @@
       border-right: 1px solid #eee;
     }
     > .navbar {
-      @include navbar-variant(#fff; #333; #999; #fff);
+      @include navbar-variant(#fff, #333, #999, #fff);
       > .sidebar-toggle {
         color: #333;
         border-right: 1px solid #eee;
@@ -41,10 +37,10 @@
       }
     }
     > .logo {
-      @include logo-variant(#fff; #333);
+      @include logo-variant(#fff, #333);
       border-right: 1px solid #eee;
       @media (max-width: $screen-header-collapse) {
-        @include logo-variant(#222; #fff);
+        @include logo-variant(#222, #fff);
         border-right: none;
       }
     }

build/scss/skins/skin-blue-light.scss

@@ -2,16 +2,12 @@
  * Skin: Blue
  * ----------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-blue-light {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($light-blue; #fff);
+      @include navbar-variant($light-blue, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-blue.scss

@@ -2,16 +2,11 @@
  * Skin: Blue
  * ----------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
-
 .skin-blue {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($light-blue; #fff);
+      @include navbar-variant($light-blue, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-green-light.scss

@@ -2,16 +2,12 @@
  * Skin: Green
  * -----------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-green-light {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($green; #fff);
+      @include navbar-variant($green, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-green.scss

@@ -2,16 +2,12 @@
  * Skin: Green
  * -----------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-green {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($green; #fff);
+      @include navbar-variant($green, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-purple-light.scss

@@ -2,16 +2,12 @@
  * Skin: Purple
  * ------------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-purple-light {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($purple; #fff);
+      @include navbar-variant($purple, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-purple.scss

@@ -2,16 +2,12 @@
  * Skin: Purple
  * ------------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-purple {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($purple; #fff);
+      @include navbar-variant($purple, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-red-light.scss

@@ -2,16 +2,12 @@
  * Skin: Red
  * ---------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-red-light {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($red; #fff);
+      @include navbar-variant($red, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-red.scss

@@ -2,16 +2,12 @@
  * Skin: Red
  * ---------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-red {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($red; #fff);
+      @include navbar-variant($red, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-yellow-light.scss

@@ -2,16 +2,12 @@
  * Skin: Yellow
  * ------------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-yellow-light {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($yellow; #fff);
+      @include navbar-variant($yellow, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {

build/scss/skins/skin-yellow.scss

@@ -2,16 +2,12 @@
  * Skin: Yellow
  * ------------
  */
-@import "../../bootstrap-less/mixins.less";
-@import "../../bootstrap-less/variables.less";
-@import "../variables.less";
-@import "../mixins.less";
 
 .skin-yellow {
   //Navbar
   .main-header {
     .navbar {
-      @include navbar-variant($yellow; #fff);
+      @include navbar-variant($yellow, #fff);
       .sidebar-toggle {
         color: #fff;
         &:hover {