aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_easing.scss12
-rw-r--r--src/_functions.scss8
-rw-r--r--src/_gradients.scss29
-rw-r--r--src/_harmony.scss10
-rw-r--r--src/_math.scss62
-rw-r--r--src/_responsive.scss4
-rw-r--r--src/main.scss1
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';