@soyfri/template 1.0.1 → 1.0.4

package/dist/assets/sass/core/components/helpers/_borders.scss

@@ -0,0 +1,123 @@
+//
+// Border
+//
+
+.border-active:not(.active):not(:active):not(:hover):not(:focus) {
+    border-color: transparent !important;
+}
+
+.border-hover:not(:hover):not(:focus):not(.active):not(:active) {
+    cursor: pointer;
+    border-color: transparent !important;
+}
+
+// Gray border colors
+@each $name, $value in $grays {
+	// Initial
+	.border-gray-#{$name} {
+		border-color: var(--#{$prefix}gray-#{$name}) !important;
+	}
+}
+
+// Hover border colors
+@each $name, $value in $theme-colors {
+    .border-#{$name}-clarity {
+        border-color: var(--#{$prefix}#{$name}-clarity) !important;
+    }
+        
+    .border-hover-#{$name}:hover {
+        border-color: var(--#{$prefix}#{$name}) !important;
+    }
+
+    .border-active-#{$name}.active {
+        border-color: var(--#{$prefix}#{$name}) !important;
+    }   
+}
+
+.border-hover-primary-clarity:hover,
+.border-active-primary-clarity.active {
+    border-color: var(--#{$prefix}primary-clarity) !important;
+}
+
+// Hover transparent
+.border-hover-transparent:hover {
+    border-color: transparent !important;
+}
+
+// Dashed style
+.border-dashed {
+    border-style: dashed !important;
+    border-color: var(--#{$prefix}border-dashed-color);
+}
+
+.border-top-dashed {
+    border-top-style: dashed !important;
+}
+
+.border-bottom-dashed {
+    border-bottom-style: dashed !important;
+}
+
+.border-start-dashed {
+    border-left-style: dashed !important;
+}
+
+.border-end-dashed {
+    border-right-style: dashed !important;
+}
+
+// Dotted style
+.border-dotted {
+    border-style: dotted !important;
+}
+
+.border-top-dotted {
+    border-top-style: dotted !important;
+}
+
+.border-bottom-dotted {
+    border-bottom-style: dotted !important;
+}
+
+.border-start-dotted {
+    border-left-style: dotted !important;
+}
+
+.border-end-dotted {
+    border-right-style: dotted !important;
+}
+
+// Border transparent
+.border-transparent {
+    border-color: transparent !important;
+}
+
+// Border body
+.border-body {
+    border-color: var(--#{$prefix}body-bg) !important;
+}
+
+// Border radiuses
+.rounded-top-0 {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+
+.rounded-bottom-0 {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.rounded-start-0 {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
+.rounded-end-0 {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+.rounded-circle {
+    border-radius: 50% !important;
+}

package/dist/assets/sass/core/components/helpers/_flex.scss

@@ -0,0 +1,57 @@
+//
+// Flex Utilities
+//
+
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .flex#{$infix}-root {
+			flex: 1;
+		}
+
+        .flex#{$infix}-column-auto {
+            flex: none;
+        }
+
+        .flex#{$infix}-column-fluid {
+            flex: 1 0 auto;
+        }
+
+        .flex#{$infix}-row-auto {
+            flex: 0 0 auto;
+        }
+
+        .flex#{$infix}-row-fluid {
+            flex: 1 auto;
+            min-width: 0;
+        }
+
+    	.flex#{$infix}-center {
+    		justify-content: center;
+    		align-items: center;
+    	}
+
+        .flex#{$infix}-start {
+    		justify-content: start;
+    		align-items: start;
+    	}
+
+        .flex#{$infix}-end {
+    		justify-content: flex-end;
+    		align-items: flex-end;
+    	}
+
+        .flex#{$infix}-stack {
+			justify-content: space-between;
+    		align-items: center;
+		}
+    }
+}
+
+.flex-equal {
+    flex-grow: 1;
+    flex-basis: 0;
+    flex-shrink: 0;
+}

package/dist/assets/sass/core/components/helpers/_opacity.scss

