enhanced SCSS style & added projects example

- fixed scss code style & headers
- moved pages scss to seperate folder
- added pages/_projects scss
- added pages/examples/projects demo

build/scss/AdminLTE.scss

@@ -6,66 +6,72 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import "../../node_modules/bootstrap/scss/functions";
-@import "bootstrap-variables";
-@import "../../node_modules/bootstrap/scss/bootstrap";
-// VARIABLES AND MIXINS
+@import '../../node_modules/bootstrap/scss/functions';
+@import 'bootstrap-variables';
+@import '../../node_modules/bootstrap/scss/bootstrap';
+
+// Variables and Mixins
 // ---------------------------------------------------
-@import "variables";
-@import "mixins";
+
+@import 'variables';
+@import 'mixins';
+
 // Core
 // ---------------------------------------------------
-@import "layout";
-// COMPONENTS
+@import 'layout';
+
+// Components
 // ---------------------------------------------------
-@import "main-header";
-@import "brand";
-@import "main-sidebar";
-@import "sidebar-mini";
-@import "control-sidebar";
-@import "dropdown";
-@import "forms";
-@import "progress-bars";
-@import "small-box";
-@import "cards";
-@import "info-box";
-@import "timeline";
-@import "buttons";
-@import "callout";
-@import "alerts";
-@import "navs";
-@import "products";
-@import "table";
-@import "labels";
-@import "direct-chat";
-@import "users-list";
-@import "carousel";
-@import "social-widgets";
-@import "modals";
-// PAGES
-// ---------------------------------------------------
-@import "mailbox";
-@import "lockscreen";
-@import "login_and_register";
-@import "404_500_errors";
-@import "invoice";
-@import "profile";
+@import 'main-header';
+@import 'brand';
+@import 'main-sidebar';
+@import 'sidebar-mini';
+@import 'control-sidebar';
+@import 'dropdown';
+@import 'forms';
+@import 'progress-bars';
+@import 'small-box';
+@import 'cards';
+@import 'info-box';
+@import 'timeline';
+@import 'buttons';
+@import 'callout';
+@import 'alerts';
+@import 'navs';
+@import 'products';
+@import 'table';
+@import 'labels';
+@import 'direct-chat';
+@import 'users-list';
+@import 'carousel';
+@import 'social-widgets';
+@import 'modals';
+
 // Pages
 // ---------------------------------------------------
-@import "pages/e_commerce";
+@import 'pages/mailbox';
+@import 'pages/lockscreen';
+@import 'pages/login_and_register';
+@import 'pages/404_500_errors';
+@import 'pages/invoice';
+@import 'pages/profile';
+@import 'pages/e_commerce';
+@import 'pages/projects';
+
 // Plugins
 // ---------------------------------------------------
-@import "plugins/fullcalendar";
-@import "plugins/select2";
-@import "plugins/bootstrap-slider";
-@import "plugins/icheck-bootstrap";
-@import "plugins/mapael";
-@import "plugins/jqvmap";
-@import "plugins/sweetalert2";
-@import "plugins/toastr";
+@import 'plugins/fullcalendar';
+@import 'plugins/select2';
+@import 'plugins/bootstrap-slider';
+@import 'plugins/icheck-bootstrap';
+@import 'plugins/mapael';
+@import 'plugins/jqvmap';
+@import 'plugins/sweetalert2';
+@import 'plugins/toastr';
+
 // Miscellaneous
 // ---------------------------------------------------
-@import "miscellaneous";
-@import "print";
-@import "text";
-@import "elevation";
+@import 'miscellaneous';
+@import 'print';
+@import 'text';
+@import 'elevation';

build/scss/_alerts.scss

@@ -1,5 +1,5 @@
 /*
- * Component: alert
+ * Component: Alert
  * ----------------
  */
 
