.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
- font-size: $badge-font-size;
+ @include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
text-align: center;
.close {
float: right;
- font-size: $close-font-size;
+ @include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
// Inline code
code {
- font-size: $code-font-size;
+ @include font-size($code-font-size);
color: $code-color;
word-break: break-word;
// User input typically entered via keyboard
kbd {
padding: $kbd-padding-y $kbd-padding-x;
- font-size: $kbd-font-size;
+ @include font-size($kbd-font-size);
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
kbd {
padding: 0;
- font-size: 100%;
+ @include font-size(100%);
font-weight: $nested-kbd-font-weight;
@include box-shadow(none);
}
// Blocks of code
pre {
display: block;
- font-size: $code-font-size;
+ @include font-size($code-font-size);
color: $pre-color;
// Account for some code outputs that place code tags in pre tags
code {
- font-size: inherit;
+ @include font-size(inherit);
color: inherit;
word-break: normal;
}
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
font-family: $custom-select-font-family;
- font-size: $custom-select-font-size;
+ @include font-size($custom-select-font-size);
font-weight: $custom-select-font-weight;
line-height: $custom-select-line-height;
color: $custom-select-color;
padding-top: $custom-select-padding-y-sm;
padding-bottom: $custom-select-padding-y-sm;
padding-left: $custom-select-padding-x-sm;
- font-size: $custom-select-font-size-sm;
+ @include font-size($custom-select-font-size-sm);
}
.custom-select-lg {
padding-top: $custom-select-padding-y-lg;
padding-bottom: $custom-select-padding-y-lg;
padding-left: $custom-select-padding-x-lg;
- font-size: $custom-select-font-size-lg;
+ @include font-size($custom-select-font-size-lg);
}
min-width: $dropdown-min-width;
padding: $dropdown-padding-y 0;
margin: $dropdown-spacer 0 0; // override default ul
- font-size: $dropdown-font-size;
+ @include font-size($dropdown-font-size);
color: $dropdown-color;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
list-style: none;
display: block;
padding: $dropdown-padding-y $dropdown-item-padding-x;
margin-bottom: 0; // for use with heading elements
- font-size: $font-size-sm;
+ @include font-size($font-size-sm);
color: $dropdown-header-color;
white-space: nowrap; // as with > li > a
}
height: $input-height;
padding: $input-padding-y $input-padding-x;
font-family: $input-font-family;
- font-size: $input-font-size;
+ @include font-size($input-font-size);
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
margin-bottom: 0; // Override the `<label>/<legend>` default
- font-size: inherit; // Override the `<legend>` default
+ @include font-size(inherit); // Override the `<legend>` default
line-height: $input-line-height;
}
.col-form-label-lg {
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
- font-size: $input-font-size-lg;
+ @include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
}
.col-form-label-sm {
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
- font-size: $input-font-size-sm;
+ @include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
}
.form-control-sm {
height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
- font-size: $input-font-size-sm;
+ @include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
.form-control-lg {
height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
- font-size: $input-font-size-lg;
+ @include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
}
.figure-caption {
- font-size: $figure-caption-font-size;
+ @include font-size($figure-caption-font-size);
color: $figure-caption-color;
}
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
- font-size: $input-font-size; // Match inputs
+ @include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
padding: $input-padding-y-lg $input-padding-x-lg;
- font-size: $input-font-size-lg;
+ @include font-size($input-font-size-lg);
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: $input-padding-y-sm $input-padding-x-sm;
- font-size: $input-font-size-sm;
+ @include font-size($input-font-size-sm);
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
//
// Used in conjunction with global variables to enable certain theme features.
+// Vendor
+@import "vendor/rfs";
+
// Deprecate
@import "mixins/deprecate";
padding-top: $navbar-brand-padding-y;
padding-bottom: $navbar-brand-padding-y;
margin-right: $navbar-padding-x;
- font-size: $navbar-brand-font-size;
+ @include font-size($navbar-brand-font-size);
line-height: inherit;
white-space: nowrap;
// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
- font-size: $navbar-toggler-font-size;
+ @include font-size($navbar-toggler-font-size);
line-height: 1;
background-color: transparent; // remove default button style
border: $border-width solid transparent; // remove default button style
// 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();
- font-size: $popover-font-size;
+ @include font-size($popover-font-size);
// Allow breaking very long words so they don't overflow the popover's bounds
word-wrap: break-word;
background-color: $popover-bg;
.popover-header {
padding: $popover-header-padding-y $popover-header-padding-x;
margin-bottom: 0; // Reset the default from Reboot
- font-size: $font-size-base;
+ @include font-size($font-size-base);
color: $popover-header-color;
background-color: $popover-header-bg;
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
display: flex;
height: $progress-height;
overflow: hidden; // force rounded corners by cropping it
- font-size: $progress-font-size;
+ @include font-size($progress-font-size);
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
body {
margin: 0; // 1
font-family: $font-family-base;
- font-size: $font-size-base;
+ @include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
}
small {
- font-size: 80%; // Add the correct font size in all browsers
+ @include font-size(80%); // Add the correct font size in all browsers
}
//
sub,
sup {
position: relative;
- font-size: 75%;
+ @include font-size(75%);
line-height: 0;
vertical-align: baseline;
}
kbd,
samp {
font-family: $font-family-monospace;
- font-size: 1em; // Correct the odd `em` font sizing in all browsers.
+ @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}
pre {
textarea {
margin: 0; // Remove the margin in Firefox and Safari
font-family: inherit;
- font-size: inherit;
+ @include font-size(inherit);
line-height: inherit;
}
max-width: 100%; // 1
padding: 0;
margin-bottom: .5rem;
- font-size: 1.5rem;
+ @include font-size(1.5rem);
line-height: inherit;
color: inherit; // 2
white-space: normal; // 1
.toast {
max-width: $toast-max-width;
overflow: hidden; // cheap rounded corners on nested items
- font-size: $toast-font-size; // knock it down to 14px
+ @include font-size($toast-font-size);
color: $toast-color;
background-color: $toast-background-color;
background-clip: padding-box;
// 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();
- font-size: $tooltip-font-size;
+ @include font-size($tooltip-font-size);
// Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word;
opacity: 0;
color: $headings-color;
}
-h1, .h1 { font-size: $h1-font-size; }
-h2, .h2 { font-size: $h2-font-size; }
-h3, .h3 { font-size: $h3-font-size; }
-h4, .h4 { font-size: $h4-font-size; }
-h5, .h5 { font-size: $h5-font-size; }
-h6, .h6 { font-size: $h6-font-size; }
+h1, .h1 { @include font-size($h1-font-size); }
+h2, .h2 { @include font-size($h2-font-size); }
+h3, .h3 { @include font-size($h3-font-size); }
+h4, .h4 { @include font-size($h4-font-size); }
+h5, .h5 { @include font-size($h5-font-size); }
+h6, .h6 { @include font-size($h6-font-size); }
.lead {
- font-size: $lead-font-size;
+ @include font-size($lead-font-size);
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
- font-size: $display1-size;
+ @include font-size($display1-size);
font-weight: $display1-weight;
line-height: $display-line-height;
}
.display-2 {
- font-size: $display2-size;
+ @include font-size($display2-size);
font-weight: $display2-weight;
line-height: $display-line-height;
}
.display-3 {
- font-size: $display3-size;
+ @include font-size($display3-size);
font-weight: $display3-weight;
line-height: $display-line-height;
}
.display-4 {
- font-size: $display4-size;
+ @include font-size($display4-size);
font-weight: $display4-weight;
line-height: $display-line-height;
}
small,
.small {
- font-size: $small-font-size;
+ @include font-size($small-font-size);
font-weight: $font-weight-normal;
}
// Builds on `abbr`
.initialism {
- font-size: 90%;
+ @include font-size(90%);
text-transform: uppercase;
}
// Blockquotes
.blockquote {
margin-bottom: $spacer;
- font-size: $blockquote-font-size;
+ @include font-size($blockquote-font-size);
}
.blockquote-footer {
display: block;
- font-size: $blockquote-small-font-size;
+ @include font-size($blockquote-small-font-size);
color: $blockquote-small-color;
&::before {
$enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default;
+$enable-responsive-font-sizes: false !default;
$enable-validation-icons: true !default;
$enable-deprecation-messages: true !default;
$input-height-border: $input-border-width * 2 !default;
-$input-height-inner: ($input-font-size * $input-line-height) + ($input-padding-y * 2) !default;
-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
+$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
+$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
-$input-height-inner-sm: ($input-font-size-sm * $input-line-height-sm) + ($input-padding-y-sm * 2) !default;
-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
-
-$input-height-inner-lg: ($input-font-size-lg * $input-line-height-lg) + ($input-padding-y-lg * 2) !default;
-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
+$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
+$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
-$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size: ($input-height-inner / 2) ($input-height-inner / 2) !default;
+$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
$custom-select-border-width: $input-border-width !default;
$custom-select-border-color: $input-border-color !default;
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
- font-size: $font-size;
+ @include font-size($font-size);
line-height: $line-height;
// Manually declare to provide an override to the browser default
@include border-radius($border-radius, 0);
display: none;
width: 100%;
margin-top: $form-feedback-margin-top;
- font-size: $form-feedback-font-size;
+ @include font-size($form-feedback-font-size);
color: $color;
}
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
margin-top: .1rem;
- font-size: $form-feedback-tooltip-font-size;
+ @include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: color-yiq($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
padding-right: $input-height-inner;
background-image: $icon;
background-repeat: no-repeat;
- background-position: center right calc(#{$input-height-inner} / 4);
- background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
+ background-position: center right $input-height-inner-quarter;
+ background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
&.is-#{$state} {
@if $enable-validation-icons {
padding-right: $input-height-inner;
- background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
+ background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
.page-link {
padding: $padding-y $padding-x;
- font-size: $font-size;
+ @include font-size($font-size);
line-height: $line-height;
}
--- /dev/null
+// stylelint-disable property-blacklist, scss/dollar-variable-default
+
+// SCSS RFS mixin
+//
+// Automated font-resizing
+//
+// See https://github.com/twbs/rfs
+
+// Configuration
+
+// Base font size
+$rfs-base-font-size: 1.25rem !default;
+$rfs-font-size-unit: rem !default;
+
+// 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
+$rfs-two-dimensional: false !default;
+
+// Factor of decrease
+$rfs-factor: 10 !default;
+
+@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
+ @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
+}
+
+// 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-responsive-font-sizes to false
+$enable-responsive-font-sizes: true !default;
+
+// Cache $rfs-base-font-size unit
+$rfs-base-font-size-unit: unit($rfs-base-font-size);
+
+// 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);
+}
+@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);
+}
+
+// Cache $rfs-breakpoint unit to prevent multiple calls
+$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);
+}
+@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+}
+
+// Responsive font-size mixin
+@mixin rfs($fs, $important: false) {
+ // Cache $fs unit
+ $fs-unit: if(type-of($fs) == "number", unit($fs), false);
+
+ // Add !important suffix if needed
+ $rfs-suffix: if($important, " !important", "");
+
+ // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
+ @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
+ 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
+ @if $fs-unit == "px" {
+ $fs: $fs / ($fs * 0 + 1);
+ }
+ @else if $fs-unit == "rem" {
+ $fs: $fs / ($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};
+ }
+ @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 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
+ $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);
+
+ // If two-dimensional, use smallest of screen width and height
+ $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};
+
+ // 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;
+
+ // 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`.";
+ }
+
+ @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;
+ }
+ }
+ @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;
+ }
+ }
+ }
+ }
+ }
+}
+
+// The font-size & responsive-font-size mixin uses RFS to rescale font sizes
+@mixin font-size($fs, $important: false) {
+ @include rfs($fs, $important);
+}
+
+@mixin responsive-font-size($fs, $important: false) {
+ @include rfs($fs, $important);
+}
+
+$rfs-is-included: false !default;
+
+@if $rfs-is-included {
+ @warn "Watch out, RFS is included more than once!";
+}
+
+$rfs-is-included: true;
padding: 15px 15px 15px 160px;
margin: 2rem 0;
overflow: hidden;
- font-size: 13px;
+ @include font-size(.8125rem);
line-height: 1.4;
text-align: left;
background-color: rgba(0, 0, 0, .05);
.algolia-docsearch-suggestion--category-header {
padding: .125rem 1rem !important;
margin-top: 0 !important;
- font-size: .875rem !important;
+ @include font-size(.875rem, true);
font-weight: 600 !important;
color: $bd-purple-bright !important;
border-bottom: 0 !important;
.algolia-docsearch-suggestion--subcategory-inline {
display: block !important;
- font-size: .875rem;
+ @include font-size(.875rem);
color: $gray-700;
&::after {
.algolia-docsearch-suggestion--title {
display: block;
margin-bottom: 0 !important;
- font-size: .875rem !important;
+ @include font-size(.875rem, true);
font-weight: 400 !important;
}
flex: 0 0 100%;
max-width: 100%;
padding: .2rem 0;
- font-size: .8125rem !important;
+ @include font-size(.8125rem, true);
font-weight: 400;
line-height: 1.25 !important;
color: $gray-600;
width: auto !important;
height: auto !important;
padding: .75rem 1rem 0;
- font-size: .75rem !important;
+ @include font-size(.75rem, true);
line-height: 1 !important;
color: #767676 !important;
border-top: 1px solid rgba(0, 0, 0, .1);
}
h1 {
- font-size: 4rem;
+ @include font-size(4rem);
}
}
}
z-index: 10;
display: block;
padding: .25rem .5rem;
- font-size: 75%;
+ @include font-size(75%);
color: #818a91;
background-color: transparent;
border: 0;
border: 0;
}
pre code {
- font-size: inherit;
+ @include font-size(inherit);
color: $gray-900; // Effectively the base text color
}
}
//
.bd-content {
+ > h2 {
+ @include font-size($h2-font-size);
+ }
+
+ > h3 {
+ @include font-size($h3-font-size);
+ }
+
+ > h4 {
+ @include font-size($h4-font-size);
+ }
+
> h2:not(:first-child) {
margin-top: 3rem;
}
margin-top: 1rem;
margin-bottom: .5rem;
font-weight: 300;
-
- @include media-breakpoint-up(sm) {
- font-size: 3rem;
- }
+ @include font-size(3rem);
}
.bd-lead {
- font-size: 1.125rem;
+ @include font-size(1.125rem);
font-weight: 300;
- @include media-breakpoint-up(sm) {
+ @include media-breakpoint-up(lg) {
max-width: 80%;
- margin-bottom: 1rem;
- font-size: 1.5rem;
}
}
//
.bd-footer {
- font-size: 85%;
+ @include font-size(.875rem);
text-align: center;
background-color: #f7f7f7;
// background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
h1 {
+ @include font-size(4rem);
line-height: 1;
}
.btn {
padding: .8rem 2rem;
font-weight: 600;
+ @include font-size(1.25rem);
}
.carbonad {
}
@include media-breakpoint-up(md) {
- h1 {
- font-size: 4rem;
- }
-
.carbonad {
margin-top: 3rem !important;
}
height: 2.5rem;
margin-top: .25rem;
overflow: hidden;
- font-size: .875rem;
.navbar-nav {
padding-bottom: 2rem;
}
.dropdown-menu {
- font-size: .875rem;
+ @include font-size(.875rem);
}
.dropdown-item.active {
// Remember to update `site/_layouts/examples.html` too if this changes!
.bd-placeholder-img {
- font-size: 1.125rem;
+ @include font-size(1.125rem);
text-anchor: middle;
}
.bd-placeholder-img-lg {
- @include media-breakpoint-up(md) {
- font-size: 3.5rem;
- }
+ @include font-size(3.5rem);
}
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
- font-size: .875rem;
+ @include font-size(.875rem);
}
.section-nav {
.bd-sidebar .nav > li > a {
display: block;
padding: .25rem 1.5rem;
- font-size: 90%;
+ @include font-size(90%);
color: rgba(0, 0, 0, .65);
}
$bd-info: #5bc0de !default;
$bd-warning: #f0ad4e !default;
$bd-danger: #d9534f !default;
+
+// Enable responsive font sizes for font sizes defined in the docs
+// The weird if test is made as a workaround to prevent a false fusv error.
+//
+// stylelint-disable-next-line scss/dollar-variable-default
+$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true);
## Display headings
-Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style. Keep in mind these headings are not responsive by default, but it's possible to enable [responsive font sizes](#responsive-font-sizes).
<div class="bd-example bd-example-type">
<table class="table">
{% endcapture %}
{% include example.html content=example %}
-## Responsive typography
+## Responsive font sizes
-*Responsive typography* refers to scaling text and components by simply adjusting the root element's `font-size` within a series of media queries. Bootstrap doesn't do this for you, but it's fairly easy to add if you need it.
+Bootstrap v4.3 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.
-Here's an example of it in practice. Choose whatever `font-size`s and media queries you wish.
-
-{% highlight scss %}
-html {
- font-size: 1rem;
-}
-
-@include media-breakpoint-up(sm) {
- html {
- font-size: 1.2rem;
- }
-}
-
-@include media-breakpoint-up(md) {
- html {
- font-size: 1.4rem;
- }
-}
-
-@include media-breakpoint-up(lg) {
- html {
- font-size: 1.6rem;
- }
-}
-{% endhighlight %}
+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).
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
| `$enable-pointer-cursor-for-buttons` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
+| `$enable-responsive-font-sizes` | `true` or `false` (default) | Enables [responsive font sizes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#responsive-font-sizes). |
| `$enable-validation-icons` | `true` (default) or `false` | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
| `$enable-deprecation-messages` | `true` or `false` (default) | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
projects / thirdparty / bootstrap.git / commitdiff
