// stylelint-disable declaration-property-value-blacklist, scss/selector-no-redundant-nesting-selector // Less RFS mixin // // Automated font-resizing // // See https://github.com/twbs/rfs // Configuration // Base font size @rfs-base-font-size: 1.25rem; @rfs-font-size-unit: rem; // Breakpoint at where font-size starts decreasing if screen width is smaller @rfs-breakpoint: 1200px; @rfs-breakpoint-unit: px; // Resize font-size based on screen height and width @rfs-two-dimensional: false; // Factor of decrease @rfs-factor: 10; // Generate enable or disable classes. Possibilities: false, "enable" or "disable" @rfs-class: false; // 1 rem = @rfs-rem-value px @rfs-rem-value: 16; // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 @rfs-safari-iframe-resize-bug-fix: false; // Disable RFS by setting @enable-responsive-font-sizes to false @enable-responsive-font-sizes: true; // Responsive font-size mixin .rfs(@fs, @important: false) { & when (not(@important)) { ._rfs-prefix(@fs, ~""); } & when (@important) { ._rfs-prefix(@fs, ~" !important"); } } ._rfs-prefix(@fs, @suffix) { & when ((not(isunit(@fs, px)) and not(isunit(@fs, rem)) and not((isnumber(@fs)) and (get-unit(@fs) = ~""))) or (@fs = 0)) { font-size: @fs @suffix; } & when (((isnumber(@fs)) and (get-unit(@fs) = ~"")) or (isunit(@fs, px)) or (isunit(@fs, rem))) { ._rfs-render-base(@fs, @suffix); } } ._rfs-render-base(@fs, @suffix) { & when ((isnumber(@fs)) and (get-unit(@fs) = ~"")) { ._rfs-render-base-number(@fs, @suffix); ._rfs-render-media-query(@fs, @suffix); } & when ((isunit(@fs, px))) { ._rfs-render-base-number(unit(@fs), @suffix); ._rfs-render-media-query(unit(@fs), @suffix); } & when ((isunit(@fs, rem))) { ._rfs-render-base-number(unit(@fs/.0625), @suffix); ._rfs-render-media-query(unit(@fs/.0625), @suffix); } } ._rfs-render-media-query(@fs, @suffix) { & when ((@fs > @rfs-base-font-size) and (@rfs-factor > 1) and (@enable-responsive-font-sizes = true)) { & when ((isnumber(@rfs-breakpoint)) and (get-unit(@rfs-breakpoint) = ~"")) { ._rfs-render-media-query-breakpoint(@fs, @suffix, @rfs-breakpoint); } & when ((isunit(@rfs-breakpoint, px))) { ._rfs-render-media-query-breakpoint(@fs, @suffix, unit(@rfs-breakpoint)); } & when ((isunit(@rfs-breakpoint, rem))) { ._rfs-render-media-query-breakpoint(@fs, @suffix, unit(@rfs-breakpoint * @rfs-rem-value)); } & when ((isunit(@rfs-breakpoint, em))) { ._rfs-render-media-query-breakpoint(@fs, @suffix, unit(@rfs-breakpoint * @rfs-rem-value)); } } } ._rfs-render-media-query-breakpoint(@fs, @suffix, @breakpoint) { & when (@rfs-two-dimensional) { ._rfs-render-media-query-two-dimensional(@fs, @suffix, @breakpoint); } & when (not(@rfs-two-dimensional)) { ._rfs-render-media-query-one-dimension(@fs, @suffix, @breakpoint); } } ._rfs-render-media-query-one-dimension(@fs, @suffix, @breakpoint) { & when (@rfs-breakpoint-unit = px) { @media (max-width: unit(@breakpoint, px)) { ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); } } & when (@rfs-breakpoint-unit = rem) { @media (max-width: unit((@breakpoint / @rfs-rem-value), rem)) { ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); } } & when (@rfs-breakpoint-unit = em) { @media (max-width: unit((@breakpoint / @rfs-rem-value), em)) { ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); } } } ._rfs-render-media-query-two-dimensional(@fs, @suffix, @breakpoint) { & when (@rfs-breakpoint-unit = px) { @media (max-width: unit(@breakpoint, px)), (max-height: unit(@breakpoint, px)) { ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); } } & when (@rfs-breakpoint-unit = rem) { @media (max-width: unit((@breakpoint / @rfs-rem-value), rem)), (max-height: unit((@breakpoint / @rfs-rem-value), rem)) { ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); } } & when (@rfs-breakpoint-unit = em) { @media (max-width: unit((@breakpoint / @rfs-rem-value), em)), (max-height: unit((@breakpoint / @rfs-rem-value), em)) { ._rfs-render-media-query-content(@fs, @suffix, @breakpoint); } } } ._rfs-render-media-query-content(@fs, @suffix, @breakpoint) { & when ((isnumber(@rfs-base-font-size)) and (get-unit(@rfs-base-font-size) = ~"")) { ._rfs-render-media-query-content-dimensional(@fs, @suffix, @rfs-base-font-size, @breakpoint); } & when ((isunit(@rfs-base-font-size, px))) { ._rfs-render-media-query-content-dimensional(@fs, @suffix, unit(@rfs-base-font-size), @breakpoint); } & when ((isunit(@rfs-base-font-size, rem))) { ._rfs-render-media-query-content-dimensional(@fs, @suffix, unit(@rfs-base-font-size * @rfs-rem-value), @breakpoint); } & when (@rfs-safari-iframe-resize-bug-fix) { // stylelint-disable-next-line length-zero-no-unit min-width: 0vw; } } ._rfs-render-media-query-content-dimensional(@fs, @suffix, @rfs-min, @breakpoint) { & when (@rfs-two-dimensional) { // Calculate base font-size for given font-size @fs-min: @rfs-min + (@fs - @rfs-min) / @rfs-factor; // Calculate difference between given font-size and base font-size for given font-size @fs-variable-width: unit((@fs - @fs-min) / (@breakpoint / 100), vmin); ._rfs-render-enable-class(@fs-min, @fs-variable-width, @suffix); } & when (not(@rfs-two-dimensional)) { // Calculate base font-size for given font-size @fs-min: @rfs-min + (@fs - @rfs-min) / @rfs-factor; // Calculate difference between given font-size and base font-size for given font-size @fs-variable-width: unit((@fs - @fs-min) / (@breakpoint / 100), vw); ._rfs-render-enable-class(@fs-min, @fs-variable-width, @suffix); } } ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix) { & when (@rfs-font-size-unit = px) { font-size: calc(unit(@fs-min, px) ~"+" @fs-variable-width)@suffix; } & when (@rfs-font-size-unit = rem) { font-size: calc(unit(@fs-min / @rfs-rem-value, rem) ~"+" @fs-variable-width)@suffix; } } ._rfs-render-enable-class(@fs-min, @fs-variable-width, @suffix) { & when (@rfs-class = "enable") { .enable-responsive-font-size &, &.enable-responsive-font-size { ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix); } } & when (not(@rfs-class = "enable")) { ._rfs-render-fluid(@fs-min, @fs-variable-width, @suffix); } } ._rfs-render-base-declaration(@fs, @suffix) { & when (@rfs-font-size-unit = px) { font-size: unit(@fs, px)@suffix; } & when (@rfs-font-size-unit = rem) { font-size: unit((@fs / @rfs-rem-value), rem)@suffix; } } ._rfs-render-base-number(@fs, @suffix) { & when (@rfs-class = "disable") { &, .disable-responsive-font-size &, &.disable-responsive-font-size { ._rfs-render-base-declaration(@fs, @suffix); } } & when (not(@rfs-class = "disable")) { ._rfs-render-base-declaration(@fs, @suffix); } } // The responsive-font-size mixin uses RFS to rescale font sizes .responsive-font-size(@fs, @important: false) { .rfs(@fs, @important); }