beathers 5.7.6 → 5.9.1

package/scss/functions/_mediaQueries.scss

@@ -1,136 +1,140 @@
-@use 'sass:map';
-@use 'sass:string';
-@use '../variables' as vars;
-@use '../settings/defaults' as defs;
-@use '../settings/index' as settings;
-@use '../functions/validations' as val;
-
-// Definitions
-$breakpoints: if(vars.$breakpoints != (), vars.$breakpoints, defs.$breakpoints);
-
-// Breakpoint Mixin
-// --------------------------------------
-// Generates a media query based on a breakpoint key and type (min/max).
-// If the key is not found or is null/empty (e.g., for default styles),
-// it applies the content directly without a media query.
-//
-// @param {String} $type - The type of media query (e.g., "min", "max").
-// @param {String | Null} $key - The breakpoint key from `$breakpoints` (e.g., "sm", "md", "lg").
-//                                If null or an empty string, content is applied directly.
-//
-// @content - Styles to be applied within the media query or directly.
-//
-// @example scss
-//   .element {
-//     color: blue; // Default
-//
-//     @include mQ(min, "md") {
-//       color: red; // Applied when (min-width: md-breakpoint-value)
-//     }
-//
-//     @include mQ(max, "lg") {
-//       padding: 20px; // Applied when (max-width: lg-breakpoint-value)
-//     }
-//
-//     // Example for applying base styles (no media query)
-//     @include mQ(min, null) { // or @include mQ(min, "")
-//       font-size: 16px; // Applied directly
-//     }
-//   }
-//
-// @output css - Example output for .element
-//   .element {
-//     color: blue;
-//     font-size: 16px;
-//   }
-//   @media (min-width: 768px) { // Assuming 'md' is 768px
-//     .element {
-//       color: red;
-//     }
-//   }
-//   @media (max-width: 1024px) { // Assuming 'lg' is 1024px
-//     .element {
-//       padding: 20px;
-//     }
-//   }
-//
-@mixin mQ($type, $key, $condition: true) {
-  // Retrieve the size value from the breakpoints map using the provided key
-  $size: map.get($breakpoints, $key);
-  $checkedCondition: val.boolean($condition, 'mQ().condition');
-
-  @if $size and $size > 0 and $checkedCondition {
-    // Check if a valid size value exists
-    // Generate the media query using the provided type and size
-    @media (string.unquote("#{$type}-width"): $size) {
-      @content; // Content to be included within the media query
-    }
-  } @else {
-    // If no valid size value exists, apply the content without a media query
-    @content;
-  }
-}
-// How to call
-// ex: color: mQ(min or max, xs/md/lg/xl/xxl) // Note: This comment seems to refer to an old way or is a general usage hint.
-
-// Multi Sizes Mixin
-// --------------------------------------
-// Iterates through media query sizes defined by the `multiSizes()` function
-// and applies content within the appropriate media query.
-// This mixin is designed to be used with `@content($size, $divider)`,
-// allowing the consuming code to generate responsive utility classes.
-//
-// @content {String} $size - The current breakpoint size key (e.g., "", "sm", "md").
-// @content {String} $divider - The class divider for the current size (e.g., "", ":").
-//
-// @example scss
-//   // In another file (e.g., _typographic.scss)
-//   @use "mediaQueries" as mQ;
-//   @use "defs";
-//
-//   @include mQ.multiSizes() using ($size, $divider) {
-//     $classPrefix: if($size, "#{$size}#{$divider}", "");
-//
-//     .#{$classPrefix}text-left {
-//       text-align: left if($size, !important, null);
-//     }
-//     .#{$classPrefix}text-center {
-//       text-align: center if($size, !important, null);
-//     }
-//   }
-//
-// @output css - Example output
-//   .text-left {
-//     text-align: left;
-//   }
-//   .text-center {
-//     text-align: center;
-//   }
-//
-//   @media (min-width: 768px) { // Assuming 'md' is 768px
-//     .md\\:text-left {
-//       text-align: left !important;
-//     }
-//     .md\\:text-center {
-//       text-align: center !important;
-//     }
-//   }
-
-@mixin multiSizes($condition: null) {
-  $checkedCondition: val.boolean($condition, 'mQ().condition');
-
-  @if $checkedCondition {
-    @each $size, $value in $breakpoints {
-      $divider: if($size, #{\:}, '');
-
-      @include mQ(min, $size, $checkedCondition) {
-        @content ($size, $divider);
-      }
-    }
-  } @else {
-    $size: null;
-    $divider: '';
-
-    @content ($size, $divider);
-  }
-}
+@use 'sass:map';
+@use 'sass:string';
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../settings/index' as settings;
+@use '../functions/validations' as val;
+
+// Definitions
+$breakpoints: if(
+  sass(vars.$breakpoints != null): vars.$breakpoints; else: defs.$breakpoints
+);
+
+// Breakpoint Mixin
+// --------------------------------------
+// Generates a media query based on a breakpoint key and type (min/max).
+// If the key is not found or is null/empty (e.g., for default styles),
+// it applies the content directly without a media query.
+//
+// @param {String} $type - The type of media query (e.g., "min", "max").
+// @param {String | Null} $key - The breakpoint key from `$breakpoints` (e.g., "sm", "md", "lg").
+//                                If null or an empty string, content is applied directly.
+//
+// @content - Styles to be applied within the media query or directly.
+//
+// @example scss
+//   .element {
+//     color: blue; // Default
+//
+//     @include mQ(min, "md") {
+//       color: red; // Applied when (min-width: md-breakpoint-value)
+//     }
+//
+//     @include mQ(max, "lg") {
+//       padding: 20px; // Applied when (max-width: lg-breakpoint-value)
+//     }
+//
+//     // Example for applying base styles (no media query)
+//     @include mQ(min, null) { // or @include mQ(min, "")
+//       font-size: 16px; // Applied directly
+//     }
+//   }
+//
+// @output css - Example output for .element
+//   .element {
+//     color: blue;
+//     font-size: 16px;
+//   }
+//   @media (min-width: 768px) { // Assuming 'md' is 768px
+//     .element {
+//       color: red;
+//     }
+//   }
+//   @media (max-width: 1024px) { // Assuming 'lg' is 1024px
+//     .element {
+//       padding: 20px;
+//     }
+//   }
+//
+@mixin mQ($type, $key, $condition: true) {
+  // Retrieve the size value from the breakpoints map using the provided key
+  $size: map.get($breakpoints, $key);
+  $checkedCondition: val.boolean($condition, 'mQ().condition');
+
+  @if $size and $size > 0 and $checkedCondition {
+    // Check if a valid size value exists
+    // Generate the media query using the provided type and size
+    @media (string.unquote("#{$type}-width"): $size) {
+      @content; // Content to be included within the media query
+    }
+  } @else {
+    // If no valid size value exists, apply the content without a media query
+    @content;
+  }
+}
+// How to call
+// ex: color: mQ(min or max, xs/md/lg/xl/xxl) // Note: This comment seems to refer to an old way or is a general usage hint.
+
+// Multi Sizes Mixin
+// --------------------------------------
+// Iterates through media query sizes defined by the `multiSizes()` function
+// and applies content within the appropriate media query.
+// This mixin is designed to be used with `@content($size, $divider)`,
+// allowing the consuming code to generate responsive utility classes.
+//
+// @content {String} $size - The current breakpoint size key (e.g., "", "sm", "md").
+// @content {String} $divider - The class divider for the current size (e.g., "", ":").
+//
+// @example scss
+//   // In another file (e.g., _typographic.scss)
+//   @use "mediaQueries" as mQ;
+//   @use "defs";
+//
+//   @include mQ.multiSizes() using ($size, $divider) {
+//     $classPrefix: if($size, "#{$size}#{$divider}", "");
+//
+//     .#{$classPrefix}text-left {
+//       text-align: left if($size, !important, null);
+//     }
+//     .#{$classPrefix}text-center {
+//       text-align: center if($size, !important, null);
+//     }
+//   }
+//
+// @output css - Example output
+//   .text-left {
+//     text-align: left;
+//   }
+//   .text-center {
+//     text-align: center;
+//   }
+//
+//   @media (min-width: 768px) { // Assuming 'md' is 768px
+//     .md\\:text-left {
+//       text-align: left !important;
+//     }
+//     .md\\:text-center {
+//       text-align: center !important;
+//     }
+//   }
+
+@mixin multiSizes($condition: null) {
+  $checkedCondition: val.boolean($condition, 'mQ().condition');
+
+  @if $checkedCondition {
+    @each $size, $value in $breakpoints {
+      $divider: if(
+        sass($size): #{\:}; else: ''
+      );
+
+      @include mQ(min, $size, $checkedCondition) {
+        @content ($size, $divider);
+      }
+    }
+  } @else {
+    $size: null;
+    $divider: '';
+
+    @content ($size, $divider);
+  }
+}

package/scss/functions/_others.scss

@@ -1,79 +1,113 @@
-@use 'sass:map';
-@use '../variables' as vars;
-@use '../settings/defaults' as defs;
-@use '../functions/validations' as val;
-
-// Definitions
-$axisDivisions: if(vars.$axisDivisions != null, vars.$axisDivisions, defs.$axisDivisions);
-
-// @mixin gridDivision
-// @description Generates CSS grid classes for creating grid layouts.
-// @param {String} $axis - The grid axis ('column' or 'row').
-// @param {String | Null} $size - A size prefix for the generated classes (e.g., 'sm', 'md').
-// @param {String} $divider - A divider string for the generated classes (e.g., '-').
-@mixin gridDivision($axis, $size, $divider) {
-  // Validate parameters
-  $checkedAxis: val.listItem((column, row), $axis, 'gridDivision.axis');
-  $checkedBase: val.number($axisDivisions, 'gridDivision.axisDivisions');
-
-  $type: if($axis == 'column', 'col', 'row');
-  $mainClass: if($size, '#{$size}#{$divider}#{$type}s', '#{$type}s');
-  $subClass: if($size, '#{$size}#{$divider}#{$type}', $type);
-
-  @for $i from 0 through $axisDivisions {
-    @if ($i > 0) {
-      &.#{$mainClass}#{\:}#{$i} {
-        grid-template-#{$axis}s: repeat($i, 1fr);
-      }
-    }
-
-    $axisProperty: if($i == 0, 'grid-#{$axis}-end', 'grid-#{$axis}');
-    $class: if($i == 0, auto, $i);
-    $value: if($i == 0, -1, 'span #{$i}');
-
-    > .#{$subClass}#{\:}#{$class} {
-      #{$axisProperty}: #{$value};
-    }
-  }
-}
-
-// @mixin flexDivision
-// @description Generates CSS flexbox classes for creating flexible layouts.
-// @param {String} $axis - The flex axis ('width' or 'height').
-// @param {String} $type - The type of flex items ('col', 'cols', 'row', 'rows').
-// @param {String | Null} $size - A size prefix for the generated classes (e.g., 'sm', 'md').
-// @param {String} $divider - A divider string for the generated classes (e.g., '-').
-@mixin flexDivision($axis, $type, $size, $divider) {
-  // Validate parameters
-  $checkedAxis: val.listItem((width, height), $axis, 'flexDivision.axis');
-  $checkedType: val.listItem(('col', 'cols', 'rows', 'row'), $type, 'flexDivision.type');
-  $checkedBase: val.number($axisDivisions, 'flexDivision.axisDivisions');
-
-  $mainClass: if($size, '#{$size}#{$divider}#{$type}', $type);
-
-  @if (not $size) and $type == 'cols' or $type == 'rows' {
-    > * {
-      flex: 0 0 auto;
-      max-#{$axis}: 100%;
-    }
-  }
-
-  @for $i from 0 through $axisDivisions {
-    @if $type == 'cols' or $type == 'rows' {
-      $class: if($i == 0, auto, $i);
-      $axisSize: if($i == 0, auto, calc(100% / $i));
-
-      &.#{$mainClass}#{\:}#{$class} > * {
-        #{$axis}: if($size, $axisSize !important, $axisSize);
-      }
-    } @else if $type == 'col' or $type == 'row' {
-      $axisSize: if($i == 0, 100%, calc(($i / $axisDivisions) * 100%));
-      $class: if($i == 0, '', $i);
-      $classSize: if($i == 0, #{$class}, #{\:}#{$class});
-
-      > .#{$mainClass}#{$classSize} {
-        #{$axis}: if($size, $axisSize !important, $axisSize);
-      }
-    }
-  }
-}
+@use 'sass:map';
+@use '../variables' as vars;
+@use '../settings/defaults' as defs;
+@use '../functions/validations' as val;
+
+// Definitions
+$axisDivisions: if(
+  sass(vars.$axisDivisions != null): vars.$axisDivisions; else: defs.$axisDivisions
+);
+
+// @mixin gridDivision
+// @description Generates CSS grid classes for creating grid layouts.
+// @param {String} $axis - The grid axis ('column' or 'row').
+// @param {String | Null} $size - A size prefix for the generated classes (e.g., 'sm', 'md').
+// @param {String} $divider - A divider string for the generated classes (e.g., '-').
+@mixin gridDivision($axis, $size, $divider) {
+  // Validate parameters
+  $checkedAxis: val.listItem((column, row), $axis, 'gridDivision.axis');
+  $checkedBase: val.number($axisDivisions, 'gridDivision.axisDivisions');
+
+  $type: if(
+    sass($axis == 'column'): 'col' ; else: 'row'
+  );
+  $mainClass: if(
+    sass($size): '#{$size}#{$divider}#{$type}s' ; else: '#{$type}s'
+  );
+  $subClass: if(
+    sass($size): '#{$size}#{$divider}#{$type}' ; else: $type
+  );
+
+  @for $i from 0 through $axisDivisions {
+    @if ($i > 0) {
+      &.#{$mainClass}#{\:}#{$i} {
+        grid-template-#{$axis}s: repeat($i, 1fr);
+      }
+    }
+
+    $axisProperty: if(
+      sass($i == 0): 'grid-#{$axis}-end' ; else: 'grid-#{$axis}'
+    );
+    $class: if(
+      sass($i == 0): auto; else: $i
+    );
+    $value: if(
+      sass($i == 0): -1; else: 'span #{$i}'
+    );
+
+    > .#{$subClass}#{\:}#{$class} {
+      #{$axisProperty}: #{$value};
+    }
+  }
+}
+
+// @mixin flexDivision
+// @description Generates CSS flexbox classes for creating flexible layouts.
+// @param {String} $axis - The flex axis ('width' or 'height').
+// @param {String} $type - The type of flex items ('col', 'cols', 'row', 'rows').
+// @param {String | Null} $size - A size prefix for the generated classes (e.g., 'sm', 'md').
+// @param {String} $divider - A divider string for the generated classes (e.g., '-').
+@mixin flexDivision($axis, $type, $size, $divider) {
+  // Validate parameters
+  $checkedAxis: val.listItem((width, height), $axis, 'flexDivision.axis');
+  $checkedType: val.listItem(('col', 'cols', 'rows', 'row'), $type, 'flexDivision.type');
+  $checkedBase: val.number($axisDivisions, 'flexDivision.axisDivisions');
+
+  $mainClass: if(
+    sass($size): '#{$size}#{$divider}#{$type}' ; else: $type
+  );
+
+  @if (not $size) and $type == 'cols' or $type == 'rows' {
+    > * {
+      flex: 0 0 auto;
+      max-#{$axis}: 100%;
+    }
+  }
+
+  @for $i from 0 through $axisDivisions {
+    @if $type == 'cols' or $type == 'rows' {
+      $class: if(
+        sass($i == 0): auto; else: $i
+      );
+      $axisSize: if(
+        sass($i == 0): auto; else: calc(100% / $i)
+      );
+
+      &.#{$mainClass}#{\:}#{$class} > * {
+        @if ($size) {
+          #{$axis}: #{$axisSize} !important;
+        } @else {
+          #{$axis}: #{$axisSize};
+        }
+      }
+    } @else if $type == 'col' or $type == 'row' {
+      $axisSize: if(
+        sass($i == 0): 100%; else: calc(($i / $axisDivisions) * 100%)
+      );
+      $class: if(
+        sass($i == 0): '' ; else: $i
+      );
+      $classSize: if(
+        sass($i == 0): #{$class}; else: #{\:}#{$class}
+      );
+
+      > .#{$mainClass}#{$classSize} {
+        @if ($size) {
+          #{$axis}: #{$axisSize} !important;
+        } @else {
+          #{$axis}: #{$axisSize};
+        }
+      }
+    }
+  }
+}