Initial CoreUI commit

The initial new codebase from a template

src/scss/core/_animate.scss

@@ -0,0 +1,44 @@
+// scss-lint:disable all
+@charset "UTF-8";
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}

src/scss/core/_aside.scss

@@ -0,0 +1,64 @@
+.aside-menu {
+  z-index: $zindex-sticky - 1;
+  width: $aside-menu-width;
+  color: $aside-menu-color;
+  background: $aside-menu-bg;
+  @include borders($aside-menu-borders);
+
+  .nav-tabs {
+    border-color: $border-color;
+    .nav-link {
+      padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
+      color: $body-color;
+      border-top: 0;
+      &.active {
+        color: $brand-primary;
+        border-right-color: $border-color;
+        border-left-color: $border-color;
+      }
+    }
+    .nav-item:first-child {
+      .nav-link {
+        border-left: 0;
+      }
+    }
+  }
+
+  .tab-content {
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: 0;
+    border-top: 1px solid $border-color;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      margin-left: -10px;
+      -webkit-appearance: none;
+    }
+
+    // &::-webkit-scrollbar-button {    }
+
+    &::-webkit-scrollbar-track {
+      background-color: lighten($aside-menu-bg, 5%);
+      border-right: 1px solid darken($aside-menu-bg, 5%);
+      border-left: 1px solid darken($aside-menu-bg, 5%);
+    }
+
+    // &::-webkit-scrollbar-track-piece {    }
+
+    &::-webkit-scrollbar-thumb {
+      height: 50px;
+      background-color: darken($aside-menu-bg, 10%);
+      background-clip: content-box;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 1px 2px;
+    }
+
+    .tab-pane {
+      padding: 0;
+    }
+  }
+}

src/scss/core/_avatars.scss

@@ -0,0 +1,51 @@
+.img-avatar {
+  border-radius: 50em;
+}
+
+.avatar {
+  $width: 36px;
+  $status-width: 10px;
+  @include avatar($width,$status-width);
+}
+
+.avatar.avatar-xs {
+  $width: 20px;
+  $status-width: 8px;
+  @include avatar($width,$status-width);
+}
+
+.avatar.avatar-sm {
+  $width: 24px;
+  $status-width: 8px;
+  @include avatar($width,$status-width);
+}
+
+.avatar.avatar-lg {
+  $width: 72px;
+  $status-width: 12px;
+  @include avatar($width,$status-width);
+}
+
+.avatars-stack {
+  .avatar.avatar-xs {
+    margin-right: -10px;
+  }
+
+  // .avatar.avatar-sm {
+  //
+  // }
+
+  .avatar {
+    margin-right: -15px;
+    transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
+
+    &:hover {
+      margin-right: 0 !important;
+    }
+  }
+
+  // .avatar.avatar-lg {
+  //
+  // }
+
+}

src/scss/core/_badge.scss

@@ -0,0 +1,3 @@
+.badge-pill {
+  border-radius: $badge-pill-border-radius;
+}

src/scss/core/_breadcrumb-menu.scss

@@ -0,0 +1,36 @@
+.breadcrumb-menu {
+  position: absolute;
+  top: 0;
+  right: $breadcrumb-padding-x;
+
+  &::before {
+    display: none;
+  }
+
+  .btn {
+    padding-top: $breadcrumb-padding-y;
+    padding-bottom: $breadcrumb-padding-y;
+  }
+
+  .btn.btn-secondary {
+    color: $text-muted;
+    border: 0;
+
+    &:hover, &.active {
+      color: $body-color;
+      background: transparent;
+    }
+  }
+
+  .open {
+    .btn.btn-secondary {
+      color: $body-color;
+      background: transparent;
+    }
+  }
+
+  .dropdown-menu {
+    min-width: 180px;
+    line-height: $line-height-base;
+  }
+}

src/scss/core/_breadcrumb.scss

@@ -0,0 +1,6 @@
+.breadcrumb {
+  position: relative;
+  margin-bottom: 1.5 * $spacer;
+
+  @include borders($breadcrumb-borders);
+}

src/scss/core/_buttons.scss

