Recherche des tweets de réponse avec l'API Tweeter

resources/sass/dashmix/_block.scss

@@ -0,0 +1,464 @@
+//
+// Blocks
+// --------------------------------------------------
+
+.block {
+  margin-bottom: $space-base;
+  background-color: $white;
+  box-shadow: 0 1px 3px rgba(darken($body-bg-dark, 2.5%), .5), 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5);
+
+  & &,
+  .content-side & {
+    box-shadow: none;
+  }
+}
+
+.block-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: .75rem $space-block;
+  transition: opacity .25s ease-out;
+
+  &.block-header-rtl {
+    flex-direction: row-reverse;
+
+    .block-title {
+      text-align: right;
+    }
+
+    .block-options {
+      padding-right: $space-block;
+      padding-left: 0;
+    }
+  }
+
+  &-default {
+    background-color: $body-bg-light;
+  }
+}
+
+.block-title {
+  flex: 1 1 auto;
+  min-height: 1.75rem;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: $font-weight-medium;
+  line-height: 1.75;
+
+  small {
+    font-size: .875rem;
+    line-height: 1.375rem;
+    color: $gray-600;
+  }
+}
+
+.block-content {
+  transition: opacity .25s ease-out;
+  @include content-layout($space-block, $space-block);
+
+  &.block-content-sm {
+    padding-top: $space-block * .5;
+
+    > .pull-t,
+    > .pull-y,
+    > .pull {
+      margin-top: -($space-block * .5);
+    }
+
+    &.block-content-full {
+      padding-bottom: $space-block * .5;
+
+      > .pull-b,
+      > .pull-y,
+      > .pull {
+        margin-bottom: -($space-block * .5);
+      }
+    }
+  }
+}
+
+// Block Variations
+.block {
+  &.block-bordered {
+    border: 1px solid $body-bg-dark;
+    box-shadow: none;
+  }
+
+  &.block-rounded {
+    border-radius: $border-radius;
+
+    > .block-header,
+    > .nav-tabs {
+      @include border-top-radius($border-radius-sm);
+
+      &:last-child {
+        @include border-bottom-radius($border-radius-sm);
+      }
+    }
+
+    &.block-mode-hidden > .block-header.block-header-default {
+      @include border-bottom-radius($border-radius-sm);
+    }
+
+    > .block-content {
+      &:first-child {
+        @include border-top-radius($border-radius-sm);
+      }
+
+      &:last-child {
+        @include border-bottom-radius($border-radius-sm);
+      }
+    }
+
+    > .nav-tabs > .nav-item {
+      &:first-child > .nav-link {
+        border-top-left-radius: $border-radius-sm;
+      }
+
+      &:last-child > .nav-link {
+        border-top-right-radius: $border-radius-sm;
+      }
+    }
+  }
+
+  &.block-themed > .block-header {
+    border-bottom: none;
+    color: $white;
+    background-color: $primary;
+
+    > .block-title {
+      color: rgba($white, .9);
+
+      small {
+        color: rgba($white, .7);
+      }
+    }
+  }
+
+  &.block-transparent {
+    background-color: transparent;
+    box-shadow: none;
+  }
+}
+
+// Block Modes
+.block {
+  &.block-mode-hidden {
+    &.block-bordered > .block-header {
+      border-bottom: none;
+    }
+
+    > .block-content {
+      display: none;
+    }
+  }
+
+  &.block-mode-loading {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      z-index: 9;
+      content: " ";
+      background-color: rgba($white, .85);
+    }
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: -1.5rem 0 0 -1.5rem;
+      width: 3rem;
+      height: 3rem;
+      line-height: 3rem;
+      color: $primary;
+      font-family: Simple-Line-Icons;
+      font-size: 1.125rem;
+      text-align: center;
+      z-index: 10;
+      content: '\e09a';
+      animation: fa-spin 1.75s infinite linear;
+      border-radius: 1.5rem;
+    }
+
+    &.block-mode-hidden::after {
+      margin: -1rem 0 0 -1rem;
+      width: 2rem;
+      height: 2rem;
+      line-height: 2rem;
+    }
+
+    &.block-mode-loading-dark {
+      &::before {
+        background-color: rgba($black, .85);
+      }
+
+      &::after {
+        color: $white;
+      }
+    }
+
+    &.block-mode-loading-location::after {
+      content: '\e06e';
+    }
+
+    &.block-mode-loading-energy::after {
+      content: '\e020';
+    }
+
+    &.block-mode-loading-refresh::after {
+      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
+      font-weight: 900;
+      content: '\f021';
+    }
+
+    &.block-mode-loading-sun::after {
+      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
+      font-weight: 900;
+      content: '\f185';
+    }
+
+    &.block-mode-loading-repeat::after {
+      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
+      font-weight: 900;
+      content: '\f01e';
+    }
+  }
+
+  &.block-mode-fullscreen {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $zindex-block-fullscreen;
+    margin-bottom: 0;
+    overflow-y: auto;
+    backface-visibility: hidden;
+    -webkit-overflow-scrolling: touch;
+
+    &.block-bordered {
+      border: none;
+    }
+
+    &.block-rounded {
+      border-radius: 0;
+    }
+
+    &.block-transparent {
+      background-color: $white;
+    }
+  }
+
+  &.block-mode-pinned {
+    position: fixed;
+    right: .75rem;
+    bottom: 0;
+    margin-bottom: 0 !important;
+    width: 100%;
+    max-width: 300px;
+    z-index: $zindex-block-pinned;
+    box-shadow: 0 0 2rem rgba(0,0,0,.1);
+
+    > .block-content {
+      max-height: 250px;
+      overflow-y: auto;
+    }
+
+    @include media-breakpoint-up(sm) {
+      max-width: 400px;
+    }
+  }
+}
+
+// Block Links
+a.block {
+  display: block;
+  color: $body-color;
+  font-weight: normal;
+  transition: transform .15s ease-out, opacity .15s ease-out, box-shadow .15s ease-out;
+
+  &:hover {
+    color: $body-color;
+    opacity: .65;
+  }
+
+  &:active {
+    opacity: 1;
+  }
+
+  &.block-link-rotate {
+    &:hover {
+      transform: rotate(1deg);
+      opacity: 1;
+    }
+
+    &:active {
+      transform: rotate(0deg);
+    }
+  }
+
+  &.block-link-pop {
+    &:hover {
+      box-shadow: 0 .5rem 2rem darken($light, 8%);
+      transform: translateY(-2px);
+      opacity: 1;
+    }
+
+    &:active {
+      box-shadow: 0 .25rem .75rem darken($light, 1%);
+      transform: translateY(0);
+    }
+  }
+
+  &.block-link-shadow {
+    &:hover {
+      box-shadow: 0 0 2.25rem darken($light, 8%);
+      opacity: 1;
+    }
+
+    &:active {
+      box-shadow: 0 0 1.125rem darken($light, 4%);
+    }
+  }
+}
+
+// Block Effects
+.block {
+  &.block-fx-shadow {
+    box-shadow: 0 0 2.25rem darken($light, 8%);
+    opacity: 1;
+  }
+
+  &.block-fx-pop {
+    box-shadow: 0 .5rem 2rem darken($light, 8%);
+    opacity: 1;
+  }
+
+  &.block-fx-rotate-right {
+    transform: rotate(1deg);
+    opacity: 1;
+  }
+
+  &.block-fx-rotate-left {
+    transform: rotate(-1deg);
+    opacity: 1;
+  }
+}
+
+// Block Options
+.block-options {
+  flex: 0 0 auto;
+  padding-left: $space-block;
+
+  .block-options-item {
+    padding: 0 .25rem;
+    line-height: 1.2;
+
+    .block.block-themed & {
+      color: $white;
+    }
+  }
+
+  .block-options-item,
+  .dropdown {
+    display: inline-block;
+  }
+}
+
+.block-sticky-options {
+  position: relative;
+
+  .block-options {
+    position: absolute;
+    top: .875rem;
+    right: $space-block;
+
+    &.block-options-left {
+      right: auto;
+      left: $space-block;
+      padding-right: 10px;
+      padding-left: 0;
+    }
+  }
+}
+
+.btn-block-option {
+  display: inline-block;
+  padding: .375rem .25rem;
+  line-height: 1;
+  color: $primary;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &.dropdown-toggle:after {
+    position: relative;
+    top: 2px;
+  }
+
+  .si {
+    position: relative;
+    top: 1px;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: $primary-light;
+  }
+
+  @at-root {
+    a#{&}:focus,
+    .active > a#{&},
+    .show > button#{&} {
+      text-decoration: none;
+      color: $primary-light;
+    }
+  }
+
+  &:focus {
+    outline: none !important;
+    color: $primary-light;
+  }
+
+  &:active {
+    color: $primary-lighter;
+  }
+
+  .block.block-themed & {
+    color: $white;
+    opacity: .7;
+
+    &:hover {
+      color: $white;
+      opacity: 1;
+    }
+
+    @at-root {
+      a#{&}:focus,
+      .active > a#{&},
+      .show > button#{&} {
+        color: $white;
+        opacity: 1;
+      }
+    }
+
+    &:focus {
+      color: $white;
+      opacity: 1;
+    }
+
+    &:active {
+      color: $white;
+      opacity: .6;
+    }
+  }
+}

resources/sass/dashmix/_breadcrumb.scss

@@ -0,0 +1,19 @@
+//
+// Breadcrumb
+// --------------------------------------------------
+
+.breadcrumb-item {
+  font-weight: $font-weight-medium;
+}
+
+.breadcrumb.breadcrumb-alt {
+  .breadcrumb-item + .breadcrumb-item::before {
+    position: relative;
+    top: 1px;
+    width: 1rem;
+    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
+    font-weight: 900;
+    color: $gray-400;
+    content: "\f105";
+  }
+}

resources/sass/dashmix/_buttons.scss

@@ -0,0 +1,95 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Fix simple icon position
+.btn .si {
+  position: relative;
+  top: 1px;
+}
+
+// Variant buttons
+.btn-secondary {
+  @include button-variant($gray-700, $gray-700);
+}
+
+// Alternate variant buttons
+.btn-alt-primary {
+  @include button-variant(tint-color($primary, 75%), tint-color($primary, 75%), shade-color($primary, 40%), tint-color($primary, 50%), tint-color($primary, 50%), shade-color($primary, 60%));
+}
+
+.btn-alt-secondary {
+  @include button-variant($light, $light, $body-color-dark, shade-color($light, 10%), shade-color($light, 10%), shade-color($body-color-dark, 15%));
+}
+
+.btn-alt-success {
+  @include button-variant(tint-color($success, 75%), tint-color($success, 75%), shade-color($success, 40%), tint-color($success, 50%), tint-color($success, 50%), shade-color($success, 60%));
+}
+
+.btn-alt-info {
+  @include button-variant(tint-color($info, 75%), tint-color($info, 75%), shade-color($info, 40%), tint-color($info, 50%), tint-color($info, 50%), shade-color($info, 60%));
+}
+
+.btn-alt-warning {
+  @include button-variant(tint-color($warning, 75%), tint-color($warning, 75%), shade-color($warning, 40%), tint-color($warning, 50%), tint-color($warning, 50%), shade-color($warning, 60%));
+}
+
+.btn-alt-danger {
+  @include button-variant(tint-color($danger, 75%), tint-color($danger, 75%), shade-color($danger, 40%), tint-color($danger, 50%), tint-color($danger, 50%), shade-color($danger, 60%));
+}
+
+// Hero variant buttons
+.btn-hero {
+  &.btn-primary {
+    @include button-hero-variant($primary);
+  }
+  
+  &.btn-secondary {
+    @include button-hero-variant($secondary);
+  }
+  
+  &.btn-success {
+    @include button-hero-variant($success);
+  }
+  
+  &.btn-info {
+    @include button-hero-variant($info);
+  }
+  
+  &.btn-warning {
+    @include button-hero-variant($warning);
+  }
+  
+  &.btn-danger {
+    @include button-hero-variant($danger);
+  }
+  
+  &.btn-dark {
+    @include button-hero-variant($dark);
+  }
+  
+  &.btn-light {
+    @include button-hero-variant($light);
+  }
+
+  // Hero size variant buttons
+  &.btn-lg {
+    @include button-size($btn-hero-padding-y-lg, $btn-hero-padding-x-lg, $font-size-sm, $btn-hero-border-radius);
+  }
+
+  &.btn-sm {
+    @include button-size($btn-hero-padding-y-sm, $btn-hero-padding-x-sm, $font-size-sm, $btn-hero-border-radius);
+  }
+}
+
+// Alternate secondary adapts on dark header/sidebar
+.page-header-dark #page-header .btn-alt-secondary,
+.sidebar-dark #sidebar .btn-alt-secondary,
+#sidebar .bg-header-dark .content-header .btn-alt-secondary,
+.page-header-dark.page-header-glass:not(.page-header-scroll) #page-header .btn-alt-secondary,
+html.dark #page-header .btn-alt-secondary,
+html.dark #sidebar .btn-alt-secondary,
+html.dark #sidebar .content-header .btn-alt-secondary,
+html.dark .page-header-glass:not(.page-header-scroll) #page-header .btn-alt-secondary {
+  @include button-variant(tint-color($header-dark-bg, 15%), tint-color($header-dark-bg, 15%), $white, tint-color($header-dark-bg, 25%), tint-color($header-dark-bg, 25%), $white);
+}

resources/sass/dashmix/_card.scss

@@ -0,0 +1,37 @@
+//
+// Cards
+// --------------------------------------------------
+
+.card {
+  &.card-borderless {
+    box-shadow: 0 1px 3px rgba(darken($body-bg-dark, 2.5%), .5), 0 1px 2px rgba(darken($body-bg-dark, 2.5%), .5);
+  }
+
+  &.card-square {
+    border-radius: 0;
+
+    > .list-group:first-child,
+    > .list-group:last-child,
+    > .card-header:first-child,
+    > .card-footer:last-child,
+    .card-img-overlay,
+    .card-img,
+    .card-img-top,
+    .card-img,
+    .card-img-bottom {
+      border-radius: 0;
+    }
+  }
+
+  &.card-borderless {
+    border: 0;
+
+    > .card-header {
+      border-bottom: 0;
+    }
+    
+    > .card-footer {
+      border-top: 0;
+    }
+  }
+}

resources/sass/dashmix/_dark-mode.scss

@@ -0,0 +1,20 @@
+//
+// Dark Mode
+// --------------------------------------------------
+
+// Default Dark mode
+@include color-theme-dark(
+  $primary,
+  $primary-light,
+  $primary-lighter,
+  $sidebar-dark-bg,
+  darken($sidebar-dark-bg, 5%),
+  $light,
+  $body-bg-dark,
+  $body-bg-light,
+  $body-color,
+  $body-color-dark,
+  $body-color-light,
+  $link-color,
+  $link-hover-color,
+);

resources/sass/dashmix/_dropdown.scss

@@ -0,0 +1,48 @@
+//
+// Dropdown
+// --------------------------------------------------
+
+.dropdown-menu {
+  padding-right: .5rem;
+  padding-left: .5rem;
+  box-shadow: $dropdown-box-shadow;
+
+  &.dropdown-menu-md {
+    min-width: 200px;
+  }  
+
+  &.dropdown-menu-lg,
+  &.dropdown-menu-xl,
+  &.dropdown-menu-xxl {
+    min-width: 300px;
+  }
+
+  &.dropdown-menu-mega {
+    transition: transform .3s ease-out, opacity .3s ease-out;
+    opacity: 0;
+    display: block;
+    visibility: hidden;
+    transform: translateY(10px) scale(.98);
+    transform-origin: top left;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    &.dropdown-menu-xl {
+      min-width: 450px;
+    }
+
+    &.dropdown-menu-xxl {
+      min-width: 600px;
+    }
+  }
+}
+
+.dropdown-item {
+  margin-bottom: .25rem;
+  border-radius: $border-radius;
+}

resources/sass/dashmix/_fonts.scss

@@ -0,0 +1,75 @@
+//
+// Fonts
+// --------------------------------------------------
+
+// Import Inter font
+
+// inter-300 - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-300.woff2") format("woff2");
+}
+
+// inter-regular - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-regular.woff2") format("woff2");
+}
+
+// inter-500 - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-500.woff2") format("woff2");
+}
+
+// inter-600 - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-600.woff2") format("woff2");
+}
+
+// inter-700 - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-700.woff2") format("woff2");
+}
+
+// inter-800 - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-800.woff2") format("woff2");
+}
+
+// inter-900 - latin
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: local(""),
+    url("../fonts/inter/inter-v18-latin-900.woff2") format("woff2");
+}

resources/sass/dashmix/_forms.scss

@@ -0,0 +1,8 @@
+//
+// Forms
+// --------------------------------------------------
+
+@import "forms/form-check";
+@import "forms/form-control";
+@import "forms/form-select";
+@import "forms/input-group";

resources/sass/dashmix/_grid.scss

@@ -0,0 +1,33 @@
+//
+// Grid
+// --------------------------------------------------
+
+// Tiny grid gutters
+.row.g-sm {
+  --bs-gutter-x: #{$space-row-gutter-tiny};
+
+  > .col,
+  > [class*="col-"] {
+    padding-left: $space-row-gutter-tiny * .5;
+    padding-right: $space-row-gutter-tiny  * .5;
+  }
+
+  .push,
+  .block,
+  &.items-push > div {
+    margin-bottom: $space-row-gutter-tiny;
+  }
+}
+
+// Responsive grid gutters
+@include media-breakpoint-down(md) {
+  .row:not(.g-sm):not(.g-0) {
+    --bs-gutter-x: #{$space-mobile};
+
+    > .col,
+    > [class*="col-"] {
+      padding-left: $space-mobile * .5;
+      padding-right: $space-mobile * .5;
+    }
+  }
+}

resources/sass/dashmix/_header.scss

@@ -0,0 +1,55 @@
+//
+// Header
+// --------------------------------------------------
+
+#page-header {
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+  background-color: $header-bg;
+}
+
+// Header overlay (used for various reasons eg: loading or search)
+.overlay-header {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $white;
+  opacity: 0;
+  transition: transform .2s ease-in-out, opacity .2s ease-in-out;
+  transform: translateY(-100%);
+  will-change: opacity, transform;
+  z-index: 1;
+
+  &.show {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Content header sections
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  height: $header-height;
+
+  @at-root #page-header & {
+    padding-left: $space-mobile;
+    padding-right: $space-mobile;
+
+    @include media-breakpoint-up(md) {
+      padding-left: $space-base;
+      padding-right: $space-base;
+    }
+  }
+
+  @at-root #sidebar &,
+  #side-overlay & {
+    padding-left: $space-side;
+    padding-right: $space-side;
+  }
+}

resources/sass/dashmix/_helpers.scss

@@ -0,0 +1,10 @@
+//
+// Helpers
+// --------------------------------------------------
+
+@import "helpers/background";
+@import "helpers/borders";
+@import "helpers/display";
+@import "helpers/effects";
+@import "helpers/spacing";
+@import "helpers/text";

resources/sass/dashmix/_hero.scss

