first commit

resources/assets/vendor/scss/_components/mixins/_app-brand.scss

@@ -0,0 +1,29 @@
+// Within menu
+@mixin template-app-brand-collapsed() {
+  .app-brand {
+    width: $menu-collapsed-width;
+  }
+
+  .app-brand-logo,
+  .app-brand-link,
+  .app-brand-text {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .app-brand-logo ~ .app-brand-text,
+  .app-brand .layout-menu-toggle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 0;
+  }
+
+  .app-brand-img {
+    display: none;
+  }
+
+  .app-brand-img-collapsed {
+    display: block;
+  }
+}

resources/assets/vendor/scss/_components/mixins/_avatar.scss

@@ -0,0 +1,22 @@
+// Avatar
+// *******************************************************************************
+
+@mixin template-avatar-style($height, $width, $font-size, $status-indicator-position: 2px) {
+  width: $width;
+  height: $height;
+
+  .avatar-initial {
+    font-size: $font-size;
+  }
+
+  &.avatar-online,
+  &.avatar-offline,
+  &.avatar-away,
+  &.avatar-busy {
+    &:after {
+      width: $width * 0.2;
+      height: $height * 0.2;
+      right: $status-indicator-position;
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_footer.scss

@@ -0,0 +1,47 @@
+// Footer
+// *******************************************************************************
+
+@mixin template-footer-style($parent, $bg, $color: null, $active-color: null, $border: null) {
+  $colors: get-navbar-prop($bg, $active-color, $color, $border);
+
+  #{$parent} {
+    color: map-get($colors, color);
+    .layout-footer-fixed .layout-horizontal & {
+      background-color: map-get($colors, bg) !important;
+    }
+
+    .layout-footer-fixed .layout-wrapper:not(.layout-horizontal) & {
+      .footer-container {
+        background-color: map-get($colors, bg) !important;
+      }
+    }
+
+    .footer-link {
+      color: map-get($colors, color);
+
+      &:hover,
+      &:focus {
+        color: map-get($colors, active-color);
+      }
+
+      &.disabled {
+        color: map-get($colors, disabled-color) !important;
+      }
+    }
+
+    .footer-text {
+      color: map-get($colors, active-color);
+    }
+
+    .show > .footer-link,
+    .active > .footer-link,
+    .footer-link.show,
+    .footer-link.active {
+      color: map-get($colors, active-color);
+    }
+
+    hr {
+      border-color: map-get($colors, border);
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_menu.scss

@@ -0,0 +1,133 @@
+// Menu
+// *******************************************************************************
+
+@mixin template-menu-style($parent, $bg, $color: null, $active-color: null, $border: null, $active-bg: null) {
+  $colors: get-navbar-prop($bg, $active-color, $color, $border);
+  $contrast-percent: map-get($colors, contrast-percent);
+
+  @if not $active-bg {
+    $active-bg: rgba-to-hex(
+      rgba(map-get($colors, bg), 1 - if($contrast-percent < 0.75, 0.025, 0.05)),
+      if($contrast-percent > 0.25, #fff, #000)
+    );
+  }
+
+  $menu-active-bg: linear-gradient(270deg, rgba($active-bg, 0.7) 0%, $active-bg 100%);
+  $menu-active-bg-rtl: linear-gradient(-270deg, rgba($active-bg, 0.7) 0%, $active-bg 100%);
+  $horizontal-active-bg: rgba-to-hex(rgba($active-bg, 0.16), $bg);
+
+  #{$parent} {
+    background-color: map-get($colors, bg) !important;
+    &.menu-horizontal {
+      background-color: rgba(map-get($colors, bg), 0.95) !important;
+    }
+    color: map-get($colors, color);
+
+    .menu-link,
+    .menu-horizontal-prev,
+    .menu-horizontal-next {
+      color: map-get($colors, color);
+      &:hover,
+      &:focus {
+        color: map-get($colors, active-color);
+      }
+
+      &.active {
+        color: map-get($colors, active-color);
+      }
+    }
+    .menu-toggle::after {
+      color: map-get($colors, color);
+    }
+
+    .menu-item.disabled .menu-link,
+    .menu-horizontal-prev.disabled,
+    .menu-horizontal-next.disabled {
+      color: map-get($colors, disabled-color) !important;
+    }
+
+    .menu-item.open:not(.menu-item-closing) > .menu-toggle,
+    .menu-item.active > .menu-link {
+      color: map-get($colors, active-color);
+    }
+
+    //vertical menu active item bg color
+    &.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
+      background: $menu-active-bg;
+      box-shadow: 0px 2px 6px 0px rgba($active-bg, 0.3);
+      color: color-contrast($active-bg) !important;
+      &.menu-toggle::after {
+        color: color-contrast($active-bg) !important;
+      }
+      @if $rtl-support {
+        [dir='rtl'] & {
+          background: $menu-active-bg-rtl !important;
+        }
+      }
+    }
+
+    //-
+    &.menu-horizontal {
+      .menu-inner > .menu-item.active > .menu-link.menu-toggle {
+        background: $menu-active-bg;
+        color: color-contrast($active-bg) !important;
+        box-shadow: 0px 2px 6px 0px rgba($active-bg, 0.3);
+        &.menu-toggle::after {
+          color: color-contrast($active-bg) !important;
+        }
+        @if $rtl-support {
+          [dir='rtl'] & {
+            background: $menu-active-bg-rtl;
+            box-shadow: 0px 2px 6px 0px rgba($active-bg, 0.3);
+            color: color-contrast($active-bg) !important;
+          }
+        }
+      }
+
+      .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub,
+      .menu-inner .menu-item.open > .menu-toggle {
+        background: $bg;
+      }
+
+      .menu-item.active > .menu-link:not(.menu-toggle) {
+        background: $horizontal-active-bg;
+        color: $active-bg !important;
+      }
+    }
+    .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-sub,
+    .menu-inner > .menu-item.menu-item-closing .menu-item.open .menu-toggle {
+      background: transparent;
+      color: color-contrast($active-bg);
+    }
+
+    .menu-inner-shadow {
+      background: linear-gradient($bg 41%, rgba($bg, 0.11) 95%, rgba($bg, 0));
+    }
+
+    .menu-text {
+      color: map-get($colors, active-color);
+    }
+
+    .menu-header {
+      color: map-get($colors, muted-color);
+    }
+
+    hr,
+    .menu-divider,
+    .menu-inner > .menu-item.open > .menu-sub::before {
+      border-color: map-get($colors, border) !important;
+    }
+
+    .menu-block::before {
+      background-color: map-get($colors, muted-color);
+    }
+
+    .ps__thumb-y,
+    .ps__rail-y.ps--clicking > .ps__thumb-y {
+      background: rgba(
+        map-get($colors, active-color),
+        if($contrast-percent > 0.75, map-get($colors, opacity) - 0.4, map-get($colors, opacity) - 0.2)
+      ) !important;
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_misc.scss

@@ -0,0 +1,6 @@
+// SVG Color
+@mixin template-svg-color($background) {
+  .svg-illustration svg {
+    fill: $background;
+  }
+}

resources/assets/vendor/scss/_components/mixins/_navbar.scss

@@ -0,0 +1,90 @@
+// Navbar
+// *******************************************************************************
+
+@mixin template-navbar-style($parent, $bg, $color: null, $active-color: null, $border: null) {
+  $colors: get-navbar-prop($bg, $active-color, $color, $border);
+
+  #{$parent} {
+    background-color: rgba(map-get($colors, bg), 0.88) !important;
+    color: map-get($colors, color);
+
+    .navbar-brand,
+    .navbar-brand a {
+      color: map-get($colors, active-color);
+
+      &:hover,
+      &:focus {
+        color: map-get($colors, active-color);
+      }
+    }
+
+    // Navbar search color
+    .navbar-search-wrapper {
+      .navbar-search-icon,
+      .search-input {
+        color: map-get($colors, color);
+      }
+    }
+    .search-input-wrapper {
+      .search-input,
+      .search-toggler {
+        background-color: $bg !important;
+        color: map-get($colors, color);
+      }
+    }
+
+    .navbar-nav {
+      > .nav-link,
+      > .nav-item > .nav-link,
+      > .nav > .nav-item > .nav-link {
+        color: map-get($colors, color);
+
+        &:hover,
+        &:focus {
+          color: map-get($colors, active-color);
+        }
+
+        &.disabled {
+          color: map-get($colors, disabled-color) !important;
+        }
+      }
+
+      .show > .nav-link,
+      .active > .nav-link,
+      .nav-link.show,
+      .nav-link.active {
+        color: map-get($colors, active-color);
+      }
+    }
+
+    .navbar-toggler {
+      color: map-get($colors, color);
+      border-color: map-get($colors, border);
+    }
+
+    .navbar-toggler-icon {
+      background-image: if(
+        map-get($colors, contrast-percent) > 0.75,
+        $navbar-light-toggler-icon-bg,
+        $navbar-dark-toggler-icon-bg
+      );
+    }
+
+    .navbar-text {
+      color: map-get($colors, color);
+
+      a {
+        color: map-get($colors, active-color);
+
+        &:hover,
+        &:focus {
+          color: map-get($colors, active-color);
+        }
+      }
+    }
+
+    hr {
+      border-color: map-get($colors, border);
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_switch.scss

@@ -0,0 +1,179 @@
+// * Switches
+// *******************************************************************************
+
+@mixin template-switch-size-base(
+  $size,
+  $width,
+  $height,
+  $font-size,
+  $form-label-font-size,
+  $label-line-height,
+  $inner-spacer
+) {
+  min-height: $height;
+
+  font-size: $form-label-font-size;
+  line-height: $label-line-height;
+
+  $delta: 0;
+  $line-height-computed: $form-label-font-size * $label-line-height;
+  .switch-label:first-child {
+    padding-right: $switch-gutter;
+  }
+  .switch-input ~ .switch-label {
+    padding-left: $width + $switch-gutter;
+  }
+
+  .switch-toggle-slider {
+    width: $width;
+    height: $height - ($delta * 2);
+    font-size: $font-size;
+    line-height: $height;
+    border: 1px solid transparent;
+
+    i {
+      position: relative;
+      font-size: $form-label-font-size;
+      @if ($size== 'lg') {
+        top: -2px;
+      } @else if ($size== 'sm') {
+        top: -2px;
+      } @else {
+        top: -1.35px;
+      }
+    }
+
+    @if ($line-height-computed>$height) {
+      top: (($line-height-computed - $height) * 0.5) + $delta;
+    } @else {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .switch-label {
+    @if ($line-height-computed < $height) {
+      top: ($height - $line-height-computed) * 0.5;
+    } @else {
+      top: 0;
+    }
+  }
+
+  .switch-input:checked ~ .switch-toggle-slider::after {
+    left: $width - $height - 0.1;
+  }
+
+  .switch-toggle-slider::after {
+    margin-left: $inner-spacer;
+    width: ceil(rem-to-px($height - $inner-spacer * 2));
+    height: ceil(rem-to-px($height - $inner-spacer * 2));
+  }
+
+  .switch-on {
+    padding-left: $inner-spacer;
+    padding-right: $height - $inner-spacer;
+  }
+
+  .switch-off {
+    padding-left: $height - $inner-spacer;
+    padding-right: $inner-spacer;
+  }
+
+  @if $rtl-support {
+    [dir='rtl'] & .switch-label {
+      padding-right: $width + $switch-gutter;
+      padding-left: 0;
+    }
+    [dir='rtl'] & .switch-input:checked ~ .switch-toggle-slider::after {
+      left: auto;
+      right: $width - $height - 0.15;
+    }
+
+    [dir='rtl'] & .switch-toggle-slider {
+      &::after {
+        margin-left: 0;
+        margin-right: $inner-spacer;
+      }
+    }
+
+    [dir='rtl'] & .switch-on {
+      padding-left: $height - $inner-spacer;
+      padding-right: $inner-spacer;
+    }
+
+    [dir='rtl'] & .switch-off {
+      padding-left: $inner-spacer;
+      padding-right: $height - $inner-spacer;
+    }
+  }
+}
+
+// Switch size
+@mixin template-switch-size(
+  $size,
+  $width,
+  $height,
+  $font-size,
+  $form-label-font-size,
+  $label-line-height,
+  $inner-spacer: $switch-inner-spacer
+) {
+  .switch-#{$size} {
+    @include template-switch-size-base(
+      $size,
+      $width,
+      $height,
+      $font-size,
+      $form-label-font-size,
+      $label-line-height,
+      $inner-spacer
+    );
+  }
+}
+
+// Switch variant
+@mixin template-switch-variant($parent, $background, $color: null) {
+  $selector: if($parent== '', '', '#{$parent}.switch');
+  $color: if($color, $color, color-contrast($background));
+
+  #{$selector} .switch-input:checked ~ .switch-toggle-slider {
+    background: $background;
+    color: $color;
+    box-shadow: 0 2px 6px 0 rgba($background, 0.3);
+  }
+}
+
+// Switch theme
+@mixin template-switch-theme($parent, $background, $color: null) {
+  @include template-switch-variant($parent, $background, $color);
+}
+
+// Switch validation
+@mixin template-switch-validation-state($state, $color) {
+  .switch-input {
+    //BS & jQuery validation
+    .was-validated &:#{$state},
+    &.invalid,
+    //jq
+    &.is-#{$state} {
+      ~ .switch-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      ~ .switch-toggle-slider {
+        border: 1px solid $color !important;
+      }
+
+      &:checked ~ .switch-toggle-slider {
+        background: $color;
+        color: color-contrast($color);
+        box-shadow: 0 2px 6px 0 rgba($color, 0.3);
+      }
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_text-divider.scss

@@ -0,0 +1,17 @@
+// Text Divider
+// *******************************************************************************
+
+@mixin template-text-divider-variant($divider-color, $background) {
+  $divider-selector: if($divider-color== '', '', '#{$divider-color}');
+  .divider {
+    &#{$divider-selector} {
+      &.divider-vertical,
+      .divider-text {
+        &:before,
+        &:after {
+          border-color: $background;
+        }
+      }
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_timeline.scss

@@ -0,0 +1,33 @@
+// Timeline
+// *******************************************************************************
+
+// Timeline point
+@mixin template-timeline-point-variant($point-color, $background) {
+  .timeline {
+    #{$point-color} {
+      background-color: $background !important;
+      outline: 3px solid rgba($background, 0.12);
+    }
+
+    // Timeline-outline styles
+    &.timeline-outline {
+      #{$point-color} {
+        border: 2px solid $background !important;
+      }
+    }
+  }
+}
+
+@mixin template-timeline-indicator-variant($indicator-color, $background) {
+  $color: $background;
+  $background: rgba-to-hex(rgba($background, 0.16), $rgba-to-hex-bg);
+
+  .timeline {
+    #{$indicator-color} {
+      background-color: $background;
+      i {
+        color: $color !important;
+      }
+    }
+  }
+}

resources/assets/vendor/scss/_components/mixins/_treeview.scss

@@ -0,0 +1,30 @@
+// Treeview
+// *******************************************************************************
+
+// Treeview click
+@mixin template-treeview-clicked-bg($background) {
+  .jstree-default {
+    .jstree-wholerow-hovered,
+    .jstree-hovered {
+      background: $component-hover-bg;
+      color: $component-hover-color;
+    }
+    .jstree-wholerow-clicked,
+    .jstree-clicked {
+      background: $component-hover-color;
+      color: $white;
+    }
+  }
+  .jstree-default-dark {
+    .jstree-wholerow-hovered,
+    .jstree-hovered {
+      background: $component-hover-bg;
+      color: $component-hover-color;
+    }
+    .jstree-wholerow-clicked,
+    .jstree-clicked {
+      background: $component-hover-color;
+      color: $white;
+    }
+  }
+}