Add RFS to utility API (#30050)

diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss
index ed72265a47e1b7a41f16b0c2d194eabe3457451f..ff7905c90044a076c46cfcf58a0578cd0f20595e 100644 (file)
--- a/scss/bootstrap-grid.scss
+++ b/scss/bootstrap-grid.scss
@@ -23,6 +23,8 @@ html {
 @import "mixins/grid";
 @import "mixins/utilities";
 
+@import "vendor/rfs";
+
 @import "containers";
 @import "grid";
 

diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 0d7fc61f056050e43b837be6524d92844603e36a..cd9f930561045170daea84151165411d80d8bd32 100644 (file)
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -1,6 +1,6 @@
 // Utility generator
 // Used to generate utilities & print utilities
-@mixin generate-utility($utility, $infix) {
+@mixin generate-utility($utility, $infix, $is-rfs-media-query: false) {
   $values: map-get($utility, values);
 
   // If the values are a list or string, convert it into a map
@@ -25,10 +25,24 @@
     // Don't prefix if value key is null (eg. with shadow class)
     $property-class-modifier: if($key, if($property-class == "" and $infix == "", "", "-") + $key, "");
 
-    .#{$property-class + $infix + $property-class-modifier} {
-      @each $property in $properties {
-        // stylelint-disable-next-line declaration-no-important
-        #{$property}: $value if($enable-important-utilities, !important, null);
+    @if map-get($utility, rfs) {
+      // Inside the media query
+      @if $is-rfs-media-query {
+        $val: rfs-value($value);
+
+        // Do not render anything if fluid and non fluid values are the same
+        $value: if($val == rfs-fluid-value($value), null, $val);
+      }
+      @else {
+        $value: rfs-fluid-value($value);
+      }
+    }
+
+    @if $value != null {
+      .#{$property-class + $infix + $property-class-modifier} {
+        @each $property in $properties {
+          #{$property}: $value if($enable-important-utilities, !important, null);
+        }
       }
     }
   }

diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 5b9b6651cb429c577a6ad3921282717bb552b16c..f1545b95149c23cd69347ac6025fa2e0f145eff8 100644 (file)
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -16,6 +16,24 @@
   }
 }
 
+// RFS rescaling
+@media (min-width: $rfs-mq-value) {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
+      // Loop over each utility property
+      @each $key, $utility in $utilities {
+        // The utility can be disabled with `false`, thus check if the utility is a map first
+        // Only proceed if responsive media queries are enabled or if it's the base media query
+        @if type-of($utility) == "map" and map-get($utility, rfs) {
+          @include generate-utility($utility, $infix, true);
+        }
+      }
+    }
+  }
+}
+
 
 // Print utilities
 @media print {

diff --git a/site/content/docs/4.3/utilities/api.md b/site/content/docs/4.3/utilities/api.md
index 9b4c344cb646e586f881c3ebb6e5a72501effbee..e52f52d298e315cc8a2b04c1a22a348ecb5e72c5 100644 (file)
--- a/site/content/docs/4.3/utilities/api.md
+++ b/site/content/docs/4.3/utilities/api.md
@@ -13,6 +13,7 @@ The `$utilities` map contains all utilities and is later merged with your custom
 
 - `property`: Name of the property, this can be a string or an array of strings (needed for eg. horizontal paddings or margins).
 - `responsive` _(optional)_: Boolean indicating if responsive classes need to be generated. `false` by default.
+- `rfs` _(optional)_: Variable to enable fluid rescaling. Have a look at the [RFS]({{< docsref "/getting-started/rfs" >}}) page to find out how this works. `false` by default.
 - `class` _(optional)_: Variable to change the class name if you don't want it to be the same as the property. In case you don't provide the `class` key and `property` key is an array of strings, the class name will be the first element of the `property` array.
 - `values`: This can be a list of values or a map if you don't want the class name to be the same as the value. If null is used as map key, it isn't rendered.
 - `print` _(optional)_: Boolean indicating if print classes need to be generated. `false` by default.