@@ -0,0 +1,40 @@
+//
+// Hero
+// --------------------------------------------------
+
+.hero {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  min-height: 500px;
+
+  &.hero-sm {
+    min-height: 300px;
+  }
+
+  &.hero-lg {
+    min-height: 800px;
+  }
+
+  &-inner {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+
+  &-meta {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 1rem 0;
+    text-align: center;
+  }
+}
+
+.hero-static {
+  min-height: 100vh;
+}

resources/sass/dashmix/_images.scss

@@ -0,0 +1,88 @@
+//
+// Image (links and hover options)
+// --------------------------------------------------
+
+// Avatar
+.img-avatar {
+  display: inline-block !important;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+
+  &.img-avatar16 {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.img-avatar20 {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.img-avatar32 {
+    width: 32px;
+    height: 32px;
+  }
+
+  &.img-avatar48 {
+    width: 48px;
+    height: 48px;
+  }
+
+  &.img-avatar96 {
+    width: 96px;
+    height: 96px;
+  }
+
+  &.img-avatar128 {
+    width: 128px;
+    height: 128px;
+  }
+
+  &-thumb {
+    margin: .25rem;
+    box-shadow: 0 0 0 .25rem rgba(255,255,255,.3);
+  }
+
+  &.img-avatar-rounded {
+    border-radius: .25rem;
+  }
+}
+
+// Image Thumb
+.img-thumb {
+  padding: .375rem;
+  background-color: $white;
+  border-radius: .25rem;
+}
+
+// Image Link
+.img-link {
+  display: inline-block;
+  transition: transform .25s ease-out, opacity .25s ease-out;
+
+  &:hover {
+    transform: scale(1.02);
+    opacity: .75;
+  }
+
+  &:active {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &.img-link-simple:hover {
+    transform: scale(1);
+  }
+}
+
+.img-link-zoom-in {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+
+// Responsive
+.img-fluid.img-fluid-100,
+.img-fluid-100 .img-fluid {
+  width: 100%;
+}

resources/sass/dashmix/_item.scss

@@ -0,0 +1,76 @@
+//
+// Item
+// --------------------------------------------------
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  transition: opacity .25s ease-out, transform .25s ease-out;
+
+  @at-root {
+    a#{&} {
+      will-change: opacity;
+
+      &:hover,
+      &:focus {
+        opacity: .6;
+      }
+
+      &:active {
+        opacity: 1;
+      }
+
+      &.item-link-pop {
+        will-change: transform;
+
+        &:hover,
+        &:focus {
+          opacity: 1;
+          transform: scale(1.1);
+        }
+
+        &:active {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
+  &.item-tiny {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &.item-2x {
+    width: 6rem;
+    height: 6rem;
+  }
+
+  &.item-3x {
+    width: 8rem;
+    height: 8rem;
+  }
+
+  &.item-circle {
+    border-radius: 50%;
+  }
+
+  &.item-rounded {
+    border-radius: $border-radius;
+  }
+
+  &.item-rounded-lg {
+    border-radius: 1.75rem;
+
+    &.item-2x {
+      border-radius: 2.25rem;
+    }
+
+    &.item-3x {
+      border-radius: 3rem;
+    }
+  }
+}

resources/sass/dashmix/_layout-variations.scss

@@ -0,0 +1,238 @@
+//
+// Layout Variations
+// --------------------------------------------------
+
+#page-container {
+  // Main content
+  > #page-header .content-header,
+  > #page-header .content,
+  > #main-container .content,
+  > #page-footer .content {
+    max-width: $space-main-max-width;
+  }
+
+  @include media-breakpoint-up(xl) {
+    &.main-content-narrow {
+      > #page-header .content-header,
+      > #page-header .content,
+      > #main-container .content,
+      > #page-footer .content {
+        width: $space-narrow;
+      }
+    }
+  }
+
+  &.main-content-boxed {
+    > #page-header .content-header,
+    > #page-header .content,
+    > #main-container .content,
+    > #page-footer .content {
+      max-width: $space-boxed;
+    }
+  }
+
+  // Page header
+  &.page-header-dark #page-header,
+  html.dark & #page-header {
+    color: darken($body-color-light, 8%);
+    background-color: $header-dark-bg;
+  }
+
+  &.page-header-glass {
+    #page-header {
+      position: absolute;
+      background-color: transparent;
+    }
+
+    html.dark & #page-header {
+      background-color: transparent;
+    }
+
+    &.page-header-fixed {
+      #page-header {
+        transition: background-color .2s linear;
+        will-change: background-color;
+        box-shadow: none;
+      }
+
+      &.page-header-scroll #page-header {
+        background-color: rgba($header-bg, .9);
+        box-shadow: 0 .25rem .625rem rgba(0,0,0,.02);
+        backdrop-filter: blur(1rem);
+      }
+
+      &.page-header-scroll.page-header-dark #page-header,
+      html.dark &.page-header-scroll #page-header {
+        background-color: rgba($header-dark-bg, .9);
+        box-shadow: none;
+        backdrop-filter: blur(1rem);
+      }
+    }
+
+    #main-container,
+    &.page-header-fixed #main-container {
+      padding-top: 0;
+    }
+  }
+
+  &.page-header-fixed {
+    #page-header {
+      position: fixed;
+      box-shadow: 0 5px 10px rgba(0,0,0,.02);
+    }
+
+    &.page-header-dark #page-header,
+    html.dark & #page-header {
+      box-shadow: none;
+    }
+
+    #main-container {
+      padding-top: $header-height;
+    }
+  }
+
+  &.page-header-fixed,
+  &.page-header-glass {
+    #page-header {
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: $zindex-fixed;
+      min-width: 320px;
+      max-width: 100%;
+      width: auto;
+    }
+
+    @include media-breakpoint-up(lg) {
+      &.sidebar-o #page-header {
+        padding-left: $sidebar-width;
+
+        .overlay-header {
+          left: $sidebar-width;
+        }
+      }
+
+      &.sidebar-r.sidebar-o #page-header {
+        padding-right: $sidebar-width;
+        padding-left: 0;
+
+        .overlay-header {
+          right: $sidebar-width;
+          left: 0;
+        }
+      }
+
+      // Mini Sidebar
+      &.sidebar-mini.sidebar-o #page-header {
+        padding-left: $sidebar-mini-width;
+
+        .overlay-header {
+          left: $sidebar-mini-width;
+        }
+      }
+
+      &.sidebar-mini.sidebar-r.sidebar-o #page-header {
+        padding-right: $sidebar-mini-width;
+        padding-left: 0;
+
+        .overlay-header {
+          right: $sidebar-mini-width;
+          left: 0;
+        }
+      }
+    }
+  }
+
+  // Page Footer
+  &.page-footer-fixed {
+    #page-footer {
+      position: fixed;
+      height: $footer-height;
+    }
+
+    #main-container {
+      padding-bottom: $footer-height;
+    }
+
+    #page-footer {
+      bottom: 0;
+      right: 0;
+      left: 0;
+      z-index: $zindex-fixed;
+      min-width: 320px;
+      max-width: 100%;
+      width: auto;
+    }
+
+    @include media-breakpoint-up(lg) {
+      &.sidebar-o #page-footer {
+        padding-left: $sidebar-width;
+      }
+
+      &.sidebar-r.sidebar-o #page-footer {
+        padding-right: $sidebar-width;
+        padding-left: 0;
+      }
+    }
+  }
+
+  // Sidebar and Side Overlay
+  &.sidebar-dark #sidebar,
+  html.dark & #sidebar {
+    color: $body-color-light;
+    background-color: $sidebar-dark-bg;
+    box-shadow: none;
+  }
+
+  // Side Scroll
+  &.side-scroll {
+    #sidebar .js-sidebar-scroll,
+    #side-overlay {
+      overflow-y: visible;
+    }
+
+    @include media-breakpoint-up(lg) {
+      #sidebar {
+        .content-header,
+        .content-side {
+          width: $sidebar-width !important;
+        }
+      }
+
+      #sidebar.with-mini-nav {
+        .content-header,
+        .content-side {
+          width: $sidebar-width - $sidebar-mini-nav-width !important;
+        }
+      }
+
+      #side-overlay {
+        .content-header,
+        .content-side {
+          width: $side-overlay-width !important;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    &.sidebar-o {
+      padding-left: $sidebar-width;
+    }
+
+    &.sidebar-r.sidebar-o {
+      padding-right: $sidebar-width;
+      padding-left: 0;
+    }
+
+    // Mini Sidebar
+    &.sidebar-mini.sidebar-o {
+      padding-left: $sidebar-mini-width;
+    }
+
+    &.sidebar-mini.sidebar-o.sidebar-r {
+      padding-right: $sidebar-mini-width;
+      padding-left: 0;
+    }
+  }
+}

resources/sass/dashmix/_layout.scss

@@ -0,0 +1,90 @@
+//
+// Layout
+// --------------------------------------------------
+
+// Main Structure
+#page-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  width: 100%;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: $light;
+}
+
+#page-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  background-color: rgba($black, .4);
+  z-index: $zindex-page-overlay;
+  opacity: 0;
+  transition: opacity .25s ease-out;
+  transform: translateY(-100%);
+
+  @include media-breakpoint-up(lg) {
+    .side-overlay-o.enable-page-overlay & {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+#main-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  max-width: 100%;
+}
+
+#page-footer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: $footer-height;
+
+  &.footer-static {
+    display: block;
+    min-height: auto;
+  }
+}
+
+// Main Content
+.content {
+  @include content-layout($space-mobile, $space-mobile);
+
+  @include media-breakpoint-up(md) {
+    @include content-layout($space-base, $space-base);
+  }
+
+  @include media-breakpoint-up(xl) {
+    &.content-narrow { width: $space-narrow !important; }
+  }
+
+  &.content-boxed { max-width: $space-boxed !important; }
+
+  &.content-top {
+    padding-top: $header-height + $space-mobile;
+
+    @include media-breakpoint-up(lg) {
+      padding-top: $header-height + $space-base;
+    }
+  }
+}
+
+.content-section-top {
+  padding-top: $header-height;
+}
+
+.content-max-width {
+  max-width: $space-main-max-width;
+}
+
+// Side Content
+.content-side {
+  @include content-layout($space-side, $space-side, hidden);
+}

resources/sass/dashmix/_lists.scss

@@ -0,0 +1,68 @@
+//
+// Lists
+// --------------------------------------------------
+
+// Base List
+.list {
+  @include list-unstyled;
+
+  > li {
+    position: relative;
+  }
+
+  &.list-simple > li,
+  &-li-push > li {
+    margin-bottom: 1.25rem;
+  }
+
+  &.list-simple-mini > li,
+  &-li-push-sm > li {
+    margin-bottom: .625rem;
+  }
+
+  &-icons > li {
+    margin-bottom: 1.25rem;
+    padding-left: .5rem;
+  }
+}
+
+// Activity
+.list-activity {
+  > li {
+    margin-bottom: .75rem;
+    padding-bottom: .375rem;
+    padding-left: 2rem;
+
+    > i:first-child {
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: inline-block;
+      width: 1.25rem;
+      height: 1.25rem;
+      line-height: 1.25rem;
+      text-align: center;
+    }
+  }  
+
+  > li:not(:last-child) {
+    border-bottom: 1px solid $light;
+  }
+}
+
+// Events
+.list-events {
+  > li {
+    margin-bottom: .25rem;
+  }
+
+  .js-event {
+    background-color: $info;
+    transition: transform .3s ease-out;
+
+    &:hover {
+      cursor: move;
+      transform: translateX(.25rem);
+    }
+  }
+}

resources/sass/dashmix/_mixins.scss

@@ -0,0 +1,15 @@
+//
+// Mixins
+// --------------------------------------------------
+
+// Custom mixins and Bootstrap overrides
+@import 'mixins/text-emphasis';
+
+// Custom mixins
+@import 'mixins/alert';
+@import 'mixins/background-variant';
+@import 'mixins/buttons';
+@import 'mixins/content';
+@import 'mixins/theme';
+@import "mixins/theme-dark";
+@import 'mixins/ribbon';

resources/sass/dashmix/_modal.scss

@@ -0,0 +1,61 @@
+//
+// Modal
+// --------------------------------------------------
+
+// Top position
+.modal-dialog.modal-dialog-top {
+  margin-top: 0 !important;
+}
+
+// Modal Transitions
+.modal {
+  &.fade .modal-dialog {
+    transition-duration: .4s;
+
+    &.modal-dialog-popin {
+      transform: scale(1.25, 1.25);
+    }
+
+    &.modal-dialog-popout {
+      transform: scale(.75, .75);
+    }
+
+    &.modal-dialog-slideup {
+      transform: translate(0, 30%);
+    }
+
+    &.modal-dialog-slideright {
+      transform: translate(-30%, 0);
+    }
+
+    &.modal-dialog-slideleft {
+      transform: translate(30%, 0);
+    }
+
+    &.modal-dialog-fromright {
+      transform: translateX(30%) rotate(10deg) scale(.75);
+    }
+
+    &.modal-dialog-fromleft {
+      transform: translateX(-30%) rotate(-10deg) scale(.75);
+    }
+  }
+
+  &.show .modal-dialog {
+    &.modal-dialog-popin,
+    &.modal-dialog-popout {
+      transform: scale(1, 1);
+    }
+
+    &.modal-dialog-slideup,
+    &.modal-dialog-slideright,
+    &.modal-dialog-slideleft {
+      transform: translate(0, 0);
+    }
+
+    &.modal-dialog-fromright,
+    &.modal-dialog-fromleft {
+      transform: translateX(0) rotate(0) scale(1);
+    }
+  }
+}

resources/sass/dashmix/_nav-main.scss

