aboutsummaryrefslogtreecommitdiffstats
path: root/src/_gradients.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 07:52:13 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 07:52:13 +0100
commitdd5f3c463fab336d694f426dcad11a1783590fc9 (patch)
treefaebf738a9556eaa393371852ed86550d4adf66a /src/_gradients.scss
parentFix errors from transition from node-sass to sass (diff)
downloadiro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz
iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2
iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip
Ported from import syntax to modules
Diffstat (limited to 'src/_gradients.scss')
-rw-r--r--src/_gradients.scss127
1 files changed, 62 insertions, 65 deletions
diff --git a/src/_gradients.scss b/src/_gradients.scss
index 657efa2..6575482 100644
--- a/src/_gradients.scss
+++ b/src/_gradients.scss
@@ -17,6 +17,8 @@
17 17
18@use 'sass:math'; 18@use 'sass:math';
19@use 'sass:meta'; 19@use 'sass:meta';
20@use './functions';
21@use './easing';
20 22
21/// 23///
22/// Number of intermediate color stops generated to achieve easing. 24/// Number of intermediate color stops generated to achieve easing.
@@ -24,7 +26,7 @@
24/// 26///
25/// @type number 27/// @type number
26/// 28///
27$iro-easing-gradient-steps: 10 !default; 29$easing-gradient-steps: 10 !default;
28 30
29/// 31///
30/// Generate a new easing background gradient. 32/// Generate a new easing background gradient.
@@ -44,7 +46,7 @@ $iro-easing-gradient-steps: 10 !default;
44/// 46///
45/// @example scss - A smoother linear gradient 47/// @example scss - A smoother linear gradient
46/// .background { 48/// .background {
47/// background-image: iro-easing-gradient( 49/// background-image: easing-gradient(
48/// linear, 50/// linear,
49/// to top, 51/// to top,
50/// #000, 52/// #000,
@@ -74,7 +76,7 @@ $iro-easing-gradient-steps: 10 !default;
74/// 76///
75/// @example scss - A smoother radial gradient 77/// @example scss - A smoother radial gradient
76/// .background { 78/// .background {
77/// background-image: iro-easing-gradient( 79/// background-image: easing-gradient(
78/// radial, 80/// radial,
79/// 50em 16em at 0 0, 81/// 50em 16em at 0 0,
80/// #000, 82/// #000,
@@ -104,7 +106,7 @@ $iro-easing-gradient-steps: 10 !default;
104/// 106///
105/// @example scss - A smoother linear gradient with complex color positions 107/// @example scss - A smoother linear gradient with complex color positions
106/// .background { 108/// .background {
107/// background-image: iro-easing-gradient( 109/// background-image: easing-gradient(
108/// linear, 110/// linear,
109/// to top, 111/// to top,
110/// #000 20%, 112/// #000 20%,
@@ -132,9 +134,9 @@ $iro-easing-gradient-steps: 10 !default;
132/// ); 134/// );
133/// } 135/// }
134/// 136///
135@function iro-easing-gradient($type, $dir, $stop, $stops...) { 137@function easing-gradient($type, $dir, $stop, $stops...) {
136 $pos-template: null; 138 $pos-template: null;
137 $stops: iro-list-prepend($stops, $stop); 139 $stops: functions.list-prepend($stops, $stop);
138 140
139 $last-positioned-stop: 1; 141 $last-positioned-stop: 1;
140 $generated-stops: (); 142 $generated-stops: ();
@@ -147,7 +149,7 @@ $iro-easing-gradient-steps: 10 !default;
147 $stop: nth($stops, $i); 149 $stop: nth($stops, $i);
148 150
149 @if $i == 1 { 151 @if $i == 1 {
150 @if not iro-easing-gradient-is-color-stop($stop) { 152 @if not easing-gradient-is-color-stop($stop) {
151 @error 'The first color stop argument must be a color stop.'; 153 @error 'The first color stop argument must be a color stop.';
152 } 154 }
153 155
@@ -161,9 +163,9 @@ $iro-easing-gradient-steps: 10 !default;
161 $stops: set-nth($stops, $i, $stop); 163 $stops: set-nth($stops, $i, $stop);
162 } 164 }
163 165
164 $generated-stops: append($generated-stops, iro-str-implode($stop, ' ')); 166 $generated-stops: append($generated-stops, functions.str-implode($stop, ' '));
165 } @else if iro-easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) { 167 } @else if easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) {
166 @if not iro-easing-gradient-is-color-stop($stop) { 168 @if not easing-gradient-is-color-stop($stop) {
167 @error 'The last color stop argument must be a color stop.'; 169 @error 'The last color stop argument must be a color stop.';
168 } 170 }
169 171
@@ -194,19 +196,19 @@ $iro-easing-gradient-steps: 10 !default;
194 // the positions of all stops list items that are color stops. 196 // the positions of all stops list items that are color stops.
195 // 197 //
196 198
197 $interpolated-stops: iro-easing-gradient-interpolate-stop-positions( 199 $interpolated-stops: easing-gradient-interpolate-stop-positions(
198 nth($stops, $last-positioned-stop), 200 nth($stops, $last-positioned-stop),
199 iro-list-slice($stops, $last-positioned-stop + 1, $i - 1), 201 functions.list-slice($stops, $last-positioned-stop + 1, $i - 1),
200 $stop 202 $stop
201 ); 203 );
202 204
203 $new-stops: join( 205 $new-stops: join(
204 iro-list-slice($stops, 1, $last-positioned-stop), 206 functions.list-slice($stops, 1, $last-positioned-stop),
205 $interpolated-stops 207 $interpolated-stops
206 ); 208 );
207 $new-stops: join( 209 $new-stops: join(
208 $new-stops, 210 $new-stops,
209 iro-list-slice($stops, $i) 211 functions.list-slice($stops, $i)
210 ); 212 );
211 $stops: $new-stops; 213 $stops: $new-stops;
212 } 214 }
@@ -225,13 +227,13 @@ $iro-easing-gradient-steps: 10 !default;
225 $prev-stop: nth($stops, $j - 1); 227 $prev-stop: nth($stops, $j - 1);
226 $next-stop: nth($stops, $j); 228 $next-stop: nth($stops, $j);
227 229
228 @if not iro-easing-gradient-is-color-stop($next-stop) { 230 @if not easing-gradient-is-color-stop($next-stop) {
229 $j: $j + 1; 231 $j: $j + 1;
230 232
231 $easing: $next-stop; 233 $easing: $next-stop;
232 $next-stop: nth($stops, $j); 234 $next-stop: nth($stops, $j);
233 235
234 @if not iro-easing-gradient-is-color-stop($next-stop) { 236 @if not easing-gradient-is-color-stop($next-stop) {
235 @error 'There can be at most one interpolation hint between to color stops.'; 237 @error 'There can be at most one interpolation hint between to color stops.';
236 } 238 }
237 } 239 }
@@ -245,16 +247,16 @@ $iro-easing-gradient-steps: 10 !default;
245 $easing-args: (); 247 $easing-args: ();
246 248
247 @if type-of($easing) == list { 249 @if type-of($easing) == list {
248 $easing-args: iro-list-slice($easing, 2); 250 $easing-args: functions.list-slice($easing, 2);
249 $easing: nth($easing, 1); 251 $easing: nth($easing, 1);
250 } 252 }
251 253
252 $generated-stops: join( 254 $generated-stops: join(
253 $generated-stops, 255 $generated-stops,
254 iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args) 256 easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args)
255 ); 257 );
256 } @else { 258 } @else {
257 $generated-stops: append($generated-stops, iro-str-implode($next-stop, ' ')); 259 $generated-stops: append($generated-stops, functions.str-implode($next-stop, ' '));
258 } 260 }
259 261
260 $j: $j + 1; 262 $j: $j + 1;
@@ -265,30 +267,30 @@ $iro-easing-gradient-steps: 10 !default;
265 } 267 }
266 268
267 @if $type == 'linear' { 269 @if $type == 'linear' {
268 @return linear-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); 270 @return linear-gradient($dir, unquote(functions.str-implode($generated-stops, ', ')));
269 } @else if $type == 'radial' { 271 } @else if $type == 'radial' {
270 @return radial-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); 272 @return radial-gradient($dir, unquote(functions.str-implode($generated-stops, ', ')));
271 } @else { 273 } @else {
272 @error 'Invalid gradient type: #{inspect($type)}.'; 274 @error 'Invalid gradient type: #{inspect($type)}.';
273 } 275 }
274} 276}
275 277
276/// 278///
277/// Alias for iro-easing-gradient('linear',...) 279/// Alias for easing-gradient('linear',...)
278/// 280///
279/// @see {function} iro-easing-gradient 281/// @see {function} easing-gradient
280/// 282///
281@function iro-easing-linear-gradient($dir, $stop, $stops...) { 283@function easing-linear-gradient($dir, $stop, $stops...) {
282 @return iro-easing-gradient('linear', $dir, $stop, $stops...); 284 @return easing-gradient('linear', $dir, $stop, $stops...);
283} 285}
284 286
285/// 287///
286/// Alias for iro-easing-gradient('radial',...) 288/// Alias for easing-gradient('radial',...)
287/// 289///
288/// @see {function} iro-easing-gradient 290/// @see {function} easing-gradient
289/// 291///
290@function iro-easing-radial-gradient($dir, $stop, $stops...) { 292@function easing-radial-gradient($dir, $stop, $stops...) {
291 @return iro-easing-gradient('radial', $dir, $stop, $stops...); 293 @return easing-gradient('radial', $dir, $stop, $stops...);
292} 294}
293 295
294/// 296///
@@ -296,7 +298,7 @@ $iro-easing-gradient-steps: 10 !default;
296/// 298///
297/// @access private 299/// @access private
298/// 300///
299@function iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) { 301@function easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) {
300 @if $easing == 'steps' { 302 @if $easing == 'steps' {
301 $steps: null; 303 $steps: null;
302 $jump: null; 304 $jump: null;
@@ -309,16 +311,11 @@ $iro-easing-gradient-steps: 10 !default;
309 $jump: jump-end; 311 $jump: jump-end;
310 } 312 }
311 313
312 @return iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump); 314 @return easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump);
313 } @else { 315 } @else {
314 $easing-func: null; 316 $easing-func: get-function($easing, $module: easing);
315 @if function-exists('iro-' + $easing) {
316 $easing-func: get-function('iro-' + $easing);
317 } @else {
318 $easing-func: get-function($easing);
319 }
320 317
321 @return iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args); 318 @return easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args);
322 } 319 }
323} 320}
324 321
@@ -327,7 +324,7 @@ $iro-easing-gradient-steps: 10 !default;
327/// 324///
328/// @access private 325/// @access private
329/// 326///
330@function iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) { 327@function easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) {
331 $prev-stop-color: nth($prev-stop, 1); 328 $prev-stop-color: nth($prev-stop, 1);
332 $prev-stop-pos: nth($prev-stop, 2); 329 $prev-stop-pos: nth($prev-stop, 2);
333 $next-stop-color: nth($next-stop, 1); 330 $next-stop-color: nth($next-stop, 1);
@@ -342,8 +339,8 @@ $iro-easing-gradient-steps: 10 !default;
342 339
343 $distance: $next-stop-pos - $prev-stop-pos; 340 $distance: $next-stop-pos - $prev-stop-pos;
344 341
345 @for $i from 1 through $iro-easing-gradient-steps { 342 @for $i from 1 through $easing-gradient-steps {
346 $perc: math.div($i, $iro-easing-gradient-steps); 343 $perc: math.div($i, $easing-gradient-steps);
347 344
348 $color: null; 345 $color: null;
349 $pos: $prev-stop-pos + $perc * $distance; 346 $pos: $prev-stop-pos + $perc * $distance;
@@ -378,8 +375,8 @@ $iro-easing-gradient-steps: 10 !default;
378 $next-stop-pos: meta.calc-args($next-stop-pos); 375 $next-stop-pos: meta.calc-args($next-stop-pos);
379 } 376 }
380 377
381 @for $i from 1 through $iro-easing-gradient-steps { 378 @for $i from 1 through $easing-gradient-steps {
382 $perc: $i / $iro-easing-gradient-steps; 379 $perc: math.div($i, $easing-gradient-steps);
383 380
384 $color: null; 381 $color: null;
385 $pos: null; 382 $pos: null;
@@ -403,7 +400,7 @@ $iro-easing-gradient-steps: 10 !default;
403/// 400///
404/// @access private 401/// @access private
405/// 402///
406@function iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) { 403@function easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) {
407 $prev-stop-color: nth($prev-stop, 1); 404 $prev-stop-color: nth($prev-stop, 1);
408 $prev-stop-pos: nth($prev-stop, 2); 405 $prev-stop-pos: nth($prev-stop, 2);
409 $next-stop-color: nth($next-stop, 1); 406 $next-stop-color: nth($next-stop, 1);
@@ -419,18 +416,18 @@ $iro-easing-gradient-steps: 10 !default;
419 $distance: $next-stop-pos - $prev-stop-pos; 416 $distance: $next-stop-pos - $prev-stop-pos;
420 417
421 @for $i from 1 through $steps { 418 @for $i from 1 through $steps {
422 $x1: ($i - 1) / $steps; 419 $x1: math.div($i - 1, $steps);
423 $x2: $i / $steps; 420 $x2: math.div($i, $steps);
424 $y: null; 421 $y: null;
425 422
426 @if $jump == jump-start { 423 @if $jump == jump-start {
427 $y: $i / $steps; 424 $y: math.div($i, $steps);
428 } @else if $jump == jump-end { 425 } @else if $jump == jump-end {
429 $y: ($i - 1) / $steps; 426 $y: math.div($i - 1, $steps);
430 } @else if $jump == jump-both { 427 } @else if $jump == jump-both {
431 $y: $i / ($steps + 1); 428 $y: math.div($i, $steps + 1);
432 } @else if $jump == jump-none { 429 } @else if $jump == jump-none {
433 $y: ($i - 1) / ($steps - 1); 430 $y: math.div($i - 1, $steps - 1);
434 } @else { 431 } @else {
435 @error 'Invalid $jump: #{inspect($jump)}'; 432 @error 'Invalid $jump: #{inspect($jump)}';
436 } 433 }
@@ -474,18 +471,18 @@ $iro-easing-gradient-steps: 10 !default;
474 } 471 }
475 472
476 @for $i from 1 through $steps { 473 @for $i from 1 through $steps {
477 $x1: ($i - 1) / $steps; 474 $x1: math.div($i - 1, $steps);
478 $x2: $i / $steps; 475 $x2: math.div($i, $steps);
479 $y: null; 476 $y: null;
480 477
481 @if $jump == jump-start { 478 @if $jump == jump-start {
482 $y: $i / $steps; 479 $y: math.div($i, $steps);
483 } @else if $jump == jump-end { 480 } @else if $jump == jump-end {
484 $y: ($i - 1) / $steps; 481 $y: math.div($i - 1, $steps);
485 } @else if $jump == jump-both { 482 } @else if $jump == jump-both {
486 $y: $i / ($steps + 1); 483 $y: math.div($i, $steps + 1);
487 } @else if $jump == jump-none { 484 } @else if $jump == jump-none {
488 $y: ($i - 1) / ($steps - 1); 485 $y: math.div($i - 1, $steps - 1);
489 } @else { 486 } @else {
490 @error 'Invalid $jump: #{inspect($jump)}'; 487 @error 'Invalid $jump: #{inspect($jump)}';
491 } 488 }
@@ -515,14 +512,14 @@ $iro-easing-gradient-steps: 10 !default;
515/// 512///
516/// @access private 513/// @access private
517/// 514///
518@function iro-easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) { 515@function easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) {
519 $prev-stop-pos: nth($prev-stop, 2); 516 $prev-stop-pos: nth($prev-stop, 2);
520 $next-stop-pos: nth($next-stop, 2); 517 $next-stop-pos: nth($next-stop, 2);
521 518
522 $stops-num: 0; 519 $stops-num: 0;
523 @for $i from 1 through length($stops) { 520 @for $i from 1 through length($stops) {
524 $stop: nth($stops, $i); 521 $stop: nth($stops, $i);
525 @if iro-easing-gradient-is-color-stop($stop) { 522 @if easing-gradient-is-color-stop($stop) {
526 $stops-num: $stops-num + 1; 523 $stops-num: $stops-num + 1;
527 } 524 }
528 } 525 }
@@ -539,8 +536,8 @@ $iro-easing-gradient-steps: 10 !default;
539 536
540 @for $i from 1 through length($stops) { 537 @for $i from 1 through length($stops) {
541 $stop: nth($stops, $i); 538 $stop: nth($stops, $i);
542 @if iro-easing-gradient-is-color-stop($stop) { 539 @if easing-gradient-is-color-stop($stop) {
543 $pos: $prev-stop-pos + $distance / ($stops-num + 1) * $cur-stop-num; 540 $pos: $prev-stop-pos + math.div($distance, $stops-num + 1) * $cur-stop-num;
544 $stops: set-nth($stops, $i, $stop $pos); 541 $stops: set-nth($stops, $i, $stop $pos);
545 542
546 $cur-stop-num: $cur-stop-num + 1; 543 $cur-stop-num: $cur-stop-num + 1;
@@ -571,8 +568,8 @@ $iro-easing-gradient-steps: 10 !default;
571 568
572 @for $i from 1 through length($stops) { 569 @for $i from 1 through length($stops) {
573 $stop: nth($stops, $i); 570 $stop: nth($stops, $i);
574 @if iro-easing-gradient-is-color-stop($stop) { 571 @if easing-gradient-is-color-stop($stop) {
575 $perc: $cur-stop-num / ($stops-num + 1); 572 $perc: math.div($cur-stop-num, $stops-num + 1);
576 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc}); 573 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc});
577 $stops: set-nth($stops, $i, $stop $pos); 574 $stops: set-nth($stops, $i, $stop $pos);
578 575
@@ -589,8 +586,8 @@ $iro-easing-gradient-steps: 10 !default;
589/// 586///
590/// @access private 587/// @access private
591/// 588///
592@function iro-easing-gradient-is-color-stop($input) { 589@function easing-gradient-is-color-stop($input) {
593 @return (type-of($input) == color) or iro-easing-gradient-is-positioned-color-stop($input); 590 @return (type-of($input) == color) or easing-gradient-is-positioned-color-stop($input);
594} 591}
595 592
596/// 593///
@@ -598,6 +595,6 @@ $iro-easing-gradient-steps: 10 !default;
598/// 595///
599/// @access private 596/// @access private
600/// 597///
601@function iro-easing-gradient-is-positioned-color-stop($input) { 598@function easing-gradient-is-positioned-color-stop($input) {
602 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color); 599 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color);
603} 600}