1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | $rfs-base-value: 1.25rem !default;
|
13 | $rfs-unit: rem !default;
|
14 |
|
15 | @if $rfs-unit != rem and $rfs-unit != px {
|
16 | @error "`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.";
|
17 | }
|
18 |
|
19 |
|
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 |
|
28 | $rfs-two-dimensional: false !default;
|
29 |
|
30 |
|
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 |
|
38 | $rfs-mode: min-media-query !default;
|
39 |
|
40 |
|
41 | $rfs-class: false !default;
|
42 |
|
43 |
|
44 | $rfs-rem-value: 16 !default;
|
45 |
|
46 |
|
47 | $rfs-safari-iframe-resize-bug-fix: false !default;
|
48 |
|
49 |
|
50 | $enable-rfs: true !default;
|
51 |
|
52 |
|
53 | $rfs-base-value-unit: unit($rfs-base-value);
|
54 |
|
55 |
|
56 | @if $rfs-base-value-unit == px {
|
57 | $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
|
58 | }
|
59 | @else if $rfs-base-value-unit == rem {
|
60 | $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
|
61 | }
|
62 |
|
63 |
|
64 | $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
|
65 |
|
66 |
|
67 | @if $rfs-breakpoint-unit-cache == px {
|
68 | $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
|
69 | }
|
70 | @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
|
71 | $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
|
72 | }
|
73 |
|
74 |
|
75 | $rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
|
76 | $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
|
77 | $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
|
78 |
|
79 |
|
80 | @mixin _rfs-media-query {
|
81 | @if $rfs-two-dimensional {
|
82 | @if $rfs-mode == max-media-query {
|
83 | @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
|
84 | @content;
|
85 | }
|
86 | }
|
87 | @else {
|
88 | @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
|
89 | @content;
|
90 | }
|
91 | }
|
92 | }
|
93 | @else {
|
94 | @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
|
95 | @content;
|
96 | }
|
97 | }
|
98 | }
|
99 |
|
100 |
|
101 | @mixin _rfs-rule {
|
102 | @if $rfs-class == disable and $rfs-mode == max-media-query {
|
103 |
|
104 | &,
|
105 | .disable-rfs &,
|
106 | &.disable-rfs {
|
107 | @content;
|
108 | }
|
109 | }
|
110 | @else if $rfs-class == enable and $rfs-mode == min-media-query {
|
111 | .enable-rfs &,
|
112 | &.enable-rfs {
|
113 | @content;
|
114 | }
|
115 | }
|
116 | @else {
|
117 | @content;
|
118 | }
|
119 | }
|
120 |
|
121 |
|
122 | @mixin _rfs-media-query-rule {
|
123 |
|
124 | @if $rfs-class == enable {
|
125 | @if $rfs-mode == min-media-query {
|
126 | @content;
|
127 | }
|
128 |
|
129 | @include _rfs-media-query {
|
130 | .enable-rfs &,
|
131 | &.enable-rfs {
|
132 | @content;
|
133 | }
|
134 | }
|
135 | }
|
136 | @else {
|
137 | @if $rfs-class == disable and $rfs-mode == min-media-query {
|
138 | .disable-rfs &,
|
139 | &.disable-rfs {
|
140 | @content;
|
141 | }
|
142 | }
|
143 | @include _rfs-media-query {
|
144 | @content;
|
145 | }
|
146 | }
|
147 | }
|
148 |
|
149 |
|
150 | @function rfs-value($values) {
|
151 |
|
152 | $values: if(type-of($values) != list, ($values,), $values);
|
153 |
|
154 | $val: '';
|
155 |
|
156 |
|
157 | @each $value in $values {
|
158 | @if $value == 0 {
|
159 | $val: $val + ' 0';
|
160 | }
|
161 | @else {
|
162 |
|
163 | $unit: if(type-of($value) == "number", unit($value), false);
|
164 |
|
165 | @if $unit == px {
|
166 |
|
167 | $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
|
168 | }
|
169 | @else if $unit == rem {
|
170 |
|
171 | $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
|
172 | }
|
173 | @else {
|
174 |
|
175 | $val: $val + ' ' + $value;
|
176 | }
|
177 | }
|
178 | }
|
179 |
|
180 |
|
181 | @return unquote(str-slice($val, 2));
|
182 | }
|
183 |
|
184 |
|
185 | @function rfs-fluid-value($values) {
|
186 |
|
187 | $values: if(type-of($values) != list, ($values,), $values);
|
188 |
|
189 | $val: '';
|
190 |
|
191 |
|
192 | @each $value in $values {
|
193 | @if $value == 0 {
|
194 | $val: $val + ' 0';
|
195 | }
|
196 |
|
197 | @else {
|
198 |
|
199 | $unit: if(type-of($value) == "number", unit($value), false);
|
200 |
|
201 |
|
202 | @if not $unit or $unit != px and $unit != rem {
|
203 | $val: $val + ' ' + $value;
|
204 | }
|
205 |
|
206 | @else {
|
207 |
|
208 | $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
|
209 |
|
210 |
|
211 | @if abs($value) <= $rfs-base-value or not $enable-rfs {
|
212 | $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
|
213 | }
|
214 | @else {
|
215 |
|
216 | $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
|
217 |
|
218 |
|
219 | $value-diff: abs($value) - $value-min;
|
220 |
|
221 |
|
222 | $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
|
223 |
|
224 |
|
225 | $min-width: if($value < 0, -$min-width, $min-width);
|
226 |
|
227 |
|
228 | $variable-unit: if($rfs-two-dimensional, vmin, vw);
|
229 |
|
230 |
|
231 | $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
|
232 |
|
233 |
|
234 | $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
|
235 | }
|
236 | }
|
237 | }
|
238 | }
|
239 |
|
240 |
|
241 | @return unquote(str-slice($val, 2));
|
242 | }
|
243 |
|
244 |
|
245 | @mixin rfs($values, $property: font-size) {
|
246 | @if $values != null {
|
247 | $val: rfs-value($values);
|
248 | $fluidVal: rfs-fluid-value($values);
|
249 |
|
250 |
|
251 | @if $val == $fluidVal {
|
252 | #{$property}: $val;
|
253 | }
|
254 | @else {
|
255 | @include _rfs-rule {
|
256 | #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
|
257 |
|
258 |
|
259 | min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
|
260 | }
|
261 |
|
262 | @include _rfs-media-query-rule {
|
263 | #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
|
264 | }
|
265 | }
|
266 | }
|
267 | }
|
268 |
|
269 |
|
270 | @mixin font-size($value) {
|
271 | @include rfs($value);
|
272 | }
|
273 |
|
274 | @mixin padding($value) {
|
275 | @include rfs($value, padding);
|
276 | }
|
277 |
|
278 | @mixin padding-top($value) {
|
279 | @include rfs($value, padding-top);
|
280 | }
|
281 |
|
282 | @mixin padding-right($value) {
|
283 | @include rfs($value, padding-right);
|
284 | }
|
285 |
|
286 | @mixin padding-bottom($value) {
|
287 | @include rfs($value, padding-bottom);
|
288 | }
|
289 |
|
290 | @mixin padding-left($value) {
|
291 | @include rfs($value, padding-left);
|
292 | }
|
293 |
|
294 | @mixin margin($value) {
|
295 | @include rfs($value, margin);
|
296 | }
|
297 |
|
298 | @mixin margin-top($value) {
|
299 | @include rfs($value, margin-top);
|
300 | }
|
301 |
|
302 | @mixin margin-right($value) {
|
303 | @include rfs($value, margin-right);
|
304 | }
|
305 |
|
306 | @mixin margin-bottom($value) {
|
307 | @include rfs($value, margin-bottom);
|
308 | }
|
309 |
|
310 | @mixin margin-left($value) {
|
311 | @include rfs($value, margin-left);
|
312 | }
|