@soyfri/template 1.0.1 → 1.0.3

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

@@ -0,0 +1,332 @@
+//
+// CSS Variables
+//
+
+:root {
+    // Breakpoints
+    @each $breakpoint, $value in $grid-breakpoints {
+        --#{$prefix}#{$breakpoint}:#{$value};
+    }
+
+    // Keenthemes scrollbar component 
+    --#{$prefix}scrollbar-size: #{$scrollbar-size};
+    --#{$prefix}scrollbar-overlay-size: #{$scrollbar-overlay-size};
+    --#{$prefix}scrollbar-overlay-space: #{$scrollbar-overlay-space};
+
+    // Bootstrap general    
+    --#{$prefix}white-bg-rgb: #{to-rgb($white)};
+    --#{$prefix}black-bg-rgb: #{to-rgb($black)};
+}
+
+@include color-mode(light) {
+    // Bootstrap muted color
+    --#{$prefix}text-muted: #{$text-muted};
+
+    // Grey colors
+    @each $name, $value in $grays {
+        --#{$prefix}gray-#{$name}: #{$value};
+        --#{$prefix}gray-#{$name}-rgb: #{to-rgb($value)};
+    }
+
+    // Contextual colors
+    @each $name, $value in $theme-colors {
+        --#{$prefix}#{$name}: #{$value};
+    }
+
+    // Contextual active state colors
+    @each $name, $value in $theme-active-colors {
+        --#{$prefix}#{$name}-active: #{$value};
+    }
+
+    // Contextual light state colors
+    @each $name, $value in $theme-light-colors {
+        --#{$prefix}#{$name}-light: #{$value};
+    }
+
+    // Contextual inverse state colors
+    @each $name, $value in $theme-inverse-colors {
+        --#{$prefix}#{$name}-inverse: #{$value};
+    }
+
+    // Contextual clarity state colors
+    @each $name, $value in $theme-clarity-colors {
+        --#{$prefix}#{$name}-clarity: #{$value};
+    }
+
+    // Contextual rbg colors
+    @each $name, $value in $theme-colors {
+        --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
+    }
+
+    // Text colors
+    @each $name, $value in $theme-text-colors {
+        --#{$prefix}text-#{$name}: #{$value};
+    }
+
+    // Components
+    --#{$prefix}border-color: #{$border-color};
+    --#{$prefix}border-dashed-color: #{$border-dashed-color};
+
+    --#{$prefix}component-active-color: #{$component-active-color};
+    --#{$prefix}component-active-bg: #{$component-active-bg};
+    --#{$prefix}component-hover-color: #{$component-hover-color};
+    --#{$prefix}component-hover-bg: #{$component-hover-bg};
+    --#{$prefix}component-checked-color: #{$component-checked-color};
+    --#{$prefix}component-checked-bg: #{$component-checked-bg};
+
+    // Box shadow
+    --#{$prefix}box-shadow-xs: #{$box-shadow-xs};
+    --#{$prefix}box-shadow-sm: #{$box-shadow-sm};
+    --#{$prefix}box-shadow: #{$box-shadow};
+    --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
+
+    // Forms
+    --#{$prefix}input-bg: #{$input-bg};
+    --#{$prefix}input-color: #{$input-color};
+    --#{$prefix}input-solid-color: #{$input-solid-color};
+    --#{$prefix}input-solid-bg: #{$input-solid-bg};
+    --#{$prefix}input-solid-bg-focus: #{$input-solid-bg-focus};
+    --#{$prefix}input-solid-placeholder-color: #{$input-solid-placeholder-color};
+
+    // Card
+    --#{$prefix}root-card-box-shadow: #{$card-box-shadow};
+    --#{$prefix}root-card-border-color: #{$card-border-color};
+
+    // Tooltip
+    --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow-dark};
+
+    // Table
+    --#{$prefix}table-striped-bg: #{$table-striped-bg};
+    --#{$prefix}table-loading-message-box-shadow: #{$table-loading-message-box-shadow};
+
+    // Dropdowns
+    --#{$prefix}dropdown-bg: #{$dropdown-bg};
+    --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
+
+    // Code
+    --#{$prefix}code-bg: #{$code-bg};
+    --#{$prefix}code-shadow: #{$code-shadow};
+    --#{$prefix}code-border-color: #{$code-border-color};
+    --#{$prefix}code-color: #{$code-color};  
+
+    // Symbol
+    --#{$prefix}symbol-label-color: #{$symbol-label-color};
+    --#{$prefix}symbol-label-bg: #{$symbol-label-bg};
+    --#{$prefix}symbol-border-color: #{$symbol-border-color};   
+
+    // Bullet
+    --#{$prefix}bullet-bg-color: #{$bullet-bg-color};
+
+    // Scrolltop
+    --#{$prefix}scrolltop-opacity: #{$scrolltop-opacity};
+    --#{$prefix}scrolltop-opacity-on: #{$scrolltop-opacity-on};
+    --#{$prefix}scrolltop-opacity-hover: #{$scrolltop-opacity-hover};
+    --#{$prefix}scrolltop-box-shadow: #{$scrolltop-box-shadow};
+    --#{$prefix}scrolltop-bg-color: #{$scrolltop-bg-color};
+    --#{$prefix}scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover};
+    --#{$prefix}scrolltop-icon-color: #{$scrolltop-icon-color};
+    --#{$prefix}scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover};
+
+    // Keenthemes drawer component
+    --#{$prefix}drawer-box-shadow: #{$drawer-box-shadow};
+    --#{$prefix}drawer-bg-color: #{$drawer-bg-color};
+    --#{$prefix}drawer-overlay-bg-color: #{$drawer-overlay-bg-color};
+
+    // Keenthemes menu component
+    --#{$prefix}menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow};
+    --#{$prefix}menu-dropdown-bg-color: #{$menu-dropdown-bg-color};
+    --#{$prefix}menu-heading-color: #{$menu-heading-color};
+    --#{$prefix}menu-link-color-hover: #{$menu-link-color-hover};
+    --#{$prefix}menu-link-color-show: #{$menu-link-color-show};
+    --#{$prefix}menu-link-color-here: #{$menu-link-color-here};
+    --#{$prefix}menu-link-color-active: #{$menu-link-color-active};
+    --#{$prefix}menu-link-bg-color-hover: #{$menu-link-bg-color-hover};
+    --#{$prefix}menu-link-bg-color-show: #{$menu-link-bg-color-show};
+    --#{$prefix}menu-link-bg-color-here: #{$menu-link-bg-color-here};
+    --#{$prefix}menu-link-bg-color-active: #{$menu-link-bg-color-active};    
+
+    // Keenthemes scrollbar component 
+    --#{$prefix}scrollbar-color: #{$scrollbar-color};
+    --#{$prefix}scrollbar-hover-color: #{$scrollbar-hover-color};
+
+    // Keenthemes overlay component 
+    --#{$prefix}overlay-bg: #{$overlay-bg};
+
+    // Keenthemes blockui component
+    --#{$prefix}blockui-overlay-bg: #{$blockui-overlay-bg};
+
+    // Keenthemes rating component
+    --#{$prefix}rating-color-default: #{$rating-color-default};
+    --#{$prefix}rating-color-active: #{$rating-color-active};
+
+    // Keenthemes ribbon component 
+    --#{$prefix}ribbon-label-box-shadow: #{$ribbon-label-box-shadow};
+    --#{$prefix}ribbon-label-bg: #{$ribbon-label-bg};
+    --#{$prefix}ribbon-label-border-color: #{$ribbon-label-border-color};
+    --#{$prefix}ribbon-clip-bg: #{$ribbon-clip-bg}; 
+
+    // Engage panel
+    --#{$prefix}engage-btn-bg: #{$engage-btn-bg};
+    --#{$prefix}engage-btn-box-shadow: #{$engage-btn-box-shadow};
+    --#{$prefix}engage-btn-border-color: #{$engage-btn-border-color};
+    --#{$prefix}engage-btn-color: #{$engage-btn-color};
+    --#{$prefix}engage-btn-icon-color: #{$engage-btn-icon-color};
+    --#{$prefix}engage-btn-color-active: #{$engage-btn-color-active};
+}
+
+@include color-mode(dark) {
+    // Bootstrap muted color
+    --#{$prefix}text-muted: #{$text-muted-dark};
+
+    // Grey colors
+    @each $name, $value in $grays-dark {
+        --#{$prefix}gray-#{$name}: #{$value};
+        --#{$prefix}gray-#{$name}-rgb: #{to-rgb($value)};
+    }
+
+    // Contextual colors
+    @each $name, $value in $theme-colors-dark {
+        --#{$prefix}#{$name}: #{$value};
+    }
+
+    // Contextual active state colors
+    @each $name, $value in $theme-active-colors-dark {
+        --#{$prefix}#{$name}-active: #{$value};
+    }
+
+    // Contextual light state colors
+    @each $name, $value in $theme-light-colors-dark {
+        --#{$prefix}#{$name}-light: #{$value};
+    }
+
+    // Contextual inverse state colors
+    @each $name, $value in $theme-inverse-colors-dark {
+        --#{$prefix}#{$name}-inverse: #{$value};
+    }
+
+    // Contextual clarity state colors
+    @each $name, $value in $theme-clarity-colors-dark {
+        --#{$prefix}#{$name}-clarity: #{$value};
+    }
+
+    // Contextual rbg colors
+    @each $name, $value in $theme-colors-dark {
+        --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
+    }
+
+    // Text colors
+    @each $name, $value in $theme-text-colors-dark {
+        --#{$prefix}text-#{$name}: #{$value};
+    }
+    
+    // Components
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-dashed-color: #{$border-dashed-color-dark};
+
+    --#{$prefix}component-active-color: #{$component-active-color-dark};
+    --#{$prefix}component-active-bg: #{$component-active-bg-dark};
+    --#{$prefix}component-hover-color: #{$component-hover-color-dark};
+    --#{$prefix}component-hover-bg: #{$component-hover-bg-dark};
+    --#{$prefix}component-checked-color: #{$component-checked-color-dark};
+    --#{$prefix}component-checked-bg: #{$component-checked-bg-dark};
+
+    // Box shadow
+    --#{$prefix}box-shadow-xs: #{$box-shadow-xs-dark};
+    --#{$prefix}box-shadow-sm: #{$box-shadow-sm-dark};
+    --#{$prefix}box-shadow: #{$box-shadow-dark};
+    --#{$prefix}box-shadow-lg: #{$box-shadow-lg-dark};
+
+    // Forms
+    --#{$prefix}input-color: #{$input-color};
+    --#{$prefix}input-bg: #{$input-bg};
+    --#{$prefix}input-solid-color: #{$input-solid-color};
+    --#{$prefix}input-solid-bg: #{$input-solid-bg};
+    --#{$prefix}input-solid-bg-focus: #{$input-solid-bg-focus};
+    --#{$prefix}input-solid-placeholder-color: #{$input-solid-placeholder-color};
+
+    // Tooltip
+    --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow-dark};
+
+    // Card
+    --#{$prefix}root-card-box-shadow: #{$card-box-shadow-dark};
+    --#{$prefix}root-card-border-color: #{$card-border-color-dark};
+
+    // Table
+    --#{$prefix}table-striped-bg: #{$table-striped-bg-dark};
+    --#{$prefix}table-loading-message-box-shadow: #{$table-loading-message-box-shadow-dark};
+
+    // Dropdowns
+    --#{$prefix}dropdown-bg: #{$dropdown-bg-dark};
+    --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow-dark};
+
+    // Code
+    --#{$prefix}code-bg: #{$code-bg-dark};
+    --#{$prefix}code-shadow: #{$code-shadow-dark};
+    --#{$prefix}code-border-color: #{$code-border-color-dark};
+    --#{$prefix}code-color: #{$code-color-dark};  
+
+    // Symbol
+    --#{$prefix}symbol-label-color: #{$symbol-label-color-dark};
+    --#{$prefix}symbol-label-bg: #{$symbol-label-bg-dark};
+    --#{$prefix}symbol-border-color: #{$symbol-border-color-dark};   
+
+    // Bullet
+    --#{$prefix}bullet-bg-color: #{$bullet-bg-color-dark};
+
+    // Scrolltop
+    --#{$prefix}scrolltop-opacity: #{$scrolltop-opacity-dark};
+    --#{$prefix}scrolltop-opacity-on: #{$scrolltop-opacity-on-dark};
+    --#{$prefix}scrolltop-opacity-hover: #{$scrolltop-opacity-hover-dark};
+    --#{$prefix}scrolltop-box-shadow: #{$scrolltop-box-shadow-dark};
+    --#{$prefix}scrolltop-bg-color: #{$scrolltop-bg-color-dark};
+    --#{$prefix}scrolltop-bg-color-hover: #{$scrolltop-bg-color-hover-dark};
+    --#{$prefix}scrolltop-icon-color: #{$scrolltop-icon-color-dark};
+    --#{$prefix}scrolltop-icon-color-hover: #{$scrolltop-icon-color-hover-dark};
+
+    // Keenthemes drawer component
+    --#{$prefix}drawer-box-shadow: #{$drawer-box-shadow-dark};
+    --#{$prefix}drawer-bg-color: #{$drawer-bg-color-dark};
+    --#{$prefix}drawer-overlay-bg-color: #{$drawer-overlay-bg-color-dark};
+
+    // Keenthemes menu component
+    --#{$prefix}menu-dropdown-box-shadow: #{$menu-dropdown-box-shadow-dark};
+    --#{$prefix}menu-dropdown-bg-color: #{$menu-dropdown-bg-color-dark};
+    --#{$prefix}menu-heading-color: #{$menu-heading-color-dark};
+    
+    --#{$prefix}menu-link-color-hover: #{$menu-link-color-hover-dark};
+    --#{$prefix}menu-link-color-show: #{$menu-link-color-show-dark};
+    --#{$prefix}menu-link-color-here: #{$menu-link-color-here-dark};
+    --#{$prefix}menu-link-color-active: #{$menu-link-color-active-dark};
+    --#{$prefix}menu-link-bg-color-hover: #{$menu-link-bg-color-hover-dark};
+    --#{$prefix}menu-link-bg-color-show: #{$menu-link-bg-color-show-dark};
+    --#{$prefix}menu-link-bg-color-here: #{$menu-link-bg-color-here-dark};
+    --#{$prefix}menu-link-bg-color-active: #{$menu-link-bg-color-active-dark};
+    
+    // Keenthemes scrollbar component 
+    --#{$prefix}scrollbar-color: #{$scrollbar-color-dark};
+    --#{$prefix}scrollbar-hover-color: #{$scrollbar-hover-color-dark};
+
+    // Keenthemes overlay component 
+    --#{$prefix}overlay-bg: #{$overlay-bg-dark};
+
+    // Keenthemes blockui component
+    --#{$prefix}blockui-overlay-bg: #{$blockui-overlay-bg-dark};
+
+    // Keenthemes rating component
+    --#{$prefix}rating-color-default: #{$rating-color-default-dark};
+    --#{$prefix}rating-color-active: #{$rating-color-active-dark};
+
+    // Keenthemes ribbon component 
+    --#{$prefix}ribbon-label-box-shadow: #{$ribbon-label-box-shadow-dark};
+    --#{$prefix}ribbon-label-bg: #{$ribbon-label-bg-dark};
+    --#{$prefix}ribbon-label-border-color: #{$ribbon-label-border-color-dark};
+    --#{$prefix}ribbon-clip-bg: #{$ribbon-clip-bg-dark};  
+
+    // Engage panel
+    --#{$prefix}engage-btn-bg: #{$engage-btn-bg-dark};
+    --#{$prefix}engage-btn-box-shadow: #{$engage-btn-box-shadow-dark};
+    --#{$prefix}engage-btn-border-color: #{$engage-btn-border-color-dark};
+    --#{$prefix}engage-btn-color: #{$engage-btn-color-dark};
+    --#{$prefix}engage-btn-icon-color: #{$engage-btn-icon-color-dark};
+    --#{$prefix}engage-btn-color-active: #{$engage-btn-color-active-dark};
+}

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

