bootstrap-scss 5.2.0 → 5.2.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. package/README.md +1 -1
  2. package/_accordion.scss +149 -146
  3. package/_alert.scss +71 -71
  4. package/_badge.scss +38 -38
  5. package/_breadcrumb.scss +40 -40
  6. package/_button-group.scss +142 -142
  7. package/_buttons.scss +207 -186
  8. package/_card.scss +234 -234
  9. package/_carousel.scss +229 -229
  10. package/_close.scss +40 -40
  11. package/_containers.scss +41 -41
  12. package/_dropdown.scss +249 -248
  13. package/_forms.scss +9 -9
  14. package/_functions.scss +302 -302
  15. package/_grid.scss +33 -33
  16. package/_helpers.scss +10 -10
  17. package/_list-group.scss +192 -191
  18. package/_maps.scss +54 -54
  19. package/_mixins.scss +43 -43
  20. package/_modal.scss +237 -237
  21. package/_nav.scss +172 -172
  22. package/_navbar.scss +278 -276
  23. package/_offcanvas.scss +144 -143
  24. package/_pagination.scss +109 -109
  25. package/_placeholders.scss +51 -51
  26. package/_popover.scss +196 -196
  27. package/_progress.scss +59 -59
  28. package/_reboot.scss +610 -610
  29. package/_root.scss +73 -73
  30. package/_spinners.scss +85 -85
  31. package/_tables.scss +164 -164
  32. package/_toasts.scss +73 -70
  33. package/_tooltip.scss +120 -120
  34. package/_transitions.scss +27 -27
  35. package/_type.scss +106 -106
  36. package/_utilities.scss +647 -647
  37. package/_variables.scss +1634 -1633
  38. package/bootstrap-grid.scss +64 -64
  39. package/bootstrap-reboot.scss +9 -9
  40. package/bootstrap-utilities.scss +15 -15
  41. package/bootstrap.scss +51 -51
  42. package/forms/_floating-labels.scss +75 -74
  43. package/forms/_form-check.scss +175 -175
  44. package/forms/_form-control.scss +194 -194
  45. package/forms/_form-range.scss +91 -91
  46. package/forms/_form-select.scss +71 -71
  47. package/forms/_form-text.scss +11 -11
  48. package/forms/_input-group.scss +132 -129
  49. package/forms/_labels.scss +36 -36
  50. package/forms/_validation.scss +12 -12
  51. package/helpers/_clearfix.scss +3 -3
  52. package/helpers/_color-bg.scss +10 -10
  53. package/helpers/_colored-links.scss +12 -12
  54. package/helpers/_position.scss +36 -36
  55. package/helpers/_ratio.scss +26 -26
  56. package/helpers/_stacks.scss +15 -15
  57. package/helpers/_stretched-link.scss +15 -15
  58. package/helpers/_text-truncation.scss +7 -7
  59. package/helpers/_visually-hidden.scss +8 -8
  60. package/helpers/_vr.scss +8 -8
  61. package/mixins/_alert.scss +15 -15
  62. package/mixins/_backdrop.scss +14 -14
  63. package/mixins/_banner.scss +9 -9
  64. package/mixins/_border-radius.scss +78 -78
  65. package/mixins/_box-shadow.scss +18 -18
  66. package/mixins/_breakpoints.scss +127 -127
  67. package/mixins/_buttons.scss +70 -70
  68. package/mixins/_caret.scss +64 -64
  69. package/mixins/_clearfix.scss +9 -9
  70. package/mixins/_color-scheme.scss +7 -7
  71. package/mixins/_container.scss +11 -11
  72. package/mixins/_forms.scss +152 -152
  73. package/mixins/_gradients.scss +47 -47
  74. package/mixins/_grid.scss +151 -151
  75. package/mixins/_image.scss +16 -16
  76. package/mixins/_list-group.scss +24 -24
  77. package/mixins/_lists.scss +7 -7
  78. package/mixins/_pagination.scss +10 -10
  79. package/mixins/_reset-text.scss +17 -17
  80. package/mixins/_table-variants.scss +24 -24
  81. package/mixins/_transition.scss +26 -26
  82. package/mixins/_utilities.scss +97 -97
  83. package/mixins/_visually-hidden.scss +29 -29
  84. package/package.json +1 -1
  85. package/utilities/_api.scss +47 -47
  86. package/vendor/_rfs.scss +354 -354
