@soyfri/template 1.0.0 → 1.0.3

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

@@ -0,0 +1,133 @@
+//
+// symbol
+//
+
+// Base
+.symbol {
+    display: inline-block;;
+    flex-shrink: 0;
+    position: relative;
+    @include border-radius($border-radius);
+
+    // Label
+    .symbol-label {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+        color: var(--#{$prefix}symbol-label-color);
+        background-color: var(--#{$prefix}symbol-label-bg);
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: cover;
+        @include border-radius($border-radius);
+
+        &:after {
+            @include border-radius($border-radius);
+        }
+    }
+
+    // Badge
+    .symbol-badge {
+        position: absolute;
+        border-radius: 100%;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%) !important;
+    }
+
+    // Image
+    > img {
+        width: 100%;
+        flex-shrink: 0;
+        display: inline-block;
+        @include border-radius($border-radius);
+    }
+
+    // Square
+    &.symbol-square {
+        &,
+        > img,
+        .symbol-label {
+            border-radius: 0 !important;
+        }
+    }
+
+    // Circle
+    &.symbol-circle {
+        &,
+        > img,
+        .symbol-label {
+            border-radius: 50%;
+
+            &:after {
+                border-radius: 50%;
+            }
+        }
+    }
+
+    // Sizes
+    @include symbol-size(get($symbol-sizes, default));
+
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            @each $name, $value in $symbol-sizes {
+                @if ($name != 'default') {
+                    &.symbol#{$infix}-#{$name} {
+                        @include symbol-size($value);
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Group
+.symbol-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-left: 10px;
+
+    .symbol {
+        position: relative;
+        z-index: 0;
+        margin-left: -10px;
+        transition: all 0.3s ease;
+
+        &:hover {
+            transition: all 0.3s ease;
+            z-index: 1;
+        }
+    }
+
+    .symbol-badge {
+        border: 2px solid var(--#{$prefix}body-bg);
+    }
+
+    .symbol-label {
+        position: relative;
+
+        &:after {
+            display: block;
+            content: " ";
+            border-radius: inherit;
+            position: absolute;
+            top: 0;
+            right: 0;
+            left: 0;
+            bottom: 0;
+            border: 2px solid var(--#{$prefix}symbol-border-color);
+            -webkit-background-clip: padding-box; /* for Safari */
+            background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */    
+        }       
+    }
+
+    &.symbol-hover {
+        .symbol {
+            cursor: pointer;
+        }
+    }
+}

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

@@ -0,0 +1,269 @@
+//
+// Table
+//
+
+// Table
+.table:not(.table-bordered) {
+	// Fix for BS 5.1.2 update
+	& > :not(:first-child) {
+    	border-color: transparent;
+		border-width: 0;
+		border-style: none;
+	}
+	
+	>:not(:last-child)>:last-child>* {
+		border-bottom-color: inherit;
+	}
+
+	tr, th, td {
+		border-color: inherit;
+		border-width: inherit;
+		border-style: inherit;
+		text-transform: inherit;
+		font-weight: inherit;
+		font-size: inherit;
+		color: inherit;
+		height: inherit;
+		min-height: inherit;
+
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+
+	tfoot,
+	tbody {
+		tr:last-child {
+			border-bottom: 0 !important;
+
+			th, td {
+				border-bottom: 0 !important;
+			}
+		}
+	}
+
+	tfoot {
+		th, td {
+			border-top: inherit;
+		}
+	}
+
+	// Rounded
+	&.table-rounded {
+		border-radius: $border-radius;
+		border-spacing: 0;
+		border-collapse: separate;
+	}
+
+	// Row Rounded
+	&.table-rows-rounded {
+		th,td {
+			&:first-child {
+				border-top-left-radius: 6px;
+				border-bottom-left-radius: 6px;
+			}
+
+			&:last-child {
+				border-top-right-radius: 6px;
+				border-bottom-right-radius: 6px;
+			}
+		}
+
+	}
+
+	// Flush
+	&.table-flush {
+		tr, th, td {
+			padding: inherit;
+		}
+	}
+
+	// Row bordered
+	&.table-row-bordered {
+		tr {
+			border-bottom-width: 1px;
+			border-bottom-style: solid;
+			border-bottom-color: var(--#{$prefix}border-color);
+		}
+
+		tfoot {
+			th, td {
+				border-top-width: 1px !important;
+			}
+		}
+	}
+
+	// Row dashed
+	&.table-row-dashed {
+		tr {
+			border-bottom-width: 1px;
+			border-bottom-style: dashed;
+			border-bottom-color: var(--#{$prefix}border-color);
+		}
+
+		tfoot {
+			th, td {
+				border-top-width: 1px !important;
+			}
+		}
+	}
+
+	// Row border colors
+	@each $name, $value in $grays {
+		&.table-row-gray-#{$name} {
+			tr { 
+				border-bottom-color: var(--#{$prefix}gray-#{$name});
+			}
+		}
+	}
+
+	//Remover bordeado central
+	.border th {
+		border: 0;
+	}
+}
+
+// Layout fixed
+.table-layout-fixed {
+	table-layout: fixed;
+}
+
+// Sorting
+.table-sort {
+	&:after {
+		opacity: 0;
+	}
+}
+
+.table-sort,
+.table-sort-asc,
+.table-sort-desc {
+	vertical-align: middle;
+
+	&:after {
+		position: relative;
+		display: inline-block;
+		width: 0.75rem;
+		height: 0.75rem;
+		content: " ";
+		bottom: auto;
+		right: auto;
+		left: auto;
+		margin-left: 0.5rem;
+	}		
+}
+
+.table-sort-asc {
+	&:after {
+		opacity: 1;
+		@include svg-bg-icon(arrow-top, var(--#{$prefix}text-muted));
+	}
+}
+
+.table-sort-desc {
+	&:after {
+		opacity: 1;
+		@include svg-bg-icon(arrow-bottom, var(--#{$prefix}text-muted));
+	}
+}
+
+// Loading
+.table-loading-message {
+	display: none;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	@include border-radius($border-radius);
+	box-shadow: var(--#{$prefix}table-loading-message-box-shadow);
+	background-color: $table-loading-message-bg;
+	color: $table-loading-message-color;
+	font-weight: $font-weight-bold;
+	margin: 0 !important;
+	width: auto;
+	padding: 0.85rem 2rem !important;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.table-loading {
+	position: relative;
+
+	.table-loading-message {
+		display: block;
+	}	
+}
+
+// Cell gutters
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @each $name, $value in $gutters {
+			.table.g#{$infix}-#{$name} {
+				th, td {
+					padding: $value;
+
+					// Datatables responsive mode fix
+					&.dtr-control {
+						padding-left: $value !important;
+					}
+				}
+            }
+
+            .table.gy#{$infix}-#{$name} {
+				th, td {
+					padding-top: $value;
+					padding-bottom: $value;
+				}
+            }
+
+			.table.gx#{$infix}-#{$name} {
+				th, td {
+					padding-left: $value;
+					padding-right: $value;
+
+					// Datatables responsive mode fix
+					&.dtr-control {
+						padding-left: $value !important;
+					}
+				}
+            }
+
+			.table.gs#{$infix}-#{$name} {
+				 th, td {
+					&:first-child {
+	   					padding-left: $value;
+					}
+
+					&:last-child {
+	   					padding-right: $value;
+					}
+
+					// Datatables responsive mode fix
+					&.dtr-control:first-child {
+						padding-left: $value !important;
+					}
+				}
+            }
+        }
+    }
+}
+
+@media (max-width: 767px) {
+    .table-responsive .dropdown-menu {
+        position: absolute !important;
+    }
+}
+@media (min-width: 768px) {
+    .table-responsive {
+        overflow: visible;
+    }
+}
+@media (max-width: 1195px) { //mobil
+	.table-report-business{
+		display: none;
+	}
+}

package/dist/assets/sass/core/components/_testimonials-slider.scss

@@ -0,0 +1,65 @@
+//
+// Testimonials slider
+//
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+	.testimonials-slider-highlight {
+		transition: all ease 0.3;
+	
+		.testimonials-photo,
+		.testimonials-title, 
+		.testimonials-body,
+		.testimonials-author,
+		.testimonials-positon {
+			transition: all ease 0.3s;
+		}
+	
+		.tns-item:not(.tns-slide-active) + .tns-item.tns-slide-active {			
+			.testimonials-photo {
+				height: 200px;
+				width: 200px;
+				transition: all ease 0.3s;
+			}
+	
+			.testimonials-title {
+				color: var(--#{$prefix}gray-900) !important;
+				font-size: 1.54rem !important;
+				transition: all ease 0.3s;
+				margin-bottom: 1.3rem !important;
+			}
+	
+			.testimonials-description {
+				color: var(--#{$prefix}gray-700) !important;
+				font-size: 1.38rem !important;
+				transition: all ease 0.3s;
+				margin-bottom: 1.7rem !important;
+			}
+	
+			.testimonials-author {
+				color: var(--#{$prefix}primary) !important;
+				font-size: 1.1rem !important;
+				transition: all ease 0.3s;
+			}
+	
+			.testimonials-positon {
+				color: var(--#{$prefix}gray-500) !important;
+				font-size: 0.9rem !important;
+				transition: all ease 0.3s;
+			}
+		}	
+	} 	
+}
+
+.testimonials-slider-quote {
+	.testimonials-quote {
+		opacity: 0.2;
+	}
+
+	.tns-item:not(.tns-slide-active) + .tns-slide-active + .tns-slide-active {
+		.testimonials-quote {
+			opacity: 0.5;
+			color: var(--#{$prefix}primary) !important;
+		}
+	}	
+} 

package/dist/assets/sass/core/components/_theme-mode.scss

@@ -0,0 +1,38 @@
+//
+// Theme Modes
+//
+
+// Used for theme mode switching via JS
+[data-kt-theme-mode-switching="true"] * {
+    transition: none !important;
+}
+
+// Light mode
+@include color-mode(light) {
+	.theme-dark-show {
+		display: none !important;		
+	}
+
+	.theme-light-bg-transparent {
+		background-color: transparent !important;	
+	}
+
+	.theme-light-bg-body {
+		background-color: var(--#{$prefix}body-bg) !important;	
+	}
+}
+
+// Dark mode
+@include color-mode(dark) {
+	.theme-light-show {
+		display: none !important;		
+	}
+
+	.theme-dark-bg-transparent {
+		background-color: transparent !important;	
+	}
+
+	.theme-dark-bg-body {
+		background-color: var(--#{$prefix}body-bg) !important;	
+	}
+}

package/dist/assets/sass/core/components/_timeline-label.scss

@@ -0,0 +1,59 @@
+//
+// 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: var(--#{$prefix}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: var(--#{$prefix}gray-800);
+	}
+
+	.timeline-badge {
+		flex-shrink: 0;
+		background-color: var(--#{$prefix}body-bg);
+		width: 1rem;
+		height: 1rem;		
+		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 var(--#{$prefix}body-bg) !important;		 
+	}
+
+	.timeline-content {
+		flex-grow: 1;
+	}
+}

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

@@ -0,0 +1,96 @@
+//
+// Timeline
+//
+
+// Base
+.timeline {
+	// Variables
+	--#{$prefix}timeline-icon-size: #{$timeline-icon-size};
+	--#{$prefix}timeline-icon-space: #{$timeline-icon-space};
+
+	// Item
+	.timeline-item {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		align-items: flex-start;
+
+		&:last-child {
+			.timeline-line {
+				bottom: 100%;
+			}
+		}
+	}        
+
+	// Line
+	.timeline-line {
+		display: block;
+		content: " ";
+		justify-content: center;     
+		position: absolute;
+		z-index: 0;
+		left: 0;
+		top: var(--#{$prefix}timeline-icon-size);
+		bottom: 0;
+		transform: translate(50%);
+		border-left-width: 1px;
+		border-left-style: solid;
+		border-left-color: var(--#{$prefix}gray-300); 
+		width: var(--#{$prefix}timeline-icon-size);
+		margin-top: var(--#{$prefix}timeline-icon-space);
+		margin-bottom: var(--#{$prefix}timeline-icon-space);
+	}
+
+	// Icon
+	.timeline-icon {
+		z-index: 1;
+		flex-shrink: 0;
+		margin-right: 1rem;
+		width: var(--#{$prefix}timeline-icon-size); 
+		height: var(--#{$prefix}timeline-icon-size); 
+		display: flex;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--#{$prefix}gray-300); 
+		border-radius: 50%;
+	}
+
+	// Content
+	.timeline-content {
+		width: 100%;
+		overflow: auto;
+		margin-bottom: 1.5rem;
+	}
+
+	// Vertical center 
+	&.timeline-center {
+		.timeline-item {
+			align-items: center;
+
+			&:first-child {
+                .timeline-line {
+                    top: 50%;
+                }
+            }
+
+            &:last-child {
+                .timeline-line {
+                    bottom: 50%;
+                }
+            }
+		}
+	}
+
+	// Line solid
+	&.timeline-border-dashed {				
+		.timeline-line {
+			border-left-style: dashed !important;				
+		}
+
+		.timeline-icon {
+			border-style: dashed !important;	
+		}
+	}
+}