@madj2k/fe-frontend-kit 2.0.0

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

@@ -0,0 +1,208 @@
+/// Applies responsive font-size and line-height for a given font style from the `$font-formats` map.
+///
+/// Supports multiple breakpoints: mobile, tablet, and desktop. default is the fallback
+/// Used as a base mixin for semantic text styles like `h1`, `copy`, etc.
+///
+/// @group Typography
+/// @param {String} $font-format - The key name of the format to apply (e.g., 'h1', 'copy-small').
+/// @param {Map} $font-formats - A map of font style definitions. Defaults to the global `$font-formats` map.
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin font-format($font-format: 'h1', $font-formats: $font-formats) {
+    $format-data: map-get($font-formats, $font-format);
+    $mobile-data: map-get($format-data, 'mobile');
+    $default-data: map-get($format-data, 'default');
+    $keys: map-keys(if($mobile-data, $mobile-data, $default-data));
+
+    @each $key in $keys {
+        $value: if($mobile-data,
+            map-get($mobile-data, $key),
+            map-get($default-data, $key)
+        );
+        #{$key}: $value;
+    }
+
+    @if map-has-key($format-data, 'tablet') {
+        @include media-breakpoint-up(lg) {
+            @each $key in $keys {
+                #{$key}: map-get(map-get($format-data, 'tablet'), $key);
+            }
+        }
+    }
+
+    @if map-has-key($format-data, 'desktop') {
+        @include media-breakpoint-up(xl) {
+            @each $key in $keys {
+                #{$key}: map-get(map-get($format-data, 'desktop'), $key);
+            }
+        }
+    }
+}
+
+/// Typography style for `<h1>` elements.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin h1 {
+    @include font-format('h1');
+}
+
+/// Typography style for `<h2>` elements.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin h2 {
+    @include font-format('h2');
+}
+
+/// Typography style for `<h3>` elements.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin h3 {
+    @include font-format('h3');
+}
+
+/// Typography style for `<h4>` elements.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin h4 {
+    @include font-format('h4');
+}
+
+/// Typography style for `<h5>` elements.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin h5 {
+    @include font-format('h5');
+}
+
+/// Typography style for `<h6>` elements.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin h6 {
+    @include font-format('h6');
+}
+
+
+/// Typography style for body copy text.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin copy {
+    @include font-format('copy');
+}
+
+/// Typography style for small body copy.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin copy-small {
+    @include font-format('copy-small');
+}
+
+/// Typography style for links (without additional decoration).
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin link {
+    @include font-format('link');
+}
+
+/// Typography style for overline/captions.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin overline {
+    @include font-format('overline');
+}
+
+/// Typography style for subheaders.
+///
+/// @group Typography
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin subheader {
+    @include font-format('subheader');
+}
+
+/// Applies typographic styles for bold text using the bold font family.
+///
+/// @group Utilities
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin bold {
+    @include font-format('bold');
+}
+
+/// Enables word breaking and hyphenation for improved long text handling.
+///
+/// Works across modern and legacy browsers.
+///
+/// @group Utilities
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin hyphenate() {
+    overflow-wrap: break-word;
+    word-break: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    hyphens: auto;
+}
+
+/// Resets list styles: removes bullets and spacing.
+///
+/// Useful for unstyled lists or when customizing lists from scratch.
+///
+/// @group Utilities
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin list-reset {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}

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

