@soyfri/template 1.0.1 → 1.0.4

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

@@ -0,0 +1,176 @@
+//
+// Pagination
+//
+
+.pagination {
+	display:flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin: 0;
+
+	// Pagination circle
+	&.pagination-circle {
+		.page-link {
+			border-radius: 50%;
+		}
+	}
+
+	// Pagination outline
+	&.pagination-outline {
+		.page-link {
+			border: 1px solid var(--#{$prefix}border-color);
+		}
+
+		.page-item {
+			&:hover:not(.disabled),
+		    &.active {
+			    .page-link {
+			        border-color: var(--#{$prefix}primary-light);
+				}	
+			}
+		}
+	}		
+}
+
+.page-item {
+    margin-right: $pagination-item-space;
+
+	&:last-child {
+        margin-right: 0;
+    }
+
+	.page-link {
+		display:flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: $btn-border-radius;
+		height: $pagination-item-height;
+		min-width: $pagination-item-height;
+		font-weight: $pagination-font-weight;
+		font-size: $pagination-font-size;
+
+		i {
+			font-size: $pagination-icon-font-size;
+		}
+
+		/*rtl:options:{"autoRename":false}*/
+		.previous,
+		.next {
+			display: block;
+			height: $pagination-icon-height;
+			width: $pagination-icon-height;
+
+			/*rtl:raw:transform: rotateZ(-180deg);*/
+		}
+		/*rtl:end:ignore*/
+
+		.previous {
+			@include svg-bg-icon(arrow-start, $pagination-color);
+		}
+
+		/*rtl:options:{"autoRename":false}*/
+		.next {
+			@include svg-bg-icon(arrow-end, $pagination-color);
+		}
+	}
+
+	&:focus {
+		.page-link {
+			color: var(--#{$prefix}pagination-focus-color);
+
+			.svg-icon,
+			i {
+				color: var(--#{$prefix}pagination-focus-color);
+			}
+
+			.previous {
+				@include svg-bg-icon(arrow-start, var(--#{$prefix}pagination-focus-color));
+			}
+
+			/*rtl:options:{"autoRename":false}*/
+			.next {
+				@include svg-bg-icon(arrow-end, var(--#{$prefix}pagination-focus-color));
+			}
+		}
+	}
+
+	&:hover:not(.active):not(.offset):not(.disabled) {
+		.page-link {
+			color: var(--#{$prefix}pagination-hover-color);
+			
+			&.page-text {
+				background-color: transparent;	
+			}
+
+			.svg-icon,
+			i {
+				color: var(--#{$prefix}pagination-hover-color);
+			}
+
+			.previous {
+				@include svg-bg-icon(arrow-start, var(--#{$prefix}pagination-hover-color));
+			}
+
+			/*rtl:options:{"autoRename":false}*/
+			.next {
+				@include svg-bg-icon(arrow-end, var(--#{$prefix}pagination-hover-color));
+			}
+		}
+	}
+
+	&.active {
+		.page-link {
+			color: var(--#{$prefix}pagination-active-color);
+
+			&.page-text {
+				background-color: transparent;	
+			}
+
+			.svg-icon,
+			i {
+				color: var(--#{$prefix}pagination-active-color);;
+			}
+				
+			.previous {
+				@include svg-bg-icon(arrow-start, var(--#{$prefix}pagination-active-color));
+			}
+
+			/*rtl:options:{"autoRename":false}*/
+			.next {
+				@include svg-bg-icon(arrow-end, var(--#{$prefix}pagination-active-color));
+			}
+		}
+	}
+
+	&.disabled {
+		.page-link {
+			color: var(--#{$prefix}pagination-disabled-color);
+
+			.svg-icon,
+			i {
+				color: var(--#{$prefix}pagination-disabled-color);
+			}
+
+			.previous {
+				@include svg-bg-icon(arrow-start, var(--#{$prefix}pagination-disabled-color));
+			}
+
+			/*rtl:options:{"autoRename":false}*/
+			.next {
+				@include svg-bg-icon(arrow-end, var(--#{$prefix}pagination-disabled-color));
+			}
+		}
+	}
+	/*rtl:end:ignore*/
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+	.page-item {
+		margin-right: $pagination-item-space-tablet-and-mobile;
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+}

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

@@ -0,0 +1,58 @@
+//
+// Popover
+//
+
+
+// Base
+.popover {
+    --#{$prefix}popover-header-border-color: #{$popover-header-border-color};
+
+    .popover-header {
+        font-size: $popover-header-font-size;
+        font-weight: $popover-header-font-weight;
+        border-bottom: 1px solid var(--#{$prefix}popover-header-border-color);
+    }
+
+    .popover-dismiss {
+        position: absolute;
+        top: $popover-dissmis-btn-top;
+        right: $popover-dissmis-btn-end;
+        height: $popover-dissmis-btn-size;
+        width: $popover-dissmis-btn-size;
+        @include svg-bg-icon(close, var(--#{$prefix}gray-500)); // todo: revise
+        mask-size: 50%;
+        -webkit-mask-size: 50%;
+
+        &:hover {
+            background-color: var(--#{$prefix}primary);
+        }
+
+        & + .popover-header {
+            padding-right: $popover-body-padding-x + $popover-dissmis-btn-size;
+        }
+    }
+}
+
+// Inverse
+.popover-inverse {
+    --#{$prefix}popover-bg: var(--#{$prefix}gray-900);
+    --#{$prefix}popover-border-color: var(--#{$prefix}gray-900);
+    --#{$prefix}popover-box-shadow: #{$popover-box-shadow-dark};
+    --#{$prefix}popover-header-color: var(--#{$prefix}gray-200);
+    --#{$prefix}popover-header-bg: var(--#{$prefix}gray-900);
+    --#{$prefix}popover-body-color: var(--#{$prefix}gray-400);
+    --#{$prefix}popover-arrow-border: transparent;
+    --#{$prefix}popover-header-border-color: var(--#{$prefix}gray-800);
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .popover:not(.popover-inverse) {
+            --#{$prefix}popover-bg: #{$popover-bg-dark};
+            --#{$prefix}popover-border-color: #{$popover-border-color-dark};
+            --#{$prefix}popover-header-bg: #{$popover-bg-dark};
+            --#{$prefix}popover-box-shadow: #{$popover-box-shadow-dark};
+            --#{$prefix}popover-header-border-color: #{$popover-header-border-color-dark};
+        }
+    }
+}

package/dist/assets/sass/core/components/_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;
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+//
+// Progress
+//
+
+// Vertical Position
+.progress-vertical {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+
+    .progress {
+        height: 100%;
+        @include border-radius($border-radius);
+        display: flex;
+        align-items: flex-end;
+        margin-right: 1rem;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        .progress-bar {
+            width: 8px;
+            @include border-radius($border-radius);
+        }
+    }
+}

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

@@ -0,0 +1,39 @@
+//
+// Pulse
+//
+
+
+// Base
+.pulse {
+    position: relative;
+
+    // Theme Colors
+    @each $name, $color in $theme-colors {
+        &.pulse-#{$name} {
+            .pulse-ring {
+                border-color: var(--#{$prefix}#{$name});
+            }
+        }
+    }
+}
+
+.pulse-ring {
+    display: block;
+    border-radius: 40px;
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    animation: animation-pulse 3.5s ease-out;
+    animation-iteration-count: infinite;
+    opacity: 0;
+    border-width: 3px;
+    border-style: solid;
+    border-color: var(--#{$prefix}gray-500);	
+}
+
+@keyframes animation-pulse {
+    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+    60% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+    65% {opacity: 1;}
+    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
+}

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

@@ -0,0 +1,62 @@
+//
+// Rating
+//
+
+.rating {
+    display: flex;
+    align-items: center;
+}
+
+.rating-input {
+    position: absolute !important;
+    left: -9999px !important;
+
+    &[disabled] {
+        display: none;
+    }
+}
+
+.rating-label {
+    padding: 0;
+    margin: 0;
+
+    & > i,
+    & > .svg-icon {
+        line-height: 1;
+        color: var(--#{$prefix}rating-color-default);
+    }
+}
+
+label.rating-label {
+    cursor: pointer;
+}
+
+div.rating-label.checked,
+label.rating-label {
+    & > i,
+    & > .svg-icon {
+        color: var(--#{$prefix}rating-color-active);
+    }
+}
+
+.rating-input:checked ~ .rating-label {
+    & > i,
+    & > .svg-icon {
+        color: var(--#{$prefix}rating-color-default);
+    }
+}
+
+.rating:hover label.rating-label {
+    & > i,
+    & > .svg-icon {
+        color: var(--#{$prefix}rating-color-active);
+    }
+}
+
+label.rating-label:hover ~ .rating-label {
+    & > i,
+    & > .svg-icon {
+        color: var(--#{$prefix}rating-color-default);
+    }
+    color: var(--#{$prefix}rating-color-default);
+}

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

@@ -0,0 +1,7 @@
+//
+// Reboot
+//
+
+h1, h2, h3, h4, h5, h6 {
+	outline: 0;
+}

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

@@ -0,0 +1,195 @@
+//
+// Ribbon
+//
+
+// Base
+.ribbon {
+	position: relative;
+
+	// Ribbon target
+	.ribbon-label {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 5px 10px;
+		position: absolute;
+		z-index: 1;
+		background-color: var(--#{$prefix}ribbon-label-bg);
+		box-shadow: var(--#{$prefix}ribbon-label-box-shadow);
+		color: var(--#{$prefix}primary-inverse);
+		top: 50%;
+		right: 0;
+		transform: translateX(5px) translateY(-50%);
+
+		> .ribbon-inner {
+			z-index: -1;
+			position: absolute;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+		}
+
+		&:after {
+			border-color: var(--#{$prefix}ribbon-label-border-color);
+		}
+	}
+
+	// Vertical aligment
+	&-vertical {
+		.ribbon-label {
+			padding: 5px 10px;
+			min-width: 36px;
+			min-height: 46px;
+			text-align: center;
+		}
+	}
+
+	&.ribbon-top {
+		.ribbon-label {
+			top: 0;
+			transform: translateX(-15px) translateY(-4px);
+			border-bottom-right-radius: $border-radius;
+			border-bottom-left-radius: $border-radius;
+		}
+	}
+
+	&.ribbon-bottom {
+		.ribbon-label {
+			border-top-right-radius: $border-radius;
+			border-top-left-radius: $border-radius;
+		}
+	}
+
+	&.ribbon-start {
+		.ribbon-label {
+			top: 50%;
+			left: 0;
+			right: auto;
+			transform: translateX(-5px) translateY(-50%);
+			border-top-right-radius: $border-radius;
+			border-bottom-right-radius: $border-radius;
+		}
+	}
+
+	&.ribbon-end {
+		.ribbon-label {
+			border-top-left-radius: $border-radius;
+			border-bottom-left-radius: $border-radius;
+		}
+	}
+}
+
+// Clip style
+.ribbon.ribbon-clip {
+	&.ribbon-start {
+		.ribbon-label {
+			left: -5px;
+
+			.ribbon-inner {
+				border-top-right-radius: $border-radius;
+				border-bottom-right-radius: $border-radius;
+
+				&:before,
+				&:after {
+					content: "";
+					position: absolute;
+					border-style: solid;
+					border-color: transparent !important;
+					bottom: -10px;
+				}
+
+				&:before {
+					border-width: 0 10px 10px 0;
+					border-right-color: var(--#{$prefix}ribbon-clip-bg) !important;
+					left: 0;
+				}
+			}
+		}
+	}
+
+	&.ribbon-end {
+		.ribbon-label {
+			right: -5px;
+
+			.ribbon-inner {
+				border-top-left-radius: $border-radius;
+				border-bottom-left-radius: $border-radius;
+
+				&:before,
+				&:after {
+					content: "";
+					position: absolute;
+					border-style: solid;
+					border-color: transparent !important;
+					bottom: -10px;
+				}
+
+				&:before {
+					border-width: 0 0 10px 10px;
+					border-left-color: var(--#{$prefix}ribbon-clip-bg) !important;
+					right: 0;
+				}
+			}
+		}
+	}
+}
+
+// Triangle style
+.ribbon.ribbon-triangle {
+	position: absolute;
+	z-index: 1;
+	display: flex;
+	align-items: flex-start;
+	justify-content: flex-start;
+
+	// Top start position
+	&.ribbon-top-start {
+		top: 0;
+		left: 0;
+		width: 4rem;
+		height: 4rem;
+		border-bottom: solid 2rem transparent !important;
+		border-left: solid 2rem transparent;
+		border-right: solid 2rem transparent !important;
+		border-top: solid 2rem transparent;	 
+	}
+
+	// Top end position
+	&.ribbon-top-end {
+		top: 0;
+		right: 0;
+		width: 4rem;
+		height: 4rem;
+		border-bottom: solid 2rem transparent !important;
+		border-left: solid 2rem transparent !important;
+		border-right: solid 2rem transparent;
+		border-top: solid 2rem transparent;		 
+	}
+
+	// Botton start position
+	&.ribbon-bottom-start {
+		bottom: 0;
+		left: 0;
+		width: 4rem;
+		height: 4rem;
+		border-bottom: solid 2rem transparent;
+		border-left: solid 2rem transparent;
+		border-right: solid 2rem transparent !important;
+		border-top: solid 2rem transparent !important;	
+	}	
+	
+	// Botton end position
+	&.ribbon-bottom-end {
+		bottom: 0;
+		right: 0;
+		width: 4rem;
+		height: 4rem;
+		border-bottom: solid 2rem transparent;
+		border-right: solid 2rem transparent;
+		border-left: solid 2rem transparent !important;
+		border-top: solid 2rem transparent !important;			 
+	}		 
+}
+