diff --git a/scss/bootstrap-grid.scss b/scss/bootstrap-grid.scss index ed72265a47e1..ff7905c90044 100644 --- 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 0d7fc61f0560..cd9f93056104 100644 --- 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 5b9b6651cb42..f1545b95149c 100644 --- 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 9b4c344cb646..e52f52d298e3 100644 --- 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.