1 |
efrain |
1 |
// stylelint-disable property-blacklist, scss/dollar-variable-default
|
|
|
2 |
|
|
|
3 |
// SCSS RFS mixin
|
|
|
4 |
//
|
|
|
5 |
// Automated responsive font sizes
|
|
|
6 |
//
|
|
|
7 |
// Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)
|
|
|
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 |
@if $rfs-font-size-unit != rem and $rfs-font-size-unit != px {
|
|
|
16 |
@error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
|
|
|
17 |
}
|
|
|
18 |
|
|
|
19 |
// Breakpoint at where font-size starts decreasing if screen width is smaller
|
|
|
20 |
$rfs-breakpoint: 1200px !default;
|
|
|
21 |
$rfs-breakpoint-unit: px !default;
|
|
|
22 |
|
|
|
23 |
@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {
|
|
|
24 |
@error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
|
|
|
25 |
}
|
|
|
26 |
|
|
|
27 |
// Resize font size based on screen height and width
|
|
|
28 |
$rfs-two-dimensional: false !default;
|
|
|
29 |
|
|
|
30 |
// Factor of decrease
|
|
|
31 |
$rfs-factor: 10 !default;
|
|
|
32 |
|
|
|
33 |
@if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
|
|
|
34 |
@error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
|
|
|
35 |
}
|
|
|
36 |
|
|
|
37 |
// Generate enable or disable classes. Possibilities: false, "enable" or "disable"
|
|
|
38 |
$rfs-class: false !default;
|
|
|
39 |
|
|
|
40 |
// 1 rem = $rfs-rem-value px
|
|
|
41 |
$rfs-rem-value: 16 !default;
|
|
|
42 |
|
|
|
43 |
// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
|
|
|
44 |
$rfs-safari-iframe-resize-bug-fix: false !default;
|
|
|
45 |
|
|
|
46 |
// Disable RFS by setting $enable-responsive-font-sizes to false
|
|
|
47 |
$enable-responsive-font-sizes: true !default;
|
|
|
48 |
|
|
|
49 |
// Cache $rfs-base-font-size unit
|
|
|
50 |
$rfs-base-font-size-unit: unit($rfs-base-font-size);
|
|
|
51 |
|
|
|
52 |
@function divide($dividend, $divisor, $precision: 10) {
|
|
|
53 |
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
|
|
54 |
$dividend: abs($dividend);
|
|
|
55 |
$divisor: abs($divisor);
|
|
|
56 |
@if $dividend == 0 {
|
|
|
57 |
@return 0;
|
|
|
58 |
}
|
|
|
59 |
@if $divisor == 0 {
|
|
|
60 |
@error "Cannot divide by 0";
|
|
|
61 |
}
|
|
|
62 |
$remainder: $dividend;
|
|
|
63 |
$result: 0;
|
|
|
64 |
$factor: 10;
|
|
|
65 |
@while ($remainder > 0 and $precision >= 0) {
|
|
|
66 |
$quotient: 0;
|
|
|
67 |
@while ($remainder >= $divisor) {
|
|
|
68 |
$remainder: $remainder - $divisor;
|
|
|
69 |
$quotient: $quotient + 1;
|
|
|
70 |
}
|
|
|
71 |
$result: $result * 10 + $quotient;
|
|
|
72 |
$factor: $factor * .1;
|
|
|
73 |
$remainder: $remainder * 10;
|
|
|
74 |
$precision: $precision - 1;
|
|
|
75 |
@if ($precision < 0 and $remainder >= $divisor * 5) {
|
|
|
76 |
$result: $result + 1;
|
|
|
77 |
}
|
|
|
78 |
}
|
|
|
79 |
$result: $result * $factor * $sign;
|
|
|
80 |
$dividend-unit: unit($dividend);
|
|
|
81 |
$divisor-unit: unit($divisor);
|
|
|
82 |
$unit-map: (
|
|
|
83 |
"px": 1px,
|
|
|
84 |
"rem": 1rem,
|
|
|
85 |
"em": 1em,
|
|
|
86 |
"%": 1%
|
|
|
87 |
);
|
|
|
88 |
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
|
|
|
89 |
$result: $result * map-get($unit-map, $dividend-unit);
|
|
|
90 |
}
|
|
|
91 |
@return $result;
|
|
|
92 |
}
|
|
|
93 |
|
|
|
94 |
// Remove px-unit from $rfs-base-font-size for calculations
|
|
|
95 |
@if $rfs-base-font-size-unit == "px" {
|
|
|
96 |
$rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
|
|
|
97 |
}
|
|
|
98 |
@else if $rfs-base-font-size-unit == "rem" {
|
|
|
99 |
$rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));
|
|
|
100 |
}
|
|
|
101 |
|
|
|
102 |
// Cache $rfs-breakpoint unit to prevent multiple calls
|
|
|
103 |
$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
|
|
|
104 |
|
|
|
105 |
// Remove unit from $rfs-breakpoint for calculations
|
|
|
106 |
@if $rfs-breakpoint-unit-cache == "px" {
|
|
|
107 |
$rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
|
|
|
108 |
}
|
|
|
109 |
@else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
|
|
|
110 |
$rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
|
|
|
111 |
}
|
|
|
112 |
|
|
|
113 |
// Internal mixin that adds disable classes to the selector if needed.
|
|
|
114 |
@mixin _rfs-disable-class {
|
|
|
115 |
@if $rfs-class == "disable" {
|
|
|
116 |
// Adding an extra class increases specificity, which prevents the media query to override the font size
|
|
|
117 |
&,
|
|
|
118 |
.disable-responsive-font-size &,
|
|
|
119 |
&.disable-responsive-font-size {
|
|
|
120 |
@content;
|
|
|
121 |
}
|
|
|
122 |
}
|
|
|
123 |
@else {
|
|
|
124 |
@content;
|
|
|
125 |
}
|
|
|
126 |
}
|
|
|
127 |
|
|
|
128 |
// Internal mixin that adds enable classes to the selector if needed.
|
|
|
129 |
@mixin _rfs-enable-class {
|
|
|
130 |
@if $rfs-class == "enable" {
|
|
|
131 |
.enable-responsive-font-size &,
|
|
|
132 |
&.enable-responsive-font-size {
|
|
|
133 |
@content;
|
|
|
134 |
}
|
|
|
135 |
}
|
|
|
136 |
@else {
|
|
|
137 |
@content;
|
|
|
138 |
}
|
|
|
139 |
}
|
|
|
140 |
|
|
|
141 |
// Internal mixin used to determine which media query needs to be used
|
|
|
142 |
@mixin _rfs-media-query($mq-value) {
|
|
|
143 |
@if $rfs-two-dimensional {
|
|
|
144 |
@media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
|
|
|
145 |
@content;
|
|
|
146 |
}
|
|
|
147 |
}
|
|
|
148 |
@else {
|
|
|
149 |
@media (max-width: #{$mq-value}) {
|
|
|
150 |
@content;
|
|
|
151 |
}
|
|
|
152 |
}
|
|
|
153 |
}
|
|
|
154 |
|
|
|
155 |
// Responsive font size mixin
|
|
|
156 |
@mixin rfs($fs, $important: false) {
|
|
|
157 |
// Cache $fs unit
|
|
|
158 |
$fs-unit: if(type-of($fs) == "number", unit($fs), false);
|
|
|
159 |
|
|
|
160 |
// Add !important suffix if needed
|
|
|
161 |
$rfs-suffix: if($important, " !important", "");
|
|
|
162 |
|
|
|
163 |
// 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
|
|
|
164 |
@if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
|
|
|
165 |
font-size: #{$fs}#{$rfs-suffix};
|
|
|
166 |
}
|
|
|
167 |
@else {
|
|
|
168 |
// Remove unit from $fs for calculations
|
|
|
169 |
@if $fs-unit == "px" {
|
|
|
170 |
$fs: divide($fs, $fs * 0 + 1);
|
|
|
171 |
}
|
|
|
172 |
@else if $fs-unit == "rem" {
|
|
|
173 |
$fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));
|
|
|
174 |
}
|
|
|
175 |
|
|
|
176 |
// Set default font size
|
|
|
177 |
$rfs-static: if($rfs-font-size-unit == rem, #{divide($fs, $rfs-rem-value)}rem, #{$fs}px);
|
|
|
178 |
|
|
|
179 |
// Only add the media query if the font size is bigger than the minimum font size
|
|
|
180 |
@if $fs <= $rfs-base-font-size or not $enable-responsive-font-sizes {
|
|
|
181 |
font-size: #{$rfs-static}#{$rfs-suffix};
|
|
|
182 |
}
|
|
|
183 |
@else {
|
|
|
184 |
// Calculate the minimum font size for $fs
|
|
|
185 |
$fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);
|
|
|
186 |
|
|
|
187 |
// Calculate difference between $fs and the minimum font size
|
|
|
188 |
$fs-diff: $fs - $fs-min;
|
|
|
189 |
|
|
|
190 |
// Base font-size formatting
|
|
|
191 |
$min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
|
|
|
192 |
|
|
|
193 |
// Use `vmin` if two-dimensional is enabled
|
|
|
194 |
$variable-unit: if($rfs-two-dimensional, vmin, vw);
|
|
|
195 |
|
|
|
196 |
// Calculate the variable width between 0 and $rfs-breakpoint
|
|
|
197 |
$variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
|
|
|
198 |
|
|
|
199 |
// Set the calculated font-size
|
|
|
200 |
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
|
|
|
201 |
|
|
|
202 |
// Breakpoint formatting
|
|
|
203 |
$mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
|
|
|
204 |
|
|
|
205 |
@include _rfs-disable-class {
|
|
|
206 |
font-size: #{$rfs-static}#{$rfs-suffix};
|
|
|
207 |
}
|
|
|
208 |
|
|
|
209 |
@include _rfs-media-query($mq-value) {
|
|
|
210 |
@include _rfs-enable-class {
|
|
|
211 |
font-size: $rfs-fluid;
|
|
|
212 |
}
|
|
|
213 |
|
|
|
214 |
// Include safari iframe resize fix if needed
|
|
|
215 |
min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
|
|
|
216 |
}
|
|
|
217 |
}
|
|
|
218 |
}
|
|
|
219 |
}
|
|
|
220 |
|
|
|
221 |
// The font-size & responsive-font-size mixins use RFS to rescale the font size
|
|
|
222 |
@mixin font-size($fs, $important: false) {
|
|
|
223 |
@include rfs($fs, $important);
|
|
|
224 |
}
|
|
|
225 |
|
|
|
226 |
@mixin responsive-font-size($fs, $important: false) {
|
|
|
227 |
@include rfs($fs, $important);
|
|
|
228 |
}
|