_rfs.scss
205 lines
| 1 | // stylelint-disable property-blacklist, scss/dollar-variable-default |
| 2 | |
| 3 | // SCSS RFS mixin |
| 4 | // |
| 5 | // Automated font-resizing |
| 6 | // |
| 7 | // See https://github.com/twbs/rfs |
| 8 | |
| 9 | // Configuration |
| 10 | |
| 11 | // Base font size |
| 12 | $rfs-base-font-size: 1.25rem !default; |
| 13 | $rfs-font-size-unit: rem !default; |
| 14 | |
| 15 | // Breakpoint at where font-size starts decreasing if screen width is smaller |
| 16 | $rfs-breakpoint: 1200px !default; |
| 17 | $rfs-breakpoint-unit: px !default; |
| 18 | |
| 19 | // Resize font-size based on screen height and width |
| 20 | $rfs-two-dimensional: false !default; |
| 21 | |
| 22 | // Factor of decrease |
| 23 | $rfs-factor: 10 !default; |
| 24 | |
| 25 | @if type-of($rfs-factor) != "number" or $rfs-factor <= 1 { |
| 26 | @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1."; |
| 27 | } |
| 28 | |
| 29 | // Generate enable or disable classes. Possibilities: false, "enable" or "disable" |
| 30 | $rfs-class: false !default; |
| 31 | |
| 32 | // 1 rem = $rfs-rem-value px |
| 33 | $rfs-rem-value: 16 !default; |
| 34 | |
| 35 | // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 |
| 36 | $rfs-safari-iframe-resize-bug-fix: false !default; |
| 37 | |
| 38 | // Disable RFS by setting $enable-responsive-font-sizes to false |
| 39 | $enable-responsive-font-sizes: true !default; |
| 40 | |
| 41 | // Cache $rfs-base-font-size unit |
| 42 | $rfs-base-font-size-unit: unit($rfs-base-font-size); |
| 43 | |
| 44 | // Remove px-unit from $rfs-base-font-size for calculations |
| 45 | @if $rfs-base-font-size-unit == "px" { |
| 46 | $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1); |
| 47 | } |
| 48 | @else if $rfs-base-font-size-unit == "rem" { |
| 49 | $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value); |
| 50 | } |
| 51 | |
| 52 | // Cache $rfs-breakpoint unit to prevent multiple calls |
| 53 | $rfs-breakpoint-unit-cache: unit($rfs-breakpoint); |
| 54 | |
| 55 | // Remove unit from $rfs-breakpoint for calculations |
| 56 | @if $rfs-breakpoint-unit-cache == "px" { |
| 57 | $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1); |
| 58 | } |
| 59 | @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" { |
| 60 | $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value); |
| 61 | } |
| 62 | |
| 63 | // Responsive font-size mixin |
| 64 | @mixin rfs($fs, $important: false) { |
| 65 | // Cache $fs unit |
| 66 | $fs-unit: if(type-of($fs) == "number", unit($fs), false); |
| 67 | |
| 68 | // Add !important suffix if needed |
| 69 | $rfs-suffix: if($important, " !important", ""); |
| 70 | |
| 71 | // 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 |
| 72 | @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 { |
| 73 | font-size: #{$fs}#{$rfs-suffix}; |
| 74 | } |
| 75 | @else { |
| 76 | // Variables for storing static and fluid rescaling |
| 77 | $rfs-static: null; |
| 78 | $rfs-fluid: null; |
| 79 | |
| 80 | // Remove px-unit from $fs for calculations |
| 81 | @if $fs-unit == "px" { |
| 82 | $fs: $fs / ($fs * 0 + 1); |
| 83 | } |
| 84 | @else if $fs-unit == "rem" { |
| 85 | $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value); |
| 86 | } |
| 87 | |
| 88 | // Set default font-size |
| 89 | @if $rfs-font-size-unit == rem { |
| 90 | $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix}; |
| 91 | } |
| 92 | @else if $rfs-font-size-unit == px { |
| 93 | $rfs-static: #{$fs}px#{$rfs-suffix}; |
| 94 | } |
| 95 | @else { |
| 96 | @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`."; |
| 97 | } |
| 98 | |
| 99 | // Only add media query if font-size is bigger as the minimum font-size |
| 100 | // If $rfs-factor == 1, no rescaling will take place |
| 101 | @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes { |
| 102 | $min-width: null; |
| 103 | $variable-unit: null; |
| 104 | |
| 105 | // Calculate minimum font-size for given font-size |
| 106 | $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor; |
| 107 | |
| 108 | // Calculate difference between given font-size and minimum font-size for given font-size |
| 109 | $fs-diff: $fs - $fs-min; |
| 110 | |
| 111 | // Base font-size formatting |
| 112 | // No need to check if the unit is valid, because we did that before |
| 113 | $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px); |
| 114 | |
| 115 | // If two-dimensional, use smallest of screen width and height |
| 116 | $variable-unit: if($rfs-two-dimensional, vmin, vw); |
| 117 | |
| 118 | // Calculate the variable width between 0 and $rfs-breakpoint |
| 119 | $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit}; |
| 120 | |
| 121 | // Set the calculated font-size. |
| 122 | $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix}; |
| 123 | } |
| 124 | |
| 125 | // Rendering |
| 126 | @if $rfs-fluid == null { |
| 127 | // Only render static font-size if no fluid font-size is available |
| 128 | font-size: $rfs-static; |
| 129 | } |
| 130 | @else { |
| 131 | $mq-value: null; |
| 132 | |
| 133 | // RFS breakpoint formatting |
| 134 | @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem { |
| 135 | $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}; |
| 136 | } |
| 137 | @else if $rfs-breakpoint-unit == px { |
| 138 | $mq-value: #{$rfs-breakpoint}px; |
| 139 | } |
| 140 | @else { |
| 141 | @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`."; |
| 142 | } |
| 143 | |
| 144 | @if $rfs-class == "disable" { |
| 145 | // Adding an extra class increases specificity, |
| 146 | // which prevents the media query to override the font size |
| 147 | &, |
| 148 | .disable-responsive-font-size &, |
| 149 | &.disable-responsive-font-size { |
| 150 | font-size: $rfs-static; |
| 151 | } |
| 152 | } |
| 153 | @else { |
| 154 | font-size: $rfs-static; |
| 155 | } |
| 156 | |
| 157 | @if $rfs-two-dimensional { |
| 158 | @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) { |
| 159 | @if $rfs-class == "enable" { |
| 160 | .enable-responsive-font-size &, |
| 161 | &.enable-responsive-font-size { |
| 162 | font-size: $rfs-fluid; |
| 163 | } |
| 164 | } |
| 165 | @else { |
| 166 | font-size: $rfs-fluid; |
| 167 | } |
| 168 | |
| 169 | @if $rfs-safari-iframe-resize-bug-fix { |
| 170 | // stylelint-disable-next-line length-zero-no-unit |
| 171 | min-width: 0vw; |
| 172 | } |
| 173 | } |
| 174 | } |
| 175 | @else { |
| 176 | @media (max-width: #{$mq-value}) { |
| 177 | @if $rfs-class == "enable" { |
| 178 | .enable-responsive-font-size &, |
| 179 | &.enable-responsive-font-size { |
| 180 | font-size: $rfs-fluid; |
| 181 | } |
| 182 | } |
| 183 | @else { |
| 184 | font-size: $rfs-fluid; |
| 185 | } |
| 186 | |
| 187 | @if $rfs-safari-iframe-resize-bug-fix { |
| 188 | // stylelint-disable-next-line length-zero-no-unit |
| 189 | min-width: 0vw; |
| 190 | } |
| 191 | } |
| 192 | } |
| 193 | } |
| 194 | } |
| 195 | } |
| 196 | |
| 197 | // The font-size & responsive-font-size mixin uses RFS to rescale font sizes |
| 198 | @mixin font-size($fs, $important: false) { |
| 199 | @include rfs($fs, $important); |
| 200 | } |
| 201 | |
| 202 | @mixin responsive-font-size($fs, $important: false) { |
| 203 | @include rfs($fs, $important); |
| 204 | } |
| 205 |