package/vendor/_rfs.scss CHANGED
@@ -1,354 +1,354 @@
1
- // stylelint-disable property-blacklist, scss/dollar-variable-default
2
-
3
- // SCSS RFS mixin
4
- //
5
- // Automated responsive values for font sizes, paddings, margins and much more
6
- //
7
- // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
8
-
9
- // Configuration
10
-
11
- // Base value
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
- // Breakpoint at where values start 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 values 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
- // Mode. Possibilities: "min-media-query", "max-media-query"
38
- $rfs-mode: min-media-query !default;
39
-
40
- // Generate enable or disable classes. Possibilities: false, "enable" or "disable"
41
- $rfs-class: false !default;
42
-
43
- // 1 rem = $rfs-rem-value px
44
- $rfs-rem-value: 16 !default;
45
-
46
- // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
47
- $rfs-safari-iframe-resize-bug-fix: false !default;
48
-
49
- // Disable RFS by setting $enable-rfs to false
50
- $enable-rfs: true !default;
51
-
52
- // Cache $rfs-base-value unit
53
- $rfs-base-value-unit: unit($rfs-base-value);
54
-
55
- @function divide($dividend, $divisor, $precision: 10) {
56
- $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
57
- $dividend: abs($dividend);
58
- $divisor: abs($divisor);
59
- @if $dividend == 0 {
60
- @return 0;
61
- }
62
- @if $divisor == 0 {
63
- @error "Cannot divide by 0";
64
- }
65
- $remainder: $dividend;
66
- $result: 0;
67
- $factor: 10;
68
- @while ($remainder > 0 and $precision >= 0) {
69
- $quotient: 0;
70
- @while ($remainder >= $divisor) {
71
- $remainder: $remainder - $divisor;
72
- $quotient: $quotient + 1;
73
- }
74
- $result: $result * 10 + $quotient;
75
- $factor: $factor * .1;
76
- $remainder: $remainder * 10;
77
- $precision: $precision - 1;
78
- @if ($precision < 0 and $remainder >= $divisor * 5) {
79
- $result: $result + 1;
80
- }
81
- }
82
- $result: $result * $factor * $sign;
83
- $dividend-unit: unit($dividend);
84
- $divisor-unit: unit($divisor);
85
- $unit-map: (
86
- "px": 1px,
87
- "rem": 1rem,
88
- "em": 1em,
89
- "%": 1%
90
- );
91
- @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
92
- $result: $result * map-get($unit-map, $dividend-unit);
93
- }
94
- @return $result;
95
- }
96
-
97
- // Remove px-unit from $rfs-base-value for calculations
98
- @if $rfs-base-value-unit == px {
99
- $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
100
- }
101
- @else if $rfs-base-value-unit == rem {
102
- $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
103
- }
104
-
105
- // Cache $rfs-breakpoint unit to prevent multiple calls
106
- $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
107
-
108
- // Remove unit from $rfs-breakpoint for calculations
109
- @if $rfs-breakpoint-unit-cache == px {
110
- $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
111
- }
112
- @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
113
- $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
114
- }
115
-
116
- // Calculate the media query value
117
- $rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
118
- $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
119
- $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
120
-
121
- // Internal mixin used to determine which media query needs to be used
122
- @mixin _rfs-media-query {
123
- @if $rfs-two-dimensional {
124
- @if $rfs-mode == max-media-query {
125
- @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
126
- @content;
127
- }
128
- }
129
- @else {
130
- @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
131
- @content;
132
- }
133
- }
134
- }
135
- @else {
136
- @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137
- @content;
138
- }
139
- }
140
- }
141
-
142
- // Internal mixin that adds disable classes to the selector if needed.
143
- @mixin _rfs-rule {
144
- @if $rfs-class == disable and $rfs-mode == max-media-query {
145
- // Adding an extra class increases specificity, which prevents the media query to override the property
146
- &,
147
- .disable-rfs &,
148
- &.disable-rfs {
149
- @content;
150
- }
151
- }
152
- @else if $rfs-class == enable and $rfs-mode == min-media-query {
153
- .enable-rfs &,
154
- &.enable-rfs {
155
- @content;
156
- }
157
- }
158
- @else {
159
- @content;
160
- }
161
- }
162
-
163
- // Internal mixin that adds enable classes to the selector if needed.
164
- @mixin _rfs-media-query-rule {
165
-
166
- @if $rfs-class == enable {
167
- @if $rfs-mode == min-media-query {
168
- @content;
169
- }
170
-
171
- @include _rfs-media-query {
172
- .enable-rfs &,
173
- &.enable-rfs {
174
- @content;
175
- }
176
- }
177
- }
178
- @else {
179
- @if $rfs-class == disable and $rfs-mode == min-media-query {
180
- .disable-rfs &,
181
- &.disable-rfs {
182
- @content;
183
- }
184
- }
185
- @include _rfs-media-query {
186
- @content;
187
- }
188
- }
189
- }
190
-
191
- // Helper function to get the formatted non-responsive value
192
- @function rfs-value($values) {
193
- // Convert to list
194
- $values: if(type-of($values) != list, ($values,), $values);
195
-
196
- $val: '';
197
-
198
- // Loop over each value and calculate value
199
- @each $value in $values {
200
- @if $value == 0 {
201
- $val: $val + ' 0';
202
- }
203
- @else {
204
- // Cache $value unit
205
- $unit: if(type-of($value) == "number", unit($value), false);
206
-
207
- @if $unit == px {
208
- // Convert to rem if needed
209
- $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
210
- }
211
- @else if $unit == rem {
212
- // Convert to px if needed
213
- $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
214
- }
215
- @else {
216
- // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
217
- $val: $val + ' ' + $value;
218
- }
219
- }
220
- }
221
-
222
- // Remove first space
223
- @return unquote(str-slice($val, 2));
224
- }
225
-
226
- // Helper function to get the responsive value calculated by RFS
227
- @function rfs-fluid-value($values) {
228
- // Convert to list
229
- $values: if(type-of($values) != list, ($values,), $values);
230
-
231
- $val: '';
232
-
233
- // Loop over each value and calculate value
234
- @each $value in $values {
235
- @if $value == 0 {
236
- $val: $val + ' 0';
237
- }
238
-
239
- @else {
240
- // Cache $value unit
241
- $unit: if(type-of($value) == "number", unit($value), false);
242
-
243
- // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
244
- @if not $unit or $unit != px and $unit != rem {
245
- $val: $val + ' ' + $value;
246
- }
247
-
248
- @else {
249
- // Remove unit from $value for calculations
250
- $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
251
-
252
- // Only add the media query if the value is greater than the minimum value
253
- @if abs($value) <= $rfs-base-value or not $enable-rfs {
254
- $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
255
- }
256
- @else {
257
- // Calculate the minimum value
258
- $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
259
-
260
- // Calculate difference between $value and the minimum value
261
- $value-diff: abs($value) - $value-min;
262
-
263
- // Base value formatting
264
- $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
265
-
266
- // Use negative value if needed
267
- $min-width: if($value < 0, -$min-width, $min-width);
268
-
269
- // Use `vmin` if two-dimensional is enabled
270
- $variable-unit: if($rfs-two-dimensional, vmin, vw);
271
-
272
- // Calculate the variable width between 0 and $rfs-breakpoint
273
- $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
274
-
275
- // Return the calculated value
276
- $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
277
- }
278
- }
279
- }
280
- }
281
-
282
- // Remove first space
283
- @return unquote(str-slice($val, 2));
284
- }
285
-
286
- // RFS mixin
287
- @mixin rfs($values, $property: font-size) {
288
- @if $values != null {
289
- $val: rfs-value($values);
290
- $fluidVal: rfs-fluid-value($values);
291
-
292
- // Do not print the media query if responsive & non-responsive values are the same
293
- @if $val == $fluidVal {
294
- #{$property}: $val;
295
- }
296
- @else {
297
- @include _rfs-rule {
298
- #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
299
-
300
- // Include safari iframe resize fix if needed
301
- min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
302
- }
303
-
304
- @include _rfs-media-query-rule {
305
- #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
306
- }
307
- }
308
- }
309
- }
310
-
311
- // Shorthand helper mixins
312
- @mixin font-size($value) {
313
- @include rfs($value);
314
- }
315
-
316
- @mixin padding($value) {
317
- @include rfs($value, padding);
318
- }
319
-
320
- @mixin padding-top($value) {
321
- @include rfs($value, padding-top);
322
- }
323
-
324
- @mixin padding-right($value) {
325
- @include rfs($value, padding-right);
326
- }
327
-
328
- @mixin padding-bottom($value) {
329
- @include rfs($value, padding-bottom);
330
- }
331
-
332
- @mixin padding-left($value) {
333
- @include rfs($value, padding-left);
334
- }
335
-
336
- @mixin margin($value) {
337
- @include rfs($value, margin);
338
- }
339
-
340
- @mixin margin-top($value) {
341
- @include rfs($value, margin-top);
342
- }
343
-
344
- @mixin margin-right($value) {
345
- @include rfs($value, margin-right);
346
- }
347
-
348
- @mixin margin-bottom($value) {
349
- @include rfs($value, margin-bottom);
350
- }
351
-
352
- @mixin margin-left($value) {
353
- @include rfs($value, margin-left);
354
- }
1
+ // stylelint-disable property-blacklist, scss/dollar-variable-default
2
+
3
+ // SCSS RFS mixin
4
+ //
5
+ // Automated responsive values for font sizes, paddings, margins and much more
6
+ //
7
+ // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
8
+
9
+ // Configuration
10
+
11
+ // Base value
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
+ // Breakpoint at where values start 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 values 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
+ // Mode. Possibilities: "min-media-query", "max-media-query"
38
+ $rfs-mode: min-media-query !default;
39
+
40
+ // Generate enable or disable classes. Possibilities: false, "enable" or "disable"
41
+ $rfs-class: false !default;
42
+
43
+ // 1 rem = $rfs-rem-value px
44
+ $rfs-rem-value: 16 !default;
45
+
46
+ // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
47
+ $rfs-safari-iframe-resize-bug-fix: false !default;
48
+
49
+ // Disable RFS by setting $enable-rfs to false
50
+ $enable-rfs: true !default;
51
+
52
+ // Cache $rfs-base-value unit
53
+ $rfs-base-value-unit: unit($rfs-base-value);
54
+
55
+ @function divide($dividend, $divisor, $precision: 10) {
56
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
57
+ $dividend: abs($dividend);
58
+ $divisor: abs($divisor);
59
+ @if $dividend == 0 {
60
+ @return 0;
61
+ }
62
+ @if $divisor == 0 {
63
+ @error "Cannot divide by 0";
64
+ }
65
+ $remainder: $dividend;
66
+ $result: 0;
67
+ $factor: 10;
68
+ @while ($remainder > 0 and $precision >= 0) {
69
+ $quotient: 0;
70
+ @while ($remainder >= $divisor) {
71
+ $remainder: $remainder - $divisor;
72
+ $quotient: $quotient + 1;
73
+ }
74
+ $result: $result * 10 + $quotient;
75
+ $factor: $factor * .1;
76
+ $remainder: $remainder * 10;
77
+ $precision: $precision - 1;
78
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
79
+ $result: $result + 1;
80
+ }
81
+ }
82
+ $result: $result * $factor * $sign;
83
+ $dividend-unit: unit($dividend);
84
+ $divisor-unit: unit($divisor);
85
+ $unit-map: (
86
+ "px": 1px,
87
+ "rem": 1rem,
88
+ "em": 1em,
89
+ "%": 1%
90
+ );
91
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
92
+ $result: $result * map-get($unit-map, $dividend-unit);
93
+ }
94
+ @return $result;
95
+ }
96
+
97
+ // Remove px-unit from $rfs-base-value for calculations
98
+ @if $rfs-base-value-unit == px {
99
+ $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
100
+ }
101
+ @else if $rfs-base-value-unit == rem {
102
+ $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
103
+ }
104
+
105
+ // Cache $rfs-breakpoint unit to prevent multiple calls
106
+ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
107
+
108
+ // Remove unit from $rfs-breakpoint for calculations
109
+ @if $rfs-breakpoint-unit-cache == px {
110
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
111
+ }
112
+ @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
113
+ $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
114
+ }
115
+
116
+ // Calculate the media query value
117
+ $rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
118
+ $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
119
+ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
120
+
121
+ // Internal mixin used to determine which media query needs to be used
122
+ @mixin _rfs-media-query {
123
+ @if $rfs-two-dimensional {
124
+ @if $rfs-mode == max-media-query {
125
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
126
+ @content;
127
+ }
128
+ }
129
+ @else {
130
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {
131
+ @content;
132
+ }
133
+ }
134
+ }
135
+ @else {
136
+ @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {
137
+ @content;
138
+ }
139
+ }
140
+ }
141
+
142
+ // Internal mixin that adds disable classes to the selector if needed.
143
+ @mixin _rfs-rule {
144
+ @if $rfs-class == disable and $rfs-mode == max-media-query {
145
+ // Adding an extra class increases specificity, which prevents the media query to override the property
146
+ &,
147
+ .disable-rfs &,
148
+ &.disable-rfs {
149
+ @content;
150
+ }
151
+ }
152
+ @else if $rfs-class == enable and $rfs-mode == min-media-query {
153
+ .enable-rfs &,
154
+ &.enable-rfs {
155
+ @content;
156
+ }
157
+ }
158
+ @else {
159
+ @content;
160
+ }
161
+ }
162
+
163
+ // Internal mixin that adds enable classes to the selector if needed.
164
+ @mixin _rfs-media-query-rule {
165
+
166
+ @if $rfs-class == enable {
167
+ @if $rfs-mode == min-media-query {
168
+ @content;
169
+ }
170
+
171
+ @include _rfs-media-query {
172
+ .enable-rfs &,
173
+ &.enable-rfs {
174
+ @content;
175
+ }
176
+ }
177
+ }
178
+ @else {
179
+ @if $rfs-class == disable and $rfs-mode == min-media-query {
180
+ .disable-rfs &,
181
+ &.disable-rfs {
182
+ @content;
183
+ }
184
+ }
185
+ @include _rfs-media-query {
186
+ @content;
187
+ }
188
+ }
189
+ }
190
+
191
+ // Helper function to get the formatted non-responsive value
192
+ @function rfs-value($values) {
193
+ // Convert to list
194
+ $values: if(type-of($values) != list, ($values,), $values);
195
+
196
+ $val: '';
197
+
198
+ // Loop over each value and calculate value
199
+ @each $value in $values {
200
+ @if $value == 0 {
201
+ $val: $val + ' 0';
202
+ }
203
+ @else {
204
+ // Cache $value unit
205
+ $unit: if(type-of($value) == "number", unit($value), false);
206
+
207
+ @if $unit == px {
208
+ // Convert to rem if needed
209
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
210
+ }
211
+ @else if $unit == rem {
212
+ // Convert to px if needed
213
+ $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
214
+ }
215
+ @else {
216
+ // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
217
+ $val: $val + ' ' + $value;
218
+ }
219
+ }
220
+ }
221
+
222
+ // Remove first space
223
+ @return unquote(str-slice($val, 2));
224
+ }
225
+
226
+ // Helper function to get the responsive value calculated by RFS
227
+ @function rfs-fluid-value($values) {
228
+ // Convert to list
229
+ $values: if(type-of($values) != list, ($values,), $values);
230
+
231
+ $val: '';
232
+
233
+ // Loop over each value and calculate value
234
+ @each $value in $values {
235
+ @if $value == 0 {
236
+ $val: $val + ' 0';
237
+ }
238
+
239
+ @else {
240
+ // Cache $value unit
241
+ $unit: if(type-of($value) == "number", unit($value), false);
242
+
243
+ // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
244
+ @if not $unit or $unit != px and $unit != rem {
245
+ $val: $val + ' ' + $value;
246
+ }
247
+
248
+ @else {
249
+ // Remove unit from $value for calculations
250
+ $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
251
+
252
+ // Only add the media query if the value is greater than the minimum value
253
+ @if abs($value) <= $rfs-base-value or not $enable-rfs {
254
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
255
+ }
256
+ @else {
257
+ // Calculate the minimum value
258
+ $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
259
+
260
+ // Calculate difference between $value and the minimum value
261
+ $value-diff: abs($value) - $value-min;
262
+
263
+ // Base value formatting
264
+ $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
265
+
266
+ // Use negative value if needed
267
+ $min-width: if($value < 0, -$min-width, $min-width);
268
+
269
+ // Use `vmin` if two-dimensional is enabled
270
+ $variable-unit: if($rfs-two-dimensional, vmin, vw);
271
+
272
+ // Calculate the variable width between 0 and $rfs-breakpoint
273
+ $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
274
+
275
+ // Return the calculated value
276
+ $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
277
+ }
278
+ }
279
+ }
280
+ }
281
+
282
+ // Remove first space
283
+ @return unquote(str-slice($val, 2));
284
+ }
285
+
286
+ // RFS mixin
287
+ @mixin rfs($values, $property: font-size) {
288
+ @if $values != null {
289
+ $val: rfs-value($values);
290
+ $fluidVal: rfs-fluid-value($values);
291
+
292
+ // Do not print the media query if responsive & non-responsive values are the same
293
+ @if $val == $fluidVal {
294
+ #{$property}: $val;
295
+ }
296
+ @else {
297
+ @include _rfs-rule {
298
+ #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);
299
+
300
+ // Include safari iframe resize fix if needed
301
+ min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
302
+ }
303
+
304
+ @include _rfs-media-query-rule {
305
+ #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
306
+ }
307
+ }
308
+ }
309
+ }
310
+
311
+ // Shorthand helper mixins
312
+ @mixin font-size($value) {
313
+ @include rfs($value);
314
+ }
315
+
316
+ @mixin padding($value) {
317
+ @include rfs($value, padding);
318
+ }
319
+
320
+ @mixin padding-top($value) {
321
+ @include rfs($value, padding-top);
322
+ }
323
+
324
+ @mixin padding-right($value) {
325
+ @include rfs($value, padding-right);
326
+ }
327
+
328
+ @mixin padding-bottom($value) {
329
+ @include rfs($value, padding-bottom);
330
+ }
331
+
332
+ @mixin padding-left($value) {
333
+ @include rfs($value, padding-left);
334
+ }
335
+
336
+ @mixin margin($value) {
337
+ @include rfs($value, margin);
338
+ }
339
+
340
+ @mixin margin-top($value) {
341
+ @include rfs($value, margin-top);
342
+ }
343
+
344
+ @mixin margin-right($value) {
345
+ @include rfs($value, margin-right);
346
+ }
347
+
348
+ @mixin margin-bottom($value) {
349
+ @include rfs($value, margin-bottom);
350
+ }
351
+
352
+ @mixin margin-left($value) {
353
+ @include rfs($value, margin-left);
354
+ }