@hitsoft/e-donusum 1.0.8 → 1.0.10

package/assets/sass/core/layout/base/_wrapper.scss

@@ -0,0 +1,100 @@
+//
+// Wrapper
+//
+
+// General mode
+.app-wrapper {
+    display: flex;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Integration
+    .app-wrapper {
+        transition: $app-wrapper-transition;
+        
+        // Header
+        [data-kt-app-header-sticky="on"] & {
+            margin-top: var(--#{$prefix}app-header-height-actual);
+        }
+
+        [data-kt-app-header-fixed="true"] & {
+            margin-top: var(--#{$prefix}app-header-height);
+        }
+
+        // Toolbar
+        [data-kt-app-toolbar-sticky="on"] & {
+            margin-top: var(--#{$prefix}app-toolbar-height);
+        }
+
+        [data-kt-app-header-fixed="true"][data-kt-app-toolbar-sticky="on"] & {
+            margin-top: calc(var(--#{$prefix}app-header-height-actual) + var(--#{$prefix}app-toolbar-height-actual));
+        }
+
+        [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
+            margin-top: calc(var(--#{$prefix}app-header-height) + var(--#{$prefix}app-toolbar-height));
+        }
+
+        // Sidebar
+        [data-kt-app-sidebar-fixed="true"] & {
+            margin-left: calc(
+                var(--#{$prefix}app-sidebar-width) + 
+                var(--#{$prefix}app-sidebar-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-gap-end, 0px)
+            );
+        }
+
+        // Sidebar Panel
+        [data-kt-app-sidebar-panel-fixed="true"] & {
+            margin-left: calc(
+                var(--#{$prefix}app-sidebar-width) + 
+                var(--#{$prefix}app-sidebar-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-gap-end, 0px) +
+                var(--#{$prefix}app-sidebar-panel-width) + 
+                var(--#{$prefix}app-sidebar-panel-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-panel-gap-end, 0px)
+            );
+        }
+
+        // Aside
+        [data-kt-app-aside-fixed="true"] & {
+            margin-right: calc(
+                var(--#{$prefix}app-aside-width) + 
+                var(--#{$prefix}app-aside-gap-start, 0px) + 
+                var(--#{$prefix}app-aside-gap-end, 0px)
+            );
+        }
+
+        // Footer
+        [data-kt-app-footer-fixed="true"] & {
+            margin-bottom: var(--#{$prefix}app-footer-height);
+        }  
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Integration
+    .app-wrapper {
+        transition: $app-wrapper-transition;
+        
+        // Header
+        [data-kt-app-header-sticky="on"] & {
+            margin-top: var(--#{$prefix}app-header-height-actual);
+        }
+
+        [data-kt-app-header-fixed-mobile="true"] & {
+            margin-top: var(--#{$prefix}app-header-height);
+        }
+
+        // Toolbar
+        [data-kt-app-header-fixed-mobile="true"][data-kt-app-toolbar-sticky="on"] & {
+            margin-top: calc(var(--#{$prefix}app-header-height-actual) + var(--#{$prefix}app-toolbar-height-actual));
+        }
+
+        // Footer
+        [data-kt-app-footer-fixed-mobile="true"] & {
+            margin-bottom: var(--#{$prefix}app-footer-height);
+        }  
+    }
+}

package/assets/sass/core/layout/base/aside/_aside.scss

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

package/assets/sass/core/layout/base/header/_header-primary.scss

@@ -0,0 +1,135 @@
+//
+// Header primary
+//
+
+// General mode
+.app-header-primary {
+    transition: $app-header-primary-base-transition;
+    display: flex;
+    align-items: stretch;   
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-header-primary {
+        @include property( z-index, $app-header-primary-base-z-index);
+        background-color: var(--#{$prefix}app-header-primary-base-bg-color);
+        box-shadow: var(--#{$prefix}app-header-primary-base-box-shadow);
+        border-bottom: var(--#{$prefix}app-header-primary-base-border-bottom);
+    }    
+
+    // Vars
+    [data-kt-app-header-primary-enabled="true"] {
+        --#{$prefix}app-header-primary-height: #{$app-header-primary-base-height};
+    }
+
+    [data-kt-app-header-primary-enabled="true"][data-kt-app-header-sticky="on"] {
+        --#{$prefix}app-header-primary-height: #{$app-header-primary-sticky-height};
+    }
+
+    [data-kt-app-header-primary-enabled="true"][data-kt-app-header-minimize="on"] {
+        --#{$prefix}app-header-primary-height: #{$app-header-primary-minimize-height};
+    } 
+
+    [data-kt-app-header-primary-enabled="true"][data-kt-app-header-sticky="on"][data-kt-app-header-primary-sticky-hide="true"] {
+        --#{$prefix}app-header-primary-height: 0;
+    }
+
+    // States
+    .app-header-primary {
+        height: var(--#{$prefix}app-header-primary-height);
+
+        [data-kt-app-header-primary-fixed="true"] & {
+            @include property( z-index, $app-header-primary-fixed-z-index);
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;            
+        }
+
+        [data-kt-app-header-primary-static="true"] & {
+            position: relative;
+        }
+
+        [data-kt-app-header-primary-sticky="on"] & {
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+            @include property( height, $app-header-primary-sticky-height);
+            @include property( z-index, $app-header-primary-sticky-z-index);
+
+            background-color: var(--#{$prefix}app-header-primary-sticky-bg-color);
+            box-shadow: var(--#{$prefix}app-header-primary-sticky-box-shadow);
+            border-bottom: var(--#{$prefix}app-header-primary-sticky-border-bottom);
+        }
+
+        [data-kt-app-header-primary-minimize="on"] & {
+            transition: $app-header-primary-base-transition;
+            @include property( height, $app-header-primary-minimize-height);
+            @include property( z-index, $app-header-primary-minimize-z-index);
+
+            background-color: var(--#{$prefix}app-header-primary-minimize-bg-color);
+            box-shadow: var(--#{$prefix}app-header-primary-minimize-box-shadow);
+            border-bottom: var(--#{$prefix}app-header-primary-minimize-border-bottom);
+        }
+
+        [data-kt-app-header-sticky="on"][data-kt-app-header-primary-sticky-hide="true"] & {
+            display: none !important;
+        }
+    }
+
+    // Integration
+    .app-header-primary {
+        // Sidebar
+        [data-kt-app-header-primary-enabled="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] & {
+            left: calc(
+                var(--#{$prefix}app-sidebar-width) + 
+                var(--#{$prefix}app-sidebar-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-gap-end, 0px)
+            );
+        }  
+
+        // Sidebar Panel
+        [data-kt-app-header-primary-enabled="true"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] & {
+            left: calc(
+                var(--#{$prefix}app-sidebar-width) + 
+                var(--#{$prefix}app-sidebar-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-gap-end, 0px) +
+                var(--#{$prefix}app-sidebar-panel-width) + 
+                var(--#{$prefix}app-sidebar-panel-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-panel-gap-end, 0px)
+            );
+        }
+    } 
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-header .app-header-primary {
+        flex-grow: 1;
+        @include property( z-index, $app-header-primary-base-z-index-mobile);
+        height: var(--#{$prefix}app-header-primary-height);
+        border-bottom: var(--#{$prefix}app-header-primary-base-border-bottom);
+        box-shadow: var(--#{$prefix}app-header-primary-base-box-shadow);
+    }
+
+    .app-header-primary {        
+        background-color: var(--#{$prefix}app-header-primary-base-bg-color);          
+    }  
+
+    // Vars
+    [data-kt-app-header-primary-enabled="true"] {
+        --#{$prefix}app-header-primary-height: #{$app-header-primary-base-height-mobile};
+    }
+
+    [data-kt-app-header-primary-enabled="true"][data-kt-app-header-sticky="on"] {
+        --#{$prefix}app-header-primary-height: #{$app-header-primary-sticky-height-mobile};
+    }
+    
+    [data-kt-app-header-primary-enabled="true"][data-kt-app-header-minimize="on"] {
+        --#{$prefix}app-header-primary-height: #{$app-header-primary-minimize-height-mobile};
+    }
+}

package/assets/sass/core/layout/base/header/_header-secondary.scss

@@ -0,0 +1,139 @@
+//
+// Header secondary
+//
+
+// General mode
+.app-header-secondary {
+    transition: $app-header-secondary-base-transition;
+    display: flex;
+    align-items: stretch; 
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-header-secondary {
+        @include property( z-index, $app-header-secondary-base-z-index);
+
+        background-color: var(--#{$prefix}app-header-secondary-base-bg-color);
+        box-shadow: var(--#{$prefix}app-header-secondary-base-box-shadow);
+        border-top: var(--#{$prefix}app-header-secondary-base-border-top);
+        border-bottom: var(--#{$prefix}app-header-secondary-base-border-bottom);
+    }    
+
+    // Vars
+    [data-kt-app-header-secondary-enabled="true"] {
+        --#{$prefix}app-header-secondary-height: #{$app-header-secondary-base-height};
+    }
+
+    [data-kt-app-header-secondary-enabled="true"][data-kt-app-header-sticky="on"] {
+        --#{$prefix}app-header-secondary-height: #{$app-header-secondary-sticky-height};
+    }
+
+    [data-kt-app-header-secondary-enabled="true"][data-kt-app-header-minimize="on"] {
+        --#{$prefix}app-header-secondary-height: #{$app-header-secondary-minimize-height};
+    } 
+
+    [data-kt-app-header-secondary-enabled="true"][data-kt-app-header-sticky="on"][data-kt-app-header-secondary-sticky-hide="true"] {
+        --#{$prefix}app-header-secondary-height: 0;
+    }
+
+    // States
+    .app-header-secondary {
+        height: var(--#{$prefix}app-header-secondary-height);
+
+        [data-kt-app-header-secondary-fixed="true"] & {
+            @include property( z-index, $app-header-secondary-fixed-z-index);
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;            
+        }
+
+        [data-kt-app-header-secondary-static="true"] & {
+            position: static;
+        }
+
+        [data-kt-app-header-secondary-sticky="on"] & {
+            transition: $app-header-secondary-base-transition;
+            position: fixed;
+            left: 0;
+            right: 0;
+            top: 0;
+            @include property( height, $app-header-secondary-sticky-height);
+            @include property( z-index, $app-header-secondary-sticky-z-index);
+
+            background-color: var(--#{$prefix}app-header-secondary-sticky-bg-color);
+            box-shadow: var(--#{$prefix}app-header-secondary-sticky-box-shadow);
+            border-bottom: var(--#{$prefix}app-header-secondary-sticky-border-bottom);
+        }
+
+        [data-kt-app-header-secondary-minimize="on"] & {
+            transition: $app-header-secondary-base-transition;
+            @include property( height, $app-header-secondary-minimize-height);
+            @include property( z-index, $app-header-secondary-minimize-z-index);
+
+            background-color: var(--#{$prefix}app-header-secondary-minimize-bg-color);
+            box-shadow: var(--#{$prefix}app-header-secondary-minimize-box-shadow);
+            border-bottom: var(--#{$prefix}app-header-secondary-minimize-border-bottom);
+        }
+
+        [data-kt-app-header-sticky="on"][data-kt-app-header-secondary-sticky-hide="true"] & {
+            display: none !important;
+        }
+    }
+
+    // Integration
+    .app-header-secondary {
+        // Sidebar
+        [data-kt-app-header-secondary-enabled="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] & {
+            left: calc(
+                var(--#{$prefix}app-sidebar-width) + 
+                var(--#{$prefix}app-sidebar-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-gap-end, 0px)
+            );
+        }  
+
+        // Sidebar Panel
+        [data-kt-app-header-secondary-enabled="true"][data-kt-app-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-header="true"] & {
+            left: calc(
+                var(--#{$prefix}app-sidebar-width) + 
+                var(--#{$prefix}app-sidebar-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-gap-end, 0px) +
+                var(--#{$prefix}app-sidebar-panel-width) + 
+                var(--#{$prefix}app-sidebar-panel-gap-start, 0px) + 
+                var(--#{$prefix}app-sidebar-panel-gap-end, 0px)
+            );
+        }
+    } 
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-header .app-header-secondary {
+        flex-grow: 1;
+        height: var(--#{$prefix}app-header-secondary-height);
+        box-shadow: var(--#{$prefix}app-header-secondary-base-box-shadow);
+        border-top: var(--#{$prefix}app-header-secondary-base-border-top);
+        border-bottom: var(--#{$prefix}app-header-secondary-base-border-bottom);
+        @include property( z-index, $app-header-secondary-base-z-index-mobile);
+    }
+
+    .app-header-secondary {     
+        background-color: var(--#{$prefix}app-header-secondary-base-bg-color);
+    }
+
+    // Vars
+    [data-kt-app-header-secondary-enabled="true"] {
+        --#{$prefix}app-header-secondary-height: #{$app-header-secondary-base-height-mobile};
+    }
+
+    [data-kt-app-header-secondary-enabled="true"][data-kt-app-header-sticky="on"] {
+        --#{$prefix}app-header-secondary-height: #{$app-header-secondary-sticky-height-mobile};
+    }
+    
+    [data-kt-app-header-secondary-enabled="true"][data-kt-app-header-minimize="on"] {
+        --#{$prefix}app-header-secondary-height: #{$app-header-secondary-minimize-height-mobile};
+    }
+}