@soyfri/template 1.0.1 → 1.0.3

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

@@ -0,0 +1,104 @@
+//
+// Explore(used for demo product demo)
+//
+
+$explore-primary: #00B2FF;
+$explore-primary-light: #F1FAFF;
+$explore-primary-active: #0098DA;
+$explore-primary-inverse: $white;
+
+$explore-success: #50CD89;
+$explore-success-light: #E8FFF3;
+$explore-success-active: #47BE7D;
+$explore-success-inverse: $white;
+
+$explore-warning: #FFC700;
+$explore-warning-inverse: $white;
+
+$explore-danger: #F1416C;
+$explore-warning-inverse: $white;
+
+.explore-btn-toggle {
+    color: var(--#{$prefix}gray-600);
+    background-color: $white;
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: $explore-primary-inverse;
+        background-color: $explore-primary;
+    }
+}
+
+.explore-btn-dismiss {	
+    border: 0;
+
+    &:hover {
+        i,
+        .svg-icon {
+            color: $explore-primary;
+        }
+    }
+}
+
+.explore-btn-primary {	
+	border: 0;
+    color: $explore-primary-inverse;
+    background-color: $explore-primary;
+
+    &:hover {
+        color: $explore-primary-inverse;
+        background-color: $explore-primary-active;
+    }
+}
+
+.explore-btn-secondary {	
+	border: 0;
+    color: var(--#{$prefix}gray-600);
+    background-color: var(--#{$prefix}gray-100);
+
+    &:hover {
+        color: var(--#{$prefix}gray-800);
+        background-color: var(--#{$prefix}gray-200);
+    }
+}
+
+.explore-btn-outline {
+    border: 1px dashed var(--#{$prefix}gray-300) !important;
+
+    &:hover,
+    &.active {
+        border: 1px dashed $explore-success !important;
+        background-color: $explore-success-light;
+    }
+}
+
+.explore-link {	
+    color: $explore-primary;
+
+    &:hover {
+        color: $explore-primary-active;
+    }
+}
+
+.explore-link-hover:hover {	
+    color: $explore-primary !important;
+}
+
+.explore-icon-success {	
+    color: $explore-success;
+}
+
+.explore-icon-danger {	
+    color: $explore-danger;
+}
+
+.explore-label-free {
+    color: $explore-warning-inverse;
+    background-color: $explore-warning;
+}
+
+.explore-label-pro {
+    color: $explore-success-inverse;
+    background-color: $explore-success;
+}

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

@@ -0,0 +1,18 @@
+//
+// Fixed
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .fixed-top#{$infix} {
+            position: fixed;
+            z-index: $fixed-z-index;
+            top: 0;
+            left: 0;
+            right: 0;    
+        }
+    }
+}
+

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

@@ -0,0 +1,13 @@
+//
+// Forms
+//
+
+// Import Dependencies
+@import "forms/labels";
+@import "forms/form-control";
+@import "forms/floating-labels";
+@import "forms/form-select";
+@import "forms/form-check";
+@import "forms/input-group";
+@import "forms/floating-labels";
+@import "forms/required";

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

@@ -0,0 +1,12 @@
+//
+// Helpers
+//
+
+// Import Dependencies
+@import "helpers/background";
+@import "helpers/borders";
+@import "helpers/flex";
+@import "helpers/shadow";
+@import "helpers/text";
+@import "helpers/opacity";
+@import "helpers/transform";

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

@@ -0,0 +1,53 @@
+//
+// Hover effects
+//
+
+.hover-elevate-up {
+	transition: transform 0.3s ease;
+
+	&:hover {
+		transform: translateY(-2.5%);
+		transition: transform 0.3s ease;
+		will-change: transform;
+	}
+}
+
+.hover-elevate-down {
+	transition: transform 0.3s ease;
+
+	&:hover {
+		transform: translateY(2.5%);
+		transition: transform 0.3s ease;
+		will-change: transform;
+	}
+}
+
+.hover-scale {
+	transition: transform 0.3s ease;
+
+	&:hover {
+		transform: scale(1.1);
+		transition: transform 0.3s ease;
+		will-change: transform;
+	}
+}
+
+.hover-rotate-end {
+	transition: transform 0.3s ease;
+
+	&:hover {
+		transform: rotate(4deg);
+		transition: transform 0.3s ease;
+		will-change: transform;
+	}
+}
+
+.hover-rotate-start {
+	transition: transform 0.3s ease;
+
+	&:hover {
+		transform: rotate(-4deg);
+		transition: transform 0.3s ease;
+		will-change: transform;
+	}
+}

package/dist/assets/sass/core/components/_image-input.scss

@@ -0,0 +1,111 @@
+//
+// Avatar
+//
+
+
+// Base
+.image-input {
+	position: relative;
+	display: inline-block;
+	@include border-radius($border-radius);
+	background-repeat: no-repeat;
+	background-size: cover;
+
+	// Empty state
+	&:not(.image-input-empty) {
+		background-image: none !important;
+	}
+
+	// Wrapper
+	.image-input-wrapper {
+		width: 120px;
+		height: 120px;
+		@include border-radius($border-radius);
+		background-repeat: no-repeat;
+		background-size: cover;
+	}
+
+	// Actions
+	[data-kt-image-input-action] {
+		cursor: pointer;
+		position: absolute;
+		transform: translate(-50%,-50%);
+	}
+
+	// Change Button
+	[data-kt-image-input-action="change"] {
+		left: 100%;
+		top: 0;
+
+		input {
+			width: 0 !important;
+			height: 0 !important;
+			overflow: hidden;
+			opacity: 0;
+		}
+	}
+
+	// Cancel & Remove Buttons
+	[data-kt-image-input-action="cancel"],
+	[data-kt-image-input-action="remove"] {
+		position: absolute;
+		left: 100%;
+		top: 100%;
+	}
+
+	[data-kt-image-input-action="cancel"] {
+		display: none;
+	}
+
+	// Input Changed State
+	&.image-input-changed {
+		[data-kt-image-input-action="cancel"] {
+			display: flex;
+		}
+
+		[data-kt-image-input-action="remove"] {
+			display: none;
+		}
+	}
+
+	// Input Empty State
+	&.image-input-empty {
+		[data-kt-image-input-action="remove"],
+		[data-kt-image-input-action="cancel"] {
+			display: none;
+		}
+	}
+
+	// Circle style
+	&.image-input-circle {
+		border-radius: 50%;
+
+		// Wrapper
+		.image-input-wrapper {
+			border-radius: 50%;
+		}
+
+		// Change Control
+		[data-kt-image-input-action="change"] {
+			left: 100%;
+			top: 0;
+			transform: translate(-100%, 0%);
+		}
+
+		// Cancel & Remove Buttons
+		[data-kt-image-input-action="cancel"],
+		[data-kt-image-input-action="remove"] {
+			left: 100%;
+			top: 100%;
+			transform: translate(-100%,-100%);
+		}
+	}
+
+	// Bordered style
+	&.image-input-outline {
+		.image-input-wrapper {
+			border: 3px solid var(--#{$prefix}body-bg);
+			box-shadow: var(--#{$prefix}box-shadow);
+		}
+	}
+}

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

@@ -0,0 +1,17 @@
+// Image thumbnails
+.img-thumbnail {
+	background-color: var(--kt-thumbnail-bg);
+	border: $thumbnail-border-width solid var(--kt-thumbnail-border-color);
+	@include box-shadow(var(--kt-thumbnail-box-shadow));
+}
+
+.figure-caption {
+	color: var(--kt-figure-caption-color);
+}
+
+
+.image-profile {
+	width: 120px;
+	height: 120px;
+	cursor: pointer;
+}

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

@@ -0,0 +1,17 @@
+//
+// Indicator
+//
+
+.indicator-progress {
+    display: none;
+
+    [data-kt-indicator="on"] > & {
+        display: inline-block;
+    }
+}
+
+.indicator-label {
+    [data-kt-indicator="on"] > & {
+        display: none;
+    }
+}

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

@@ -0,0 +1,7 @@
+//
+// Menu
+//
+
+// Import Dependencies
+@import "menu/base";
+@import "menu/theme";

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

@@ -0,0 +1,13 @@
+//
+// Mixins
+//
+
+// Import Dependencies
+@import "mixins/menu";
+@import "mixins/buttons";
+@import "mixins/ki";
+@import "mixins/symbol";
+@import "mixins/svg-icon";
+@import "mixins/svg-bg-icon";
+@import "mixins/scroll";
+@import "mixins/shape";

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

@@ -0,0 +1,7 @@
+//
+// Modal
+//
+
+.modal-rounded {
+	border-radius: $modal-content-border-radius !important;	
+}

package/dist/assets/sass/core/components/_nav-line-tabs.scss

@@ -0,0 +1,68 @@
+//
+// Nav
+//
+
+// Line tabs
+.nav-line-tabs {
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	border-bottom-color: var(--#{$prefix}border-color);
+
+	.nav-item {
+		margin-bottom: -1px;
+
+		// Base link
+		.nav-link {
+			color: var(--#{$prefix}gray-500);
+			border: 0;
+			border-bottom: 1px solid transparent;
+			transition: $transition-link;
+			padding: 0.5rem 0;
+			margin: 0 1rem;
+		}
+
+		// First Item
+		&:first-child {
+			.nav-link {
+				margin-left: 0;
+			}
+		}
+
+		// Last Item
+		&:last-child {
+			.nav-link {
+				margin-right: 0;
+			}
+		}
+	}
+
+	// Active & Hover States
+	.nav-item .nav-link.active,
+  	.nav-item.show .nav-link,
+	.nav-item .nav-link:hover:not(.disabled) {
+		background-color: transparent;
+		border: 0;
+		border-bottom: 1px solid var(--#{$prefix}primary);
+		transition: $transition-link;
+  	}
+
+	// 2x Line
+	&.nav-line-tabs-2x {
+		border-bottom-width: 2px;
+
+		.nav-item {
+			margin-bottom: -2px;
+
+			.nav-link {
+				border-bottom-width: 2px;
+			}
+		}
+
+		// Active & Hover States
+		.nav-item .nav-link.active,
+	  	.nav-item.show .nav-link,
+		.nav-item .nav-link:hover:not(.disabled) {
+			border-bottom-width: 2px;
+		}
+	}
+}

package/dist/assets/sass/core/components/_nav-pills-custom.scss

@@ -0,0 +1,91 @@
+//
+// Custom Nav Pills
+//
+
+.nav.nav-pills.nav-pills-custom {
+	// States
+	.show > .nav-link,
+	.nav-link{		
+		border: 1px dashed var(--#{$prefix}border-dashed-color);
+		@include border-radius($border-radius-lg);
+		
+		&.nav-link-border-solid {
+			border: 3px solid var(--#{$prefix}border-dashed-color);
+
+			&.active {					 		
+				border: 3px solid var(--#{$prefix}primary);	 
+			}
+		}
+		
+        .nav-icon {
+            img {
+                width: 30px;
+                transition: $transition-link;
+
+                &.default {
+                    display: inline-block;
+                }
+
+                &.active {
+                    display: none;
+                }
+            }
+        }
+
+        &.active {	
+			background-color: transparent;		
+			border: 1px solid var(--#{$prefix}border-dashed-color);
+			transition-duration: 1ms;			
+			position: relative;
+
+			.nav-text {
+				color: var(--#{$prefix}gray-800) !important;
+				transition: $transition-link;
+			}
+			
+			.bullet-custom {
+				display: block;			  	
+			}
+		}
+
+		.bullet-custom {
+			display: none;			  	
+		}
+	}
+
+	&.nav-pills-active-custom {
+		.nav-item {				 
+			.nav-link {
+				&:not(:active) {				 
+					span:nth-child(1) {
+						color: #B5B5C3;
+					}
+	
+					span:nth-child(2) {
+						color: #3F4254;
+					}						 	 
+				}		
+
+				&:hover {				 
+					span:nth-child(1) {
+						color: $white !important;
+					}
+	
+					span:nth-child(2) {
+						color: $white !important;
+					}						 	 
+				}
+				
+				&.active {				 
+					span:nth-child(1) {
+						color: $white !important;
+					}
+	
+					span:nth-child(2) {
+						color: $white !important;
+					}						 	 
+				}	
+			}				 		 
+		}		 
+	}
+}

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

@@ -0,0 +1,99 @@
+//
+// Nav
+//
+
+// Nav pills
+.nav-pills {
+	.nav-item {
+		margin-right: 0.5rem;
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+}
+
+// Stretch items
+.nav-stretch {
+	align-items: stretch;
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+
+	.nav-item {
+		display: flex;
+		align-items: stretch;
+		padding-top: 0 !important;
+		padding-bottom: 0 !important;
+	}
+
+	.nav-link {
+		display: flex;
+		align-items: center;
+	}
+}
+
+// Nav group
+.nav-group {
+	padding: 0.35rem;
+	@include border-radius($border-radius);
+	background-color: var(--#{$prefix}gray-100);
+
+	// Outline nav group
+	&.nav-group-outline {	
+		background-color: transparent;
+		border: 1px solid var(--#{$prefix}border-color);	
+	}
+
+	// Fluid option
+	&.nav-group-fluid {
+		display: flex;
+
+		> label,
+		> .btn {
+			position: relative;
+			flex-shrink: 0;
+			flex-grow: 1;
+			flex-basis: 0;
+		}
+
+		> label {
+			margin-right: 0.1rem;
+
+			> .btn {
+				width: 100%;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+// Nav bootstrap
+.nav-tabs {
+	border: 0 !important;
+
+	.nav-item {
+		&:first-child {
+			margin-right: 57px;
+		}
+		.nav-link {
+			font-size: 26px;
+			font-weight: 500;
+			color: var(--#{$prefix}gray);
+
+			&:hover {
+				border: 0 !important;
+			}
+	
+			&.active {
+				color: var(--#{$prefix}primary-dark) !important;
+				border-top: 0 !important;
+				border-right: 0 !important;
+				border-left: 0 !important;
+				border-bottom: 3px solid var(--#{$prefix}primary);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,6 @@
+%offcanvas-css-vars {
+	--#{$prefix}offcanvas-color: var(--#{$prefix}offcanvas-color);
+	--#{$prefix}offcanvas-bg: var(--#{$prefix}offcanvas-bg-color);
+	--#{$prefix}offcanvas-border-color: var(--#{$prefix}offcanvas-border-color);
+	--#{$prefix}offcanvas-box-shadow: var(--#{$prefix}offcanvas-box-shadow);
+}

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

@@ -0,0 +1,35 @@
+//
+// Demo
+//
+
+
+.overlay  {
+    position: relative;
+
+    .overlay-layer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--#{$prefix}overlay-bg);
+        transition: all 0.3s ease;
+        opacity: 0;
+    }
+
+    &.overlay-show,
+    &.overlay-block,
+    &:hover {
+        .overlay-layer {
+            transition: all 0.3s ease;
+            opacity: 1;
+        }
+    }
+
+    &.overlay-block {
+        cursor: wait;
+    }
+}

package/dist/assets/sass/core/components/_page-loader.scss

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