@soyfri/template 1.0.1 → 1.0.3

package/dist/assets/sass/core/layout/base/sidebar/_sidebar-secondary.scss

@@ -0,0 +1,274 @@
+//
+// sidebar Secondary
+//
+
+// General mode
+.app-sidebar-secondary {
+    transition: $app-sidebar-secondary-base-transition;
+    position: relative;
+    flex-shrink: 0;
+    background-color: var(--#{$prefix}app-sidebar-secondary-base-bg-color);
+    box-shadow: var(--#{$prefix}app-sidebar-secondary-base-box-shadow);
+    border-left: var(--#{$prefix}app-sidebar-secondary-base-border-start);
+    border-right: var(--#{$prefix}app-sidebar-secondary-base-border-end);
+}
+
+// Utilities
+.app-sidebar-secondary-collapse-d-flex,
+.app-sidebar-secondary-minimize-d-flex,
+.app-sidebar-secondary-collapse-mobile-d-flex,
+.app-sidebar-secondary-minimize-mobile-d-flex {
+    display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-sidebar-secondary {        
+        @include property( z-index, $app-sidebar-secondary-base-z-index);
+        @include property( margin-left, $app-sidebar-secondary-base-gap-start-mobile);
+        @include property( margin-right, $app-sidebar-secondary-base-gap-end-mobile);
+        @include property( margin-top, $app-sidebar-secondary-base-gap-top-mobile);
+        @include property( margin-bottom, $app-sidebar-secondary-base-gap-bottom-mobile);
+    }    
+
+    // Vars
+    [data-kt-app-sidebar-secondary-enabled="true"] {
+        --#{$prefix}app-sidebar-secondary-width-actual: calc(
+            #{$app-sidebar-base-width} - 
+            #{$app-sidebar-primary-base-width} - 
+            #{$app-sidebar-primary-base-gap-start} - 
+            #{$app-sidebar-primary-base-gap-end} -
+            #{$app-sidebar-secondary-base-gap-start} - 
+            #{$app-sidebar-secondary-base-gap-end}
+        );
+    }
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-stacked="true"] {
+        --#{$prefix}app-sidebar-secondary-width: calc(
+            #{$app-sidebar-base-width} - 
+            #{$app-sidebar-primary-base-width} - 
+            #{$app-sidebar-primary-base-gap-start} - 
+            #{$app-sidebar-primary-base-gap-end} -
+            #{$app-sidebar-secondary-base-gap-start} - 
+            #{$app-sidebar-secondary-base-gap-end}
+        );        
+
+        --#{$prefix}app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-base-gap-start};
+        --#{$prefix}app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-base-gap-end};
+        --#{$prefix}app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-base-gap-top};
+        --#{$prefix}app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-base-gap-bottom};
+    }
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-minimize="on"] {
+        --#{$prefix}app-sidebar-secondary-width: #{$app-sidebar-secondary-minimize-width};
+
+        --#{$prefix}app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-minimize-gap-start};
+        --#{$prefix}app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-minimize-gap-end};
+        --#{$prefix}app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-minimize-gap-top};
+        --#{$prefix}app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-minimize-gap-bottom};
+    } 
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-collapse="on"] {
+        --#{$prefix}app-sidebar-secondary-width-actual: calc(
+            #{$app-sidebar-base-width} - 
+            #{$app-sidebar-primary-base-width} - 
+            #{$app-sidebar-primary-base-gap-start} - 
+            #{$app-sidebar-primary-base-gap-end} -
+            #{$app-sidebar-secondary-base-gap-start} - 
+            #{$app-sidebar-secondary-base-gap-end}
+        );
+
+        --#{$prefix}app-sidebar-secondary-width: 0px;
+    }       
+
+    // States
+    .app-sidebar-secondary {
+        width: var(--#{$prefix}app-sidebar-secondary-width);
+
+        [data-kt-app-sidebar-secondary-collapse="on"] & {
+            transition: $app-sidebar-secondary-base-transition;
+            width: var(--#{$prefix}app-sidebar-secondary-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-secondary-width-actual));
+        }
+
+        [data-kt-app-sidebar-secondary-minimize="on"] & {
+            transition: $app-sidebar-secondary-base-transition;
+            
+            //background-color: var(--#{$prefix}app-sidebar-secondary-minimize-bg-color);
+            //box-shadow: var(--#{$prefix}app-sidebar-secondary-minimize-box-shadow);
+            //border-left: var(--#{$prefix}app-sidebar-secondary-minimize-border-start);
+            //border-right: var(--#{$prefix}app-sidebar-secondary-minimize-border-end);
+
+            @include property( margin-left, $app-sidebar-secondary-minimize-gap-start-mobile);
+            @include property( margin-right, $app-sidebar-secondary-minimize-gap-end-mobile);
+            @include property( margin-top, $app-sidebar-secondary-minimize-gap-top-mobile);
+            @include property( margin-bottom, $app-sidebar-secondary-minimize-gap-bottom-mobile);
+        }
+
+        [data-kt-app-sidebar-secondary-hoverable="true"] & {
+            .app-sidebar-secondary-hoverable {
+                width: var(--#{$prefix}app-sidebar-secondary-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-secondary-hoverable="true"][data-kt-app-sidebar-secondary-minimize="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-secondary-base-transition;
+			width: var(--#{$prefix}app-sidebar-secondary-width-actual);
+            box-shadow: var(--#{$prefix}app-sidebar-secondary-minimize-hover-box-shadow);
+        }
+    }
+
+    // Integration
+    .app-sidebar-secondary {
+        // Header
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-sidebar-secondary-below-header="true"] & {
+            top: var(--#{$prefix}app-header-height);
+        }
+
+        // Toolbar
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-secondary-below-toolbar="true"] & {
+            top: calc(var(--#{$prefix}app-header-height) + var(--#{$prefix}app-toolbar-height, 0));
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-minimize="on"] {
+        .app-sidebar-secondary-minimize-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-secondary-minimize-d-flex {
+            display: flex !important;    
+        }
+    } 
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-collapse="on"] {
+        .app-sidebar-secondary-collapse-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-secondary-collapse-d-flex {
+            display: flex !important;    
+        }
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-sidebar-secondary {        
+        @include property( z-index, $app-sidebar-secondary-base-z-index-mobile);
+        @include property( margin-left, $app-sidebar-secondary-base-gap-start-mobile);
+        @include property( margin-right, $app-sidebar-secondary-base-gap-end-mobile);
+        @include property( margin-top, $app-sidebar-secondary-base-gap-top-mobile);
+        @include property( margin-bottom, $app-sidebar-secondary-base-gap-bottom-mobile);
+    }    
+
+    // Vars
+    [data-kt-app-sidebar-secondary-enabled="true"] {
+        --#{$prefix}app-sidebar-secondary-width-actual: calc(
+            #{$app-sidebar-base-width-mobile} - 
+            #{$app-sidebar-primary-base-width-mobile} - 
+            #{$app-sidebar-primary-base-gap-start-mobile} - 
+            #{$app-sidebar-primary-base-gap-end-mobile} - 
+            #{$app-sidebar-secondary-base-gap-start-mobile} - 
+            #{$app-sidebar-secondary-base-gap-end-mobile}
+        );
+    }
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-stacked="true"] {
+        --#{$prefix}app-sidebar-secondary-width: calc(
+            #{$app-sidebar-base-width-mobile} - 
+            #{$app-sidebar-primary-base-width-mobile} - 
+            #{$app-sidebar-primary-base-gap-start-mobile} - 
+            #{$app-sidebar-primary-base-gap-end-mobile} - 
+            #{$app-sidebar-secondary-base-gap-start-mobile} - 
+            #{$app-sidebar-secondary-base-gap-end-mobile}
+        );       
+
+        --#{$prefix}app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-base-gap-start-mobile};
+        --#{$prefix}app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-base-gap-end-mobile};
+        --#{$prefix}app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-base-gap-top-mobile};
+        --#{$prefix}app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-base-gap-bottom-mobile};
+    }
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-minimize-mobile="on"] {
+        --#{$prefix}app-sidebar-secondary-width: #{$app-sidebar-secondary-minimize-width-mobile};
+
+        --#{$prefix}app-sidebar-secondary-gap-start: #{$app-sidebar-secondary-minimize-gap-start-mobile};
+        --#{$prefix}app-sidebar-secondary-gap-end: #{$app-sidebar-secondary-minimize-gap-end-mobile};
+        --#{$prefix}app-sidebar-secondary-gap-top: #{$app-sidebar-secondary-minimize-gap-top-mobile};
+        --#{$prefix}app-sidebar-secondary-gap-bottom: #{$app-sidebar-secondary-minimize-gap-bottom-mobile};
+    }        
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-collapse-mobile="on"] {
+        --#{$prefix}app-sidebar-secondary-width-actual:  calc(
+            #{$app-sidebar-base-width-mobile} - 
+            #{$app-sidebar-primary-base-width-mobile} - 
+            #{$app-sidebar-primary-base-gap-start-mobile} - 
+            #{$app-sidebar-primary-base-gap-end-mobile} - 
+            #{$app-sidebar-secondary-base-gap-start-mobile} - 
+            #{$app-sidebar-secondary-base-gap-end-mobile}
+        );
+
+        --#{$prefix}app-sidebar-secondary-width: 0px;
+    }
+
+    // States
+    .app-sidebar-secondary {
+        width: var(--#{$prefix}app-sidebar-secondary-width);
+
+        [data-kt-app-sidebar-secondary-collapse-mobile="on"] & {
+            transition: $app-sidebar-secondary-base-transition;
+            width: var(--#{$prefix}app-sidebar-secondary-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-secondary-width-actual));
+        }
+
+        [data-kt-app-sidebar-secondary-minimize-mobile="on"] & {
+            transition: $app-sidebar-secondary-base-transition;
+            background-color: var(--#{$prefix}app-sidebar-secondary-minimize-bg-color-mobile);
+            box-shadow: var(--#{$prefix}app-sidebar-secondary-minimize-box-shadow-mobile);
+            border-left: var(--#{$prefix}app-sidebar-secondary-minimize-border-start-mobile);
+            border-right: var(--#{$prefix}app-sidebar-secondary-minimize-border-end-mobile);
+
+            //@include property( margin-left, $app-sidebar-secondary-minimize-gap-start-mobile);
+            //@include property( margin-right, $app-sidebar-secondary-minimize-gap-end-mobile);
+            //@include property( margin-top, $app-sidebar-secondary-minimize-gap-top-mobile);
+            //@include property( margin-bottom, $app-sidebar-secondary-minimize-gap-bottom-mobile);
+        }
+
+        [data-kt-app-sidebar-secondary-hoverable-mobile="true"] & {
+            .app-sidebar-secondary-hoverable {
+                width: var(--#{$prefix}app-sidebar-secondary-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-secondary-hoverable-mobile="true"][data-kt-app-sidebar-secondary-minimize-mobile="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-secondary-base-transition;
+			width: var(--#{$prefix}app-sidebar-secondary-width-actual);
+            box-shadow: var(--#{$prefix}app-sidebar-secondary-minimize-hover-box-shadow-mobile);
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-minimize-mobile="on"] {
+        .app-sidebar-secondary-minimize-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-secondary-minimize-mobile-d-flex {
+            display: flex !important;    
+        }
+    } 
+
+    [data-kt-app-sidebar-secondary-enabled="true"][data-kt-app-sidebar-secondary-collapse="on"] {
+        .app-sidebar-secondary-collapse-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-secondary-collapse-mobile-d-flex {
+            display: flex !important;    
+        }
+    }
+}

package/dist/assets/sass/core/layout/base/sidebar/_sidebar.scss

@@ -0,0 +1,284 @@
+//
+// sidebar
+//
+
+// General mode
+.app-sidebar {    
+    transition: $app-sidebar-base-transition;
+    background-color: var(--#{$prefix}app-sidebar-base-bg-color);
+    box-shadow: var(--#{$prefix}app-sidebar-base-box-shadow);
+    border-left: var(--#{$prefix}app-sidebar-base-border-start);
+    border-right: var(--#{$prefix}app-sidebar-base-border-end);
+}
+
+// Utilities
+.app-sidebar-minimize-d-flex,
+.app-sidebar-sticky-d-flex,
+.app-sidebar-collapse-d-flex,
+.app-sidebar-minimize-mobile-d-flex,
+.app-sidebar-collapse-mobile-d-flex {
+    display: none;    
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-sidebar {        
+        display: flex;    
+        flex-shrink: 0;
+        width: var(--#{$prefix}app-sidebar-width);      
+
+        @include property( z-index, $app-sidebar-base-z-index);
+        @include property( margin-left, $app-sidebar-base-gap-start);
+        @include property( margin-right, $app-sidebar-base-gap-end);
+        @include property( margin-top, $app-sidebar-base-gap-top);
+        @include property( margin-bottom, $app-sidebar-base-gap-bottom);
+    }    
+
+    // Vars
+    :root {
+        --#{$prefix}app-sidebar-width: #{$app-sidebar-base-width};
+        --#{$prefix}app-sidebar-width-actual: #{$app-sidebar-base-width};
+
+        --#{$prefix}app-sidebar-gap-start: #{$app-sidebar-base-gap-start};
+        --#{$prefix}app-sidebar-gap-end: #{$app-sidebar-base-gap-end};
+        --#{$prefix}app-sidebar-gap-top: #{$app-sidebar-base-gap-top};
+        --#{$prefix}app-sidebar-gap-bottom: #{$app-sidebar-base-gap-bottom};
+    }
+
+    [data-kt-app-sidebar-stacked="true"] {
+        --#{$prefix}app-sidebar-width: calc(var(--#{$prefix}app-sidebar-primary-width) + var(--#{$prefix}app-sidebar-secondary-width, 0px));
+    }
+
+    [data-kt-app-sidebar-minimize="on"] {
+        --#{$prefix}app-sidebar-width: #{$app-sidebar-minimize-width};
+
+        --#{$prefix}app-sidebar-gap-start: #{$app-sidebar-minimize-gap-start};
+        --#{$prefix}app-sidebar-gap-end: #{$app-sidebar-minimize-gap-end};
+        --#{$prefix}app-sidebar-gap-top: #{$app-sidebar-minimize-gap-top};
+        --#{$prefix}app-sidebar-gap-bottom: #{$app-sidebar-minimize-gap-bottom};
+    }
+
+    [data-kt-app-sidebar-sticky="on"] {
+        --#{$prefix}app-sidebar-width: #{$app-sidebar-sticky-width};
+
+        --#{$prefix}app-sidebar-gap-start: #{$app-sidebar-sticky-gap-start};
+        --#{$prefix}app-sidebar-gap-end: #{$app-sidebar-sticky-gap-end};
+        --#{$prefix}app-sidebar-gap-top: #{$app-sidebar-sticky-gap-top};
+        --#{$prefix}app-sidebar-gap-bottom: #{$app-sidebar-sticky-gap-bottom};
+    }    
+
+    [data-kt-app-sidebar-collapse="on"] {
+        --#{$prefix}app-sidebar-width: 0px;  
+    }
+
+    // States
+    .app-sidebar {
+        [data-kt-app-sidebar-static="true"] & {
+            position: relative;
+        }
+
+        [data-kt-app-sidebar-offcanvas="true"] & {
+            display: none;
+        }
+
+        [data-kt-app-sidebar-fixed="true"] & {
+            position: fixed;
+            @include property( z-index, $app-sidebar-fixed-z-index);
+            @include property( top, $app-sidebar-fixed-top);
+            @include property( bottom, $app-sidebar-fixed-bottom);
+            @include property( left, $app-sidebar-fixed-left);
+        }  
+
+        [data-kt-app-sidebar-stacked="true"] & {
+            align-items: stretch; 
+        }
+
+        [data-kt-app-sidebar-sticky="on"] & {
+            position: fixed;
+            transition: $app-sidebar-base-transition;
+            @include property( top, $app-sidebar-sticky-top);
+            @include property( bottom, $app-sidebar-sticky-bottom);
+            @include property( left, $app-sidebar-sticky-left);
+            @include property( z-index, $app-sidebar-sticky-z-index);
+
+            box-shadow: var(--#{$prefix}app-sidebar-sticky-box-shadow);
+            border-left: var(--#{$prefix}app-sidebar-sticky-border-start);
+            border-right: var(--#{$prefix}app-sidebar-sticky-border-end);
+
+            @include property( margin-left, $app-sidebar-sticky-gap-start);
+            @include property( margin-right, $app-sidebar-sticky-gap-end);
+            @include property( margin-top, $app-sidebar-sticky-gap-top);
+            @include property( margin-bottom, $app-sidebar-sticky-gap-bottom);
+        }
+
+        [data-kt-app-sidebar-minimize="on"] & {
+            transition: $app-sidebar-base-transition;
+
+            @include property( margin-left, $app-sidebar-minimize-gap-start);
+            @include property( margin-right, $app-sidebar-minimize-gap-end);
+            @include property( margin-top, $app-sidebar-minimize-gap-top);
+            @include property( margin-bottom, $app-sidebar-minimize-gap-bottom);
+        }
+
+        [data-kt-app-sidebar-hoverable="true"] & {
+            .app-sidebar-wrapper {
+                width: var(--#{$prefix}app-sidebar-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-hoverable="true"][data-kt-app-sidebar-minimize="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-base-transition;
+			width: var(--#{$prefix}app-sidebar-width-actual);
+            @include property( box-shadow, $app-sidebar-minimize-hover-box-shadow);
+        }
+
+        [data-kt-app-sidebar-collapse="on"] & {
+            transition: $app-sidebar-base-transition;
+            width: var(--#{$prefix}app-sidebar-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-width-actual));
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-minimize="on"] {
+        .app-sidebar-minimize-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-minimize-d-flex {
+            display: flex !important;    
+        }
+    }
+
+    [data-kt-app-sidebar-sticky="on"] {
+        .app-sidebar-sticky-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-sticky-d-flex {
+            display: flex !important;    
+        }
+    } 
+
+    [data-kt-app-sidebar-collapse="on"] {
+        .app-sidebar-collapse-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-collapse-d-flex {
+            display: flex !important;    
+        }
+    }
+
+    // Integration
+    .app-sidebar {
+        // Header
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-sidebar-push-header="true"]) & {
+            top: var(--#{$prefix}app-header-height);
+        }
+
+        // Toolbar
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-sidebar-push-toolbar="true"]) & {
+            top: calc(var(--#{$prefix}app-header-height) + var(--#{$prefix}app-toolbar-height, 0px));
+        }
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-sidebar {
+        display: none;
+        width: var(--#{$prefix}app-sidebar-width);
+
+        @include property( z-index, $app-sidebar-base-z-index-mobile);
+        @include property( margin-left, $app-sidebar-base-gap-start-mobile);
+        @include property( margin-right, $app-sidebar-base-gap-end-mobile);
+        @include property( margin-top, $app-sidebar-base-gap-top-mobile);
+        @include property( margin-bottom, $app-sidebar-base-gap-bottom-mobile);
+    }
+
+    // Vars
+    :root {
+        --#{$prefix}app-sidebar-width: #{$app-sidebar-base-width-mobile};
+        --#{$prefix}app-sidebar-width-actual: #{$app-sidebar-base-width-mobile};
+
+        --#{$prefix}app-sidebar-gap-start: #{$app-sidebar-base-gap-start-mobile};
+        --#{$prefix}app-sidebar-gap-end: #{$app-sidebar-base-gap-end-mobile};
+        --#{$prefix}app-sidebar-gap-top: #{$app-sidebar-base-gap-top-mobile};
+        --#{$prefix}app-sidebar-gap-bottom: #{$app-sidebar-base-gap-bottom-mobile};
+    }
+
+    [data-kt-app-sidebar-stacked="true"] {
+        --#{$prefix}app-sidebar-width: calc(var(--#{$prefix}app-sidebar-primary-width) + var(--#{$prefix}app-sidebar-secondary-width, 0));
+    }
+
+    [data-kt-app-sidebar-minimize-mobile="on"] {
+        --#{$prefix}app-sidebar-width: #{$app-sidebar-minimize-width-mobile};
+
+        --#{$prefix}app-sidebar-gap-start: #{$app-sidebar-minimize-gap-start-mobile};
+        --#{$prefix}app-sidebar-gap-end: #{$app-sidebar-minimize-gap-end-mobile};
+        --#{$prefix}app-sidebar-gap-top: #{$app-sidebar-minimize-gap-top-mobile};
+        --#{$prefix}app-sidebar-gap-bottom: #{$app-sidebar-minimize-gap-bottom-mobile};
+    }
+
+    [data-kt-app-sidebar-collapse-mobile="on"] {
+        --#{$prefix}app-sidebar-width: 0px;
+    }
+
+    // States
+    .app-sidebar {
+        [data-kt-app-sidebar-stacked="true"] & {
+            align-items: stretch; 
+        }
+            
+        [data-kt-app-sidebar-minimize-mobile="on"] & {
+            transition: $app-sidebar-base-transition;
+
+            @include property( margin-left, $app-sidebar-minimize-gap-start-mobile);
+            @include property( margin-right, $app-sidebar-minimize-gap-end-mobile);
+            @include property( margin-top, $app-sidebar-minimize-gap-top-mobile);
+            @include property( margin-bottom, $app-sidebar-minimize-gap-bottom-mobile);
+        }
+
+        [data-kt-app-sidebar-hoverable-mobile="true"] & {
+            .app-sidebar-wrapper {
+                width: var(--#{$prefix}app-sidebar-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-hoverable-mobile="true"][data-kt-app-sidebar-minimize-mobile="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-base-transition;
+			width: var(--#{$prefix}app-sidebar-width-actual);
+            box-shadow: var(--#{$prefix}app-sidebar-minimize-hover-box-shadow-mobile); 
+        }
+
+        [data-kt-app-sidebar-collapse-mobile="on"] & {
+            transition: $app-sidebar-base-transition;
+            width: var(--#{$prefix}app-sidebar-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-width-actual));
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-minimize-mobile="on"] {
+        .app-sidebar-minimize-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-minimize-mobile-d-flex {
+            display: flex !important;    
+        }
+    }
+
+    [data-kt-app-sidebar-collapse-mobile="on"] {
+        .app-sidebar-collapse-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-collapse-mobile-d-flex {
+            display: flex !important;    
+        }
+    }
+}

package/dist/assets/sass/core/vendors/plugins/_apexcharts.scss

@@ -0,0 +1,129 @@
+//
+// Apexcharts
+//
+
+// Text
+.apexcharts-text,
+.apexcharts-title-text,
+.apexcharts-legend-text {
+	font-family: $font-family-sans-serif !important;
+}
+
+.apexcharts-title-text {
+	font-weight: $font-weight-normal;
+}
+
+.apexcharts-pie-label {
+	font-weight: $font-weight-normal;
+	font-size: $font-size-sm;
+}
+
+// Dropdown
+.apexcharts-toolbar{
+	text-align: left !important;
+}
+
+.apexcharts-menu {
+	background: var(--#{$prefix}body-bg) !important;
+	border: 0 !important;
+	padding: 0.5rem 0 !important;
+	box-shadow: var(--#{$prefix}dropdown-box-shadow);
+	border-radius: $border-radius !important;
+	overflow: hidden;
+	min-width: 10rem !important;
+
+	.apexcharts-menu-item {
+		padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+		transition: $transition-base;
+
+		&:hover{
+			background-color: var(--#{$prefix}component-hover-bg) !important;
+		}
+	}
+}
+
+// Tooltips
+.apexcharts-tooltip {
+	&.apexcharts-theme-light {
+		@include border-radius($border-radius);
+		box-shadow: var(--#{$prefix}dropdown-box-shadow);
+		border: 0 !important;
+		background: var(--#{$prefix}body-bg) !important;
+		color: var(--#{$prefix}gray-800);
+
+		.apexcharts-tooltip-title {
+			background: var(--#{$prefix}body-bg) !important;
+			font-weight: $font-weight-semibold;
+			color: var(--#{$prefix}gray-800);
+			border-bottom: 1px solid var(--#{$prefix}gray-100) !important;
+		}
+	}
+
+	.apexcharts-tooltip-title {
+		padding: 0.5rem 1rem;
+	}
+
+	.apexcharts-tooltip-series-group {
+	}
+}
+
+.apexcharts-xaxistooltip {
+	&.apexcharts-theme-light {
+		@include border-radius($border-radius !important);
+		box-shadow: var(--#{$prefix}dropdown-box-shadow) !important;
+		border: 0 !important;
+		background: var(--#{$prefix}dropdown-box-shadow) !important;
+		color: var(--#{$prefix}gray-800);
+
+		&:before {
+			border-bottom: 0 !important;
+		}
+
+		&:after {
+			border-bottom-color: var(--#{$prefix}dropdown-box-shadow) !important;
+		}
+	}
+}
+
+// Border radius integration
+.card-rounded-bottom {
+	.apexcharts-canvas {
+		svg {
+			border-bottom-left-radius: $card-border-radius;
+			border-bottom-right-radius: $card-border-radius;
+		}
+	}
+}
+
+// Border radius options
+.rounded {
+	.apexcharts-canvas {
+		svg {
+			border-radius: $border-radius !important;
+		}
+	}
+}
+
+.rounded-sm {
+	.apexcharts-canvas {
+		svg {
+			border-radius: $border-radius-sm !important;
+		}
+	}
+}
+
+.rounded-lg {
+	.apexcharts-canvas {
+		svg {
+			border-radius: $border-radius-lg !important;
+		}
+	}
+}
+
+.rounded-xl {
+	.apexcharts-canvas {
+		svg {
+			border-radius: $border-radius-xl !important;
+		}
+	}
+}

package/dist/assets/sass/core/vendors/plugins/_bootstrap-maxlength.scss

@@ -0,0 +1,16 @@
+//
+// Bootstrap Maxlength
+//
+
+.bootstrap-maxlength {
+    z-index: $bootstrap-maxlength-z-index !important;
+
+    // In modal
+    .modal-open & {
+        z-index: #{$zindex-modal + 5} !important;
+    }
+
+    &.badge {
+        display: inline-flex !important;
+    }
+}