@@ -0,0 +1,429 @@
+//
+// Main Navigation
+// --------------------------------------------------
+
+.nav-main {
+  @include list-unstyled;
+}
+
+// Headings
+.nav-main-heading {
+  padding-top: 1.5rem;
+  padding-bottom: .2rem;
+  padding-left: .625rem;
+  font-size: .75rem;
+  font-weight: $font-weight-semibold;
+  text-transform: uppercase;
+  letter-spacing: .075rem;
+  color: lighten($body-color, 30%);
+}
+
+// Default links
+.nav-main-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: .5rem .625rem;
+  margin: 2px 0;
+  min-height: 2.25rem;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  line-height: 1.25rem;
+  letter-spacing: .0125em;
+  color: lighten($body-color, 5%);
+  border-radius: $border-radius-sm;
+
+  .nav-main-link-icon {
+    flex: 0 0 auto;
+    display: inline-block;
+    margin-right: .625rem;
+    min-width: 1.25rem;
+    font-size: 1rem;
+    text-align: center;
+    color: $main-nav-link-icon-color;
+  }
+
+  .nav-main-link-name {
+    flex: 1 1 auto;
+    display: inline-block;
+    max-width: 100%;
+  }
+
+  .nav-main-link-badge {
+    flex: 0 0 auto;
+    display: inline-block;
+    margin-left: .625rem;
+    padding-right: .375rem;
+    padding-left: .375rem;
+    font-size: .75rem;
+    min-width: 1.5rem;
+  }
+
+  &:hover,
+    &.active {
+    color: $black;
+    background-color: $main-nav-link-hover-bg;
+  }
+
+  &.nav-main-link-submenu {
+    padding-right: 2rem;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: .625rem;
+      display: block;
+      margin-top: -.5rem;
+      width: 1rem;
+      height: 1rem;
+      line-height: 1rem;
+      text-align: center;
+      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
+      font-weight: 900;
+      transition: opacity $main-nav-transition, transform $main-nav-transition;
+    }
+
+    &::before {
+      content: '\f107';
+      opacity: .3;
+    }
+
+    &::after {
+      content: '\f106';
+      opacity: 0;
+      transform: translateY(-.625rem);
+    }
+  }
+}
+
+// Sub menus
+.nav-main-submenu {
+  padding-left: 2.5rem;
+  list-style: none;
+  height: 0;
+  overflow: hidden;
+  background-color: $main-nav-submenu-bg;
+  @include border-bottom-radius($border-radius-sm);
+
+  .nav-main-item {
+    opacity: 0;
+    transition: opacity $main-nav-transition, transform $main-nav-transition;
+    transform: translateX(1rem);
+  }
+
+  .nav-main-heading {
+    padding-top: 1.25rem;
+    padding-bottom: .25rem;
+  }
+
+  .nav-main-link {
+    margin: 0;
+    padding-top: .375rem;
+    padding-bottom: .375rem;
+    padding-left: 0;
+    font-size: .8125rem;
+    min-height: 2rem;
+    color: lighten($body-color, 20%);
+
+    &:hover,
+      &.active {
+      color: darken($body-color, 7.5%);
+      background-color: transparent;
+    }
+  }
+
+  .nav-main-submenu {
+    padding-left: .75rem;
+  }
+}
+
+// Active sub menu
+.nav-main-item.open {
+  > .nav-main-link-submenu {
+    color: $black;
+    background-color: $main-nav-link-hover-bg;
+    @include border-bottom-radius(0);
+
+    &::before {
+      opacity: 0;
+      transform: translateY(.625rem);
+    }
+
+    &::after {
+      opacity: .6;
+      transform: translateY(0);
+    }
+  }
+
+  > .nav-main-submenu {
+    height: auto;
+    margin-top: -2px;
+    padding-top: .375rem;
+    padding-bottom: .375rem;
+
+    > .nav-main-item {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+
+.nav-main-submenu .nav-main-item.open .nav-main-link {
+  background-color: transparent;
+}
+
+// Nav Main Horizontal
+@include media-breakpoint-up(lg) {
+  .nav-main-horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0;
+
+    // Headings
+    .nav-main-heading {
+      display: none;
+    }
+
+    // Nav li items
+    > .nav-main-item {
+      position: relative;
+      display: inline-block;
+
+      &:not(:last-child) {
+        margin-right: .25rem;
+      }
+    }
+
+    // Sub menus
+    .nav-main-submenu {
+      position: absolute;
+      left: 0;
+      width: 220px;
+      padding-left: 0;
+      z-index: $zindex-dropdown - 5;
+      box-shadow: 0 .25rem 2rem rgba(0,0,0,.08);
+
+      &.nav-main-submenu-right {
+        left: auto;
+        right: 0;
+      }
+
+      .nav-main-link {
+        &.nav-main-link-submenu {
+          &::before {
+            content: '\f105';
+          }
+
+          &::after {
+            content: '\f104';
+          }
+        }
+      }
+
+      .nav-main-item {
+        transform: translateY(-.5rem);
+      }
+
+      .nav-main-link {
+        padding-left: 1rem;
+      }
+    }
+
+    // Active sub menu
+    .nav-main-item.open {
+      > .nav-main-submenu {
+        padding-top: .5rem;
+        padding-bottom: .5rem;
+        overflow: visible;
+
+        > .nav-main-item {
+          transform: translateY(0);
+        }
+      }
+    }
+
+    // Sub menus - 2++ Level
+    .nav-main-submenu .nav-main-submenu {
+      top: -.5rem;
+      left: auto;
+      right: -100%;
+      margin-top: 0;
+    }
+
+    // Menu variations
+    &.nav-main-horizontal-center {
+      justify-content: center;
+    }
+
+    &.nav-main-horizontal-justify {
+      > .nav-main-item {
+        flex: 1 1 auto;
+      }
+    }
+
+    &.nav-main-hover {
+      .nav-main-item:hover {
+        > .nav-main-link-submenu {
+          color: $black;
+          background-color: $main-nav-link-hover-bg;
+          @include border-bottom-radius(0);
+
+          &::before {
+            opacity: 0;
+            transform: translateY(.625rem);
+          }
+
+          &::after {
+            opacity: .6;
+            transform: translateY(0);
+          }
+        }
+
+        > .nav-main-submenu {
+          height: auto;
+          margin-top: -2px;
+          padding-top: .5rem;
+          padding-bottom: .5rem;
+          overflow: visible;
+
+          .nav-main-submenu {
+            margin-top: 0;
+          }
+
+          > .nav-main-item {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Dark Variation
+.nav-main-dark,
+.sidebar-dark #sidebar,
+.page-header-dark #page-header,
+html.dark #sidebar,
+html.dark #page-header,
+html.dark #side-overlay,
+html.dark #main-container {
+  // Headings
+  .nav-main-heading {
+    color: lighten($sidebar-dark-bg, 30%);
+  }
+
+  // Default links
+  .nav-main-link {
+    color: lighten($sidebar-dark-bg, 55%);
+
+    > .nav-main-link-icon {
+      color: $main-nav-link-icon-dark-color;
+    }
+
+    &:hover,
+    &.active {
+      color: $white;
+      background-color: $main-nav-link-dark-hover-bg;
+    }
+  }
+
+  // Sub menus
+  .nav-main-submenu {
+    background-color: $main-nav-submenu-dark-bg;
+
+    .nav-main-link {
+      color: lighten($sidebar-dark-bg, 45%);
+
+      &:hover,
+      &.active {
+        color: $white;
+        background-color: transparent;
+      }
+    }
+  }
+
+  // Active sub menu
+  .nav-main-item.open {
+    > .nav-main-link-submenu {
+      color: $white;
+      background-color: $main-nav-link-dark-hover-bg;
+    }
+
+    > .nav-main-submenu {
+      background-color: $main-nav-submenu-dark-bg;
+    }
+  }
+
+  .nav-main-submenu .nav-main-item.open .nav-main-link {
+    background-color: transparent;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .nav-main-dark.nav-main-horizontal,
+  .sidebar-dark #sidebar .nav-main-horizontal,
+  .page-header-dark #page-header .nav-main-horizontal,
+  html.dark #sidebar .nav-main-horizontal,
+  html.dark #page-header .nav-main-horizontal,
+  html.dark #main-container .nav-main-horizontal {
+    .nav-main-heading {
+      color: rgba($white, .5);
+    }
+
+    .nav-main-link {
+      color: rgba($white, .75);
+
+      > .nav-main-link-icon {
+        color: rgba($white, .4);
+      }
+
+      &:hover,
+      &.active {
+        color: $white;
+        background-color: darken($sidebar-dark-bg, 5%);
+      }
+    }
+
+    .nav-main-item.open,
+    .nav-main-item:hover {
+      > .nav-main-link-submenu {
+        color: $white;
+        background-color: darken($sidebar-dark-bg, 5%);
+      }
+
+      > .nav-main-submenu {
+        background-color: darken($sidebar-dark-bg, 5%);
+      }
+    }
+
+    .nav-main-submenu .nav-main-item:hover .nav-main-link {
+      background-color: transparent;
+    }
+  }
+
+  .page-header-dark #page-header .nav-main-horizontal {
+    .nav-main-link {
+      &:hover,
+      &.active {
+        background-color: darken($header-dark-bg, 5%);
+      }
+    }
+
+    .nav-main-item.open,
+    .nav-main-item:hover {
+      > .nav-main-link-submenu {
+        background-color: darken($header-dark-bg, 5%);
+      }
+
+      > .nav-main-submenu {
+        background-color: darken($header-dark-bg, 5%);
+      }
+    }
+
+    .nav-main-submenu .nav-main-item:hover .nav-main-link {
+      background-color: transparent;
+    }
+  }
+}

resources/sass/dashmix/_nav.scss

@@ -0,0 +1,132 @@
+//
+// Nav
+// --------------------------------------------------
+
+// Nav Pills
+.nav-pills {
+  .nav-link {
+    &:hover,
+    &:focus {
+      background-color: $light;
+    }
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    color: $nav-pills-link-active-color;
+    background-color: $nav-pills-link-active-bg;
+  }
+}
+
+// Tabs block variation
+.nav-tabs-block {
+  background-color: $body-bg-light;
+  border-bottom: none;
+
+  .nav-link {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    border-color: transparent;
+    border-radius: 0;
+    margin-bottom: 0;
+
+    &:hover,
+    &:focus {
+      color: $primary;
+      background-color: $light;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $body-color;
+    background-color: $white;
+    border-color: transparent;
+  }
+}
+
+// Tabs block alternative variation
+.nav-tabs-alt {
+  background-color: transparent;
+  border-bottom-color: $body-bg-dark;
+
+  .nav-item {
+    margin-bottom: -2px;
+  }
+
+  .nav-link {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: transparent;
+    border-color: transparent;
+
+    &:hover,
+    &:focus {
+      color: $primary;
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: inset 0 -3px $primary;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $body-color;
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: inset 0 -3px $primary;
+  }
+}
+
+// Various Items Navigation
+.nav-items {
+  @include list-unstyled;
+
+  a {
+    &:hover {
+      background-color: $body-bg-light;
+    }
+
+    &:active {
+      background-color: $light;
+    }
+  }
+
+  > li:not(:last-child) > a {
+    border-bottom: 1px solid $light;
+  }
+}
+
+// Sidebar Mini Nav
+.mini-nav-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $sidebar-mini-nav-width;
+  height: $sidebar-mini-nav-width;
+  color: darken($body-bg-dark, 15%);
+  font-size: 1rem;
+
+  i {
+    transition: transform 0.2s ease-out;
+  }
+
+  &.active {
+    background-color: lighten($sidebar-dark-bg, 6%);
+    color: $white;
+  }
+
+  &:hover {
+    color: $white;
+    background-color: lighten($sidebar-dark-bg, 6%);
+  }
+
+  &:active {
+    color: darken($body-bg-dark, 15%);
+
+    i {
+      transform: scale(0.9);
+    }
+  }
+}

resources/sass/dashmix/_overlay.scss

@@ -0,0 +1,157 @@
+//
+// Overlay
+// --------------------------------------------------
+
+// Icon Overlay
+.overlay-container {
+  position: relative;
+}
+
+.overlay-item {
+  position: absolute;
+  display: inline-block;
+  top: 0;
+  right: 0;
+  line-height: 1;
+
+  .overlay-left & {
+    right: auto;
+    left: 0;
+  }
+
+  .overlay-bottom & {
+    top: auto;
+    bottom: 0;
+  }
+
+  .overlay-center & {
+    top: 50%;
+    right: 50%;
+    transform: translateX(50%) translateY(-50%);
+  }
+}
+
+// Options Overlay
+.options-container {
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  display: block;
+
+  .options-item {
+    transition: transform .4s ease-out;
+    will-change: transform;
+  }
+
+  .options-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    bottom: -2px;
+    left: -2px;
+    z-index: 2;
+    content: '';
+    opacity: 0;
+    visibility: hidden;
+    transition: all .15s ease-in;
+    will-change: opacity, transform;
+
+    &-content {
+      text-align: center;
+    }
+  }
+
+  &:hover {
+    .options-overlay {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .options-overlay {
+      display: none;
+    }
+
+    &:hover .options-overlay {
+      display: flex;
+    }
+  }
+}
+
+// Item hover effects
+.fx-item-zoom-in:hover .options-item {
+  transform: scale(1.2, 1.2);
+}
+
+.fx-item-rotate-r:hover .options-item {
+  transform: scale(1.4) rotate(8deg);
+}
+
+.fx-item-rotate-l:hover .options-item {
+  transform: scale(1.4) rotate(-8deg);
+}
+
+// Overlay hover effects
+.fx-overlay-slide-top {
+  .options-overlay {
+    transform: translateY(100%);
+  }
+
+  &:hover .options-overlay {
+    transform: translateY(0);
+  }
+}
+
+.fx-overlay-slide-right {
+  .options-overlay {
+    transform: translateX(-100%);
+  }
+
+  &:hover .options-overlay {
+    transform: translateX(0);
+  }
+}
+
+.fx-overlay-slide-down {
+  .options-overlay {
+    transform: translateY(-100%);
+  }
+
+  &:hover .options-overlay {
+    transform: translateY(0);
+  }
+}
+
+.fx-overlay-slide-left {
+  .options-overlay {
+    transform: translateX(100%);
+  }
+
+  &:hover .options-overlay {
+    transform: translateX(0);
+  }
+}
+
+.fx-overlay-zoom-in {
+  .options-overlay {
+    transform: scale(0, 0);
+  }
+
+  &:hover .options-overlay {
+    transform: scale(1, 1);
+  }
+}
+
+.fx-overlay-zoom-out {
+  .options-overlay {
+    transform: scale(2, 2);
+  }
+
+  &:hover .options-overlay {
+    transform: scale(1, 1);
+  }
+}

resources/sass/dashmix/_page-loader.scss

@@ -0,0 +1,72 @@
+//
+// Page Loader
+// --------------------------------------------------
+
+#page-loader {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $primary;
+  z-index: 999998;
+  transform: translateY(-100%);
+
+  &.show {
+    transform: translateY(0);
+  }
+
+  &::after,
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    border-radius: 100%;
+    content: '';
+    z-index: 999999;
+  }
+
+  &::after {
+    margin-top: -160px;
+    margin-left: -160px;
+    width: 320px;
+    height: 320px;
+    background-color: rgba($white, .5);
+    border: 4px solid rgba($white, .75);
+    box-shadow: 0 0 100px rgba($black, .15);
+    animation: page-loader-inner 1.25s infinite ease-out;
+  }
+
+  &::before {
+    margin-top: -40px;
+    margin-left: -40px;
+    width: 80px;
+    height: 80px;
+    background-color: rgba($white, 1);
+    animation: page-loader-outer 1.25s infinite ease-in;
+  }
+}
+
+
+@keyframes page-loader-inner {
+  0%, 40% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes page-loader-outer {
+  0% {
+    transform: scale(1);
+  }
+
+  40%, 100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}

resources/sass/dashmix/_pagination.scss

@@ -0,0 +1,12 @@
+//
+// Pagination
+// --------------------------------------------------
+
+.page-link {
+  font-weight: $font-weight-semibold;
+}
+
+.page-item:not(.active) > .page-link:focus {
+  background-color: $body-bg-dark;
+  border-color: $body-bg-dark;
+}

resources/sass/dashmix/_print.scss

@@ -0,0 +1,24 @@
+//
+// Print
+// --------------------------------------------------
+
+@media print {
+  #page-container,
+  #main-container {
+    padding: 0 !important;
+  }
+
+  #page-overlay,
+  #page-loader,
+  #page-header,
+  #page-footer,
+  #sidebar,
+  #side-overlay,
+  .block-options {
+    display: none !important;
+  }
+
+  .block {
+    box-shadow: none !important;
+  }
+}

resources/sass/dashmix/_reboot.scss

@@ -0,0 +1,64 @@
+//
+// Reboot
+// --------------------------------------------------
+
+// Emphasis
+b,
+strong {
+  font-weight: $font-weight-bold;
+}
+
+// Links
+a {
+  transition: color .12s ease-out;
+
+  @include media-breakpoint-up(sm) {
+    &.link-fx {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        content: '';
+        background-color: $link-color;
+        visibility: hidden;
+        transform: scaleX(0);
+        transform-origin: 0 50%;
+        transition: transform .2s ease-out;
+      }
+    }
+  }
+
+  &.link-fx:hover::before,
+  &.link-fx:focus::before {
+    visibility: visible;
+    transform: scaleX(1);
+  }
+}
+
+// Paragraphs
+p {
+  line-height: $paragraph-line-height;
+}
+
+.story p,
+p.story {
+  line-height: $paragraph-line-height;
+  font-size: $font-size-lg;
+  color: $gray-700;
+
+  @include media-breakpoint-up(sm) {
+    line-height: $paragraph-line-height-lg;
+  }
+}
+
+.story {
+  h2,
+  h3,
+  h4 {
+    margin-top: 3rem;
+  }
+}

resources/sass/dashmix/_ribbon.scss

@@ -0,0 +1,147 @@
+//
+// Ribbon
+// --------------------------------------------------
+
+.ribbon {
+  position: relative;
+  min-height: 3.25rem;
+}
+
+.ribbon-box {
+  position: absolute;
+  top: .75rem;
+  right: 0;
+  padding: 0 .75rem;
+  height: 2rem;
+  line-height: 2rem;
+  z-index: 5;
+  font-weight: $font-weight-bold;
+  border-top-left-radius: $border-radius;
+  border-bottom-left-radius: $border-radius;
+
+  &::before {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+  }
+}
+
+// Bookmark variation
+.ribbon-bookmark {
+  .ribbon-box {
+    padding-left: .625rem;
+    border-radius: 0 !important;
+  }
+
+  .ribbon-box::before {
+    top: 0;
+    right: 100%;
+    height: 2rem;
+    border: 1rem solid;
+    border-left-width: .625rem;
+    border-right-width: 0;
+  }
+}
+
+// Modern variation
+.ribbon-modern {
+  .ribbon-box {
+    top: .75rem;
+    right: -.5rem;
+    padding-left: .75rem;
+    padding-right: .75rem;
+    border-radius: $border-radius !important;
+  }
+
+  .ribbon-box::before {
+    display: none;
+  }
+}
+
+// Position variations
+.ribbon-left {
+  .ribbon-box {
+    right: auto;
+    left: 0;
+    border-radius: 0;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &.ribbon-bookmark {
+    .ribbon-box {
+      padding-left: .75rem;
+      padding-right: .625rem;
+    }
+
+    .ribbon-box::before {
+      right: auto;
+      left: 100%;
+      border-left-width: 0;
+      border-right-width: .625rem;
+    }
+  }
+
+  &.ribbon-modern {
+    .ribbon-box {
+      left: -.5rem;
+    }
+  }
+}
+
+.ribbon-bottom {
+  .ribbon-box {
+    top: auto;
+    bottom: .75rem;
+  }
+}
+
+// Color variation
+.ribbon-light {
+  @include ribbon-variation($body-bg-dark, $body-color);
+}
+
+.ribbon-dark {
+  @include ribbon-variation($dark, $white);
+}
+
+.ribbon-primary {
+  @include ribbon-variation($primary, $white);
+}
+
+.ribbon-success {
+  @include ribbon-variation($success, $white);
+}
+
+.ribbon-info {
+  @include ribbon-variation($info, $white);
+}
+
+.ribbon-warning {
+  @include ribbon-variation($warning, $white);
+}
+
+.ribbon-danger {
+  @include ribbon-variation($danger, $white);
+}
+
+.ribbon-glass {
+  .ribbon-box {
+    color: $white;
+    background-color: rgba(255,255,255,.4);
+  }
+
+  &.ribbon-bookmark {
+    .ribbon-box::before {
+      border-color: rgba(255,255,255,.4);
+      border-left-color: transparent;
+    }
+
+    &.ribbon-left .ribbon-box::before {
+      border-color: rgba(255,255,255,.4);
+      border-right-color: transparent;
+    }
+  }
+}

resources/sass/dashmix/_rtl-support.scss

@@ -0,0 +1,145 @@
+//
+// RTL Support
+// --------------------------------------------------
+
+#page-container.rtl-support {
+  direction: rtl;
+  text-align: right;
+
+  // Breadcrumb
+  .breadcrumb.breadcrumb-alt {
+    .breadcrumb-item + .breadcrumb-item::before {
+      content: "\f104";
+    }
+  }
+
+  .breadcrumb-item + .breadcrumb-item {
+    padding-right: .5rem;
+    padding-left: 0;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    float: right;
+    padding-right: 0;
+    padding-left: .5rem;
+  }
+
+  // Mini Sidebar
+  @include media-breakpoint-up(lg) {
+    &.sidebar-mini.sidebar-o.sidebar-r #sidebar {
+      .content-side,
+      .content-header {
+        transform: translateX(-($sidebar-width - $sidebar-mini-width)) translateY(0) translateZ(0);
+      }
+
+      &:hover {
+        .content-side,
+        .content-header {
+          transform: translateX(0);
+        }
+      }
+
+      &:not(:hover) {
+        .nav-main {
+          transform: translateX($space-side);
+
+          .nav-main-link-icon {
+            transform: translateX(-1rem);
+          }
+        }
+      }
+    }
+  }
+
+  // Nav Main
+  .nav-main {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .nav-main-link {
+    .nav-main-link-icon {
+      margin-right: 0;
+      margin-left: .625rem;
+    }
+
+    .nav-main-link-badge {
+      margin-right: .625rem;
+      margin-left: auto;
+      padding-right: .375rem;
+      padding-left: .375rem;
+      font-size: .75rem;
+    }
+
+    &.nav-main-link-submenu {
+      padding-right: .625rem;
+      padding-left: 2rem;
+
+      &::before,
+      &::after {
+        right: auto;
+        left: .625rem;
+      }
+    }
+  }
+
+  .nav-main-submenu {
+    padding-right: 2.25rem;
+    padding-left: 0;
+
+    .nav-main-link {
+      padding-right: 0;
+      padding-left: .625rem;
+
+      &.nav-main-link-submenu {
+        padding-left: 2rem;
+      }
+    }
+
+    .nav-main-submenu {
+      padding-right: .75rem;
+      padding-left: 0;
+    }
+  }
+
+  // Nav Main Horizontal
+  @include media-breakpoint-up(lg) {
+    .nav-main-horizontal {
+      // Sub menus
+      .nav-main-submenu {
+        left: auto;
+        right: 0;
+        padding-left: 0;
+        padding-right: 0;
+
+        &.nav-main-submenu-left {
+          right: auto;
+          left: 0;
+        }
+
+        .nav-main-link {
+          padding-left: .625rem;
+          padding-right: 1rem;
+        }
+
+        .nav-main-link {
+          &.nav-main-link-submenu {
+            &::before {
+              content: '\f104';
+            }
+
+            &::after {
+              content: '\f105';
+            }
+          }
+        }
+      }
+
+      // Sub menus - 2++ Level
+      .nav-main-submenu .nav-main-submenu {
+        left: -100%;
+        right: auto;
+      }
+    }
+  }
+}

resources/sass/dashmix/_side-overlay.scss

@@ -0,0 +1,62 @@
+//
+// Side Overlay
+// --------------------------------------------------
+
+#side-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $zindex-side-overlay;
+  width: 100%;
+  height: 100%;
+  background-color: $side-overlay-bg;
+  overflow-y: auto;
+  transform: translateX(100%) translateY(0) translateZ(0);
+  opacity: 0;
+  -webkit-overflow-scrolling: touch;
+  will-change: transform;
+
+  .side-trans-enabled & {
+    transition: transform $side-transition, opacity $side-transition;
+  }
+
+  .sidebar-r & {
+    right: auto;
+    left: 0;
+    transform: translateX(-100%) translateY(0) translateZ(0);
+  }
+
+  .side-overlay-o & {
+    transform: translateX(0) translateY(0) translateZ(0);
+    opacity: 1;
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: $side-overlay-width;
+    box-shadow: 0 0 1.5rem rgba(0,0,0,.15);
+    transform: translateX(110%) translateY(0) translateZ(0);
+
+    .sidebar-r & {
+      transform: translateX(-110%) translateY(0) translateZ(0);
+    }
+
+    .side-overlay-hover & {
+      transform: translateX($side-overlay-width - 15px) translateY(0) translateZ(0);
+      opacity: 1;
+    }
+
+    .sidebar-r.side-overlay-hover & {
+      transform: translateX(-($side-overlay-width - 15px)) translateY(0) translateZ(0);
+      opacity: 1;
+    }
+
+    .side-overlay-hover &:hover,
+    .side-overlay-o &,
+    .side-overlay-o.side-overlay-hover & {
+      box-shadow: 0 0 1.25rem rgba($black,.15);
+      transform: translateX(0) translateY(0) translateZ(0);
+      opacity: 1;
+    }
+  }
+}

resources/sass/dashmix/_sidebar.scss

@@ -0,0 +1,179 @@
+//
+// Sidebar
+// --------------------------------------------------
+
+// Mini Sidebar display helper classes
+.smini-visible,
+.smini-visible-block {
+  display: none;
+}
+
+.smini-show {
+  opacity: 0;
+}
+
+.smini-show,
+.smini-hide {
+  transition: opacity $side-transition;
+}
+
+#sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $zindex-sidebar;
+  width: 100%;
+  height: 100%;
+  overflow-y: visible;
+  background-color: $sidebar-bg;
+  transform: translateX(-100%) translateY(0) translateZ(0);
+  -webkit-overflow-scrolling: touch;
+  will-change: transform;
+
+  .side-trans-enabled & {
+    transition: transform $side-transition;
+  }
+
+  &.with-mini-nav {
+    padding-left: $sidebar-mini-nav-width;
+
+    .sidebar-mini-nav {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: $sidebar-mini-nav-width;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      color: $body-color-light;
+      background-color: lighten($sidebar-dark-bg, 3%);
+    }
+  }
+
+  .sidebar-r & {
+    right: 0;
+    left: auto;
+    transform: translateX(100%) translateY(0) translateZ(0);
+
+    &.with-mini-nav {
+      padding-right: $sidebar-mini-nav-width;
+      padding-left: 0;
+    }
+
+    .sidebar-mini-nav {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  .js-sidebar-scroll {
+    height: calc(100% - #{$header-height});
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.full-height {
+      height: 100%;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .sidebar-o-xs & {
+      transform: translateX(0) translateY(0) translateZ(0);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    width: $sidebar-width;
+
+    .sidebar-o & {
+      transform: translateX(0) translateY(0) translateZ(0);
+    }
+
+    // Mini Sidebar
+    .sidebar-mini.sidebar-o & {
+      overflow-x: hidden;
+      transform: translateX(-($sidebar-width - $sidebar-mini-width)) translateY(0) translateZ(0);
+      transition: transform $side-transition;
+    }
+
+    .sidebar-mini.sidebar-o.sidebar-r & {
+      transform: translateX($sidebar-width - $sidebar-mini-width) translateY(0) translateZ(0);
+    }
+
+    .sidebar-mini.sidebar-o & .content-side,
+    .sidebar-mini.sidebar-o & .content-header {
+      width: $sidebar-width;
+      transform: translateX(($sidebar-width - $sidebar-mini-width)) translateY(0) translateZ(0);
+      transition: transform $side-transition;
+      will-change: transform;
+    }
+
+    .sidebar-mini.sidebar-o & .content-header {
+      // Small fix for correct visibility of dropdown menu when hovering over sidebar mini and it is open
+      position: relative;
+      z-index: 1;
+    }
+
+    .sidebar-mini.sidebar-o &:hover,
+    .sidebar-mini.sidebar-o &:hover .content-side,
+    .sidebar-mini.sidebar-o.sidebar-r & .content-side,
+    .sidebar-mini.sidebar-o &:hover .content-header,
+    .sidebar-mini.sidebar-o.sidebar-r & .content-header {
+      transform: translateX(0);
+    }
+
+    // Mini Mode
+    .sidebar-mini.sidebar-o & {
+      // Main navigation
+      .nav-main {
+        &,
+        .nav-main-link-icon {
+          transition: transform $side-transition;
+        }
+
+        .nav-main-heading,
+        .nav-main-link-name,
+        .nav-main-link-badge {
+          transition: opacity $side-transition;
+        }
+      }
+    }
+
+    // Mini Mode (styles do not apply on hover)
+    .sidebar-mini.sidebar-o &:not(:hover) {
+      // Display helper classes
+      .smini-hide { opacity: 0; }
+      .smini-show { opacity: 1; }
+
+      .smini-hidden { display: none; }
+
+      .smini-visible { display: inline-block; }
+      .smini-visible-block { display: block; }
+
+      // Main navigation
+      .nav-main {
+        transform: translateX(-$space-side);
+
+        .nav-main-link-icon {
+          transform: translateX(.75rem);
+        }
+
+        .nav-main-heading,
+        .nav-main-link-name,
+        .nav-main-link-badge {
+          opacity: 0;
+        }
+
+        .nav-main-link.active,
+        .nav-main-item.open > .nav-main-link-submenu {
+          border-radius: 0;
+        }
+
+        > .nav-main-item > .nav-main-submenu { display: none; }
+      }
+    }
+  }
+}

resources/sass/dashmix/_tables.scss

@@ -0,0 +1,43 @@
+//
+// Tables
+// --------------------------------------------------
+
+.table:not(.table-borderless) {
+  // Highlight border color between thead, tbody and tfoot.
+  > :not(:last-child) > :last-child > * {
+    border-bottom-width: 2px;
+  }
+}
+
+.table-vcenter {
+  th,
+  td {
+    vertical-align: middle;
+  }
+}
+
+// Table tools
+.js-table-checkable tbody tr,
+.js-table-sections-header > tr {
+  cursor: pointer;
+}
+
+.js-table-sections-header {
+  > tr > td:first-child > i {
+    transition: transform .15s ease-out;
+  }
+
+  + tbody {
+    display: none;
+  }
+
+  &.show {
+    > tr > td:first-child > i {
+      transform: rotate(90deg);
+    }
+
+    + tbody {
+      display: table-row-group;
+    }
+  }
+}

resources/sass/dashmix/_timeline.scss

@@ -0,0 +1,129 @@
+//
+// Timeline
+// --------------------------------------------------
+
+.timeline {
+  position: relative;
+  padding: 1rem 0;
+  @include list-unstyled();
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 1.375rem;
+    height: 100%;
+    width: .25rem;
+    background-color: $body-bg-dark;
+    content: "";
+    border-radius: $border-radius;
+  }
+}
+
+.timeline-event {
+  position: relative;
+
+  &:not(:last-child) {
+    margin-bottom: $space-base;
+  }
+}
+
+.timeline-event-icon {
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $white;
+  border-radius: 1.5rem;
+  border: .25rem solid $white;
+  z-index: 5;
+  box-shadow: 0 .375rem 1.5rem darken($light, 8%);
+
+  &::before {
+    position:absolute;
+    top: 50%;
+    right: -.625rem;
+    width: 0;
+    height: 0;
+    border-top: .625rem solid transparent;
+    border-bottom: .625rem solid transparent;
+    border-left: .625rem solid $white;
+    content: "";
+    transform: translateY(-50%);
+  }
+}
+
+.timeline-event-block {
+  margin-left: 4rem;
+  margin-bottom: 0 !important;
+}
+
+// Centered Timeline in larger screens
+@include media-breakpoint-up(xl) {
+  .timeline-centered {
+    &::before {
+      left: 50%;
+      margin-left: -.125rem;
+    }
+
+    .timeline-event-icon {
+      left: 50%;
+      margin-left: -1.5rem;
+
+      &::before {
+        right: auto;
+        left: -.625rem;
+        border-right: .625rem solid $white;
+        border-left: none;
+      }
+    }
+
+    .timeline-event-time {
+      position: absolute;
+      display: inline-block;
+      top: 1.5rem;
+      left: 50%;
+      padding: .5rem .5rem .5rem 2rem;
+      width: auto;
+      border-radius: $border-radius;
+      background-color: $white;
+      transform: translateY(-50%);
+    }
+
+    .timeline-event-block {
+      width: 46%;
+      margin-left: 0;
+    }
+
+    .timeline-event:not(:last-child) {
+      margin-bottom: $space-base * 2;
+    }
+
+    &.timeline-alt .timeline-event:nth-child(even),
+    .timeline-event.timeline-event-alt {
+      .timeline-event-icon {
+        left: 50%;
+        margin-left: -1.5rem;
+
+        &::before {
+          right: -.625rem;
+          left: auto;
+          border-right: none;
+          border-left: .625rem solid $white;
+        }
+      }
+
+      .timeline-event-block {
+        margin-left: auto;
+      }
+
+      .timeline-event-time {
+        padding: .5rem 2rem .5rem .5rem;
+        right: 50%;
+        left: auto;
+        text-align: right;
+      }
+    }
+  }
+}

resources/sass/dashmix/_transitions.scss

@@ -0,0 +1,25 @@
+//
+// Transitions
+// --------------------------------------------------
+
+.fade {
+  @include transition($transition-fade);
+
+  &.fade-up,
+  &.fade-right,
+  &.fade-left {
+    @include transition(opacity .25s ease-out, transform .25s ease-out);
+  }
+
+  &.fade-up:not(.show) {
+    transform: translateY(50px);
+  }
+
+  &.fade-right:not(.show) {
+    transform: translateX(-50px);
+  }
+
+  &.fade-left:not(.show) {
+    transform: translateX(50px);
+  }
+}

resources/sass/dashmix/_type.scss

@@ -0,0 +1,49 @@
+//
+// Typography
+// --------------------------------------------------
+
+.content-heading {
+  margin-bottom: $space-mobile;
+  padding-top: 1rem;
+  padding-bottom: .375rem;
+  font-size: 1.125rem;
+  font-weight: $font-weight-medium;
+  line-height: 1.75;
+  border-bottom: 1px solid $body-bg-dark;
+
+  small {
+    margin-top: .25rem;
+    font-size: 1rem;
+    font-weight: 400;
+    color: $gray-600;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin-bottom: $space-base;
+    padding-top: 1.5rem;
+
+    small {
+      margin-top: 0;
+    }
+  }
+
+  .block-content > &:first-child,
+  .content > &:first-child {
+    padding-top: 0 !important;
+  }
+
+  .dropdown {
+    line-height: $line-height-base;
+  }
+}
+
+// Emphasis
+small,
+.small {
+  font-weight: inherit;
+}
+
+// Transformations
+.text-uppercase {
+  letter-spacing: .0625em;
+}

resources/sass/dashmix/_utilities.scss

@@ -0,0 +1,52 @@
+// Utilities
+
+$font-sizes: map-merge(
+  $font-sizes,
+  (
+    'base': $font-size-base,
+    'xs': $font-size-xs,
+    'sm': $font-size-sm,
+    'lg': $font-size-lg
+  )
+);
+
+// Override utilities map to add new classes
+$utilities: map-merge(
+  $utilities,
+  (
+    "font-weight": (
+      property: font-weight,
+      class: fw,
+      values: (
+        light: $font-weight-light,
+        lighter: $font-weight-lighter,
+        normal: $font-weight-normal,
+        medium: $font-weight-medium,
+        semibold: $font-weight-semibold,
+        bold: $font-weight-bold,
+        bolder: $font-weight-bolder,
+        extrabold: 800,
+        black: 900,
+      )
+    ),
+    "font-size": (
+      rfs: true,
+      property: font-size,
+      class: fs,
+      values: $font-sizes
+    ),
+    "letter-spacing": (
+      property: letter-spacing,
+      class: tracking,
+      values: (
+        tighter: -0.05em,
+        tight: -0.025em,
+        normal: 0,
+        wide: 0.025em,
+        wider: 0.05em,
+        widest: 0.1em
+      )
+    ),
+  )
+);
+

resources/sass/dashmix/_variables-bootstrap.scss

@@ -0,0 +1,343 @@
+//
+// Bootstrap variables (overrides)
+// --------------------------------------------------
+
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$primary:       #0665d0 !default;
+$secondary:     $gray-600 !default;
+$success:       #6f9c40 !default;
+$info:          #3c90df !default;
+$warning:       #e69f17 !default;
+$danger:        #e04f1a !default;
+$light:         #edf0f7 !default;
+$dark:          $gray-800 !default;
+
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
+) !default;
+
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-validation-icons: false !default;
+$enable-negative-margins: true !default;
+$enable-dark-mode: false !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+  6: ($spacer * 4.5),
+  7: ($spacer * 6),
+  8: ($spacer * 9),
+  9: ($spacer * 12),
+  10: ($spacer * 18),
+) !default;
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white !default;
+$body-color:                $gray-800 !default;
+
+$body-bg-dark:              darken($light, 4%) !default;
+$body-color-dark:           $gray-900 !default;
+
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                $primary !default;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 20%) !default;
+$link-hover-decoration:     none !default;
+
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom:   1.75rem !default;
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-gutter-width:           1.75rem !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$border-color:                darken($light, 4%) !default;
+
+$transition-fade:             opacity .15s ease-out !default;
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:            $font-family-sans-serif !default;
+
+$font-size-root:              16px !default;
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-xs:                $font-size-base * .75 !default;
+$font-size-sm:                $font-size-base * .875 !default;
+$font-size-lg:                $font-size-base * 1.25 !default;
+
+$font-weight-medium:          500 !default;
+$font-weight-semibold:        600 !default;
+
+$h1-font-size:                $font-size-base * 2.25 !default;
+$h2-font-size:                $font-size-base * 1.875 !default;
+$h3-font-size:                $font-size-base * 1.5 !default;
+$h4-font-size:                $font-size-base * 1.25 !default;
+$h5-font-size:                $font-size-base * 1.125 !default;
+$h6-font-size:                $font-size-base !default;
+
+$headings-margin-bottom:      ($spacer * 1.375) !default;
+$headings-font-family:        null !default;
+$headings-font-weight:        600 !default;
+$headings-line-height:        1.25 !default;
+
+$text-muted:                  $gray-600 !default;
+
+$hr-opacity:                  .1 !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding-y:        .75rem !default;
+$table-cell-padding-x:        .75rem !default;
+$table-cell-padding-y-sm:     .25rem !default;
+$table-cell-padding-x-sm:     .25rem !default;
+
+$table-color:                 $body-color !default;
+
+$table-th-font-weight:        $font-weight-semibold !default;
+
+$table-striped-bg:            lighten($light, 1.5%) !default;
+
+$table-active-bg:             $light !default;
+
+$table-hover-bg:              darken($light, 1.5%) !default;
+
+$table-border-color:          $border-color !default;
+
+$table-group-separator-color: $border-color !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-font-size-lg:      $font-size-base !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:             $font-weight-semibold !default;
+
+$btn-hover-bg-shade-amount:       20% !default;
+$btn-hover-bg-tint-amount:        20% !default;
+$btn-hover-border-shade-amount:   25% !default;
+$btn-hover-border-tint-amount:    15% !default;
+
+
+// Forms
+
+$form-text-margin-top:              .375rem !default;
+
+$form-label-margin-bottom:          .375rem !default;
+$form-label-font-weight:            $font-weight-medium !default;
+
+$input-bg:                          $white !default;
+
+$input-color:                       $body-color !default;
+$input-border-color:                darken($light, 8%) !default;
+
+$input-group-addon-color:           $input-color !default;
+$input-group-addon-bg:              $light !default;
+$input-group-addon-border-color:    $input-border-color !default;
+
+$form-feedback-font-size:           $font-size-sm !default;
+
+$form-check-input-border:           1px solid darken($light, 10%) !default;
+
+$form-switch-color:                 darken($light, 10%) !default;
+$form-switch-width:                 2.5em !default;
+
+// Navs
+
+$nav-link-font-weight:              $font-weight-semibold !default;
+
+$nav-tabs-border-color:             $border-color !default;
+$nav-tabs-link-hover-border-color:  $border-color $border-color $border-color !default;
+$nav-tabs-link-active-color:        $body-color !default;
+$nav-tabs-link-active-bg:           $white !default;
+$nav-tabs-link-active-border-color: $border-color $border-color $border-color !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                12rem !default;
+$dropdown-border-color:             $border-color !default;
+$dropdown-border-width:             0 !default;
+$dropdown-divider-bg:               $border-color !default;
+$dropdown-box-shadow:               0 .25rem 2rem rgba($black, .08) !default;
+
+$dropdown-link-color:               $body-color !default;
+$dropdown-link-hover-color:         $body-color !default;
+$dropdown-link-hover-bg:            $light !default;
+
+$dropdown-item-padding-y:           .375rem !default;
+$dropdown-item-padding-x:           .75rem !default;
+
+
+// Cards
+
+$card-spacer-y:                     1.25rem !default;
+$card-spacer-x:                     1.25rem !default;
+$card-title-spacer-y:               $card-spacer-y * .5 !default;
+$card-border-color:                 darken($light, 4%) !default;
+$card-border-radius:                .25rem !default;
+$card-cap-padding-y:                .75rem !default;
+$card-cap-padding-x:                $card-spacer-x !default;
+$card-cap-bg:                       lighten($light, 3%) !default;
+$card-img-overlay-padding:          $card-spacer-y !default;
+$card-group-margin:                 $card-spacer-y !default;
+
+
+// Pagination
+
+$pagination-color:                  $body-color !default;
+$pagination-bg:                     $light !default;
+$pagination-border-color:           $light !default;
+
+$pagination-focus-box-shadow:       none !default;
+
+$pagination-hover-color:            $body-color !default;
+$pagination-hover-bg:               darken($light, 10%) !default;
+$pagination-hover-border-color:     darken($light, 10%) !default;
+
+$pagination-disabled-color:         $gray-500 !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $white !default;
+
+
+// Popovers
+
+$popover-border-color:              $border-color !default;
+$popover-box-shadow:                0 1rem 1.5rem rgba($black,.05) !default;
+
+$popover-header-bg:                 $white !default;
+$popover-header-padding-y:          .75rem !default;
+$popover-header-padding-x:          .625rem !default;
+
+$popover-body-padding-y:            .625rem !default;
+$popover-body-padding-x:            .625rem !default;
+
+
+// Badges
+
+$badge-font-weight:                 $font-weight-semibold !default;
+
+
+// Modals
+
+$modal-content-box-shadow-xs:       none !default;
+$modal-content-box-shadow-sm-up:    none !default;
+
+$modal-backdrop-opacity:            .8 !default;
+$modal-header-border-color:         $border-color !default;
+$modal-footer-border-color:         $border-color !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-border-width:                0 !default;
+
+
+// Progress bars
+
+$progress-height:                   1.25rem !default;
+$progress-font-size:                1rem !default;
+
+
+// List group
+
+$list-group-border-color:           $border-color !default;
+
+$list-group-item-padding-y:         .75rem !default;
+$list-group-item-padding-x:         1.25rem !default;
+
+$list-group-hover-bg:               lighten($light, 1.5%) !default;
+
+$list-group-action-color:           $body-color !default;
+$list-group-action-hover-color:     $body-color !default;
+
+$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-bg:       $border-color !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-font-size:              $font-size-sm !default;
+$breadcrumb-margin-bottom:          0 !default;

resources/sass/dashmix/_variables-themes.scss

@@ -0,0 +1,362 @@
+//
+// Themes variables
+// --------------------------------------------------
+
+// xWork Theme
+
+$theme-xwork-primary:                       #2d72d9 !default;
+$theme-xwork-light:                         tint-color($primary, 30%) !default;
+$theme-xwork-lighter:                       tint-color($primary, 65%) !default;
+$theme-xwork-dark:                          darken(#343a40, 10%) !default;
+$theme-xwork-darker:                        darken(#343a40, 20%) !default;
+
+$theme-xwork-body-bg:                       #f5f5f5 !default;
+$theme-xwork-body-bg-dark:                  darken($theme-xwork-body-bg, 4%) !default;
+$theme-xwork-body-bg-light:                 lighten($theme-xwork-body-bg, 2%) !default;
+
+$theme-xwork-body-color:                    $body-color !default;
+$theme-xwork-body-color-dark:               $body-color-dark !default;
+$theme-xwork-body-color-light:              $theme-xwork-body-bg-dark !default;
+
+$theme-xwork-link-color:                    #0665d0 !default;
+$theme-xwork-link-hover-color:              darken(#0665d0, 20%) !default;
+
+$theme-xwork-input-btn-focus-color:         rgba($theme-xwork-primary, .25) !default;
+$theme-xwork-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xwork-input-btn-focus-color !default;
+
+$theme-xwork-input-bg:                      $white !default;
+$theme-xwork-input-color:                   $theme-xwork-body-color !default;
+$theme-xwork-input-border-color:            darken($theme-xwork-body-bg, 8%) !default;
+
+$theme-xwork-input-focus-bg:                $white !default;
+$theme-xwork-input-focus-color:             $theme-xwork-body-color-dark !default;
+$theme-xwork-input-focus-border-color:      lighten($theme-xwork-primary, 25%) !default;
+
+$theme-xwork-header-bg:                     $white !default;
+$theme-xwork-header-dark-bg:                shade-color($theme-xwork-primary, 10%) !default;
+$theme-xwork-sidebar-bg:                    $white !default;
+$theme-xwork-sidebar-dark-bg:               #35393e !default;
+$theme-xwork-side-overlay-bg:               $white !default;
+
+$theme-xwork-main-nav-link-icon-color:      rgba($theme-xwork-primary, .7) !default;
+$theme-xwork-main-nav-link-hover-bg:        $gray-200 !default;
+$theme-xwork-main-nav-submenu-bg:           $gray-100 !default;
+
+$theme-xwork-main-nav-link-icon-dark-color: lighten($theme-xwork-sidebar-dark-bg, 20%) !default;
+$theme-xwork-main-nav-link-dark-hover-bg:   darken($theme-xwork-sidebar-dark-bg, 4.5%) !default;
+$theme-xwork-main-nav-submenu-dark-bg:      darken($theme-xwork-sidebar-dark-bg, 3%) !default;
+
+
+// xModern Theme
+
+$theme-xmodern-primary:                       #45619d !default;
+$theme-xmodern-light:                         lighten($theme-xmodern-primary, 15%) !default;
+$theme-xmodern-lighter:                       lighten($theme-xmodern-primary, 35%) !default;
+$theme-xmodern-dark:                          darken($theme-xmodern-primary, 10%) !default;
+$theme-xmodern-darker:                        darken($theme-xmodern-primary, 20%) !default;
+
+$theme-xmodern-body-bg:                       #f2f3f7 !default;
+$theme-xmodern-body-bg-dark:                  darken($theme-xmodern-body-bg, 4%) !default;
+$theme-xmodern-body-bg-light:                 lighten($theme-xmodern-body-bg, 2%) !default;
+
+$theme-xmodern-body-color:                    $body-color !default;
+$theme-xmodern-body-color-dark:               $body-color-dark !default;
+$theme-xmodern-body-color-light:              $theme-xmodern-body-bg-dark !default;
+
+$theme-xmodern-link-color:                    $theme-xmodern-primary !default;
+$theme-xmodern-link-hover-color:              darken($theme-xmodern-primary, 20%) !default;
+
+$theme-xmodern-input-btn-focus-color:         rgba($theme-xmodern-primary, .25) !default;
+$theme-xmodern-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xmodern-input-btn-focus-color !default;
+
+$theme-xmodern-input-bg:                      $white !default;
+$theme-xmodern-input-color:                   $theme-xmodern-body-color !default;
+$theme-xmodern-input-border-color:            darken($theme-xmodern-body-bg, 8%) !default;
+
+$theme-xmodern-input-focus-bg:                $white !default;
+$theme-xmodern-input-focus-color:             $theme-xmodern-body-color-dark !default;
+$theme-xmodern-input-focus-border-color:      lighten($theme-xmodern-primary, 25%) !default;
+
+$theme-xmodern-header-bg:                     $white !default;
+$theme-xmodern-header-dark-bg:                shade-color($theme-xmodern-primary, 10%) !default;
+$theme-xmodern-sidebar-bg:                    $white !default;
+$theme-xmodern-sidebar-dark-bg:               #353743 !default;
+$theme-xmodern-side-overlay-bg:               $white !default;
+
+$theme-xmodern-main-nav-link-icon-color:      rgba($theme-xmodern-primary, .7) !default;
+$theme-xmodern-main-nav-link-hover-bg:        lighten($theme-xmodern-primary, 48%) !default;
+$theme-xmodern-main-nav-submenu-bg:           lighten($theme-xmodern-primary, 52%) !default;
+
+$theme-xmodern-main-nav-link-icon-dark-color: lighten($theme-xmodern-sidebar-dark-bg, 20%) !default;
+$theme-xmodern-main-nav-link-dark-hover-bg:   darken($theme-xmodern-sidebar-dark-bg, 4.5%) !default;
+$theme-xmodern-main-nav-submenu-dark-bg:      darken($theme-xmodern-sidebar-dark-bg, 3%) !default;
+
+
+// xEco Theme
+
+$theme-xeco-primary:                       #308a5a !default;
+$theme-xeco-light:                         lighten($theme-xeco-primary, 15%) !default;
+$theme-xeco-lighter:                       lighten($theme-xeco-primary, 35%) !default;
+$theme-xeco-dark:                          darken($theme-xeco-primary, 10%) !default;
+$theme-xeco-darker:                        darken($theme-xeco-primary, 20%) !default;
+
+$theme-xeco-body-bg:                       #eef3f6 !default;
+$theme-xeco-body-bg-dark:                  darken($theme-xeco-body-bg, 4%) !default;
+$theme-xeco-body-bg-light:                 lighten($theme-xeco-body-bg, 2%) !default;
+
+$theme-xeco-body-color:                    #1b2932 !default;
+$theme-xeco-body-color-dark:               $body-color-dark !default;
+$theme-xeco-body-color-light:              $theme-xeco-body-bg-dark !default;
+
+$theme-xeco-link-color:                    $theme-xeco-primary !default;
+$theme-xeco-link-hover-color:              darken($theme-xeco-primary, 20%) !default;
+
+$theme-xeco-input-btn-focus-color:         rgba($theme-xeco-primary, .25) !default;
+$theme-xeco-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xeco-input-btn-focus-color !default;
+
+$theme-xeco-input-bg:                      $white !default;
+$theme-xeco-input-color:                   $theme-xeco-body-color !default;
+$theme-xeco-input-border-color:            darken($theme-xeco-body-bg, 8%) !default;
+
+$theme-xeco-input-focus-bg:                $white !default;
+$theme-xeco-input-focus-color:             $theme-xeco-body-color-dark !default;
+$theme-xeco-input-focus-border-color:      lighten($theme-xeco-primary, 25%) !default;
+
+$theme-xeco-header-bg:                     $white !default;
+$theme-xeco-header-dark-bg:                shade-color($theme-xeco-primary, 10%) !default;
+$theme-xeco-sidebar-bg:                    $white !default;
+$theme-xeco-sidebar-dark-bg:               #243642 !default;
+$theme-xeco-side-overlay-bg:               $white !default;
+
+$theme-xeco-main-nav-link-icon-color:      rgba($theme-xeco-primary, .7) !default;
+$theme-xeco-main-nav-link-hover-bg:        $theme-xeco-body-bg-dark !default;
+$theme-xeco-main-nav-submenu-bg:           $theme-xeco-body-bg-light !default;
+
+$theme-xeco-main-nav-link-icon-dark-color: lighten($theme-xeco-sidebar-dark-bg, 20%) !default;
+$theme-xeco-main-nav-link-dark-hover-bg:   darken($theme-xeco-sidebar-dark-bg, 4.5%) !default;
+$theme-xeco-main-nav-submenu-dark-bg:      darken($theme-xeco-sidebar-dark-bg, 3%) !default;
+
+
+// xSmooth Theme
+
+$theme-xsmooth-primary:                       #7351c0 !default;
+$theme-xsmooth-light:                         lighten($theme-xsmooth-primary, 15%) !default;
+$theme-xsmooth-lighter:                       lighten($theme-xsmooth-primary, 30%) !default;
+$theme-xsmooth-dark:                          darken($theme-xsmooth-primary, 10%) !default;
+$theme-xsmooth-darker:                        darken($theme-xsmooth-primary, 20%) !default;
+
+$theme-xsmooth-body-bg:                       $light !default;
+$theme-xsmooth-body-bg-dark:                  $body-bg-dark !default;
+$theme-xsmooth-body-bg-light:                 $body-bg-light !default;
+
+$theme-xsmooth-body-color:                    $body-color !default;
+$theme-xsmooth-body-color-dark:               $body-color-dark !default;
+$theme-xsmooth-body-color-light:              $theme-xsmooth-body-bg-dark !default;
+
+$theme-xsmooth-link-color:                    $theme-xsmooth-primary !default;
+$theme-xsmooth-link-hover-color:              darken($theme-xsmooth-primary, 20%) !default;
+
+$theme-xsmooth-input-btn-focus-color:         rgba($theme-xsmooth-primary, .25) !default;
+$theme-xsmooth-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xsmooth-input-btn-focus-color !default;
+
+$theme-xsmooth-input-bg:                      $white !default;
+$theme-xsmooth-input-color:                   $theme-xsmooth-body-color !default;
+$theme-xsmooth-input-border-color:            darken($theme-xsmooth-body-bg, 8%) !default;
+
+$theme-xsmooth-input-focus-bg:                $white !default;
+$theme-xsmooth-input-focus-color:             $theme-xsmooth-body-color-dark !default;
+$theme-xsmooth-input-focus-border-color:      lighten($theme-xsmooth-primary, 25%) !default;
+
+$theme-xsmooth-header-bg:                     $white !default;
+$theme-xsmooth-header-dark-bg:                shade-color($theme-xsmooth-primary, 10%) !default;
+$theme-xsmooth-sidebar-bg:                    $white !default;
+$theme-xsmooth-sidebar-dark-bg:               #322e38 !default;
+$theme-xsmooth-side-overlay-bg:               $white !default;
+
+$theme-xsmooth-main-nav-link-icon-color:      rgba($theme-xsmooth-primary, .7) !default;
+$theme-xsmooth-main-nav-link-hover-bg:        $theme-xsmooth-body-bg-dark !default;
+$theme-xsmooth-main-nav-submenu-bg:           $theme-xsmooth-body-bg-light !default;
+
+$theme-xsmooth-main-nav-link-icon-dark-color: lighten($theme-xsmooth-sidebar-dark-bg, 20%) !default;
+$theme-xsmooth-main-nav-link-dark-hover-bg:   darken($theme-xsmooth-sidebar-dark-bg, 4.5%) !default;
+$theme-xsmooth-main-nav-submenu-dark-bg:      darken($theme-xsmooth-sidebar-dark-bg, 3%) !default;
+
+
+// xInspire Theme
+
+$theme-xinspire-primary:                       #2a807f !default;
+$theme-xinspire-light:                         lighten($theme-xinspire-primary, 15%) !default;
+$theme-xinspire-lighter:                       lighten($theme-xinspire-primary, 37%) !default;
+$theme-xinspire-dark:                          darken($theme-xinspire-primary, 7.5%) !default;
+$theme-xinspire-darker:                        darken($theme-xinspire-primary, 15%) !default;
+
+$theme-xinspire-body-bg:                       #f5f5f5 !default;
+$theme-xinspire-body-bg-dark:                  darken($theme-xinspire-body-bg, 4%) !default;
+$theme-xinspire-body-bg-light:                 lighten($theme-xinspire-body-bg, 2%) !default;
+
+$theme-xinspire-body-color:                    $body-color !default;
+$theme-xinspire-body-color-dark:               $body-color-dark !default;
+$theme-xinspire-body-color-light:              $theme-xinspire-body-bg-dark !default;
+
+$theme-xinspire-link-color:                    $theme-xinspire-primary !default;
+$theme-xinspire-link-hover-color:              darken($theme-xinspire-primary, 20%) !default;
+
+$theme-xinspire-input-btn-focus-color:         rgba($theme-xinspire-primary, .25) !default;
+$theme-xinspire-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xinspire-input-btn-focus-color !default;
+
+$theme-xinspire-input-bg:                      $white !default;
+$theme-xinspire-input-color:                   $theme-xinspire-body-color !default;
+$theme-xinspire-input-border-color:            darken($theme-xinspire-body-bg, 8%) !default;
+
+$theme-xinspire-input-focus-bg:                $white !default;
+$theme-xinspire-input-focus-color:             $theme-xinspire-body-color-dark !default;
+$theme-xinspire-input-focus-border-color:      lighten($theme-xinspire-primary, 10%) !default;
+
+$theme-xinspire-header-bg:                     $white !default;
+$theme-xinspire-header-dark-bg:                shade-color($theme-xinspire-primary, 10%) !default;
+$theme-xinspire-sidebar-bg:                    $white !default;
+$theme-xinspire-sidebar-dark-bg:               #35393e !default;
+$theme-xinspire-side-overlay-bg:               $white !default;
+
+$theme-xinspire-main-nav-link-icon-color:      rgba($theme-xinspire-primary, .7) !default;
+$theme-xinspire-main-nav-link-hover-bg:        $theme-xinspire-body-bg-dark !default;
+$theme-xinspire-main-nav-submenu-bg:           $theme-xinspire-body-bg !default;
+
+$theme-xinspire-main-nav-link-icon-dark-color: lighten($theme-xinspire-sidebar-dark-bg, 20%) !default;
+$theme-xinspire-main-nav-link-dark-hover-bg:   darken($theme-xinspire-sidebar-dark-bg, 4.5%) !default;
+$theme-xinspire-main-nav-submenu-dark-bg:      darken($theme-xinspire-sidebar-dark-bg, 3%) !default;
+
+
+// xDream Theme
+
+$theme-xdream-primary:                       #4657a3 !default;
+$theme-xdream-light:                         lighten($theme-xdream-primary, 25%) !default;
+$theme-xdream-lighter:                       lighten($theme-xdream-primary, 45%) !default;
+$theme-xdream-dark:                          lighten(#20273e, 7.5%) !default;
+$theme-xdream-darker:                        #20273e !default;
+
+$theme-xdream-body-bg:                       darken(#f5f6fa, 1.5%) !default;
+$theme-xdream-body-bg-dark:                  darken($theme-xdream-body-bg, 4%) !default;
+$theme-xdream-body-bg-light:                 lighten($theme-xdream-body-bg, 2%) !default;
+
+$theme-xdream-body-color:                    $body-color !default;
+$theme-xdream-body-color-dark:               $body-color-dark !default;
+$theme-xdream-body-color-light:              $theme-xdream-body-bg-dark !default;
+
+$theme-xdream-link-color:                    $theme-xdream-primary !default;
+$theme-xdream-link-hover-color:              darken($theme-xdream-primary, 20%) !default;
+
+$theme-xdream-input-btn-focus-color:         rgba($theme-xdream-primary, .25) !default;
+$theme-xdream-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xdream-input-btn-focus-color !default;
+
+$theme-xdream-input-bg:                      $white !default;
+$theme-xdream-input-color:                   $theme-xdream-body-color !default;
+$theme-xdream-input-border-color:            darken($theme-xdream-body-bg, 8%) !default;
+
+$theme-xdream-input-focus-bg:                $white !default;
+$theme-xdream-input-focus-color:             $theme-xdream-body-color-dark !default;
+$theme-xdream-input-focus-border-color:      lighten($theme-xdream-primary, 25%) !default;
+
+$theme-xdream-header-bg:                     $white !default;
+$theme-xdream-header-dark-bg:                shade-color($theme-xdream-primary, 10%) !default;
+$theme-xdream-sidebar-bg:                    $white !default;
+$theme-xdream-sidebar-dark-bg:               #33323a !default;
+$theme-xdream-side-overlay-bg:               $white !default;
+
+$theme-xdream-main-nav-link-icon-color:      rgba($theme-xdream-primary, .7) !default;
+$theme-xdream-main-nav-link-hover-bg:        lighten($theme-xdream-primary, 48%) !default;
+$theme-xdream-main-nav-submenu-bg:           lighten($theme-xdream-primary, 52%) !default;
+
+$theme-xdream-main-nav-link-icon-dark-color: lighten($theme-xdream-sidebar-dark-bg, 20%) !default;
+$theme-xdream-main-nav-link-dark-hover-bg:   darken($theme-xdream-sidebar-dark-bg, 4.5%) !default;
+$theme-xdream-main-nav-submenu-dark-bg:      darken($theme-xdream-sidebar-dark-bg, 3%) !default;
+
+
+// xPro Theme
+
+$theme-xpro-primary:                       #4954cb !default;
+$theme-xpro-light:                         lighten($theme-xpro-primary, 15%) !default;
+$theme-xpro-lighter:                       lighten($theme-xpro-primary, 26%) !default;
+$theme-xpro-dark:                          #394263 !default;
+$theme-xpro-darker:                        #282e45 !default;
+
+$theme-xpro-body-bg:                       #eaedf1 !default;
+$theme-xpro-body-bg-dark:                  darken($theme-xpro-body-bg, 5%) !default;
+$theme-xpro-body-bg-light:                 lighten($theme-xpro-body-bg, 3%) !default;
+
+$theme-xpro-body-color:                    $body-color !default;
+$theme-xpro-body-color-dark:               $body-color-dark !default;
+$theme-xpro-body-color-light:              $theme-xpro-body-bg-dark !default;
+
+$theme-xpro-link-color:                    $theme-xpro-primary !default;
+$theme-xpro-link-hover-color:              darken($theme-xpro-primary, 20%) !default;
+
+$theme-xpro-input-btn-focus-color:         rgba($theme-xpro-primary, .25) !default;
+$theme-xpro-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xpro-input-btn-focus-color !default;
+
+$theme-xpro-input-bg:                      $white !default;
+$theme-xpro-input-color:                   $theme-xpro-body-color !default;
+$theme-xpro-input-border-color:            darken($theme-xpro-body-bg, 8%) !default;
+
+$theme-xpro-input-focus-bg:                $white !default;
+$theme-xpro-input-focus-color:             $theme-xpro-body-color-dark !default;
+$theme-xpro-input-focus-border-color:      lighten($theme-xpro-primary, 25%) !default;
+
+$theme-xpro-header-bg:                     $white !default;
+$theme-xpro-header-dark-bg:                shade-color($theme-xpro-primary, 10%) !default;
+$theme-xpro-sidebar-bg:                    $white !default;
+$theme-xpro-sidebar-dark-bg:               #3b3946 !default;
+$theme-xpro-side-overlay-bg:               $white !default;
+
+$theme-xpro-main-nav-link-icon-color:      rgba($theme-xpro-primary, .7) !default;
+$theme-xpro-main-nav-link-hover-bg:        lighten($theme-xpro-primary, 40%) !default;
+$theme-xpro-main-nav-submenu-bg:           lighten($theme-xpro-primary, 43%) !default;
+
+$theme-xpro-main-nav-link-icon-dark-color: lighten($theme-xpro-sidebar-dark-bg, 20%) !default;
+$theme-xpro-main-nav-link-dark-hover-bg:   darken($theme-xpro-sidebar-dark-bg, 4.5%) !default;
+$theme-xpro-main-nav-submenu-dark-bg:      darken($theme-xpro-sidebar-dark-bg, 3%) !default;
+
+
+// xPlay Theme
+
+$theme-xplay-primary:                       #c74433 !default;
+$theme-xplay-light:                         lighten($theme-xplay-primary, 10%) !default;
+$theme-xplay-lighter:                       lighten($theme-xplay-primary, 30%) !default;
+$theme-xplay-dark:                          darken($theme-xplay-primary, 12%) !default;
+$theme-xplay-darker:                        darken($theme-xplay-primary, 24%) !default;
+
+$theme-xplay-body-bg:                       #f2f2f2 !default;
+$theme-xplay-body-bg-dark:                  darken($theme-xplay-body-bg, 4%) !default;
+$theme-xplay-body-bg-light:                 lighten($theme-xplay-body-bg, 2%) !default;
+
+$theme-xplay-body-color:                    $body-color !default;
+$theme-xplay-body-color-dark:               $body-color-dark !default;
+$theme-xplay-body-color-light:              $theme-xplay-body-bg-dark !default;
+
+$theme-xplay-link-color:                    $theme-xplay-primary !default;
+$theme-xplay-link-hover-color:              darken($theme-xplay-primary, 20%) !default;
+
+$theme-xplay-input-btn-focus-color:         rgba($theme-xplay-primary, .25) !default;
+$theme-xplay-input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $theme-xplay-input-btn-focus-color !default;
+
+$theme-xplay-input-bg:                      $white !default;
+$theme-xplay-input-color:                   $theme-xplay-body-color !default;
+$theme-xplay-input-border-color:            darken($theme-xplay-body-bg, 8%) !default;
+
+$theme-xplay-input-focus-bg:                $white !default;
+$theme-xplay-input-focus-color:             $theme-xplay-body-color-dark !default;
+$theme-xplay-input-focus-border-color:      lighten($theme-xplay-primary, 25%) !default;
+
+$theme-xplay-header-bg:                     $white !default;
+$theme-xplay-header-dark-bg:                shade-color($theme-xplay-primary, 15%) !default;
+$theme-xplay-sidebar-bg:                    $white !default;
+$theme-xplay-sidebar-dark-bg:               #35393e !default;
+$theme-xplay-side-overlay-bg:               $white !default;
+
+$theme-xplay-main-nav-link-icon-color:      rgba($theme-xplay-primary, .7) !default;
+$theme-xplay-main-nav-link-hover-bg:        $theme-xplay-body-bg-dark !default;
+$theme-xplay-main-nav-submenu-bg:           $theme-xplay-body-bg-light !default;
+
+$theme-xplay-main-nav-link-icon-dark-color: lighten($theme-xplay-sidebar-dark-bg, 20%) !default;
+$theme-xplay-main-nav-link-dark-hover-bg:   darken($theme-xplay-sidebar-dark-bg, 4.5%) !default;
+$theme-xplay-main-nav-submenu-dark-bg:      darken($theme-xplay-sidebar-dark-bg, 3%) !default;

resources/sass/dashmix/_variables.scss

@@ -0,0 +1,107 @@
+//
+// Dashmix variables
+// --------------------------------------------------
+
+
+// Colors
+
+$primary-light:             tint-color($primary, 30%);
+$primary-lighter:           tint-color($primary, 65%);
+$primary-dark:              shade-color($primary, 30%);
+$primary-darker:            shade-color($primary, 60%);
+
+$success-light:             tint-color($success, 85%);
+$info-light:                tint-color($info, 85%);
+$warning-light:             tint-color($warning, 85%);
+$danger-light:              tint-color($danger, 85%);
+
+$body-bg-dark:              darken($light, 4%);
+$body-bg-light:             lighten($light, 3%);
+
+$body-color-dark:           $gray-900 !default;
+$body-color-light:          $body-bg-dark !default;
+
+// Paragraphs
+
+$paragraph-line-height:     1.6;
+$paragraph-line-height-lg:  1.8;
+
+
+// Z-index master list additions
+
+$zindex-block-pinned:       $zindex-fixed + 1 !default;
+$zindex-sidebar:            $zindex-fixed + 2 !default;
+$zindex-page-overlay:       $zindex-fixed + 3 !default;
+$zindex-side-overlay:       $zindex-fixed + 4 !default;
+$zindex-block-fullscreen:   $zindex-fixed + 5 !default;
+
+
+// Hero Buttons
+
+$btn-hero-padding-y:        .625rem !default;
+$btn-hero-padding-x:        1.5rem !default;
+$btn-hero-border-radius:    .25rem !default;
+
+$btn-hero-padding-y-sm:     .375rem !default;
+$btn-hero-padding-x-sm:     1.25rem !default;
+
+$btn-hero-padding-y-lg:     .875rem !default;
+$btn-hero-padding-x-lg:     2.25rem !default;
+
+
+// Header
+
+$header-height:             4.25rem !default;           // Best values > 3rem and < 5rem
+$header-bg:                 $white !default;
+$header-dark-bg:            shade-color($primary, 10%) !default;
+
+
+// Footer
+
+$footer-height:             4.375rem !default;           // Used as min-height for static footer and fixed height for fixed footer mode
+
+
+// Sidebar and Side Overlay
+
+$sidebar-bg:                $white !default;
+$sidebar-dark-bg:           #2a303c !default;
+$sidebar-width:             250px !default;
+
+$sidebar-mini-width:        64px !default;
+
+$sidebar-mini-nav-width:    46px !default;
+
+$side-overlay-bg:           $white !default;
+$side-overlay-width:        320px !default;
+
+$side-transition:           .45s cubic-bezier(.20, .61, .42, .97) !default;
+
+
+// Main Navigation
+
+$main-nav-link-icon-color:          rgba($primary, .7) !default;
+$main-nav-link-hover-bg:            lighten($primary, 52%) !default;
+$main-nav-submenu-bg:               lighten($primary, 56%) !default;
+
+$main-nav-link-icon-dark-color:     lighten($sidebar-dark-bg, 20%) !default;
+$main-nav-link-dark-hover-bg:       darken($sidebar-dark-bg, 4.5%) !default;
+$main-nav-submenu-dark-bg:          darken($sidebar-dark-bg, 3%) !default;
+
+$main-nav-transition:               .3s cubic-bezier(.20, .61, .42, .97) !default;
+
+
+// Layout Spaces
+
+$space-base:                1.75rem !default;                   // Content padding
+$space-mobile:              .875rem !default;                   // Content padding in mobile
+$space-side:                1.125rem !default;                   // Content padding inside side content
+$space-row-gutter-tiny:     .25rem !default;                    // Row with tiny gutter
+$space-block:               1.25rem !default;                   // Block padding
+$space-boxed:               1200px !default;                    // Boxed content max width
+$space-narrow:              92% !default;                       // Narrow content max width
+$space-main-max-width:      1920px !default;                    // Main content max width
+
+
+// Third Party
+
+$fa-font-path:                "../fonts/fontawesome" !default;

resources/sass/dashmix/forms/_form-check.scss

@@ -0,0 +1,82 @@
+//
+// Form Check
+// --------------------------------------------------
+
+// Form Switch
+.form-switch {
+  min-height: 2em;
+  line-height: 2em;
+
+  .form-check-input {
+    height: 1.5em;
+  }
+}
+
+// Form Block
+.form-block {
+  position: relative;
+  padding: 0;
+  z-index: 1;
+  
+  .form-check-input {
+    position: absolute;
+    left: 0;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  .form-check-label {
+    width: 100%;
+    padding: .75rem;
+    border: 2px solid $body-bg-dark;
+    border-radius: $border-radius-sm;
+    cursor: pointer;
+
+    &:hover {
+      border-color: darken($body-bg-dark, 5%);
+    }
+
+    &::before {
+      position: absolute;
+      top: 0rem;
+      right: 0rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      display: none;
+      line-height: 1.5rem;
+      color: $white;
+      font-size: .625rem;
+      text-align: center;
+      background-color: $primary;
+      border-bottom-left-radius: .25rem;
+      font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Pro';
+      font-weight: 900;
+      content: '\f00c';
+      z-index: 1;
+    }
+  }
+
+  .form-check-input:checked ~ .form-check-label {
+    border-color: $primary;
+  }
+
+  .form-check-input:focus ~ .form-check-label {
+    border-color: $primary;
+    box-shadow: 0 0 0 0.25rem rgba($primary, .25);
+  }
+
+  .form-check-input:checked ~ .form-check-label::before {
+    display: block;
+  }
+
+  .form-check-input:disabled + .form-check-label,
+  .form-check-input[readonly] + .form-check-label {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  .form-check-input:disabled:not([checked]) + .form-check-label:hover,
+  .form-check-input[readonly]:not([checked]) + .form-check-label:hover { 
+    border-color: $body-bg-dark;
+  }
+}

resources/sass/dashmix/forms/_form-control.scss

@@ -0,0 +1,41 @@
+//
+// Textual form controls
+//
+
+.form-control {
+  font-family: $font-family-base;
+
+  // Alternative Style
+  &.form-control-alt {
+    border-color: $light;
+    background-color: $light;
+    transition: none;
+
+    &:focus {
+      border-color: $body-bg-dark;
+      background-color: $body-bg-dark;
+      box-shadow: none;
+    }
+
+    &.is-valid {
+      border-color: $success-light;
+      background-color: $success-light;
+
+      &:focus {
+        border-color: darken($success-light, 5%);
+        background-color: darken($success-light, 5%);
+      }
+    }
+
+    &.is-invalid {
+      border-color: $danger-light;
+      background-color: $danger-light;
+
+
+      &:focus {
+        border-color: darken($danger-light, 5%);
+        background-color: darken($danger-light, 5%);
+      }
+    }
+  }
+}

resources/sass/dashmix/forms/_form-select.scss

@@ -0,0 +1,41 @@
+//
+// Textual form controls
+//
+
+.form-select {
+  font-family: $font-family-base;
+
+  // Alternative Style
+  &.form-control-alt {
+    border-color: $light;
+    background-color: $light;
+    transition: none;
+
+    &:focus {
+      border-color: $body-bg-dark;
+      background-color: $body-bg-dark;
+      box-shadow: none;
+    }
+
+    &.is-valid {
+      border-color: $success-light;
+      background-color: $success-light;
+
+      &:focus {
+        border-color: darken($success-light, 5%);
+        background-color: darken($success-light, 5%);
+      }
+    }
+
+    &.is-invalid {
+      border-color: $danger-light;
+      background-color: $danger-light;
+
+
+      &:focus {
+        border-color: darken($danger-light, 5%);
+        background-color: darken($danger-light, 5%);
+      }
+    }
+  }
+}

resources/sass/dashmix/forms/_input-group.scss

@@ -0,0 +1,8 @@
+//
+// Input Group
+// --------------------------------------------------
+
+.input-group-text.input-group-text-alt {
+  background-color: $body-bg-dark;
+  border-color: $body-bg-dark;
+}

resources/sass/dashmix/helpers/_background.scss

@@ -0,0 +1,256 @@
+//
+// Background
+// --------------------------------------------------
+
+// Black/White with opacity
+.bg-black {
+  &-5 {
+    background-color: rgba(0, 0, 0, 0.05) !important;
+  }
+  &-10 {
+    background-color: rgba(0, 0, 0, 0.1) !important;
+  }
+  &-25 {
+    background-color: rgba(0, 0, 0, 0.25) !important;
+  }
+  &-50 {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+  }
+  &-75 {
+    background-color: rgba(0, 0, 0, 0.75) !important;
+  }
+  &-90 {
+    background-color: rgba(0, 0, 0, 0.9) !important;
+  }
+  &-95 {
+    background-color: rgba(0, 0, 0, 0.95) !important;
+  }
+}
+
+.bg-white {
+  &-5 {
+    background-color: rgba(255, 255, 255, 0.05) !important;
+  }
+  &-10 {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+  &-25 {
+    background-color: rgba(255, 255, 255, 0.25) !important;
+  }
+  &-50 {
+    background-color: rgba(255, 255, 255, 0.5) !important;
+  }
+  &-75 {
+    background-color: rgba(255, 255, 255, 0.75) !important;
+  }
+  &-90 {
+    background-color: rgba(255, 255, 255, 0.9) !important;
+  }
+  &-95 {
+    background-color: rgba(255, 255, 255, 0.95) !important;
+  }
+}
+
+// Image Background
+.bg-image {
+  background-position: 0% 50%;
+  background-size: cover;
+
+  &-top {
+    background-position-y: 0%;
+  }
+  &-center {
+    background-position-x: 50%;
+  }
+  &-bottom {
+    background-position-y: 100%;
+  }
+
+  @include media-breakpoint-up(xl) {
+    &-fixed {
+      background-attachment: fixed;
+    }
+  }
+}
+
+// Pattern Image
+.bg-pattern {
+  background-repeat: repeat;
+}
+
+// Video Background
+.bg-video {
+  width: 100%;
+  transform: translateZ(0);
+}
+
+// Contextual colors
+@include bg-variant('.bg-primary-op', rgba($primary, .75));
+@include bg-variant(".bg-primary", $primary);
+@include bg-variant('.bg-primary-dark', $primary-dark);
+@include bg-variant('.bg-primary-dark-op', rgba($primary-dark, .8));
+@include bg-variant('.bg-primary-darker', $primary-darker);
+@include bg-variant('.bg-primary-light', $primary-light);
+@include bg-variant('.bg-primary-lighter', $primary-lighter);
+
+@include bg-variant(".bg-success", $success);
+@include bg-variant(".bg-success-light", $success-light);
+@include bg-variant(".bg-warning", $warning);
+@include bg-variant(".bg-warning-light", $warning-light);
+@include bg-variant(".bg-info", $info);
+@include bg-variant(".bg-info-light", $info-light);
+@include bg-variant(".bg-danger", $danger);
+@include bg-variant(".bg-danger-light", $danger-light);
+
+@include bg-variant(".bg-success-op", rgba($success-light, 0.95));
+@include bg-variant(".bg-warning-op", rgba($warning-light, 0.95));
+@include bg-variant(".bg-info-op", rgba($info-light, 0.95));
+@include bg-variant(".bg-danger-op ", rgba($danger-light, 0.95));
+
+@include bg-variant(".bg-body", $light);
+@include bg-variant(".bg-body-light", $body-bg-light);
+@include bg-variant(".bg-body-dark", $body-bg-dark);
+@include bg-variant(".bg-body-extra-light", $white);
+@include bg-variant(".bg-muted", $gray-600);
+
+@include bg-variant(".bg-white", $white);
+@include bg-variant(".bg-black", $black);
+
+@include bg-variant(".bg-gray", $gray-400);
+@include bg-variant(".bg-gray-dark", $gray-600);
+@include bg-variant(".bg-gray-darker", $gray-800);
+@include bg-variant(".bg-gray-light", $gray-200);
+@include bg-variant(".bg-gray-lighter", $gray-100);
+
+// Elements
+@include bg-variant('.bg-header-light', $header-bg);
+@include bg-variant('.bg-header-dark', $header-dark-bg);
+
+@include bg-variant('.bg-sidebar-light', $sidebar-bg);
+@include bg-variant('.bg-sidebar-dark', $sidebar-dark-bg);
+
+// Gradients
+@include bg-gradient-variant-linear('.bg-gd-primary', 135deg, $primary, lighten($primary, 15%));
+
+@include bg-gradient-variant-linear('.bg-gd-dusk', 135deg, #d262e3, $primary);
+@include bg-gradient-variant-linear('.bg-gd-fruit', 135deg, #89216b, #da4453);
+@include bg-gradient-variant-linear('.bg-gd-aqua', 135deg, #02aab0, #00cdac);
+@include bg-gradient-variant-linear('.bg-gd-sublime', 135deg, #6a82fb, #fc5c7d);
+@include bg-gradient-variant-linear('.bg-gd-sea', 135deg, #2b32b2, #1488cc);
+@include bg-gradient-variant-linear('.bg-gd-leaf', 135deg, $warning, $success);
+@include bg-gradient-variant-linear('.bg-gd-lake', 135deg, #00f260, #0575e6);
+@include bg-gradient-variant-linear('.bg-gd-sun', 135deg, #e65c00, #f9d423);
+
+@include bg-gradient-variant-linear('.bg-gd-dusk-op', 135deg, rgba(#d262e3, .5), rgba($primary, .5));
+@include bg-gradient-variant-linear('.bg-gd-fruit-op', 135deg, rgba(#89216b, .5), rgba(#da4453, .5));
+@include bg-gradient-variant-linear('.bg-gd-aqua-op', 135deg, rgba(#02aab0, .5), rgba(#00cdac, .5));
+@include bg-gradient-variant-linear('.bg-gd-sublime-op', 135deg, rgba(#6a82fb, .5), rgba(#fc5c7d, .5));
+@include bg-gradient-variant-linear('.bg-gd-sea-op', 135deg, rgba(#2b32b2, .5), rgba(#1488cc, .5));
+@include bg-gradient-variant-linear('.bg-gd-leaf-op', 135deg, rgba($warning, .5), rgba($success, .5));
+@include bg-gradient-variant-linear('.bg-gd-lake-op', 135deg, rgba(#00f260, .5), rgba(#0575e6, .5));
+@include bg-gradient-variant-linear('.bg-gd-sun-op', 135deg, rgba(#e65c00, .5), rgba(#f9d423, .5));
+
+.bg-gd-white-op-r,
+.bg-gd-white-op-l,
+.bg-gd-white-op-rl {
+  background: rgba(#ffffff, .98);
+}
+
+@include media-breakpoint-up(md) {
+  @include bg-gradient-variant-linear('.bg-gd-white-op-r', 90deg, rgba(#ffffff, .3) 0%, rgba(#ffffff, .98) 50%);
+  @include bg-gradient-variant-linear('.bg-gd-white-op-l', -90deg, rgba(#ffffff, .3) 0%, rgba(#ffffff, .98) 50%);
+
+  .bg-gd-white-op-rl {
+    background: linear-gradient(90deg, rgba(#ffffff, .75) 0%, rgba(#ffffff, .97) 30%, rgba(#ffffff, .97) 70%, rgba(#ffffff, .75) 100%);
+  }
+}
+
+// Default Color Theme
+@include bg-variant('.bg-default', $primary);
+@include bg-variant('.bg-default-op', rgba($primary, .75));
+@include bg-variant('.bg-default-dark', $primary-dark);
+@include bg-variant('.bg-default-dark-op', rgba($primary-dark, .8));
+@include bg-variant('.bg-default-darker', $primary-darker);
+@include bg-variant('.bg-default-light', $primary-light);
+@include bg-variant('.bg-default-lighter', $primary-lighter);
+@include bg-gradient-variant-linear('.bg-gd-default', 135deg, $primary, lighten($primary, 15%));
+
+// xWork Color Theme
+@include bg-variant('.bg-xwork', $theme-xwork-primary);
+@include bg-variant('.bg-xwork-op', rgba($theme-xwork-primary, .75));
+@include bg-variant('.bg-xwork-dark', $theme-xwork-dark);
+@include bg-variant('.bg-xwork-dark-op', rgba($theme-xwork-dark, .8));
+@include bg-variant('.bg-xwork-darker', $theme-xwork-darker);
+@include bg-variant('.bg-xwork-light', $theme-xwork-light);
+@include bg-variant('.bg-xwork-lighter', $theme-xwork-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xwork', 135deg, $theme-xwork-primary, lighten($theme-xwork-primary, 15%));
+
+// xModern Color Theme
+@include bg-variant('.bg-xmodern', $theme-xmodern-primary);
+@include bg-variant('.bg-xmodern-op', rgba($theme-xmodern-primary, .75));
+@include bg-variant('.bg-xmodern-dark', $theme-xmodern-dark);
+@include bg-variant('.bg-xmodern-dark-op', rgba($theme-xmodern-dark, .8));
+@include bg-variant('.bg-xmodern-darker', $theme-xmodern-darker);
+@include bg-variant('.bg-xmodern-light', $theme-xmodern-light);
+@include bg-variant('.bg-xmodern-lighter', $theme-xmodern-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xmodern', 135deg, $theme-xmodern-primary, lighten($theme-xmodern-primary, 15%));
+
+// xEco Color Theme
+@include bg-variant('.bg-xeco', $theme-xeco-primary);
+@include bg-variant('.bg-xeco-op', rgba($theme-xeco-primary, .75));
+@include bg-variant('.bg-xeco-dark', $theme-xeco-dark);
+@include bg-variant('.bg-xeco-dark-op', rgba($theme-xeco-dark, .8));
+@include bg-variant('.bg-xeco-darker', $theme-xeco-darker);
+@include bg-variant('.bg-xeco-light', $theme-xeco-light);
+@include bg-variant('.bg-xeco-lighter', $theme-xeco-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xeco', 135deg, $theme-xeco-primary, lighten($theme-xeco-primary, 15%));
+
+// xSmooth Color Theme
+@include bg-variant('.bg-xsmooth', $theme-xsmooth-primary);
+@include bg-variant('.bg-xsmooth-op', rgba($theme-xsmooth-primary, .75));
+@include bg-variant('.bg-xsmooth-dark', $theme-xsmooth-dark);
+@include bg-variant('.bg-xsmooth-dark-op', rgba($theme-xsmooth-dark, .8));
+@include bg-variant('.bg-xsmooth-darker', $theme-xsmooth-darker);
+@include bg-variant('.bg-xsmooth-light', $theme-xsmooth-light);
+@include bg-variant('.bg-xsmooth-lighter', $theme-xsmooth-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xsmooth', 135deg, $theme-xsmooth-primary, lighten($theme-xsmooth-primary, 15%));
+
+// xInspire Color Theme
+@include bg-variant('.bg-xinspire', $theme-xinspire-primary);
+@include bg-variant('.bg-xinspire-op', rgba($theme-xinspire-primary, .75));
+@include bg-variant('.bg-xinspire-dark', $theme-xinspire-dark);
+@include bg-variant('.bg-xinspire-dark-op', rgba($theme-xinspire-dark, .8));
+@include bg-variant('.bg-xinspire-darker', $theme-xinspire-darker);
+@include bg-variant('.bg-xinspire-light', $theme-xinspire-light);
+@include bg-variant('.bg-xinspire-lighter', $theme-xinspire-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xinspire', 135deg, $theme-xinspire-primary, lighten($theme-xinspire-primary, 15%));
+
+// xDream Color Theme
+@include bg-variant('.bg-xdream', $theme-xdream-primary);
+@include bg-variant('.bg-xdream-op', rgba($theme-xdream-primary, .75));
+@include bg-variant('.bg-xdream-dark', $theme-xdream-dark);
+@include bg-variant('.bg-xdream-dark-op', rgba($theme-xdream-dark, .8));
+@include bg-variant('.bg-xdream-darker', $theme-xdream-darker);
+@include bg-variant('.bg-xdream-light', $theme-xdream-light);
+@include bg-variant('.bg-xdream-lighter', $theme-xdream-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xdream', 135deg, $theme-xdream-primary, lighten($theme-xdream-primary, 15%));
+
+// xPro Color Theme
+@include bg-variant('.bg-xpro', $theme-xpro-primary);
+@include bg-variant('.bg-xpro-op', rgba($theme-xpro-primary, .75));
+@include bg-variant('.bg-xpro-dark', $theme-xpro-dark);
+@include bg-variant('.bg-xpro-dark-op', rgba($theme-xpro-dark, .8));
+@include bg-variant('.bg-xpro-darker', $theme-xpro-darker);
+@include bg-variant('.bg-xpro-light', $theme-xpro-light);
+@include bg-variant('.bg-xpro-lighter', $theme-xpro-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xpro', 135deg, $theme-xpro-primary, lighten($theme-xpro-primary, 15%));
+
+// xPlay Color Theme
+@include bg-variant('.bg-xplay', $theme-xplay-primary);
+@include bg-variant('.bg-xplay-op', rgba($theme-xplay-primary, .75));
+@include bg-variant('.bg-xplay-dark', $theme-xplay-dark);
+@include bg-variant('.bg-xplay-dark-op', rgba($theme-xplay-dark, .8));
+@include bg-variant('.bg-xplay-darker', $theme-xplay-darker);
+@include bg-variant('.bg-xplay-light', $theme-xplay-light);
+@include bg-variant('.bg-xplay-lighter', $theme-xplay-lighter);
+@include bg-gradient-variant-linear('.bg-gd-xplay', 135deg, $theme-xplay-primary, lighten($theme-xplay-primary, 15%));

resources/sass/dashmix/helpers/_borders.scss

@@ -0,0 +1,11 @@
+//
+// Borders
+// --------------------------------------------------
+
+.border-white-op {
+  border-color: rgba($white, 0.1) !important;
+}
+
+.border-black-op {
+  border-color: rgba($black, 0.1) !important;
+}

resources/sass/dashmix/helpers/_display.scss

@@ -0,0 +1,44 @@
+//
+// Display
+// --------------------------------------------------
+
+.h-header {
+  height: $header-height !important;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+// Full height with scroll on large screens
+@include media-breakpoint-up(lg) {
+  .h100-scroll {
+    height: 100vh;
+    overflow-y: auto;
+  }
+}
+
+// Dark mode display classes
+html.dark {
+  .d-dark-none {
+    display: none !important;
+  }
+
+  .d-dark-inline-block {
+    display: inline-block !important;
+  }
+
+  .d-dark-block {
+    display: block !important;
+  }
+
+  .d-dark-flex {
+    display: flex !important;
+  }
+
+  .d-dark-inline-flex {
+    display: inline-flex !important;
+  }
+}
+

resources/sass/dashmix/helpers/_effects.scss

@@ -0,0 +1,33 @@
+//
+// Effects
+// --------------------------------------------------
+
+// Helpers
+.no-transition {
+  transition: none !important;
+}
+
+// Ripple effect (mostly for buttons usage)
+.click-ripple {
+  display: block;
+  position: absolute;
+  background: rgba($white, .6);
+  border-radius: 100%;
+  transform: scale(0);
+
+  &.animate {
+    animation: click-ripple .6s ease-out;
+  }
+}
+
+@keyframes click-ripple {
+  50% {
+    opacity: .6;
+    transform: scale(2);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(3);
+  }
+}

resources/sass/dashmix/helpers/_spacing.scss

@@ -0,0 +1,16 @@
+//
+// Spacing
+// --------------------------------------------------
+
+@each $name, $value in $spacers {
+  .space-x-#{$name} > * + * {
+    margin-left: $value;
+  }
+}
+
+@each $name, $value in $spacers {
+  .space-y-#{$name} > * + * {
+    margin-top: $value;
+  }
+}
+

resources/sass/dashmix/helpers/_text.scss

@@ -0,0 +1,122 @@
+//
+// Text
+// --------------------------------------------------
+
+// Transformation
+.text-normal {
+  text-transform: none !important;
+}
+
+// Contextual colors
+@include text-emphasis-variant(".text-primary", $primary);
+@include text-emphasis-variant('.text-primary-dark', $primary-dark);
+@include text-emphasis-variant('.text-primary-darker',$primary-darker);
+@include text-emphasis-variant('.text-primary-light', $primary-light);
+@include text-emphasis-variant('.text-primary-lighter', $primary-lighter);
+
+@include text-emphasis-variant(".text-dark", $dark);
+
+@include text-emphasis-variant(".text-success", $success);
+@include text-emphasis-variant(".text-success-light", $success-light);
+@include text-emphasis-variant(".text-warning", $warning);
+@include text-emphasis-variant(".text-warning-light", $warning-light);
+@include text-emphasis-variant(".text-info", $info);
+@include text-emphasis-variant(".text-info-light", $info-light);
+@include text-emphasis-variant(".text-danger", $danger);
+@include text-emphasis-variant(".text-danger-light", $danger-light);
+
+@include text-emphasis-variant(".text-body-bg", $light);
+@include text-emphasis-variant(".text-body-bg-dark", $body-bg-dark);
+@include text-emphasis-variant(".text-body-bg-light", $body-bg-light);
+@include text-emphasis-variant(".text-body-color", $body-color);
+@include text-emphasis-variant(".text-body-color-dark", $body-color-dark);
+@include text-emphasis-variant(".text-body-color-light", $body-color-light);
+
+@include text-emphasis-variant(".text-muted", $text-muted);
+@include text-emphasis-variant(".text-white", $white);
+@include text-emphasis-variant(".text-white-25", rgba($white, .25));
+@include text-emphasis-variant(".text-white-50", rgba($white, .5));
+@include text-emphasis-variant(".text-white-75", rgba($white, .75));
+@include text-emphasis-variant(".text-black", $black);
+@include text-emphasis-variant(".text-black-25", rgba($black, .25));
+@include text-emphasis-variant(".text-black-50", rgba($black, .5));
+@include text-emphasis-variant(".text-black-75", rgba($black, .75));
+
+@include text-emphasis-variant(".text-gray", $gray-400);
+@include text-emphasis-variant(".text-gray-dark", $gray-600);
+@include text-emphasis-variant(".text-gray-darker", $gray-800);
+@include text-emphasis-variant(".text-gray-light", $gray-200);
+@include text-emphasis-variant(".text-gray-lighter", $gray-100);
+
+// Contextual dual text colors (for dark header/sidebar)
+@include text-emphasis-variant(".text-dual", $primary-dark);
+
+.page-header-dark #page-header,
+.sidebar-dark #sidebar,
+html.dark #page-header,
+html.dark #sidebar {
+  @include text-emphasis-variant(".text-dual", $body-color-light);
+}
+
+// Default Color Theme
+@include text-emphasis-variant('.text-default', $primary);
+@include text-emphasis-variant('.text-default-dark', $primary-dark);
+@include text-emphasis-variant('.text-default-darker', $primary-darker);
+@include text-emphasis-variant('.text-default-light', $primary-light);
+@include text-emphasis-variant('.text-default-lighter', $primary-lighter);
+
+// xWork Color Theme
+@include text-emphasis-variant('.text-xwork', $theme-xwork-primary);
+@include text-emphasis-variant('.text-xwork-dark', $theme-xwork-dark);
+@include text-emphasis-variant('.text-xwork-darker', $theme-xwork-darker);
+@include text-emphasis-variant('.text-xwork-light', $theme-xwork-light);
+@include text-emphasis-variant('.text-xwork-lighter', $theme-xwork-lighter);
+
+// xModern Color Theme
+@include text-emphasis-variant('.text-xmodern', $theme-xmodern-primary);
+@include text-emphasis-variant('.text-xmodern-dark', $theme-xmodern-dark);
+@include text-emphasis-variant('.text-xmodern-darker', $theme-xmodern-darker);
+@include text-emphasis-variant('.text-xmodern-light', $theme-xmodern-light);
+@include text-emphasis-variant('.text-xmodern-lighter', $theme-xmodern-lighter);
+
+// xEco Color Theme
+@include text-emphasis-variant('.text-xeco', $theme-xeco-primary);
+@include text-emphasis-variant('.text-xeco-dark', $theme-xeco-dark);
+@include text-emphasis-variant('.text-xeco-darker', $theme-xeco-darker);
+@include text-emphasis-variant('.text-xeco-light', $theme-xeco-light);
+@include text-emphasis-variant('.text-xeco-lighter', $theme-xeco-lighter);
+
+// xSmooth Color Theme
+@include text-emphasis-variant('.text-xsmooth', $theme-xsmooth-primary);
+@include text-emphasis-variant('.text-xsmooth-dark', $theme-xsmooth-dark);
+@include text-emphasis-variant('.text-xsmooth-darker', $theme-xsmooth-darker);
+@include text-emphasis-variant('.text-xsmooth-light', $theme-xsmooth-light);
+@include text-emphasis-variant('.text-xsmooth-lighter', $theme-xsmooth-lighter);
+
+// xInspire Color Theme
+@include text-emphasis-variant('.text-xinspire', $theme-xinspire-primary);
+@include text-emphasis-variant('.text-xinspire-dark', $theme-xinspire-dark);
+@include text-emphasis-variant('.text-xinspire-darker', $theme-xinspire-darker);
+@include text-emphasis-variant('.text-xinspire-light', $theme-xinspire-light);
+@include text-emphasis-variant('.text-xinspire-lighter', $theme-xinspire-lighter);
+
+// xDream Color Theme
+@include text-emphasis-variant('.text-xdream', $theme-xdream-primary);
+@include text-emphasis-variant('.text-xdream-dark', $theme-xdream-dark);
+@include text-emphasis-variant('.text-xdream-darker', $theme-xdream-darker);
+@include text-emphasis-variant('.text-xdream-light', $theme-xdream-light);
+@include text-emphasis-variant('.text-xdream-lighter', $theme-xdream-lighter);
+
+// xPro Color Theme
+@include text-emphasis-variant('.text-xpro', $theme-xpro-primary);
+@include text-emphasis-variant('.text-xpro-dark', $theme-xpro-dark);
+@include text-emphasis-variant('.text-xpro-darker', $theme-xpro-darker);
+@include text-emphasis-variant('.text-xpro-light', $theme-xpro-light);
+@include text-emphasis-variant('.text-xpro-lighter', $theme-xpro-lighter);
+
+// xPlay Color Theme
+@include text-emphasis-variant('.text-xplay', $theme-xplay-primary);
+@include text-emphasis-variant('.text-xplay-dark', $theme-xplay-dark);
+@include text-emphasis-variant('.text-xplay-darker', $theme-xplay-darker);
+@include text-emphasis-variant('.text-xplay-light', $theme-xplay-light);
+@include text-emphasis-variant('.text-xplay-lighter', $theme-xplay-lighter);

resources/sass/dashmix/mixins/_alert.scss

@@ -0,0 +1,14 @@
+@mixin alert-variant($background, $border, $color) {
+  --#{$prefix}alert-color: #{$color};
+  --#{$prefix}alert-bg: #{$background};
+  --#{$prefix}alert-border-color: #{$border};
+  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};
+
+  @if $enable-gradients {
+    background-image: var(--#{$prefix}gradient);
+  }
+
+  .alert-link {
+    color: var(--#{$prefix}alert-link-color);
+  }
+}

resources/sass/dashmix/mixins/_background-variant.scss

@@ -0,0 +1,24 @@
+//
+// Backgrounds
+// --------------------------------------------------
+
+// Original Bootstrap 4 mixin
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+
+  a#{$parent},
+  button#{$parent} {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%) !important;
+    }
+  }
+}
+
+@mixin bg-gradient-variant-linear($parent, $deg, $color1, $color2) {
+  #{$parent} {
+    background: $color1 linear-gradient($deg, $color1 0%, $color2 100%) !important;
+  }
+}

resources/sass/dashmix/mixins/_buttons.scss

@@ -0,0 +1,45 @@
+//
+// Buttons
+// --------------------------------------------------
+
+// Hero variant
+@mixin button-hero-variant($background, $hover-background: lighten($background, 10%), $active-background: darken($background, 15%)) {
+  $btn-hero-box-shadow: 0 .125rem .75rem rgba($active-background, .25);
+  $btn-hero-box-shadow-hover: 0 .375rem .75rem rgba($active-background, .4);
+
+  text-transform: uppercase;
+  letter-spacing: .0625rem;
+  font-weight: 700;
+  @include button-size($btn-hero-padding-y, $btn-hero-padding-x, $font-size-sm, $btn-hero-border-radius);
+  box-shadow: $btn-hero-box-shadow;
+  transition: $btn-transition, transform .12s ease-out;
+
+  &:hover {
+    box-shadow: $btn-hero-box-shadow-hover;
+    transform: translateY(-1px);
+  }
+
+  .btn-check:focus + &,
+  &:focus {
+    box-shadow: $btn-hero-box-shadow;
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    box-shadow: $btn-hero-box-shadow;
+    transform: translateY(0);
+
+    &:focus {
+      box-shadow: $btn-hero-box-shadow;
+    }
+  }
+  
+  &.disabled,
+  &:disabled {
+    box-shadow: $btn-hero-box-shadow;
+    transform: translateY(0);
+  }
+}

resources/sass/dashmix/mixins/_content.scss

@@ -0,0 +1,61 @@
+//
+// Content
+// --------------------------------------------------
+
+@mixin content-layout($x, $y, $overflow: visible) {
+  width: 100%;
+  margin: 0 auto;
+  padding: $y $x 1px;
+  overflow-x: $overflow;
+
+  > .pull-t,
+  > .pull-y {
+    margin-top: -$y;
+  }
+
+  > .pull-b,
+  > .pull-y {
+    margin-bottom: -1px;
+  }
+
+  > .pull-r,
+  > .pull-x {
+    margin-right: -$x;
+  }
+
+  > .pull-r,
+  > .pull-x {
+    margin-left: -$x;
+  }
+
+  > .pull {
+    margin: (-$y) (-$x) (-1px);
+  }
+
+  @at-root {
+    #{&}#{&}-full {
+      padding-bottom: $y;
+
+      > .pull-b,
+      > .pull-y,
+      > .pull {
+        margin-bottom: -$y;
+      }
+    }
+  }
+
+  p,
+  .push,
+  .block,
+  .items-push > div {
+    margin-bottom: $y;
+  }
+
+  .items-push-2x > div {
+    margin-bottom: $y*2;
+  }
+
+  .items-push-3x > div {
+    margin-bottom: $y*3;
+  }
+}

resources/sass/dashmix/mixins/_ribbon.scss

@@ -0,0 +1,22 @@
+//
+// Ribbon
+// --------------------------------------------------
+
+@mixin ribbon-variation($bg-color, $text-color) {
+  .ribbon-box {
+    color: $text-color;
+    background-color: $bg-color;
+  }
+
+  &.ribbon-bookmark {
+    .ribbon-box::before {
+      border-color: $bg-color;
+      border-left-color: transparent;
+    }
+
+    &.ribbon-left .ribbon-box::before {
+      border-color: $bg-color;
+      border-right-color: transparent;
+    }
+  }
+}

resources/sass/dashmix/mixins/_text-emphasis.scss

@@ -0,0 +1,20 @@
+//
+// Text emphasis
+// --------------------------------------------------
+
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    color: $color !important;
+  }
+
+  a#{$parent} {
+    &.link-fx::before {
+      background-color: $color !important;
+    }
+
+    &:hover,
+    &:focus {
+      color: darken($color, 10%) !important;
+    }
+  }
+}

resources/sass/dashmix/themes/_base.scss

@@ -0,0 +1,25 @@
+//
+// Required files for theme creation
+// --------------------------------------------------
+
+// Bootstrap functions
+@import '../../bootstrap/functions';
+
+// User variables (your own variable overrides)
+@import '../../custom/variables';
+
+// Custom Bootstrap variables overrides
+@import '../variables-bootstrap';
+
+// Bootstrap variables
+@import '../../bootstrap/variables';
+
+// Bootstrap mixins
+@import '../../bootstrap/mixins';
+
+// Custom mixins and Bootstrap overrides
+@import '../mixins';
+
+// Custom variables
+@import '../variables';
+@import '../variables-themes';

resources/sass/dashmix/themes/xdream.scss

@@ -0,0 +1,58 @@
+//
+// xDream Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xdream-primary,
+  $theme-xdream-light,
+  $theme-xdream-lighter,
+  $theme-xdream-dark,
+  $theme-xdream-darker,
+  $theme-xdream-body-bg,
+  $theme-xdream-body-bg-dark,
+  $theme-xdream-body-bg-light,
+  $theme-xdream-body-color,
+  $theme-xdream-body-color-dark,
+  $theme-xdream-body-color-light,
+  $theme-xdream-link-color,
+  $theme-xdream-link-hover-color,
+  $theme-xdream-input-btn-focus-color,
+  $theme-xdream-input-btn-focus-box-shadow,
+  $theme-xdream-input-bg,
+  $theme-xdream-input-color,
+  $theme-xdream-input-border-color,
+  $theme-xdream-input-focus-bg,
+  $theme-xdream-input-focus-color,
+  $theme-xdream-input-focus-border-color,
+  $theme-xdream-header-bg,
+  $theme-xdream-header-dark-bg,
+  $theme-xdream-sidebar-bg,
+  $theme-xdream-sidebar-dark-bg,
+  $theme-xdream-side-overlay-bg,
+  $theme-xdream-main-nav-link-icon-color,
+  $theme-xdream-main-nav-link-hover-bg,
+  $theme-xdream-main-nav-submenu-bg,
+  $theme-xdream-main-nav-link-icon-dark-color,
+  $theme-xdream-main-nav-link-dark-hover-bg,
+  $theme-xdream-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xdream-primary,
+  $theme-xdream-light,
+  $theme-xdream-lighter,
+  $theme-xdream-sidebar-dark-bg,
+  darken($theme-xdream-sidebar-dark-bg, 5%),
+  $theme-xdream-body-bg,
+  $theme-xdream-body-bg-dark,
+  $theme-xdream-body-bg-light,
+  $theme-xdream-body-color,
+  $theme-xdream-body-color-dark,
+  $theme-xdream-body-color-light,
+  $theme-xdream-link-color,
+  $theme-xdream-link-hover-color
+);

resources/sass/dashmix/themes/xeco.scss

@@ -0,0 +1,58 @@
+//
+// xEco Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xeco-primary,
+  $theme-xeco-light,
+  $theme-xeco-lighter,
+  $theme-xeco-dark,
+  $theme-xeco-darker,
+  $theme-xeco-body-bg,
+  $theme-xeco-body-bg-dark,
+  $theme-xeco-body-bg-light,
+  $theme-xeco-body-color,
+  $theme-xeco-body-color-dark,
+  $theme-xeco-body-color-light,
+  $theme-xeco-link-color,
+  $theme-xeco-link-hover-color,
+  $theme-xeco-input-btn-focus-color,
+  $theme-xeco-input-btn-focus-box-shadow,
+  $theme-xeco-input-bg,
+  $theme-xeco-input-color,
+  $theme-xeco-input-border-color,
+  $theme-xeco-input-focus-bg,
+  $theme-xeco-input-focus-color,
+  $theme-xeco-input-focus-border-color,
+  $theme-xeco-header-bg,
+  $theme-xeco-header-dark-bg,
+  $theme-xeco-sidebar-bg,
+  $theme-xeco-sidebar-dark-bg,
+  $theme-xeco-side-overlay-bg,
+  $theme-xeco-main-nav-link-icon-color,
+  $theme-xeco-main-nav-link-hover-bg,
+  $theme-xeco-main-nav-submenu-bg,
+  $theme-xeco-main-nav-link-icon-dark-color,
+  $theme-xeco-main-nav-link-dark-hover-bg,
+  $theme-xeco-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xeco-primary,
+  $theme-xeco-light,
+  $theme-xeco-lighter,
+  $theme-xeco-sidebar-dark-bg,
+  darken($theme-xeco-sidebar-dark-bg, 5%),
+  $theme-xeco-body-bg,
+  $theme-xeco-body-bg-dark,
+  $theme-xeco-body-bg-light,
+  $theme-xeco-body-color,
+  $theme-xeco-body-color-dark,
+  $theme-xeco-body-color-light,
+  $theme-xeco-link-color,
+  $theme-xeco-link-hover-color
+);

resources/sass/dashmix/themes/xinspire.scss

@@ -0,0 +1,58 @@
+//
+// xinspire Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xinspire-primary,
+  $theme-xinspire-light,
+  $theme-xinspire-lighter,
+  $theme-xinspire-dark,
+  $theme-xinspire-darker,
+  $theme-xinspire-body-bg,
+  $theme-xinspire-body-bg-dark,
+  $theme-xinspire-body-bg-light,
+  $theme-xinspire-body-color,
+  $theme-xinspire-body-color-dark,
+  $theme-xinspire-body-color-light,
+  $theme-xinspire-link-color,
+  $theme-xinspire-link-hover-color,
+  $theme-xinspire-input-btn-focus-color,
+  $theme-xinspire-input-btn-focus-box-shadow,
+  $theme-xinspire-input-bg,
+  $theme-xinspire-input-color,
+  $theme-xinspire-input-border-color,
+  $theme-xinspire-input-focus-bg,
+  $theme-xinspire-input-focus-color,
+  $theme-xinspire-input-focus-border-color,
+  $theme-xinspire-header-bg,
+  $theme-xinspire-header-dark-bg,
+  $theme-xinspire-sidebar-bg,
+  $theme-xinspire-sidebar-dark-bg,
+  $theme-xinspire-side-overlay-bg,
+  $theme-xinspire-main-nav-link-icon-color,
+  $theme-xinspire-main-nav-link-hover-bg,
+  $theme-xinspire-main-nav-submenu-bg,
+  $theme-xinspire-main-nav-link-icon-dark-color,
+  $theme-xinspire-main-nav-link-dark-hover-bg,
+  $theme-xinspire-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xinspire-primary,
+  $theme-xinspire-light,
+  $theme-xinspire-lighter,
+  $theme-xinspire-sidebar-dark-bg,
+  darken($theme-xinspire-sidebar-dark-bg, 5%),
+  $theme-xinspire-body-bg,
+  $theme-xinspire-body-bg-dark,
+  $theme-xinspire-body-bg-light,
+  $theme-xinspire-body-color,
+  $theme-xinspire-body-color-dark,
+  $theme-xinspire-body-color-light,
+  $theme-xinspire-link-color,
+  $theme-xinspire-link-hover-color
+);

resources/sass/dashmix/themes/xmodern.scss

@@ -0,0 +1,58 @@
+//
+// xModern Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xmodern-primary,
+  $theme-xmodern-light,
+  $theme-xmodern-lighter,
+  $theme-xmodern-dark,
+  $theme-xmodern-darker,
+  $theme-xmodern-body-bg,
+  $theme-xmodern-body-bg-dark,
+  $theme-xmodern-body-bg-light,
+  $theme-xmodern-body-color,
+  $theme-xmodern-body-color-dark,
+  $theme-xmodern-body-color-light,
+  $theme-xmodern-link-color,
+  $theme-xmodern-link-hover-color,
+  $theme-xmodern-input-btn-focus-color,
+  $theme-xmodern-input-btn-focus-box-shadow,
+  $theme-xmodern-input-bg,
+  $theme-xmodern-input-color,
+  $theme-xmodern-input-border-color,
+  $theme-xmodern-input-focus-bg,
+  $theme-xmodern-input-focus-color,
+  $theme-xmodern-input-focus-border-color,
+  $theme-xmodern-header-bg,
+  $theme-xmodern-header-dark-bg,
+  $theme-xmodern-sidebar-bg,
+  $theme-xmodern-sidebar-dark-bg,
+  $theme-xmodern-side-overlay-bg,
+  $theme-xmodern-main-nav-link-icon-color,
+  $theme-xmodern-main-nav-link-hover-bg,
+  $theme-xmodern-main-nav-submenu-bg,
+  $theme-xmodern-main-nav-link-icon-dark-color,
+  $theme-xmodern-main-nav-link-dark-hover-bg,
+  $theme-xmodern-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xmodern-primary,
+  $theme-xmodern-light,
+  $theme-xmodern-lighter,
+  $theme-xmodern-sidebar-dark-bg,
+  darken($theme-xmodern-sidebar-dark-bg, 5%),
+  $theme-xmodern-body-bg,
+  $theme-xmodern-body-bg-dark,
+  $theme-xmodern-body-bg-light,
+  $theme-xmodern-body-color,
+  $theme-xmodern-body-color-dark,
+  $theme-xmodern-body-color-light,
+  $theme-xmodern-link-color,
+  $theme-xmodern-link-hover-color
+);

resources/sass/dashmix/themes/xplay.scss

@@ -0,0 +1,58 @@
+//
+// xPlay Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xplay-primary,
+  $theme-xplay-light,
+  $theme-xplay-lighter,
+  $theme-xplay-dark,
+  $theme-xplay-darker,
+  $theme-xplay-body-bg,
+  $theme-xplay-body-bg-dark,
+  $theme-xplay-body-bg-light,
+  $theme-xplay-body-color,
+  $theme-xplay-body-color-dark,
+  $theme-xplay-body-color-light,
+  $theme-xplay-link-color,
+  $theme-xplay-link-hover-color,
+  $theme-xplay-input-btn-focus-color,
+  $theme-xplay-input-btn-focus-box-shadow,
+  $theme-xplay-input-bg,
+  $theme-xplay-input-color,
+  $theme-xplay-input-border-color,
+  $theme-xplay-input-focus-bg,
+  $theme-xplay-input-focus-color,
+  $theme-xplay-input-focus-border-color,
+  $theme-xplay-header-bg,
+  $theme-xplay-header-dark-bg,
+  $theme-xplay-sidebar-bg,
+  $theme-xplay-sidebar-dark-bg,
+  $theme-xplay-side-overlay-bg,
+  $theme-xplay-main-nav-link-icon-color,
+  $theme-xplay-main-nav-link-hover-bg,
+  $theme-xplay-main-nav-submenu-bg,
+  $theme-xplay-main-nav-link-icon-dark-color,
+  $theme-xplay-main-nav-link-dark-hover-bg,
+  $theme-xplay-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xplay-primary,
+  $theme-xplay-light,
+  $theme-xplay-lighter,
+  $theme-xplay-sidebar-dark-bg,
+  darken($theme-xplay-sidebar-dark-bg, 5%),
+  $theme-xplay-body-bg,
+  $theme-xplay-body-bg-dark,
+  $theme-xplay-body-bg-light,
+  $theme-xplay-body-color,
+  $theme-xplay-body-color-dark,
+  $theme-xplay-body-color-light,
+  $theme-xplay-link-color,
+  $theme-xplay-link-hover-color
+);

resources/sass/dashmix/themes/xpro.scss

@@ -0,0 +1,58 @@
+//
+// xPro Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xpro-primary,
+  $theme-xpro-light,
+  $theme-xpro-lighter,
+  $theme-xpro-dark,
+  $theme-xpro-darker,
+  $theme-xpro-body-bg,
+  $theme-xpro-body-bg-dark,
+  $theme-xpro-body-bg-light,
+  $theme-xpro-body-color,
+  $theme-xpro-body-color-dark,
+  $theme-xpro-body-color-light,
+  $theme-xpro-link-color,
+  $theme-xpro-link-hover-color,
+  $theme-xpro-input-btn-focus-color,
+  $theme-xpro-input-btn-focus-box-shadow,
+  $theme-xpro-input-bg,
+  $theme-xpro-input-color,
+  $theme-xpro-input-border-color,
+  $theme-xpro-input-focus-bg,
+  $theme-xpro-input-focus-color,
+  $theme-xpro-input-focus-border-color,
+  $theme-xpro-header-bg,
+  $theme-xpro-header-dark-bg,
+  $theme-xpro-sidebar-bg,
+  $theme-xpro-sidebar-dark-bg,
+  $theme-xpro-side-overlay-bg,
+  $theme-xpro-main-nav-link-icon-color,
+  $theme-xpro-main-nav-link-hover-bg,
+  $theme-xpro-main-nav-submenu-bg,
+  $theme-xpro-main-nav-link-icon-dark-color,
+  $theme-xpro-main-nav-link-dark-hover-bg,
+  $theme-xpro-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xpro-primary,
+  $theme-xpro-light,
+  $theme-xpro-lighter,
+  $theme-xpro-sidebar-dark-bg,
+  darken($theme-xpro-sidebar-dark-bg, 5%),
+  $theme-xpro-body-bg,
+  $theme-xpro-body-bg-dark,
+  $theme-xpro-body-bg-light,
+  $theme-xpro-body-color,
+  $theme-xpro-body-color-dark,
+  $theme-xpro-body-color-light,
+  $theme-xpro-link-color,
+  $theme-xpro-link-hover-color
+);

resources/sass/dashmix/themes/xsmooth.scss

@@ -0,0 +1,58 @@
+//
+// xSmooth Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xsmooth-primary,
+  $theme-xsmooth-light,
+  $theme-xsmooth-lighter,
+  $theme-xsmooth-dark,
+  $theme-xsmooth-darker,
+  $theme-xsmooth-body-bg,
+  $theme-xsmooth-body-bg-dark,
+  $theme-xsmooth-body-bg-light,
+  $theme-xsmooth-body-color,
+  $theme-xsmooth-body-color-dark,
+  $theme-xsmooth-body-color-light,
+  $theme-xsmooth-link-color,
+  $theme-xsmooth-link-hover-color,
+  $theme-xsmooth-input-btn-focus-color,
+  $theme-xsmooth-input-btn-focus-box-shadow,
+  $theme-xsmooth-input-bg,
+  $theme-xsmooth-input-color,
+  $theme-xsmooth-input-border-color,
+  $theme-xsmooth-input-focus-bg,
+  $theme-xsmooth-input-focus-color,
+  $theme-xsmooth-input-focus-border-color,
+  $theme-xsmooth-header-bg,
+  $theme-xsmooth-header-dark-bg,
+  $theme-xsmooth-sidebar-bg,
+  $theme-xsmooth-sidebar-dark-bg,
+  $theme-xsmooth-side-overlay-bg,
+  $theme-xsmooth-main-nav-link-icon-color,
+  $theme-xsmooth-main-nav-link-hover-bg,
+  $theme-xsmooth-main-nav-submenu-bg,
+  $theme-xsmooth-main-nav-link-icon-dark-color,
+  $theme-xsmooth-main-nav-link-dark-hover-bg,
+  $theme-xsmooth-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xsmooth-primary,
+  $theme-xsmooth-light,
+  $theme-xsmooth-lighter,
+  $theme-xsmooth-sidebar-dark-bg,
+  darken($theme-xsmooth-sidebar-dark-bg, 5%),
+  $theme-xsmooth-body-bg,
+  $theme-xsmooth-body-bg-dark,
+  $theme-xsmooth-body-bg-light,
+  $theme-xsmooth-body-color,
+  $theme-xsmooth-body-color-dark,
+  $theme-xsmooth-body-color-light,
+  $theme-xsmooth-link-color,
+  $theme-xsmooth-link-hover-color
+);

resources/sass/dashmix/themes/xwork.scss

@@ -0,0 +1,58 @@
+//
+// xWork Theme
+// --------------------------------------------------
+
+// Include base files
+@import 'base';
+
+// Generate color theme
+@include color-theme(
+  $theme-xwork-primary,
+  $theme-xwork-light,
+  $theme-xwork-lighter,
+  $theme-xwork-dark,
+  $theme-xwork-darker,
+  $theme-xwork-body-bg,
+  $theme-xwork-body-bg-dark,
+  $theme-xwork-body-bg-light,
+  $theme-xwork-body-color,
+  $theme-xwork-body-color-dark,
+  $theme-xwork-body-color-light,
+  $theme-xwork-link-color,
+  $theme-xwork-link-hover-color,
+  $theme-xwork-input-btn-focus-color,
+  $theme-xwork-input-btn-focus-box-shadow,
+  $theme-xwork-input-bg,
+  $theme-xwork-input-color,
+  $theme-xwork-input-border-color,
+  $theme-xwork-input-focus-bg,
+  $theme-xwork-input-focus-color,
+  $theme-xwork-input-focus-border-color,
+  $theme-xwork-header-bg,
+  $theme-xwork-header-dark-bg,
+  $theme-xwork-sidebar-bg,
+  $theme-xwork-sidebar-dark-bg,
+  $theme-xwork-side-overlay-bg,
+  $theme-xwork-main-nav-link-icon-color,
+  $theme-xwork-main-nav-link-hover-bg,
+  $theme-xwork-main-nav-submenu-bg,
+  $theme-xwork-main-nav-link-icon-dark-color,
+  $theme-xwork-main-nav-link-dark-hover-bg,
+  $theme-xwork-main-nav-submenu-dark-bg
+);
+
+@include color-theme-dark(
+  $theme-xwork-primary,
+  $theme-xwork-light,
+  $theme-xwork-lighter,
+  $theme-xwork-sidebar-dark-bg,
+  darken($theme-xwork-sidebar-dark-bg, 5%),
+  $theme-xwork-body-bg,
+  $theme-xwork-body-bg-dark,
+  $theme-xwork-body-bg-light,
+  $theme-xwork-body-color,
+  $theme-xwork-body-color-dark,
+  $theme-xwork-body-color-light,
+  $theme-xwork-link-color,
+  $theme-xwork-link-hover-color
+);