@@ -0,0 +1,129 @@
+/// Adds flexible icon+label spacing to inline elements, only if both icon and text are present.
+///
+/// Applies `display: flex` and controlled `margin` on icon spans to create spacing.
+/// Avoids using `gap` to ensure no unintended spacing when only one element is present.
+///
+/// Designed for icon-label patterns such as buttons, links or text blocks.
+///
+/// @group Utilities
+///
+/// @param {Map} $selectors-map - HTML elements to which the behavior should apply, with optional filters.
+/// @param {Number} $margin - Margin between icon and text in rem units. Default: 10.
+///
+/// @example scss
+///   @include flex-icon();
+///
+/// @example html
+///   <a href="#">
+///     <span class="icon icon-xyz"></span>
+///     <span class="label">Open</span>
+///   </a>
+///
+///   <button type="button">
+///     <span class="icon icon-save"></span>
+///     <span>Save</span>
+///   </button>
+///
+///   <a class="flex-icon" href="#">
+///     <span>Text only, but styled like icon-button</span>
+///   </a>
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+
+@mixin flex-icon($selectors-map: (a: ':not(.link-wrap)', p: '', span: '', button: ''), $margin: 10) {
+
+    .flex-icon {
+        text-decoration: none;
+    }
+
+    @each $tag, $filter in $selectors-map {
+        #{$tag}#{$filter}:has(span.icon):has(span:not(.icon)) {
+            display: flex;
+            gap: 0;
+            align-items: center;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            span.icon:first-child:not(span.icon:last-child) {
+                margin-right: rem-calc($margin);
+            }
+
+            span.icon:last-child:not(span.icon:first-child) {
+                margin-left: rem-calc($margin);
+            }
+        }
+    }
+}
+
+
+/// Adds dynamic toggle-icon behavior using `.icon` elements inside toggle containers.
+///
+/// Designed to work with buttons or elements that toggle state (e.g. accordions, lists, dropdowns).
+/// This mixin assumes the presence of two `.icon` elements:
+/// - `.icon.toggle-closed` (default visible)
+/// - `.icon.toggle-opened` (visible only when `[aria-expanded="true"]`)
+///
+/// The `.icon` class enables consistent global styling. The icon must appear **after** the specific class
+/// (e.g. `icon-plus icon`), so `.icon` is always last.
+///
+/// @group Toggle Controls
+///
+/// @param {String} $selector - The selector for the toggle element. Default: `.toggle`
+///
+/// @example scss
+///   @include toggle-icon(); // applies to `.toggle`
+///   @include toggle-icon('.faq-toggle'); // applies to `.faq-toggle`
+///
+/// @example html
+///   <button class="toggle" aria-expanded="false">
+///     <span class="icon icon-plus toggle-closed icon"></span>
+///     <span class="icon icon-minus toggle-opened icon"></span>
+///     <span>More Info</span>
+///   </button>
+///
+/// @author
+/// Steffen Kroggel <developer@steffenkroggel>
+///
+/// @license
+/// GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin toggle-icon($selector: '.toggle') {
+    #{$selector}:has(.icon:first-child) {
+        line-height: 1; // icon-only toggle buttons
+    }
+
+    #{$selector}:has(.icon) {
+        background-color: transparent;
+        border: 0;
+        display: inline-block;
+        padding: 0;
+
+        .icon {
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+
+            &.toggle-opened {
+                display: none;
+            }
+
+            &.toggle-closed {
+                display: inline-block;
+            }
+        }
+
+        &[aria-expanded="true"] {
+            .icon.toggle-opened {
+                display: inline-block;
+            }
+
+            .icon.toggle-closed {
+                display: none;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,327 @@
+/* ==================================================
+ * Nav-block
+ * ==================================================*/
+/// Creates a vertically stacked navigation menu with consistent styling.
+///
+/// Features configurable link colors for default and active states.
+/// Links are left-aligned with optional underline on hover.
+///
+/// @group Navigation
+///
+/// @param {Color} $link-color - The color of the default (non-active) links. Defaults to `$color-secondary`.
+/// @param {Color} $active-color - The color of active links. Defaults to `$color-primary`.
+///
+/// @example html
+///   <nav class="nav-block">
+///     <ul class="nav-block-list">
+///       <li class="nav-block-item">
+///         <a href="#" class="nav-block-link">Link 1</a>
+///       </li>
+///       <li class="nav-block-item">
+///         <a href="#" class="nav-block-link active">Link 2</a>
+///       </li>
+///     </ul>
+///   </nav>
+///
+/// @example scss
+///   .nav-block {
+///     @include nav-block($link-color: #888, $active-color: #000);
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+@mixin nav-block(
+    $link-color: $color-secondary,
+    $active-color: $color-primary
+) {
+
+    &-list {
+        @include list-reset;
+        display: block;
+    }
+
+    &-link,
+    &-link:link,
+    &-link:visited,
+    &-link:hover {
+        color: $link-color;
+        text-decoration: none;
+        text-align: left;
+
+        &.active {
+            color: $active-color;
+        }
+    }
+
+    &-link:hover {
+        text-decoration: underline;
+    }
+}
+
+/* ==================================================
+ * Nav-Inline
+ * ==================================================*/
+/// Creates a horizontally aligned navigation using a flexbox layout.
+///
+/// Navigation items are displayed in a row with configurable spacing.
+/// Links can have different styles for default and active states.
+///
+/// @group Navigation
+///
+/// @param {Length} $list-gap - The horizontal spacing (gap) between navigation items. Defaults to `$spacer`.
+/// @param {Color} $link-color - The text color of default (inactive) links. Defaults to `$color-secondary`.
+/// @param {Color} $link-active-color - The text color of active links. Defaults to `$color-primary`.
+///
+/// @example html
+///   <nav class="nav-inline">
+///     <ul class="nav-inline-list">
+///       <li class="nav-inline-item">
+///         <a class="nav-inline-link" href="#">Link</a>
+///       </li>
+///       <li class="nav-inline-item">
+///         <a class="nav-inline-link active" href="#">Active Link</a>
+///       </li>
+///     </ul>
+///   </nav>
+///
+/// @example scss
+///   .nav-inline {
+///     @include nav-inline($list-gap: 1rem, $link-color: #666, $link-active-color: #000);
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin nav-inline(
+    $list-gap: $spacer,
+    $link-color: $color-secondary,
+    $link-active-color: $color-primary
+) {
+    &-list {
+        @include list-reset;
+        display: flex;
+        gap: rem-calc($list-gap);
+    }
+
+    &-link,
+    &-link:link,
+    &-link:visited,
+    &-link:hover {
+        color: $link-color;
+        text-decoration: none;
+        text-align: left;
+
+        &.active {
+            color: $link-active-color;
+        }
+    }
+
+    &-link:hover {
+        text-decoration: underline;
+    }
+}
+
+/* ==================================================
+* Nav-Pulldown
+* ==================================================*/
+/// Creates a dropdown navigation menu that appears below its trigger element.
+///
+/// Features configurable padding, spacing, colors and borders.
+/// The menu is positioned relative to its container and
+/// extends to fit its content width.
+///
+/// @group Navigation
+///
+/// @param {Length} $pad-x - Horizontal padding inside the dropdown container. Defaults to `$spacer`.
+/// @param {Length} $pad-y - Vertical padding inside the dropdown container. Defaults to `0`.
+/// @param {Length} $item-y - Vertical spacing between dropdown items. Defaults to `10`.
+/// @param {Length} $item-gap - Horizontal spacing between content inside items. Defaults to `12`.
+/// @param {Color} $bg-color - Background color of the dropdown. Defaults to `$color-primary`.
+/// @param {Color} $text-color - Text color of the links. Defaults to `$color-white`.
+/// @param {Color} $border-color - Border color of the dropdown container. Defaults to `$color-white`.
+/// @param {Length} $border-width - Border width of the dropdown container. Defaults to `1px`.
+///
+/// @example html
+///   <div class="nav-pulldown">
+///     <ul class="nav-pulldown-list">
+///       <li class="nav-pulldown-list-item">
+///         <a href="#" class="nav-pulldown-link">Link</a>
+///       </li>
+///     </ul>
+///   </div>
+///
+/// @example scss
+///   .nav-pulldown {
+///     @include nav-pulldown(
+///       $pad-x: 1rem,
+///       $pad-y: 0.5rem,
+///       $item-y: 0.75rem,
+///       $item-gap: 1rem,
+///       $bg-color: #333,
+///       $text-color: #fff,
+///       $border-color: #ccc,
+///       $border-width: 2px
+///     );
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin nav-pulldown(
+    $pad-x: $spacer,
+    $pad-y: 0,
+    $item-y: 10,
+    $item-gap: 12,
+    $bg-color: $color-primary,
+    $text-color: $color-white,
+    $border-color: $color-white,
+    $border-width: 1px
+) {
+
+    top: 100%;
+    right: rem-calc(($border-width * 2) * -1); // compensation for border
+    width: max-content;
+
+    padding: rem-calc($pad-y) rem-calc($pad-x);
+    background-color: $bg-color;
+    border: rem-calc($border-width) solid $border-color;
+
+    &-list {
+        @include list-reset;
+
+        &-item {
+            @include copy;
+            color: $text-color;
+            text-align: left;
+            margin-top: rem-calc($item-y);
+            margin-bottom: rem-calc($item-y);
+
+            & + & {
+                margin-top: rem-calc($item-gap);
+            }
+        }
+    }
+
+    &-link,
+    &-link:link,
+    &-link:visited,
+    &-link:hover {
+        color: $text-color;
+        text-decoration: none;
+    }
+
+    &-link {
+        text-decoration: underline;
+
+    }
+}
+
+/* ==================================================
+* Nav-Toggle
+* ==================================================*/
+/// Creates a button group container for navigation toggles.
+///
+/// Used to align toggle buttons and icons horizontally with spacing.
+/// Useful in responsive navigation headers.
+///
+/// @group Navigation
+///
+/// @param {Length} $gap - The spacing between toggle elements. Defaults to `$spacer`.
+///
+/// @example html
+///   <div class="nav-toggle-group">
+///     <button class="nav-toggle" aria-expanded="false">
+///       <i class="nav-toggle-icon icon-hamburger"></i>
+///     </button>
+///   </div>
+///
+/// @example scss
+///   .nav-toggle-group {
+///     @include nav-toggle-group($gap: 1rem);
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin nav-toggle-group(
+    $gap: $spacer
+) {
+    display: flex;
+    align-items: center;
+    gap: rem-calc($gap);
+    height: 100%;
+}
+
+
+/// Creates a button element for toggling navigation menus.
+///
+/// Features:
+/// - Accessible button with `aria-expanded` state
+/// - Icon switching based on toggle state (e.g., hamburger to close)
+/// - Configurable icon size and colors
+/// - No default background or borders for flexible styling
+/// - Built-in accessibility outline
+///
+/// @group Navigation
+///
+/// @param {Length} $icon-size - Size of the icon (width/height). Defaults to `$spacer`.
+/// @param {Color} $icon-color - Icon color (e.g., fill or text color). Defaults to `$color-primary`.
+/// @param {Map} $icon-mappings - Map of icon toggle states (e.g., hamburger → close). Defaults to a predefined map.
+///
+/// @example html
+///   <button class="nav-toggle" aria-expanded="false">
+///     <i class="nav-toggle-icon icon-hamburger"></i>
+///   </button>
+///
+/// @example scss
+///   .nav-toggle {
+///     @include nav-toggle(
+///       $icon-size: 1.5rem,
+///       $icon-color: #333,
+///       $icon-mappings: (
+///         "icon-hamburger": "icon-close",
+///         "icon-plus": "icon-minus"
+///       )
+///     );
+///   }
+///
+/// @author Steffen Kroggel <developer@steffenkroggel>
+/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
+///
+@mixin nav-toggle(
+    $icon-size: $spacer,
+    $icon-color: $color-primary,
+    $icon-mappings: (
+        "icon-hamburger": $icon-close,
+        "icon-plus": $icon-minus
+    )
+) {
+    background-color: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+
+    // accessibility
+    @include accessibility-outline();
+
+    &:has(.nav-toggle-icon) {
+        display: flex;
+        align-items: center;
+
+        &[aria-expanded="true"] {
+            @each $icon-class, $content in $icon-mappings {
+                .#{$icon-class} {
+                    &:before {
+                        content: $content;
+                    }
+                }
+            }
+        }
+    }
+
+    &-icon {
+        font-size: rem-calc($icon-size);
+        width: rem-calc($icon-size);
+        color: $icon-color;
+    }
+}