@soyfri/template 1.0.1 → 1.0.3

package/dist/assets/sass/core/components/stepper/_pills.scss

@@ -0,0 +1,201 @@
+//
+// Stepper Pills
+//
+
+// Base
+.stepper.stepper-pills {
+    --#{$prefix}stepper-pills-size: 40px;
+    --#{$prefix}stepper-icon-border-radius: 9px;
+    --#{$prefix}stepper-icon-check-size: 1rem;
+
+    --#{$prefix}stepper-icon-bg-color: var(--#{$prefix}primary-light);    
+    --#{$prefix}stepper-icon-bg-color-current: var(--#{$prefix}primary);
+    --#{$prefix}stepper-icon-bg-color-completed: var(--#{$prefix}primary-light);
+
+    --#{$prefix}stepper-icon-border: 0;
+    --#{$prefix}stepper-icon-border-current: 0;
+    --#{$prefix}stepper-icon-border-completed: 0;
+
+    --#{$prefix}stepper-icon-number-color: var(--#{$prefix}primary);
+    --#{$prefix}stepper-icon-number-color-current: var(--#{$prefix}white);
+
+    --#{$prefix}stepper-icon-check-color-completed: var(--#{$prefix}primary);
+
+    --#{$prefix}stepper-label-title-opacity: 1;
+    --#{$prefix}stepper-label-title-opacity-current: 1;
+    --#{$prefix}stepper-label-title-opacity-completed: 1;
+
+    --#{$prefix}stepper-label-title-color: var(--#{$prefix}gray-800);
+    --#{$prefix}stepper-label-title-color-current: var(--#{$prefix}gray-600);
+    --#{$prefix}stepper-label-title-color-completed: var(--#{$prefix}text-muted);
+
+    --#{$prefix}stepper-label-desc-opacity: 1;
+    --#{$prefix}stepper-label-desc-opacity-current: 1;
+    --#{$prefix}stepper-label-desc-opacity-completed: 1;
+    
+    --#{$prefix}stepper-label-desc-color: var(--#{$prefix}text-muted);     
+    --#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}gray-500);
+    --#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}gray-500);
+
+    --#{$prefix}stepper-line-border: 1px dashed var(--#{$prefix}gray-300);
+
+    // Nav
+    .stepper-nav {
+        display: flex;
+    }
+
+    // Item
+    .stepper-item {
+        display: flex;
+        align-items: center;
+        transition: $transition-link;            
+
+        // Icon
+        .stepper-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: $transition-link;
+            width: var(--#{$prefix}stepper-pills-size);
+            height: var(--#{$prefix}stepper-pills-size);
+            border-radius: var(--#{$prefix}stepper-icon-border-radius);
+            background-color: var(--#{$prefix}stepper-icon-bg-color);
+            border: var(--#{$prefix}stepper-icon-border);
+            margin-right: 1.5rem;
+
+            .stepper-check {
+                display: none;
+                font-size: var(--#{$prefix}stepper-icon-check-size);
+            }
+
+            .stepper-number {
+                font-weight: $font-weight-bold;
+                color: var(--#{$prefix}stepper-icon-number-color);
+                font-size: 1.25rem;
+            }
+        }
+
+        // Label
+        .stepper-label {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .stepper-title {
+                color: var(--#{$prefix}stepper-label-title-color);
+                opacity: var(--#{$prefix}stepper-label-title-opacity);
+                font-weight: 600;
+                font-size: 1.25rem;
+                margin-bottom: .3rem;
+            }
+
+            .stepper-desc {
+                opacity: var(--#{$prefix}stepper-label-desc-opacity);
+                color: var(--#{$prefix}stepper-label-desc-color);
+            }
+        }
+
+        // Current
+        &.current {
+            transition: $transition-link;
+
+            .stepper-icon {
+                transition: $transition-link;
+                background-color: var(--#{$prefix}stepper-icon-bg-color-current);
+                border: var(--#{$prefix}stepper-icon-border-current);
+
+                .stepper-check {
+                    display: none;
+                }
+
+                .stepper-number {
+                    color: var(--#{$prefix}stepper-icon-number-color-current);
+                    font-size: 1.35rem;
+                }
+            }
+
+            .stepper-label {
+                .stepper-title {
+                    opacity: var(--#{$prefix}stepper-label-title-opacity-current);
+                    color: var(--#{$prefix}stepper-label-title-color-current);
+                }
+
+                .stepper-desc {
+                    opacity: var(--#{$prefix}stepper-label-desc-opacity-current);
+                    color: var(--#{$prefix}stepper-label-desc-color-current);
+                }
+            }
+        }
+
+        // Completed
+        &.current.mark-completed:last-child,
+        &.completed {
+            .stepper-icon {
+                transition: $transition-link;
+                background-color: var(--#{$prefix}stepper-icon-bg-color-completed);
+                border: var(--#{$prefix}stepper-icon-border-completed);
+
+                .stepper-check {
+                    color: var(--#{$prefix}stepper-icon-check-color-completed);
+                    display: inline-block;
+                }
+
+                .stepper-number {
+                    display: none;
+                }
+            }
+
+            .stepper-label {
+                .stepper-title {
+                    opacity: var(--#{$prefix}stepper-label-title-opacity-completed);
+                    color: var(--#{$prefix}stepper-label-title-color-completed);
+                }
+
+                .stepper-desc {
+                    opacity: var(--#{$prefix}stepper-label-desc-opacity-completed);
+                    color: var(--#{$prefix}stepper-label-desc-color-completed);
+                }
+            }
+        }
+    }
+
+    // Column
+    &.stepper-column {
+        // Nav
+        .stepper-nav {
+            flex-direction: column;
+            align-items: start;
+        }
+
+        // Item
+        .stepper-item {
+            flex-direction: column;
+            justify-content: start;
+            align-items: stretch;
+            padding: 0;
+		    margin: 0;
+        }
+
+        // Wrapper 
+        .stepper-wrapper {
+            display: flex;
+            align-items: center;
+        }
+
+        // Icon
+        .stepper-icon {
+            z-index: 1;
+        }
+
+        // Line
+        .stepper-line {
+            display: block;
+            flex-grow: 1;
+            margin-left: calc(var(--#{$prefix}stepper-pills-size) / 2);
+            border-left: var(--#{$prefix}stepper-line-border);
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+    }    
+}

package/dist/assets/sass/core/components/wizard/wizard.scss

@@ -0,0 +1,47 @@
+.close-button {
+  transition: all 0.5s ease;
+  position: absolute;
+  background-color: #ffffff;
+  padding: 1.5px 7px;
+  right: 0;
+  margin-right: -10px;
+  margin-top: -40px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  color: $primary-dark;
+  font-weight: 400;
+  -webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
+}
+
+.btn-img-close {
+  transition: all 0.5s ease;
+  background-color: #ffffff;
+  padding: 1.5px 7px;
+  border-radius: 50%;
+  border: 2px solid #ffffff;
+  color: $primary-dark;
+  font-weight: 400;
+  -webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
+  box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
+}
+
+.stepper {
+  .horizontal-table-label {
+    position: relative;
+  }
+
+  .error-button {
+    position: absolute;
+    padding: 8.5px 11px;
+    right: 0;
+    margin-right: -62px;
+    height: 43px;
+    width: 43px;
+    background-color: #F1F8FF;
+    border-radius: 50%;
+    border: 2px solid #F1F8FF;
+  }
+}

package/dist/assets/sass/core/components/wizard.scss

@@ -0,0 +1,6 @@
+//
+// Wizard
+//
+
+// Import Dependencies
+@import "wizard/wizard";

package/dist/assets/sass/core/layout/_base.scss

@@ -0,0 +1,50 @@
+//
+// Root
+//
+
+html {
+  font-family: sans-serif;
+  text-size-adjust: 100%;
+}
+
+html,
+body {
+    height: 100%;
+    margin: 0px;
+    padding: 0px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: $root-font-size !important;
+    font-weight: $font-weight-base;
+    font-family: $font-family-sans-serif;
+
+    // Tablet mode
+    @include media-breakpoint-down(lg) {
+        font-size: $root-font-size-lg !important;
+    }
+
+    // Mobile mode
+    @include media-breakpoint-down(md) {
+        font-size: $root-font-size-md !important;
+    }    
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+
+    a:hover,
+    a:active,
+    a:focus {
+        text-decoration: none !important;
+    }
+}
+
+canvas {
+    user-select: none;
+}
+
+// Angular integration
+router-outlet {
+    display: none;
+}

package/dist/assets/sass/core/layout/base/_container.scss

@@ -0,0 +1,30 @@
+//
+// Container
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.app-container {
+		padding-left: $app-container-padding-x !important;
+        padding-right: $app-container-padding-x !important;
+	}
+
+	.app-container-fit-desktop {
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.app-container { 
+		max-width: none;
+		padding-left: $app-container-padding-x-mobile !important;
+        padding-right: $app-container-padding-x-mobile !important;
+	}
+
+	.app-container-fit-mobile {
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+	}
+}

package/dist/assets/sass/core/layout/base/_content.scss

@@ -0,0 +1,24 @@
+//
+// Content
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.app-content {
+		padding-top: $app-content-padding-y;
+        padding-bottom: $app-content-padding-y;
+        padding-left: $app-content-padding-x;
+        padding-right: $app-content-padding-x;
+	}
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.app-content { 
+		max-width: none;
+		padding-top: $app-content-padding-y-mobile;
+        padding-bottom: $app-content-padding-y-mobile;
+        padding-left: $app-content-padding-x-mobile;
+        padding-right: $app-content-padding-x-mobile;
+	}
+}

package/dist/assets/sass/core/layout/base/_footer.scss

@@ -0,0 +1,99 @@
+//
+// Footer
+//
+
+// General mode
+.app-footer {
+    transition: $app-footer-transition;
+    display: flex;
+    align-items: center;
+    background-color: var(--#{$prefix}app-footer-bg-color);         
+    border-top: var(--#{$prefix}app-footer-border-top); 
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-footer {
+        @include property( z-index, $app-footer-z-index);
+    }    
+
+    // Vars
+    :root {
+        --#{$prefix}app-footer-height: #{$app-footer-height};
+    }
+
+    // States
+    .app-footer {
+        height: var(--#{$prefix}app-footer-height);
+
+        [data-kt-app-footer-fixed="true"] & {        
+            @include property( z-index, $app-footer-fixed-z-index);   
+            box-shadow: var(--#{$prefix}app-footer-box-shadow); 
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+    }
+
+    // Integration
+    .app-footer {
+        // Sidebar
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-footer="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-sidebar-panel-fixed="true"][data-kt-app-sidebar-panel-push-footer="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)
+            );
+        }
+
+        // Aside
+        [data-kt-app-aside-fixed="true"][data-kt-app-aside-push-footer="true"] & {
+            right: calc(
+                var(--#{$prefix}app-aside-width) + 
+                var(--#{$prefix}app-aside-gap-start, 0px) + 
+                var(--#{$prefix}app-aside-gap-end, 0px)
+            );
+        }
+    } 
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-footer {
+        @include property( z-index, $app-footer-z-index-mobile);
+    }
+
+    // Vars
+    body {
+        --#{$prefix}app-footer-height: #{$app-footer-height-mobile};
+    }
+
+    // States
+    .app-footer {
+        height: var(--#{$prefix}app-footer-height);
+
+        [data-kt-app-footer-fixed-mobile="true"] & {
+            @include property( z-index, $app-footer-fixed-z-index-mobile);
+            box-shadow: var(--#{$prefix}app-footer-box-shadow); 
+            position: fixed;
+            left: 0;
+            right: 0;
+            bottom: 0;            
+        }
+    }
+}

package/dist/assets/sass/core/layout/base/_hero.scss

@@ -0,0 +1,13 @@
+//
+// Hero
+//
+
+// General mode
+.app-hero { 
+    display: flex;
+    align-items: stretch;
+    background-color: var(--#{$prefix}app-hero-bg-color); 
+    box-shadow: var(--#{$prefix}app-hero-box-shadow); 
+    border-top: var(--#{$prefix}app-hero-border-top); 
+    border-bottom: var(--#{$prefix}app-hero-border-bottom); 
+}

package/dist/assets/sass/core/layout/base/_layout-builder.scss

@@ -0,0 +1,19 @@
+//
+// Layout builder
+//
+
+// General mode
+.app-layout-builder-toggle {
+    position: fixed;
+    z-index: $app-layout-builder-toggle-z-index;
+    bottom: $app-layout-builder-toggle-bottom;
+    right: $app-layout-builder-toggle-end;
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.app-layout-builder-toggle { 
+		bottom: $app-layout-builder-toggle-bottom-mobile;
+        right: $app-layout-builder-toggle-end-mobile;
+	}
+}

package/dist/assets/sass/core/layout/base/_layout.scss

@@ -0,0 +1,29 @@
+//
+// App Layout
+//
+
+@import "mixins/layout-minimize";
+@import "mixins/layout-transition";
+@import "root";
+@import "reboot";
+@import "page";
+@import "page-loader";
+@import "container";
+@import "print";
+@import "navbar";
+@import "header/header";
+@import "header/header-primary";
+@import "header/header-secondary";
+@import "header/header-tertiary";
+@import "toolbar";
+@import "hero";
+@import "sidebar/sidebar";
+@import "sidebar/sidebar-primary";
+@import "sidebar/sidebar-secondary";
+@import "sidebar/sidebar-panel";
+@import "aside/aside";
+@import "wrapper";
+@import "main";
+@import "content";
+@import "footer";
+@import "layout-builder";

package/dist/assets/sass/core/layout/base/_main.scss

@@ -0,0 +1,96 @@
+//
+// Main
+//
+
+// General mode
+.app-main {
+    display: flex;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-main {
+        transition: $app-main-transition;
+
+        @include property( padding-left, $app-main-padding-x );
+        @include property( padding-right, $app-main-padding-x );
+        @include property( padding-top, $app-main-padding-y );
+        @include property( padding-bottom, $app-main-padding-y );
+
+        @include property( margin-left, $app-main-margin-x );
+        @include property( margin-right, $app-main-margin-x );
+        @include property( margin-top, $app-main-margin-y );
+        @include property( margin-bottom, $app-main-margin-y );
+    }
+
+    // Integration
+    .app-main {
+        // Sidebar
+        [data-kt-app-sidebar-sticky="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-sticky="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-sticky="true"] & {
+            margin-right: calc(
+                var(--#{$prefix}app-aside-width) + 
+                var(--#{$prefix}app-aside-gap-start, 0px) + 
+                var(--#{$prefix}app-aside-gap-end, 0px)
+            );
+        }
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	// Base
+    .app-main {
+        @include property( padding-left, $app-main-padding-x-mobile );
+        @include property( padding-right, $app-main-padding-x-mobile );
+        @include property( padding-top, $app-main-padding-y-mobile );
+        @include property( padding-bottom, $app-main-padding-y-mobile );
+
+        @include property( margin-left, $app-main-margin-x-mobile );
+        @include property( margin-right, $app-main-margin-x-mobile );
+        @include property( margin-top, $app-main-margin-y-mobile );
+        @include property( margin-bottom, $app-main-margin-y-mobile );
+    }
+}
+
+//Custom styles
+.w-xl-840px {
+    width: 840px !important;
+}
+
+.log-in {
+    font-size: 30px;
+    font-weight: 500 !important;
+}
+
+.table {
+    .avatar-cell {
+        margin-left: 30px !important;
+        width: 40px !important;
+    }
+}
+
+.w-160px {
+    width: 160px !important;
+}

package/dist/assets/sass/core/layout/base/_navbar.scss

@@ -0,0 +1,19 @@
+//
+// App Navbar
+//
+
+.app-navbar {
+    display: flex;
+    align-items: stretch;
+
+    .app-navbar-item {
+        display: flex;
+        align-items: center;
+    }
+
+    &.app-navbar-stretch {
+        .app-navbar-item {
+            align-items: stretch;
+        }
+    }
+}

package/dist/assets/sass/core/layout/base/_page-loader.scss

@@ -0,0 +1,31 @@
+//
+// Page loader
+//
+
+// CSS3 Transitions only after page load(data-kt-app-page-loading="on" attribute added to body tag and removed with JS on page loaded)
+[data-kt-app-page-loading="on"] {
+	overflow: hidden;
+}
+
+[data-kt-app-page-loading="on"] * {
+    transition: none !important;
+}
+
+// Base
+.app-page-loader {
+	background: var(--#{$prefix}body-bg);
+	color: var(--#{$prefix}body-color);
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 10000;
+   	display: none;
+
+   	[data-kt-app-page-loading="on"] & {
+		display: flex;
+		justify-content: center;
+   		align-items: center;
+	}
+}

package/dist/assets/sass/core/layout/base/_page.scss

@@ -0,0 +1,7 @@
+//
+// Page
+//
+
+.app-page {
+    display: flex;
+}