@madj2k/fe-frontend-kit 2.0.0

package/sass/bootstrap-5.3.0/00_mixins/_page.scss

@@ -0,0 +1,261 @@
+/**! ==================================================
+ * Mixin page padding
+ * ================================================== */
+@use 'sass:math';
+
+/// Adds utility classes for enabling full-width containers with responsive page paddings.
+///
+/// This mixin generates classes that allow a container to break out of the standard Bootstrap layout
+/// while maintaining the grid system and applying consistent horizontal paddings based on breakpoints.
+///
+/// The generated utility classes follow this logic:
+/// - `fullwidth-{breakpoint}-{value}`
+/// - `fullwidth-{value}`
+///
+/// Possible values:
+/// - `0` disables full-width behavior (default layout)
+/// - `1` enables full-width behavior (stretched content with padding)
+///
+/// Use cases include:
+/// - Wrapping containers
+/// - Creating full-width sections inside grid columns
+/// - Layered structures for positioning background images or additional layout control
+///
+/// @group Layout
+///
+/// @param {String} $page-wrap-class - The base class used to wrap the entire page (for context-aware styling). Defaults to `'.page'`.
+/// @param {String} $wrap-class - The base utility class prefix for full-width behavior. Defaults to `'.fullwidth'`.
+/// @param {Length} $default-padding - The default horizontal padding applied when full-width is active. Defaults to `16px`.
+///
+/// @example html
+///   <!-- 1) Around a Bootstrap container -->
+///   <div class="fullwidth-1 fullwidth-md-0 fullwidth-xl-1">
+///     <div class="container-xxl">
+///       [...]
+///     </div>
+///   </div>
+///
+/// @example html
+///   <!-- 1.1) With inner fullwidth container (e.g. for background images) -->
+///   <div class="fullwidth-1 fullwidth-md-0 fullwidth-xl-1">
+///     <div class="fullwidth-inner">
+///       <img src="..." alt="">
+///     </div>
+///     <div class="container-xxl">
+///       [...]
+///     </div>
+///   </div>
+///
+/// @example html
+///   <!-- 1.2) Inside a positioned element with padding wrapper -->
+///   <div class="fullwidth-1 fullwidth-md-0 fullwidth-xl-1">
+///     <div class="fullwidth-inner position-relative">
+///       <div class="position-absolute">
+///         <div class="fullwidth-padding">
+///           <div class="container-xxl">
+///             [...]
+///           </div>
+///         </div>
+///       </div>
+///     </div>
+///   </div>
+///
+/// @example html
+///   <!-- 2) Inside a column (e.g. col-12) -->
+///   <div class="container-xxl">
+///     <div class="row">
+///       <div class="col-12 col-lg-7 order-lg-3">
+///         <div class="fullwidth-1 fullwidth-md-0 fullwidth-xl-1">
+///           [...]
+///         </div>
+///       </div>
+///     </div>
+///   </div>
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin page-padding(
+    $page-wrap-class: '.page',
+    $wrap-class: '.fullwidth',
+    $default-padding: 16px
+) {
+
+    #{$page-wrap-class} {
+
+        /** default settings without breakpoints **/
+        @include page-padding-only($default-padding);
+
+         /** for usage as wrap around a container */
+        #{$wrap-class}-1 {
+            @include page-padding-container($default-padding);
+
+            #{$wrap-class}-inner {
+                @include page-padding-inner($default-padding);
+            }
+
+            /** addition class for usage with position:absolute */
+            #{$wrap-class}-padding {
+                @include page-padding-only($default-padding);
+            }
+        }
+
+        /** for usage as inner wrap of a col */
+        .row #{$wrap-class}-1 {
+            @include page-padding-row($default-padding);
+        }
+
+        /** reset */
+        #{$wrap-class}-0,
+        .row #{$wrap-class}-0{
+            @include page-padding-row-reset();
+        }
+
+        #{$wrap-class}-0 {
+            #{$wrap-class}-inner{
+                @include page-padding-inner-reset();
+            }
+
+            /** addition class for usage with position:absolute */
+            #{$wrap-class}-padding {
+                @include page-padding-only-reset();
+            }
+        }
+
+        /** default settings without breakpoint in class-name, but with different paddings/margins depending on breakpoint */
+        @each $breakpoint, $padding-x in $page-padding {
+
+            @include media-breakpoint-up($breakpoint) {
+
+                /** for usage as wrap around a container */
+                #{$wrap-class}-1 {
+                    @include page-padding-container($padding-x);
+
+                    #{$wrap-class}-inner {
+                        @include page-padding-inner($padding-x);
+                    }
+
+                    /** addition class for usage with position:absolute */
+                    #{$wrap-class}-padding {
+                        @include page-padding-only($default-padding);
+                    }
+                }
+
+                /** for usage as inner wrap of a col */
+                .row #{$wrap-class}-1 {
+                    @include page-padding-row($padding-x);
+                }
+
+                /** reset */
+                #{$wrap-class}-0,
+               .row #{$wrap-class}-0{
+                    @include page-padding-row-reset();
+               }
+
+                #{$wrap-class}-0 {
+                    #{$wrap-class}-inner{
+                        @include page-padding-inner-reset();
+                    }
+
+                    /** addition class for usage with position:absolute */
+                    #{$wrap-class}-padding {
+                        @include page-padding-only-reset();
+                    }
+                }
+            }
+        }
+    }
+
+    /** specific settings for classes with breakpoints in names. Has to be dominant */
+    @each $breakpoint, $padding-x in $page-padding {
+        @include media-breakpoint-up($breakpoint) {
+
+            /** ensure dominance with body-prefix */
+            body #{$page-wrap-class} {
+                padding-left: $padding-x - math.div($grid-gutter-width, 2);
+                padding-right: $padding-x - math.div($grid-gutter-width, 2);
+
+                /** for usage as wrap around a container */
+                #{$wrap-class}-#{$breakpoint}-1 {
+                    @include page-padding-container($padding-x);
+
+                    #{$wrap-class}-inner {
+                        @include page-padding-inner($padding-x);
+                    }
+                }
+
+                /** for usage as inner wrap of a col */
+                .row #{$wrap-class}-#{$breakpoint}-1 {
+                    @include page-padding-row($padding-x);
+                }
+
+                /** reset */
+                #{$wrap-class}-#{$breakpoint}-0,
+                .row #{$wrap-class}-#{$breakpoint}-0 {
+                    @include page-padding-row-reset();
+                }
+
+                #{$wrap-class}-#{$breakpoint}-0 {
+                    #{$wrap-class}-inner{
+                        @include page-padding-inner-reset();
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin page-padding-only ($padding-x) {
+    padding-left: $padding-x - math.div($grid-gutter-width, 2);
+    padding-right: $padding-x - math.div($grid-gutter-width, 2);
+}
+
+@mixin page-padding-container ($padding-x) {
+    padding-left: $padding-x - math.div($grid-gutter-width, 2);
+    padding-right: $padding-x - math.div($grid-gutter-width, 2);
+    margin-left: (($padding-x - math.div($grid-gutter-width, 2)) * -1);
+    margin-right: (($padding-x - math.div($grid-gutter-width, 2)) * -1);
+}
+
+@mixin page-padding-inner ($padding-x) {
+    $additionalWidth: $padding-x * 2 - $grid-gutter-width;
+    width: calc(100% + $additionalWidth);
+    margin-left: $padding-x * -1 + math.div($grid-gutter-width, 2);
+    margin-right: $padding-x * -1 + math.div($grid-gutter-width, 2);
+    overflow: hidden;
+
+    /*
+    $additionalWidth: $padding-x * 2;
+    width: calc(100% + $additionalWidth);
+    margin-left: $padding-x * -1 - math.div($grid-gutter-width, 2);
+    margin-right: $padding-x * -1;
+    padding-left: $grid-gutter-width;
+    overflow: hidden;
+     */
+}
+
+@mixin page-padding-row ($padding-x) {
+    padding-left: $padding-x;
+    padding-right: $padding-x;
+    margin-left: $padding-x * -1;
+    margin-right: $padding-x * -1;
+}
+
+@mixin page-padding-only-reset () {
+    padding-left: initial;
+    padding-right: initial;
+}
+
+@mixin page-padding-row-reset () {
+    padding-left: initial;
+    padding-right: initial;
+    margin-left: initial;
+    margin-right: initial;
+}
+
+@mixin page-padding-inner-reset () {
+    width: initial;
+    margin-left: initial;
+    margin-right: initial;
+    padding-left: initial;
+}

