tabler v1

scss/layout/_core.scss

@@ -0,0 +1,3 @@
+body {
+  background: $body-bg;
+}

scss/layout/_grid.scss

@@ -0,0 +1,20 @@
+.container {
+  @include make-container-breakpoints();
+}
+
+@each $name, $value in (0: 0, xs: .25rem, sm: .5rem, lg: 1rem, xl: 1.5rem) {
+  .row-#{$name} {
+    margin-right: (-$value);
+    margin-left: -($value);
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: $value;
+      padding-left: $value;
+    }
+
+    .card {
+      margin-bottom: 2 * $value;
+    }
+  }
+}

scss/layout/_header.scss

@@ -0,0 +1,7 @@
+.header,
+.topnav {
+  height: 4rem;
+  color: $text-muted;
+  background: #fff;
+  border-bottom: 1px solid $border-color;
+}

scss/layout/_navbar.scss

@@ -0,0 +1,38 @@
+.navbar {
+  display: flex;
+  min-height: 3.75rem;
+  padding: .75rem 1rem;
+
+  .dropdown-menu-right {
+    right: 0;
+    left: auto;
+  }
+
+  .icon {
+    width: 1rem;
+    height: 1rem;
+    vertical-align: sub;
+  }
+
+  .nav-link {
+    color: inherit;
+    white-space: nowrap;
+  }
+
+  .nav-active-border .nav-link {
+    margin: -.75rem 0;
+    line-height: 2.75rem;
+  }
+
+  .dropdown-menu {
+    margin-top: 0;
+  }
+
+  @at-root .bg-white & .nav-item.active {
+    color: #137eff;
+  }
+}
+
+.navbar-brand {
+  padding: 0;
+}

scss/layout/_page.scss

@@ -0,0 +1,18 @@
+.page-title-box {
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+  margin: 1rem 0;
+  color: $text-muted;
+}
+
+.page-title {
+  margin: 0;
+  font-size: $h4-font-size;
+  font-weight: 300;
+}
+
+.page-title-options {
+  margin-left: auto;
+  color: $text-muted;
+}

scss/layout/_sidebar.scss

@@ -0,0 +1,74 @@
+$sidebar-width: 15rem;
+
+.sidebar {
+  flex: 1 0 15rem;
+  width: $sidebar-width;
+  height: 100%;
+  padding: 1.5rem;
+  background: #fff;
+  border-right: 1px solid $border-color;
+
+  @include media-breakpoint-down(md) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    max-width: 90vw;
+    margin-left: -($sidebar-width);
+    transition: .3s transform;
+
+    @at-root body.sidebar-opened & {
+      transform: translate($sidebar-width, 0);
+    }
+  }
+}
+
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: none;
+  visibility: hidden;
+  background: rgba(0, 0, 0, .1);
+  opacity: 0;
+  backdrop-filter: blur(1px);
+
+  @include media-breakpoint-down(md) {
+    display: block;
+    transition: .3s backdrop-filter, .3s opacity;
+
+    @at-root body.sidebar-opened & {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+}
+
+.sidebar-btn {
+  position: fixed;
+  bottom: 1rem;
+  left: 1rem;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  color: $text-muted !important;
+  background: theme-color-lightest($text-muted);
+  border-radius: 50%;
+  box-shadow: $box-shadow-sm;
+
+  .icon {
+    width: 24px;
+    height: 24px;
+    stroke-width: 1;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: none;
+  }
+}

scss/layout/_sidenav.scss

@@ -0,0 +1,120 @@
+$sidenav-width: 16rem;
+$sidenav-folder-width: 4rem;
+
+@mixin sidenav-folded {
+  flex: 0 0 $sidenav-folder-width;
+  width: $sidenav-folder-width;
+
+  .sidenav-title {
+    display: none;
+  }
+
+  .sidenav-link {
+    position: relative;
+    padding: .75rem 1rem;
+    font-size: 12px;
+    text-align: center;
+
+    .badge {
+      position: absolute;
+      top: .5rem;
+      right: .75rem;
+    }
+  }
+
+  .sidenav-submenu {
+    display: none;
+  }
+
+  .sidenav-link-description {
+    display: none;
+  }
+
+  .sidenav-icon {
+    display: block;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin: 0 auto;
+    stroke-width: 1;
+  }
+}
+
+.sidenav {
+  flex: 0 0 $sidenav-width;
+  width: $sidenav-width;
+  background: #fff;
+  border-right: 1px solid $border-color;
+
+  //background: mix(#fff, $dark, 8%);
+  //color: #fff;
+
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
+  @include media-breakpoint-between(md, lg) {
+    @include sidenav-folded;
+  }
+
+  body.sidebar-folded & {
+    @include sidenav-folded;
+  }
+}
+
+.sidenav-title {
+  display: block;
+  padding: 25px 30px 20px;
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1;
+  color: #3e3f42;
+}
+
+.sidenav-subtitle {
+  padding: .5rem 1.5rem;
+  margin: 1rem 0 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+}
+
+.sidenav-menu,
+.sidenav-submenu {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.sidenav-submenu {
+  display: none;
+  padding-left: 1.5rem;
+}
+
+.sidenav-link {
+  display: flex;
+  align-items: center;
+  padding: .75rem 1.5rem;
+  color: $text-muted;
+  transition: .3s color, .3s background-color;
+
+  &:hover,
+  &.active {
+    color: inherit;
+    text-decoration: none;
+    background: rgba($primary, .05);
+  }
+
+  &.active {
+    color: $primary;
+    border-color: $primary;
+    box-shadow: inset 5px 0 0 -2px $primary;
+  }
+}
+
+.sidenav-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  stroke-width: 1;
+  margin-right: .5rem;
+}

scss/layout/_webfonts.scss

@@ -0,0 +1,9 @@
+@if $google-font-url {
+  @import url($google-font-url);
+}
+
+@if $icon-fonts {
+  @each $icon-font in $icon-fonts {
+    @import url($icon-font);
+  }
+}