bootstrap-scss 4.5.1 → 4.6.1

Sign up to get free protection for your applications and to get access to all the features.
package/vendor/_rfs.scss CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  // SCSS RFS mixin
4
4
  //
5
- // Automated font-resizing
5
+ // Automated responsive font sizes
6
6
  //
7
- // See https://github.com/twbs/rfs
7
+ // Licensed under MIT (https://github.com/twbs/rfs/blob/v8.x/LICENSE)
8
8
 
9
9
  // Configuration
10
10
 
@@ -12,11 +12,19 @@
12
12
  $rfs-base-font-size: 1.25rem !default;
13
13
  $rfs-font-size-unit: rem !default;
14
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
+
15
19
  // Breakpoint at where font-size starts decreasing if screen width is smaller
16
20
  $rfs-breakpoint: 1200px !default;
17
21
  $rfs-breakpoint-unit: px !default;
18
22
 
19
- // Resize font-size based on screen height and width
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
20
28
  $rfs-two-dimensional: false !default;
21
29
 
22
30
  // Factor of decrease
@@ -41,12 +49,54 @@ $enable-responsive-font-sizes: true !default;
41
49
  // Cache $rfs-base-font-size unit
42
50
  $rfs-base-font-size-unit: unit($rfs-base-font-size);
43
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
+
44
94
  // Remove px-unit from $rfs-base-font-size for calculations
45
95
  @if $rfs-base-font-size-unit == "px" {
46
- $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
96
+ $rfs-base-font-size: divide($rfs-base-font-size, $rfs-base-font-size * 0 + 1);
47
97
  }
48
98
  @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);
99
+ $rfs-base-font-size: divide($rfs-base-font-size, divide($rfs-base-font-size * 0 + 1, $rfs-rem-value));
50
100
  }
51
101
 
52
102
  // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -54,13 +104,55 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
54
104
 
55
105
  // Remove unit from $rfs-breakpoint for calculations
56
106
  @if $rfs-breakpoint-unit-cache == "px" {
57
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
107
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
58
108
  }
59
109
  @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);
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
+ }
61
139
  }
62
140
 
63
- // Responsive font-size mixin
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
64
156
  @mixin rfs($fs, $important: false) {
65
157
  // Cache $fs unit
66
158
  $fs-unit: if(type-of($fs) == "number", unit($fs), false);
@@ -73,128 +165,60 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
73
165
  font-size: #{$fs}#{$rfs-suffix};
74
166
  }
75
167
  @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
168
+ // Remove unit from $fs for calculations
81
169
  @if $fs-unit == "px" {
82
- $fs: $fs / ($fs * 0 + 1);
170
+ $fs: divide($fs, $fs * 0 + 1);
83
171
  }
84
172
  @else if $fs-unit == "rem" {
85
- $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
173
+ $fs: divide($fs, divide($fs * 0 + 1, $rfs-rem-value));
86
174
  }
87
175
 
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};
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};
94
182
  }
95
183
  @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;
184
+ // Calculate the minimum font size for $fs
185
+ $fs-min: $rfs-base-font-size + divide($fs - $rfs-base-font-size, $rfs-factor);
104
186
 
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
187
+ // Calculate difference between $fs and the minimum font size
109
188
  $fs-diff: $fs - $fs-min;
110
189
 
111
190
  // 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);
191
+ $min-width: if($rfs-font-size-unit == rem, #{divide($fs-min, $rfs-rem-value)}rem, #{$fs-min}px);
114
192
 
115
- // If two-dimensional, use smallest of screen width and height
193
+ // Use `vmin` if two-dimensional is enabled
116
194
  $variable-unit: if($rfs-two-dimensional, vmin, vw);
117
195
 
118
196
  // Calculate the variable width between 0 and $rfs-breakpoint
119
- $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
197
+ $variable-width: #{divide($fs-diff * 100, $rfs-breakpoint)}#{$variable-unit};
120
198
 
121
- // Set the calculated font-size.
199
+ // Set the calculated font-size
122
200
  $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
123
- }
124
201
 
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;
202
+ // Breakpoint formatting
203
+ $mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
132
204
 
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`.";
205
+ @include _rfs-disable-class {
206
+ font-size: #{$rfs-static}#{$rfs-suffix};
142
207
  }
143
208
 
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;
209
+ @include _rfs-media-query($mq-value) {
210
+ @include _rfs-enable-class {
211
+ font-size: $rfs-fluid;
151
212
  }
152
- }
153
- @else {
154
- font-size: $rfs-static;
155
- }
156
213
 
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
- }
214
+ // Include safari iframe resize fix if needed
215
+ min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
192
216
  }
193
217
  }
194
218
  }
195
219
  }
196
220
 
197
- // The font-size & responsive-font-size mixin uses RFS to rescale font sizes
221
+ // The font-size & responsive-font-size mixins use RFS to rescale the font size
198
222
  @mixin font-size($fs, $important: false) {
199
223
  @include rfs($fs, $important);
200
224
  }