package/sass/bootstrap-5.3.0/00_mixins/_section.scss

@@ -0,0 +1,111 @@
+/* ==================================================
+    Section
+* ================================================== */
+/// Controls spacing between content sections and blocks.
+///
+/// Provides vertical spacing for common layout patterns such as standard content sections
+/// and blocks within them. Designed to work with modifier classes and utility spacing.
+///
+/// Useful for defining global spacing scales, reusable layout patterns, and utility classes.
+///
+/// @group Spacing
+///
+/// @param {String} $section-class - The base class name for content sections. Defaults to `'csp-section'`.
+/// @param {String} $block-class - The class name for sub-content blocks within sections. Defaults to `'csp-block'`.
+/// @param {String} $utility-append-class - Utility suffix used for generating helper classes. Defaults to `'sp'`.
+/// @param {Map} $csp-blocks - Map defining custom spacing for block types (e.g., `text`, `image`, etc.). Defaults to `$content-spacers-blocks`.
+/// @param {Map} $content-spacers - Global content spacing map (e.g., small, medium, large spacing values). Defaults to `$content-spacers`.
+///
+/// @example html
+///   <!-- Basic content sections -->
+///   <div class="csp-section">
+///     [...]
+///   </div>
+///   <div class="csp-section">
+///     [...]
+///   </div>
+///
+/// @example html
+///   <!-- With reduced space between sections with same content type -->
+///   <div class="csp-section csp-block text">
+///     [...]
+///   </div>
+///   <div class="csp-section csp-block text">
+///     [...]
+///   </div>
+///
+/// @example html
+///   <!-- With reduced space between regular blocks -->
+///   <div class="csp-block">
+///     [...]
+///   </div>
+///   <div class="csp-block">
+///     [...]
+///   </div>
+///
+/// @example scss
+///   .layout-default {
+///     @include section-spacing();
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin section-spacing(
+    $section-class: 'csp-section',
+    $block-class: 'csp-block',
+    $not-last-class: 'csp-not-last',
+    $utility-append-class: 'sp',
+    $csp-blocks: $content-spacers-blocks,
+    $content-spacers: $content-spacers
+) {
+    @each $breakpoint, $values in $grid-breakpoints {
+        $spacer-section: map-get(map-get($content-spacers, $breakpoint), 'section');
+        $spacer-block: map-get(map-get($content-spacers, $breakpoint), 'block');
+
+        // section-spacing
+        @include with-media($breakpoint) {
+
+            .#{$section-class},
+            .#{$section-class}-#{$utility-append-class} {
+                margin-bottom: rem-calc($spacer-section);
+            }
+
+            .#{$section-class}.#{$not-last-class}:not(:has(+ .#{$section-class})),
+            .#{$section-class}-#{$utility-append-class}.#{$not-last-class}:not(:has(+ .#{$section-class})) {
+                margin-bottom: 0;
+            }
+        }
+
+        // block-spacing
+        @include with-media($breakpoint) {
+
+            .#{$block-class}:not(.#{$section-class}),
+            .#{$block-class}-#{$utility-append-class} {
+                margin-bottom: rem-calc($spacer-block);
+            }
+
+            .#{$block-class}.#{$not-last-class}:not(.#{$section-class}):not(:has(+ .#{$block-class})),
+            .#{$block-class}-#{$utility-append-class}.#{$not-last-class}:not(:has(+ .#{$block-class})){
+                margin-bottom: 0;
+            }
+
+            @each $csp-block in $csp-blocks {
+                .#{$section-class}.#{$block-class}.#{$csp-block} + .#{$section-class}.#{$block-class}.#{$csp-block} {
+                    margin-top: rem-calc((strip-unit($spacer-section) - strip-unit($spacer-block)) * -1);
+                }
+            }
+        }
+    }
+}
+
+// Helper for media-breakpoint-up
+@mixin with-media($breakpoint) {
+    @if $breakpoint == 'xs' {
+        @content;
+    } @else {
+        @include media-breakpoint-up($breakpoint) {
+            @content;
+        }
+    }
+}

