@soyfri/template 1.0.0 → 1.0.3

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

@@ -0,0 +1,107 @@
+//
+// Accordion
+//
+
+// Base
+.accordion {
+	// According heading
+	.accordion-header {
+		cursor: pointer;
+	}
+
+	// Icon toggle mode
+	&.accordion-icon-toggle {
+		// Accordion icon expaned mode
+		.accordion-icon {
+			display: flex;
+			flex-shrink: 0;
+			transition: $transition-base;
+			transform: rotate(90deg);
+			align-items: center;
+			justify-content: center;
+
+			i,
+			.svg-icon {
+	    		color: var(--#{$prefix}primary);
+	    	}
+		}
+
+		// Accordion icon collapsed mode
+		.collapsed {
+			.accordion-icon {
+				transition: $transition-base;
+				transform: rotate(0);
+
+				i,
+				.svg-icon {
+		    		color: var(--#{$prefix}text-muted);
+		    	}
+			}
+		}
+	}
+
+	// Icon collapse mode
+	&.accordion-icon-collapse {
+		// Accordion icon expaned mode
+		.accordion-icon {
+			display: flex;
+			flex-shrink: 0;
+			align-items: center;
+			justify-content: center;
+			transition: $transition-base;
+
+			.accordion-icon-on {
+				display: inline-flex;	
+			}
+
+			.accordion-icon-off {
+				display: none;	
+			}
+
+			i,
+			.svg-icon {
+	    		color: var(--#{$prefix}primary);
+	    	}
+		}
+
+		// Accordion icon collapsed mode
+		.collapsed {
+			.accordion-icon {
+				transition: $transition-base;
+				
+				.accordion-icon-on {
+					display: none;	
+				}
+
+				.accordion-icon-off {
+					display: inline-flex;	
+				}
+
+				i,
+				.svg-icon {
+		    		color: var(--#{$prefix}text-muted);
+		    	}
+			}
+		}
+	}
+
+	// Reset accordion item border
+	&.accordion-borderless {
+		// According item
+		.accordion-item {
+			border: 0;
+		}
+	}
+
+	// Reset accordion item border, border radiues and background color
+	&.accordion-flush {
+		// According item
+		.accordion-item {
+			background-color: transparent;
+			border: 0;
+			border-radius: 0;
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}	
+}

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

@@ -0,0 +1,15 @@
+//
+// Alert
+//
+	
+@each $name, $value in $theme-colors {
+	.alert-#{$name} {
+		color: var(--#{$prefix}#{$name});
+		border-color: var(--#{$prefix}#{$name});
+		background-color: var(--#{$prefix}#{$name}-light);
+
+		.alert-link {
+    		color: var(--#{$prefix}#{$name});
+  		}
+	}
+}

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

@@ -0,0 +1,37 @@
+//
+// Anchor
+//
+
+.anchor {
+    display: flex;
+    align-items: center;
+
+    a {
+        position: relative;
+        display: none;
+        align-items: center;
+        justify-content:flex-start;
+        height: 1em;
+        width: 1.25em;
+        margin-left: -1.25em;
+        font-weight: 500;
+        font-size: 0.8em;
+        color: var(--#{$prefix}text-muted);
+        transition: $transition-base;
+
+        &:before {
+            content: '#';
+        }
+    }
+
+    &:hover {
+        a {
+            display: flex;
+
+            &:hover {
+                color: var(--#{$prefix}primary);
+                transition: $transition-base;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,81 @@
+//
+// Animation
+//
+
+// Base
+.animation {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+// Slide In Down
+@keyframes animationSlideInDown {
+    from {
+        transform: translate3d(0, -100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.animation-slide-in-down {
+    animation-name: animationSlideInDown;
+}
+
+// Slide In Up
+@keyframes animationSlideInUp {
+    from {
+        transform: translate3d(0, 100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.animation-slide-in-up {
+    animation-name: animationSlideInUp;
+}
+
+// Fade In
+@keyframes animationFadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.animation-fade-in {
+    animation-name: animationFadeIn;
+}
+
+// Fade Out
+@keyframes animationFadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+.animation-fade-out {
+    animation-name: animationFadeOut;
+}
+
+// Blink
+.animation-blink {
+    animation: animationBlink 1s steps(5, start) infinite;
+}
+
+@keyframes animationBlink {
+    to {
+        visibility: hidden;
+    }
+}

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

@@ -0,0 +1,85 @@
+//
+// Badge
+//
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    
+    // Fixed size
+    &.badge-circle,
+    &.badge-square {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: $badge-size;
+        min-width: $badge-size;
+        padding: 0 0.1rem;
+        line-height: 0;
+    }
+
+    // Circle
+    &.badge-circle {
+        border-radius: 50%;
+        padding: 0;
+        min-width: unset;
+        width: $badge-size;
+    }
+
+    // Sizes
+    &.badge-sm {
+        min-width: $badge-size-sm;
+        font-size: $badge-font-size-sm;
+
+        &.badge-square {
+            height: $badge-size-sm;
+        }
+
+        &.badge-circle {
+            width: $badge-size-sm;
+            height: $badge-size-sm;
+        }
+    }
+
+    &.badge-lg {
+        min-width: $badge-size-lg;
+        font-size: $badge-font-size-lg;
+
+        &.badge-square {
+            height: $badge-size-lg;
+        }
+
+        &.badge-circle {
+            width: $badge-size-lg;
+            height: $badge-size-lg;
+        }
+    }
+}
+
+@each $name, $value in $theme-colors {
+    .badge-#{$name} {
+        color: var(--#{$prefix}#{$name}-inverse);
+        background-color: var(--#{$prefix}#{$name});
+
+        &.badge-outline {
+            border: 1px solid var(--#{$prefix}#{$name});
+            background-color: transparent;
+
+            @if $name == 'secondary' {
+                color: var(--#{$prefix}#{$name}-inverse);
+            } @else {
+                color: var(--#{$prefix}#{$name});
+            }
+        }
+    }
+
+    .badge-light-#{$name} {        
+        background-color: var(--#{$prefix}#{$name}-light);
+
+        @if $name == 'secondary' {
+            color: var(--#{$prefix}#{$name}-inverse);
+        } @else {
+            color: var(--#{$prefix}#{$name});
+        }
+    }    
+}

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

@@ -0,0 +1,53 @@
+//
+// BlockUI
+//
+
+
+.blockui  {
+    position: relative;
+
+    .blockui-overlay {
+        transition: all 0.3s ease;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--#{$prefix}blockui-overlay-bg);
+
+        .spinner-border {
+            height: 1.35rem;
+            width: 1.35rem;
+        }
+    }
+
+    .blockui-message {
+        display: flex;
+        align-items: center;
+        @include border-radius($border-radius);
+        box-shadow: var(--#{$prefix}blockui-message-box-shadow);
+        background-color: var(--#{$prefix}blockui-message-bg);
+        color: var(--#{$prefix}gray-700);
+        font-weight: $font-weight-bold;
+        margin: 0 !important;
+        width: auto;
+        padding: 0.85rem 1.75rem !important;
+
+        .spinner-border {
+            margin-right: 0.65rem;
+        }
+    }
+}
+
+@if $enable-dark-mode {
+    @include color-mode(dark) {
+        .blockui {
+            --#{$prefix}blockui-overlay-bg: #{$blockui-overlay-bg-dark};
+            --#{$prefix}blockui-message-bg: #{$blockui-message-bg-dark};
+            --#{$prefix}blockui-message-box-shadow: #{$blockui-message-box-shadow-dark};
+        }
+    }
+}

package/dist/assets/sass/core/components/_bootstrap-icon.scss

@@ -0,0 +1,22 @@
+.bi {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+            // Sizes
+            @each $name, $value in $font-sizes {
+                &.bi#{$infix}-#{$name} {
+                    font-size: $value !important;
+                }
+            }
+        }
+    }
+
+    &.iw-semibold {
+        -webkit-text-stroke-width: 1px;
+    }
+
+    &.iw-bold {
+        -webkit-text-stroke-width: 2px;
+    }
+}

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

@@ -0,0 +1,69 @@
+//
+// Breadcrumb
+//
+
+// Breadcrumb
+.breadcrumb {
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;    
+
+    // Item breadcrumb
+    .breadcrumb-item {
+        display: flex;
+        align-items: center;
+        padding-left: $breadcrumb-item-padding-x;
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        &:after {
+            padding-left: $breadcrumb-item-padding-x;
+            content: "/";
+        }
+
+        &:before {
+            display: none;
+        }
+
+        &:first-child {
+            padding-left: 0;
+        }
+
+        &:last-child {
+            &:after {
+                display: none;
+            }
+        }
+    }
+}
+
+// Breadcrumb line style
+.breadcrumb-line {
+    .breadcrumb-item {
+        &:after {
+            content: "-";
+        }
+    }
+}
+
+// Breadcrumb dot style
+.breadcrumb-dot {
+    .breadcrumb-item {
+        &:after {            
+            content: "\2022";
+        }
+    }
+}
+
+// Breadcrumb separatorless style
+.breadcrumb-separatorless {
+    .breadcrumb-item {
+        &:after {
+            display:none;
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+//
+// Bullet
+//
+
+// Base
+.bullet {
+    display: inline-block;
+    background-color: var(--#{$prefix}bullet-bg-color); 
+    @include border-radius($bullet-bar-border-radius);
+    width: $bullet-bar-width;
+    height: $bullet-bar-height;
+    flex-shrink: 0;
+}
+
+// Dot bullet
+.bullet-dot {
+    width: $bullet-dot-size;
+    height: $bullet-dot-size;
+    border-radius: 100% !important;
+}
+
+// Vertical bullet
+.bullet-vertical {
+    width: $bullet-bar-height;
+    height: $bullet-bar-width;
+}
+
+// Vertical line
+.bullet-line {
+    width: $bullet-line-width;
+    height: $bullet-line-height;
+    border-radius: 0;
+}

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

@@ -0,0 +1,7 @@
+//
+// Buttons
+//
+
+// Import Dependencies
+@import "buttons/base";
+@import "buttons/theme";