@use "config" as *;
@use "variables" as *;
@use "functions" as *;
-@use "vendor/rfs" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/box-shadow" as *;
align-items: center;
width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
- @include font-size($font-size-base);
+ font-size: $font-size-base;
color: var(--#{$prefix}accordion-btn-color);
text-align: start; // Reset button style
background-color: var(--#{$prefix}accordion-btn-bg);
@use "theme" as *;
@use "mixins/border-radius" as *;
@use "mixins/gradients" as *;
-@use "vendor/rfs" as *;
// scss-docs-start badge-variables
$badge-font-size: .75em !default;
// scss-docs-start badge-css-vars
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
- @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+ --#{$prefix}badge-font-size: #{$badge-font-size};
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-bg: var(--#{$prefix}bg-2);
display: inline-block;
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
- @include font-size(var(--#{$prefix}badge-font-size));
+ font-size: var(--#{$prefix}badge-font-size);
font-weight: var(--#{$prefix}badge-font-weight);
line-height: 1;
color: var(--#{$prefix}theme-contrast, var(--#{$prefix}badge-color));
@use "variables" as *;
@use "functions" as *;
@use "mixins/border-radius" as *;
-@use "vendor/rfs" as *;
// scss-docs-start breadcrumb-variables
$breadcrumb-font-size: null !default;
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
- @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
+ --#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
flex-wrap: wrap;
padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
- @include font-size(var(--#{$prefix}breadcrumb-font-size));
+ font-size: var(--#{$prefix}breadcrumb-font-size);
list-style: none;
background-color: var(--#{$prefix}breadcrumb-bg);
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
@use "mixins/color-mode" as *;
-@use "vendor/rfs" as *;
// scss-docs-start carousel-variables
$carousel-control-color: $white !default;
$enable-container-classes: true !default;
$enable-cssgrid: true !default;
$enable-button-pointers: true !default;
-$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: false !default;
$enable-deprecation-messages: true !default;
@use "mixins/box-shadow" as *;
@use "mixins/gradients" as *;
@use "mixins/caret" as *;
-@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// scss-docs-start dropdown-variables
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
- @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
+ --#{$prefix}dropdown-font-size: #{$dropdown-font-size};
--#{$prefix}dropdown-color: #{$dropdown-color};
--#{$prefix}dropdown-bg: #{$dropdown-bg};
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
min-width: var(--#{$prefix}dropdown-min-width);
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
margin: 0; // Override default margin of ul
- @include font-size(var(--#{$prefix}dropdown-font-size));
+ font-size: var(--#{$prefix}dropdown-font-size);
color: var(--#{$prefix}dropdown-color);
text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
display: block;
padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
margin-bottom: 0; // for use with heading elements
- @include font-size($font-size-sm);
+ font-size: $font-size-sm;
color: var(--#{$prefix}dropdown-header-color);
white-space: nowrap; // as with > li > a
}
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
-@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// scss-docs-start list-group-variables
@use "mixins/gradients" as *;
@use "mixins/focus-ring" as *;
@use "mixins/transition" as *;
-@use "vendor/rfs" as *;
// scss-docs-start nav-variables
$nav-gap: .125rem !default;
@use "mixins/transition" as *;
@use "mixins/color-mode" as *;
@use "mixins/deprecate" as *;
-@use "vendor/rfs" as *;
@use "layout/breakpoints" as *;
// scss-docs-start navbar-variables
padding-top: var(--#{$prefix}navbar-brand-padding-y);
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
- @include font-size(var(--#{$prefix}navbar-brand-font-size));
+ font-size: var(--#{$prefix}navbar-brand-font-size);
color: var(--#{$prefix}navbar-brand-color);
text-decoration: none;
white-space: nowrap;
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
- @include font-size(var(--#{$prefix}navbar-toggler-font-size));
+ font-size: var(--#{$prefix}navbar-toggler-font-size);
line-height: 1;
color: var(--#{$prefix}navbar-color);
background-color: transparent; // remove default button style
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/gradients" as *;
-@use "vendor/rfs" as *;
// scss-docs-start pagination-variables
$pagination-padding-y: .375rem !default;
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
- @include rfs($font-size, --#{$prefix}pagination-font-size);
+ --#{$prefix}pagination-font-size: #{$font-size};
--#{$prefix}pagination-border-radius: #{$border-radius};
}
// scss-docs-end pagination-mixin
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
- @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
+ --#{$prefix}pagination-font-size: #{$pagination-font-size};
--#{$prefix}pagination-color: #{$pagination-color};
--#{$prefix}pagination-bg: #{$pagination-bg};
--#{$prefix}pagination-border-width: #{$pagination-border-width};
position: relative;
display: block;
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
- @include font-size(var(--#{$prefix}pagination-font-size));
+ font-size: var(--#{$prefix}pagination-font-size);
color: var(--#{$prefix}pagination-color);
text-decoration: none;
background-color: var(--#{$prefix}pagination-bg);
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
-@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
// scss-docs-start popover-variables
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};
--#{$prefix}popover-max-width: #{$popover-max-width};
- @include rfs($popover-font-size, --#{$prefix}popover-font-size);
+ --#{$prefix}popover-font-size: #{$popover-font-size};
--#{$prefix}popover-bg: #{$popover-bg};
--#{$prefix}popover-border-width: #{$popover-border-width};
--#{$prefix}popover-border-color: #{$popover-border-color};
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
- @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
+ --#{$prefix}popover-header-font-size: #{$popover-header-font-size};
--#{$prefix}popover-header-color: #{$popover-header-color};
--#{$prefix}popover-header-bg: #{$popover-header-bg};
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
- @include font-size(var(--#{$prefix}popover-font-size));
+ font-size: var(--#{$prefix}popover-font-size);
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: var(--#{$prefix}popover-bg);
.popover-header {
padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
margin-bottom: 0; // Reset the default from Reboot
- @include font-size(var(--#{$prefix}popover-header-font-size));
+ font-size: var(--#{$prefix}popover-header-font-size);
color: var(--#{$prefix}popover-header-color);
background-color: var(--#{$prefix}popover-header-bg);
border-block-end: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
@use "mixins/gradients" as *;
@use "mixins/border-radius" as *;
@use "mixins/box-shadow" as *;
-@use "vendor/rfs" as *;
// scss-docs-start progress-variables
$progress-height: 1rem !default;
.progress-stacked {
// scss-docs-start progress-css-vars
--#{$prefix}progress-height: #{$progress-height};
- @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+ --#{$prefix}progress-font-size: #{$progress-font-size};
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
display: flex;
height: var(--#{$prefix}progress-height);
overflow: hidden; // force rounded corners by cropping it
- @include font-size(var(--#{$prefix}progress-font-size));
+ font-size: var(--#{$prefix}progress-font-size);
background-color: var(--#{$prefix}progress-bg);
@include border-radius(var(--#{$prefix}progress-border-radius));
@include box-shadow(var(--#{$prefix}progress-box-shadow));
@use "variables" as *;
@use "theme" as *;
// @use "maps" as *;
-@use "vendor/rfs" as *;
@use "mixins/color-mode" as *;
@use "forms/form-variables" as *;
--#{$prefix}line-height-6xl: 1;
// scss-docs-end root-font-size-variables
- @include rfs($font-size-base, --#{$prefix}body-font-size);
+ --#{$prefix}body-font-size: #{$font-size-base};
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
@use "config" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
-@use "vendor/rfs" as *;
// scss-docs-start toast-variables
$toast-max-width: 350px !default;
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
- @include rfs($toast-font-size, --#{$prefix}toast-font-size);
+ --#{$prefix}toast-font-size: #{$toast-font-size};
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
width: var(--#{$prefix}toast-max-width);
max-width: 100%;
- @include font-size(var(--#{$prefix}toast-font-size));
+ font-size: var(--#{$prefix}toast-font-size);
color: var(--#{$prefix}toast-color);
pointer-events: auto;
background-color: var(--#{$prefix}toast-bg);
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/deprecate" as *;
-@use "vendor/rfs" as *;
@use "mixins/reset-text" as *;
// scss-docs-start tooltip-variables
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
- @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+ --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
--#{$prefix}tooltip-color: #{$tooltip-color};
--#{$prefix}tooltip-bg: #{$tooltip-bg};
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
- @include font-size(var(--#{$prefix}tooltip-font-size));
+ font-size: var(--#{$prefix}tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
@use "../theme" as *;
@use "../variables" as *;
@use "../functions" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/focus-ring" as *;
--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
- @include rfs($btn-font-size, --#{$prefix}btn-font-size);
+ --#{$prefix}btn-font-size: #{$btn-font-size};
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$btn-color};
min-height: var(--#{$prefix}btn-min-height);
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
font-family: var(--#{$prefix}btn-font-family);
- @include font-size(var(--#{$prefix}btn-font-size));
+ font-size: var(--#{$prefix}btn-font-size);
font-weight: var(--#{$prefix}btn-font-weight);
line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$prefix}btn-color);
@use "../config" as *;
@use "../variables" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/image" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
}
.figure-caption {
- @include font-size($figure-caption-font-size);
+ font-size: $figure-caption-font-size;
color: $figure-caption-color;
}
}
@use "../colors" as *;
@use "../config" as *;
@use "../variables" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
body {
margin: 0; // 1
font-family: var(--#{$prefix}body-font-family);
- @include font-size(var(--#{$prefix}body-font-size));
+ font-size: var(--#{$prefix}body-font-size);
font-weight: var(--#{$prefix}body-font-weight);
line-height: var(--#{$prefix}body-line-height);
color: var(--#{$prefix}color-body);
h1,
.h1 {
@extend %heading;
- @include font-size($h1-font-size);
+ font-size: $h1-font-size;
}
h2,
.h2 {
@extend %heading;
- @include font-size($h2-font-size);
+ font-size: $h2-font-size;
}
h3,
.h3 {
@extend %heading;
- @include font-size($h3-font-size);
+ font-size: $h3-font-size;
}
h4,
.h4 {
@extend %heading;
- @include font-size($h4-font-size);
+ font-size: $h4-font-size;
}
h5,
.h5 {
@extend %heading;
- @include font-size($h5-font-size);
+ font-size: $h5-font-size;
}
h6,
.h6 {
@extend %heading;
- @include font-size($h6-font-size);
+ font-size: $h6-font-size;
}
small,
.small {
- @include font-size($small-font-size);
+ font-size: $small-font-size;
}
sub,
sup {
position: relative;
- @include font-size($sub-sup-font-size);
+ font-size: $sub-sup-font-size;
line-height: 0;
vertical-align: baseline;
}
kbd,
samp {
font-family: $font-family-code;
- @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+ font-size: 1em; // Correct the odd `em` font sizing in all browsers.
}
// 1. Remove browser default top margin
margin-top: 0; // 1
margin-bottom: 1rem; // 2
overflow: auto; // 3
- @include font-size($code-font-size);
+ font-size: $code-font-size;
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
- @include font-size(inherit);
+ font-size: inherit;
color: inherit;
word-break: normal;
}
}
code {
- @include font-size($code-font-size);
+ font-size: $code-font-size;
color: var(--#{$prefix}code-color);
word-wrap: break-word;
kbd {
padding: $kbd-padding-y $kbd-padding-x;
- @include font-size($kbd-font-size);
+ font-size: $kbd-font-size;
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
kbd {
padding: 0;
- @include font-size(1em);
+ font-size: 1em;
font-weight: inherit; // mdo-do: check if this is needed
}
}
textarea {
margin: 0; // 1
font-family: inherit;
- @include font-size(inherit);
+ font-size: inherit;
line-height: inherit;
}
width: 100%;
padding: 0;
margin-bottom: $legend-margin-bottom;
+ font-size: $legend-font-size;
font-weight: $legend-font-weight;
line-height: inherit;
- @include font-size($legend-font-size);
+ * {
clear: inline-start; // 2
@use "../config" as *;
@use "../variables" as *;
@use "../mixins/lists" as *;
-@use "../vendor/rfs" as *;
@layer content {
//
// Builds on `abbr`
.initialism {
- @include font-size($initialism-font-size);
+ font-size: $initialism-font-size;
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $blockquote-margin-y;
- @include font-size($blockquote-font-size);
+ font-size: $blockquote-font-size;
> :last-child {
margin-bottom: 0;
.blockquote-footer {
margin-top: -$blockquote-margin-y;
margin-bottom: $blockquote-margin-y;
- @include font-size($blockquote-footer-font-size);
+ font-size: $blockquote-footer-font-size;
color: $blockquote-footer-color;
&::before {
@use "../colors" as *;
@use "../variables" as *;
@use "../functions" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/color-mode" as *;
@use "../config" as *;
@use "../variables" as *;
@use "../functions" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/color-mode" as *;
@use "../config" as *;
@use "../variables" as *;
-@use "../vendor/rfs" as *;
@use "form-variables" as *;
// scss-docs-start form-text-variables
@layer forms {
.form-text {
margin-top: $form-text-margin-top;
- @include font-size($form-text-font-size);
+ font-size: $form-text-font-size;
font-style: $form-text-font-style;
font-weight: $form-text-font-weight;
color: $form-text-color;
@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "form-variables" as *;
display: flex;
align-items: center;
padding: $input-group-addon-padding-y $input-group-addon-padding-x;
- @include font-size($input-font-size); // Match inputs
+ font-size: $input-font-size; // Match inputs
// font-weight: $input-group-addon-font-weight;
line-height: $input-line-height;
color: $input-group-addon-color;
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
- @include font-size($input-font-size-lg);
+ font-size: $input-font-size-lg;
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
- @include font-size($input-font-size-sm);
+ font-size: $input-font-size-sm;
@include border-radius($input-border-radius-sm);
}
@use "../variables" as *;
-@use "../vendor/rfs" as *;
@use "form-variables" as *;
// scss-docs-start form-label-variables
@layer forms {
.form-label {
margin-bottom: $form-label-margin-bottom;
- @include font-size($form-label-font-size);
+ font-size: $form-label-font-size;
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
color: $form-label-color;
padding-top: add($input-padding-y, $input-border-width);
padding-bottom: add($input-padding-y, $input-border-width);
margin-bottom: 0; // Override the `<legend>` default
- @include font-size(inherit); // Override the `<legend>` default
+ font-size: inherit; // Override the `<legend>` default
font-style: $form-label-font-style;
font-weight: $form-label-font-weight;
line-height: $input-line-height;
.col-form-label-lg {
padding-top: add($input-padding-y-lg, $input-border-width);
padding-bottom: add($input-padding-y-lg, $input-border-width);
- @include font-size($input-font-size-lg);
+ font-size: $input-font-size-lg;
}
.col-form-label-sm {
padding-top: add($input-padding-y-sm, $input-border-width);
padding-bottom: add($input-padding-y-sm, $input-border-width);
- @include font-size($input-font-size-sm);
+ font-size: $input-font-size-sm;
}
}
@use "../colors" as *;
@use "../variables" as *;
@use "../functions" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/color-mode" as *;
@use "../colors" as *;
@use "../variables" as *;
@use "../functions" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "../mixins/color-mode" as *;
@use "../config" as *;
@use "../variables" as *;
@use "../functions" as *;
-@use "../vendor/rfs" as *;
@use "../mixins/border-radius" as *;
@use "../mixins/box-shadow" as *;
@use "form-variables" as *;
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
- @include font-size($form-feedback-font-size);
+ font-size: $form-feedback-font-size;
font-style: $form-feedback-font-style;
color: $color;
}
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
- @include font-size($form-feedback-tooltip-font-size);
+ font-size: $form-feedback-tooltip-font-size;
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
- @include font-size($form-feedback-font-size);
+ font-size: $form-feedback-font-size;
font-style: $form-feedback-font-style;
color: $color;
}
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
- @include font-size($form-feedback-tooltip-font-size);
+ font-size: $form-feedback-tooltip-font-size;
line-height: $form-feedback-tooltip-line-height;
color: $tooltip-color;
background-color: $tooltip-bg-color;
@use "sass:meta";
@use "sass:string";
@use "../config" as *;
-@use "../vendor/rfs" as *;
// stylelint-disable scss/dollar-variable-pattern
//
// Used in conjunction with global variables to enable certain theme features.
-// Vendor
-// @forward "vendor/rfs";
-
// Deprecate
@forward "deprecate";
@use "../../config" as *;
@use "../../variables" as *;
@use "../../functions" as *;
-@use "../../vendor/rfs" as *;
@use "../../mixins/utilities" as *;
$true-terminal-output: false;
@use "sass:meta";
@use "../config" as *;
@use "../variables" as *;
-@use "../vendor/rfs" as *;
@use "../layout/breakpoints" as *;
@use "../mixins/utilities" as *;
@use "../utilities" as *;
}
}
- // 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 meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
- @include generate-utility($utility, $infix, true);
- }
- }
- }
- }
- }
-
// Print utilities
@media print {
+++ /dev/null
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-// stylelint-disable scss/dimension-no-non-numeric-values
-
-// SCSS RFS mixin
-//
-// Automated responsive values for font sizes, paddings, margins and much more
-//
-// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
-
-// Configuration
-
-// Base value
-$rfs-base-value: 1.25rem !default;
-$rfs-unit: rem !default;
-
-@if $rfs-unit != rem and $rfs-unit != px {
- @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
-}
-
-// Breakpoint at where values start decreasing if screen width is smaller
-$rfs-breakpoint: 1200px !default;
-$rfs-breakpoint-unit: px !default;
-
-@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 values based on screen height and width
-$rfs-two-dimensional: false !default;
-
-// Factor of decrease
-$rfs-factor: 10 !default;
-
-@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
- @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
-}
-
-// Mode. Possibilities: "min-media-query", "max-media-query"
-$rfs-mode: min-media-query !default;
-
-// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
-$rfs-class: false !default;
-
-// 1 rem = $rfs-rem-value px
-$rfs-rem-value: 16 !default;
-
-// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
-$rfs-safari-iframe-resize-bug-fix: false !default;
-
-// Disable RFS by setting $enable-rfs to false
-$enable-rfs: true !default;
-
-// Cache $rfs-base-value unit
-$rfs-base-value-unit: math.unit($rfs-base-value);
-
-// Remove px-unit from $rfs-base-value for calculations
-@if $rfs-base-value-unit == px {
- $rfs-base-value: math.div($rfs-base-value, $rfs-base-value * 0 + 1);
-}
-@else if $rfs-base-value-unit == rem {
- $rfs-base-value: math.div($rfs-base-value, math.div($rfs-base-value * 0 + 1, $rfs-rem-value));
-}
-
-// Cache $rfs-breakpoint unit to prevent multiple calls
-$rfs-breakpoint-unit-cache: math.unit($rfs-breakpoint);
-
-// Remove unit from $rfs-breakpoint for calculations
-@if $rfs-breakpoint-unit-cache == px {
- $rfs-breakpoint: math.div($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
-}
-@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
- $rfs-breakpoint: math.div($rfs-breakpoint, math.div($rfs-breakpoint * 0 + 1, $rfs-rem-value));
-}
-
-// Calculate the media query value
-$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{math.div($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
-$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
-$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
-
-// Internal mixin used to determine which media query needs to be used
-@mixin _rfs-media-query {
- @if $rfs-two-dimensional {
- @if $rfs-mode == max-media-query {
- @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
- @content;
- }
- }
- @else {
- @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
- @content;
- }
- }
- }
- @else {
- @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
- @content;
- }
- }
-}
-
-// Internal mixin that adds disable classes to the selector if needed.
-@mixin _rfs-rule {
- @if $rfs-class == disable and $rfs-mode == max-media-query {
- // Adding an extra class increases specificity, which prevents the media query to override the property
- &,
- .disable-rfs &,
- &.disable-rfs {
- @content;
- }
- }
- @else if $rfs-class == enable and $rfs-mode == min-media-query {
- .enable-rfs &,
- &.enable-rfs {
- @content;
- }
- } @else {
- @content;
- }
-}
-
-// Internal mixin that adds enable classes to the selector if needed.
-@mixin _rfs-media-query-rule {
-
- @if $rfs-class == enable {
- @if $rfs-mode == min-media-query {
- @content;
- }
-
- @include _rfs-media-query () {
- .enable-rfs &,
- &.enable-rfs {
- @content;
- }
- }
- }
- @else {
- @if $rfs-class == disable and $rfs-mode == min-media-query {
- .disable-rfs &,
- &.disable-rfs {
- @content;
- }
- }
- @include _rfs-media-query () {
- @content;
- }
- }
-}
-
-// Helper function to get the formatted non-responsive value
-@function rfs-value($values) {
- // Convert to list
- $values: if(meta.type-of($values) != list, ($values,), $values);
-
- $val: "";
-
- // Loop over each value and calculate value
- @each $value in $values {
- @if $value == 0 {
- $val: $val + " 0";
- }
- @else {
- // Cache $value unit
- $unit: if(meta.type-of($value) == "number", math.unit($value), false);
-
- @if $unit == px {
- // Convert to rem if needed
- $val: $val + " " + if($rfs-unit == rem, #{math.div($value, $value * 0 + $rfs-rem-value)}rem, $value);
- }
- @else if $unit == rem {
- // Convert to px if needed
- $val: $val + " " + if($rfs-unit == px, #{math.div($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;
- }
- }
- }
-
- // Remove first space
- @return string.unquote(string.slice($val, 2));
-}
-
-// Helper function to get the responsive value calculated by RFS
-@function rfs-fluid-value($values) {
- // Convert to list
- $values: if(meta.type-of($values) != list, ($values,), $values);
-
- $val: "";
-
- // Loop over each value and calculate value
- @each $value in $values {
- @if $value == 0 {
- $val: $val + " 0";
- } @else {
- // Cache $value unit
- $unit: if(meta.type-of($value) == "number", math.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 {
- // Remove unit from $value for calculations
- $value: math.div($value, $value * 0 + if($unit == px, 1, math.div(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, #{math.div($value, $rfs-rem-value)}rem, #{$value}px);
- }
- @else {
- // Calculate the minimum value
- $value-min: $rfs-base-value + math.div(abs($value) - $rfs-base-value, $rfs-factor);
-
- // Calculate difference between $value and the minimum value
- $value-diff: abs($value) - $value-min;
-
- // Base value formatting
- $min-width: if($rfs-unit == rem, #{math.div($value-min, $rfs-rem-value)}rem, #{$value-min}px);
-
- // Use negative value if needed
- $min-width: if($value < 0, -$min-width, $min-width);
-
- // 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: #{math.div($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
-
- // Return the calculated value
- $val: $val + " calc(" + $min-width + if($value < 0, " - ", " + ") + $variable-width + ")";
- }
- }
- }
- }
-
- // Remove first space
- @return string.unquote(string.slice($val, 2));
-}
-
-// RFS mixin
-@mixin rfs($values, $property: font-size) {
- @if $values != null {
- $val: rfs-value($values);
- $fluid-val: rfs-fluid-value($values);
-
- // Do not print the media query if responsive & non-responsive values are the same
- @if $val == $fluid-val {
- #{$property}: $val;
- }
- @else {
- @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, $fluid-val, $val);
- }
- }
- }
-}
-
-// Shorthand helper mixins
-@mixin font-size($value) {
- @include rfs($value);
-}
-
-@mixin padding($value) {
- @include rfs($value, padding);
-}
-
-@mixin padding-top($value) {
- @include rfs($value, padding-top);
-}
-
-@mixin padding-right($value) {
- @include rfs($value, padding-right);
-}
-
-@mixin padding-bottom($value) {
- @include rfs($value, padding-bottom);
-}
-
-@mixin padding-left($value) {
- @include rfs($value, padding-left);
-}
-
-@mixin margin($value) {
- @include rfs($value, margin);
-}
-
-@mixin margin-top($value) {
- @include rfs($value, margin-top);
-}
-
-@mixin margin-right($value) {
- @include rfs($value, margin-right);
-}
-
-@mixin margin-bottom($value) {
- @include rfs($value, margin-bottom);
-}
-
-@mixin margin-left($value) {
- @include rfs($value, margin-left);
-}
- title: JavaScript
- title: Accessibility
# - title: Community
- # - title: RFS
- title: Guides
icon: map
<a href={`${getConfig().github_org}/bootstrap/tree/v4-dev`} target="_blank" rel="noopener">Bootstrap 4</a>
</li>
<li class="mb-2"><a href={`${getConfig().github_org}/icons`} target="_blank" rel="noopener">Icons</a></li>
- <li class="mb-2"><a href={`${getConfig().github_org}/rfs`} target="_blank" rel="noopener">RFS</a></li>
<li class="mb-2">
<a href={`${getConfig().github_org}/examples`} target="_blank" rel="noopener">Examples repo</a>
</li>
<Code code={`npm i bootstrap@${getConfig().current_version}`} lang="sh" />
</div>
<a
- href={getVersionedDocsPath('getting-started/introduction')}
+ href={getVersionedDocsPath('getting-started/install')}
class="btn btn-lg bd-btn-lg btn-bd-primary d-flex align-items-center justify-content-center fw-semibold"
>
<svg class="bi me-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
## Responsive font sizes
-In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]([[docsref:/getting-started/rfs]]) to find out how this works.
+Bootstrap uses CSS's `clamp()` function to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes.
## CSS
### Sass mixins
-There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]([[docsref:/getting-started/rfs]]).
+There are no dedicated mixins for typography.
| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-button-pointers` | `true` (default) or `false` | Add “hand” cursor to non-disabled button elements. |
-| `$enable-rfs` | `true` (default) or `false` | Globally enables [RFS]([[docsref:/getting-started/rfs]]). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-negative-margins` | `true` or `false` (default) | Enables the generation of [negative margin utilities]([[docsref:/utilities/margin#negative-margin]]). |
| `$enable-deprecation-messages` | `true` (default) or `false` | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
+++ /dev/null
----
-title: RFS
-description: Bootstrap’s resizing engine responsively scales common CSS properties to better utilize available space across viewports and devices.
-toc: true
----
-
-## What is RFS?
-
-Bootstrap’s side project [RFS](https://github.com/twbs/rfs/tree/[[config:rfs_version]]) is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like `margin`, `padding`, `border-radius`, or even `box-shadow`.
-
-The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into `calc()` functions with a mix of `rem` and viewport units to enable the responsive scaling behavior.
-
-## Using RFS
-
-The mixins are included in Bootstrap and are available once you include Bootstrap’s `scss`. RFS can also be [installed standalone](https://github.com/twbs/rfs/tree/[[config:rfs_version]]#installation) if needed.
-
-### Using the mixins
-
-The `rfs()` mixin has shorthands for `font-size`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`. See the example below for source Sass and compiled CSS.
-
-```scss
-.title {
- @include font-size(4rem);
-}
-```
-
-```css
-.title {
- font-size: calc(1.525rem + 3.3vw);
-}
-
-@media (min-width: 1280px) {
- .title {
- font-size: 4rem;
- }
-}
-```
-
-Any other property can be passed to the `rfs()` mixin like this:
-
-```scss
-.selector {
- @include rfs(4rem, border-radius);
-}
-```
-
-`!important` can also just be added to whatever value you want:
-
-```scss
-.selector {
- @include padding(2.5rem !important);
-}
-```
-
-### Using the functions
-
-When you don’t want to use the includes, there are also two functions:
-
-- `rfs-value()` converts a value into a `rem` value if a `px` value is passed, in other cases it returns the same result.
-- `rfs-fluid-value()` returns the fluid version of a value if the property needs rescaling.
-
-In this example, we use one of Bootstrap’s built-in [responsive breakpoint mixins]([[docsref:/layout/breakpoints]]) to only apply styling below the `lg` breakpoint.
-
-```scss
-.selector {
- @include media-breakpoint-down(lg) {
- padding: rfs-fluid-value(2rem);
- font-size: rfs-fluid-value(1.125rem);
- }
-}
-```
-
-```css
-@media (max-width: 991.98px) {
- .selector {
- padding: calc(1.325rem + 0.9vw);
- font-size: 1.125rem; /* 1.125rem is small enough, so RFS won’t rescale this */
- }
-}
-```
-
-## Extended documentation
-
-RFS is a separate project under the Bootstrap organization. More about RFS and its configuration can be found on its [GitHub repository](https://github.com/twbs/rfs/tree/[[config:rfs_version]]).
| [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
| [`important`](#importance) | Optional | `false` | Boolean indicating if `!important` should be added to the utility's CSS rules. |
-| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]([[docsref:/getting-started/rfs]]). |
| [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
| `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
</BsTable>
@use "../../../scss/layout/breakpoints" as *;
-@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/mixins/border-radius" as *;
// stylelint-disable declaration-no-important, selector-max-id
padding: 15px 15px 15px 160px;
margin: 1rem 0;
overflow: hidden;
- @include font-size(.8125rem);
+ font-size: .8125rem;
line-height: 1.4;
text-align: start;
background-color: var(--bs-bg-1);
@use "../../../scss/config" as *;
@use "../../../scss/variables" as *;
-@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
@use "../../../scss/mixins/box-shadow" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/config" as *;
@use "../../../scss/variables" as *;
-@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/layout/breakpoints" as *;
//
max-width: 100%;
margin-bottom: 1.5rem;
- @include font-size(.875rem);
+ font-size: .875rem;
@include media-breakpoint-down(lg) {
&.table-bordered {
}
.bd-subtitle {
+ font-size: 1.5rem;
font-weight: 300;
- @include font-size(1.5rem);
}
.bi {
@use "../../../scss/config" as *;
@use "../../../scss/colors" as *;
@use "../../../scss/variables" as *;
-@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/mixins/border-radius" as *;
@use "../../../scss/mixins/transition" as *;
h1 {
--bs-heading-color: var(--bs-emphasis-color);
- @include font-size(4rem);
+ font-size: 4rem;
}
.lead {
- @include font-size(1rem);
+ font-size: 1rem;
font-weight: 400;
color: var(--bs-secondary-color);
}
@include media-breakpoint-up(md) {
.lead {
- @include font-size(1.5rem);
+ font-size: 1.5rem;
}
}
}
}
.lead {
- @include font-size(1rem);
+ font-size: 1rem;
}
@include media-breakpoint-up(md) {
.lead {
- @include font-size(1.25rem);
+ font-size: 1.25rem;
}
}
}
@use "../../../scss/mixins" as *;
@use "../../../scss/variables" as *;
@use "../../../scss/layout/breakpoints" as *;
-@use "../../../scss/vendor/rfs" as *;
:root {
--bs-font-sans-serif: "Geist", sans-serif;
-@use "../../../scss/vendor/rfs" as *;
-
//
// Placeholder svg used in the docs.
//
@layer custom {
.bd-placeholder-img {
- @include font-size(1.125rem);
+ font-size: 1.125rem;
user-select: none;
text-anchor: middle;
}
.bd-placeholder-img-lg {
- @include font-size(3.5rem);
+ font-size: 3.5rem;
}
}
@use "../../../scss/layout/breakpoints" as *;
-@use "../../../scss/vendor/rfs" as *;
@use "../../../scss/mixins/border-radius" as *;
// stylelint-disable selector-max-type, selector-no-qualifying-type
projects / thirdparty / bootstrap.git / commitdiff