package/sass/bootstrap-5.3.0/00_mixins/_toggle-list.scss

@@ -0,0 +1,133 @@
+/* ==================================================
+* Toggle-list
+* ==================================================*/
+/// Creates a vertically stacked list with toggleable items.
+///
+/// Can be used for accordion-like navigation or collapsible sections.
+/// Supports both semantic HTML lists and custom div-based structures.
+///
+/// Features:
+/// - Custom padding and border styling
+/// - Different font colors for default and active states
+/// - Icon support via inline `<span>` or pseudo-element (`::after`)
+///
+/// @group Navigation
+///
+/// @param {Length} $padding-y - Vertical padding for list items. Defaults to `$spacer`.
+/// @param {Color} $border-color - Color of the item borders. Defaults to `$color-primary`.
+/// @param {Length} $border-size - Thickness of the bottom border. Defaults to `1px`.
+/// @param {Color} $font-color - Default font color for links. Defaults to `$color-secondary`.
+/// @param {Color} $font-color-active - Font color for active items. Defaults to `$color-primary`.
+/// @param {Length} $icon-size - Size of the icon element or pseudo-element. Defaults to `30px`.
+/// @param {String} $icon-style - Icon identifier or class (e.g., arrow icon). Defaults to `$icon-arrow-right`.
+///
+/// @example html
+///   <!-- With icon span -->
+///   <div class="toggle-list">
+///     <div class="toggle-list-item">
+///       <div class="toggle-list-link">
+///         <span>Toggle Item</span>
+///         <span class="icon"></span>
+///       </div>
+///     </div>
+///   </div>
+///
+/// @example html
+///   <!-- With ::after icon when used via WYSIWYG editor -->
+///   <ul class="toggle-list">
+///     <li>
+///       <a href="#">
+///         Toggle Item
+///       </a>
+///     </li>
+///   </ul>
+///
+/// @example scss
+///   .toggle-list {
+///     @include toggle-list(
+///       $padding-y: 1rem,
+///       $border-color: #ccc,
+///       $font-color-active: #000,
+///       $icon-size: 1.25rem
+///     );
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin toggle-list(
+    $padding-y: $spacer,
+    $border-color: $color-primary,
+    $border-size: 1px,
+    $font-color: $color-secondary,
+    $font-color-active: $color-primary,
+    $icon-size: 30px,
+    $icon-style: $icon-arrow-right
+) {
+    @include list-reset;
+    display: flex;
+    flex-direction: column;
+
+    &-item {
+        border-bottom: rem-calc($border-size) solid $border-color;
+        margin: 0;
+        padding: rem-calc($padding-y) 0;
+    }
+
+    &-link {
+        color: $font-color;
+        text-align: left;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        text-decoration: none;
+        width: 100%;
+
+        &:link,
+        &:visited,
+        &:hover {
+            text-decoration: none !important;
+        }
+
+        .icon {
+            font-size: rem-calc($icon-size);
+            color: $font-color;
+        }
+
+        &:hover,
+        &.active,
+        &[aria-expanded="true"] {
+            color: $font-color-active;
+
+            &::after {
+                color: $font-color-active;
+            }
+
+            .icon {
+                color: $font-color-active;
+            }
+        }
+
+    }
+
+    & > li {
+        @extend .toggle-list-item;
+
+        // editor adds span elements
+        & > span > a,
+        & > span > .link,
+        & > a,
+        & > .link {
+            @extend .toggle-list-link;
+
+            &::after {
+                @extend .icomoon;
+                font-size: rem-calc($icon-size);
+                content: $icon-style;
+            }
+        }
+    }
+
+
+}

