Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update RFS to v10.0.0 #38365

Merged
merged 1 commit into from Mar 29, 2023
Merged

Update RFS to v10.0.0 #38365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion config.yml
View file
Open in desktop
Expand Up @@ -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"
Expand Down
52 changes: 23 additions & 29 deletions scss/vendor/_rfs.scss
View file
Open in desktop
@@ -1,4 +1,4 @@
// stylelint-disable property-disallowed-list, scss/dollar-variable-default
// stylelint-disable scss/dimension-no-non-numeric-values

// SCSS RFS mixin
//
Expand Down Expand Up @@ -154,8 +154,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
&.enable-rfs {
@content;
}
}
@else {
} @else {
@content;
}
}
Expand All @@ -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;
Expand All @@ -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;
}
}
Expand All @@ -193,28 +192,27 @@ $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
$unit: if(type-of($value) == "number", unit($value), false);

@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;
}
}
}
Expand All @@ -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
Expand All @@ -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 + ")";
}
}
}
Expand All @@ -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);
}
}
}
Expand Down