@@ -0,0 +1,18 @@
+//
+// Opacity
+//
+
+@each $name, $value in $opacity-values {
+	// Active state
+	.opacity-active-#{$name}.active {
+		opacity: #{$value} !important;
+	}
+
+	// Active and hover states
+	.opacity-state-#{$name} {
+		&:hover,
+		&.active {
+			opacity: #{$value} !important;
+		}
+	}
+}

package/dist/assets/sass/core/components/helpers/_shadow.scss

@@ -0,0 +1,19 @@
+//
+// Shadow
+//
+
+.shadow-xs {
+    box-shadow: var(--#{$prefix}box-shadow-xs);
+}
+
+.shadow-sm {
+    box-shadow: var(--#{$prefix}box-shadow-sm);
+}
+
+.shadow {
+    box-shadow: var(--#{$prefix}box-shadow);
+}
+
+.shadow-lg {
+    box-shadow: var(--#{$prefix}box-shadow-lg);
+}

package/dist/assets/sass/core/components/helpers/_text.scss

@@ -0,0 +1,146 @@
+//
+// Text
+//
+
+// Text colors
+@each $name, $color in $theme-text-colors {
+    // Base color
+    .text-#{$name} {
+        color: var(--#{$prefix}text-#{$name}) !important;
+    }
+
+    // Inverse color
+    @if (theme-inverse-color($name)) {
+        .text-inverse-#{$name} {
+            color: var(--#{$prefix}#{$name}-inverse) !important;
+        }
+    }
+
+    @if (theme-light-color($name)) {
+        // Light colors
+        .text-light-#{$name} {
+            color: var(--#{$prefix}#{$name}-light) !important;
+        }
+    }
+
+    // Hover
+    .text-hover-#{$name} {
+        transition: $transition-link;
+
+        i {
+            transition: $transition-link;
+        }
+
+        &:hover {
+            transition: $transition-link;
+            color: var(--#{$prefix}text-#{$name}) !important;
+
+            i {
+                transition: $transition-link;
+				color: var(--#{$prefix}text-#{$name}) !important;
+			}
+
+			.svg-icon {
+				color: var(--#{$prefix}text-#{$name}) !important;
+			}
+        }
+    }
+
+    // Active
+    .text-active-#{$name} {
+        transition: $transition-link;        
+
+        i {
+            transition: $transition-link;
+        }
+
+        &.active {
+            transition: $transition-link;
+            color: var(--#{$prefix}text-#{$name}) !important;
+            
+            i {
+                transition: $transition-link;
+                color: var(--#{$prefix}text-#{$name}) !important;
+            }
+    
+            .svg-icon {
+                color: var(--#{$prefix}text-#{$name}) !important;
+            }
+        }
+    }
+}
+
+// Parent hover
+.parent-hover {
+    @each $name, $color in $theme-text-colors {
+        .parent-hover-#{$name} {
+            transition: $transition-link;
+        }
+
+        &:hover {
+            .parent-hover-#{$name} {
+                transition: $transition-link;
+                color: var(--#{$prefix}text-#{$name}) !important;
+            }
+        }    
+    }
+}
+
+// Parent active
+.parent-active {
+    @each $name, $color in $theme-text-colors {
+        .parent-active-#{$name} {
+            transition: $transition-link;
+        }
+
+        &.active {
+            .parent-active-#{$name} {
+                transition: $transition-link;
+                color: var(--#{$prefix}text-#{$name}) !important;
+            }
+        }    
+    }
+}
+
+// Text transparent
+.text-transparent {
+    color: transparent;
+}
+
+// Cursor pointer
+.cursor-pointer {
+    cursor: pointer;
+}
+
+// Cursor default
+.cursor-default {
+    cursor: default;
+}
+// Cursor move
+.cursor-move {
+    cursor: move;
+}
+
+// Icons
+i {
+    &.bi,
+    &[class^="fonticon-"],
+    &[class*=" fonticon-"],
+    &[class^="fa-"],
+    &[class*=" fa-"],
+    &[class^="la-"],
+    &[class*=" la-"] {
+        line-height: 1;
+        font-size: 1rem;
+        color: var(--#{$prefix}text-muted);        
+    }   
+}
+
+// Link transition
+a {
+    transition: $transition-link;
+
+    &:hover {
+        transition:$transition-link;
+    }
+}

package/dist/assets/sass/core/components/helpers/_transform.scss

@@ -0,0 +1,8 @@
+//
+// Transform
+//
+
+.transform-90 {
+    transform: rotate(90deg);
+    transform-origin: right top;
+}

package/dist/assets/sass/core/components/menu/_base.scss

@@ -0,0 +1,316 @@
+//
+// Menu Base
+//
+
+// Menu group
+.menu-group {
+    display: flex;
+}
+
+// Menu & wrapper
+.menu,
+.menu-wrapper {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+// Sub inner
+.menu-inner {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+// Sub menu
+.menu-sub {
+    display: none;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    flex-direction: column;
+}
+
+// Menu item
+.menu-item {
+    display: block;
+    padding: $menu-item-padding-y $menu-item-padding-x;
+
+    // Menu Link
+    .menu-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        padding: 0;
+        flex: 0 0 100%;
+        padding: $menu-link-padding-y $menu-link-padding-x;
+        transition: none;
+        outline: none !important;
+
+        .menu-icon {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: $menu-icon-size;
+            margin-right: $menu-icon-space;
+
+            i,
+            .svg-icon {
+                line-height: 1;
+            }
+        }
+
+        .menu-bullet {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: $menu-bullet-size;
+            margin-right: $menu-bullet-space;
+        }
+
+        .menu-title {
+            display: flex;
+            align-items: center;
+            flex-grow: 1;
+        }
+
+        .menu-badge {
+            display: flex;
+            align-items: center;
+            flex-shrink: 0;
+            margin-left: $menu-badge-space;
+        }
+
+        .menu-arrow {
+            display: flex;
+            align-items: stretch;
+            position: relative;
+            overflow: hidden;
+            flex-shrink: 0;
+            margin-left: $menu-arrow-space;
+            width: $menu-arrow-size;
+            height: $menu-arrow-size;
+
+            &:after {
+                display: block;
+                width: 100%;
+                content: " ";
+                will-change: transform;
+                background-size: 100% 100%;
+                @include svg-bg-icon(arrow-start, var(--#{$prefix}text-muted));
+                /*rtl:begin:remove*/
+                @include svg-bg-icon(arrow-end, var(--#{$prefix}text-muted));
+                /*rtl:end:remove*/
+            }
+        }
+    }
+
+    // Menu Content
+    .menu-content {
+        padding: $menu-link-padding-y $menu-link-padding-x;
+    }
+}
+
+// Accordion arrows
+.menu-item {    
+    &.show {
+        .menu-link {
+            .menu-arrow:after {                
+                backface-visibility: hidden;
+                transition: $menu-accordion-arrow-transition;
+            }
+        }
+    }
+}
+
+// No wrap
+.menu-nowrap {
+    .menu-title,
+    .menu-link {
+        flex-wrap: nowrap;    
+        flex-shrink: 0;
+    }
+}
+
+// Center alignment
+.menu-center {
+    justify-content: center;
+}
+
+// Heading
+.menu-heading {
+    color: var(--#{$prefix}menu-heading-color);    
+}
+
+// Responsive 
+@each $direction in (up, down) {
+    @each $breakpoint in map-keys($grid-breakpoints) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        @if $infix and $direction == down {
+            $infix: $infix + "-" + $direction;
+        }
+
+        @include media-breakpoint-direction($direction, $breakpoint) {
+            // Accordion arrow
+            .menu-item.menu#{$infix}-accordion {
+                .menu-arrow:after {
+                    @include menu-link-arrow-rotate(90deg, -90deg);
+                }
+
+                &.showing:not(.menu-dropdown),
+                &.show:not(.hiding):not(.menu-dropdown) {
+                    > .menu-link {
+                        .menu-arrow:after {
+                            @include menu-link-arrow-rotate(-90deg, 90deg);
+                        }
+                    }
+                }
+            }
+
+            // Sub dropdown
+            .menu-sub#{$infix}-dropdown {
+                display: none;
+                border-radius: $menu-dropdown-border-radius;
+                background-color: var(--#{$prefix}menu-dropdown-bg-color);
+                box-shadow: var(--#{$prefix}menu-dropdown-box-shadow);
+                z-index: $menu-dropdown-z-index;
+
+                // Dropdown show
+                .show.menu-dropdown > &,
+                &.menu.show,
+                &.show[data-popper-placement] {
+                    display: flex;
+                    will-change: transform;
+                    
+                    // Animation
+                    @if ($menu-dropdown-animation == true) {
+                        // Move up
+                        animation: menu-sub-dropdown-animation-fade-in #{$menu-dropdown-animation-speed} ease 1, menu-sub-dropdown-animation-move-up #{$menu-dropdown-animation-speed} ease 1;
+                    }                    
+                }
+            }
+
+            // Sub accordion
+            .menu-sub#{$infix}-accordion {
+                display: none;
+
+                .show:not(.menu-dropdown) > &,
+                &.show {
+                    display: flex;
+                }
+            }
+
+            // Sub indention
+            .menu-sub#{$infix}-indention {
+                @include menu-sub-indention($menu-accordion-indention);
+
+                // Active link
+                .menu-item .menu-item .menu-link.active {
+                    margin-right: $menu-link-padding-x;
+                }
+            }
+
+            // Inline
+            .menu#{$infix}-inline {
+                display: flex;
+            }
+
+            // Reset link left & right paddings of level 1 menu links
+            .menu#{$infix}-fit {
+                > .menu-item {
+                    > .menu-content,
+                    > .menu-link {
+                        padding-left: 0 !important;
+                        padding-right: 0 !important;
+                    }
+                }
+            }
+
+            .menu#{$infix}-column {
+                flex-direction: column;
+                width: 100%;
+            }
+
+            .menu#{$infix}-row {
+                flex-direction: row;
+
+                > .menu-item {
+                    display: flex;
+                    align-items: center;
+
+                    > .menu-link {
+                        .menu-arrow:after {
+                            @include menu-link-arrow-rotate(90deg, -90deg);
+                        }
+                    }
+                }
+            }
+
+            // Border radiuses
+            .menu#{$infix}-rounded {
+                .menu-link {
+                    @include border-radius($menu-link-border-radius);
+                }
+            }
+
+            // Border radiuses
+            .menu#{$infix}-pill {
+                .menu-link {
+                    border-radius: 50px;
+                }
+            }
+
+            // Reset border radiuses
+            .menu#{$infix}-rounded-0 {
+                .menu-link {
+                    border-radius: 0 !important;
+                }
+            }
+        }
+    }
+}
+
+// Link indention
+.menu-link-indention {
+    .menu-item {
+        padding-top: 0;    
+        padding-bottom: 0;    
+    }
+        
+    @include menu-link-indention($menu-accordion-indention, $menu-link-padding-x);
+}
+
+// Menu animations
+@keyframes menu-sub-dropdown-animation-fade-in {
+    from   { 
+        opacity: 0; 
+    }
+
+    to { 
+        opacity: 1; 
+    }
+}
+
+@keyframes menu-sub-dropdown-animation-move-up {
+    from   { 
+        margin-top: #{$menu-dropdown-animation-move-offset};
+    }
+    
+    to { 
+        margin-top: 0;
+    }
+}
+
+@keyframes menu-sub-dropdown-animation-move-down {
+    from   { 
+        margin-bottom: #{$menu-dropdown-animation-move-offset};
+    }
+
+    to { 
+        margin-bottom: 0;
+    }
+}