aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--config.yml1
-rw-r--r--scss/_card.scss10
-rw-r--r--scss/_carousel.scss4
-rw-r--r--scss/_custom-forms.scss12
-rw-r--r--scss/_forms.scss8
-rw-r--r--scss/_functions.scss44
-rw-r--r--scss/_images.scss2
-rw-r--r--scss/_jumbotron.scss2
-rw-r--r--scss/_modal.scss4
-rw-r--r--scss/_popover.scss18
-rw-r--r--scss/_tooltip.scss8
-rw-r--r--scss/_variables.scss14
-rw-r--r--scss/mixins/_forms.scss2
-rw-r--r--scss/mixins/_grid-framework.scss4
-rw-r--r--scss/mixins/_grid.scss22
-rw-r--r--scss/utilities/_embed.scss2
-rw-r--r--scss/vendor/_rfs.scss228
-rw-r--r--site/assets/scss/_component-examples.scss6
-rw-r--r--site/assets/scss/_masthead.scss2
-rw-r--r--site/assets/scss/_skippy.scss4
-rw-r--r--site/content/docs/4.6/content/typography.md2
21 files changed, 233 insertions, 166 deletions
diff --git a/config.yml b/config.yml
index f072f329f..c9e8c7351 100644
--- a/config.yml
+++ b/config.yml
@@ -50,6 +50,7 @@ params:
current_version: "4.6.0"
current_ruby_version: "4.6.0"
docs_version: "4.6"
+ rfs_version: "v8.1.0"
github_org: "https://github.com/twbs"
repo: "https://github.com/twbs/bootstrap"
twitter: "getbootstrap"
diff --git a/scss/_card.scss b/scss/_card.scss
index faaa75ef7..a974163f8 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -58,7 +58,7 @@
}
.card-subtitle {
- margin-top: -$card-spacer-y / 2;
+ margin-top: -$card-spacer-y * .5;
margin-bottom: 0;
}
@@ -109,15 +109,15 @@
//
.card-header-tabs {
- margin-right: -$card-spacer-x / 2;
+ margin-right: -$card-spacer-x * .5;
margin-bottom: -$card-spacer-y;
- margin-left: -$card-spacer-x / 2;
+ margin-left: -$card-spacer-x * .5;
border-bottom: 0;
}
.card-header-pills {
- margin-right: -$card-spacer-x / 2;
- margin-left: -$card-spacer-x / 2;
+ margin-right: -$card-spacer-x * .5;
+ margin-left: -$card-spacer-x * .5;
}
// Card image
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 28f1e17d1..25aaf5873 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -189,9 +189,9 @@
.carousel-caption {
position: absolute;
- right: (100% - $carousel-caption-width) / 2;
+ right: (100% - $carousel-caption-width) * .5;
bottom: 20px;
- left: (100% - $carousel-caption-width) / 2;
+ left: (100% - $carousel-caption-width) * .5;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 06725ff36..b3db8c48f 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -26,7 +26,7 @@
left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
width: $custom-control-indicator-size;
- height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
+ height: ($font-size-base * $line-height-base + $custom-control-indicator-size) * .5;
opacity: 0;
&:checked ~ .custom-control-label::before {
@@ -83,7 +83,7 @@
// Background-color and (when enabled) gradient
&::before {
position: absolute;
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
@@ -98,7 +98,7 @@
// Foreground (icon)
&::after {
position: absolute;
- top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) * .5;
left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
@@ -186,7 +186,7 @@
}
&::after {
- top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+ top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) * .5, $custom-control-indicator-border-width * 2);
left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
width: $custom-switch-indicator-size;
height: $custom-switch-indicator-size;
@@ -406,7 +406,7 @@
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
- margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
+ margin-top: ($custom-range-track-height - $custom-range-thumb-height) * .5; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
@@ -481,7 +481,7 @@
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
- border-width: $custom-range-thumb-height / 2;
+ border-width: $custom-range-thumb-height * .5;
@include box-shadow($custom-range-track-box-shadow);
}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index a2494ceaf..cde466327 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -199,13 +199,13 @@ textarea.form-control {
.form-row {
display: flex;
flex-wrap: wrap;
- margin-right: -$form-grid-gutter-width / 2;
- margin-left: -$form-grid-gutter-width / 2;
+ margin-right: -$form-grid-gutter-width * .5;
+ margin-left: -$form-grid-gutter-width * .5;
> .col,
> [class*="col-"] {
- padding-right: $form-grid-gutter-width / 2;
- padding-left: $form-grid-gutter-width / 2;
+ padding-right: $form-grid-gutter-width * .5;
+ padding-left: $form-grid-gutter-width * .5;
}
}
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 8abc31164..f940fb430 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -75,7 +75,7 @@
$g: green($color);
$b: blue($color);
- $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+ $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
@if ($yiq >= $yiq-contrasted-threshold) {
@return $dark;
@@ -158,3 +158,45 @@
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}
+
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
diff --git a/scss/_images.scss b/scss/_images.scss
index b11b45a37..3d6a1014c 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -32,7 +32,7 @@
}
.figure-img {
- margin-bottom: $spacer / 2;
+ margin-bottom: $spacer * .5;
line-height: 1;
}
diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
index bcd7dcad9..2c617edb5 100644
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -1,5 +1,5 @@
.jumbotron {
- padding: $jumbotron-padding ($jumbotron-padding / 2);
+ padding: $jumbotron-padding ($jumbotron-padding * .5);
margin-bottom: $jumbotron-padding;
color: $jumbotron-color;
background-color: $jumbotron-bg;
diff --git a/scss/_modal.scss b/scss/_modal.scss
index e43c70fbb..4d01788d7 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -175,7 +175,7 @@
flex-wrap: wrap;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
- padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+ padding: $modal-inner-padding - $modal-footer-margin-between * .5;
border-top: $modal-footer-border-width solid $modal-footer-border-color;
@include border-bottom-radius($modal-content-inner-border-radius);
@@ -183,7 +183,7 @@
// This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * {
- margin: $modal-footer-margin-between / 2;
+ margin: $modal-footer-margin-between * .5;
}
}
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 0ad76af3e..c7106a809 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -43,13 +43,13 @@
&::before {
bottom: 0;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-outer-color;
}
&::after {
bottom: $popover-border-width;
- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
border-top-color: $popover-arrow-color;
}
}
@@ -66,13 +66,13 @@
&::before {
left: 0;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-outer-color;
}
&::after {
left: $popover-border-width;
- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+ border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
border-right-color: $popover-arrow-color;
}
}
@@ -86,13 +86,13 @@
&::before {
top: 0;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-outer-color;
}
&::after {
top: $popover-border-width;
- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+ border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
border-bottom-color: $popover-arrow-color;
}
}
@@ -104,7 +104,7 @@
left: 50%;
display: block;
width: $popover-arrow-width;
- margin-left: -$popover-arrow-width / 2;
+ margin-left: -$popover-arrow-width * .5;
content: "";
border-bottom: $popover-border-width solid $popover-header-bg;
}
@@ -121,13 +121,13 @@
&::before {
right: 0;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-outer-color;
}
&::after {
right: $popover-border-width;
- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+ border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
border-left-color: $popover-arrow-color;
}
}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 6b3aa62dd..6771b4eb4 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -37,7 +37,7 @@
&::before {
top: 0;
- border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-top-color: $tooltip-arrow-color;
}
}
@@ -53,7 +53,7 @@
&::before {
right: 0;
- border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
border-right-color: $tooltip-arrow-color;
}
}
@@ -67,7 +67,7 @@
&::before {
bottom: 0;
- border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-bottom-color: $tooltip-arrow-color;
}
}
@@ -83,7 +83,7 @@
&::before {
left: 0;
- border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
border-left-color: $tooltip-arrow-color;
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 705b52121..7d8fb3b3b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -299,7 +299,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: $spacer * .5 !default;
$headings-font-family: null !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
@@ -495,7 +495,7 @@ $input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -565,7 +565,7 @@ $custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius: $custom-control-indicator-size * .5 !default;
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
$custom-select-padding-y: $input-padding-y !default;
@@ -710,12 +710,12 @@ $nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
$nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: $spacer / 2 !default;
+$nav-divider-margin-y: $spacer * .5 !default;
// Navbar
-$navbar-padding-y: $spacer / 2 !default;
+$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: $spacer !default;
$navbar-nav-link-padding-x: .5rem !default;
@@ -724,7 +724,7 @@ $navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
@@ -845,7 +845,7 @@ $card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
-$card-group-margin: $grid-gutter-width / 2 !default;
+$card-group-margin: $grid-gutter-width * .5 !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 234c6b431..b8847cc80 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -69,7 +69,7 @@
// Align tooltip to form elements
.form-row > .col > &,
.form-row > [class*="col-"] > & {
- left: $form-grid-gutter-width / 2;
+ left: $form-grid-gutter-width * .5;
}
}
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 6fc8e8561..ef3291753 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -8,8 +8,8 @@
%grid-column {
position: relative;
width: 100%;
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
+ padding-right: $gutter * .5;
+ padding-left: $gutter * .5;
}
@each $breakpoint in map-keys($breakpoints) {
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 19babc09f..0eb09910d 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -4,8 +4,8 @@
@mixin make-container($gutter: $grid-gutter-width) {
width: 100%;
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
+ padding-right: $gutter * .5;
+ padding-left: $gutter * .5;
margin-right: auto;
margin-left: auto;
}
@@ -13,8 +13,8 @@
@mixin make-row($gutter: $grid-gutter-width) {
display: flex;
flex-wrap: wrap;
- margin-right: -$gutter / 2;
- margin-left: -$gutter / 2;
+ margin-right: -$gutter * .5;
+ margin-left: -$gutter * .5;
}
// For each breakpoint, define the maximum width of the container in a media query
@@ -33,16 +33,16 @@
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
- padding-right: $gutter / 2;
- padding-left: $gutter / 2;
+ padding-right: $gutter * .5;
+ padding-left: $gutter * .5;
}
@mixin make-col($size, $columns: $grid-columns) {
- flex: 0 0 percentage($size / $columns);
+ flex: 0 0 percentage(divide($size, $columns));
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
- max-width: percentage($size / $columns);
+ max-width: percentage(divide($size, $columns));
}
@mixin make-col-auto() {
@@ -52,7 +52,7 @@
}
@mixin make-col-offset($size, $columns: $grid-columns) {
- $num: $size / $columns;
+ $num: divide($size, $columns);
margin-left: if($num == 0, 0, percentage($num));
}
@@ -63,7 +63,7 @@
// style grid.
@mixin row-cols($count) {
> * {
- flex: 0 0 100% / $count;
- max-width: 100% / $count;
+ flex: 0 0 divide(100%, $count);
+ max-width: divide(100%, $count);
}
}
diff --git a/scss/utilities/_embed.scss b/scss/utilities/_embed.scss
index 4497ac040..e37465e40 100644
--- a/scss/utilities/_embed.scss
+++ b/scss/utilities/_embed.scss
@@ -33,7 +33,7 @@
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
&::before {
- padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
+ padding-top: percentage(divide($embed-responsive-aspect-ratio-y, $embed-responsive-aspect-ratio-x));
}
}
}
diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss
index 497e07eda..e453f441e 100644
--- a/scss/vendor/_rfs.scss
+++ b/scss/vendor/_rfs.scss
@@ -2,9 +2,9 @@
// SCSS RFS mixin
//
-// Automated font-resizing
+// Automated responsive font sizes
//
-// See https://github.com/twbs/rfs
+// Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)
// Configuration
@@ -12,11 +12,19 @@
$rfs-base-font-size: 1.25rem !default;
$rfs-font-size-unit: rem !default;
+@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
+ @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
+}
+
// Breakpoint at where font-size starts decreasing if screen width is smaller
$rfs-breakpoint: 1200px !default;
$rfs-breakpoint-unit: px !default;
-// Resize font-size based on screen height and width
+@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
+ @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+}
+
+// Resize font size based on screen height and width
$rfs-two-dimensional: false !default;
// Factor of decrease
@@ -41,12 +49,54 @@ $enable-responsive-font-sizes: true !default;
// Cache $rfs-base-font-size unit
$rfs-base-font-size-unit: unit($rfs-base-font-size);
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ @if $dividend == 0 {
+ @return 0;
+ }
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+ $remainder: $dividend;
+ $result: 0;
+ $factor: 10;
+ @while ($remainder > 0 and $precision >= 0) {
+ $quotient: 0;
+ @while ($remainder >= $divisor) {
+ $remainder: $remainder - $divisor;
+ $quotient: $quotient + 1;
+ }
+ $result: $result * 10 + $quotient;
+ $factor: $factor * .1;
+ $remainder: $remainder * 10;
+ $precision: $precision - 1;
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
+ $result: $result + 1;
+ }
+ }
+ $result: $result * $factor * $sign;
+ $dividend-unit: unit($dividend);
+ $divisor-unit: unit($divisor);
+ $unit-map: (
+ "px": 1px,
+ "rem": 1rem,
+ "em": 1em,
+ "%": 1%
+ );
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+ $result: $result * map-get($unit-map, $dividend-unit);
+ }
+ @return $result;
+}
+
// Remove px-unit from $rfs-base-font-size for calculations
@if $rfs-base-font-size-unit == "px" {
- $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+ $rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
}
@else if $rfs-base-font-size-unit == "rem" {
- $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+ $rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));
}
// Cache $rfs-breakpoint unit to prevent multiple calls
@@ -54,13 +104,55 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
// Remove unit from $rfs-breakpoint for calculations
@if $rfs-breakpoint-unit-cache == "px" {
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
}
@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+ $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
+}
+
+// Internal mixin that adds disable classes to the selector if needed.
+@mixin _rfs-disable-class {
+ @if $rfs-class == "disable" {
+ // Adding an extra class increases specificity, which prevents the media query to override the font size
+ &,
+ .disable-responsive-font-size &,
+ &.disable-responsive-font-size {
+ @content;
+ }
+ }
+ @else {
+ @content;
+ }
+}
+
+// Internal mixin that adds enable classes to the selector if needed.
+@mixin _rfs-enable-class {
+ @if $rfs-class == "enable" {
+ .enable-responsive-font-size &,
+ &.enable-responsive-font-size {
+ @content;
+ }
+ }
+ @else {
+ @content;
+ }
}
-// Responsive font-size mixin
+// Internal mixin used to determine which media query needs to be used
+@mixin _rfs-media-query($mq-value) {
+ @if $rfs-two-dimensional {
+ @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
+ @content;
+ }
+ }
+ @else {
+ @media (max-width: #{$mq-value}) {
+ @content;
+ }
+ }
+}
+
+// Responsive font size mixin
@mixin rfs($fs, $important: false) {
// Cache $fs unit
$fs-unit: if(type-of($fs) == "number", unit($fs), false);
@@ -73,128 +165,60 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
font-size: #{$fs}#{$rfs-suffix};
}
@else {
- // Variables for storing static and fluid rescaling
- $rfs-static: null;
- $rfs-fluid: null;
-
- // Remove px-unit from $fs for calculations
+ // Remove unit from $fs for calculations
@if $fs-unit == "px" {
- $fs: $fs / ($fs * 0 + 1);
+ $fs: divide($fs, $fs * 0 + 1);
}
@else if $fs-unit == "rem" {
- $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+ $fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));
}
- // Set default font-size
- @if $rfs-font-size-unit == rem {
- $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
- }
- @else if $rfs-font-size-unit == px {
- $rfs-static: #{$fs}px#{$rfs-suffix};
+ // Set default font size
+ $rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px);
+
+ // Only add the media query if the font size is bigger than the minimum font size
+ @if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
+ font-size: #{$rfs-static}#{$rfs-suffix};
}
@else {
- @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
- }
-
- // Only add media query if font-size is bigger as the minimum font-size
- // If $rfs-factor == 1, no rescaling will take place
- @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
- $min-width: null;
- $variable-unit: null;
+ // Calculate the minimum font size for $fs
+ $fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);
- // Calculate minimum font-size for given font-size
- $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
-
- // Calculate difference between given font-size and minimum font-size for given font-size
+ // Calculate difference between $fs and the minimum font size
$fs-diff: $fs - $fs-min;
// Base font-size formatting
- // No need to check if the unit is valid, because we did that before
- $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
+ $min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
- // If two-dimensional, use smallest of screen width and height
+ // Use `vmin` if two-dimensional is enabled
$variable-unit: if($rfs-two-dimensional, vmin, vw);
// Calculate the variable width between 0 and $rfs-breakpoint
- $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+ $variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
- // Set the calculated font-size.
+ // Set the calculated font-size
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
- }
- // Rendering
- @if $rfs-fluid == null {
- // Only render static font-size if no fluid font-size is available
- font-size: $rfs-static;
- }
- @else {
- $mq-value: null;
+ // Breakpoint formatting
+ $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
- // RFS breakpoint formatting
- @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
- $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
- }
- @else if $rfs-breakpoint-unit == px {
- $mq-value: #{$rfs-breakpoint}px;
- }
- @else {
- @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
+ @include _rfs-disable-class {
+ font-size: #{$rfs-static}#{$rfs-suffix};
}
- @if $rfs-class == "disable" {
- // Adding an extra class increases specificity,
- // which prevents the media query to override the font size
- &,
- .disable-responsive-font-size &,
- &.disable-responsive-font-size {
- font-size: $rfs-static;
+ @include _rfs-media-query($mq-value) {
+ @include _rfs-enable-class {
+ font-size: $rfs-fluid;
}
- }
- @else {
- font-size: $rfs-static;
- }
- @if $rfs-two-dimensional {
- @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
- @if $rfs-class == "enable" {
- .enable-responsive-font-size &,
- &.enable-responsive-font-size {
- font-size: $rfs-fluid;
- }
- }
- @else {
- font-size: $rfs-fluid;
- }
-
- @if $rfs-safari-iframe-resize-bug-fix {
- // stylelint-disable-next-line length-zero-no-unit
- min-width: 0vw;
- }
- }
- }
- @else {
- @media (max-width: #{$mq-value}) {
- @if $rfs-class == "enable" {
- .enable-responsive-font-size &,
- &.enable-responsive-font-size {
- font-size: $rfs-fluid;
- }
- }
- @else {
- font-size: $rfs-fluid;
- }
-
- @if $rfs-safari-iframe-resize-bug-fix {
- // stylelint-disable-next-line length-zero-no-unit
- min-width: 0vw;
- }
- }
+ // Include safari iframe resize fix if needed
+ min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
}
}
}
}
-// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
+// The font-size & responsive-font-size mixins use RFS to rescale the font size
@mixin font-size($fs, $important: false) {
@include rfs($fs, $important);
}
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 89c52208f..68856059b 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -88,7 +88,7 @@
.bd-example {
position: relative;
padding: 1rem;
- margin: 1rem (-$grid-gutter-width / 2) 0;
+ margin: 1rem (-$grid-gutter-width * .5) 0;
border: solid $gray-100;
border-width: .2rem 0 0;
@include clearfix();
@@ -350,8 +350,8 @@
}
.bd-content .highlight {
- margin-right: (-$grid-gutter-width / 2);
- margin-left: (-$grid-gutter-width / 2);
+ margin-right: (-$grid-gutter-width * .5);
+ margin-left: (-$grid-gutter-width * .5);
@include media-breakpoint-up(sm) {
margin-right: 0;
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 6a13562e3..c16aa0138 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -2,7 +2,7 @@
.bd-masthead {
position: relative;
- padding: 3rem ($grid-gutter-width / 2);
+ padding: 3rem ($grid-gutter-width * .5);
background: linear-gradient(to right bottom, lighten($bd-purple-light, 16%) 50%, #fff 50%);
h1 {
diff --git a/site/assets/scss/_skippy.scss b/site/assets/scss/_skippy.scss
index 894db70db..125f44c84 100644
--- a/site/assets/scss/_skippy.scss
+++ b/site/assets/scss/_skippy.scss
@@ -11,8 +11,8 @@
position: static !important;
width: auto !important;
height: auto !important;
- padding: $spacer / 2 !important;
- margin: $spacer / 4 !important;
+ padding: $spacer * .5 !important;
+ margin: $spacer * .25 !important;
overflow: visible !important;
clip: auto !important;
white-space: normal !important;
diff --git a/site/content/docs/4.6/content/typography.md b/site/content/docs/4.6/content/typography.md
index 9ed7e9a6b..2fd6e0362 100644
--- a/site/content/docs/4.6/content/typography.md
+++ b/site/content/docs/4.6/content/typography.md
@@ -283,4 +283,4 @@ Align terms and descriptions horizontally by using our grid system's predefined
As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. <abbr title="Responsive font sizes">RFS</abbr> can be enabled by changing the `$enable-responsive-font-sizes` Sass variable to `true` and recompiling Bootstrap.
-To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/v8.0.4).
+To support <abbr title="Responsive font sizes">RFS</abbr>, we use a Sass mixin to replace our normal `font-size` properties. Responsive font sizes will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior. More about <abbr title="Responsive font sizes">RFS</abbr> and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/{{< param "rfs_version" >}}).
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 02:46:49 +0000