@@ -9,8 +9,9 @@
   }
 
   .close {
-    color: #000;
+    color: $black;
     opacity: .2;
+
     &:hover {
       opacity: .5;
     }
@@ -25,21 +26,21 @@
 //Alert Variants
 .alert-success {
   @extend .bg-success;
-  border-color: darken(theme-color("success"), 5%);
+  border-color: darken(theme-color('success'), 5%);
 }
 
 .alert-danger,
 .alert-error {
   @extend .bg-danger;
-  border-color: darken(theme-color("danger"), 5%);
+  border-color: darken(theme-color('danger'), 5%);
 }
 
 .alert-warning {
   @extend .bg-warning;
-  border-color: darken(theme-color("warning"), 5%);
+  border-color: darken(theme-color('warning'), 5%);
 }
 
 .alert-info {
   @extend .bg-info;
-  border-color: darken(theme-color("info"), 5%);
+  border-color: darken(theme-color('info'), 5%);
 }

build/scss/_brand.scss

@@ -1,9 +1,14 @@
+/*
+ * Component: Brand
+ * ----------------
+ */
+
 .brand-link {
   $brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
-  padding: $brand-link-padding-y $sidebar-padding-x;
-  font-size: $navbar-brand-font-size;
   display: block;
+  font-size: $navbar-brand-font-size;
   line-height: $line-height-lg;
+  padding: $brand-link-padding-y $sidebar-padding-x;
   white-space: nowrap;
 
   &:hover {
@@ -11,23 +16,23 @@
     text-decoration: none;
   }
 
-  [class*="sidebar-dark"] & {
-    color: rgba(255,255,255,.8);
+  [class*='sidebar-dark'] & {
     border-bottom: 1px solid lighten($dark, 10%);
+    color: rgba($white, .8);
   }
 
-  [class*="sidebar-light"] & {
-    color: rgba(0,0,0,.8);
+  [class*='sidebar-light'] & {
     border-bottom: 1px solid $gray-300;
+    color: rgba($black, .8);
   }
 }
 
 .brand-image {
-  float:left;
+  float: left;
   line-height: .8;
-  max-height: 34px;
-  width: auto;
   margin-left: .8rem;
   margin-right: .5rem;
   margin-top: -3px;
+  max-height: 34px;
+  width: auto;
 }

build/scss/_buttons.scss

@@ -7,27 +7,28 @@
   // Flat buttons
   &.btn-flat {
     @include border-radius(0);
-    box-shadow: none;
     border-width: 1px;
+    box-shadow: none;
   }
 
   // input file btn
   &.btn-file {
-    position: relative;
     overflow: hidden;
+    position: relative;
+
     > input[type='file'] {
-      position: absolute;
-      top: 0;
-      right: 0;
-      min-width: 100%;
-      min-height: 100%;
+      background: $white;
+      cursor: inherit;
+      display: block;
       font-size: 100px;
-      text-align: right;
+      min-height: 100%;
+      min-width: 100%;
       opacity: 0;
       outline: none;
-      background: white;
-      cursor: inherit;
-      display: block;
+      position: absolute;
+      right: 0;
+      text-align: right;
+      top: 0;
     }
   }
 }
@@ -35,29 +36,31 @@
 // Button color variations
 .btn-default {
   background-color: $button-default-background-color;
-  color: $button-default-color;
   border-color: $button-default-border-color;
+  color: $button-default-color;
+
   &:hover,
   &:active,
   &.hover {
-    color: darken($button-default-color, 10%);
     background-color: darken($button-default-background-color, 5%);
+    color: darken($button-default-color, 10%);
   }
 }
 
 // Application buttons
 .btn-app {
   @include border-radius(3px);
-  position: relative;
-  padding: 15px 5px;
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  color: $gray-600;
+  font-size: 12px;
+  height: 60px;
   margin: 0 0 10px 10px;
   min-width: 80px;
-  height: 60px;
+  padding: 15px 5px;
+  position: relative;
   text-align: center;
-  color: #666;
-  border: 1px solid $button-default-border-color;
-  background-color: $button-default-background-color;
-  font-size: 12px;
+
   // Icons within the btn
   > .fa,
   > .fas,
@@ -65,28 +68,28 @@
   > .fab,
   > .glyphicon,
   > .ion {
-    font-size: 20px;
     display: block;
+    font-size: 20px;
   }
 
   &:hover {
     background: $button-default-background-color;
-    color: $button-default-color;
     border-color: darken($button-default-border-color, 20%);
+    color: $button-default-color;
   }
 
   &:active,
   &:focus {
-    @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
+    @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
   }
 
   // The badge
   > .badge {
-    position: absolute;
-    top: -3px;
-    right: -10px;
     font-size: 10px;
     font-weight: 400;
+    position: absolute;
+    right: -10px;
+    top: -3px;
   }
 }
 

build/scss/_callout.scss

@@ -17,14 +17,15 @@
 
   @extend .mb-3;
   background-color: $white;
+  border-left: 5px solid $gray-200;
   padding: .5rem 1rem .5rem .5rem;
-  border-left: 5px solid #eee;
 
   a {
     color: $white;
     text-decoration: underline;
+
     &:hover {
-      color: #eee;
+      color: $gray-200;
     }
   }
 
@@ -34,15 +35,18 @@
 
   // Themes for different contexts
   &.callout-danger {
-    border-left-color: darken(theme-color("danger"), 10%);
+    border-left-color: darken(theme-color('danger'), 10%);
   }
+
   &.callout-warning {
-    border-left-color: darken(theme-color("warning"), 10%);
+    border-left-color: darken(theme-color('warning'), 10%);
   }
+
   &.callout-info {
-    border-left-color: darken(theme-color("info"), 10%);
+    border-left-color: darken(theme-color('info'), 10%);
   }
+
   &.callout-success {
-    border-left-color: darken(theme-color("success"), 10%);
+    border-left-color: darken(theme-color('success'), 10%);
   }
 }

build/scss/_cards.scss

@@ -1,6 +1,6 @@
 /*
- * Component: Box
- * --------------
+ * Component: Cards
+ * ----------------
  */
 
 .card {
@@ -15,20 +15,20 @@
   }
 
   &.maximized-card {
-    z-index: 9999;
-    width: 100% !important;
     height: 100% !important;
-    max-width: 100% !important;
+    left: 0;
     max-height: 100% !important;
+    max-width: 100% !important;
     position: fixed;
     top: 0;
-    left: 0;
+    width: 100% !important;
+    z-index: 9999;
     
     &.was-collapsed .card-body {
       display: block !important;
     }
 
-    [data-widget="collapse"] {
+    [data-widget='collapse'] {
       display: none;
     }
 
@@ -50,6 +50,7 @@
     > li {
       border-bottom: 1px solid $card-border-color;
       margin: 0;
+
       &:last-of-type {
         border-bottom: none;
       }
@@ -82,14 +83,14 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix();
+  @include clearfix;
 }
 
 // Box header
 .card-header {
-  position: relative;
   background-color: transparent;
   border-bottom: 1px solid $card-border-color;
+  position: relative;
 
   @if $enable-rounded {
     @include border-top-radius($border-radius);
@@ -104,7 +105,7 @@ html.maximized-card {
     right: 1rem;
     top: .5rem;
 
-    [data-toggle="tooltip"] {
+    [data-toggle='tooltip'] {
       position: relative;
     }
   }
@@ -118,10 +119,10 @@ html.maximized-card {
 
 // Box Tools Buttons
 .btn-tool {
-  padding: .25rem .5rem;
-  font-size: $font-size-sm;
   background: transparent;
   color: $gray-500;
+  font-size: $font-size-sm;
+  padding: .25rem .5rem;
 
   .btn-group.show &,
   &:hover {
@@ -140,9 +141,11 @@ html.maximized-card {
   .no-header & {
     // @include border-top-radius($border-radius);
   }
+
   // Tables within the box body
   > .table {
     margin-bottom: 0;
+
     > thead > tr > th,
     > thead > tr > td {
       border-top-width: 0;
@@ -166,6 +169,7 @@ html.maximized-card {
 .chart-legend {
   @extend .list-unstyled;
   margin: 10px 0;
+
   > li {
     @media (max-width: map-get($grid-breakpoints, sm)) {
       float: left;
@@ -176,34 +180,41 @@ html.maximized-card {
 
 // Comment Box
 .card-comments {
-  background: #f7f7f7;
+  background: $gray-100;
+
   .card-comment {
-    @include clearfix();
+    @include clearfix;
+    border-bottom: 1px solid $gray-200;
     padding: 8px 0;
-    border-bottom: 1px solid #eee;
+
     &:last-of-type {
       border-bottom: 0;
     }
+
     &:first-of-type {
       padding-top: 0;
     }
+
     img {
       @extend .img-sm;
       float: left;
     }
   }
+
   .comment-text {
+    color: lighten($gray-700, 20%);
     margin-left: 40px;
-    color: #555;
   }
+
   .username {
-    color: #444;
+    color: $gray-700;
     display: block;
     font-weight: 600;
   }
+
   .text-muted {
-    font-weight: 400;
     font-size: 12px;
+    font-weight: 400;
   }
 }
 
@@ -212,18 +223,20 @@ html.maximized-card {
 
 // Widget: TODO LIST
 .todo-list {
-  margin: 0;
-  padding: 0;
   list-style: none;
+  margin: 0;
   overflow: auto;
+  padding: 0;
+
   // Todo list element
   > li {
     @include border-radius(2px);
-    padding: 10px;
-    background: #f4f4f4;
+    background: $gray-100;
+    border-left: 2px solid $gray-200;
+    color: $gray-700;
     margin-bottom: 2px;
-    border-left: 2px solid #e6e7e8;
-    color: #444;
+    padding: 10px;
+
     &:last-of-type {
       margin-bottom: 0;
     }
@@ -234,42 +247,44 @@ html.maximized-card {
 
     .text {
       display: inline-block;
-      margin-left: 5px;
       font-weight: 600;
+      margin-left: 5px;
     }
 
     // Time labels
     .label {
-      margin-left: 10px;
       font-size: 9px;
+      margin-left: 10px;
     }
 
     // Tools and options box
     .tools {
+      color: theme-color('danger');
       display: none;
       float: right;
-      color: theme-color("danger");
+
       // icons
-      > .fa, 
-      > .fas, 
-      > .far, 
-      > .fab, 
-      > .glyphicon, 
+      > .fa,
+      > .fas,
+      > .far,
+      > .fab,
+      > .glyphicon,
       > .ion {
-        margin-right: 5px;
         cursor: pointer;
+        margin-right: 5px;
       }
-
     }
+
     &:hover .tools {
       display: inline-block;
     }
 
     &.done {
-      color: #999;
+      color: darken($gray-500, 25%);
+
       .text {
-        text-decoration: line-through;
         font-weight: 500;
+        text-decoration: line-through;
       }
 
       .label {
@@ -280,24 +295,28 @@ html.maximized-card {
 
   // Color varaity
   .danger {
-    border-left-color: theme-color("danger");
+    border-left-color: theme-color('danger');
   }
+
   .warning {
-    border-left-color: theme-color("warning");
+    border-left-color: theme-color('warning');
   }
+
   .info {
-    border-left-color: theme-color("info");
+    border-left-color: theme-color('info');
   }
+
   .success {
-    border-left-color: theme-color("success");
+    border-left-color: theme-color('success');
   }
+
   .primary {
-    border-left-color: theme-color("primary");
+    border-left-color: theme-color('primary');
   }
 
   .handle {
-    display: inline-block;
     cursor: move;
+    display: inline-block;
     margin: 0 5px;
   }
 }
@@ -315,6 +334,7 @@ html.maximized-card {
       .card-header {
         background-color: $color;
         border-bottom: 0;
+
         &,
         a {
           color: color-yiq($color);
@@ -332,6 +352,7 @@ html.maximized-card {
   .card-#{$name}:not(.card-outline) {
     .btn-tool {
       color: rgba(color-yiq($color), 0.8);
+
       &:hover {
         color: color-yiq($color);
       }
@@ -345,7 +366,7 @@ html.maximized-card {
       .table th {
         border: none;
       }
-      
+
       table thead tr:first-child th:hover,
       table td.day:hover,
       table td.hour:hover,
@@ -355,7 +376,6 @@ html.maximized-card {
         color: color-yiq($color);
       }
 
-
       table td.active,
       table td.active:hover {
         background: lighten($color, 10%);

build/scss/_carousel.scss

@@ -2,17 +2,24 @@
  * Component: Carousel
  * -------------------
  */
+
 .carousel-control {
   &.left,
   &.right {
     background-image: none;
   }
-  > .fa {
+
+  > .fa,
+  > .fas,
+  > .far,
+  > .fab,
+  > .glyphicon,
+  > .ion {
+    display: inline-block;
     font-size: 40px;
+    margin-top: -20px;
     position: absolute;
     top: 50%;
     z-index: 5;
-    display: inline-block;
-    margin-top: -20px;
   }
 }

build/scss/_control-sidebar.scss

@@ -1,25 +1,26 @@
 /*
- * Component: Control sidebar. By default, this is the right sidebar.
+ * Component: Control Sidebar
+ * --------------------------
  */
-
+ 
 .control-sidebar {
   position: absolute;
   top: $main-header-height;
   z-index: 830;
 
   &,
-  &:before {
-    width: $control-sidebar-width;
-    right: -$control-sidebar-width;
+  &::before {
     bottom: 0;
+    right: -$control-sidebar-width;
+    width: $control-sidebar-width;
     @include transition(right $transition-speed $transition-fn);
   }
 
-  &:before {
-    top: 0;
+  &::before {
+    content: " ";
     display: block;
     position: fixed;
-    content: " ";
+    top: 0;
     z-index: -1;
   }
 }
@@ -29,7 +30,7 @@
   @include media-breakpoint-up(md) {
     .control-sidebar {
       &,
-      &:before {
+      &::before {
         right: 0;
       }
     }
@@ -43,7 +44,7 @@
   @include media-breakpoint-down(md) {
     .control-sidebar {
       &,
-      &:before {
+      &::before {
         right: 0;
       }
     }
@@ -54,7 +55,7 @@
 .control-sidebar-slide-open {
   .control-sidebar {
     &,
-    &:before {
+    &::before {
       right: 0;
     }
   }
@@ -70,7 +71,7 @@
 
   //  Background
   &,
-  &:before {
+  &::before {
     background: $sidebar-dark-bg;
   }
 
@@ -91,8 +92,8 @@
 
   // Tabs
   .nav-tabs {
-    border-bottom: 0;
     background-color: $sidebar-dark-hover-bg;
+    border-bottom: 0;
     margin-bottom: 5px;
 
     .nav-item {
@@ -100,10 +101,10 @@
     }
 
     .nav-link {
-      position: relative;
       border-radius: 0;
-      text-align: center;
       padding: 10px 20px;
+      position: relative;
+      text-align: center;
 
       &,
       &:hover,
@@ -117,8 +118,8 @@
       &:active,
       &:focus,
       &.active {
-        border-left-color: transparent;
         border-bottom-color: transparent;
+        border-left-color: transparent;
         border-top-color: transparent;
         color: $sidebar-dark-hover-color;
       }
@@ -140,7 +141,7 @@
 
   //  Background
   &,
-  &:before {
+  &::before {
     background: $sidebar-light-bg;
     border-left: 1px solid $gray-500;
   }

build/scss/_direct-chat.scss

@@ -2,12 +2,14 @@
  * Component: Direct Chat
  * ----------------------
  */
+ 
 .direct-chat {
   .card-body {
-    position: relative;
     overflow-x: hidden;
     padding: 0;
+    position: relative;
   }
+
   &.chat-pane-open {
     .direct-chat-contacts {
       @include translate(0, 0);
@@ -17,9 +19,9 @@
 
 .direct-chat-messages {
   @include translate(0, 0);
-  padding: 10px;
   height: 250px;
   overflow: auto;
+  padding: 10px;
 }
 
 .direct-chat-msg,
@@ -28,7 +30,7 @@
 }
 
 .direct-chat-msg {
-  @include clearfix();
+  @include clearfix;
   margin-bottom: 10px;
 }
 
@@ -42,44 +44,47 @@
     @include border-radius($border-radius-lg);
   }
 
-  position: relative;
-  padding: 5px 10px;
   background: $direct-chat-default-msg-bg;
   border: 1px solid $direct-chat-default-msg-border-color;
-  margin: 5px 0 0 50px;
   color: $direct-chat-default-font-color;
+  margin: 5px 0 0 50px;
+  padding: 5px 10px;
+  position: relative;
 
   //Create the arrow
-  &:after,
-  &:before {
-    position: absolute;
-    right: 100%;
-    top: 15px;
+  &::after,
+  &::before {
     border: solid transparent;
     border-right-color: $direct-chat-default-msg-border-color;
     content: ' ';
     height: 0;
-    width: 0;
     pointer-events: none;
+    position: absolute;
+    right: 100%;
+    top: 15px;
+    width: 0;
   }
 
-  &:after {
+  &::after {
     border-width: 5px;
     margin-top: -5px;
   }
-  &:before {
+
+  &::before {
     border-width: 6px;
     margin-top: -6px;
   }
+
   .right & {
-    margin-right: 50px;
     margin-left: 0;
-    &:after,
-    &:before {
-      right: auto;
-      left: 100%;
-      border-right-color: transparent;
+    margin-right: 50px;
+
+    &::after,
+    &::before {
       border-left-color: $direct-chat-default-msg-border-color;
+      border-right-color: transparent;
+      left: 100%;
+      right: auto;
     }
   }
 }
@@ -87,8 +92,9 @@
 .direct-chat-img {
   @include border-radius(50%);
   float: left;
-  width: 40px;
   height: 40px;
+  width: 40px;
+
   .right & {
     float: right;
   }
@@ -96,8 +102,8 @@
 
 .direct-chat-info {
   display: block;
-  margin-bottom: 2px;
   font-size: $font-size-sm;
+  margin-bottom: 2px;
 }
 
 .direct-chat-name {
@@ -105,7 +111,7 @@
 }
 
 .direct-chat-timestamp {
-  color: #999;
+  color: darken($gray-500, 25%);
 }
 
 //Direct chat contacts pane
@@ -117,24 +123,26 @@
 
 .direct-chat-contacts {
   @include translate(101%, 0);
-  position: absolute;
-  top: 0;
+  background: $gray-900;
   bottom: 0;
-  height: 250px;
-  width: 100%;
-  background: #222d32;
   color: $white;
+  height: 250px;
   overflow: auto;
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
 
 //Contacts list -- for displaying contacts in direct chat contacts pane
 .contacts-list {
   @extend .list-unstyled;
+
   > li {
-    @include clearfix();
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    padding: 10px;
+    @include clearfix;
+    border-bottom: 1px solid rgba($black, 0.2);
     margin: 0;
+    padding: 10px;
+
     &:last-of-type {
       border-bottom: none;
     }
@@ -143,13 +151,13 @@
 
 .contacts-list-img {
   @include border-radius(50%);
-  width: 40px;
   float: left;
+  width: 40px;
 }
 
 .contacts-list-info {
-  margin-left: 45px;
   color: $white;
+  margin-left: 45px;
 }
 
 .contacts-list-name,
@@ -166,31 +174,31 @@
 }
 
 .contacts-list-date {
-  color: #aaa;
+  color: $gray-500;
   font-weight: normal;
 }
 
 .contacts-list-msg {
-  color: #999;
+  color: darken($gray-500, 25%);
 }
 
 //Direct Chat Variants
 .direct-chat-danger {
-  @include direct-chat-variant(theme-color("danger"));
+  @include direct-chat-variant(theme-color('danger'));
 }
 
 .direct-chat-primary {
-  @include direct-chat-variant(theme-color("primary"));
+  @include direct-chat-variant(theme-color('primary'));
 }
 
 .direct-chat-warning {
-  @include direct-chat-variant(theme-color("warning"));
+  @include direct-chat-variant(theme-color('warning'));
 }
 
 .direct-chat-info {
-  @include direct-chat-variant(theme-color("info"));
+  @include direct-chat-variant(theme-color('info'));
 }
 
 .direct-chat-success {
-  @include direct-chat-variant(theme-color("success"));
+  @include direct-chat-variant(theme-color('success'));
 }

build/scss/_dropdown.scss

@@ -1,6 +1,6 @@
 /*
- * Component: Dropdown menus
- * -------------------------
+ * Component: Dropdown
+ * -------------------
  */
 
 // General Dropdown Rules
@@ -20,35 +20,38 @@
 
 // Dropdown Sizes
 .dropdown-menu-lg {
-  min-width: 280px;
   max-width: 300px;
+  min-width: 280px;
   padding: 0;
+
   .dropdown-divider {
     margin: 0;
   }
+
   .dropdown-item {
     padding: $dropdown-padding-y $dropdown-item-padding-x;
   }
+
   p {
-    white-space: normal;
     margin: 0;
+    white-space: normal;
   }
 }
 
 // Dropdown header and footer
 .dropdown-footer,
 .dropdown-header {
-  text-align: center;
   display: block;
-  padding: .5rem $dropdown-item-padding-x;
   font-size: $font-size-sm;
+  padding: .5rem $dropdown-item-padding-x;
+  text-align: center;
 }
 
 /* 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 {
-  backface-visibility: visible !important;
   @include animation(flipInX .7s both);
+  backface-visibility: visible !important;
 }
 
 @keyframes flipInX {
@@ -178,7 +181,7 @@
       padding: 15px;
       border-bottom: 1px solid #f4f4f4;
       border-top: 1px solid #dddddd;
-      @include clearfix();
+      @include clearfix;
       a {
         color: #444 !important;
         @include media-breakpoint-up(sm) {
@@ -192,7 +195,7 @@
     > .user-footer {
       background-color: #f9f9f9;
       padding: 10px;
-      @include clearfix();
+      @include clearfix;
       .btn-default {
         color: #666666;
         &:hover {
@@ -217,4 +220,4 @@
       line-height: 10px;
     }
   }
-}
+}

build/scss/_elevation.scss

@@ -1,23 +1,28 @@
+/*
+ * Component: Elevation
+ * --------------------
+ */
+
 .elevation-0 {
   box-shadow: none;
 }
 
 .elevation-1 {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24);
 }
 
 .elevation-2 {
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23);
 }
 
 .elevation-3 {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+  box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23);
 }
 
 .elevation-4 {
-  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22);
 }
 
 .elevation-5 {
-  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
+  box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22);
 }

build/scss/_forms.scss

@@ -1,28 +1,31 @@
 /*
- * Component: Form
- * ---------------
+ * Component: Forms
+ * ----------------
  */
+ 
 .form-group {
   &.has-icon {
     position: relative;
+
     .form-control {
       padding-right: 35px;
     }
+
     .form-icon {
+      background-color: transparent;
+      border: 0;
       cursor: pointer;
+      font-size: 1rem;
+      // margin-top: -3px;
+      padding: $input-btn-padding-y $input-btn-padding-x;
       position: absolute;
       right: 3px;
       top: 0;
-      padding: $input-btn-padding-y $input-btn-padding-x;
-      // margin-top: -3px;
-      border: 0;
-      background-color: transparent;
-      font-size: 1rem;
     }
   }
 }
 
-/* button groups */
+// Button groups
 .btn-group-vertical {
   .btn {
     &.btn-flat:first-of-type, &.btn-flat:last-of-type {
@@ -31,44 +34,66 @@
   }
 }
 
-/* Support Font Awesome icons in form-control */
+// Support icons in form-control
 .form-control-feedback {
-  &.fa, 
-  &.fas, 
-  &.far, 
-  &.fab {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
     line-height: $input-height;
   }
 }
 
-.input-lg + .form-control-feedback.fa,
-.input-group-lg + .form-control-feedback.fa,
-.form-group-lg .form-control + .form-control-feedback.fa,
-.input-lg + .form-control-feedback.fas,
-.input-group-lg + .form-control-feedback.fas,
-.form-group-lg .form-control + .form-control-feedback.fas,
-.input-lg + .form-control-feedback.far,
-.input-group-lg + .form-control-feedback.far,
-.form-group-lg .form-control + .form-control-feedback.far,
-.input-lg + .form-control-feedback.fab,
-.input-group-lg + .form-control-feedback.fab,
-.form-group-lg .form-control + .form-control-feedback.fab {
-  line-height: $input-height-lg;
+.input-lg  + .form-control-feedback,
+.input-group-lg + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height-lg;
+  }
+}
+
+.form-group-lg {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.glyphicon,
+    &.ion {
+      line-height: $input-height-lg;
+    }
+  }
+}
+
+.input-sm  + .form-control-feedback,
+.input-group-sm + .form-control-feedback {
+  &.fa,
+  &.fas,
+  &.far,
+  &.fab,
+  &.glyphicon,
+  &.ion {
+    line-height: $input-height-sm;
+  }
 }
 
-.input-sm + .form-control-feedback.fa,
-.input-group-sm + .form-control-feedback.fa,
-.form-group-sm .form-control + .form-control-feedback.fa,
-.input-sm + .form-control-feedback.fas,
-.input-group-sm + .form-control-feedback.fas,
-.form-group-sm .form-control + .form-control-feedback.fas,
-.input-sm + .form-control-feedback.far,
-.input-group-sm + .form-control-feedback.far,
-.form-group-sm .form-control + .form-control-feedback.far,
-.input-sm + .form-control-feedback.fab,
-.input-group-sm + .form-control-feedback.fab,
-.form-group-sm .form-control + .form-control-feedback.fab {
-  line-height: $input-height-sm;
+.form-group-sm {
+  .form-control + .form-control-feedback {
+    &.fa,
+    &.fas,
+    &.far,
+    &.fab,
+    &.glyphicon,
+    &.ion {
+      line-height: $input-height-sm;
+    }
+  }
 }
 
 label:not(.form-check-label, .custom-file-label) {
@@ -76,26 +101,26 @@ label:not(.form-check-label, .custom-file-label) {
 }
 
 .warning-feedback {
-  display: none;
-  width: 100%;
-  margin-top: $form-feedback-margin-top;
   @include font-size($form-feedback-font-size);
   color: theme-color('warning');
+  display: none;
+  margin-top: $form-feedback-margin-top;
+  width: 100%;
 }
 
 .warning-tooltip {
-  position: absolute;
-  top: 100%;
-  z-index: 5;
+  @include border-radius($form-feedback-tooltip-border-radius);
+  @include font-size($form-feedback-tooltip-font-size);
+  background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
+  color: color-yiq(theme-color('warning'));
   display: none;
+  line-height: $form-feedback-tooltip-line-height;
+  margin-top: .1rem;
   max-width: 100%; // Contain to parent when possible
   padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
-  margin-top: .1rem;
-  @include font-size($form-feedback-tooltip-font-size);
-  line-height: $form-feedback-tooltip-line-height;
-  color: color-yiq(theme-color('warning'));
-  background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
-  @include border-radius($form-feedback-tooltip-border-radius);
+  position: absolute;
+  top: 100%;
+  z-index: 5;
 }
 
 .form-control {
@@ -176,36 +201,34 @@ textarea.form-control {
   }
 }
 
-.custom-control-input {
-  &.is-warning {
-    ~ .custom-control-label {
-      color: theme-color('warning');
+.custom-control-input.is-warning {
+  ~ .custom-control-label {
+    color: theme-color('warning');
 
-      &::before {
-        border-color: theme-color('warning');
-      }
+    &::before {
+      border-color: theme-color('warning');
     }
+  }
 
-    ~ .warning-feedback,
-    ~ .warning-tooltip {
-      display: block;
-    }
+  ~ .warning-feedback,
+  ~ .warning-tooltip {
+    display: block;
+  }
 
-    &:checked {
-      ~ .custom-control-label::before {
-        border-color: lighten(theme-color('warning'), 10%);
-        @include gradient-bg(lighten(theme-color('warning'), 10%));
-      }
+  &:checked {
+    ~ .custom-control-label::before {
+      @include gradient-bg(lighten(theme-color('warning'), 10%));
+      border-color: lighten(theme-color('warning'), 10%);
     }
+  }
 
-    &:focus {
-      ~ .custom-control-label::before {
-        box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
-      }
+  &:focus {
+    ~ .custom-control-label::before {
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+    }
 
-      &:not(:checked) ~ .custom-control-label::before {
-        border-color: theme-color('warning');
-      }
+    &:not(:checked) ~ .custom-control-label::before {
+      border-color: theme-color('warning');
     }
   }
 }
@@ -234,20 +257,23 @@ textarea.form-control {
 // custom switch color variations
 .custom-switch {
   @each $name, $color in $theme-colors {
-    &.custom-switch-off-#{$name} { 
+    &.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-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%);
       }
@@ -255,31 +281,34 @@ textarea.form-control {
   }
 
   @each $name, $color in $colors {
-    &.custom-switch-off-#{$name} { 
+    &.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-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 color variations
 .custom-range {
   @each $name, $color in $theme-colors {
-    &.custom-range-#{$name} { 
+    &.custom-range-#{$name} {
       &:focus {
         &::-webkit-slider-thumb {
           background-color: lighten($color, 35%);
@@ -293,7 +322,7 @@ textarea.form-control {
           background-color: lighten($color, 35%);
         }
       }
-      
+
       &::-webkit-slider-thumb {
         background-color: $color;
       }
@@ -323,7 +352,7 @@ textarea.form-control {
           background-color: lighten($color, 35%);
         }
       }
-      
+
       &::-webkit-slider-thumb {
         background-color: $color;
       }
@@ -336,7 +365,5 @@ textarea.form-control {
         background-color: $color;
       }
     }
-  }  
+  }
 }
-
-

build/scss/_info-box.scss

@@ -2,20 +2,22 @@
  * Component: Info Box
  * -------------------
  */
+ 
 .info-box {
   @extend .d-flex;
   @extend .mb-3;
   @include box-shadow($card-shadow);
   @include border-radius($border-radius);
 
-  padding: .5rem;
-  min-height: 80px;
   background: $white;
+  min-height: 80px;
+  padding: .5rem;
 
   .progress {
-    background-color: rgba(0, 0, 0, 0.125);
-    margin: 5px 0;
+    background-color: rgba($black, 0.125);
     height: 2px;
+    margin: 5px 0;
+
     .progress-bar {
       background-color: $white;
     }
@@ -32,9 +34,9 @@
   }
 
   display: block;
-  width: 70px;
-  text-align: center;
   font-size: 30px;
+  text-align: center;
+  width: 70px;
 
   > img {
     max-width: 100%;
@@ -42,8 +44,8 @@
 }
 
 .info-box-content {
-  padding: 5px 10px;
   flex: 1;
+  padding: 5px 10px;
 }
 
 .info-box-number {
@@ -54,18 +56,20 @@
 .progress-description,
 .info-box-text {
   display: block;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 @each $name, $color in $theme-colors {
-  .info-box.bg-#{$name},
-  .info-box.bg-gradient-#{$name} {
-    color: color-yiq($color);
+  .info-box {
+    .bg-#{$name},
+    .bg-gradient-#{$name} {
+      color: color-yiq($color);
 
-    .progress-bar {
-      background-color: color-yiq($color);
+      .progress-bar {
+        background-color: color-yiq($color);
+      }
     }
   }
 }

build/scss/_labels.scss

@@ -1,10 +1,11 @@
 /*
- * Component: Label
- * ----------------
+ * Component: Labels
+ * -----------------
  */
+
 .label-default {
   background-color: $gray-500;
-  color: #444;
+  color: $gray-700;
 }
 
 .label-danger {

build/scss/_layout.scss

@@ -1,7 +1,8 @@
 /*
- * Core: General Layout Style
- * -------------------------
+ * Core: Layout
+ * ------------
  */
+
 html,
 body,
 .wrapper {
@@ -18,10 +19,10 @@ body,
   }
 
   .layout-boxed & {
-    @include box-shadow(0 0 10px rgba(0, 0, 0, .3));
+    @include box-shadow(0 0 10px rgba($black, .3));
 
     &,
-    &:before {
+    &::before {
       margin: 0 auto;
       max-width: $boxed-layout-max-width;
     }
@@ -37,21 +38,21 @@ body,
     }
 
     .main-header {
+      left: 0;
       position: fixed;
-      z-index: $zindex-main-sidebar - 1;
-      top: 0;
       right: 0;
-      left: 0;
+      top: 0;
+      z-index: $zindex-main-sidebar - 1;
     }
   }
 
   .layout-footer-fixed & {
     .main-footer {
-      position: fixed;
-      z-index: $zindex-main-sidebar - 1;
       bottom: 0;
-      right: 0;
       left: 0;
+      position: fixed;
+      right: 0;
+      z-index: $zindex-main-sidebar - 1;
     }
   }
 
@@ -69,7 +70,7 @@ body,
       height: 33px;
     }
 
-    & .main-sidebar{
+    & .main-sidebar {
       display: none;
     }
 
@@ -97,7 +98,7 @@ body,
 
   @include media-breakpoint-down(sm) {
     &,
-    &:before {
+    &::before {
       margin-left: 0;
     }
   }
@@ -113,7 +114,7 @@ body,
 
 .main-sidebar {
   &,
-  &:before {
+  &::before {
     $local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
     @include transition($local-sidebar-transition);
     width: $sidebar-width;
@@ -121,21 +122,21 @@ body,
 
   .sidebar-collapse & {
     &,
-    &:before {
+    &::before {
       margin-left: -$sidebar-width;
     }
   }
 
   @include media-breakpoint-down(sm) {
     &,
-    &:before {
-      box-shadow: none!important;
+    &::before {
+      box-shadow: none !important;
       margin-left: -$sidebar-width;
     }
 
     .sidebar-open & {
       &,
-      &:before {
+      &::before {
         margin-left: 0;
       }
     }
@@ -144,10 +145,10 @@ body,
 
 :not(.layout-fixed) {
   .main-sidebar {
-    position: absolute;
-    top: 0;
     height: inherit;
     min-height: 100%;
+    position: absolute;
+    top: 0;
   }
 }
 
@@ -155,9 +156,9 @@ body,
 
   &.sidebar-collapse {
     .brand-link {
+      height: 57px;
       transition: width $transition-speed $transition-fn;
       width: $sidebar-mini-width;
-      height: 57px;
     }
 
     .main-sidebar:hover {
@@ -168,18 +169,17 @@ body,
     }
   }
 
-
   .sidebar {
     margin-top: 57px;
   }
 
   .brand-link {
-    transition: width $transition-speed $transition-fn;
-    position: fixed;
     overflow: hidden;
+    position: fixed;
     top: 0;
-    z-index: $zindex-main-sidebar + 1;
+    transition: width $transition-speed $transition-fn;
     width: $sidebar-width;
+    z-index: $zindex-main-sidebar + 1;
   }
 
   // Sidebar variants
@@ -196,21 +196,21 @@ body,
 
 .layout-fixed {
   .main-sidebar {
+    bottom: 0;
+    float: none;
     height: 100vh;
+    left: 0;
     position: fixed;
     top: 0;
-    left: 0;
-    bottom: 0;
-    float: none;
-  } 
+  }
 }
 
 
 .main-footer {
-  padding: $main-footer-padding;
-  color: #555;
-  border-top: $main-footer-border-top;
   background: $main-footer-bg;
+  border-top: $main-footer-border-top;
+  color: lighten($gray-700, 25%);
+  padding: $main-footer-padding;
 }
 
 .content-header {
@@ -220,11 +220,12 @@ body,
     font-size: 1.8rem;
     margin: 0;
   }
+
   .breadcrumb {
-    margin-bottom: 0;
-    padding: 0;
     background: transparent;
     line-height: 1.8rem;
+    margin-bottom: 0;
+    padding: 0;
   }
 }
 
@@ -232,6 +233,6 @@ body,
   .content-wrapper,
   .main-header,
   .main-footer {
-    transition: none!important;
+    transition: none !important;
   }
 }

build/scss/_main-header.scss

@@ -2,26 +2,30 @@
  * Component: Main Header
  * ----------------------
  */
+ 
 .main-header {
   z-index: $zindex-main-header;
 
-  .navbar-nav .nav-item {
-    margin: 0;
-  }
-
   .nav-link {
-    position: relative;
     height: $nav-link-height;
+    position: relative;
   }
 
-  .navbar-nav[class*="-right"] {
-    .dropdown-menu {
-      margin-top: -3px;
-      right: 0;
-      left: auto;
-      @media (max-width: breakpoint-max(xs)) {
-        left: 0;
-        right: auto;
+  .navbar-nav {
+    .nav-item {
+      margin: 0;
+    }
+
+    &[class*='-right'] {
+      .dropdown-menu {
+        left: auto;
+        margin-top: -3px;
+        right: 0;
+
+        @media (max-width: breakpoint-max(xs)) {
+          left: 0;
+          right: auto;
+        }
       }
     }
   }
@@ -35,21 +39,22 @@
 
 // Navbar badge
 .navbar-badge {
-  position: absolute;
-  top: 9px;
-  right: 5px;
   font-size: .6rem;
   font-weight: 300;
   padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 9px;
 }
 
 .btn-navbar {
-  border-left-width: 0;
   background-color: transparent;
+  border-left-width: 0;
 }
 
 .form-control-navbar {
   border-right-width: 0;
+
   & + .input-group-append {
     margin-left: 0;
   }
@@ -89,8 +94,8 @@
     &:focus {
       &,
       & + .input-group-append .btn-navbar {
-        border: $main-header-dark-form-control-focused-border !important;
         background-color: $main-header-dark-form-control-focused-bg;
+        border: $main-header-dark-form-control-focused-border !important;
         color: $main-header-dark-form-control-focused-color;
       }
     }
@@ -126,8 +131,8 @@
     &:focus {
       &,
       & + .input-group-append .btn-navbar {
-        border: $main-header-light-form-control-focused-border !important;
         background-color: $main-header-light-form-control-focused-bg;
+        border: $main-header-light-form-control-focused-border !important;
         color: $main-header-light-form-control-focused-color;
       }
     }

build/scss/_main-sidebar.scss

@@ -1,32 +1,32 @@
 /**
- * Component: Sidebar
- * ------------------
+ * Component: Main Sidebar
+ * -----------------------
  */
 
 .main-sidebar {
-  z-index: $zindex-main-sidebar;
   height: 100vh;
   overflow-y: hidden;
+  z-index: $zindex-main-sidebar;
 }
 
 .sidebar {
+  height: calc(100% - 4rem);
+  overflow-y: auto;
   padding-bottom: $sidebar-padding-y;
-  padding-top: $sidebar-padding-y;
   padding-left: $sidebar-padding-x;
   padding-right: $sidebar-padding-x;
-  overflow-y: auto;
-  height: calc(100% - 4rem);
+  padding-top: $sidebar-padding-y;
 }
 
 // Sidebar user panel
 .user-panel {
   position: relative;
 
-  [class*="sidebar-dark"] & {
+  [class*='sidebar-dark'] & {
     border-bottom: 1px solid lighten($dark, 12%);
   }
 
-  [class*="sidebar-light"] & {
+  [class*='sidebar-light'] & {
     border-bottom: 1px solid $gray-300;
   }
 
@@ -37,13 +37,13 @@
   }
 
   .image {
-    padding-left: $nav-link-padding-x - .2;
     display: inline-block;
+    padding-left: $nav-link-padding-x - .2;
   }
 
   img {
-    width: $sidebar-user-image-width;
     height: auto;
+    width: $sidebar-user-image-width;
   }
 
   .info {
@@ -63,6 +63,7 @@
   .nav-item {
     > .nav-link {
       margin-bottom: 0.2rem;
+
       .right {
         @include transition(transform $transition-fn $transition-speed);
       }
@@ -104,7 +105,9 @@
       &.fa,
       &.fas,
       &.far,
-      &.fab {
+      &.fab,
+      &.glyphicon,
+      &.ion {
         font-size: 1.1rem;
       }
     }
@@ -151,13 +154,13 @@
 }
 
 #sidebar-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
+  background-color: rgba($black, 0.1);
   bottom: 0;
   display: none;
-  background-color: rgba(0, 0, 0, 0.1);
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
   z-index: $zindex-main-sidebar - 1;
 
   @include media-breakpoint-down(md) {

build/scss/_miscellaneous.scss

@@ -1,10 +1,7 @@
 /*
- * General: Miscellaneous
- * ----------------------
+ * Misc: Miscellaneous
+ * -------------------
  */
-a.text-muted:hover {
-  color: theme-color(primary) !important;
-}
 
 .border-transparent {
   border-color: transparent !important;
@@ -15,15 +12,18 @@ a.text-muted:hover {
   display: block;
   margin: 10px 0;
   text-align: center;
+
   &.margin-bottom {
     margin-bottom: 25px;
   }
+
   > .description-header {
+    font-size: 16px;
+    font-weight: 600;
     margin: 0;
     padding: 0;
-    font-weight: 600;
-    font-size: 16px;
   }
+
   > .description-text {
     text-transform: uppercase;
   }
@@ -51,8 +51,8 @@ a.text-muted:hover {
 }
 
 .bg-gray {
-  color: #000;
   background-color: $gray-500;
+  color: #000;
 }
 
 .bg-gray-light {
@@ -86,16 +86,16 @@ a.text-muted:hover {
       }
 
       &:hover {
-        color: color-yiq(darken($color, 7.5%));
         @include bg-gradient-variant('&', darken($color, 7.5%));
         border-color: darken($color, 10%);
+        color: color-yiq(darken($color, 7.5%));
       }
 
       &:active,
       &.active {
-        color: color-yiq(darken($color, 10%));
         @include bg-gradient-variant('&', darken($color, 10%));
         border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
       }
     }
   }
@@ -117,29 +117,30 @@ a.text-muted:hover {
       }
 
       &:hover {
-        color: color-yiq(darken($color, 7.5%));
         @include bg-gradient-variant('&', darken($color, 7.5%));
         border-color: darken($color, 10%);
+        color: color-yiq(darken($color, 7.5%));
       }
 
       &:active,
       &.active {
-        color: color-yiq(darken($color, 10%));
         @include bg-gradient-variant('&', darken($color, 10%));
         border-color: darken($color, 12.5%);
+        color: color-yiq(darken($color, 10%));
       }
     }
   }
 }
 
 // Backgrund Color Disabled
-[class^="bg-"].disabled {
+[class^='bg-'].disabled {
   opacity: .65;
 }
 
 // Link Styles
 .link-muted {
   color: darken($gray-500, 30%);
+
   &:hover,
   &:focus {
     color: darken($gray-500, 40%);
@@ -147,10 +148,11 @@ a.text-muted:hover {
 }
 
 .link-black {
-  color: #666;
+  color: $gray-600;
+
   &:hover,
   &:focus {
-    color: #999;
+    color: lighten($gray-500, 20%);
   }
 }
 
@@ -176,9 +178,9 @@ a.text-muted:hover {
 
 // _fix for sparkline tooltip
 .jqstooltip {
+  height: auto !important;
   padding: 5px !important;
   width: auto !important;
-  height: auto !important;
 }
 
 // Description Block Extension
@@ -198,67 +200,75 @@ a.text-muted:hover {
 .list-group-unbordered {
   > .list-group-item {
     border-left: 0;
-    border-right: 0;
     border-radius: 0;
+    border-right: 0;
     padding-left: 0;
     padding-right: 0;
   }
 }
 
 .list-header {
+  color: $gray-600;
   font-size: 15px;
-  padding: 10px 4px;
   font-weight: bold;
-  color: #666;
+  padding: 10px 4px;
 }
 
 .list-seperator {
-  height: 1px;
   background: $card-border-color;
+  height: 1px;
   margin: 15px 0 9px 0;
 }
 
 .list-link {
   > a {
+    color: $gray-600;
     padding: 4px;
-    color: #777;
+
     &:hover {
-      color: #222;
+      color: $gray-900;
     }
   }
 }
 
 // User block
 .user-block {
-  @include clearfix();
+  @include clearfix;
+
   img {
-    width: 40px;
-    height: 40px;
     float: left;
+    height: 40px;
+    width: 40px;
   }
+
   .username,
   .description,
   .comment {
     display: block;
     margin-left: 50px;
   }
+
   .username {
     font-size: 16px;
     font-weight: 600;
   }
+
   .description {
     color: #999;
     font-size: 13px;
   }
+
   &.user-block-sm {
     img {
       @extend .img-sm;
     }
+
     .username,
     .description,
     .comment {
       margin-left: 40px;
     }
+
     .username {
       font-size: 14px;
     }
@@ -273,8 +283,9 @@ a.text-muted:hover {
 }
 
 .img-sm {
-  width: 30px !important;
   height: 30px !important;
+  width: 30px !important;
+
   + .img-push {
     margin-left: 40px;
   }
@@ -283,6 +294,7 @@ a.text-muted:hover {
 .img-md {
   width: 60px;
   height: 60px;
+
   + .img-push {
     margin-left: 70px;
   }
@@ -291,6 +303,7 @@ a.text-muted:hover {
 .img-lg {
   width: 100px;
   height: 100px;
+
   + .img-push {
     margin-left: 110px;
   }
@@ -344,42 +357,45 @@ a.text-muted:hover {
 }
 
 .size-32 {
-  width: 32px;
   height: 32px;
   line-height: 32px;
+  width: 32px;
 }
 
 .size-40 {
-  width: 40px;
   height: 40px;
   line-height: 40px;
+  width: 40px;
 }
 
 .size-50 {
-  width: 50px;
   height: 50px;
   line-height: 50px;
+  width: 50px;
 }
 
 // General attachemnt block
 .attachment-block {
+  background: $gray-100;
   border: 1px solid $card-border-color;
-  padding: 5px;
   margin-bottom: 10px;
-  background: #f7f7f7;
+  padding: 5px;
 
   .attachment-img {
-    max-width: 100px;
-    max-height: 100px;
-    height: auto;
     float: left;
+    height: auto;
+    max-height: 100px;
+    max-width: 100px;
   }
+
   .attachment-pushed {
     margin-left: 110px;
   }
+
   .attachment-heading {
     margin: 0;
   }
+
   .attachment-text {
     color: #555;
   }
@@ -401,15 +417,15 @@ a.text-muted:hover {
 }
 
 .sort-highlight {
-  background: #f4f4f4;
-  border: 1px dashed #ddd;
+  background: $gray-100;
+  border: 1px dashed $gray-300;
   margin-bottom: 10px;
 }
 
 // Charts
 .chart {
-  position: relative;
   overflow: hidden;
+  position: relative;
 }
 
 .flex-1 {
@@ -425,33 +441,39 @@ a.text-muted:hover {
   // Box overlay for LOADING STATE effect
   > .overlay,
   > .loading-img {
+    height: 100%;
+    left: 0;
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
-    height: 100%;
   }
 
   .overlay {
+    @include border-radius($border-radius);
+    align-items: center;
+    background: rgba($white, 0.7);
     display: flex;
     justify-content: center;
-    align-items: center;
     z-index: 50;
-    background: rgba(255, 255, 255, 0.7);
-    @include border-radius($border-radius);
-    > .fa, 
+
+    > .fa,
     > .fas,
     > .far,
-    > .fab {
+    > .fab,
+    > .glyphicon,
+    > .ion {
       color: $gray-800;
     }
 
     &.dark {
-      background: rgba(0, 0, 0, 0.5);
-      > .fa, 
+      background: rgba($black, 0.5);
+
+      > .fa,
       > .fas,
       > .far,
-      > .fab {
+      > .fab,
+      > .glyphicon,
+      > .ion {
         color: $gray-400;
       }
     }

build/scss/_mixins.scss

@@ -1,5 +1,7 @@
-// AdminLTE mixins
-// ===============
+/*
+ * General: Mixins
+ * ---------------
+ */
 
 // Changes the color and the hovering properties of the navbar
 @mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
@@ -25,8 +27,8 @@
     color: $font-color;
     &:hover,
     &:focus {
-      color: $hover-color;
       background: $hover-bg;
+      color: $hover-color;
     }
   }
 }
@@ -34,8 +36,8 @@
 // Logo color variation
 @mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
   background-color: $bg-color;
-  color: $color;
   border-bottom: $border-bottom-width solid $border-bottom-color;
+  color: $color;
 
   &:hover,
   &:focus {
@@ -46,10 +48,12 @@
 // Box solid color variantion creator
 @mixin box-solid-variant($color, $text-color: #fff) {
   border: 1px solid $color;
+
   > .card-header {
-    color: $text-color;
     background: $color;
     background-color: $color;
+    color: $text-color;
+
     a,
     .btn {
       color: $text-color;
@@ -63,16 +67,15 @@
     background: $bg-color;
     border-color: $bg-color;
     color: color-yiq($bg-color);
+
     &:after,
-    &:before {
+    &::before {
       border-left-color: $bg-color;
     }
   }
 }
 
 @mixin translate($x, $y) {
-  -webkit-transform: translate($x, $y);
-  -ms-transform: translate($x, $y); // IE9 only
   transform: translate($x, $y);
 }
 
@@ -118,19 +121,20 @@
     }
 
     .status {
-      color: $sidebar-dark-color;
       background: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-color;
+
       &:hover,
       &:focus,
       &:active {
-        color: $sidebar-dark-hover-color;
         background: darken($sidebar-dark-hover-bg, 3%);
+        color: $sidebar-dark-hover-color;
       }
     }
 
     .dropdown-menu {
-      border-color: darken($sidebar-dark-hover-bg, 5%);
       @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-dark-hover-bg, 5%);
     }
 
     .dropdown-item {
@@ -152,13 +156,14 @@
     &.menu-open > .nav-link,
     &:hover > .nav-link,
     & > .nav-link:focus  {
-      color: $sidebar-dark-hover-color;
       background-color: $sidebar-dark-hover-bg;
+      color: $sidebar-dark-hover-color;
     }
 
     > .nav-link.active {
-      color: $sidebar-dark-hover-color;
       background-color: $link-hover-border-color;
+      color: $sidebar-dark-hover-color;
+
       @if $enable-shadows {
         @extend .elevation-1;
       }
@@ -172,13 +177,14 @@
 
   // Section Heading
   .nav-header {
-    color: lighten($sidebar-dark-color, 5%);
     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;
@@ -193,8 +199,8 @@
 
         &:hover,
         &:focus {
+          background-color: $sidebar-dark-submenu-hover-bg;
           color: $sidebar-dark-submenu-hover-color;
-          background-color: $sidebar-dark-submenu-hover-bg
         }
       }
 
@@ -202,8 +208,8 @@
         &,
         &:hover,
         &:focus {
-          color: $sidebar-dark-submenu-active-color;
           background-color: $sidebar-dark-submenu-active-bg;
+          color: $sidebar-dark-submenu-active-color;
         }
       }
     }
@@ -222,19 +228,20 @@
     }
 
     .status {
-      color: $sidebar-light-color;
       background: $sidebar-light-hover-bg;
+      color: $sidebar-light-color;
+
       &:hover,
       &:focus,
       &:active {
-        color: $sidebar-light-hover-color;
         background: darken($sidebar-light-hover-bg, 3%);
+        color: $sidebar-light-hover-color;
       }
     }
 
     .dropdown-menu {
-      border-color: darken($sidebar-light-hover-bg, 5%);
       @include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
+      border-color: darken($sidebar-light-hover-bg, 5%);
     }
 
     .dropdown-item {
@@ -256,13 +263,14 @@
     // Hover and active states
     &.menu-open > .nav-link,
     &:hover > .nav-link {
-      color: $sidebar-light-hover-color;
       background-color: $sidebar-light-hover-bg;
+      color: $sidebar-light-hover-color;
     }
 
     > .nav-link.active {
-      color: $sidebar-light-active-color;
       background-color: $link-hover-border-color;
+      color: $sidebar-light-active-color;
+      
       @if $enable-shadows {
         @extend .elevation-1;
       }
@@ -276,13 +284,14 @@
 
   // Section Heading
   .nav-header {
-    color: darken($sidebar-light-color, 5%);
     background: inherit;
+    color: darken($sidebar-light-color, 5%);
   }
 
   // All links within the sidebar menu
   .sidebar a {
     color: $sidebar-light-color;
+
     &:hover {
       text-decoration: none;
     }
@@ -298,8 +307,8 @@
       > .nav-link.active {
         &,
         &:hover {
-          color: $sidebar-light-submenu-active-color;
           background-color: $sidebar-light-submenu-active-bg;
+          color: $sidebar-light-submenu-active-color;
         }
       }
 

build/scss/_modals.scss

@@ -1,22 +1,25 @@
 /*
- * General: Modals
- * ----------------------
+ * Component: Modals
+ * ---------
+ ------
  */
 
 // Overlay
 .modal-dialog {
   .overlay {
-      display: block;
-      position: absolute;
-      z-index: ($zindex-modal + 2);
-      background: rgba(255, 255, 255, 0.7);
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+    background-color: $black;
+    display: block;
+    height: 100%;
+    left: 0;
+    opacity: .7;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: ($zindex-modal + 2);
   }
 }
 
+
 // BG Color Variations Fixes
 .modal-content {
   &.bg-warning {
@@ -25,14 +28,13 @@
       border-color: $gray-800;
     }
   }
-}
-.modal-content {
+
   &.bg-primary,
   &.bg-secondary,
   &.bg-info,
   &.bg-danger,
   &.bg-success, {
-    .close{
+    .close {
       color: $white;
     }
   }

build/scss/_navs.scss

@@ -2,12 +2,13 @@
  * Component: Nav
  * --------------
  */
+
 .nav-pills {
   .nav-link {
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color("primary")
+      color: theme-color('primary')
     }
   }
   .nav-item {
@@ -19,12 +20,10 @@
   }
 }
 
-//
 // Vertical Tabs
-//
 .nav-tabs.flex-column {
-  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
   border-bottom: 0;
+  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
 
   .nav-link {
     margin-right: -$nav-tabs-border-width;
@@ -40,8 +39,8 @@
   }
 
   &.nav-tabs-right {
-    border-right: 0;
     border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
+    border-right: 0;
 
 
     .nav-link {
@@ -59,9 +58,7 @@
   }
 }
 
-//
 // Color variants
-//
 @each $color, $value in $theme-colors {
   @if $color==dark or $color==light {
     .navbar-#{$color} {

build/scss/_print.scss

@@ -1,7 +1,8 @@
 /*
- * Misc: print
+ * Misc: Print
  * -----------
  */
+ 
 @media print {
   //Add to elements that you do not want to show when printing
   .no-print {
@@ -18,9 +19,9 @@
   //This is the only element that should appear, so let's remove the margins
   .content-wrapper,
   .main-footer {
+    @include translate(0, 0);
     margin-left: 0 !important;
     min-height: 0 !important;
-    @include translate(0, 0);
   }
 
   .layout-fixed .content-wrapper {
@@ -29,10 +30,10 @@
 
   //Invoice printing
   .invoice {
-    width: 100%;
     border: 0;
     margin: 0;
     padding: 0;
+    width: 100%;
   }
 
   .invoice-col {
@@ -43,6 +44,7 @@
   //Make sure table content displays properly
   .table-responsive {
     overflow: auto;
+
     > .table tr th,
     > .table tr td {
       white-space: normal !important;

build/scss/_products.scss

@@ -1,44 +1,51 @@
 /*
- * Component: Products List
- * ------------------------
+ * Component: Products
+ * -------------------
  */
 .products-list {
   list-style: none;
   margin: 0;
   padding: 0;
   > .item {
+    @include clearfix;
+
     @if $enable-rounded {
       @include border-radius($border-radius);
     }
-    @include clearfix();
-    padding: 10px 0;
+
     background: $white;
+    padding: 10px 0;
   }
+
   .product-img {
     float: left;
     img {
-      width: 50px;
       height: 50px;
+      width: 50px;
     }
   }
+
   .product-info {
     margin-left: 60px;
   }
+
   .product-title {
     font-weight: 600;
   }
+
   .product-description {
-    display: block;
     color: $gray-600;
+    display: block;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
 .product-list-in-card > .item {
   @include border-radius(0);
   border-bottom: 1px solid $card-border-color;
+
   &:last-of-type {
     border-bottom-width: 0;
   }

build/scss/_progress-bars.scss

@@ -7,6 +7,37 @@
 .progress {
   @include box-shadow(none);
   @include border-radius($progress-bar-border-radius);
+
+  // Vertical bars
+  &.vertical {
+    display: inline-block;
+    height: 200px;
+    margin-right: 10px;
+    position: relative;
+    width: 30px;
+
+    > .progress-bar {
+      bottom: 0;
+      position: absolute;
+      width: 100%;
+    }
+
+    //Sizes
+    &.sm,
+    &.progress-sm {
+      width: 20px;
+    }
+
+    &.xs,
+    &.progress-xs {
+      width: 10px;
+    }
+
+    &.xxs,
+    &.progress-xxs {
+      width: 3px;
+    }
+  }
 }
 
 .progress-group {
@@ -26,35 +57,6 @@
   height: 3px;
 }
 
-// Vertical bars
-.progress.vertical {
-  position: relative;
-  width: 30px;
-  height: 200px;
-  display: inline-block;
-  margin-right: 10px;
-  > .progress-bar {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-  }
-
-  //Sizes
-  &.sm,
-  &.progress-sm {
-    width: 20px;
-  }
-
-  &.xs,
-  &.progress-xs {
-    width: 10px;
-  }
-  &.xxs,
-  &.progress-xxs {
-    width: 3px;
-  }
-}
-
 // Remove margins from progress bars when put in a table
 .table {
   tr > td .progress {

build/scss/_sidebar-mini.scss

@@ -1,5 +1,6 @@
 /*
  * Component: Sidebar Mini
+ * -----------------------
  */
 
 // Mixin
@@ -38,9 +39,9 @@
     .sidebar .user-panel > .info,
     .nav-sidebar .nav-link p,
     .brand-text {
-      visibility: hidden;
-      opacity: 0;
       margin-left: -10px;
+      opacity: 0;
+      visibility: hidden;
     }
 
     // Modify the sidebar to shrink instead of disappearing
@@ -48,7 +49,7 @@
       overflow-x: hidden;
 
       &,
-      &:before {
+      &::before {
         // Don't go away! Just shrink
         margin-left: 0;
         width: $sidebar-mini-width;
@@ -63,8 +64,10 @@
       &:hover, 
       &.sidebar-focused {
         width: $sidebar-width;
+
         .user-panel {
           text-align: left;
+
           .image {
             float: left;
           }
@@ -73,10 +76,10 @@
         .user-panel > .info,
         .nav-sidebar .nav-link p,
         .brand-text {
-          visibility: visible;
-          opacity: 1;
-          margin-left: 0;
           display: inline-block;
+          margin-left: 0;
+          opacity: 1;
+          visibility: visible;
         }
 
         .brand-image {
@@ -108,17 +111,19 @@
 // Add sidebar-mini class to the body tag to activate this feature
 .sidebar-mini {
   @include media-breakpoint-up(lg) {
-    @include sidebar-mini-breakpoint();
+    @include sidebar-mini-breakpoint;
   }
 }
+
 .sidebar-mini-md {
   @include media-breakpoint-up(md) {
-    @include sidebar-mini-breakpoint();
+    @include sidebar-mini-breakpoint;
   }
 }
 
 .nav-sidebar {
   position: relative;
+
   &:hover {
     overflow: visible;
   }
@@ -132,11 +137,12 @@
 
 .nav-sidebar .nav-item > .nav-link {
   position: relative;
+
   > .float-right {
+    margin-top: -7px;
     position: absolute;
     right: 10px;
     top: 50%;
-    margin-top: -7px;
   }
 }
 

build/scss/_small-box.scss

@@ -8,9 +8,9 @@
   @include box-shadow($card-shadow);
   @extend .mb-3;
 
-  position: relative;
   display: block;
   margin-bottom: 20px;
+  position: relative;
 
   // content wrapper
   > .inner {
@@ -18,18 +18,19 @@
   }
 
   > .small-box-footer {
-    position: relative;
-    text-align: center;
-    padding: 3px 0;
+    background: rgba($black, 0.1);
     color: $white;
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba($white, 0.8);
     display: block;
-    z-index: 10;
-    background: rgba(0, 0, 0, 0.1);
+    padding: 3px 0;
+    position: relative;
+    text-align: center;
     text-decoration: none;
+    z-index: 10;
+
     &:hover {
+      background: rgba($black, 0.15);
       color: $white;
-      background: rgba(0, 0, 0, 0.15);
     }
   }
 
@@ -37,16 +38,17 @@
     font-size: 38px;
     font-weight: bold;
     margin: 0 0 10px 0;
-    white-space: nowrap;
     padding: 0;
+    white-space: nowrap;
 
   }
 
   p {
     font-size: 15px;
+
     > small {
-      display: block;
       color: #f9f9f9;
+      display: block;
       font-size: 13px;
       margin-top: 5px;
     }
@@ -58,20 +60,22 @@
 
   // the icon
   .icon {
+    color: rgba($black, 0.15);
     z-index: 0;
-    color: rgba(0, 0, 0, 0.15);
 
     > i {
-      transition: all $transition-speed linear;
+      font-size: 90px;
       position: absolute;
-      top: 15px;
       right: 15px;
-      font-size: 90px;
-      
-      &.fa, 
+      top: 15px;
+      transition: all $transition-speed linear;
+
+      &.fa,
       &.fas,
       &.far,
-      &.fab {
+      &.fab,
+      &.glyphicon,
+      &.ion {
         font-size: 70px;
         top: 20px;
       }
@@ -82,14 +86,17 @@
   // Small box hover state
   &:hover {
     text-decoration: none;
+
     // Animate icons on small box hover
     .icon > i {
       font-size: 95px;
 
-      &.fa, 
+      &.fa,
       &.fas,
       &.far,
-      &.fab {
+      &.fab,
+      &.glyphicon,
+      &.ion {
         font-size: 75px;
       }
     }
@@ -100,9 +107,11 @@
   // No need for icons on very small devices
   .small-box {
     text-align: center;
+
     .icon {
       display: none;
     }
+
     p {
       font-size: 12px;
     }

build/scss/_social-widgets.scss

@@ -10,36 +10,42 @@
 
 //User Widget Style 1
 .widget-user {
+
   //User name container
   .widget-user-header {
-    padding: 1rem;
-    height: 120px;
     @if $enable-rounded {
       @include border-top-radius($border-radius);
     }
+
+    height: 120px;
+    padding: 1rem;
   }
+
   //User name
   .widget-user-username {
-    margin-top: 0;
-    margin-bottom: 5px;
     font-size: 25px;
     font-weight: 300;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    margin-bottom: 5px;
+    margin-top: 0;
+    text-shadow: 0 1px 1px rgba($black, 0.2);
   }
+
   //User single line description
   .widget-user-desc {
     margin-top: 0;
   }
+
   //User image container
   .widget-user-image {
-    position: absolute;
-    top: 65px;
     left: 50%;
     margin-left: -45px;
+    position: absolute;
+    top: 65px;
+
     > img {
-      width: 90px;
-      height: auto;
       border: 3px solid $white;
+      height: auto;
+      width: 90px;
     }
   }
 
@@ -50,32 +56,37 @@
 
 //User Widget Style 2
 .widget-user-2 {
+
   //User name container
   .widget-user-header {
-    padding: 1rem;
     @include border-top-radius($border-radius);
+    padding: 1rem;
   }
+
   //User name
   .widget-user-username {
-    margin-top: 5px;
-    margin-bottom: 5px;
     font-size: 25px;
     font-weight: 300;
+    margin-bottom: 5px;
+    margin-top: 5px;
   }
+
   //User single line description
   .widget-user-desc {
     margin-top: 0;
   }
+
   .widget-user-username,
   .widget-user-desc {
     margin-left: 75px;
   }
+
   //User image container
   .widget-user-image {
     > img {
-      width: 65px;
-      height: auto;
       float: left;
+      height: auto;
+      width: 65px;
     }
   }
 }

build/scss/_text.scss

@@ -1,3 +1,15 @@
+/*
+ * Component: Text
+ * -------------
+ */
+
+// text muted hover
+a.text-muted:hover {
+  color: theme-color(primary) !important;
+}
+
+
+// text modification
 .text-bold {
   &, &.table td, &.table th {
     font-weight: 700;
@@ -21,6 +33,7 @@
 }
 
 
+// text color variations
 @each $name, $color in $colors {
   .text-#{$name} {
     color: #{$color};

build/scss/_timeline.scss

@@ -4,39 +4,39 @@
  */
 
 .timeline {
-  position: relative;
+  list-style: none;
   margin: 0 0 30px 0;
   padding: 0;
-  list-style: none;
+  position: relative;
 
   // The line
-  &:before {
+  &::before {
+    @include border-radius($border-radius);
+    background: $gray-300;
+    bottom: 0;
     content: '';
+    left: 31px;
+    margin: 0;
     position: absolute;
     top: 0;
-    bottom: 0;
     width: 4px;
-    background: #ddd;
-    left: 31px;
-    margin: 0;
-    @include border-radius($border-radius);
   }
 
   > li {
-    position: relative;
-    margin-right: 10px;
+    @include clearfix;
     margin-bottom: 15px;
-    @include clearfix();
+    margin-right: 10px;
+    position: relative;
 
     // The content
     > .timeline-item {
       @include box-shadow($card-shadow);
       @include border-radius($border-radius);
-      margin-top: 0;
       background: $white;
       color: #444;
       margin-left: 60px;
       margin-right: 15px;
+      margin-top: 0;
       padding: 0;
       position: relative;
 
@@ -44,20 +44,23 @@
       > .time {
         color: #999;
         float: right;
-        padding: 10px;
         font-size: 12px;
+        padding: 10px;
       }
+
       > .timeline-header {
-        margin: 0;
-        color: #555;
         border-bottom: 1px solid $card-border-color;
-        padding: 10px;
+        color: #555;
         font-size: 16px;
         line-height: 1.1;
+        margin: 0;
+        padding: 10px;
+
         > a {
           font-weight: 600;
         }
       }
+
       // Item body and footer
       > .timeline-body, > .timeline-footer {
         padding: 10px;
@@ -67,30 +70,33 @@
 
     // The icons
     > .fa,
+    > .fas,
+    > .far,
+    > .fab,
     > .glyphicon,
     > .ion {
-      width: 30px;
-      height: 30px;
+      background: $gray-500;
+      border-radius: 50%;
       font-size: 15px;
+      height: 30px;
+      left: 18px;
       line-height: 30px;
       position: absolute;
-      background: $gray-500;
-      border-radius: 50%;
       text-align: center;
-      left: 18px;
       top: 0;
+      width: 30px;
     }
   }
 
   // Time label
   > .time-label {
     > span {
+      @include border-radius(4px);
+      
+      background-color: $white;
+      display: inline-block;
       font-weight: 600;
       padding: 5px;
-      display: inline-block;
-      background-color: $white;
-
-      @include border-radius(4px);
     }
   }
 }
@@ -98,11 +104,12 @@
 .timeline-inverse {
   > li {
     > .timeline-item {
-      background: $gray-100;
-      border: 1px solid #ddd;
       @include box-shadow(none);
+      background: $gray-100;
+      border: 1px solid $gray-300;
+
       > .timeline-header {
-        border-bottom-color: #ddd;
+        border-bottom-color: $gray-300;
       }
     }
   }

build/scss/_users-list.scss

@@ -2,18 +2,21 @@
  * Component: Users List
  * ---------------------
  */
+
 .users-list {
   @extend .list-unstyled;
   > li {
-    width: 25%;
     float: left;
     padding: 10px;
     text-align: center;
+    width: 25%;
+
     img {
       @include border-radius(50%);
-      max-width: 100%;
       height: auto;
+      max-width: 100%;
     }
+
     > a:hover {
       &,
       .users-list-name {
@@ -29,14 +32,14 @@
 }
 
 .users-list-name {
+  color: $gray-700;
   font-size: $font-size-sm;
-  color: #444;
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .users-list-date {
-  color: #999;
+  color: darken($gray-500, 20%);
   font-size: 12px;
 }

build/scss/_variables.scss

@@ -1,5 +1,7 @@
-// AdminLTE 3 Variables.less
-// =========================
+/*
+ * Core: Variables
+ * ---------------
+ */
 
 // COLORS
 // --------------------------------------------------------

build/scss/_404_500_errors.scss → build/scss/pages/_404_500_errors.scss

@@ -1,7 +1,8 @@
 /*
- * Page: 400 and 500 error pages
+ * Pages: 400 and 500 error pages
  * ------------------------------
  */
+ 
 .error-page {
   width: 600px;
   margin: 20px auto 0 auto;

build/scss/pages/_e_commerce.scss

@@ -1,14 +1,22 @@
+/*
+ * Pages: E-commerce
+ * -----------------
+ */
+
+// product image
 .product-image {
   @include img-fluid;
   width: 100%;
 }
 
+// product image thumbnails list
 .product-image-thumbs {
   display: flex;
   align-items: stretch;
   margin-top: 2rem;
 }
 
+// product image thumbnail
 .product-image-thumb {
 
   @include box-shadow($thumbnail-box-shadow);
@@ -31,6 +39,7 @@
   }
 }
 
+// product share
 .product-share a {
   margin-right: 0.5rem;
 }

build/scss/_invoice.scss → build/scss/pages/_invoice.scss

@@ -1,6 +1,6 @@
 /*
- * Page: Invoice
- * -------------
+ * Pages: Invoice
+ * --------------
  */
 
 .invoice {

build/scss/_lockscreen.scss → build/scss/pages/_lockscreen.scss

@@ -1,6 +1,6 @@
 /*
- * Page: Lock Screen
- * -----------------
+ * Pages: Lock Screen
+ * ------------------
  */
 /* ADD THIS CLASS TO THE <BODY> TAG */
 .lockscreen {

build/scss/_login_and_register.scss → build/scss/pages/_login_and_register.scss

@@ -1,6 +1,6 @@
 /*
- * Page: Login & Register
- * ----------------------
+ * Pages: Login & Register
+ * -----------------------
  */
 
 .login-logo,

build/scss/_mailbox.scss → build/scss/pages/_mailbox.scss

@@ -1,6 +1,6 @@
 /*
- * Page: Mailbox
- * -------------
+ * Pages: Mailbox
+ * --------------
  */
 .mailbox-messages {
   > .table {

build/scss/_profile.scss → build/scss/pages/_profile.scss

@@ -1,6 +1,6 @@
 /*
- * Page: Profile
- * -------------
+ * Pages: Profile
+ * --------------
  */
 
 .profile-user-img {

build/scss/pages/_projects.scss

@@ -0,0 +1,27 @@
+/*
+ * Pages: Projects
+ * ---------------
+ */
+
+.projects {
+  td {
+    vertical-align: middle;
+  }
+
+  .list-inline {
+    margin-bottom: 0;
+  }
+
+  // table avatar
+  img.table-avatar,
+  .table-avatar img{
+    border-radius: 50%;
+    display: inline;
+    width: 2.5rem;
+  }
+
+  // project state
+  .project-state {
+    text-align: center;
+  }
+}

build/scss/plugins/_bootstrap-slider.scss

@@ -1,6 +1,6 @@
 /*
  * Plugin: Bootstrap Slider
- * ---------------------
+ * ------------------------
  */
 
 // Style override

build/scss/plugins/_icheck-bootstrap.scss

@@ -1,6 +1,6 @@
 /*
  * Plugin: iCheck Bootstrap
- * ---------------------
+ * ------------------------
  */
 
 // iCheck colors (theme colors)

build/scss/plugins/_sweetalert2.scss

@@ -1,6 +1,6 @@
 /*
  * Plugin: SweetAlert2
- * ---------------
+ * -------------------
  */
 
 // Icon Colors

build/scss/plugins/_toastr.scss

@@ -1,6 +1,6 @@
 /*
  * Plugin: Toastr
- * ---------------
+ * --------------
  */
 
 // Background to FontAwesome Icons

pages/examples/projects.html

@@ -0,0 +1,1160 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>AdminLTE 3 | Projects</title>
+  <!-- Tell the browser to be responsive to screen width -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Font Awesome -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
+  <!-- Ionicons -->
+  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <!-- overlayScrollbars -->
+  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
+  <!-- Google Font: Source Sans Pro -->
+  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
+</head>
+<body class="hold-transition sidebar-mini">
+<!-- Site wrapper -->
+<div class="wrapper">
+  <!-- Navbar -->
+  <nav class="main-header navbar navbar-expand navbar-white navbar-light border-bottom">
+    <!-- Left navbar links -->
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
+      </li>
+      <li class="nav-item d-none d-sm-inline-block">
+        <a href="../../index3.html" class="nav-link">Home</a>
+      </li>
+      <li class="nav-item d-none d-sm-inline-block">
+        <a href="#" class="nav-link">Contact</a>
+      </li>
+    </ul>
+
+    <!-- SEARCH FORM -->
+    <form class="form-inline ml-3">
+      <div class="input-group input-group-sm">
+        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-navbar" type="submit">
+            <i class="fas fa-search"></i>
+          </button>
+        </div>
+      </div>
+    </form>
+
+    <!-- Right navbar links -->
+    <ul class="navbar-nav ml-auto">
+      <!-- Messages Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-comments"></i>
+          <span class="badge badge-danger navbar-badge">3</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  Brad Diesel
+                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">Call me whenever you can...</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  John Pierce
+                  <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">I got your message bro</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="media">
+              <img src="../../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
+              <div class="media-body">
+                <h3 class="dropdown-item-title">
+                  Nora Silvester
+                  <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
+                </h3>
+                <p class="text-sm">The subject goes here</p>
+                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <!-- Notifications Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-bell"></i>
+          <span class="badge badge-warning navbar-badge">15</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-envelope mr-2"></i> 4 new messages
+            <span class="float-right text-muted text-sm">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-users mr-2"></i> 8 friend requests
+            <span class="float-right text-muted text-sm">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fas fa-file mr-2"></i> 3 new reports
+            <span class="float-right text-muted text-sm">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+        </div>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
+          <i class="fas fa-th-large"></i>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  <!-- /.navbar -->
+
+  <!-- Main Sidebar Container -->
+  <aside class="main-sidebar sidebar-dark-primary elevation-4">
+    <!-- Brand Logo -->
+    <a href="../../index3.html" class="brand-link">
+      <img src="../../dist/img/AdminLTELogo.png"
+           alt="AdminLTE Logo"
+           class="brand-image img-circle elevation-3"
+           style="opacity: .8">
+      <span class="brand-text font-weight-light">AdminLTE 3</span>
+    </a>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <!-- Sidebar user (optional) -->
+      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
+        <div class="image">
+          <img src="../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
+        </div>
+        <div class="info">
+          <a href="#" class="d-block">Alexander Pierce</a>
+        </div>
+      </div>
+
+      <!-- Sidebar Menu -->
+      <nav class="mt-2">
+        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+          <!-- Add icons to the links using the .nav-icon class
+               with font-awesome or any other icon font library -->
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-tachometer-alt"></i>
+              <p>
+                Dashboard
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../../index.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v1</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../../index2.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v2</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../../index3.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Dashboard v3</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item">
+            <a href="../widgets.html" class="nav-link">
+              <i class="nav-icon fas fa-th"></i>
+              <p>
+                Widgets
+                <span class="right badge badge-danger">New</span>
+              </p>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-copy"></i>
+              <p>
+                Layout Options
+                <i class="fas fa-angle-left right"></i>
+                <span class="badge badge-info right">6</span>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../layout/top-nav.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Top Navigation</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/boxed.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Boxed</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/fixed.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/fixed-topnav.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Navbar</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/fixed-footer.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Fixed Footer</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../layout/collapsed-sidebar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Collapsed Sidebar</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-chart-pie"></i>
+              <p>
+                Charts
+                <i class="right fas fa-angle-left"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../charts/chartjs.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>ChartJS</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../charts/flot.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Flot</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../charts/inline.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inline</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-tree"></i>
+              <p>
+                UI Elements
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../UI/general.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>General</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/icons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Icons</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/buttons.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Buttons</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/sliders.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Sliders</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/modals.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Modals & Alerts</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../UI/navbar.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Navbar & Tabs</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-edit"></i>
+              <p>
+                Forms
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../forms/general.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>General Elements</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../forms/advanced.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Advanced Elements</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../forms/editors.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Editors</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon fas fa-table"></i>
+              <p>
+                Tables
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../tables/simple.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Simple Tables</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../tables/data.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Data Tables</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">EXAMPLES</li>
+          <li class="nav-item">
+            <a href="../calendar.html" class="nav-link">
+              <i class="nav-icon far fa-calendar-alt"></i>
+              <p>
+                Calendar
+                <span class="badge badge-info right">2</span>
+              </p>
+            </a>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-envelope"></i>
+              <p>
+                Mailbox
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../mailbox/mailbox.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Inbox</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../mailbox/compose.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Compose</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../mailbox/read-mail.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Read</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview menu-open">
+            <a href="#" class="nav-link active">
+              <i class="nav-icon fas fa-book"></i>
+              <p>
+                Pages
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../examples/invoice.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Invoice</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/profile.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Profile</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/e_commerce.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>E-commerce</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/projects.html" class="nav-link active">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Projects</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-item has-treeview">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-plus-square"></i>
+              <p>
+                Extras
+                <i class="fas fa-angle-left right"></i>
+              </p>
+            </a>
+            <ul class="nav nav-treeview">
+              <li class="nav-item">
+                <a href="../examples/login.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Login</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/register.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Register</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/lockscreen.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Lockscreen</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/legacy-user-menu.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Legacy User Menu</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/404.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Error 404</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/500.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Error 500</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../examples/blank.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Blank Page</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="../../starter.html" class="nav-link">
+                  <i class="far fa-circle nav-icon"></i>
+                  <p>Starter Page</p>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav-header">MISCELLANEOUS</li>
+          <li class="nav-item">
+            <a href="https://adminlte.io/docs" class="nav-link">
+              <i class="nav-icon fas fa-file"></i>
+              <p>Documentation</p>
+            </a>
+          </li>
+          <li class="nav-header">LABELS</li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-danger"></i>
+              <p class="text">Important</p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-warning"></i>
+              <p>Warning</p>
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">
+              <i class="nav-icon far fa-circle text-info"></i>
+              <p>Informational</p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <!-- /.sidebar-menu -->
+    </div>
+    <!-- /.sidebar -->
+  </aside>
+
+  <!-- Content Wrapper. Contains page content -->
+  <div class="content-wrapper">
+    <!-- Content Header (Page header) -->
+    <section class="content-header">
+      <div class="container-fluid">
+        <div class="row mb-2">
+          <div class="col-sm-6">
+            <h1>Projects</h1>
+          </div>
+          <div class="col-sm-6">
+            <ol class="breadcrumb float-sm-right">
+              <li class="breadcrumb-item"><a href="#">Home</a></li>
+              <li class="breadcrumb-item active">Projects</li>
+            </ol>
+          </div>
+        </div>
+      </div><!-- /.container-fluid -->
+    </section>
+
+    <!-- Main content -->
+    <section class="content">
+
+      <!-- Default box -->
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title">Projects</h3>
+
+          <div class="card-tools">
+            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
+              <i class="fas fa-minus"></i></button>
+            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
+              <i class="fas fa-times"></i></button>
+          </div>
+        </div>
+        <div class="card-body p-0">
+          <table class="table table-striped projects">
+              <thead>
+                  <tr>
+                      <th style="width: 1%">
+                          #
+                      </th>
+                      <th style="width: 20%">
+                          Project Name
+                      </th>
+                      <th style="width: 30%">
+                          Team Members
+                      </th>
+                      <th>
+                          Project Progress
+                      </th>
+                      <th style="width: 8%" class="text-center">
+                          Status
+                      </th>
+                      <th style="width: 20%">
+                      </th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar2.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar3.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="57" aria-volumemin="0" aria-volumemax="100" style="width: 57%">
+                              </div>
+                          </div>
+                          <small>
+                              57% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar2.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="47" aria-volumemin="0" aria-volumemax="100" style="width: 47%">
+                              </div>
+                          </div>
+                          <small>
+                              47% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar2.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar3.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="77" aria-volumemin="0" aria-volumemax="100" style="width: 77%">
+                              </div>
+                          </div>
+                          <small>
+                              77% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar2.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar3.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="60" aria-volumemin="0" aria-volumemax="100" style="width: 60%">
+                              </div>
+                          </div>
+                          <small>
+                              60% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar5.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="12" aria-volumemin="0" aria-volumemax="100" style="width: 12%">
+                              </div>
+                          </div>
+                          <small>
+                              12% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar2.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar3.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="35" aria-volumemin="0" aria-volumemax="100" style="width: 35%">
+                              </div>
+                          </div>
+                          <small>
+                              35% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar5.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="87" aria-volumemin="0" aria-volumemax="100" style="width: 87%">
+                              </div>
+                          </div>
+                          <small>
+                              87% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar3.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="77" aria-volumemin="0" aria-volumemax="100" style="width: 77%">
+                              </div>
+                          </div>
+                          <small>
+                              77% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+                  <tr>
+                      <td>
+                          #
+                      </td>
+                      <td>
+                          <a>
+                              AdminLTE v3
+                          </a>
+                          <br/>
+                          <small>
+                              Created 01.01.2019
+                          </small>
+                      </td>
+                      <td>
+                          <ul class="list-inline">
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar3.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar04.png">
+                              </li>
+                              <li class="list-inline-item">
+                                  <img alt="Avatar" class="table-avatar" src="../../dist/img/avatar5.png">
+                              </li>
+                          </ul>
+                      </td>
+                      <td class="project_progress">
+                          <div class="progress progress-sm">
+                              <div class="progress-bar bg-green" role="progressbar" aria-volumenow="77" aria-volumemin="0" aria-volumemax="100" style="width: 77%">
+                              </div>
+                          </div>
+                          <small>
+                              77% Complete
+                          </small>
+                      </td>
+                      <td class="project-state">
+                          <span class="badge badge-success">Success</span>
+                      </td>
+                      <td class="project-actions text-right">
+                          <a class="btn btn-primary btn-sm" href="#">
+                              <i class="fas fa-folder">
+                              </i>
+                              View
+                          </a>
+                          <a class="btn btn-info btn-sm" href="#">
+                              <i class="fas fa-pencil-alt">
+                              </i>
+                              Edit
+                          </a>
+                          <a class="btn btn-danger btn-sm" href="#">
+                              <i class="fas fa-trash">
+                              </i>
+                              Delete
+                          </a>
+                      </td>
+                  </tr>
+              </tbody>
+          </table>
+        </div>
+        <!-- /.card-body -->
+      </div>
+      <!-- /.card -->
+
+    </section>
+    <!-- /.content -->
+  </div>
+  <!-- /.content-wrapper -->
+
+  <footer class="main-footer">
+    <div class="float-right d-none d-sm-block">
+      <b>Version</b> 3.0.0-beta.2
+    </div>
+    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
+    reserved.
+  </footer>
+
+  <!-- Control Sidebar -->
+  <aside class="control-sidebar control-sidebar-dark">
+    <!-- Control sidebar content goes here -->
+  </aside>
+  <!-- /.control-sidebar -->
+</div>
+<!-- ./wrapper -->
+
+<!-- jQuery -->
+<script src="../../plugins/jquery/jquery.min.js"></script>
+<!-- Bootstrap 4 -->
+<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
+<!-- FastClick -->
+<script src="../../plugins/fastclick/fastclick.js"></script>
+<!-- AdminLTE App -->
+<script src="../../dist/js/adminlte.min.js"></script>
+<!-- AdminLTE for demo purposes -->
+<script src="../../dist/js/demo.js"></script>
+</body>
+</html>