diff --git a/config.yml b/config.yml index de2f3806edb3..f7c9d8776a2a 100644 --- a/config.yml +++ b/config.yml @@ -55,7 +55,7 @@ params: current_version: "5.3.0-alpha2" current_ruby_version: "5.3.0-alpha2" docs_version: "5.3" - rfs_version: "v9.0.6" + rfs_version: "v10.0.0" github_org: "https://github.com/twbs" repo: "https://github.com/twbs/bootstrap" twitter: "getbootstrap" diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss index c7dcc52c895c..aa1f82b96189 100644 --- a/scss/vendor/_rfs.scss +++ b/scss/vendor/_rfs.scss @@ -1,4 +1,4 @@ -// stylelint-disable property-disallowed-list, scss/dollar-variable-default +// stylelint-disable scss/dimension-no-non-numeric-values // SCSS RFS mixin // @@ -154,8 +154,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height &.enable-rfs { @content; } - } - @else { + } @else { @content; } } @@ -168,7 +167,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height @content; } - @include _rfs-media-query { + @include _rfs-media-query () { .enable-rfs &, &.enable-rfs { @content; @@ -182,7 +181,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height @content; } } - @include _rfs-media-query { + @include _rfs-media-query () { @content; } } @@ -193,12 +192,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height // Convert to list $values: if(type-of($values) != list, ($values,), $values); - $val: ''; + $val: ""; // Loop over each value and calculate value @each $value in $values { @if $value == 0 { - $val: $val + ' 0'; + $val: $val + " 0"; } @else { // Cache $value unit @@ -206,15 +205,14 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height @if $unit == px { // Convert to rem if needed - $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value); + $val: $val + " " + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value); } @else if $unit == rem { // Convert to px if needed - $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value); - } - @else { + $val: $val + " " + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value); + } @else { // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value - $val: $val + ' ' + $value; + $val: $val + " " + $value; } } } @@ -228,30 +226,26 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height // Convert to list $values: if(type-of($values) != list, ($values,), $values); - $val: ''; + $val: ""; // Loop over each value and calculate value @each $value in $values { @if $value == 0 { - $val: $val + ' 0'; - } - - @else { + $val: $val + " 0"; + } @else { // Cache $value unit $unit: if(type-of($value) == "number", unit($value), false); // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value @if not $unit or $unit != px and $unit != rem { - $val: $val + ' ' + $value; - } - - @else { + $val: $val + " " + $value; + } @else { // Remove unit from $value for calculations $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value))); // Only add the media query if the value is greater than the minimum value @if abs($value) <= $rfs-base-value or not $enable-rfs { - $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px); + $val: $val + " " + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px); } @else { // Calculate the minimum value @@ -273,7 +267,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit}; // Return the calculated value - $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')'; + $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")"; } } } @@ -287,22 +281,22 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height @mixin rfs($values, $property: font-size) { @if $values != null { $val: rfs-value($values); - $fluidVal: rfs-fluid-value($values); + $fluid-val: rfs-fluid-value($values); // Do not print the media query if responsive & non-responsive values are the same - @if $val == $fluidVal { + @if $val == $fluid-val { #{$property}: $val; } @else { - @include _rfs-rule { - #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal); + @include _rfs-rule () { + #{$property}: if($rfs-mode == max-media-query, $val, $fluid-val); // Include safari iframe resize fix if needed min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null); } - @include _rfs-media-query-rule { - #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val); + @include _rfs-media-query-rule () { + #{$property}: if($rfs-mode == max-media-query, $fluid-val, $val); } } }