diff options
author | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
commit | dd5f3c463fab336d694f426dcad11a1783590fc9 (patch) | |
tree | faebf738a9556eaa393371852ed86550d4adf66a /src/_gradients.scss | |
parent | Fix errors from transition from node-sass to sass (diff) | |
download | iro-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.scss | 127 |
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 | } |