@@ -0,0 +1,575 @@
+.btn {
+  .badge {
+    position: absolute;
+    top: 2px;
+    right: 6px;
+    font-size: 9px;
+  }
+}
+
+
+.btn-transparent {
+  $color: #fff;
+  $background: transparent;
+  $border: transparent;
+
+  @include button-variant($color, $background, $border)
+}
+
+
+.btn {
+  [class^="icon-"], [class*=" icon-"] {
+    display: inline-block;
+    margin-top: -2px;
+    vertical-align: middle;
+  }
+}
+
+.btn-facebook,
+.btn-twitter,
+.btn-linkedin,
+.btn-flickr,
+.btn-tumblr,
+.btn-xing,
+.btn-github,
+.btn-html5,
+.btn-openid,
+.btn-stack-overflow,
+.btn-youtube,
+.btn-css3,
+.btn-dribbble,
+.btn-google-plus,
+.btn-instagram,
+.btn-pinterest,
+.btn-vk,
+.btn-yahoo,
+.btn-behance,
+.btn-dropbox,
+.btn-reddit,
+.btn-spotify,
+.btn-vine,
+.btn-foursquare,
+.btn-vimeo {
+  position: relative;
+  overflow: hidden;
+  color: #fff !important;
+  text-align: center;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    font-family: "FontAwesome";
+    font-style: normal;
+    font-weight: normal;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  &:hover {
+    color: #fff;
+  }
+
+  &.icon {
+
+    span {
+      display: none;
+    }
+  }
+
+  &.text {
+    &::before {
+      display: none;
+    }
+
+    span {
+      margin-left: 0 !important;
+    }
+  }
+  @include button-social-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
+
+  &.btn-lg {
+    @include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  }
+
+  &.btn-sm {
+    @include button-social-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+  }
+
+}
+
+.btn-facebook {
+  $color: $facebook;
+
+  background: $color;
+  &::before {
+    content: "\f09a";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-twitter {
+  $color: $twitter;
+
+  background: $color;
+  &::before {
+    content: "\f099";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-linkedin {
+  $color: $linkedin;
+
+  background: $color;
+  &::before {
+    content: "\f0e1";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-flickr {
+  $color: $flickr;
+
+  background: $color;
+  &::before {
+    content: "\f16e";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-tumblr {
+  $color: $tumblr;
+
+  background: $color;
+  &::before {
+    content: "\f173";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-xing {
+  $color: $xing;
+
+  background: $color;
+  &::before {
+    content: "\f168";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-github {
+  $color: $github;
+
+  background: $color;
+  &::before {
+    content: "\f09b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-html5 {
+  $color: $html5;
+
+  background: $color;
+  &::before {
+    content: "\f13b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-openid {
+  $color: $openid;
+
+  background: $color;
+  &::before {
+    content: "\f19b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-stack-overflow {
+  $color: $stack-overflow;
+
+  background: $color;
+  &::before {
+    content: "\f16c";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-css3 {
+  $color: $css3;
+
+  background: $color;
+  &::before {
+    content: "\f13c";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-youtube {
+  $color: $youtube;
+
+  background: $color;
+  &::before {
+    content: "\f167";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-dribbble {
+  $color: $dribbble;
+
+  background: $color;
+  &::before {
+    content: "\f17d";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-google-plus {
+  $color: $google-plus;
+
+  background: $color;
+  &::before {
+    content: "\f0d5";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-instagram {
+  $color: $instagram;
+
+  background: $color;
+  &::before {
+    content: "\f16d";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-pinterest {
+  $color: $pinterest;
+
+  background: $color;
+  &::before {
+    content: "\f0d2";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-vk {
+  $color: $vk;
+
+  background: $color;
+  &::before {
+    content: "\f189";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-yahoo {
+  $color: $yahoo;
+
+  background: $color;
+  &::before {
+    content: "\f19e";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-behance {
+  $color: $behance;
+
+  background: $color;
+  &::before {
+    content: "\f1b4";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-dropbox {
+  $color: $dropbox;
+
+  background: $color;
+  &::before {
+    content: "\f16b";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-reddit {
+  $color: $reddit;
+
+  background: $color;
+  &::before {
+    content: "\f1a1";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-spotify {
+  $color: $spotify;
+
+  background: $color;
+  &::before {
+    content: "\f1bc";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-vine {
+  $color: $vine;
+
+  background: $color;
+  &::before {
+    content: "\f1ca";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-foursquare {
+  $color: $foursquare;
+
+  background: $color;
+  &::before {
+    content: "\f180";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}
+
+.btn-vimeo {
+  $color: $vimeo;
+
+  background: $color;
+  &::before {
+    content: "\f194";
+    background: darken($color, 5%);
+
+  }
+
+  &:hover {
+    background: darken($color, 5%);
+
+    &::before {
+      background: darken($color, 10%);
+    }
+  }
+}

src/scss/core/_callout.scss

@@ -0,0 +1,85 @@
+.callout {
+  position: relative;
+  padding: 0 $spacer;
+  margin: $spacer 0;
+  border: 0 solid $border-color;
+  border-left-width: .25rem;
+
+  @if $enable-rounded {
+    border-radius: .25rem;
+  }
+
+  .chart-wrapper {
+    position: absolute;
+    top: 18px;
+    left: 45%;
+    float: right;
+    width: 100px;
+  }
+}
+
+.callout-bordered {
+  border: 1px solid $border-color;
+  border-left-width: .25rem;
+}
+.callout code {
+  border-radius: .25rem;
+}
+.callout h4 {
+  margin-top: 0;
+  margin-bottom: .25rem;
+}
+.callout p:last-child {
+  margin-bottom: 0;
+}
+.callout + .callout {
+  margin-top: - .25rem;
+}
+
+.callout-default {
+  border-left-color: $text-muted;
+
+  h4 {
+    color: $text-muted;
+  }
+}
+
+.callout-primary {
+  border-left-color: $brand-primary;
+
+  h4 {
+    color: $brand-primary;
+  }
+}
+
+.callout-info {
+  border-left-color: $brand-info;
+
+  h4 {
+    color: $brand-info;
+  }
+}
+
+.callout-warning {
+  border-left-color: $brand-warning;
+
+  h4 {
+    color: $brand-warning;
+  }
+}
+
+.callout-danger {
+  border-left-color: $brand-danger;
+
+  h4 {
+    color: $brand-danger;
+  }
+}
+
+.callout-success {
+  border-left-color: $brand-success;
+
+  h4 {
+    color: $brand-success;
+  }
+}

src/scss/core/_card.scss

@@ -0,0 +1,232 @@
+.card {
+  margin-bottom: 1.5 * $spacer;
+}
+
+.card-header {
+
+  .icon-bg {
+    display: inline-block;
+    padding: $card-spacer-y $card-spacer-x !important;
+    margin-top: -$card-spacer-y;
+    margin-right: $card-spacer-x;
+    margin-bottom: -$card-spacer-y;
+    margin-left: -$card-spacer-x;
+    line-height: inherit;
+    color: $card-icon-color;
+    vertical-align: bottom;
+    background: $card-icon-bg;
+    border-right: $card-border-width solid $card-border-color;
+  }
+
+  .nav.nav-tabs {
+    margin-top: -$card-spacer-y;
+    margin-bottom: -$card-spacer-y;
+    border-bottom: 0;
+
+    .nav-item {
+      border-top: 0;
+    }
+
+    .nav-link {
+      padding: $card-spacer-y $card-spacer-x / 2;
+      color: $text-muted;
+      border-top: 0;
+
+      &.active {
+        color: $body-color;
+        background: #fff;
+      }
+    }
+  }
+
+  &.card-header-inverse {
+    color: #fff;
+  }
+
+  @each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+    &.card-header-#{$variant} {
+      margin: -1px -1px 0;
+      background: $color;
+      border-bottom: 1px solid $color;
+    }
+  }
+
+  .btn {
+    margin-top: - $input-btn-padding-y;
+  }
+  .btn-sm {
+    margin-top: - $input-btn-padding-y-sm;
+  }
+  .btn-lg {
+    margin-top: - $input-btn-padding-y-lg;
+  }
+}
+//
+.card-footer {
+
+  ul {
+    display: table;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    table-layout: fixed;
+
+    li {
+      display: table-cell;
+      padding: 0 $card-spacer-x;
+      text-align: center;
+    }
+  }
+}
+
+
+//
+// Background variations
+//
+
+@mixin card-variant($color) {
+  background-color: $color;
+
+  .card-header {
+    border-color: darken($color,5%);
+  }
+
+  .card-header, .card-footer {
+    background-color: darken($color,5%);
+    //border: 0;
+  }
+}
+
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+  .card-#{$variant} {
+    @include card-variant($color)
+  }
+}
+
+.card-inverse {
+  color: #fff;
+
+  .text-muted {
+    color: rgba(255,255,255,.6) !important;
+  }
+
+}
+
+[class*="card-outline-"] {
+  .card-block {
+    background: #fff !important;
+  }
+
+  &.card-outline-top {
+    border-top-width: 2px;
+    border-right-color: $border-color;
+    border-bottom-color: $border-color;
+    border-left-color: $border-color;
+  }
+}
+
+// Cards with color accent
+.card-accent-primary {
+  @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+  @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+  @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+  @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+  @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+  @include card-accent-variant($btn-danger-bg);
+}
+
+// Card Actions
+.card-header {
+  > i {
+    margin-right: $spacer / 2;
+  }
+  .card-actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    //height: inherit;
+
+    a, button {
+      display: block;
+      float: left;
+      width: 50px;
+      padding: $card-spacer-y 0;
+      margin: 0 !important;
+      color: $body-color;
+      text-align: center;
+      background: transparent;
+      border: 0;
+      border-left: 1px solid $border-color;
+      box-shadow: 0;
+
+      &:hover {
+        text-decoration: none;
+      }
+
+      [class^="icon-"], [class*=" icon-"] {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      i {
+        display: inline-block;
+        transition: .4s;
+      }
+
+      .r180 {
+        transform: rotate(180deg);
+      }
+    }
+
+    .input-group {
+      width: 230px;
+      margin: 6px;
+
+      .input-group-addon {
+        background: #fff;
+      }
+
+      input {
+        border-left: 0;
+      }
+    }
+  }
+}
+
+.card-full {
+  margin-top: - $spacer;
+  margin-right: - $grid-gutter-width-base / 2;
+  margin-left: - $grid-gutter-width-base / 2;
+  border: 0;
+  border-bottom: $card-border-width solid $border-color;
+}
+
+@include media-breakpoint-up(sm) {
+  .card-columns {
+
+    &.cols-2 {
+      column-count: 2;
+    }
+  }
+}
+
+.card {
+  &.drag, .drag {
+    cursor: move;
+  }
+}
+
+.card-placeholder {
+  background: rgba(0,0,0,.025);
+  border: 1px dashed $gray-light;
+}

src/scss/core/_charts.scss

@@ -0,0 +1,9 @@
+.chart-wrapper {
+  canvas {
+    width: 100% !important;
+  }
+}
+// scss-lint:disable QualifyingElement
+base-chart.chart {
+  display: block !important;
+}

src/scss/core/_dropdown.scss

@@ -0,0 +1,49 @@
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+  position: relative;
+  padding: 10px 20px;
+  border-bottom: 1px solid $dropdown-border-color;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  i {
+    display: inline-block;
+    width: 20px;
+    margin-right: 10px;
+    margin-left: -10px;
+    color: $dropdown-border-color;
+    text-align: center;
+  }
+
+  .badge {
+    position: absolute;
+    right: 10px;
+    margin-top: 2px;
+  }
+}
+
+// Dropdown section headers
+.dropdown-header {
+  padding: 8px 20px;
+  background: $dropdown-divider-bg;
+  border-bottom: 1px solid $dropdown-border-color;
+
+  .btn {
+    margin-top: -7px;
+    color: $dropdown-header-color;
+
+    &:hover {
+      color: $body-color;
+    }
+
+    &.pull-right {
+      margin-right: -20px;
+    }
+  }
+}
+
+.dropdown-menu-lg {
+  width: 250px;
+}

src/scss/core/_footer.scss

@@ -0,0 +1,8 @@
+.app-footer {
+  min-height: $footer-height;
+  padding: 0 $spacer;
+  line-height: $footer-height;
+  color: $footer-color;
+  background: $footer-bg;
+  @include borders($footer-borders);
+}

src/scss/core/_grid.scss

@@ -0,0 +1,15 @@
+.row.row-equal {
+  padding-right: ($grid-gutter-width-base / 4);
+  padding-left:  ($grid-gutter-width-base / 4);
+  margin-right: ($grid-gutter-width-base / -2);
+  margin-left:  ($grid-gutter-width-base / -2);
+
+  [class*="col-"] {
+    padding-right: ($grid-gutter-width-base / 4);
+    padding-left:  ($grid-gutter-width-base / 4);
+  }
+}
+
+.main .container-fluid {
+  padding: 0 30px;
+}

src/scss/core/_input-group.scss

@@ -0,0 +1,6 @@
+.input-group-addon,
+.input-group-btn {
+  min-width: 40px;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+}

src/scss/core/_layout.scss

@@ -0,0 +1,330 @@
+// IE10&11 Flexbox fix
+@media all and (-ms-high-contrast:none) {
+  html {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// app-dashboard and app-root are Angular2 selectors. You can add here your own selectors if you need.
+.app,
+app-dashboard,
+app-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.app-header {
+  flex: 0 0 $navbar-height;
+}
+
+.app-footer {
+  flex: 0 0 $footer-height;
+}
+
+.app-body {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  overflow-x: hidden;
+
+  .main {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .sidebar {
+    // $sidebar-width is the width of the columns
+    flex: 0 0 $sidebar-width;
+    // put the nav on the left
+    order: -1;
+  }
+
+  .aside-menu {
+    // $aside-menu-width is the width of the columns
+    flex: 0 0 $aside-menu-width;
+  }
+}
+
+//
+// header
+//
+.header-fixed {
+  .app-header {
+    position: fixed;
+    z-index: $zindex-sticky;
+    width: 100%;
+  }
+  .app-body {
+    margin-top: $navbar-height;
+  }
+}
+
+//
+// Sidebar
+//
+.sidebar-hidden {
+
+  .sidebar {
+    margin-left: - $sidebar-width;
+  }
+}
+
+.sidebar-fixed {
+
+  .sidebar {
+    position: fixed;
+    width: $sidebar-width;
+    height: 100%;
+
+    .sidebar-nav {
+      height: calc(100vh - #{$navbar-height});
+    }
+  }
+
+  .main, .app-footer {
+    margin-left: $sidebar-width;
+  }
+
+  &.sidebar-hidden {
+
+    .main, .app-footer {
+      margin-left: 0;
+    }
+  }
+}
+
+.sidebar-off-canvas {
+  .sidebar {
+    position: fixed;
+    z-index: $zindex-sticky - 1;
+    height: 100%;
+
+
+    .sidebar-nav {
+      height: calc(100vh - #{$navbar-height});
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .sidebar-compact {
+    .sidebar {
+      flex: 0 0 $sidebar-compact-width;
+    }
+
+    &.sidebar-hidden {
+
+      .sidebar {
+        margin-left: - $sidebar-compact-width;
+      }
+    }
+
+    &.sidebar-fixed {
+
+      .main, .app-footer {
+        margin-left: $sidebar-compact-width;
+      }
+
+      .sidebar {
+        width: $sidebar-compact-width;
+      }
+
+      &.sidebar-hidden {
+
+        .main, .app-footer {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .sidebar-minimized {
+    .sidebar {
+      flex: 0 0 $sidebar-minimized-width;
+    }
+
+    &.sidebar-hidden {
+
+      .sidebar {
+        margin-left: - $sidebar-minimized-width;
+      }
+    }
+
+    &.sidebar-fixed {
+
+      .main, .app-footer {
+        margin-left: $sidebar-minimized-width;
+      }
+
+      .sidebar {
+        width: $sidebar-minimized-width;
+      }
+
+      &.sidebar-hidden {
+
+        .main, .app-footer {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+//
+// Aside Menu
+//
+.aside-menu-hidden {
+
+  .aside-menu {
+    margin-right: - $aside-menu-width;
+  }
+}
+
+.aside-menu-fixed {
+
+  .aside-menu {
+    position: fixed;
+    right: 0;
+    height: 100%;
+
+    .tab-content {
+      height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+    }
+  }
+
+  .main, .app-footer {
+    margin-right: $aside-menu-width;
+  }
+
+  &.aside-menu-hidden {
+
+    .main, .app-footer {
+      margin-right: 0;
+    }
+  }
+}
+
+.aside-menu-off-canvas {
+  .aside-menu {
+    position: fixed;
+    right: 0;
+    z-index: $zindex-sticky - 1;
+    height: 100%;
+
+    .tab-content {
+      height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+    }
+  }
+}
+
+//
+// Footer
+//
+.footer-fixed {
+
+  .app-footer {
+    position: fixed;
+    bottom: 0;
+    z-index: $zindex-sticky;
+    width: 100%;
+  }
+
+  .app-body {
+    margin-bottom: $footer-height;
+  }
+}
+
+//
+// Animations
+//
+.app-header,
+.app-footer,
+.sidebar,
+.main,
+.aside-menu {
+  transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
+}
+
+//
+// Mobile layout
+//
+
+@include media-breakpoint-down(md) {
+
+  .app-header {
+    position: fixed !important;
+    z-index: $zindex-sticky;
+    width: 100%;
+
+    .navbar-toggler {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 70px;
+      height: inherit;
+    }
+
+    .navbar-toggler {
+      @if (lightness( $navbar-brand-bg ) > 40) {
+        color: $navbar-color;
+      } @else {
+        color: #fff;
+      }
+    }
+
+    .navbar-brand {
+      width: 100% !important;
+      margin: 0 auto !important;
+    }
+
+    .navbar-nav {
+      position: absolute;
+      top: 0;
+      right: 15px;
+      height: inherit;
+    }
+  }
+
+  .app-body {
+    margin-top: $navbar-height;
+  }
+
+  .sidebar {
+    position: fixed;
+    width: $mobile-sidebar-width;
+    height: 100%;
+    margin-left: - $mobile-sidebar-width;
+
+    .sidebar-nav,
+    .nav {
+      width: $mobile-sidebar-width !important;
+    }
+  }
+
+  .main, .app-footer {
+    margin-left: 0 !important;
+  }
+
+  .aside-menu {
+    margin-right: - $aside-menu-width;
+  }
+
+  .sidebar-mobile-show {
+
+    .sidebar {
+      width: $mobile-sidebar-width;
+      margin-left: 0;
+
+      .sidebar-nav {
+        height: calc(100vh - #{$navbar-height});
+      }
+    }
+
+    .main {
+      margin-right: - $mobile-sidebar-width !important;
+      margin-left: $mobile-sidebar-width !important;
+    }
+  }
+}

src/scss/core/_loading.scss

@@ -0,0 +1,128 @@
+// Angular Version
+// Make clicks pass-through
+// scss-lint:disable all
+#loading-bar,
+#loading-bar-spinner {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -moz-transition: 350ms linear all;
+  -o-transition: 350ms linear all;
+  -webkit-transition: 350ms linear all;
+  transition: 350ms linear all;
+}
+
+#loading-bar.ng-enter,
+#loading-bar.ng-leave.ng-leave-active,
+#loading-bar-spinner.ng-enter,
+#loading-bar-spinner.ng-leave.ng-leave-active {
+  opacity: 0;
+}
+
+#loading-bar.ng-enter.ng-enter-active,
+#loading-bar.ng-leave,
+#loading-bar-spinner.ng-enter.ng-enter-active,
+#loading-bar-spinner.ng-leave {
+  opacity: 1;
+}
+
+#loading-bar .bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20002;
+  width: 100%;
+  height: 2px;
+  background: $brand-primary;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+  -moz-transition: width 350ms;
+  -o-transition: width 350ms;
+  -webkit-transition: width 350ms;
+  transition: width 350ms;
+}
+
+// Fancy blur effect
+#loading-bar .peg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 70px;
+  height: 2px;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  border-radius: 100%;
+  -moz-box-shadow: #29d 1px 0 6px 1px;
+  -ms-box-shadow: #29d 1px 0 6px 1px;
+  -webkit-box-shadow: #29d 1px 0 6px 1px;
+  box-shadow: #29d 1px 0 6px 1px;
+  opacity: .45;
+}
+
+#loading-bar-spinner {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 10002;
+  display: block;
+}
+
+#loading-bar-spinner .spinner-icon {
+  width: 14px;
+  height: 14px;
+
+  border:  solid 2px transparent;
+  border-top-color:  #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -moz-animation:    loading-bar-spinner 400ms linear infinite;
+  -ms-animation:     loading-bar-spinner 400ms linear infinite;
+  -o-animation:      loading-bar-spinner 400ms linear infinite;
+  -webkit-animation: loading-bar-spinner 400ms linear infinite;
+  animation:         loading-bar-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes loading-bar-spinner {
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-moz-keyframes loading-bar-spinner {
+  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-o-keyframes loading-bar-spinner {
+  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-ms-keyframes loading-bar-spinner {
+  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes loading-bar-spinner {
+  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
+  100% { transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+//Ajax & Static Version
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.pace-inactive {
+  display: none;
+}
+
+.pace .pace-progress {
+  position: fixed;
+  top: 0;
+  right: 100%;
+  z-index: 2000;
+  width: 100%;
+  height: 2px;
+  background: $brand-primary;
+}

src/scss/core/_mixins.scss

@@ -0,0 +1,116 @@
+@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  border: 0;
+  @include border-radius($border-radius);
+
+  &::before {
+    width: ($padding-y * 2) + ($font-size * $line-height);
+    height: ($padding-y * 2) + ($font-size * $line-height);
+    padding: $padding-y 0;
+    font-size: $font-size;
+    line-height: $line-height;
+    @include border-radius($border-radius);
+  }
+
+  span {
+    margin-left: ($padding-y * 2) + ($font-size * $line-height);
+  }
+
+  &.icon {
+    width: ($padding-y * 2) + ($font-size * $line-height);
+    height: ($padding-y * 2) + ($font-size * $line-height);
+  }
+}
+
+@mixin avatar($width, $status-width) {
+  position: relative;
+  display: inline-block;
+  width: $width;
+
+  .img-avatar {
+    width: $width;
+    height: $width;
+  }
+
+  .avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: $status-width;
+    height: $status-width;
+    border: 1px solid #fff;
+    border-radius: 50em;
+  }
+}
+
+@mixin borders($borders) {
+  @each $border in $borders {
+    $direction: nth($border, 1);
+    @if $direction == "all" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border: $size $style $color;
+    } @else if $direction == "top" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-top: $size $style $color;
+    } @else if $direction == "right" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-right: $size $style $color;
+    } @else if $direction == "bottom" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-bottom: $size $style $color;
+    } @else if $direction == "left" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-left: $size $style $color;
+    }
+  }
+}
+
+@mixin sidebar-width($borders, $width) {
+  $sidebar-width: $width;
+
+  @each $border in $borders {
+    $direction: nth($border, 1);
+    @if $direction == "all" {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: ($sidebar-width - (2 * $size));
+    } @else if $direction == "right" {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: $sidebar-width - $size;
+    } @else if $direction == "left" {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: $sidebar-width - $size;
+    }
+    width: $sidebar-width;
+  }
+}
+
+@mixin bg-variant($parent, $color) {
+  #{$parent} {
+    @include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
+    color: #fff !important;
+    background-color: $color !important;
+  }
+  a#{$parent} {
+    @include hover-focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}
+
+@mixin card-accent-variant($color) {
+  border-top-width: 2px;
+  border-top-color: $color;
+}

src/scss/core/_modal.scss

@@ -0,0 +1,13 @@
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+  .modal-#{$variant} {
+
+    .modal-content {
+      border-color: $color;
+    }
+
+    .modal-header {
+      color: #fff;
+      background-color: $color;
+    }
+  }
+}

src/scss/core/_nav.scss

@@ -0,0 +1,32 @@
+.nav-tabs {
+  .nav-link {
+    color: $gray;
+    &.active {
+      color: $gray-dark;
+      background: #fff;
+      border-color: $border-color;
+      border-bottom-color: #fff;
+      &:focus {
+        background: #fff;
+        border-color: $border-color;
+        border-bottom-color: #fff;
+      }
+    }
+  }
+}
+
+.tab-content {
+  margin-top: -1px;
+  background: #fff;
+  border: 1px solid $border-color;
+  .tab-pane {
+    padding: $spacer;
+  }
+}
+
+.card-block {
+  .tab-content {
+    margin-top: 0;
+    border: 0;
+  }
+}

src/scss/core/_navbar.scss

@@ -0,0 +1,93 @@
+.app-header.navbar {
+  position: relative;
+  flex-direction: row;
+  height: $navbar-height;
+  margin: 0;
+  padding: 0;
+  background-color: $navbar-bg;
+  @include borders($navbar-border);
+
+  .navbar-brand {
+    display: inline-block;
+    width: $navbar-brand-width;
+    height: $navbar-height;
+    padding: $navbar-padding-y $navbar-padding-x;
+    margin-right: 0;
+    background-color: $navbar-brand-bg;
+    background-image: $navbar-brand-logo;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: $navbar-brand-logo-size;
+    @include borders($navbar-brand-border);
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav-item {
+    position: relative;
+    min-width: 50px;
+    margin: 0 !important;
+    text-align: center;
+
+    .nav-link {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      .badge {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -16px;
+        margin-left: 0;
+      }
+
+      > .img-avatar {
+        height: $navbar-height - 20px;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    padding-bottom: 0;
+    line-height: $line-height-base;
+  }
+
+  .dropdown-item {
+    min-width: 180px;
+  }
+}
+
+.navbar-brand {
+  color: $navbar-active-color;
+
+  @include hover-focus {
+    color: $navbar-active-color;
+  }
+}
+
+.navbar-nav {
+  .nav-link {
+    color: $navbar-color;
+
+    @include hover-focus {
+      color: $navbar-hover-color;
+    }
+  }
+
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    @include plain-hover-focus {
+      color: $navbar-active-color;
+    }
+  }
+}
+
+.navbar-divider {
+  background-color: rgba(0,0,0,.075);
+}

src/scss/core/_others.scss

@@ -0,0 +1,4 @@
+// scss-lint:disable QualifyingElement
+hr.transparent {
+  border-top: 1px solid transparent;
+}

src/scss/core/_progress.scss

@@ -0,0 +1,15 @@
+.progress-xs {
+  height: 4px;
+}
+
+.progress-sm {
+  height: 8px;
+}
+
+// White progress bar
+.progress-white {
+  background-color: rgba(255,255,255,.2) !important;
+  .progress-bar {
+    background-color: #fff;
+  }
+}

src/scss/core/_rtl.scss

@@ -0,0 +1,282 @@
+//
+// RTL Support
+//
+// scss-lint:disable NestingDepth, SelectorDepth
+*[dir="rtl"] {
+  direction: rtl;
+  unicode-bidi: embed;
+
+  ul {
+    -webkit-padding-start: 0;
+  }
+
+  table tr th {
+    text-align: right;
+  }
+
+  // Breadcrumb
+
+  .breadcrumb-item {
+    float: right;
+  }
+
+  .breadcrumb-menu {
+    right: auto;
+    left: $breadcrumb-padding-x;
+  }
+
+  // Dropdown
+  .dropdown-item {
+    text-align: right;
+
+    i {
+      margin-right: -10px;
+      margin-left: 10px;
+    }
+
+    .badge {
+      right: auto;
+      left: 10px;
+    }
+  }
+
+  //
+  // Sidebar
+  //
+  .sidebar-hidden {
+
+    .sidebar {
+      margin-right: - $sidebar-width;
+    }
+  }
+
+  .sidebar-fixed {
+
+    .main, .app-footer {
+      margin-right: $sidebar-width;
+    }
+
+    &.sidebar-hidden {
+
+      .main, .app-footer {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .sidebar-minimized {
+    .sidebar {
+      flex: 0 0 $sidebar-minimized-width;
+    }
+
+    &.sidebar-hidden {
+
+      .sidebar {
+        margin-left: - $sidebar-minimized-width;
+      }
+    }
+
+    &.sidebar-fixed {
+
+      .main, .app-footer {
+        margin-left: $sidebar-minimized-width;
+      }
+
+      &.sidebar-hidden {
+
+        .main, .app-footer {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  //
+  // Aside Menu
+  //
+  .aside-menu-hidden {
+
+    .aside-menu {
+      // margin-right: 0;
+      margin-left: - $aside-menu-width;
+    }
+  }
+
+  .aside-menu-fixed {
+
+    .aside-menu {
+      right: auto;
+      left: 0;
+    }
+
+    .main, .app-footer {
+      //margin-right: 0;
+      margin-left: $aside-menu-width;
+    }
+
+    &.aside-menu-hidden {
+
+      .main, .app-footer {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .aside-menu-off-canvas {
+    .aside-menu {
+      position: fixed;
+      right: 0;
+      z-index: $zindex-sticky - 1;
+      height: 100%;
+
+      .tab-content {
+        height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+      }
+    }
+  }
+
+  // Sidebar Menu
+  .sidebar {
+    .sidebar-nav {
+      direction: ltr;
+      * {
+        direction: rtl;
+      }
+      .nav {
+        .nav-item {
+          .nav-link {
+            [class^="icon-"], [class*=" icon-"] {
+              margin-right: -4px;
+            }
+            .badge {
+              float: left;
+              margin-top: 2px;
+              // margin-left: 10px;
+            }
+            &.nav-dropdown-toggle {
+              &::before {
+                position: absolute;
+                right: auto !important;
+                left: $sidebar-nav-link-padding-x;
+              }
+            }
+          }
+          &.nav-dropdown {
+            &.open {
+              > .nav-link.nav-dropdown-toggle::before {
+                transform: rotate(90deg);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Horizontal bars
+  .horizontal-bars {
+
+    li {
+
+      .bars {
+        padding-right: 100px;
+        padding-left: 0;
+
+        .progress:first-child {
+          margin-bottom: 2px;
+        }
+      }
+    }
+
+    &.type-2 {
+
+      li {
+
+        i {
+          margin-right: 5px;
+          margin-left: $spacer;
+        }
+
+        .value {
+          float: left;
+          font-weight: 600;
+        }
+
+        .bars {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  // Icon list
+  .icons-list {
+
+    li {
+      position: relative;
+      height: 40px;
+      vertical-align: middle;
+
+      i {
+        float: right;
+      }
+
+      .desc {
+        margin-right: 50px;
+        margin-left: 0;
+      }
+
+      .value {
+        right: auto;
+        left: 45px;
+        text-align: left;
+
+        strong {
+          display: block;
+          margin-top: -3px;
+        }
+      }
+
+      .actions {
+        right: auto;
+        left: 10px;
+      }
+    }
+  }
+
+  // Callouts
+  .callout {
+    border: 0 solid $border-color;
+    border-right-width: .25rem;
+
+    .chart-wrapper {
+      left: 0;
+      float: left;
+    }
+  }
+
+  .callout-default {
+    border-right-color: $text-muted;
+  }
+
+  .callout-primary {
+    border-right-color: $brand-primary;
+  }
+
+  .callout-info {
+    border-right-color: $brand-info;
+  }
+
+  .callout-warning {
+    border-right-color: $brand-warning;
+  }
+
+  .callout-danger {
+    border-right-color: $brand-danger;
+  }
+
+  .callout-success {
+    border-right-color: $brand-success;
+  }
+
+}

src/scss/core/_sidebar.scss

@@ -0,0 +1,425 @@
+// scss-lint:disable NestingDepth, SelectorDepth
+.sidebar {
+  padding: $sidebar-padding;
+  overflow: hidden;
+  color: $sidebar-color;
+  background: $sidebar-bg;
+  @include borders($sidebar-borders);
+
+  .sidebar-close {
+    position: absolute;
+    right: 0;
+    display: none;
+    padding: 0 $spacer;
+    font-size: 24px;
+    font-weight: 800;
+    line-height: $navbar-height;
+    color: $sidebar-color;
+    background: 0;
+    border: 0;
+    opacity: .8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .sidebar-nav {
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    @include sidebar-width($sidebar-borders, $sidebar-width);
+
+    &::-webkit-scrollbar {
+
+      position: absolute;
+      width: 10px;
+      margin-left: -10px;
+      -webkit-appearance: none;
+    }
+
+    // &::-webkit-scrollbar-button {    }
+
+    &::-webkit-scrollbar-track {
+      background-color: lighten($sidebar-bg, 5%);
+      border-right: 1px solid darken($sidebar-bg, 5%);
+      border-left: 1px solid darken($sidebar-bg, 5%);
+    }
+
+    // &::-webkit-scrollbar-track-piece {    }
+
+    &::-webkit-scrollbar-thumb {
+      height: 50px;
+      background-color: darken($sidebar-bg, 10%);
+      background-clip: content-box;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 1px 2px;
+    }
+
+    // &::-webkit-scrollbar-corner {    }
+
+    // &::-webkit-resizer {    }
+  }
+
+  .nav {
+    @include sidebar-width($sidebar-borders, $sidebar-width);
+    flex-direction: column !important;
+
+    .nav-title {
+      padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
+      font-size: 11px;
+      font-weight: 600;
+      color: $sidebar-nav-title-color;
+      text-transform: uppercase;
+    }
+
+    .divider {
+      height: 10px;
+    }
+
+    .nav-item {
+      position: relative;
+      margin: 0;
+      transition: background .3s ease-in-out;
+
+      ul {
+        max-height: 0;
+        padding: 0;
+        margin: 0;
+        overflow-y: hidden;
+        transition: max-height .3s ease-in-out;
+
+        li {
+          padding: 0;
+          list-style: none;
+        }
+      }
+
+      .nav-link {
+        display: block;
+        padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
+        color: $sidebar-nav-link-color;
+        text-decoration: none;
+        background: $sidebar-nav-link-bg;
+        @include borders($sidebar-nav-link-borders);
+        @if $enable-sidebar-nav-rounded {
+          border-radius: $border-radius;
+        }
+
+        &:hover {
+          color: $sidebar-nav-link-hover-color !important;
+          background: $sidebar-nav-link-hover-bg !important;
+          @include borders($sidebar-nav-link-hover-borders);
+
+          i {
+            color: $sidebar-nav-link-hover-icon-color;
+          }
+        }
+
+        &.active {
+          color: $sidebar-nav-link-active-color;
+          background: $sidebar-nav-link-active-bg;
+          @include borders($sidebar-nav-link-active-borders);
+
+          i {
+            color: $sidebar-nav-link-active-icon-color;
+          }
+        }
+
+        [class^="icon-"], [class*=" icon-"] {
+          display: inline-block;
+          margin-top: -4px;
+          vertical-align: middle;
+        }
+
+        i {
+          width: 20px;
+          margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
+          font-size: 14px;
+          color: $sidebar-nav-link-icon-color;
+          text-align: center;
+        }
+
+        .badge {
+          float: right;
+          margin-top: 2px;
+          // margin-left: 10px;
+        }
+
+        &.nav-dropdown-toggle {
+
+          &::before {
+            position: absolute;
+            top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
+            right: $sidebar-nav-link-padding-x;
+            display: block;
+            width: ($font-size-base);
+            height: ($font-size-base);
+            padding: 0;
+            font-size: $font-size-base;
+            line-height: ($font-size-base * 3 / 4);
+            text-align: center;
+            content: "\2039";
+            transition: .3s;
+          }
+        }
+      }
+
+      &.nav-dropdown {
+        &.open {
+          background: $sidebar-nav-dropdown-bg;
+          @include borders($sidebar-nav-dropdown-borders);
+          @if $enable-sidebar-nav-rounded {
+            border-radius: $border-radius;
+          }
+          > ul, > ol {
+            // display: inline;
+            max-height: 1000px;
+          }
+
+          .nav-link {
+            color: $sidebar-nav-dropdown-color;
+            border-left: 0 !important;
+          }
+
+          > .nav-link.nav-dropdown-toggle::before {
+            transform: rotate(-90deg);
+          }
+
+          .nav-dropdown.open {
+            border-left: 0;
+          }
+        }
+        &.nt {
+          transition: 0s !important;
+          > ul, > ol {
+            transition: 0s !important;
+          }
+          .nav-link {
+            &.nav-dropdown-toggle {
+
+              &::before {
+                transition: 0s !important;
+              }
+            }
+          }
+        }
+      }
+
+      .nav-label {
+        display: block;
+        padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
+        color: $sidebar-nav-title-color;
+
+        &:hover {
+          color: $sidebar-color;
+          text-decoration: none;
+        }
+
+        i {
+          width: 20px;
+          margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
+          font-size: 10px;
+          color: $sidebar-nav-link-icon-color;
+          text-align: center;
+          vertical-align: middle;
+        }
+      }
+
+      @if (lightness( $sidebar-bg ) < 40) {
+        .progress {
+          background-color: lighten($sidebar-bg, 15%) !important;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .sidebar-compact {
+    .sidebar {
+      .sidebar-nav {
+        @include sidebar-width($sidebar-borders, $sidebar-compact-width);
+      }
+
+      .nav {
+        @include sidebar-width($sidebar-borders, $sidebar-compact-width);
+
+        .nav-title {
+          text-align: center;
+        }
+
+        .nav-item {
+          width: $sidebar-compact-width;
+          border-left: 0 !important;
+
+          .nav-link {
+            text-align: center;
+
+            i {
+              display: block;
+              width: 100%;
+              margin: $spacer / 4 0;
+              font-size: 24px;
+            }
+
+            .badge {
+              position: absolute;
+              top: 18px;
+              right: 10px;
+            }
+
+            &.nav-dropdown-toggle {
+
+              &::before {
+                top: 30px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-minimized {
+    .hidden-cn {
+      display: none;
+    }
+    .sidebar {
+      z-index: $zindex-sticky - 1;
+
+      &:hover {
+        overflow: visible;
+      }
+
+      .sidebar-nav {
+        overflow: visible;
+        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
+      }
+
+      .nav {
+        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
+
+        .nav-title, .divider {
+          display: none;
+        }
+
+        .nav-item {
+          width: $sidebar-minimized-width;
+          overflow: hidden;
+          border-left: 0 !important;
+
+          ul {
+            background: $sidebar-bg;
+          }
+
+          .nav-link {
+            position: relative;
+            padding-left: 0;
+            margin: 0;
+            white-space: nowrap;
+            border-left: 0 !important;
+
+            &.nav-dropdown-toggle {
+
+              &::before {
+                display: none;
+              }
+            }
+
+            i {
+              display: block;
+              float: left;
+              width: $sidebar-minimized-height;
+              padding: 0;
+              margin: 0 !important;
+              font-size: 18px;
+            }
+
+            .badge {
+              position: absolute;
+              // top: 14px;
+              right: 15px;
+              display: none;
+            }
+
+            &:hover {
+              width: $sidebar-width;
+
+              .badge {
+                display: inline;
+              }
+            }
+          }
+
+          ul {
+            position: absolute;
+            left: $sidebar-minimized-width;
+
+            li {
+              position: relative;
+              padding: 0;
+
+              .nav-link {
+                width: $sidebar-width - $sidebar-minimized-width;
+              }
+
+              ul, ol {
+                position: absolute;
+                top: 0;
+                left: 100%;
+              }
+            }
+          }
+
+          &.nav-dropdown {
+            &.open {
+              background: $sidebar-nav-link-active-bg;
+              > .nav-link i {
+                color: $sidebar-nav-link-active-icon-color;
+              }
+              > ul, > ol {
+                display: none;
+              }
+            }
+          }
+
+          &:hover {
+            width: $sidebar-width + $sidebar-minimized-width;
+            overflow: visible;
+            background: $sidebar-nav-link-hover-bg;
+            transition: 0s;
+
+            > .nav-link {
+              width: $sidebar-width + $sidebar-minimized-width;
+            }
+
+            > ul, > ol {
+              display: inline;
+              max-height: 10000px;
+              transition: 0s;
+
+              li {
+                width: $sidebar-width;
+
+                .nav-link {
+                  width: $sidebar-width;
+                }
+              }
+            }
+
+            &.nav-dropdown {
+              &.open {
+                > ul, > ol {
+                  display: inline;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/scss/core/_switches.scss

@@ -0,0 +1,301 @@
+@mixin switch-size($width, $height, $font-size, $handle-margin) {
+  width: $width;
+  height: $height;
+
+  .switch-label {
+    font-size: $font-size;
+  }
+
+  .switch-handle {
+    width: $height - $handle-margin * 2;
+    height: $height - $handle-margin * 2;
+  }
+
+  .switch-input:checked ~ .switch-handle {
+    left: $width - $height + $handle-margin;
+  }
+}
+
+@mixin switch($type, $width, $height, $font-size, $handle-margin) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: $width;
+  height: $height;
+  background-color: transparent;
+  cursor: pointer;
+
+  .switch-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  .switch-label {
+    position: relative;
+    display: block;
+    height: inherit;
+    @if $type == icon {
+      font-family: FontAwesome;
+    }
+    font-size: $font-size;
+    font-weight: 600;
+    text-transform: uppercase;
+    @if $type == ddd {
+      background-color: $gray-lightest;
+    } @else {
+      background-color: #fff;
+    }
+    border: 1px solid $border-color;
+    border-radius: 2px;
+    transition: opacity background .15s ease-out;
+  }
+  @if $type == text or $type == icon {
+    .switch-label::before,
+    .switch-label::after {
+      position: absolute;
+      top: 50%;
+      width: 50%;
+      margin-top: -.5em;
+      line-height: 1;
+      text-align: center;
+      transition: inherit;
+    }
+    .switch-label::before {
+      right: 1px;
+      color: $gray-lighter;
+      content: attr(data-off);
+    }
+    .switch-label::after {
+      left: 1px;
+      color: #fff;
+      content: attr(data-on);
+      opacity: 0;
+    }
+  }
+  .switch-input:checked ~ .switch-label {
+    //background: $gray-lightest;
+  }
+  .switch-input:checked ~ .switch-label::before {
+    opacity: 0;
+  }
+  .switch-input:checked ~ .switch-label::after {
+    opacity: 1;
+  }
+
+  .switch-handle {
+    position: absolute;
+    top: $handle-margin;
+    left: $handle-margin;
+    width: $height - $handle-margin * 2;
+    height: $height - $handle-margin * 2;
+    background: #fff;
+    border: 1px solid $border-color;
+    border-radius: 1px;
+    transition: left .15s ease-out;
+    @if $type == ddd {
+      border: 0;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
+    }
+  }
+
+  .switch-input:checked ~ .switch-handle {
+    left: $width - $height + $handle-margin;
+  }
+
+
+  @if $type == ddd {
+    @extend .switch-pill;
+  }
+
+  //size variations
+  @if $type == default {
+
+    &.switch-lg {
+      @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == text {
+
+    &.switch-lg {
+      @include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == icon {
+
+    &.switch-lg {
+      @include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == ddd {
+
+    &.switch-lg {
+      @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
+    }
+    &.switch-sm {
+      @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
+    }
+    &.switch-xs {
+      @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
+    }
+  }
+}
+
+@mixin switch-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: $color !important;
+    border-color: darken($color,10%);
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    border-color: darken($color,10%);
+  }
+}
+
+@mixin switch-outline-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: #fff !important;
+    border-color: $color;
+
+    &::after {
+      color: $color;
+    }
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    border-color: $color;
+  }
+}
+
+@mixin switch-outline-alt-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: #fff !important;
+    border-color: $color;
+
+    &::after {
+      color: $color;
+    }
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    background: $color !important;
+    border-color: $color;
+  }
+}
+
+$switch-lg-width: 48px;
+$switch-lg-height: 28px;
+$switch-lg-font-size: 12px;
+
+$switch-width: 40px;
+$switch-height: 24px;
+$switch-font-size: 10px;
+
+$handle-margin: 2px;
+
+$switch-sm-width: 32px;
+$switch-sm-height: 20px;
+$switch-sm-font-size: 8px;
+
+$switch-xs-width: 24px;
+$switch-xs-height: 16px;
+$switch-xs-font-size: 7px;
+
+
+$switch-text-lg-width: 56px;
+$switch-text-lg-height: 28px;
+$switch-text-lg-font-size: 12px;
+
+$switch-text-width: 48px;
+$switch-text-height: 24px;
+$switch-text-font-size: 10px;
+
+$switch-text-sm-width: 40px;
+$switch-text-sm-height: 20px;
+$switch-text-sm-font-size: 8px;
+
+$switch-text-xs-width: 32px;
+$switch-text-xs-height: 16px;
+$switch-text-xs-font-size: 7px;
+
+
+$switch-icon-lg-width: 56px;
+$switch-icon-lg-height: 28px;
+$switch-icon-lg-font-size: 12px;
+
+$switch-icon-width: 48px;
+$switch-icon-height: 24px;
+$switch-icon-font-size: 10px;
+
+$switch-icon-sm-width: 40px;
+$switch-icon-sm-height: 20px;
+$switch-icon-sm-font-size: 8px;
+
+$switch-icon-xs-width: 32px;
+$switch-icon-xs-height: 16px;
+$switch-icon-xs-font-size: 7px;
+
+.switch.switch-default {
+  @include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
+}
+
+.switch.switch-text {
+  @include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
+}
+
+.switch.switch-icon {
+  @include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
+}
+
+.switch.switch-3d {
+  @include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
+}
+
+//pills style
+.switch-pill {
+  .switch-label,
+  .switch-handle {
+    border-radius: 50em !important;
+  }
+
+  .switch-label::before {
+    right: 2px !important;
+  }
+  .switch-label::after {
+    left: 2px !important;
+  }
+}
+
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+  //normal style
+  .switch-#{$variant} {
+    @include switch-variant($color);
+  }
+  //outline style
+  .switch-#{$variant}-outline {
+    @include switch-outline-variant($color);
+  }
+  //outline alternative style
+  .switch-#{$variant}-outline-alt {
+    @include switch-outline-alt-variant($color);
+  }
+}

src/scss/core/_tables.scss

@@ -0,0 +1,20 @@
+.table-outline {
+  border: 1px solid $table-border-color;
+
+  td {
+    vertical-align: middle;
+  }
+}
+
+.table-align-middle {
+
+  td {
+    vertical-align: middle;
+  }
+}
+
+.table-clear {
+  td {
+    border: 0;
+  }
+}

src/scss/core/_temp.scss

@@ -0,0 +1,38 @@
+.pagination-datatables, .pagination {
+  li {
+    @extend .page-item;
+
+    a {
+      @extend .page-link;
+    }
+  }
+}
+
+.label-pill {
+  border-radius: 1rem !important;
+}
+
+// temp fix for Vue-Strap
+
+// Open state for the dropdown
+.open {
+  // Show the menu
+  > .dropdown-menu {
+    display: block;
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// navbar dropdown fix
+.navbar .dropdown-toggle {
+  @extend .nav-link;
+
+  .img-avatar {
+    height: $navbar-height - 20px;
+    margin: 0 10px;
+  }
+}

src/scss/core/_typography.scss

@@ -0,0 +1,36 @@
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.font-xs {
+  font-size: .75rem !important;
+}
+
+.font-sm {
+  font-size: .85rem !important;
+}
+
+.font-lg {
+  font-size: 1rem !important;
+}
+
+.font-xl {
+  font-size: 1.25rem !important;
+}
+
+.font-2xl {
+  font-size: 1.5rem !important;
+}
+
+.font-3xl {
+  font-size: 1.75rem !important;
+}
+
+.font-4xl {
+  font-size: 2rem !important;
+}
+
+.font-5xl {
+  font-size: 2.5rem !important;
+}

src/scss/core/_utilities.scss

@@ -0,0 +1,3 @@
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/display";

src/scss/core/_widgets.scss

@@ -0,0 +1,253 @@
+// .social-box
+.social-box {
+  min-height: 160px;
+  margin-bottom: 2 * $card-spacer-y;
+  text-align: center;
+  background: #fff;
+  border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
+
+  i {
+    display: block;
+    margin: -1px -1px 0;
+    font-size: 40px;
+    line-height: 90px;
+    background: $gray-lighter;
+
+    @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+  }
+
+  .chart-wrapper {
+    height: 90px;
+    margin: -90px 0 0;
+
+    canvas {
+      width: 100% !important;
+      height: 90px !important;
+    }
+  }
+
+  ul {
+    padding: 10px 0;
+    list-style: none;
+
+
+    li {
+      display: block;
+      float: left;
+      width: 50%;
+
+      &:first-child {
+        border-right: 1px solid $border-color;
+      }
+
+      strong {
+        display: block;
+        font-size: 20px;
+      }
+
+      span {
+        font-size: 10px;
+        font-weight: 500;
+        color: $border-color;
+        text-transform: uppercase;
+      }
+    }
+  }
+
+  &.facebook {
+    i {
+      color: #fff;
+      background: $facebook;
+    }
+  }
+
+  &.twitter {
+    i {
+      color: #fff;
+      background: $twitter;
+    }
+  }
+
+  &.linkedin {
+    i {
+      color: #fff;
+      background: $linkedin;
+    }
+  }
+
+  &.google-plus {
+    i {
+      color: #fff;
+      background: $google-plus;
+    }
+  }
+}
+
+.horizontal-bars {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    position: relative;
+    height: 40px;
+    line-height: 40px;
+    vertical-align: middle;
+
+    .title {
+      width: 100px;
+      font-size: 12px;
+      font-weight: 600;
+      color: $text-muted;
+      vertical-align: middle;
+    }
+
+    .bars {
+      position: absolute;
+      top: 15px;
+      width: 100%;
+      padding-left: 100px;
+
+      .progress:first-child {
+        margin-bottom: 2px;
+      }
+    }
+
+    &.legend {
+      text-align: center;
+
+      .badge {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        padding: 0;
+      }
+    }
+
+    &.divider {
+      height: 40px;
+
+      i {
+        margin: 0 !important;
+      }
+    }
+  }
+
+  &.type-2 {
+
+    li {
+      overflow: hidden;
+
+      i {
+        display: inline-block;
+        margin-right: $spacer;
+        margin-left: 5px;
+        font-size: 18px;
+        line-height: 40px;
+      }
+
+      .title {
+        display: inline-block;
+        width: auto;
+        margin-top: -9px;
+        font-size: $font-size-base;
+        font-weight: normal;
+        line-height: 40px;
+        color: $body-color;
+      }
+
+      .value {
+        float: right;
+        font-weight: 600;
+      }
+
+      .bars {
+        position: absolute;
+        top: auto;
+        bottom: 0;
+        padding: 0;
+      }
+    }
+  }
+}
+
+.icons-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    position: relative;
+    height: 40px;
+    vertical-align: middle;
+
+    i {
+      display: block;
+      float: left;
+      width: 35px !important;
+      height: 35px !important;
+      margin: 2px;
+      line-height: 35px !important;
+      text-align: center;
+    }
+
+    .desc {
+      height: 40px;
+      margin-left: 50px;
+      border-bottom: 1px solid $border-color;
+
+      .title {
+        padding: 2px 0 0;
+        margin: 0;
+      }
+      small {
+        display: block;
+        margin-top: -4px;
+        color: $text-muted;
+      }
+    }
+
+    .value {
+      position: absolute;
+      top: 2px;
+      right: 45px;
+      text-align: right;
+
+      strong {
+        display: block;
+        margin-top: -3px;
+      }
+    }
+
+    .actions {
+      position: absolute;
+      top: -4px;
+      right: 10px;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+
+      i {
+        float: none;
+        width: auto;
+        height: auto;
+        padding: 0;
+        margin: 0;
+        line-height: normal;
+      }
+    }
+
+    &.divider {
+      height: 40px;
+
+      i {
+        width: auto;
+        height: auto;
+        margin: 2px 0 0;
+        font-size: 18px;
+      }
+    }
+  }
+}

src/scss/core/utilities/_background.scss

@@ -0,0 +1,8 @@
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-inverse {
+  color: #fff;
+}

src/scss/core/utilities/_borders.scss

@@ -0,0 +1,18 @@
+//border
+@each $prop, $abbrev in (border: b) {
+  @each $size in (0,1,2) {
+    @if $size == 0 {
+      .#{$abbrev}-a-#{$size} { #{$prop}:        0 !important; } // a = All sides
+      .#{$abbrev}-t-#{$size} { #{$prop}-top:    0 !important; }
+      .#{$abbrev}-r-#{$size} { #{$prop}-right:  0 !important; }
+      .#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
+      .#{$abbrev}-l-#{$size} { #{$prop}-left:   0 !important; }
+    } @else {
+      .#{$abbrev}-a-#{$size} { #{$prop}:        $size * $border-width solid $border-color !important; } // a = All sides
+      .#{$abbrev}-t-#{$size} { #{$prop}-top:    $size * $border-width solid $border-color !important; }
+      .#{$abbrev}-r-#{$size} { #{$prop}-right:  $size * $border-width solid $border-color !important; }
+      .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
+      .#{$abbrev}-l-#{$size} { #{$prop}-left:   $size * $border-width solid $border-color !important; }
+    }
+  }
+}

src/scss/core/utilities/_display.scss

@@ -0,0 +1,18 @@
+//
+// Utilities for common `display` values
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-down($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .d#{$infix}-down-none         { display: none !important; }
+    // .d#{$infix}-inline       { display: inline !important; }
+    // .d#{$infix}-inline-block { display: inline-block !important; }
+    // .d#{$infix}-block        { display: block !important; }
+    // .d#{$infix}-table        { display: table !important; }
+    // .d#{$infix}-table-cell   { display: table-cell !important; }
+    // .d#{$infix}-flex         { display: flex !important; }
+    // .d#{$infix}-inline-flex  { display: inline-flex !important; }
+  }
+}