@madj2k/fe-frontend-kit 2.0.38 → 2.0.40

package/sass/bootstrap-5.3/10_mixins/_section.scss

@@ -57,6 +57,33 @@
 ///     @include section-spacing();
 ///   }
 ///
+/// Also generates Bootstrap-style utility classes for vertical spacing
+/// using the `section-spacing()` mixin.
+///
+/// Class naming convention follows:
+/// `.mt-[breakpoint]-[block|section-class]`, `.pt-[breakpoint]-[section-class]`, etc.
+///
+/// Supports both `margin` and `padding` for `top` and `bottom`.
+///
+/// Breakpoint-specific classes are generated using `media-breakpoint-up`
+/// for all breakpoints above `xs`. The `xs` breakpoint outputs base utility classes
+/// without any breakpoint suffix.
+///
+/// Utility classes are generated dynamically from a configurable map:
+///
+/// @example scss
+///   $utility-prefixes: (
+///     'pt': 'padding-top',
+///     'pb': 'padding-bottom',
+///     'mt': 'margin-top',
+///     'mb': 'margin-bottom'
+///   );
+///
+/// @example html
+///   <div class="pt-csp-section mb-lg-csp-block">
+///     [...]
+///   </div>
+///
 /// @author Steffen Kroggel <developer@steffenkroggel>
 /// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
 ///
@@ -64,7 +91,7 @@
     $section-class: 'csp-section',
     $block-class: 'csp-block',
     $not-last-class: 'csp-not-last',
-    $utility-append-class: 'sp',
+    $utility-append-class: 'sp', // deprecated
     $padding-append-class: 'padding',
     $csp-blocks: (
         'text',
@@ -73,8 +100,8 @@
     ),
     $content-spacers: (
         'xs': (
-            'section': 48px, // space between different sections
-            'block': 16px    // space between content blocks
+            'section': 48px,
+            'block': 16px
         ),
         'sm': (
             'section': 48px,
@@ -97,14 +124,31 @@
             'block': 16px
         )
     ),
+    $utility-prefixes: (
+        'pt': 'padding-top',
+        'pb': 'padding-bottom',
+        'mt': 'margin-top',
+        'mb': 'margin-bottom'
+    )
 ) {
     @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) {
+            @each $prefix, $property in $utility-prefixes {
+                // Section Utilities
+                .#{$prefix}#{if($breakpoint != xs, '-#{$breakpoint}', '')}-#{$section-class} {
+                    #{$property}: rem-calc($spacer-section) !important;
+                }
+
+                // Block Utilities
+                .#{$prefix}#{if($breakpoint != xs, '-#{$breakpoint}', '')}-#{$block-class} {
+                    #{$property}: rem-calc($spacer-block) !important;
+                }
+            }
 
+            // Section defaults
             .#{$section-class},
             .#{$section-class}-#{$utility-append-class} {
                 margin-bottom: rem-calc($spacer-section);
@@ -122,18 +166,15 @@
                 padding-top: rem-calc($spacer-section);
                 padding-bottom: rem-calc($spacer-section);
             }
-        }
-
-        // block-spacing
-        @include with-media($breakpoint) {
 
+            // Block defaults
             .#{$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})){
+            .#{$block-class}-#{$utility-append-class}.#{$not-last-class}:not(:has(+ .#{$block-class})) {
                 margin-bottom: 0;
             }
 
@@ -146,6 +187,7 @@
     }
 }
 
+
 // Helper for media-breakpoint-up
 @mixin with-media($breakpoint) {
     @if $breakpoint == 'xs' {

package/sass/bootstrap-5.3/10_mixins/_toggle-list.scss

@@ -20,6 +20,8 @@
 /// @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`.
+/// @param {Color} $icon-color - Color of the icon in default state. Defaults to `$font-color`.
+/// @param {Color} $icon-color-active - Color of the icon in active state. Defaults to `$font-color-active`.
 ///
 /// @example html
 ///   <!-- With icon span -->
@@ -27,7 +29,7 @@
 ///     <div class="toggle-list-item">
 ///       <div class="toggle-list-link">
 ///         <span>Toggle Item</span>
-///         <span class="icon"></span>
+///         <span class="toggle-icon"></span>
 ///       </div>
 ///     </div>
 ///   </div>
@@ -61,8 +63,13 @@
     $border-size: 1px,
     $font-color: var(--bs-secondary),
     $font-color-active: var(--bs-primary),
+    $font-color-hover: $font-color-active,
     $icon-size: 30px,
-    $icon-style: ''
+    $icon-style: '',
+    $icon-color: $font-color,
+    $icon-color-active: $font-color-active,
+    $icon-color-hover: $icon-color-active,
+
 ) {
     @include list-reset();
     display: flex;
@@ -90,25 +97,30 @@
             text-decoration: none !important;
         }
 
+        &::after,
         .icon {
             font-size: rem-calc($icon-size);
-            color: $font-color;
+            color: $icon-color;
         }
 
-        &:hover,
         &.active,
         &[aria-expanded="true"] {
             color: $font-color-active;
 
-            &::after {
-                color: $font-color-active;
+            &::after,
+            .icon {
+                color: $icon-color-active;
             }
+        }
 
+        &:hover{
+            color: $font-color-hover;
+
+            &::after,
             .icon {
-                color: $font-color-active;
+                color: $icon-color-hover;
             }
         }
-
     }
 
     & > li {
@@ -121,10 +133,12 @@
         & > .link {
             @extend .toggle-list-link;
 
-            &::after {
-                @extend .icomoon;
-                font-size: rem-calc($icon-size);
-                content: $icon-style;
+            @if $icon-style != '' {
+                &::after {
+                    @extend .icomoon;
+                    font-size: rem-calc($icon-size);
+                    content: $icon-style;
+                }
             }
         }
     }

package/sass/bootstrap-5.3/10_mixins/_toggle.scss

@@ -135,6 +135,14 @@
         color: $icon-color;
     }
 
+    #{$icon-selector}:not(:has(svg)) {
+        width: max-content;
+    }
+
+    #{$icon-selector}:before {
+        width: max-content;
+    }
+
     #{$icon-selector} svg {
         height: 100%;
     }