@@ -0,0 +1,47 @@
+//
+// Rotate
+// 
+
+
+$rotate-transition: transform 0.3s ease;
+
+.rotate {
+    display: inline-flex;
+    align-items: center;
+}
+
+@each $value in (90, 180, 270) {
+    .rotate-#{$value} {
+        transition: $rotate-transition;
+        backface-visibility: hidden;
+        will-change: transform;
+
+        .collapsible:not(.collapsed)> & ,
+        .show > &,
+        .active > & {
+            transform: rotateZ(#{$value}deg);
+            transition: $rotate-transition;
+
+            [direction="rtl"] & {
+                transform: rotateZ(-#{$value}deg);
+            }
+        }
+    }
+
+    .rotate-n#{$value} {
+        transition: $rotate-transition;
+        backface-visibility: hidden;
+        will-change: transform;
+
+        .collapsible:not(.collapsed)> &,
+        .show > &,
+        .active > & {
+            transform: rotateZ(-#{$value}deg);
+            transition: $rotate-transition;
+
+            [direction="rtl"] & {
+                transform: rotateZ(#{$value}deg);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,119 @@
+//
+// Scroll
+//
+
+
+// Customize native scrollbars only for desktop mode
+@include media-breakpoint-up(lg) {
+    main,
+    span,
+    ol,
+    ul,
+    pre,
+    div {
+        // Firefox
+        scrollbar-width: thin;
+
+        // Webkit
+        &::-webkit-scrollbar {            
+            width: var(--#{$prefix}scrollbar-size);
+            height: var(--#{$prefix}scrollbar-size);
+        }
+
+        ::-webkit-scrollbar-track {
+           background-color: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            @include border-radius(var(--#{$prefix}scrollbar-size));
+        }
+
+        // Default color
+        @include scrollbar-color(var(--#{$prefix}scrollbar-color), var(--#{$prefix}scrollbar-hover-color));
+    }
+}
+
+// Scroll
+.scroll,
+.hover-scroll,
+.hover-scroll-overlay {
+    overflow: scroll;
+    position: relative;
+
+    // Tablet & mobile modes
+    @include media-breakpoint-down(lg) {
+        overflow: auto;
+    }
+}
+
+.scroll-x,
+.hover-scroll-x,
+.hover-scroll-overlay-x {
+    overflow-x: scroll;
+    position: relative;
+
+    // Tablet & mobile modes
+    @include media-breakpoint-down(lg) {
+        overflow-x: auto;
+    }
+}
+
+.scroll-y,
+.hover-scroll-y,
+.hover-scroll-overlay-y {
+    overflow-y: scroll;
+    position: relative;
+
+    // Tablet & mobile modes
+    @include media-breakpoint-down(lg) {
+        overflow-y: auto;
+    }
+}
+
+.hover-scroll,
+.hover-scroll-overlay,
+.hover-scroll-x,
+.hover-scroll-overlay-x,
+.hover-scroll-y,
+.hover-scroll-overlay-y {
+    @include scrollbar-color(transparent, var(--#{$prefix}scrollbar-color));
+}
+
+// Utilities
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .scroll#{$infix}-ps {
+            padding-left: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-ms {
+            margin-left: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-mb {
+            margin-bottom: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-pe {
+            padding-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-me {
+            margin-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-px {
+            padding-left: var(--#{$prefix}scrollbar-size) !important;
+            padding-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-mx {
+            margin-left: var(--#{$prefix}scrollbar-size) !important;
+            margin-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+    }
+}
+
+  

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

@@ -0,0 +1,69 @@
+//
+// Scrolltop
+//
+
+.scrolltop {    
+    position: fixed;
+    display: none;
+    cursor: pointer;
+    z-index: $scrolltop-z-index;
+    justify-content: center;
+    align-items: center;
+    width: $scrolltop-size;
+    height: $scrolltop-size;
+    bottom: $scrolltop-bottom;
+    right: $scrolltop-end;    
+    background-color: var(--#{$prefix}scrolltop-bg-color);
+    box-shadow: var(--#{$prefix}scrolltop-box-shadow);
+    opacity: $scrolltop-opacity;
+    transition: $transition-link;
+    @include border-radius($border-radius);
+
+    .svg-icon {
+        @include svg-icon-size(24px);
+        color: var(--#{$prefix}scrolltop-icon-color);
+    }
+
+    > i {
+        font-size: 1.3rem;
+        color: var(--#{$prefix}scrolltop-icon-color);
+    }
+
+    &:hover {
+        background-color: var(--#{$prefix}scrolltop-bg-color-hover);
+
+        .svg-icon,
+        i {
+            color: var(--#{$prefix}scrolltop-icon-color-hover);
+        }
+    }
+
+    [data-kt-scrolltop="on"] & {
+        opacity: var(--#{$prefix}scrolltop-opacity-on);
+        animation: animation-scrolltop .4s ease-out 1;
+        display: flex;
+
+        &:hover {
+            transition: $transition-link;
+            opacity: var(--#{$prefix}scrolltop-opacity-hover);
+        }
+    }
+
+    
+}
+
+// Tablet & Mobile Modess
+@include media-breakpoint-down(lg) {
+    .scrolltop { 
+        bottom: $scrolltop-bottom-mobile;
+        right: $scrolltop-end-mobile;    
+        width: $scrolltop-size-mobile;
+        height: $scrolltop-size-mobile;
+    }
+}
+
+// Animations
+@keyframes animation-scrolltop {
+    from   { margin-bottom: -15px; }
+    to {  margin-bottom: 0; }
+}

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

@@ -0,0 +1,66 @@
+//
+// Separator
+//
+
+.separator {
+    display: block;
+    height: 0;
+    border-bottom: 1px solid var(--#{$prefix}gray-100);
+
+    &.separator-dotted {
+        border-bottom-style: dotted;
+        border-bottom-color: var(--#{$prefix}border-dashed-color);
+    }
+
+    &.separator-dashed {
+        border-bottom-style: dashed;
+        border-bottom-color: var(--#{$prefix}border-dashed-color);
+    }
+
+    &.separator-content {
+        display: flex;
+        align-items: center;
+        border-bottom: 0;
+        text-align: center;
+
+        &::before,
+        &::after {
+            content: " ";
+            width: 50%;
+            border-bottom: 1px solid var(--#{$prefix}border-color);
+        }
+
+        &::before{
+            margin-right: 1.25rem;
+        }
+
+        &::after{
+            margin-left: 1.25rem;
+        }
+
+        &.separator-dotted {
+            &::before,
+            &::after {
+                border-bottom-style: dotted;
+                border-bottom-color: var(--#{$prefix}border-dashed-color);
+            }
+        }
+
+        &.separator-dashed {
+            &::before,
+            &::after {
+                border-bottom-style: dashed;
+                border-bottom-color: var(--#{$prefix}border-dashed-color);
+            }
+        }
+
+        @each $color, $value in $theme-colors {
+            &.border-#{$color}{
+                &::before,
+                &::after {
+                    border-color: $value !important; 
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+//
+// Shape
+// 
+
+.xehagon {
+    //$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
+    @include shape(6);
+}
+
+.octagon {
+    //$edges-number: 6, $main-radius: 30%, $rounding-radius: 10%, $rotated: true, $precision: 20
+    @include shape(8);
+}

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

@@ -0,0 +1,8 @@
+//
+// Stepper
+//
+
+// Import Dependencies
+@import "stepper/base";
+@import "stepper/pills";
+@import "stepper/links";

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

@@ -0,0 +1,30 @@
+//
+// SVG Icon
+//
+
+.svg-icon {
+    line-height: 1;
+    color: var(--#{$prefix}text-muted);
+    @include svg-icon-size(get($font-sizes, 5));
+
+    // Theme colors
+    @each $name, $color in $theme-text-colors {
+        &.svg-icon-#{$name} {
+            color: var(--#{$prefix}text-#{$name});
+        }
+    }
+
+    // Responsive icon sizes
+    @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 {
+                &.svg-icon#{$infix}-#{$name} {
+                    @include svg-icon-size($value, true);
+                }
+            }
+        }
+    }
+}