@hitsoft/e-donusum 1.0.8 → 1.0.10

package/assets/sass/core/vendors/plugins/_vis-timeline.scss

@@ -0,0 +1,131 @@
+//
+// Vis Timeline
+//
+
+// Variables
+$vis-border-color: var(--#{$prefix}border-color);
+$vis-border-dashed-color: var(--#{$prefix}border-dashed-color);
+
+// General
+.vis-timeline {
+    border: 1px solid $vis-border-color !important;
+
+    @if ($enable-rounded) {
+        border-radius: $border-radius !important;
+    }
+
+    .vis-labelset {
+        .vis-label {
+            display: flex;
+            align-items: center;
+            padding-left: 1rem;
+            padding-right: 1rem;
+            border-bottom: none;
+            font-size: $h4-font-size;
+            font-weight: $font-weight-semibold;
+            color: var(--#{$prefix}gray-900);
+        }
+    }
+
+    .vis-itemset {
+    }
+
+    .vis-foreground {
+        .vis-group {
+            border-bottom: none;
+        }
+    }
+
+    .vis-item {
+        position: absolute;
+        color: var(--#{$prefix}gray-700);
+        border-color: var(--#{$prefix}primary);
+        border-width: 1px;
+        background-color: var(--#{$prefix}gray-100);
+
+        @if ($enable-rounded) {
+            border-radius: $border-radius !important;
+        }
+
+        &.vis-selected {
+            background-color: var(--#{$prefix}warning-light);
+            color: var(--#{$prefix}gray-700);
+            border-color: var(--#{$prefix}warning);
+        }
+
+        .vis-item-content {
+            padding: 0.75rem 1rem;
+            width: 100%;
+            transform: none !important;
+        }
+    }
+
+    .vis-time-axis {
+        font-size: $font-size-sm;
+        text-transform: uppercase;
+        font-weight: $font-weight-semibold;
+
+        .vis-text {
+            color: var(--#{$prefix}gray-400);
+        }
+
+        .vis-grid.vis-minor {
+            border-left-color: $vis-border-dashed-color !important;
+        }
+
+        .vis-grid.vis-vertical {
+            border-left-style: dashed !important;
+        }
+    }
+
+    .vis-panel {
+        .vis-shadow {
+            box-shadow: none !important;
+        }
+    }
+
+    .vis-panel {
+        &.vis-bottom,
+        &.vis-center,
+        &.vis-left,
+        &.vis-right,
+        &.vis-top {
+            border-color: $vis-border-color !important;
+        }
+    }
+
+    .vis-current-time {
+        background-color: var(--#{$prefix}success);
+    }
+}
+
+// Custom style
+.vis-timeline-custom {    
+    .vis-timeline {
+        border: 0 !important;
+
+        .vis-label {
+            padding-left: 0 !important;
+        }
+    }    
+
+    .vis-panel {
+        &.vis-bottom,
+        &.vis-center,
+        &.vis-left,
+        &.vis-right,
+        &.vis-top {
+            border: 0 !important;
+        }
+    }
+
+    .vis-item {
+        background-color: transparent;
+        border: 0 !important;
+        border-radius: 0 !important;
+
+        .vis-item-content {
+            padding: 0 !important;
+        }
+    }
+}

package/assets/sass/core/vendors/plugins/mixins/_nouislider.scss

@@ -0,0 +1,13 @@
+//
+// noUiSlider Mixins
+//
+
+@mixin nouislider-size($height, $handle-width, $handle-height, $handle-pos-top) {
+    height: $height;
+
+    .noUi-handle {
+        width: $handle-width;
+        height: $handle-height;
+        top: -#{$handle-pos-top};
+    }
+}

package/assets/sass/layout/_aside.scss

@@ -0,0 +1,22 @@
+//
+// Aside
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    .app-aside {
+        border: 1px solid var(--#{$prefix}border-color);
+		border-radius: $card-border-radius;
+		box-shadow: $card-box-shadow;
+    }
+}
+
+// Dark mode
+@include color-mode(dark) {
+    // Desktop mode
+	@include media-breakpoint-up(lg) {
+		.app-aside {
+			//box-shadow: $card-box-shadow-dark;
+		}
+	}
+}

package/assets/sass/layout/_content.scss

@@ -0,0 +1,22 @@
+//
+// Content
+//
+
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.app-content {
+		[data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed="true"]) & {
+			padding-top: 0;
+		}			
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.app-content { 
+		[data-kt-app-toolbar-enabled="true"]:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
+			padding-top: 0;
+		}
+	}
+}

package/assets/sass/layout/_layout.scss

@@ -0,0 +1,17 @@
+//
+// Layout
+//
+
+@import "root";
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-minimize";
+@import "sidebar/sidebar-dark";
+@import "sidebar/sidebar-light";
+@import "aside";
+@import "header/header";
+@import "header/header-dark";
+@import "header/header-sidebar-light";
+@import "content";
+@import "toolbar";
+@import "main";
+@import "page-title";

package/assets/sass/layout/_main.scss

@@ -0,0 +1,21 @@
+//
+// Main
+//
+
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.app-main {	
+		:not([data-kt-app-footer-fixed="true"]) & {        
+			.app-content {			
+				padding-bottom: 0 !important;					
+			}
+		} 	
+		
+		[data-kt-app-footer-fixed="true"] & {        
+			.app-content {			
+				padding-bottom: $app-content-padding-y !important;					
+			}
+		} 				
+	}
+}

package/assets/sass/layout/_page-title.scss

@@ -0,0 +1,14 @@
+//
+// Page Title(used by Dark Header layout only)
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    [data-kt-app-layout="dark-header"] {
+        .app-header {
+            .page-heading {
+                color: $white !important;
+            }  
+        } 
+    }
+}

package/assets/sass/layout/_root.scss

@@ -0,0 +1,49 @@
+//
+// Root
+//
+
+// Light mode
+@include color-mode(light) {
+    // Header light
+    --#{$prefix}app-header-light-separator-color: #{$app-header-light-separator-color};
+
+    // Sidebar base
+    --#{$prefix}app-sidebar-base-toggle-btn-box-shadow: #{$app-sidebar-base-toggle-btn-box-shadow};
+    --#{$prefix}app-sidebar-base-toggle-btn-bg-color: #{$app-sidebar-base-toggle-btn-bg-color};
+    --#{$prefix}app-sidebar-base-toggle-btn-border-color: #{$app-sidebar-base-toggle-btn-border-color};
+    --#{$prefix}app-sidebar-base-border-color: #{$app-sidebar-base-border-color};
+
+    // Sidebar light
+    --#{$prefix}app-sidebar-light-bg-color: #{$app-sidebar-light-bg-color};
+    --#{$prefix}app-sidebar-light-box-shadow: #{$app-sidebar-light-box-shadow};
+    --#{$prefix}app-sidebar-light-separator-color: #{$app-sidebar-light-separator-color};
+    --#{$prefix}app-sidebar-light-scrollbar-color-hover: #{$app-sidebar-light-scrollbar-color-hover};
+    --#{$prefix}app-sidebar-light-menu-heading-color: #{$app-sidebar-light-menu-heading-color};
+    --#{$prefix}app-sidebar-light-menu-link-bg-color-active: #{$app-sidebar-light-menu-link-bg-color-active};
+    --#{$prefix}app-sidebar-light-header-menu-link-bg-color-active: #{$app-sidebar-light-header-menu-link-bg-color-active};
+    --#{$prefix}app-sidebar-light-menu-link-color: #{$app-sidebar-light-menu-link-color};
+    --#{$prefix}app-sidebar-light-menu-link-icon-color: #{$app-sidebar-light-menu-link-icon-color};
+}
+
+// Dark mode
+@include color-mode(dark) {
+    // Header light
+    --#{$prefix}app-header-light-separator-color: #{$app-header-light-separator-color-dark};    
+
+    // Sidebar base
+    --#{$prefix}app-sidebar-base-toggle-btn-box-shadow: #{$app-sidebar-base-toggle-btn-box-shadow-dark};
+    --#{$prefix}app-sidebar-base-toggle-btn-bg-color: #{$app-sidebar-base-toggle-btn-bg-color-dark};
+    --#{$prefix}app-sidebar-base-toggle-btn-border-color: #{$app-sidebar-base-toggle-btn-border-color-dark};
+    --#{$prefix}app-sidebar-base-border-color: #{$app-sidebar-base-border-color-dark};
+
+    // Sidebar light
+    --#{$prefix}app-sidebar-light-bg-color: #{$app-sidebar-light-bg-color-dark};
+    --#{$prefix}app-sidebar-light-box-shadow: #{$app-sidebar-light-box-shadow-dark};
+    --#{$prefix}app-sidebar-light-separator-color: #{$app-sidebar-light-separator-color-dark};
+    --#{$prefix}app-sidebar-light-scrollbar-color-hover: #{$app-sidebar-light-scrollbar-color-hover-dark};
+    --#{$prefix}app-sidebar-light-menu-heading-color: #{$app-sidebar-light-menu-heading-color-dark};
+    --#{$prefix}app-sidebar-light-menu-link-bg-color-active: #{$app-sidebar-light-menu-link-bg-color-active-dark};
+    --#{$prefix}app-sidebar-light-header-menu-link-bg-color-active: #{$app-sidebar-light-header-menu-link-bg-color-active-dark};
+    --#{$prefix}app-sidebar-light-menu-link-color: #{$app-sidebar-light-menu-link-color-dark};
+    --#{$prefix}app-sidebar-light-menu-link-icon-color: #{$app-sidebar-light-menu-link-icon-color-dark};
+}

package/assets/sass/layout/_toolbar.scss

@@ -0,0 +1,42 @@
+//
+// Toolbar
+//
+
+// Form controls
+:is([data-kt-app-layout="light-sidebar"], [data-kt-app-layout="light-header"], [data-kt-app-layout="dark-header"]) {
+    .app-toolbar {
+        .form-select {
+            background-color: var(--#{$prefix}body-bg) !important;    
+        }    
+    }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    .app-toolbar {
+        [data-kt-app-layout="light-sidebar"] & {
+            border-top: 1px solid var(--#{$prefix}border-color);
+        }
+
+        body:not([data-kt-app-toolbar-fixed="true"]) & {
+            height: auto;
+            background-color: transparent;
+            border-top: 0;
+            border-bottom: 0;
+            box-shadow: none;    
+        }
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    .app-toolbar {
+        body:not([data-kt-app-toolbar-fixed-mobile="true"]) & {
+            height: auto;
+            background-color: transparent;
+            border-top: 0;
+            border-bottom: 0;
+            box-shadow: none;    
+        }
+    }
+}

package/assets/sass/layout/_variables.custom.scss

@@ -0,0 +1,132 @@
+//
+// Variables
+//
+
+// Reboot
+$app-bg-color: #fcfcfc;
+$app-bg-color-dark: $coal-400;
+$app-blank-bg-color: $app-bg-color;
+$app-blank-bg-color-dark: $app-bg-color-dark;
+
+// General
+$app-general-root-font-size-desktop: 13px;
+$app-general-root-font-size-tablet: 12px;
+$app-general-root-font-size-mobile: 12px;
+
+// Container
+$app-container-padding-x: 30px;
+$app-container-padding-x-mobile: 20px;
+
+// Header base
+$app-header-base-height: 74px;
+$app-header-base-height-mobile: 60px;
+$app-header-base-bg-color: transparent;
+$app-header-base-bg-color-dark: $coal-500;
+$app-header-base-bg-color-mobile: $app-header-base-bg-color;
+$app-header-base-bg-color-mobile-dark: $app-header-base-bg-color-dark;
+$app-header-base-box-shadow: none;
+$app-header-base-box-shadow-dark: none;
+
+// Header minimize
+$app-header-minimize-height: 74px;
+$app-header-minimize-height-mobile: 60px;
+$app-header-minimize-bg-color: $body-bg;
+$app-header-minimize-bg-color-dark: $app-header-base-bg-color-dark;
+$app-header-minimize-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-header-minimize-box-shadow-dark: $box-shadow-sm-dark;
+
+// Header light
+$app-header-light-separator-color: #E4E6EF;
+$app-header-light-separator-color-dark: $border-color-dark;
+
+// Header dark
+$app-header-dark-bg-color:$coal-500;
+$app-header-dark-separator-color: #282a3d;
+$app-header-dark-scrollbar-color: #3b3b64;
+$app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
+$app-header-dark-menu-active-link-bg-color: #242424;
+
+// Sidebar base
+$app-sidebar-base-width: 265px;
+$app-sidebar-base-width-mobile: 250px;
+
+$app-sidebar-base-toggle-btn-box-shadow: 0px 8px 14px rgba(15, 42, 81, 0.04);
+$app-sidebar-base-toggle-btn-box-shadow-dark: none;
+$app-sidebar-base-toggle-btn-bg-color: $body-bg;
+$app-sidebar-base-toggle-btn-bg-color-dark: $gray-200-dark;
+$app-sidebar-base-toggle-btn-border-color: #F1F1F2;
+$app-sidebar-base-toggle-btn-border-color-dark: none;
+$app-sidebar-base-border-color: #F1F1F2;
+$app-sidebar-base-border-color-dark: none;
+
+// Sidebar minimize
+$app-sidebar-minimize-width: 75px;
+
+// Sidebar light
+$app-sidebar-light-bg-color: $body-bg;
+$app-sidebar-light-bg-color-dark:$coal-500;
+
+$app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82,63,105,.05);
+$app-sidebar-light-box-shadow-dark: none;
+
+$app-sidebar-light-separator-color: $app-header-light-separator-color;
+$app-sidebar-light-separator-color-dark: $app-header-light-separator-color-dark;
+
+$app-sidebar-light-scrollbar-color-hover: $gray-200;
+$app-sidebar-light-scrollbar-color-hover-dark: $gray-200-dark;
+$app-sidebar-light-menu-heading-color: #B5B5C3;
+$app-sidebar-light-menu-heading-color-dark: $gray-500-dark;
+$app-sidebar-light-menu-link-bg-color-active:#F7F8FB;
+$app-sidebar-light-menu-link-bg-color-active-dark:#2A2A3C;
+$app-sidebar-light-menu-link-color: #252F4A;
+$app-sidebar-light-menu-link-color-dark: $gray-300;
+$app-sidebar-light-menu-link-icon-color: #99A1B7;
+$app-sidebar-light-menu-link-icon-color-dark: #7F8194;
+$app-sidebar-light-header-menu-link-bg-color-active: #F7F8FB;
+$app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
+
+// Sidebar dark
+$app-sidebar-dark-bg-color: $coal-500;
+$app-sidebar-dark-separator-color: $light-light-dark;
+$app-sidebar-dark-scrollbar-color-hover: lighten($app-sidebar-dark-separator-color, 2%);
+$app-sidebar-dark-menu-heading-color: $gray-500-dark;
+$app-sidebar-dark-menu-sub-link-color: $gray-600-dark;;
+$app-sidebar-dark-menu-link-bg-color-active: #1C1C21;
+
+// Aside base
+$app-aside-base-width: 320px;
+$app-aside-base-width-mobile: 300px;
+$app-aside-base-bg-color: $body-bg;
+$app-aside-base-bg-color-dark: #131313;
+$app-aside-base-gap-end: $app-container-padding-x;
+$app-aside-base-gap-top: $app-container-padding-x;
+$app-aside-base-gap-bottom: $app-container-padding-x;
+
+// Toolbar base
+$app-toolbar-base-height: 55px;
+$app-toolbar-base-bg-color: $body-bg;
+$app-toolbar-base-bg-color-dark: #131313;
+$app-toolbar-base-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-toolbar-base-box-shadow-dark: none;
+$app-toolbar-base-border-top: 1px dashed $border-dashed-color;
+$app-toolbar-base-border-top-dark: 1px dashed $border-dashed-color-dark;
+
+// Footer
+$app-footer-height: 60px;
+$app-footer-height-mobile: auto;
+$app-footer-bg-color: transparent;
+$app-footer-bg-color-dark: transparent;
+$app-footer-box-shadow: 0px 10px 30px 0px rgba(49, 25, 79, 0.05);
+$app-footer-box-shadow-dark: none;
+
+// Scrolltop
+$scrolltop-bottom: 43px;
+$scrolltop-bottom-mobile: 23px;
+$scrolltop-end: 7px;
+$scrolltop-end-mobile: 5px;
+
+// Layout builder toggle(used for Demo purposes only)
+$app-layout-builder-toggle-end: 50px;
+$app-layout-builder-toggle-end-mobile: 40px;
+$app-layout-builder-toggle-bottom: 40px;
+$app-layout-builder-toggle-bottom-mobile: 20px;

package/assets/sass/layout/header/_header-dark.scss

@@ -0,0 +1,77 @@
+//
+// Dark Header(used by Dark Header layout only)
+//
+
+[data-kt-app-layout="dark-header"] {
+    .app-header {
+        background-color: $app-header-dark-bg-color;
+        border-bottom: 0 !important;
+
+        .btn-custom {
+            @include button-custom-variant(
+                $color:var(--#{$prefix}gray-200), 
+                $icon-color: var(--#{$prefix}gray-200),  
+                $border-color: null, 
+                $bg-color: null, 
+                $color-active: var(--#{$prefix}primary), 
+                $icon-color-active: var(--#{$prefix}primary), 
+                $border-color-active: null, 
+                $bg-color-active: rgba(63, 66, 84, 0.35)
+            );
+        }
+    }
+    
+   
+    // General mode
+    .app-header-menu {
+        .menu {                  
+            // Menu root links          
+            > .menu-item {
+                @include menu-link-default-state( 
+                    $title-color: #858585, 
+                    $icon-color:#C5C5D8, 
+                    $bullet-color:#787887, 
+                    $arrow-color: #787887, 
+                    $bg-color: null,
+                    $all-links: false                      
+                );
+
+                @include menu-link-hover-state( 
+                    $title-color: var(--#{$prefix}primary-inverse), 
+                    $icon-color: var(--#{$prefix}primary-inverse), 
+                    $bullet-color: var(--#{$prefix}primary-inverse), 
+                    $arrow-color: var(--#{$prefix}primary-inverse), 
+                    $bg-color: null,
+                    $all-links: false   
+                );
+
+                @include menu-link-show-state( 
+                    $title-color: var(--#{$prefix}primary-inverse), 
+                    $icon-color: var(--#{$prefix}primary-inverse), 
+                    $bullet-color: var(--#{$prefix}primary-inverse), 
+                    $arrow-color: var(--#{$prefix}primary-inverse), 
+                    $bg-color: null,
+                    $all-links: false   
+                );
+
+                @include menu-link-here-state( 
+                    $title-color: var(--#{$prefix}primary-inverse), 
+                    $icon-color: var(--#{$prefix}primary-inverse), 
+                    $bullet-color: var(--#{$prefix}primary-inverse), 
+                    $arrow-color: var(--#{$prefix}primary-inverse), 
+                    $bg-color: $app-header-dark-menu-active-link-bg-color,
+                    $all-links: false   
+                );   
+                
+                @include menu-link-active-state( 
+                    $title-color: var(--#{$prefix}primary-inverse), 
+                    $icon-color: var(--#{$prefix}primary-inverse), 
+                    $bullet-color: var(--#{$prefix}primary-inverse), 
+                    $arrow-color: var(--#{$prefix}primary-inverse), 
+                    $bg-color: $app-header-dark-menu-active-link-bg-color,
+                    $all-links: false   
+                );
+            }
+        }
+    }   
+}

package/assets/sass/layout/header/_header-sidebar-light.scss

@@ -0,0 +1,55 @@
+//
+// Custom Header(used by Light Sidebar layout only)
+//
+
+
+[data-kt-app-layout="light-sidebar"] {
+    // Desktop mode
+    @include media-breakpoint-up(lg) {
+        .app-header-menu {
+            .menu {
+                // Menu root item
+                > .menu-item {
+                    @include menu-link-here-state( 
+                        $title-color: var(--#{$prefix}primary), 
+                        $icon-color: var(--#{$prefix}primary), 
+                        $bullet-color: var(--#{$prefix}primary), 
+                        $arrow-color: var(--#{$prefix}primary), 
+                        $bg-color: null,
+                        $all-links: false
+                    );
+
+                    @include menu-link-active-state( 
+                        $title-color: var(--#{$prefix}primary), 
+                        $icon-color: var(--#{$prefix}primary), 
+                        $bullet-color: var(--#{$prefix}primary), 
+                        $arrow-color: var(--#{$prefix}primary), 
+                        $bg-color: var(--#{$prefix}gray-100),
+                        $all-links: false
+                    );
+                }
+            }
+        }        
+    }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed="true"]) {
+        .app-header {
+            background-color: transparent;    
+            box-shadow: none;
+            border-bottom: none;
+        }
+    }    
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    [data-kt-app-layout="light-sidebar"]:not([data-kt-app-header-fixed-mobile="true"]) {
+        .app-header {
+            background-color: transparent;    
+            box-shadow: none;            
+        }
+    }
+}