package/sass/bootstrap-5.3.0/00_mixins/_unit.scss

@@ -0,0 +1,51 @@
+@use 'sass:math';
+
+/// Removes the unit from a given number (e.g. px, em, rem).
+///
+/// Useful when performing mathematical operations on values with units.
+/// If the input is already unitless, it returns the value unchanged.
+///
+/// @group Functions
+///
+/// @param {Number} $number - A numeric value with or without a unit.
+/// @return {Number} - A unitless number.
+///
+/// @example scss
+///   strip-unit(16px); // 16
+///   strip-unit(2rem); // 2
+///   strip-unit(10);   // 10
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@function strip-unit($number) {
+    @if type-of($number) == 'number' and not unitless($number) {
+        @return math.div($number, $number * 0 + 1);
+    }
+    @return $number;
+}
+
+
+/// Converts a pixel value into `rem` units based on a 16px base font size.
+///
+/// This function strips the unit and divides by 16. Useful for fluid, scalable type and layout systems.
+///
+/// Depends on `strip-unit()` for unit handling.
+///
+/// @group Functions
+///
+/// @param {Number} $size - A pixel value to convert (e.g. `16px`, `32`).
+/// @return {String} - A `rem` string with the converted value (e.g. `1rem`).
+///
+/// @example scss
+///   rem-calc(16);    // 1rem
+///   rem-calc(24px);  // 1.5rem
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@function rem-calc($size) {
+    $size: strip-unit($size);
+    $rem-size: math.div($size, 16);
+    @return #{$rem-size}rem;
+}

package/sass/bootstrap-5.3.0/10_config/_colors.scss

@@ -0,0 +1,17 @@
+/* ==================================================
+* Basic variables
+* ================================================== */
+$color-map: (
+    'red': #ff0000,
+    'primary': #00ff00,
+    'secondary': #0000ff,
+) !default;
+
+// some basic variables
+$color-white: #fff !default;
+$color-black: #000000 !default;
+$color-primary: map-get($color-map, 'primary') !default;
+$color-secondary: map-get($color-map, 'secondary') !default;
+$color-text: map-get($color-map, 'secondary') !default;
+$color-error: map-get($color-map, 'primary') !default;
+$color-outline: map-get($color-map, 'primary') !default;