@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/sass/layout/header/_header.scss

@@ -0,0 +1,170 @@
+//
+// Header
+//
+
+// General mode
+.app-header-menu {
+    .menu {
+        // General
+        .menu-item {
+            @include menu-link-default-state( 
+                $title-color: var(--#{$prefix}gray-700), 
+                $icon-color: var(--#{$prefix}gray-500), 
+                $bullet-color: var(--#{$prefix}gray-500), 
+                $arrow-color: var(--#{$prefix}gray-500),
+                $bg-color: null
+            );
+            
+            @include menu-link-hover-state( 
+                $title-color: var(--#{$prefix}primary), 
+                $icon-color: var(--#{$prefix}primary), 
+                $bullet-color: var(--#{$prefix}primary), 
+                $arrow-color: var(--#{$prefix}primary), 
+                $bg-color: null
+            );
+            
+            @include menu-link-show-state( 
+                $title-color: var(--#{$prefix}primary), 
+                $icon-color: var(--#{$prefix}primary), 
+                $bullet-color: var(--#{$prefix}primary), 
+                $arrow-color: var(--#{$prefix}primary), 
+                $bg-color: null
+            );
+
+            @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
+            );
+
+            @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)
+            );                
+        }
+
+        // Root
+        > .menu-item {
+            > .menu-link {
+                > .menu-title {
+                    font-weight: $font-weight-bold;
+                    font-size: 1.1rem;
+                }
+            }    
+        }
+    }
+
+    .menu-extended {
+        --#{$prefix}menu-link-bg-color-active: rgba(var(--#{$prefix}gray-100-rgb), 0.7);
+        --#{$prefix}menu-link-bg-color-hover: rgba(var(--#{$prefix}gray-100-rgb), 0.7);
+    
+        .menu-custom-icon {
+            background-color: var(--#{$prefix}gray-100);    
+        }
+
+        .menu-link {
+            &.active,
+            &:hover {
+                .menu-custom-icon {
+                    background-color: var(--#{$prefix}gray-200);    
+                }
+            }    
+        }
+    }
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    .app-header-menu {
+        .menu {
+            // Menu root item
+            > .menu-item {
+                margin-right: 0.5rem;
+
+                @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: var(--#{$prefix}gray-100)
+                );
+                
+                > .menu-link {
+                    padding-top: 0.675rem;
+                    padding-bottom: 0.675rem;    
+                    font-weight: $font-weight-semibold;                   
+                }
+            }
+        }
+    }    
+
+    [data-kt-app-layout="dark-sidebar"] {
+        .app-header-menu {
+            .menu {
+                // Menu root item
+                > .menu-item {
+                    &.active,
+                    &.here {
+                        > .menu-link {
+                            background-color: transparent;
+                            box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    [data-kt-app-toolbar-fixed="true"] {
+        .app-header {
+            background-color: var(--#{$prefix}app-header-minimize-bg-color);
+        }    
+    }
+
+    // Modal open fix
+    [data-kt-app-header-fixed="true"].modal-open {
+        .app-header {
+            padding-right: $body-scrollbar-width !important;    
+        }    
+    }
+}
+
+// Dark mode
+@include color-mode(dark) {
+    // Desktop mode
+	@include media-breakpoint-up(lg) {
+        [data-kt-app-layout="dark-sidebar"] {
+            .app-header-menu {
+                .menu {
+                    // Menu root item
+                    > .menu-item {
+                        &.active,
+                        &.here {
+                            > .menu-link {
+                                box-shadow: none;
+                                background-color: var(--#{$prefix}gray-100);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.app-header { 
+        background-color: var(--#{$prefix}app-header-minimize-bg-color);
+        border-bottom: 1px solid var(--#{$prefix}border-color) !important;
+
+		.page-title {
+            display: none !important;    
+        }
+	}    
+}

package/dist/assets/sass/layout/sidebar/_sidebar-dark.scss

@@ -0,0 +1,105 @@
+//
+// Dark Sidebar(used by Dark Sidebar layout only)
+//
+
+[data-kt-app-layout="dark-sidebar"] {
+    .app-sidebar {
+        background-color: $app-sidebar-dark-bg-color;
+        border-right: 0;
+
+        .scroll-y,
+        .hover-scroll-overlay-y {        
+            @include scrollbar-color(transparent, $app-sidebar-dark-scrollbar-color-hover);
+        }
+
+        .app-sidebar-logo {
+            border-bottom: 1px dashed $app-sidebar-dark-separator-color;
+        }
+
+        .btn-custom {
+            @include button-custom-variant(
+                $color:#B5B5C3, 
+                $icon-color: #B5B5C3, 
+                $border-color: null, 
+                $bg-color: rgba(63, 66, 84, 0.35), 
+                $color-active: #B5B5C3, 
+                $icon-color-active: null, 
+                $border-color-active: null, 
+                $bg-color-active: rgba(63, 66, 84, 0.35)
+            );
+        }
+
+        .menu {
+            .menu-item {                    
+                .menu-heading {
+                    color: $app-sidebar-dark-menu-heading-color !important;
+                }
+
+                @include menu-link-default-state( 
+                    $title-color: $gray-700-dark, 
+                    $icon-color:  $gray-400-dark, 
+                    $bullet-color:$gray-400-dark,  
+                    $arrow-color: $gray-400-dark,  
+                    $bg-color: null,
+                    $all-links: true 
+                );
+                
+                @include menu-link-here-state( 
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark, 
+                    $bg-color: null,
+                    $all-links: true
+                );
+                
+                @include menu-link-show-state( 
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark,
+                    $bg-color: null,
+                    $all-links: true
+                );
+                
+                @include menu-link-hover-state( 
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark,
+                    $bg-color: null,
+                    $all-links: true
+                );
+                
+                @include menu-link-active-state( 
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark,
+                    $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+                    $all-links: true
+                );
+            }
+        }
+    } 
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    [data-kt-app-layout="dark-sidebar"] {
+        .app-sidebar {
+            .menu-sub-lg-dropdown {
+                background-color: $app-sidebar-dark-bg-color;
+            }
+        }
+    }
+}
+
+// Dark mode
+@include color-mode(dark) {
+    [data-kt-app-layout="dark-sidebar"] {
+        .app-sidebar {
+            border-right: 1px solid $app-sidebar-dark-separator-color;
+        }
+    }
+}

package/dist/assets/sass/layout/sidebar/_sidebar-light.scss

@@ -0,0 +1,105 @@
+//
+// Light Sidebar(used by Light Sidebar layout only)
+//
+
+[data-kt-app-layout="light-sidebar"] {
+    .app-sidebar {
+        background-color: var(--#{$prefix}app-sidebar-light-bg-color);
+        border-right: 1px solid var(--#{$prefix}gray-200);
+
+        .scroll-y,
+        .hover-scroll-overlay-y {        
+            @include scrollbar-color(transparent, var(--#{$prefix}app-sidebar-light-scrollbar-color-hover));
+        }
+
+        .app-sidebar-logo {
+            border-bottom: 0;
+        }
+
+        .app-sidebar-toggle {
+            border-radius: 50%;    
+            box-shadow: none !important;
+        }
+
+        .menu {
+            font-weight: $font-weight-semibold;
+
+            .menu-item {                    
+                .menu-heading {
+                    color: var(--#{$prefix}app-sidebar-light-menu-heading-color) !important;
+                }
+
+                @include menu-link-default-state( 
+                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color), 
+                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
+                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
+                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+                    $bg-color: null  
+                );
+                
+                @include menu-link-hover-state( 
+                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color), 
+                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
+                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
+                    $bg-color: null
+                );
+                
+                @include menu-link-show-state( 
+                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color), 
+                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
+                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+                    $bg-color: null
+                );
+                
+                @include menu-link-here-state( 
+                    $title-color: var(--#{$prefix}app-sidebar-light-menu-link-color),  
+                    $icon-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color), 
+                    $bullet-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+                    $arrow-color: var(--#{$prefix}app-sidebar-light-menu-link-icon-color),
+                    $bg-color: null
+                );
+
+                @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}app-sidebar-light-menu-link-bg-color-active)
+                );
+
+                .menu-sub {
+                    .menu-item {
+                        .menu-link {
+                            .menu-title {
+                                color: #4B5675;
+                            }
+
+                            &.active {
+                                .menu-title {
+                                    color: var(--#{$prefix}primary);
+                                }  
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    } 
+}
+
+[data-kt-app-layout="light-sidebar"][data-kt-app-header-fixed="true"] {
+    [data-kt-app-header-minimize=on] .app-header {
+        transition: none;
+        z-index: 100;
+        background-color: var(--bs-app-header-minimize-bg-color);
+        box-shadow: var(--bs-app-header-minimize-box-shadow);
+    } 
+
+    .app-sidebar {
+        .app-sidebar-logo {
+            border-bottom: 1px dashed var(--bs-app-sidebar-light-separator-color);
+        }
+    }
+}

package/dist/assets/sass/layout/sidebar/_sidebar-minimize.scss

@@ -0,0 +1,64 @@
+//
+// Sidebar Minimize
+//
+
+.app-sidebar-logo-minimize {
+    display: none;
+}
+
+// Sidebar footer
+.app-sidebar-footer {
+    .btn-custom {
+        .btn-icon {
+            display: none;
+        }
+    }
+}
+    
+// Desktop sidebar minimize mode
+@include app-layout-minimize(app-sidebar) {
+    .app-sidebar-logo {
+        .app-sidebar-logo-default {
+            display: none;
+        }
+
+        .app-sidebar-logo-minimize {
+            display: inline-block;
+        }
+    }
+
+    .app-sidebar-wrapper {
+        width: var(--#{$prefix}app-sidebar-width-actual); 
+    }
+
+    .app-sidebar-menu {
+        .menu-content,
+        .menu-title {
+            opacity: 0;
+            @include app-layout-transition(opacity);
+        }
+
+        .menu-item.show > .menu-sub {
+            height: 0;
+            overflow: hidden;
+            @include app-layout-transition(height);
+        }
+    }
+
+    .app-sidebar-footer {
+        .btn-custom {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+
+            .btn-label {
+                width: 0;
+                display: none;
+            }	
+
+            .btn-icon {
+                width: auto;
+                display: block;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,53 @@
+//
+// Sidebar
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    .app-sidebar-toggle {
+        box-shadow: var(--#{$prefix}app-sidebar-base-toggle-btn-box-shadow) !important; 
+        background-color: var(--#{$prefix}app-sidebar-base-toggle-btn-bg-color) !important; 
+        border: 1px solid var(--#{$prefix}app-sidebar-base-border-color) !important;
+
+        .active i {
+            transform: rotateZ(0deg) !important;
+        }        
+    }
+
+    [dir="rtl"] {
+        .app-sidebar-toggle {
+            i {
+                transform: rotateZ(180deg);
+            }
+
+            &.active i {
+                transform: rotateZ(0deg) !important;
+            }
+        }
+    }
+        
+    .app-sidebar-logo {
+        height: var(--#{$prefix}app-header-height); 
+        display: flex;
+        align-items: center;
+        justify-content: space-between;        
+        position: relative;
+        flex-shrink: 0;
+    }
+        
+    .app-sidebar-menu {
+        .menu  {
+            // Root
+            > .menu-item {
+                margin-left: 0.115rem;  
+            }
+        }    
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    .app-sidebar-logo {
+        display: none;
+    }
+}

package/dist/assets/sass/style.react.scss

@@ -0,0 +1,28 @@
+// React vendors
+@import 'socicon/css/socicon.css';
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+@import 'line-awesome/dist/line-awesome/css/line-awesome.css';
+@import 'prism-themes/themes/prism-shades-of-purple.css';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
+@import 'animate.css/animate.css';
+@import 'nouislider/dist/nouislider.css';
+@import 'flatpickr/dist/flatpickr.css';
+
+//
+// Vendors customization
+//
+
+////////////////////////////////////////////////////////////////
+///////////// DO NOT MODIFY BELOW INCLUDE ORDER ////////////////
+////////////////////////////////////////////////////////////////
+
+// Initialize
+@import "init";
+
+// Plugins
+@import "./core/vendors/plugins/plugins";
+@import "vendors/react-select.scss";
+
+#root {
+  display: contents;
+}

package/dist/assets/sass/style.scss

@@ -0,0 +1,14 @@
+//
+// Theme style
+//
+
+// Initialize
+@import "init";
+
+// Components
+@import "./core/components/components";
+@import "components/components";
+
+// Layout
+@import "./core/layout/base/layout";
+@import "layout/layout";