mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-24 14:13:06 +02:00
Code Issues Releases Wiki Activity

Responsive font size implementation (#23816)

Browse Source
This commit is contained in:
Martijn Cuppens
2019-02-07 23:32:05 +01:00
committed by GitHub
parent d250567ce0
commit 51375abca5
35 changed files with 324 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_badge.scss
View File

@@ -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;

2
scss/_close.scss
View File

@@ -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;

10
scss/_code.scss
View File

@@ -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;
}

6
scss/_custom-forms.scss
View File

@@ -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);
}

4
scss/_dropdown.scss
View File

@@ -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
}

12
scss/_forms.scss
View File

@@ -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);
}

2
scss/_images.scss
View File

@@ -37,6 +37,6 @@
}
.figure-caption {
font-size: $figure-caption-font-size;
@include font-size($figure-caption-font-size);
color: $figure-caption-color;
}

6
scss/_input-group.scss
View File

@@ -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);
}

3
scss/_mixins.scss
View File

@@ -2,6 +2,9 @@
//
// Used in conjunction with global variables to enable certain theme features.
// Vendor
@import "vendor/rfs";
// Deprecate
@import "mixins/deprecate";

4
scss/_navbar.scss
View File

@@ -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

4
scss/_popover.scss
View File

@@ -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%);

2
scss/_progress.scss
View File

@@ -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);

12
scss/_reboot.scss
View File

@@ -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

2
scss/_toasts.scss
View File

@@ -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;

2
scss/_tooltip.scss
View File

@@ -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;

30
scss/_type.scss
View File

@@ -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 {

18
scss/_variables.scss
View File

@@ -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;

2
scss/mixins/_buttons.scss
View File

@@ -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);

10
scss/mixins/_forms.scss
View File

@@ -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;
}
}
}

2
scss/mixins/_pagination.scss
View File

@@ -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;
}

212
scss/vendor/_rfs.scss vendored Normal file
View File

@@ -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;