Initial Commit

The initial public commit of MVGL website code.

resources/assets/demo1/js/custom/intro.js

@@ -0,0 +1,189 @@
+"use strict";
+
+// Class definition
+var KTIntro = function () {
+    // Private functions
+    var handleIntro = function(id, calback, timeout) {
+        var date = new Date();
+
+        var currentTime = date.getTime();
+
+        var time2days = 1000 * 60 * 60 * 24 * 2; // 2 days
+        var time7days = 1000 * 60 * 60 * 24 * 7; // 7 days
+        var time15days = 1000 * 60 * 60 * 24 * 15; // 15 days
+        var time21days = 1000 * 60 * 60 * 24 * 21; // 21 days
+        var time30days = 1000 * 60 * 60 * 24 * 30; // 30 days        
+
+        if (!KTCookie.get(id + '_counter') || parseInt(KTCookie.get(id + '_counter')) < 3) {
+            // Initial display
+            if (!KTCookie.get(id + '_counter')) {
+                setTimeout(calback, timeout); // Display intro in 5 seconds
+                
+                KTCookie.set(id + '_show_1', '1', {expires: new Date(date.getTime() + time2days)});
+
+                KTCookie.set(id + '_counter', '1', {expires: new Date(date.getTime() + time30days)});
+
+                return true;
+            } 
+
+            // 2 display
+            if (KTCookie.get(id + '_counter') == '1' && !KTCookie.get(id + '_show_1')) {
+                setTimeout(calback, timeout); // Display intro in 5 seconds
+                
+                KTCookie.set(id + '_show_2', '1', {expires: new Date(date.getTime() + time7days)});
+                
+                KTCookie.set(id + '_counter', '2', {expires: new Date(date.getTime() + time21days)});
+
+                return true;
+            }
+
+            // 3 display
+            if (KTCookie.get(id + '_counter') == '2' && !KTCookie.get(id + '_show_2')) {
+                setTimeout(calback, timeout); // Display intro in 5 seconds
+                
+                KTCookie.set(id + '_show_3', '1', {expires: new Date(date.getTime() + time15days)});
+                
+                KTCookie.set(id + '_counter', '3', {expires: new Date(date.getTime() + time15days)});
+
+                return true;
+            }
+
+            return false;
+        }
+    }
+
+    var showtIntro1 = function() {
+        var element = document.querySelector('#kt_header_search_toggle');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            customClass: 'popover-dark',
+            container: 'body',
+            trigger: 'manual',
+            boundary: 'window',
+            placement: 'left',
+            dismiss: true,
+            html: true,
+            title: 'Quick Search',
+            content: 'Fully functional search with advance options and preferences setup'
+        }
+
+        // Initialize popover
+        var popover = KTApp.initBootstrapPopover(element, options);
+        popover.show();
+
+        // Auto remove
+        setTimeout(function() {
+            if (popover) {
+                popover.dispose();
+            } 
+        }, 1000 * 10); // 10 seconds
+
+        // Hide popover on element click
+        element.addEventListener("click", function(e) {
+            popover.dispose();
+        });
+    }
+
+    var showtIntro2 = function() {
+        var element = document.querySelector('#kt_toolbar_primary_button');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            customClass: 'popover-dark',
+            container: 'body',
+            boundary: 'window',
+            trigger: 'manual',
+            placement: 'left',
+            dismiss: true,
+            html: true,
+            title: 'Quick Notifications',
+            content: 'Seamless access to updates and notifications in various formats'
+        }
+
+        // Initialize popover
+        var popover = KTApp.initBootstrapPopover(element, options);
+        popover.show();
+
+        // Remove
+        setTimeout(function() {
+            if (popover) {
+                popover.dispose();
+            } 
+        }, 1000 * 10); // 10 seconds
+
+        // Hide popover on element click
+        element.addEventListener("click", function(e) {
+            popover.dispose();
+        });
+    }
+
+    var showtIntro3 = function() {
+        var element = document.querySelector('#kt_header_user_menu_toggle');
+
+        if (!element) {
+            return;
+        }
+
+        var options = {
+            customClass: 'popover-dark',
+            container: 'body',
+            boundary: 'window',
+            placement: 'left',
+            trigger: 'manual',
+            dismiss: true,
+            html: true,
+            title: 'Advanced User Menu',
+            content: 'With quick links to user profile and account settings pages'
+        }
+
+        // Initialize popover
+        var popover = KTApp.initBootstrapPopover(element, options);
+        popover.show();
+
+        // Remove
+        setTimeout(function() {
+            if (popover) {
+                popover.dispose();
+            } 
+        }, 1000 * 10); // 10 seconds
+
+        // Hide popover on element click
+        element.addEventListener("click", function(e) {
+            popover.dispose();
+        });
+    }
+
+    var initIntro = function(product) {
+        // Handle intro popovers displays
+        if (KTUtil.inIframe() === false) {                
+            if (handleIntro('kt_' + product + '_intro_1', showtIntro1, 1000 * 5)) {
+            } else if (handleIntro('kt_' + product + '_intro_2', showtIntro2, 1000 * 5)) {
+            } else if (handleIntro('kt_' + product + '_intro_3', showtIntro3, 1000 * 5)) {
+            }
+        } 
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initIntro('metronic');
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTIntro;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTIntro.init();
+});

