diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2019-02-08 01:32:05 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-02-08 01:32:05 +0300 |
commit | 51375abca5769682f1d27de2e29e6e9f15ec7314 (patch) | |
tree | ad2db8138741ac05e9ed546a40c12b3e353ae7eb | |
parent | d250567ce0b193da0b5c500e985c2372492916cc (diff) |
Responsive font size implementation (#23816)
35 files changed, 324 insertions, 124 deletions
diff --git a/scss/_badge.scss b/scss/_badge.scss index c727ba5a2b..2082f058ec 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -6,7 +6,7 @@ .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; diff --git a/scss/_close.scss b/scss/_close.scss index ec6593a888..5cc96f573e 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -1,6 +1,6 @@ .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; diff --git a/scss/_code.scss b/scss/_code.scss index 9b2e027f40..74b6e1c89b 100644 --- a/scss/_code.scss +++ b/scss/_code.scss @@ -1,6 +1,6 @@ // Inline code code { - font-size: $code-font-size; + @include font-size($code-font-size); color: $code-color; word-break: break-word; @@ -13,7 +13,7 @@ code { // 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); @@ -21,7 +21,7 @@ kbd { kbd { padding: 0; - font-size: 100%; + @include font-size(100%); font-weight: $nested-kbd-font-weight; @include box-shadow(none); } @@ -30,12 +30,12 @@ kbd { // 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; } diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 8af59fd270..03f3fc5be2 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -215,7 +215,7 @@ 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; @@ -270,7 +270,7 @@ 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 { @@ -278,7 +278,7 @@ 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); } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 5e975c242b..ac3c8c8a2c 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -24,7 +24,7 @@ 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; @@ -178,7 +178,7 @@ 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 } diff --git a/scss/_forms.scss b/scss/_forms.scss index 5f6269ff6a..ec9c335591 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -10,7 +10,7 @@ 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; @@ -83,21 +83,21 @@ select.form-control { 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; } @@ -137,7 +137,7 @@ select.form-control { .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); } @@ -145,7 +145,7 @@ select.form-control { .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); } diff --git a/scss/_images.scss b/scss/_images.scss index 8e69b772f8..cb9795e272 100644 --- a/scss/_images.scss +++ b/scss/_images.scss @@ -37,6 +37,6 @@ } .figure-caption { - font-size: $figure-caption-font-size; + @include font-size($figure-caption-font-size); color: $figure-caption-color; } diff --git a/scss/_input-group.scss b/scss/_input-group.scss index cf4d4436fd..ac49f696cb 100644 --- a/scss/_input-group.scss +++ b/scss/_input-group.scss @@ -104,7 +104,7 @@ 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; @@ -139,7 +139,7 @@ .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); } @@ -156,7 +156,7 @@ .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); } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 254986cdea..cc957843f2 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -2,6 +2,9 @@ // // Used in conjunction with global variables to enable certain theme features. +// Vendor +@import "vendor/rfs"; + // Deprecate @import "mixins/deprecate"; diff --git a/scss/_navbar.scss b/scss/_navbar.scss index fb26847ee5..5c6e96399e 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -44,7 +44,7 @@ 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; @@ -107,7 +107,7 @@ // 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 diff --git a/scss/_popover.scss b/scss/_popover.scss index ae8510eb5a..f205e66818 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -8,7 +8,7 @@ // 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; @@ -153,7 +153,7 @@ .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%); diff --git a/scss/_progress.scss b/scss/_progress.scss index 6247abe3fc..ab9ea0ffbe 100644 --- a/scss/_progress.scss +++ b/scss/_progress.scss @@ -10,7 +10,7 @@ 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); diff --git a/scss/_reboot.scss b/scss/_reboot.scss index de7a14371b..c55d42e44a 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -46,7 +46,7 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { 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; @@ -155,7 +155,7 @@ strong { } small { - font-size: 80%; // Add the correct font size in all browsers + @include font-size(80%); // Add the correct font size in all browsers } // @@ -166,7 +166,7 @@ small { sub, sup { position: relative; - font-size: 75%; + @include font-size(75%); line-height: 0; vertical-align: baseline; } @@ -220,7 +220,7 @@ code, 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 { @@ -317,7 +317,7 @@ optgroup, textarea { margin: 0; // Remove the margin in Firefox and Safari font-family: inherit; - font-size: inherit; + @include font-size(inherit); line-height: inherit; } @@ -416,7 +416,7 @@ legend { 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 diff --git a/scss/_toasts.scss b/scss/_toasts.scss index b781892ee5..6aa5352a38 100644 --- a/scss/_toasts.scss +++ b/scss/_toasts.scss @@ -1,7 +1,7 @@ .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; diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 1286ebfcf9..6b3aa62dd6 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -7,7 +7,7 @@ // 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; diff --git a/scss/_type.scss b/scss/_type.scss index 37dd967328..f8ed09065e 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -13,36 +13,36 @@ h1, h2, h3, h4, h5, h6, 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; } @@ -66,7 +66,7 @@ hr { small, .small { - font-size: $small-font-size; + @include font-size($small-font-size); font-weight: $font-weight-normal; } @@ -104,19 +104,19 @@ mark, // 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 { diff --git a/scss/_variables.scss b/scss/_variables.scss index 6805df2b78..d9e88df9a3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -116,6 +116,7 @@ $enable-hover-media-query: false !default; // Deprecated, no $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; @@ -487,14 +488,13 @@ $input-plaintext-color: $body-color !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; @@ -577,9 +577,9 @@ $custom-select-indicator-color: $gray-800 !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; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index c6bc523cdb..eee903f83c 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -100,7 +100,7 @@ // 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); diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 8e0607ffe5..ea8a91a024 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -31,7 +31,7 @@ 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; } @@ -43,7 +43,7 @@ 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); @@ -59,8 +59,8 @@ 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 { @@ -81,7 +81,7 @@ &.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; } } } diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index ff36eb6b40..af8e16d6a9 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -3,7 +3,7 @@ @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; } diff --git a/scss/vendor/_rfs.scss b/scss/vendor/_rfs.scss new file mode 100644 index 0000000000..c541a85825 --- /dev/null +++ b/scss/vendor/_rfs.scss @@ -0,0 +1,212 @@ +// 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; diff --git a/site/docs/4.2/assets/scss/_ads.scss b/site/docs/4.2/assets/scss/_ads.scss index c207f1682f..0c08025c25 100644 --- a/site/docs/4.2/assets/scss/_ads.scss +++ b/site/docs/4.2/assets/scss/_ads.scss @@ -11,7 +11,7 @@ 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); diff --git a/site/docs/4.2/assets/scss/_algolia.scss b/site/docs/4.2/assets/scss/_algolia.scss index e523dec8ef..23781da12a 100644 --- a/site/docs/4.2/assets/scss/_algolia.scss +++ b/site/docs/4.2/assets/scss/_algolia.scss @@ -47,7 +47,7 @@ .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; @@ -68,7 +68,7 @@ .algolia-docsearch-suggestion--subcategory-inline { display: block !important; - font-size: .875rem; + @include font-size(.875rem); color: $gray-700; &::after { @@ -107,7 +107,7 @@ .algolia-docsearch-suggestion--title { display: block; margin-bottom: 0 !important; - font-size: .875rem !important; + @include font-size(.875rem, true); font-weight: 400 !important; } @@ -115,7 +115,7 @@ 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; @@ -126,7 +126,7 @@ 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); diff --git a/site/docs/4.2/assets/scss/_brand.scss b/site/docs/4.2/assets/scss/_brand.scss index d7d9f1f09b..226d7db174 100644 --- a/site/docs/4.2/assets/scss/_brand.scss +++ b/site/docs/4.2/assets/scss/_brand.scss @@ -44,7 +44,7 @@ } h1 { - font-size: 4rem; + @include font-size(4rem); } } } diff --git a/site/docs/4.2/assets/scss/_clipboard-js.scss b/site/docs/4.2/assets/scss/_clipboard-js.scss index e2dd56e259..6d4bfeea48 100644 --- a/site/docs/4.2/assets/scss/_clipboard-js.scss +++ b/site/docs/4.2/assets/scss/_clipboard-js.scss @@ -23,7 +23,7 @@ z-index: 10; display: block; padding: .25rem .5rem; - font-size: 75%; + @include font-size(75%); color: #818a91; background-color: transparent; border: 0; diff --git a/site/docs/4.2/assets/scss/_component-examples.scss b/site/docs/4.2/assets/scss/_component-examples.scss index 4422a7295a..62ebf6953b 100644 --- a/site/docs/4.2/assets/scss/_component-examples.scss +++ b/site/docs/4.2/assets/scss/_component-examples.scss @@ -406,7 +406,7 @@ border: 0; } pre code { - font-size: inherit; + @include font-size(inherit); color: $gray-900; // Effectively the base text color } } diff --git a/site/docs/4.2/assets/scss/_content.scss b/site/docs/4.2/assets/scss/_content.scss index ecd952bd87..723e4587dc 100644 --- a/site/docs/4.2/assets/scss/_content.scss +++ b/site/docs/4.2/assets/scss/_content.scss @@ -71,6 +71,18 @@ // .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; } @@ -97,20 +109,15 @@ 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; } } diff --git a/site/docs/4.2/assets/scss/_footer.scss b/site/docs/4.2/assets/scss/_footer.scss index c9a8e70e4f..29d31df3a2 100644 --- a/site/docs/4.2/assets/scss/_footer.scss +++ b/site/docs/4.2/assets/scss/_footer.scss @@ -3,7 +3,7 @@ // .bd-footer { - font-size: 85%; + @include font-size(.875rem); text-align: center; background-color: #f7f7f7; diff --git a/site/docs/4.2/assets/scss/_masthead.scss b/site/docs/4.2/assets/scss/_masthead.scss index e8007fc3c4..f4e70a2cfb 100644 --- a/site/docs/4.2/assets/scss/_masthead.scss +++ b/site/docs/4.2/assets/scss/_masthead.scss @@ -6,12 +6,14 @@ // 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 { @@ -29,10 +31,6 @@ } @include media-breakpoint-up(md) { - h1 { - font-size: 4rem; - } - .carbonad { margin-top: 3rem !important; } diff --git a/site/docs/4.2/assets/scss/_nav.scss b/site/docs/4.2/assets/scss/_nav.scss index 5ca226f7b5..c3fdc8e5f6 100644 --- a/site/docs/4.2/assets/scss/_nav.scss +++ b/site/docs/4.2/assets/scss/_nav.scss @@ -16,7 +16,6 @@ height: 2.5rem; margin-top: .25rem; overflow: hidden; - font-size: .875rem; .navbar-nav { padding-bottom: 2rem; @@ -61,7 +60,7 @@ } .dropdown-menu { - font-size: .875rem; + @include font-size(.875rem); } .dropdown-item.active { diff --git a/site/docs/4.2/assets/scss/_placeholder-img.scss b/site/docs/4.2/assets/scss/_placeholder-img.scss index a9f8a41cb5..3fe6a8bbac 100644 --- a/site/docs/4.2/assets/scss/_placeholder-img.scss +++ b/site/docs/4.2/assets/scss/_placeholder-img.scss @@ -5,12 +5,10 @@ // 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); } diff --git a/site/docs/4.2/assets/scss/_sidebar.scss b/site/docs/4.2/assets/scss/_sidebar.scss index 5af636f7e7..b302b22fea 100644 --- a/site/docs/4.2/assets/scss/_sidebar.scss +++ b/site/docs/4.2/assets/scss/_sidebar.scss @@ -14,7 +14,7 @@ order: 2; padding-top: 1.5rem; padding-bottom: 1.5rem; - font-size: .875rem; + @include font-size(.875rem); } .section-nav { @@ -144,7 +144,7 @@ .bd-sidebar .nav > li > a { display: block; padding: .25rem 1.5rem; - font-size: 90%; + @include font-size(90%); color: rgba(0, 0, 0, .65); } diff --git a/site/docs/4.2/assets/scss/_variables.scss b/site/docs/4.2/assets/scss/_variables.scss index b60a21368b..e8bf3728db 100644 --- a/site/docs/4.2/assets/scss/_variables.scss +++ b/site/docs/4.2/assets/scss/_variables.scss @@ -7,3 +7,9 @@ $bd-download: #ffe484 !default; $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); diff --git a/site/docs/4.2/content/typography.md b/site/docs/4.2/content/typography.md index 2451367e0c..19a783d8e7 100644 --- a/site/docs/4.2/content/typography.md +++ b/site/docs/4.2/content/typography.md @@ -104,7 +104,7 @@ Use the included utility classes to recreate the small secondary heading text fr ## 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"> @@ -294,32 +294,8 @@ Align terms and descriptions horizontally by using our grid system's predefined {% 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). diff --git a/site/docs/4.2/getting-started/theming.md b/site/docs/4.2/getting-started/theming.md index a40b6395ac..8e3339c15d 100644 --- a/site/docs/4.2/getting-started/theming.md +++ b/site/docs/4.2/getting-started/theming.md @@ -242,6 +242,7 @@ You can find and customize these variables for key global options in Bootstrap's | `$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`. | |