diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_easing.scss | 12 | ||||
-rw-r--r-- | src/_functions.scss | 8 | ||||
-rw-r--r-- | src/_gradients.scss | 29 | ||||
-rw-r--r-- | src/_harmony.scss | 10 | ||||
-rw-r--r-- | src/_math.scss | 62 | ||||
-rw-r--r-- | src/_responsive.scss | 4 | ||||
-rw-r--r-- | src/main.scss | 1 |
7 files changed, 36 insertions, 90 deletions
diff --git a/src/_easing.scss b/src/_easing.scss index c41635b..a39f317 100644 --- a/src/_easing.scss +++ b/src/_easing.scss | |||
@@ -9,6 +9,8 @@ | |||
9 | /// @access public | 9 | /// @access public |
10 | //// | 10 | //// |
11 | 11 | ||
12 | @use 'sass:math'; | ||
13 | |||
12 | /// | 14 | /// |
13 | /// @access private | 15 | /// @access private |
14 | /// | 16 | /// |
@@ -75,7 +77,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; | |||
75 | $samples: (); | 77 | $samples: (); |
76 | 78 | ||
77 | @for $i from 0 through $iro-cubic-bezier-sample-pool-size { | 79 | @for $i from 0 through $iro-cubic-bezier-sample-pool-size { |
78 | $samples: append($samples, iro-cubic-bezier-func($x1, $x2, $i / $iro-cubic-bezier-sample-pool-size)); | 80 | $samples: append($samples, iro-cubic-bezier-func($x1, $x2, math.div($i, $iro-cubic-bezier-sample-pool-size))); |
79 | } | 81 | } |
80 | 82 | ||
81 | $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; | 83 | $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; |
@@ -141,7 +143,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; | |||
141 | } | 143 | } |
142 | 144 | ||
143 | $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; | 145 | $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; |
144 | $t: $t - $cur-x / $cur-slope; | 146 | $t: $t - math.div($cur-x, $cur-slope); |
145 | } | 147 | } |
146 | 148 | ||
147 | @return $t; | 149 | @return $t; |
@@ -189,13 +191,13 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; | |||
189 | $last-sample: $iro-cubic-bezier-sample-pool-size; | 191 | $last-sample: $iro-cubic-bezier-sample-pool-size; |
190 | 192 | ||
191 | @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { | 193 | @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { |
192 | $intv-start: $intv-start + (1 / $iro-cubic-bezier-sample-pool-size); | 194 | $intv-start: $intv-start + math.div(1, $iro-cubic-bezier-sample-pool-size); |
193 | $cur-sample: $cur-sample + 1; | 195 | $cur-sample: $cur-sample + 1; |
194 | } | 196 | } |
195 | $cur-sample: $cur-sample - 1; | 197 | $cur-sample: $cur-sample - 1; |
196 | 198 | ||
197 | $dist: ($x - nth($samples, $cur-sample)) / (nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); | 199 | $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); |
198 | $guess-t: $intv-start + $dist / $iro-cubic-bezier-sample-pool-size; | 200 | $guess-t: $intv-start + math.div($dist, $iro-cubic-bezier-sample-pool-size); |
199 | 201 | ||
200 | $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); | 202 | $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); |
201 | @if $init-slope >= $iro-cubic-bezier-newton-min-slope { | 203 | @if $init-slope >= $iro-cubic-bezier-newton-min-slope { |
diff --git a/src/_functions.scss b/src/_functions.scss index 2f34dc4..92ee262 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -9,6 +9,8 @@ | |||
9 | /// @access public | 9 | /// @access public |
10 | //// | 10 | //// |
11 | 11 | ||
12 | @use 'sass:math'; | ||
13 | |||
12 | /// | 14 | /// |
13 | /// Replace a substring with a new string. | 15 | /// Replace a substring with a new string. |
14 | /// | 16 | /// |
@@ -303,19 +305,19 @@ | |||
303 | /// @return {number} Unit-less variable | 305 | /// @return {number} Unit-less variable |
304 | /// | 306 | /// |
305 | @function iro-strip-unit($n) { | 307 | @function iro-strip-unit($n) { |
306 | @return $n / ($n * 0 + 1); | 308 | @return math.div($n, $n * 0 + 1); |
307 | } | 309 | } |
308 | 310 | ||
309 | /// | 311 | /// |
310 | /// Convert a pixel value to a rem value. | 312 | /// Convert a pixel value to a rem value. |
311 | /// | 313 | /// |
312 | /// @param {number} $size - Pixel value to convert | 314 | /// @param {number} $size - Pixel value to convert |
313 | /// @param {number} $base [$iro-root-size] - Reference base font size used for conversion | 315 | /// @param {number} $base [$iro-root-size] - Reference base font size used for conversion |
314 | /// | 316 | /// |
315 | /// @return {number} Pixel value converted to rem | 317 | /// @return {number} Pixel value converted to rem |
316 | /// | 318 | /// |
317 | @function iro-px-to-rem($size, $base: $iro-root-size) { | 319 | @function iro-px-to-rem($size, $base: $iro-root-size) { |
318 | @return $size / $base * 1rem; | 320 | @return math.div($size, $base) * 1rem; |
319 | } | 321 | } |
320 | 322 | ||
321 | /// | 323 | /// |
diff --git a/src/_gradients.scss b/src/_gradients.scss index 7c52d63..657efa2 100644 --- a/src/_gradients.scss +++ b/src/_gradients.scss | |||
@@ -15,6 +15,9 @@ | |||
15 | /// @access public | 15 | /// @access public |
16 | //// | 16 | //// |
17 | 17 | ||
18 | @use 'sass:math'; | ||
19 | @use 'sass:meta'; | ||
20 | |||
18 | /// | 21 | /// |
19 | /// Number of intermediate color stops generated to achieve easing. | 22 | /// Number of intermediate color stops generated to achieve easing. |
20 | /// A higher value results in better quality, but also much more generated code. | 23 | /// A higher value results in better quality, but also much more generated code. |
@@ -340,7 +343,7 @@ $iro-easing-gradient-steps: 10 !default; | |||
340 | $distance: $next-stop-pos - $prev-stop-pos; | 343 | $distance: $next-stop-pos - $prev-stop-pos; |
341 | 344 | ||
342 | @for $i from 1 through $iro-easing-gradient-steps { | 345 | @for $i from 1 through $iro-easing-gradient-steps { |
343 | $perc: $i / $iro-easing-gradient-steps; | 346 | $perc: math.div($i, $iro-easing-gradient-steps); |
344 | 347 | ||
345 | $color: null; | 348 | $color: null; |
346 | $pos: $prev-stop-pos + $perc * $distance; | 349 | $pos: $prev-stop-pos + $perc * $distance; |
@@ -359,20 +362,20 @@ $iro-easing-gradient-steps: 10 !default; | |||
359 | 362 | ||
360 | @if type-of($prev-stop-pos) != number { | 363 | @if type-of($prev-stop-pos) != number { |
361 | // must be calc() | 364 | // must be calc() |
362 | @if (type-of($prev-stop-pos) != string) or (str-index($prev-stop-pos, 'calc(') != 1) { | 365 | @if type-of($prev-stop-pos) != calculation { |
363 | @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; | 366 | @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; |
364 | } | 367 | } |
365 | 368 | ||
366 | $prev-stop-pos: str-slice($prev-stop-pos, 6, str-length($prev-stop-pos) - 1); | 369 | $prev-stop-pos: meta.calc-args($prev-stop-pos); |
367 | } | 370 | } |
368 | 371 | ||
369 | @if type-of($next-stop-pos) != number { | 372 | @if type-of($next-stop-pos) != number { |
370 | // must be calc() | 373 | // must be calc() |
371 | @if (type-of($next-stop-pos) != string) or (str-index($next-stop-pos, 'calc(') != 1) { | 374 | @if type-of($next-stop-pos) != calculation { |
372 | @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; | 375 | @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; |
373 | } | 376 | } |
374 | 377 | ||
375 | $next-stop-pos: str-slice($next-stop-pos, 6, str-length($next-stop-pos) - 1); | 378 | $next-stop-pos: meta.calc-args($next-stop-pos); |
376 | } | 379 | } |
377 | 380 | ||
378 | @for $i from 1 through $iro-easing-gradient-steps { | 381 | @for $i from 1 through $iro-easing-gradient-steps { |
@@ -454,20 +457,20 @@ $iro-easing-gradient-steps: 10 !default; | |||
454 | 457 | ||
455 | @if type-of($prev-stop-pos) != number { | 458 | @if type-of($prev-stop-pos) != number { |
456 | // must be calc() | 459 | // must be calc() |
457 | @if (type-of($prev-stop-pos) != string) or (str-index($prev-stop-pos, 'calc(') != 1) { | 460 | @if type-of($prev-stop-pos) != calculation { |
458 | @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; | 461 | @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; |
459 | } | 462 | } |
460 | 463 | ||
461 | $prev-stop-pos: str-slice($prev-stop-pos, 6, str-length($prev-stop-pos) - 1); | 464 | $prev-stop-pos: meta.calc-args($prev-stop-pos); |
462 | } | 465 | } |
463 | 466 | ||
464 | @if type-of($next-stop-pos) != number { | 467 | @if type-of($next-stop-pos) != number { |
465 | // must be calc() | 468 | // must be calc() |
466 | @if (type-of($next-stop-pos) != string) or (str-index($next-stop-pos, 'calc(') != 1) { | 469 | @if type-of($next-stop-pos) != calculation { |
467 | @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; | 470 | @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; |
468 | } | 471 | } |
469 | 472 | ||
470 | $next-stop-pos: str-slice($next-stop-pos, 6, str-length($next-stop-pos) - 1); | 473 | $next-stop-pos: meta.calc-args($next-stop-pos); |
471 | } | 474 | } |
472 | 475 | ||
473 | @for $i from 1 through $steps { | 476 | @for $i from 1 through $steps { |
@@ -550,20 +553,20 @@ $iro-easing-gradient-steps: 10 !default; | |||
550 | 553 | ||
551 | @if type-of($prev-stop-pos) != number { | 554 | @if type-of($prev-stop-pos) != number { |
552 | // must be calc() | 555 | // must be calc() |
553 | @if (type-of($prev-stop-pos) != string) or (str-index($prev-stop-pos, 'calc(') != 1) { | 556 | @if type-of($prev-stop-pos) != calculation { |
554 | @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; | 557 | @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; |
555 | } | 558 | } |
556 | 559 | ||
557 | $prev-stop-pos: str-slice($prev-stop-pos, 6, str-length($prev-stop-pos) - 1); | 560 | $prev-stop-pos: meta.calc-args($prev-stop-pos); |
558 | } | 561 | } |
559 | 562 | ||
560 | @if type-of($next-stop-pos) != number { | 563 | @if type-of($next-stop-pos) != number { |
561 | // must be calc() | 564 | // must be calc() |
562 | @if (type-of($next-stop-pos) != string) or (str-index($next-stop-pos, 'calc(') != 1) { | 565 | @if type-of($next-stop-pos) != calculation { |
563 | @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; | 566 | @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; |
564 | } | 567 | } |
565 | 568 | ||
566 | $next-stop-pos: str-slice($next-stop-pos, 6, str-length($next-stop-pos) - 1); | 569 | $next-stop-pos: meta.calc-args($next-stop-pos); |
567 | } | 570 | } |
568 | 571 | ||
569 | @for $i from 1 through length($stops) { | 572 | @for $i from 1 through length($stops) { |
diff --git a/src/_harmony.scss b/src/_harmony.scss index c3c8633..076fe55 100644 --- a/src/_harmony.scss +++ b/src/_harmony.scss | |||
@@ -8,6 +8,8 @@ | |||
8 | /// @access public | 8 | /// @access public |
9 | //// | 9 | //// |
10 | 10 | ||
11 | @use 'sass:math'; | ||
12 | |||
11 | /// | 13 | /// |
12 | /// Adjust a value to a modular scale. | 14 | /// Adjust a value to a modular scale. |
13 | /// | 15 | /// |
@@ -23,7 +25,7 @@ | |||
23 | /// | 25 | /// |
24 | @function iro-harmony-modular-scale($times, $base, $ratio) { | 26 | @function iro-harmony-modular-scale($times, $base, $ratio) { |
25 | @if type-of($base) == number { | 27 | @if type-of($base) == number { |
26 | @return $base * iro-math-pow($ratio, $times); | 28 | @return $base * math.pow($ratio, $times); |
27 | } | 29 | } |
28 | 30 | ||
29 | $main-base: nth($base, 1); | 31 | $main-base: nth($base, 1); |
@@ -32,7 +34,7 @@ | |||
32 | @each $b in iro-list-slice($base, 2) { | 34 | @each $b in iro-list-slice($base, 2) { |
33 | @if $b > $main-base { | 35 | @if $b > $main-base { |
34 | @while $b > $main-base { | 36 | @while $b > $main-base { |
35 | $b: $b / $ratio; | 37 | $b: math.div($b, $ratio); |
36 | } | 38 | } |
37 | $b: $b * $ratio; | 39 | $b: $b * $ratio; |
38 | } @else if $b < $main-base { | 40 | } @else if $b < $main-base { |
@@ -48,9 +50,9 @@ | |||
48 | $all-bases: iro-quicksort($all-bases); | 50 | $all-bases: iro-quicksort($all-bases); |
49 | 51 | ||
50 | $base-index: $times % length($all-bases) + 1; | 52 | $base-index: $times % length($all-bases) + 1; |
51 | $exp: floor($times / length($all-bases)); | 53 | $exp: math.floor(math.div($times, length($all-bases))); |
52 | 54 | ||
53 | @return nth($all-bases, $base-index) * iro-math-pow($ratio, $exp); | 55 | @return nth($all-bases, $base-index) * math.pow($ratio, $exp); |
54 | } | 56 | } |
55 | 57 | ||
56 | /// | 58 | /// |
diff --git a/src/_math.scss b/src/_math.scss deleted file mode 100644 index 9b71bf6..0000000 --- a/src/_math.scss +++ /dev/null | |||
@@ -1,62 +0,0 @@ | |||
1 | //// | ||
2 | /// Basic mathematical functions. | ||
3 | /// | ||
4 | /// @group Math functions | ||
5 | /// | ||
6 | /// @access public | ||
7 | //// | ||
8 | |||
9 | /// | ||
10 | /// Perform exponentiation. Only integer exponents are supported. | ||
11 | /// | ||
12 | /// @param {number} $base | ||
13 | /// @param {number} $exp | ||
14 | /// | ||
15 | /// @return {number} | ||
16 | /// | ||
17 | /// @example scss - Exponentiation with a positive exponent | ||
18 | /// $result: iro-math-pow(3, 2); // The value of $result is 3^2 = 9 | ||
19 | /// | ||
20 | /// @example scss - Exponentiation with a negative exponent | ||
21 | /// $result: iro-math-pow(2, -3); // The value of $result is 1/(2^3) = 1/8 | ||
22 | /// | ||
23 | @function iro-math-pow($base, $exp) { | ||
24 | $value: 1; | ||
25 | |||
26 | @if $exp > 0 { | ||
27 | @for $i from 1 through $exp { | ||
28 | $value: $value * $base; | ||
29 | } | ||
30 | } @else if $exp < 0 { | ||
31 | @for $i from 1 through -$exp { | ||
32 | $value: $value / $base; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | @return $value; | ||
37 | } | ||
38 | |||
39 | /// | ||
40 | /// Clamp a number between a minimum and maximum value. | ||
41 | /// | ||
42 | /// @param {number} $value - Value to clamp | ||
43 | /// @param {number} $min - Minimum value | ||
44 | /// @param {number} $max - Maximum value | ||
45 | /// | ||
46 | /// @return {number} | ||
47 | /// | ||
48 | /// @example scss | ||
49 | /// $result: iro-math-clamp(20, 0, 10); // The value of $result is 10 | ||
50 | /// | ||
51 | /// @example scss | ||
52 | /// $result: iro-math-clamp(50, 20, 100); // The value of $result is 50 | ||
53 | /// | ||
54 | @function iro-math-clamp($value, $min, $max) { | ||
55 | @if $value < $min { | ||
56 | @return $min; | ||
57 | } | ||
58 | @if $value > $max { | ||
59 | @return $max; | ||
60 | } | ||
61 | @return $value; | ||
62 | } | ||
diff --git a/src/_responsive.scss b/src/_responsive.scss index 6f2a416..a3d8445 100644 --- a/src/_responsive.scss +++ b/src/_responsive.scss | |||
@@ -391,9 +391,9 @@ $iro-responsive-context-id: 'responsive' !default; | |||
391 | } | 391 | } |
392 | 392 | ||
393 | @if not $vertical { | 393 | @if not $vertical { |
394 | $calc: unquote('#{$calc}#{$value-diff} * ((100vw - #{$min-viewport}) / #{$viewport-diff})'); | 394 | $calc: unquote('#{$calc}#{$value-diff} * (100vw - #{$min-viewport}) / #{$viewport-diff}'); |
395 | } @else { | 395 | } @else { |
396 | $calc: unquote('#{$calc}#{$value-diff} * ((100vh - #{$min-viewport}) / #{$viewport-diff})'); | 396 | $calc: unquote('#{$calc}#{$value-diff} * (100vh - #{$min-viewport}) / #{$viewport-diff}'); |
397 | } | 397 | } |
398 | 398 | ||
399 | @if $without-calc { | 399 | @if $without-calc { |
diff --git a/src/main.scss b/src/main.scss index 5b1b3d1..898b0ae 100644 --- a/src/main.scss +++ b/src/main.scss | |||
@@ -1,5 +1,4 @@ | |||
1 | @import 'functions'; | 1 | @import 'functions'; |
2 | @import 'math'; | ||
3 | @import 'vars'; | 2 | @import 'vars'; |
4 | @import 'contexts'; | 3 | @import 'contexts'; |
5 | @import 'bem'; | 4 | @import 'bem'; |