resources/assets/demo1/js/custom/landing.js

@@ -0,0 +1,29 @@
+"use strict";
+
+// Class definition
+var KTLandingPage = function () {
+    // Private methods
+    var initTyped = function() {
+        var typed = new Typed("#kt_landing_hero_text", {
+            strings: ["The Best Theme Ever", "The Most Trusted Theme", "#1 Selling Theme"],
+            typeSpeed: 50
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            //initTyped();
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTLandingPage;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTLandingPage.init();
+});

resources/assets/demo1/js/layout/aside.js

@@ -0,0 +1,42 @@
+"use strict";
+
+// Class definition
+var KTLayoutAside = function () {
+    // Private variables
+    var toggle;
+    var aside;
+
+    // Private functions
+    var handleToggle = function () {
+       var toggleObj = KTToggle.getInstance(toggle);
+
+       // Add a class to prevent aside hover effect after toggle click
+       toggleObj.on('kt.toggle.change', function() {
+           aside.classList.add('animating');
+
+           setTimeout(function() {
+                aside.classList.remove('animating');
+           }, 300);
+       })
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            aside = document.querySelector('#kt_aside');
+            toggle = document.querySelector('#kt_aside_toggle');
+
+            if (!aside || !toggle) {
+                return;
+            }
+
+            handleToggle();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTLayoutAside.init();
+});

resources/assets/demo1/js/layout/toolbar.js

@@ -0,0 +1,74 @@
+"use strict";
+
+// Class definition
+var KTLayoutToolbar = function () {
+    // Private variables
+    var toolbar;
+
+    // Private functions
+    var initForm = function () {
+        var rangeSlider = document.querySelector("#kt_toolbar_slider");
+        var rangeSliderValueElement = document.querySelector("#kt_toolbar_slider_value");
+
+        if (!rangeSlider) {
+            return;
+        }
+
+        noUiSlider.create(rangeSlider, {
+            start: [5],
+            connect: [true, false],
+            step: 1,
+            format: wNumb({
+                decimals: 1
+            }),
+            range: {
+                min: [1],
+                max: [10]
+            }
+        });
+
+        rangeSlider.noUiSlider.on("update", function (values, handle) {
+            rangeSliderValueElement.innerHTML = values[handle];
+        });
+
+        var handle = rangeSlider.querySelector(".noUi-handle");
+
+        handle.setAttribute("tabindex", 0);
+
+        handle.addEventListener("click", function () {
+            this.focus();
+        });
+
+        handle.addEventListener("keydown", function (event) {
+            var value = Number(rangeSlider.noUiSlider.get());
+
+            switch (event.which) {
+                case 37:
+                    rangeSlider.noUiSlider.set(value - 1);
+                    break;
+                case 39:
+                    rangeSlider.noUiSlider.set(value + 1);
+                    break;
+            }
+        });
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            // Elements
+            toolbar = document.querySelector('#kt_toolbar');
+
+            if (!toolbar) {
+                return;
+            }
+
+            initForm();
+        }
+    };
+}();
+
+// On document ready
+KTUtil.onDOMContentLoaded(function () {
+    KTLayoutToolbar.init();
+});

resources/assets/demo1/js/scripts.js

@@ -0,0 +1,17 @@
+const glob = require('glob');
+
+// Keenthemes' plugins
+var componentJs = glob.sync(`resources/assets/core/js/components/*.js`) || [];
+var coreLayoutJs = glob.sync(`resources/assets/core/js/layout/*.js`) || [];
+
+// Layout base js
+var layoutJs = glob.sync(`resources/assets/demo1/js/layout/*.js`) || [];
+
+module.exports = [
+    ...componentJs,
+    ...coreLayoutJs,
+    ...layoutJs,
+
+    // Extended
+    'resources/assets/extended/button-ajax.js'
+];

resources/assets/demo1/sass/_init.scss

@@ -0,0 +1,26 @@
+//
+// Main init file of global bootstrap and theme functions, mixins, variables and config
+//
+
+
+// Custom functions & mixins
+@import "../../core/sass/base/functions";
+@import "../../core/sass/base/mixins";
+@import "../../core/sass/components/mixins";
+@import "../../core/sass/vendors/plugins/mixins";
+
+// Custom variables
+@import "components/variables.custom";
+@import "../../core/sass/components/variables";
+
+// Bootstrap initializaton
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+// 3rd-Party plugins variables
+@import "../../core/sass/vendors/plugins/variables";
+
+// Custom layout variables
+@import "layout/variables";

resources/assets/demo1/sass/components/_item-hover-custom.scss

@@ -0,0 +1,29 @@
+//
+// Item Hover Custom
+//
+
+
+.item-border-hover {
+    border: 1px solid #fff;
+    border-radius: 6px;
+
+    &:hover {
+        border: 1px solid #EFF2F5;
+        cursor: pointer;
+        transition: $transition-link;
+        background-color: rgba(245, 248, 250, 0.3);
+
+        .label {
+            background-color: #00A3FF !important;
+            transition: $transition-link;
+            color: #fff;
+        }
+    }
+
+    .label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 6px;
+    }
+}

