@madj2k/fe-frontend-kit 2.0.28 → 2.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.28",
+  "version": "2.0.30",
   "description": "Shared frontend utilities, menus and mixins for projects",
 	"main": "index.js",
 	"style": "index.scss",

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

@@ -23,9 +23,12 @@
 ///
 /// @group Layout
 ///
+/// @param {Map} $page-padding - A map of breakpoint names to padding values for responsive control. Defaults to predefined breakpoint-based paddings.
 /// @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`.
+/// @param {String} $padding-class - The class prefix used for standalone padding utilities. Defaults to `$page-wrap-class`.
+/// @param {Number} $version - Version number for compatibility handling. Defaults to `1`.
 ///
 /// @example html
 ///   <!-- 1) Around a Bootstrap container -->
@@ -85,15 +88,39 @@
     ),
     $page-wrap-class: '.page',
     $wrap-class: '.fullwidth',
-    $default-padding: 16px
+    $default-padding: 16px,
+    $padding-class: $page-wrap-class,
+    $version: 1,
 ) {
 
+    /** addition class which simply contains the normal padding */
+    #{$padding-class}-padding {
+        @include page-padding-only($default-padding, 'full');
+    }
+
+    /** 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) {
+            /** addition class which simply contains the normal padding */
+            #{$padding-class}-padding {
+                @include page-padding-only($padding-x, 'full');
+            }
+
+            body {
+                /** addition class which simply contains the normal padding */
+                #{$padding-class}-#{$breakpoint}-padding {
+                    @include page-padding-only($padding-x, 'full');
+                }
+            }
+        }
+    }
+
     #{$page-wrap-class} {
 
         /** default settings without breakpoints **/
         @include page-padding-only($default-padding);
 
-         /** for usage as wrap around a container */
+        /** for usage as wrap around a container */
         #{$wrap-class}-1 {
             @include page-padding-container($default-padding);
 
@@ -128,11 +155,13 @@
                 @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 {
+    /** 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) {
 
-            @include media-breakpoint-up($breakpoint) {
+            #{$page-wrap-class} {
 
                 /** for usage as wrap around a container */
                 #{$wrap-class}-1 {
@@ -155,12 +184,12 @@
 
                 /** reset */
                 #{$wrap-class}-0,
-               .row #{$wrap-class}-0{
+                .row #{$wrap-class}-0 {
                     @include page-padding-row-reset();
-               }
+                }
 
                 #{$wrap-class}-0 {
-                    #{$wrap-class}-inner{
+                    #{$wrap-class}-inner {
                         @include page-padding-inner-reset();
                     }
 
@@ -170,17 +199,23 @@
                     }
                 }
             }
-        }
-    }
 
-    /** specific settings for classes with breakpoints in names. Has to be dominant */
-    @each $breakpoint, $padding-x in $page-padding {
-        @include media-breakpoint-up($breakpoint) {
 
+            /** ==================================================================================== */
+            /** specific settings for classes with breakpoints in names. Has to be dominant */
             /** 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);
+
+                // seems to be a bug in older version. But we keep it for compatibility
+                @if ($version < 2) {
+                    padding-left: $padding-x - math.div($grid-gutter-width, 2);
+                    padding-right: $padding-x - math.div($grid-gutter-width, 2);
+                }
+
+                /** addition class which simply contains the normal padding */
+                #{$padding-class}-#{$breakpoint}-padding {
+                    @include page-padding-only($padding-x, 'full');
+                }
 
                 /** for usage as wrap around a container */
                 #{$wrap-class}-#{$breakpoint}-1 {
@@ -212,9 +247,14 @@
     }
 }
 
-@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-only ($padding-x, $variant: 'default') {
+    @if ($variant == 'full') {
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+    } @else {
+        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) {
@@ -230,7 +270,6 @@
     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);