resources/assets/demo1/sass/components/_landing.scss

@@ -0,0 +1,136 @@
+//
+// Landing elements
+//
+
+// Variables
+$landing-dark-color: #13263C;
+$landing-header-height: 100px;
+$landing-header-height-tablet-and-mobile: 70px;
+$landing-header-sticky-height: 70px;
+$landing-header-sticky-height-tablet-and-mobile: 70px;
+
+// Utility classes
+.landing-dark-bg {
+    background-color: $landing-dark-color;
+}
+
+.landing-dark-color {
+    color: $landing-dark-color;
+}
+
+.landing-dark-border {
+    border:1px dashed #2C3F5B;
+}
+
+.landing-dark-separator {
+    border-top:1px dashed #2C3F5B;
+}
+
+.landing-curve  {
+    position: relative;
+
+    svg {
+        position: relative;
+        top: 0;  
+        display: block;
+    }
+}
+
+// Landing header
+.landing-header {
+    display: flex;
+    align-items: center;    
+    height: $landing-header-height;
+
+    // Logos
+    .logo-default {
+        display: block;
+    }
+
+    .logo-sticky {
+        display: none;
+    }
+
+    // Menu
+    .menu {
+        // Menu link
+        .menu-link {
+            &.active {
+                color: $white;
+            }
+        }
+
+        // Header menu sticky mode
+        [data-kt-sticky-landing-header="on"] & {
+            // Menu link
+            .menu-link {
+                &.active {
+                    color: $primary;
+                    background-color: rgba(#EFF2F5, 0.4);
+                }
+            }
+        }
+    }
+
+    // Sticky header modes
+    [data-kt-sticky-landing-header="on"] & {        
+        padding: 0;
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 100;
+        background-color: $white;
+        box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+        height: $landing-header-sticky-height;
+        
+        // Logos
+        .logo-sticky {
+            display: block;
+        }
+
+        .logo-default {
+            display: none;
+        }
+    }
+}
+
+// Fix body padding top when Landing sticky header is on
+body[data-kt-sticky-landing-header="on"] {
+    padding-top: $landing-header-height;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Landing header
+    .landing-header {
+        height: $landing-header-height-tablet-and-mobile;
+
+        // Menu wrapper
+        .landing-menu-wrapper {
+            position: relative;
+            overflow: auto;
+        }
+
+        // Sticky header modes
+        [data-kt-sticky-landing-header="on"] & { 
+            height: $landing-header-sticky-height-tablet-and-mobile;
+        }
+
+        // Menu
+        .menu {
+            // Menu link
+            .menu-link {
+                &.active {
+                    color: $primary;
+                    background-color: rgba(#EFF2F5, 0.4);
+                }
+            }
+        }
+    }
+
+    // Fix body padding top when Landing sticky header is on
+    body[data-kt-sticky-landing-header="on"] {
+        padding-top: $landing-header-height-tablet-and-mobile;
+    }
+}

resources/assets/demo1/sass/components/_nouislider-custom.scss

@@ -0,0 +1,16 @@
+// NoUiSlider success color option
+.noUi-target.noUi-target-success {
+    .noUi-connects {
+        background: $success-light;
+
+        .noUi-connect {
+            background: $success;
+        }
+    }
+
+    .noUi-handle {
+        border: 1px solid $success;
+        box-shadow: 0 3px 6px -3px rgba($success, 0.7);
+        background: $success;
+    }
+}

resources/assets/demo1/sass/components/_placeholder-custom.scss

@@ -0,0 +1,7 @@
+//
+// Custom Placeholder 
+//
+
+.placeholder-white-opacity-75 {
+    @include placeholder(rgba($white, 0.75));
+}

resources/assets/demo1/sass/components/_stepper-links.scss

@@ -0,0 +1,56 @@
+//
+// Stepper Links
+//
+
+// Base
+.stepper.stepper-links {
+    .stepper-nav {
+		display: flex;
+		margin: 0 auto;
+		justify-content: center;
+		align-items: center;	
+		flex-wrap: wrap;
+
+        .stepper-item {
+			position: relative;
+			flex-shrink: 0;
+			margin: 1rem 1.5rem;
+
+			&:after {
+				content: " ";
+				position: absolute;
+				top: 2.3rem;
+				left: 0;
+				height: 2px;
+				width: 100%;
+				background-color: transparent;
+				transition: $transition-link;
+			}           
+
+            .stepper-title {
+                color: $dark;
+                font-weight: 600;
+                font-size: 1.25rem; 
+            }             
+
+            // Current
+            &.current {
+				transition: $transition-link;
+				
+				.stepper-title {
+					color: $primary;					 
+				}               
+                
+				&:after {					
+					background-color: $primary;
+				}				                              
+			} 
+			
+			&.completed {
+				.stepper-title {
+					color: $gray-400;
+				}  			
+			}
+        }
+    }     
+}

resources/assets/demo1/sass/components/_timeline-label.scss

@@ -0,0 +1,68 @@
+//
+// Timeline Label
+//
+
+
+.timeline-label {
+	position: relative;
+
+    $label-width: 50px;
+
+	&:before {
+		content: '';
+		position: absolute;
+		left: $label-width + 1px;
+		width: 3px;
+		top: 0;
+		bottom: 0;
+		background-color: $gray-200;
+	}
+
+	// 
+	.timeline-item {
+		display: flex;
+        align-items: flex-start;
+		position: relative;
+		margin-bottom: 1.7rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+	}
+
+	.timeline-label {
+		width: $label-width;
+		flex-shrink: 0;
+		position: relative;
+		color: $gray-800;
+	}
+
+	.timeline-badge {
+		flex-shrink: 0;
+		background: $body-bg;
+		width: 1rem;
+		height: 1rem;
+		border-radius: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		z-index: 1;
+		position: relative;
+		margin-top: 1px;
+		margin-left: -0.5rem;
+		padding: 3px !important;
+		border: 6px solid $body-bg !important;
+
+		span {
+			display: block;
+			border-radius: 100%;
+			width: 6px;
+			height: 6px;
+			background-color: $gray-200;
+		}
+	}
+
+	.timeline-content {
+		flex-grow: 1;
+	}
+}

resources/assets/demo1/sass/components/_variables.custom.scss

@@ -0,0 +1,44 @@
+//
+// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
+// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
+// are not accessible in this file but you can override any global variable as shown below:
+//
+
+// Theme colors
+// Primary
+$primary:       									if(isDarkMode(), #3699FF, #009EF7);
+$primary-active:    								if(isDarkMode(), #187DE4, #0095E8);
+$primary-light:    								    if(isDarkMode(), #212E48, #F1FAFF);
+$primary-inverse:  									#FFFFFF;
+
+// Success
+$success:       									if(isDarkMode(), #0BB783, #50CD89);
+$success-active:    								if(isDarkMode(), #04AA77, #47BE7D);
+$success-light:    									if(isDarkMode(), #1C3238, #E8FFF3);
+$success-inverse:  									#FFFFFF;
+
+// Info
+$info:       									    if(isDarkMode(), #8950FC, #7239EA);
+$info-active:    									if(isDarkMode(), #7337EE, #5014D0);
+$info-light:    									if(isDarkMode(), #2F264F, #F8F5FF);
+$info-inverse:  									#FFFFFF;
+
+// Danger
+$danger:       									    if(isDarkMode(), #F64E60, #F1416C);
+$danger-active:    									if(isDarkMode(), #EE2D41, #D9214E);
+$danger-light:    									if(isDarkMode(), #3A2434, #FFF5F8);
+$danger-inverse:  									#FFFFFF;
+
+// Warning
+$warning:       									if(isDarkMode(), #FFA800, #FFC700);
+$warning-active:    								if(isDarkMode(), #EE9D01, #F1BC00);
+$warning-light:    									if(isDarkMode(), #392F28, #FFF8DD);
+$warning-inverse:  									#FFFFFF;
+
+.joypixels {
+    max-width: 20px;
+}
+
+#user-bio > p:last-child {
+    margin-bottom: 0;
+}

resources/assets/demo1/sass/components/components.scss

@@ -0,0 +1,6 @@
+//
+// Components
+//
+
+// Import Dependencies
+@import "landing";

resources/assets/demo1/sass/layout/_content.scss

@@ -0,0 +1,27 @@
+//
+// Content
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.content {
+		padding: get($content-spacing, desktop) 0;
+
+		// Toolbar enabled and toolbar not fixed mode
+		.toolbar-enabled:not(.toolbar-fixed) & {
+			padding-top: 0;
+		}
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.content {
+		padding: get($content-spacing, tablet-and-mobile) 0;
+
+		// Toolbar enabled mode and toolbar not fixed mode
+		.toolbar-enabled:not(.toolbar-tablet-and-mobile-fixed) & {
+			padding-top: 0;
+		}
+	}
+}

resources/assets/demo1/sass/layout/_footer.scss

@@ -0,0 +1,7 @@
+//
+// Footer
+// 
+
+.footer {
+    background-color: get($footer-config, bg-color);
+}

resources/assets/demo1/sass/layout/_header.scss

@@ -0,0 +1,95 @@
+//
+// Header
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		position: relative;
+		z-index: 2;
+		height: get($header-config, default, height, desktop);
+		transition: left get($aside-config, transition-speed) ease;
+
+		// Fixed header & sticky header modes
+		.header-fixed & {
+			position: fixed;
+			top: 0;
+			right: 0;
+			left: 0;
+			z-index: get($header-config, fixed, z-index);
+			background-color: get($header-config, fixed, bg-color);
+			height: get($header-config, fixed, height, desktop);
+			padding: 0;
+			box-shadow: get($header-config, fixed, box-shadow);
+		}
+
+		// Fixed header and fixed toolbar modes
+		.header-fixed.toolbar-fixed & {
+			box-shadow: none;
+		}
+
+		// Aside default enabled, aside fixed & header sticky modes
+		.aside-enabled.aside-fixed.header-fixed & {
+			left: get($aside-config, width);
+			transition: left get($aside-config, transition-speed) ease;
+		}
+
+		// Aside default enabled, aside fixed, header sticky & aside minimize modes
+		.aside-enabled.aside-fixed.header-fixed[data-kt-aside-minimize="on"] & {
+			left: get($aside-config, minimized-width);
+			transition: left get($aside-config, transition-speed) ease;
+		}
+
+		// Header menu
+		.header-menu {
+			display: flex;
+		}
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: get($header-config, default, height, tablet-and-mobile);
+		position: relative;
+		z-index: 3;
+
+		// Fixed header and header sticky modes
+		.header-tablet-and-mobile-fixed & {
+			position: fixed;
+			top: 0;
+			right: 0;
+			left: 0;
+			z-index: get($header-config, fixed, z-index);
+			height: get($header-config, fixed, height, tablet-and-mobile);
+			min-height: get($header-config, fixed, height, tablet-and-mobile);
+			background-color: get($header-config, fixed, bg-color);
+
+			@if isDefaultSkin() {         
+				box-shadow: get($header-config, fixed, box-shadow);
+            }
+		}
+
+		// Fixed header and fixed toolbar modes
+		.header-tablet-and-mobile-fixed.toolbar-tablet-and-mobile-fixed & {
+			box-shadow: none;
+		}
+
+		// Header menu
+		.header-menu {
+			display: none;
+			z-index: get($header-config, fixed, z-index) - 1;
+		}
+
+		// Page title
+		.page-title {
+			display: none !important;
+		}
+	}
+}

resources/assets/demo1/sass/layout/_layout.scss

@@ -0,0 +1,14 @@
+//
+// Layout Initialization
+//
+
+// Import Dependencies
+@import "../../../core/sass/layout/base";
+@import "print";
+@import "main";
+@import "header";
+@import "toolbar";
+@import "aside/base";
+@import "aside/menu";
+@import "content";
+@import "footer";

resources/assets/demo1/sass/layout/_main.scss

@@ -0,0 +1,75 @@
+//
+// Main
+//
+
+
+// Body
+body {
+	background-color: $page-bg;
+}
+
+// Font color from Content background color
+.text-page-bg {
+	color: $page-bg;
+}
+
+// Desktop Mode
+@include media-breakpoint-up(lg) {
+	// Containers
+	.container,
+	.container-xxl,
+	.container-fluid {
+		padding: 0 get($content-spacing, desktop);
+	}
+
+	// Wrapper
+	.wrapper {
+		transition: padding-left get($aside-config, transition-speed) ease,  margin-right get($aside-config, transition-speed) ease;
+
+		// Aside default enabled and aside fixed modes
+		.aside-enabled.aside-fixed & {
+			transition: padding-left get($aside-config, transition-speed) ease;
+			padding-left: get($aside-config, width);
+		}
+
+		// Aside default enabled, aside fixed and aside minimize modes
+		.aside-enabled.aside-fixed[data-kt-aside-minimize="on"] & {
+			transition: padding-left get($aside-config, transition-speed) ease;
+			padding-left: get($aside-config, minimized-width);
+		}
+
+		// Fixed header mode
+		.header-fixed & {
+			padding-top: get($header-config, fixed, height, desktop);
+		}
+
+		// Fixed header & fixed toolbar modes
+		.header-fixed.toolbar-fixed & {
+			padding-top: calc(#{get($header-config, fixed, height, desktop)} + var(--kt-toolbar-height));
+		}
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	// Containers
+	.container,
+	.container-xxl,
+	.container-fluid {
+		max-width: none;
+		padding: 0 get($content-spacing, tablet-and-mobile);
+	}
+
+	// Wrapper
+	.wrapper {
+		// Fixed header mode
+		.header-tablet-and-mobile-fixed & {
+			padding-top: get($header-config, fixed, height, tablet-and-mobile);
+		}
+
+		// Fixed header & fixed toolbar modes
+		.header-tablet-and-mobile-fixed.toolbar-tablet-and-mobile-fixed & {
+			padding-top: calc(#{get($header-config, fixed, height, tablet-and-mobile)} + var(--kt-toolbar-height-tablet-and-mobile));
+		}
+	}
+}

resources/assets/demo1/sass/layout/_print.scss

@@ -0,0 +1,34 @@
+//
+// Print Mode
+//
+
+// Add .print-content-only class to body element in order to allow printing only the content area
+@media print {
+    .print-content-only {
+        padding: 0 !important;
+        background: none !important;
+
+        .wrapper,
+        .page,
+        .page-title
+        .content,
+        .container,
+        .container-xxl,
+        .container-fluid {
+            background: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+
+        .aside,
+        .sidebar,
+        .scrolltop,
+        .header,
+        .footer,
+        .toolbar,
+        .drawer,
+        .btn {
+            display: none !important;
+        }
+    }
+}

resources/assets/demo1/sass/layout/_toolbar.scss

@@ -0,0 +1,84 @@
+//
+// toolbar
+//
+
+// General mode
+.toolbar {
+    display: flex;
+    align-items: center;
+    background-color: get($toolbar-config, bg-color);
+    padding: get($toolbar-config, padding);
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    .toolbar {
+        // Fixed toolbar
+        .toolbar-fixed & {
+			height: var(--kt-toolbar-height);
+      	    position: fixed;
+			top: 0;
+			right: 0;
+			left: 0;
+			z-index: get($toolbar-config, z-index);			
+            box-shadow: get($toolbar-config, box-shadow);
+        }
+
+		// toolbar enabled & toolbar not fixed modes
+		.toolbar-enabled:not(.toolbar-fixed) & {
+			margin-bottom: get($content-spacing, desktop);
+		}
+
+        // Fixed header & fixed toolbar modes
+        .header-fixed.toolbar-fixed & {
+            padding: 0;
+            top: get($header-config, fixed, height, desktop);
+            border-top: get($toolbar-config, border-top);
+        }
+
+        // Aside default enabled, aside fixed & header sticky modes
+		.aside-enabled.aside-fixed.toolbar-fixed & {
+			left: get($aside-config, width);
+			transition: left get($aside-config, transition-speed) ease;
+		}
+
+		// Aside default enabled, aside header sticky & aside minimize modes
+		.aside-enabled.aside-fixed.toolbar-fixed[data-kt-aside-minimize="on"] & {
+			left: get($aside-config, minimized-width);
+			transition: left get($aside-config, transition-speed) ease;
+		}
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    .toolbar {
+        // Fixed toolbar mode
+        .toolbar-tablet-and-mobile-fixed & {
+			height: var(--kt-toolbar-height-tablet-and-mobile);
+            position: fixed;
+            top: 0;
+            right: 0;
+            left: 0;
+            z-index: get($toolbar-config, z-index);
+            box-shadow: get($toolbar-config, box-shadow);
+        }
+
+        // Toolbar enabled & toolbar not fixed modes
+		.toolbar-enabled:not(.toolbar-tablet-and-mobile-fixed) & {
+			margin-bottom: get($content-spacing, tablet-and-mobile);
+		}
+
+        // Fixed header & fixed toolbar modes
+        .header-tablet-and-mobile-fixed.toolbar-tablet-and-mobile-fixed & {
+            padding: 0;
+			top: get($header-config, default, height, tablet-and-mobile);
+            border-top: get($toolbar-config, border-top);
+        }
+
+        // Page title
+		.page-title[data-kt-swapper="true"] {
+			display: none !important;
+		}
+    }
+}

resources/assets/demo1/sass/layout/_variables.scss

@@ -0,0 +1,77 @@
+//
+// Layout Config
+//
+
+// Root font Sizes
+$root-font-size:                                    13px; // Root font size for desktop mode
+$root-font-size-lg:                             	13px; // Root font size for tablet mode
+$root-font-size-md:                             	12px; // Root font size for mobile mode
+
+// Page bg
+$page-bg: 											if(isDarkMode(), #151521, $gray-100) !default;
+
+// Content border radius
+$content-border-radius:								1.5rem !default;
+
+// Content Spacing
+$content-spacing: (
+	desktop: 30px, // Padding for desktop mode
+	tablet-and-mobile: 15px // Padding for tablet and mobile modes
+) !default;
+
+// Header
+$header-config: (
+	// Default Mode
+	default: (
+		height: (
+			desktop: 65px,
+			tablet-and-mobile: 55px
+		),
+		bg-color: if(isDarkMode(),#1E1E2D, $white),
+	),
+
+	// Fixed Mode
+	fixed: (
+		height: (
+			desktop: 65px,
+			tablet-and-mobile: 55px
+		),
+		z-index: 100,
+		bg-color: if(isDarkMode(), #1E1E2D, $white),
+		box-shadow: if(isDarkMode(), none, 0px 10px 30px 0px rgba(82,63,105,0.05))
+	)
+) !default;
+
+// Toolbar
+$toolbar-config: (
+	z-index: 99,
+	height: (
+		desktop: 75px,
+		tablet-and-mobile: 60px
+	),
+	padding: 0.5rem 0,
+	bg-color: if(isDarkMode(), darken(#1e1e2d, 2%), $white),
+	box-shadow: if(isDarkMode(), none, 0px 10px 30px 0px rgba(82,63,105,0.05)),
+	border-top: if(isDarkMode(), 0, 1px solid $border-color)
+) !default;
+
+// Aside
+$aside-config: (
+	z-index: 101, // Aside's z-index property
+	transition-speed: 0.3s, // transition speed
+	padding-x: 25px,
+	menu-indention: 0.75rem,
+	bg-color: #1e1e2d,
+	logo-bg-color: darken(#1e1e2d, 2%),
+	scrollbar-color: if(isDarkMode(), $gray-200, #3b3b64),
+	scrollbar-hover-color: if(isDarkMode(), $gray-300, lighten(#3b3b64, 3%)),
+	width: 265px, // Aside width for desktop mode
+	minimized-width: 75px,  // Aside minimized width for desktop mode
+	box-shadow: if(isDarkMode(), none, 0 0 28px 0 rgba(82,63,105,.05)), // Aside box shadow
+	minimized-hover-box-shadow: if(isDarkMode(), none, 5px 0px 10px rgba(70, 78, 95, 0.075)) // Monimized hover box shadow
+) !default;
+
+// Footer
+$footer-config: (	
+	bg-color: if(isDarkMode(), #1B1B28, $white),
+) !default;

resources/assets/demo1/sass/layout/aside/_base.scss

@@ -0,0 +1,201 @@
+//
+// Aside Default
+//
+
+// General mode(all devices)
+.aside {
+	display: flex;
+	flex-direction: column;
+	box-shadow: get($aside-config, box-shadow);
+	padding: 0;
+
+	// Custom button
+	.btn-custom {
+		display: flex;
+		align-items: center;
+		justify-content: center;		
+		padding-left: 0;
+		padding-right: 0;
+
+		.btn-label {
+			transition: opacity get($aside-config, transition-speed) ease;
+			display: inline-block;
+			white-space: nowrap;
+			overflow: hidden;		
+			opacity: 1;	
+		}	
+
+		.btn-icon {
+			display: inline-block;
+			transition: opacity get($aside-config, transition-speed) ease;
+			overflow: hidden;		
+			opacity: 0;	
+			margin: 0;
+			width: 0;
+		}
+	}
+
+	// Dark theme
+	&.aside-dark {
+		background-color: get($aside-config, bg-color);
+
+		// Logo
+		.aside-logo {
+			background-color: get($aside-config, logo-bg-color);
+		}
+
+		// Aside toggle
+		.aside-toggle {
+			color: #494b74;
+		}
+
+		// Separator
+		.separator {
+			border-bottom-color: #282a3d;
+		}
+
+		// Custom button
+		.btn-custom {
+			//$color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active
+			@include button-custom-variant(#B5B5C3, null, null, rgba(63, 66, 84, 0.35), #B5B5C3, null, null, rgba(63, 66, 84, 0.35));
+
+			.btn-icon {				
+				&,
+				i,
+				.svg-icon {
+					color: #B5B5C3;
+				}
+			}
+		}
+	}
+
+	// Light theme
+	&.aside-light {
+		background-color: $white;
+	}
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.aside {
+		width: get($aside-config, width);
+		transition: width get($aside-config, transition-speed) ease;
+
+		// Logo
+		.aside-logo {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: get($header-config, default, height, desktop);
+			padding: 0 get($aside-config, padding-x);
+		}
+
+		// Aside menu
+		.aside-menu {
+			width: get($aside-config, width); 
+		}
+		
+		// Fixed aside mode
+		.aside-fixed & {
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			z-index: get($aside-config, z-index);
+			overflow: hidden;
+		}
+
+		// Static aside mode
+		.aside-static & {
+			position: relative;
+			z-index: 1;
+		}
+
+		// Minimize aside mode
+		[data-kt-aside-minimize="on"] & {
+			width: get($aside-config, minimized-width);
+			transition: width get($aside-config, transition-speed) ease;
+
+			// Logo
+			.aside-logo {
+				.logo-default {
+					display: inline-block;
+				}
+	
+				.logo-minimize {
+					display: none;
+				}
+			}
+
+			// Hoverable
+			&.aside-hoverable:hover:not(.animating) {
+				transition: width get($aside-config, transition-speed) ease;
+				width: get($aside-config, width);
+				box-shadow: get($aside-config, minimized-hover-box-shadow);
+			}
+
+			// Not hovered mode
+			&:not(.aside-hoverable),
+			&:not(:hover) {
+				// Logo
+				.aside-logo {
+					justify-content: center;
+
+					.logo {
+						display: none;
+					}
+
+					.logo-default {
+						display: none;
+					}
+		
+					.logo-minimize {
+						display: inline-block;
+					}
+				}				
+
+				// Menu
+				.aside-menu {
+					.menu-content,
+					.menu-title {
+						opacity: 0;
+						transition: opacity get($aside-config, transition-speed) ease;
+					}
+
+					.menu-item.show > .menu-sub {
+						height: 0;
+						overflow: hidden;
+						transition: height get($aside-config, transition-speed) ease;
+					}
+				}
+
+				// Custom button
+				.btn-custom {
+					.btn-label {
+						width: 0;
+						opacity: 0;
+						transition: opacity get($aside-config, transition-speed) ease;
+					}	
+
+					.btn-icon {
+						width: auto;
+						opacity: 1;
+						transition: opacity get($aside-config, transition-speed) ease;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.aside {
+		display: none;
+
+		// Logo
+		.aside-logo {
+			display: none;
+		}
+	}
+}

resources/assets/demo1/sass/layout/aside/_menu.scss

@@ -0,0 +1,63 @@
+//
+// Menu
+//
+
+// Aside menu
+.aside-menu {
+    .menu {
+        // Link padding x
+        @include menu-link-padding-x(get($aside-config, padding-x));
+
+        // Menu indention
+        @include menu-link-indention(get($aside-config, menu-indention), get($aside-config, padding-x));
+    }
+
+    // Item
+    .menu-item {
+        padding: 0;
+
+        // Menu Link
+        .menu-link {
+            padding-top: 0.75rem;
+            padding-bottom: 0.75rem;
+        }
+
+        // Icon
+        .menu-icon {
+            justify-content: flex-start;
+        }
+    }
+}
+
+// Aside dark theme
+.aside-dark {
+    .hover-scroll-overlay-y {
+        --scrollbar-space: 0.4rem;
+        
+        @include scrollbar-color(get($aside-config, scrollbar-color), get($aside-config, scrollbar-hover-color));
+    }
+
+    .menu {
+        .menu-item {
+            .menu-section {
+                color: #4c4e6f !important;
+            }
+
+            //$title-color, $icon-color, $bullet-color, $arrow-color, $bg-color
+            @include menu-link-default-state( #9899ac, #494b74, #9899ac, #9899ac, null);
+            @include menu-link-hover-state( $white, $primary, $primary, $white, #1b1b28);
+            @include menu-link-here-state( $white, $primary, $primary, $white, #1b1b28);
+            @include menu-link-show-state( $white, $primary, $primary, $white, #1b1b28);
+            @include menu-link-active-state( $white, $primary, $primary, $white, #1b1b28);
+        }
+    }
+}
+
+// Aside light theme
+.aside-light {
+    .menu {
+        .menu-title {
+            font-weight: 500;
+        }
+    }
+}

resources/assets/demo1/sass/plugins.dark.scss

@@ -0,0 +1,16 @@
+//
+// Vendors customization
+//
+
+////////////////////////////////////////////////////////////////
+///////////// DO NOT MODIFY BELOW INCLUDE ORDER ////////////////
+////////////////////////////////////////////////////////////////
+
+// Mode
+$mode: dark;
+
+// Initialize
+@import "init";
+
+// Plugins
+@import "../../core/sass/vendors/plugins/plugins";

resources/assets/demo1/sass/plugins.scss

@@ -0,0 +1,16 @@
+//
+// Vendors customization
+//
+
+////////////////////////////////////////////////////////////////
+///////////// DO NOT MODIFY BELOW INCLUDE ORDER ////////////////
+////////////////////////////////////////////////////////////////
+
+// Mode
+$mode: default;
+
+// Initialize
+@import "init";
+
+// Plugins
+@import "../../core/sass/vendors/plugins/plugins";

resources/assets/demo1/sass/style.dark.scss

@@ -0,0 +1,16 @@
+//
+// Theme style
+//
+
+// Mode
+$mode: dark;
+
+// Initialize
+@import "init";
+
+// Components
+@import "../../core/sass/components/components";
+@import "components/components";
+
+// Layout
+@import "layout/layout";

resources/assets/demo1/sass/style.scss

@@ -0,0 +1,16 @@
+//
+// Theme style
+//
+
+// Mode
+$mode: default;
+
+// Initialize
+@import "init";
+
+// Components
+@import "../../core/sass/components/components";
+@import "components/components";
+
+// Layout
+@import "layout/layout";