aboutsummaryrefslogtreecommitdiffstats
path: root/src/_gradients.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_gradients.scss')
-rw-r--r--src/_gradients.scss643
1 files changed, 319 insertions, 324 deletions
diff --git a/src/_gradients.scss b/src/_gradients.scss
index 6575482..345a9f1 100644
--- a/src/_gradients.scss
+++ b/src/_gradients.scss
@@ -15,8 +15,11 @@
15/// @access public 15/// @access public
16//// 16////
17 17
18@use 'sass:color';
19@use 'sass:list';
18@use 'sass:math'; 20@use 'sass:math';
19@use 'sass:meta'; 21@use 'sass:meta';
22@use 'sass:string';
20@use './functions'; 23@use './functions';
21@use './easing'; 24@use './easing';
22 25
@@ -135,144 +138,136 @@ $easing-gradient-steps: 10 !default;
135/// } 138/// }
136/// 139///
137@function easing-gradient($type, $dir, $stop, $stops...) { 140@function easing-gradient($type, $dir, $stop, $stops...) {
138 $pos-template: null; 141 $pos-template: null;
139 $stops: functions.list-prepend($stops, $stop); 142 $stops: functions.list-prepend($stops, $stop);
140 143
141 $last-positioned-stop: 1; 144 $last-positioned-stop: 1;
142 $generated-stops: (); 145 $generated-stops: ();
143 146
144 // 147 //
145 // Generate gradient 148 // Generate gradient
146 // 149 //
147 150
148 @for $i from 1 through length($stops) { 151 @for $i from 1 through list.length($stops) {
149 $stop: nth($stops, $i); 152 $stop: list.nth($stops, $i);
150 153
151 @if $i == 1 { 154 @if $i == 1 {
152 @if not easing-gradient-is-color-stop($stop) { 155 @if not easing-gradient-is-color-stop($stop) {
153 @error 'The first color stop argument must be a color stop.'; 156 @error 'The first color stop argument must be a color stop.';
154 } 157 }
155 158
156 @if type-of($stop) == color { 159 @if meta.type-of($stop) == color {
157 // 160 //
158 // The first color stop is unpositioned. The default position for the first 161 // The first color stop is unpositioned. The default position for the first
159 // color stop is 0, which is explicitly added for easier calculations. 162 // color stop is 0, which is explicitly added for easier calculations.
160 // 163 //
161 164
162 $stop: $stop 0; 165 $stop: $stop 0;
163 $stops: set-nth($stops, $i, $stop); 166 $stops: list.set-nth($stops, $i, $stop);
164 } 167 }
165 168
166 $generated-stops: append($generated-stops, functions.str-implode($stop, ' ')); 169 $generated-stops: list.append($generated-stops, functions.str-implode($stop, ' '));
167 } @else if easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) { 170 } @else if easing-gradient-is-positioned-color-stop($stop) or ($i == list.length($stops)) {
168 @if not easing-gradient-is-color-stop($stop) { 171 @if not easing-gradient-is-color-stop($stop) {
169 @error 'The last color stop argument must be a color stop.'; 172 @error 'The last color stop argument must be a color stop.';
170 } 173 }
171 174
172 // 175 //
173 // Either the current stops list item is a positioned color stop, or the end of 176 // Either the current stops list item is a positioned color stop, or the end of
174 // the stops list has been reached. 177 // the stops list has been reached.
175 // 178 //
176 179
177 @if (type-of($stop) == color) and ($i == length($stops)) { 180 @if (meta.type-of($stop) == color) and ($i == list.length($stops)) {
178 // 181 //
179 // The current stop is an unpositioned color stop, which means this is the end 182 // The current stop is an unpositioned color stop, which means this is the end
180 // of the stops list. The default position for the last color stop is 100%, which 183 // of the stops list. The default position for the last color stop is 100%, which
181 // is explicitly added for easier calculations. 184 // is explicitly added for easier calculations.
182 // 185 //
183 186
184 $stop: $stop 100%; 187 $stop: $stop 100%;
185 $stops: set-nth($stops, $i, $stop); 188 $stops: list.set-nth($stops, $i, $stop);
186 } 189 }
187 190
188 // 191 //
189 // Now the current color stop is guaranteed to be a positioned color stop. 192 // Now the current color stop is guaranteed to be a positioned color stop.
190 // 193 //
191 194
192 @if $i > $last-positioned-stop + 1 { 195 @if $i > $last-positioned-stop + 1 {
193 // 196 //
194 // There is at least one stops list item (unpositioned color stop or easing function) 197 // There is at least one stops list item (unpositioned color stop or easing function)
195 // between the last positioned color stop and the current stops list item. Interpolate 198 // between the last positioned color stop and the current stops list item. Interpolate
196 // the positions of all stops list items that are color stops. 199 // the positions of all stops list items that are color stops.
197 // 200 //
198 201
199 $interpolated-stops: easing-gradient-interpolate-stop-positions( 202 $interpolated-stops: easing-gradient-interpolate-stop-positions(list.nth($stops, $last-positioned-stop),
200 nth($stops, $last-positioned-stop), 203 functions.list-slice($stops, $last-positioned-stop + 1, $i - 1),
201 functions.list-slice($stops, $last-positioned-stop + 1, $i - 1), 204 $stop);
202 $stop
203 );
204 205
205 $new-stops: join( 206 $new-stops: list.join(functions.list-slice($stops, 1, $last-positioned-stop),
206 functions.list-slice($stops, 1, $last-positioned-stop), 207 $interpolated-stops);
207 $interpolated-stops 208 $new-stops: list.join($new-stops,
208 ); 209 functions.list-slice($stops, $i));
209 $new-stops: join( 210 $stops: $new-stops;
210 $new-stops, 211 }
211 functions.list-slice($stops, $i)
212 );
213 $stops: $new-stops;
214 }
215 212
216 // 213 //
217 // Now all color stops between this one and the last positioned one have 214 // Now all color stops between this one and the last positioned one have
218 // interpolated positions. 215 // interpolated positions.
219 // Next task is to perform an easing transition between all color stops that 216 // Next task is to perform an easing transition between all color stops that
220 // have an easing function specified. The rest can be left alone since the 217 // have an easing function specified. The rest can be left alone since the
221 // browser will automatically apply a linear transition between them. 218 // browser will automatically apply a linear transition between them.
222 // 219 //
223 220
224 $j: $last-positioned-stop + 1; 221 $j: $last-positioned-stop + 1;
225 @while $j <= $i { 222 @while $j <= $i {
226 $easing: null; 223 $easing: null;
227 $prev-stop: nth($stops, $j - 1); 224 $prev-stop: list.nth($stops, $j - 1);
228 $next-stop: nth($stops, $j); 225 $next-stop: list.nth($stops, $j);
229 226
230 @if not easing-gradient-is-color-stop($next-stop) { 227 @if not easing-gradient-is-color-stop($next-stop) {
231 $j: $j + 1; 228 $j: $j + 1;
232 229
233 $easing: $next-stop; 230 $easing: $next-stop;
234 $next-stop: nth($stops, $j); 231 $next-stop: list.nth($stops, $j);
235 232
236 @if not easing-gradient-is-color-stop($next-stop) { 233 @if not easing-gradient-is-color-stop($next-stop) {
237 @error 'There can be at most one interpolation hint between to color stops.'; 234 @error 'There can be at most one interpolation hint between to color stops.';
238 } 235 }
239 } 236 }
240 237
241 @if $easing != null { 238 @if $easing != null {
242 @if type-of($easing) == number { 239 @if meta.type-of($easing) == number {
243 @error 'Midpoint shifts are not supported.'; 240 @error 'Midpoint shifts are not supported.';
244 } 241 }
245 242
246 $easing-func: null; 243 $easing-func: null;
247 $easing-args: (); 244 $easing-args: ();
248 245
249 @if type-of($easing) == list { 246 @if meta.type-of($easing) == list {
250 $easing-args: functions.list-slice($easing, 2); 247 $easing-args: functions.list-slice($easing, 2);
251 $easing: nth($easing, 1); 248 $easing: list.nth($easing, 1);
252 } 249 }
253 250
254 $generated-stops: join( 251 $generated-stops: list.join($generated-stops,
255 $generated-stops, 252 easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args));
256 easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args) 253 } @else {
257 ); 254 $generated-stops: list.append($generated-stops, functions.str-implode($next-stop, ' '));
258 } @else { 255 }
259 $generated-stops: append($generated-stops, functions.str-implode($next-stop, ' '));
260 }
261 256
262 $j: $j + 1; 257 $j: $j + 1;
263 } 258 }
264 259
265 $last-positioned-stop: $i; 260 $last-positioned-stop: $i;
266 } 261 }
267 } 262 }
268 263
269 @if $type == 'linear' { 264 @if $type == 'linear' {
270 @return linear-gradient($dir, unquote(functions.str-implode($generated-stops, ', '))); 265 @return linear-gradient($dir, string.unquote(functions.str-implode($generated-stops, ', ')));
271 } @else if $type == 'radial' { 266 } @else if $type == 'radial' {
272 @return radial-gradient($dir, unquote(functions.str-implode($generated-stops, ', '))); 267 @return radial-gradient($dir, string.unquote(functions.str-implode($generated-stops, ', ')));
273 } @else { 268 } @else {
274 @error 'Invalid gradient type: #{inspect($type)}.'; 269 @error 'Invalid gradient type: #{inspect($type)}.';
275 } 270 }
276} 271}
277 272
278/// 273///
@@ -281,7 +276,7 @@ $easing-gradient-steps: 10 !default;
281/// @see {function} easing-gradient 276/// @see {function} easing-gradient
282/// 277///
283@function easing-linear-gradient($dir, $stop, $stops...) { 278@function easing-linear-gradient($dir, $stop, $stops...) {
284 @return easing-gradient('linear', $dir, $stop, $stops...); 279 @return easing-gradient('linear', $dir, $stop, $stops...);
285} 280}
286 281
287/// 282///
@@ -290,7 +285,7 @@ $easing-gradient-steps: 10 !default;
290/// @see {function} easing-gradient 285/// @see {function} easing-gradient
291/// 286///
292@function easing-radial-gradient($dir, $stop, $stops...) { 287@function easing-radial-gradient($dir, $stop, $stops...) {
293 @return easing-gradient('radial', $dir, $stop, $stops...); 288 @return easing-gradient('radial', $dir, $stop, $stops...);
294} 289}
295 290
296/// 291///
@@ -299,24 +294,24 @@ $easing-gradient-steps: 10 !default;
299/// @access private 294/// @access private
300/// 295///
301@function easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) { 296@function easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) {
302 @if $easing == 'steps' { 297 @if $easing == 'steps' {
303 $steps: null; 298 $steps: null;
304 $jump: null; 299 $jump: null;
305 300
306 @if length($easing-args) > 1 { 301 @if list.length($easing-args) > 1 {
307 $steps: nth($easing-args, 1); 302 $steps: list.nth($easing-args, 1);
308 $jump: nth($easing-args, 2); 303 $jump: list.nth($easing-args, 2);
309 } @else { 304 } @else {
310 $steps: nth($easing-args, 1); 305 $steps: list.nth($easing-args, 1);
311 $jump: jump-end; 306 $jump: jump-end;
312 } 307 }
313 308
314 @return easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump); 309 @return easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump);
315 } @else { 310 } @else {
316 $easing-func: get-function($easing, $module: easing); 311 $easing-func: meta.get-function($easing, $module: easing);
317 312
318 @return easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args); 313 @return easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args);
319 } 314 }
320} 315}
321 316
322/// 317///
@@ -325,74 +320,74 @@ $easing-gradient-steps: 10 !default;
325/// @access private 320/// @access private
326/// 321///
327@function easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) { 322@function easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) {
328 $prev-stop-color: nth($prev-stop, 1); 323 $prev-stop-color: list.nth($prev-stop, 1);
329 $prev-stop-pos: nth($prev-stop, 2); 324 $prev-stop-pos: list.nth($prev-stop, 2);
330 $next-stop-color: nth($next-stop, 1); 325 $next-stop-color: list.nth($next-stop, 1);
331 $next-stop-pos: nth($next-stop, 2); 326 $next-stop-pos: list.nth($next-stop, 2);
332 327
333 $stops: (); 328 $stops: ();
334 329
335 @if ((type-of($prev-stop-pos) == number) and (type-of($next-stop-pos) == number) and (unit($prev-stop-pos) == unit($next-stop-pos))) or ($prev-stop-pos == 0) or ($next-stop-pos == 0) { 330 @if ((meta.type-of($prev-stop-pos) == number) and (meta.type-of($next-stop-pos) == number) and (math.unit($prev-stop-pos) == math.unit($next-stop-pos))) or ($prev-stop-pos == 0) or ($next-stop-pos == 0) {
336 // 331 //
337 // The transition color stop positions can be statically calculated. 332 // The transition color stop positions can be statically calculated.
338 // 333 //
339 334
340 $distance: $next-stop-pos - $prev-stop-pos; 335 $distance: $next-stop-pos - $prev-stop-pos;
341 336
342 @for $i from 1 through $easing-gradient-steps { 337 @for $i from 1 through $easing-gradient-steps {
343 $perc: math.div($i, $easing-gradient-steps); 338 $perc: math.div($i, $easing-gradient-steps);
344 339
345 $color: null; 340 $color: null;
346 $pos: $prev-stop-pos + $perc * $distance; 341 $pos: $prev-stop-pos + $perc * $distance;
347 @if $perc == 1 { 342 @if $perc == 1 {
348 $color: $next-stop-color; 343 $color: $next-stop-color;
349 } @else { 344 } @else {
350 $color: mix($next-stop-color, $prev-stop-color, call($easing-func, append($easing-args, $perc)...) * 100%); 345 $color: color.mix($next-stop-color, $prev-stop-color, meta.call($easing-func, list.append($easing-args, $perc)...) * 100%);
351 } 346 }
352 347
353 $stops: append($stops, $color + ' ' + $pos); 348 $stops: list.append($stops, $color + ' ' + $pos);
354 } 349 }
355 } @else { 350 } @else {
356 // 351 //
357 // The transition color stop positions have to be dynamically calculated with the calc() function. 352 // The transition color stop positions have to be dynamically calculated with the calc() function.
358 // 353 //
359 354
360 @if type-of($prev-stop-pos) != number { 355 @if meta.type-of($prev-stop-pos) != number {
361 // must be calc() 356 // must be calc()
362 @if type-of($prev-stop-pos) != calculation { 357 @if meta.type-of($prev-stop-pos) != calculation {
363 @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; 358 @error 'Invalid color stop position: #{inspect($prev-stop-pos)}';
364 } 359 }
365 360
366 $prev-stop-pos: meta.calc-args($prev-stop-pos); 361 $prev-stop-pos: meta.calc-args($prev-stop-pos);
367 } 362 }
368 363
369 @if type-of($next-stop-pos) != number { 364 @if meta.type-of($next-stop-pos) != number {
370 // must be calc() 365 // must be calc()
371 @if type-of($next-stop-pos) != calculation { 366 @if meta.type-of($next-stop-pos) != calculation {
372 @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; 367 @error 'Invalid color stop position: #{inspect($next-stop-pos)}';
373 } 368 }
374 369
375 $next-stop-pos: meta.calc-args($next-stop-pos); 370 $next-stop-pos: meta.calc-args($next-stop-pos);
376 } 371 }
377 372
378 @for $i from 1 through $easing-gradient-steps { 373 @for $i from 1 through $easing-gradient-steps {
379 $perc: math.div($i, $easing-gradient-steps); 374 $perc: math.div($i, $easing-gradient-steps);
380 375
381 $color: null; 376 $color: null;
382 $pos: null; 377 $pos: null;
383 @if $perc == 1 { 378 @if $perc == 1 {
384 $color: $next-stop-color; 379 $color: $next-stop-color;
385 $pos: calc(#{$next-stop-pos}); 380 $pos: calc(#{$next-stop-pos});
386 } @else { 381 } @else {
387 $color: mix($next-stop-color, $prev-stop-color, call($easing-func, append($easing-args, $perc)...) * 100%); 382 $color: color.mix($next-stop-color, $prev-stop-color, meta.call($easing-func, list.append($easing-args, $perc)...) * 100%);
388 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc}); 383 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc});
389 } 384 }
390 385
391 $stops: append($stops, $color + ' ' + $pos); 386 $stops: list.append($stops, $color + ' ' + $pos);
392 } 387 }
393 } 388 }
394 389
395 @return $stops; 390 @return $stops;
396} 391}
397 392
398/// 393///
@@ -401,110 +396,110 @@ $easing-gradient-steps: 10 !default;
401/// @access private 396/// @access private
402/// 397///
403@function easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) { 398@function easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) {
404 $prev-stop-color: nth($prev-stop, 1); 399 $prev-stop-color: list.nth($prev-stop, 1);
405 $prev-stop-pos: nth($prev-stop, 2); 400 $prev-stop-pos: list.nth($prev-stop, 2);
406 $next-stop-color: nth($next-stop, 1); 401 $next-stop-color: list.nth($next-stop, 1);
407 $next-stop-pos: nth($next-stop, 2); 402 $next-stop-pos: list.nth($next-stop, 2);
408 403
409 $stops: (); 404 $stops: ();
410 405
411 @if ((type-of($prev-stop-pos) == number) and (type-of($next-stop-pos) == number) and (unit($prev-stop-pos) == unit($next-stop-pos))) or ($prev-stop-pos == 0) or ($next-stop-pos == 0) { 406 @if ((meta.type-of($prev-stop-pos) == number) and (meta.type-of($next-stop-pos) == number) and (math.unit($prev-stop-pos) == math.unit($next-stop-pos))) or ($prev-stop-pos == 0) or ($next-stop-pos == 0) {
412 // 407 //
413 // The transition color stop positions can be statically calculated. 408 // The transition color stop positions can be statically calculated.
414 // 409 //
415 410
416 $distance: $next-stop-pos - $prev-stop-pos; 411 $distance: $next-stop-pos - $prev-stop-pos;
417 412
418 @for $i from 1 through $steps { 413 @for $i from 1 through $steps {
419 $x1: math.div($i - 1, $steps); 414 $xx1: math.div($i - 1, $steps);
420 $x2: math.div($i, $steps); 415 $xx2: math.div($i, $steps);
421 $y: null; 416 $y: null;
422 417
423 @if $jump == jump-start { 418 @if $jump == jump-start {
424 $y: math.div($i, $steps); 419 $y: math.div($i, $steps);
425 } @else if $jump == jump-end { 420 } @else if $jump == jump-end {
426 $y: math.div($i - 1, $steps); 421 $y: math.div($i - 1, $steps);
427 } @else if $jump == jump-both { 422 } @else if $jump == jump-both {
428 $y: math.div($i, $steps + 1); 423 $y: math.div($i, $steps + 1);
429 } @else if $jump == jump-none { 424 } @else if $jump == jump-none {
430 $y: math.div($i - 1, $steps - 1); 425 $y: math.div($i - 1, $steps - 1);
431 } @else { 426 } @else {
432 @error 'Invalid $jump: #{inspect($jump)}'; 427 @error 'Invalid $jump: #{inspect($jump)}';
433 } 428 }
434 429
435 $color: null; 430 $color: null;
436 $pos1: if($x1 == 0, $prev-stop-pos, $prev-stop-pos + $x1 * $distance); 431 $pos1: if($xx1 == 0, $prev-stop-pos, $prev-stop-pos + $xx1 * $distance);
437 $pos2: if($x2 == 1, $next-stop-pos, $prev-stop-pos + $x2 * $distance); 432 $pos2: if($xx2 == 1, $next-stop-pos, $prev-stop-pos + $xx2 * $distance);
438 433
439 @if $y == 0 { 434 @if $y == 0 {
440 $color: $prev-stop-color; 435 $color: $prev-stop-color;
441 } @else if $y == 1 { 436 } @else if $y == 1 {
442 $color: $next-stop-color; 437 $color: $next-stop-color;
443 } @else { 438 } @else {
444 $color: mix($next-stop-color, $prev-stop-color, $y * 100%); 439 $color: color.mix($next-stop-color, $prev-stop-color, $y * 100%);
445 } 440 }
446 441
447 $stops: append($stops, $color + ' ' + $pos1); 442 $stops: list.append($stops, $color + ' ' + $pos1);
448 $stops: append($stops, $color + ' ' + $pos2); 443 $stops: list.append($stops, $color + ' ' + $pos2);
449 } 444 }
450 } @else { 445 } @else {
451 // 446 //
452 // The transition color stop positions have to be dynamically calculated with the calc() function. 447 // The transition color stop positions have to be dynamically calculated with the calc() function.
453 // 448 //
454 449
455 @if type-of($prev-stop-pos) != number { 450 @if meta.type-of($prev-stop-pos) != number {
456 // must be calc() 451 // must be calc()
457 @if type-of($prev-stop-pos) != calculation { 452 @if meta.type-of($prev-stop-pos) != calculation {
458 @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; 453 @error 'Invalid color stop position: #{inspect($prev-stop-pos)}';
459 } 454 }
460 455
461 $prev-stop-pos: meta.calc-args($prev-stop-pos); 456 $prev-stop-pos: meta.calc-args($prev-stop-pos);
462 } 457 }
463 458
464 @if type-of($next-stop-pos) != number { 459 @if meta.type-of($next-stop-pos) != number {
465 // must be calc() 460 // must be calc()
466 @if type-of($next-stop-pos) != calculation { 461 @if meta.type-of($next-stop-pos) != calculation {
467 @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; 462 @error 'Invalid color stop position: #{inspect($next-stop-pos)}';
468 } 463 }
469 464
470 $next-stop-pos: meta.calc-args($next-stop-pos); 465 $next-stop-pos: meta.calc-args($next-stop-pos);
471 } 466 }
472 467
473 @for $i from 1 through $steps { 468 @for $i from 1 through $steps {
474 $x1: math.div($i - 1, $steps); 469 $xx1: math.div($i - 1, $steps);
475 $x2: math.div($i, $steps); 470 $xx2: math.div($i, $steps);
476 $y: null; 471 $y: null;
477 472
478 @if $jump == jump-start { 473 @if $jump == jump-start {
479 $y: math.div($i, $steps); 474 $y: math.div($i, $steps);
480 } @else if $jump == jump-end { 475 } @else if $jump == jump-end {
481 $y: math.div($i - 1, $steps); 476 $y: math.div($i - 1, $steps);
482 } @else if $jump == jump-both { 477 } @else if $jump == jump-both {
483 $y: math.div($i, $steps + 1); 478 $y: math.div($i, $steps + 1);
484 } @else if $jump == jump-none { 479 } @else if $jump == jump-none {
485 $y: math.div($i - 1, $steps - 1); 480 $y: math.div($i - 1, $steps - 1);
486 } @else { 481 } @else {
487 @error 'Invalid $jump: #{inspect($jump)}'; 482 @error 'Invalid $jump: #{inspect($jump)}';
488 } 483 }
489 484
490 $color: null; 485 $color: null;
491 $pos1: if($x1 == 0, $prev-stop-pos, calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$x1})); 486 $pos1: if($xx1 == 0, $prev-stop-pos, calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$xx1}));
492 $pos2: if($x2 == 1, $next-stop-pos, calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$x2})); 487 $pos2: if($xx2 == 1, $next-stop-pos, calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$xx2}));
493 488
494 @if $y == 0 { 489 @if $y == 0 {
495 $color: $prev-stop-color; 490 $color: $prev-stop-color;
496 } @else if $y == 1 { 491 } @else if $y == 1 {
497 $color: $next-stop-color; 492 $color: $next-stop-color;
498 } @else { 493 } @else {
499 $color: mix($next-stop-color, $prev-stop-color, $y * 100%); 494 $color: color.mix($next-stop-color, $prev-stop-color, $y * 100%);
500 } 495 }
501 496
502 $stops: append($stops, $color + ' ' + $pos1); 497 $stops: list.append($stops, $color + ' ' + $pos1);
503 $stops: append($stops, $color + ' ' + $pos2); 498 $stops: list.append($stops, $color + ' ' + $pos2);
504 } 499 }
505 } 500 }
506 501
507 @return $stops; 502 @return $stops;
508} 503}
509 504
510/// 505///
@@ -513,72 +508,72 @@ $easing-gradient-steps: 10 !default;
513/// @access private 508/// @access private
514/// 509///
515@function easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) { 510@function easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) {
516 $prev-stop-pos: nth($prev-stop, 2); 511 $prev-stop-pos: list.nth($prev-stop, 2);
517 $next-stop-pos: nth($next-stop, 2); 512 $next-stop-pos: list.nth($next-stop, 2);
518 513
519 $stops-num: 0; 514 $stops-num: 0;
520 @for $i from 1 through length($stops) { 515 @for $i from 1 through list.length($stops) {
521 $stop: nth($stops, $i); 516 $stop: list.nth($stops, $i);
522 @if easing-gradient-is-color-stop($stop) { 517 @if easing-gradient-is-color-stop($stop) {
523 $stops-num: $stops-num + 1; 518 $stops-num: $stops-num + 1;
524 } 519 }
525 } 520 }
526 521
527 $i: 1; 522 $i: 1;
528 $cur-stop-num: 1; 523 $cur-stop-num: 1;
529 524
530 @if ((type-of($prev-stop-pos) == number) and (type-of($next-stop-pos) == number) and (unit($prev-stop-pos) == unit($next-stop-pos))) or ($prev-stop-pos == 0) or ($next-stop-pos == 0) { 525 @if ((meta.type-of($prev-stop-pos) == number) and (meta.type-of($next-stop-pos) == number) and (math.unit($prev-stop-pos) == math.unit($next-stop-pos))) or ($prev-stop-pos == 0) or ($next-stop-pos == 0) {
531 // 526 //
532 // The color stop positions can be statically calculated. 527 // The color stop positions can be statically calculated.
533 // 528 //
534 529
535 $distance: $next-stop-pos - $prev-stop-pos; 530 $distance: $next-stop-pos - $prev-stop-pos;
536 531
537 @for $i from 1 through length($stops) { 532 @for $i from 1 through list.length($stops) {
538 $stop: nth($stops, $i); 533 $stop: list.nth($stops, $i);
539 @if easing-gradient-is-color-stop($stop) { 534 @if easing-gradient-is-color-stop($stop) {
540 $pos: $prev-stop-pos + math.div($distance, $stops-num + 1) * $cur-stop-num; 535 $pos: $prev-stop-pos + math.div($distance, $stops-num + 1) * $cur-stop-num;
541 $stops: set-nth($stops, $i, $stop $pos); 536 $stops: list.set-nth($stops, $i, $stop $pos);
542 537
543 $cur-stop-num: $cur-stop-num + 1; 538 $cur-stop-num: $cur-stop-num + 1;
544 } 539 }
545 } 540 }
546 } @else { 541 } @else {
547 // 542 //
548 // The color stop positions have to be dynamically calculated with the calc() function. 543 // The color stop positions have to be dynamically calculated with the calc() function.
549 // 544 //
550 545
551 @if type-of($prev-stop-pos) != number { 546 @if meta.type-of($prev-stop-pos) != number {
552 // must be calc() 547 // must be calc()
553 @if type-of($prev-stop-pos) != calculation { 548 @if meta.type-of($prev-stop-pos) != calculation {
554 @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; 549 @error 'Invalid color stop position: #{inspect($prev-stop-pos)}';
555 } 550 }
556 551
557 $prev-stop-pos: meta.calc-args($prev-stop-pos); 552 $prev-stop-pos: meta.calc-args($prev-stop-pos);
558 } 553 }
559 554
560 @if type-of($next-stop-pos) != number { 555 @if meta.type-of($next-stop-pos) != number {
561 // must be calc() 556 // must be calc()
562 @if type-of($next-stop-pos) != calculation { 557 @if meta.type-of($next-stop-pos) != calculation {
563 @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; 558 @error 'Invalid color stop position: #{inspect($next-stop-pos)}';
564 } 559 }
565 560
566 $next-stop-pos: meta.calc-args($next-stop-pos); 561 $next-stop-pos: meta.calc-args($next-stop-pos);
567 } 562 }
568 563
569 @for $i from 1 through length($stops) { 564 @for $i from 1 through list.length($stops) {
570 $stop: nth($stops, $i); 565 $stop: list.nth($stops, $i);
571 @if easing-gradient-is-color-stop($stop) { 566 @if easing-gradient-is-color-stop($stop) {
572 $perc: math.div($cur-stop-num, $stops-num + 1); 567 $perc: math.div($cur-stop-num, $stops-num + 1);
573 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc}); 568 $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc});
574 $stops: set-nth($stops, $i, $stop $pos); 569 $stops: list.set-nth($stops, $i, $stop $pos);
575 570
576 $cur-stop-num: $cur-stop-num + 1; 571 $cur-stop-num: $cur-stop-num + 1;
577 } 572 }
578 } 573 }
579 } 574 }
580 575
581 @return $stops; 576 @return $stops;
582} 577}
583 578
584/// 579///
@@ -587,7 +582,7 @@ $easing-gradient-steps: 10 !default;
587/// @access private 582/// @access private
588/// 583///
589@function easing-gradient-is-color-stop($input) { 584@function easing-gradient-is-color-stop($input) {
590 @return (type-of($input) == color) or easing-gradient-is-positioned-color-stop($input); 585 @return (meta.type-of($input) == color) or easing-gradient-is-positioned-color-stop($input);
591} 586}
592 587
593/// 588///
@@ -596,5 +591,5 @@ $easing-gradient-steps: 10 !default;
596/// @access private 591/// @access private
597/// 592///
598@function easing-gradient-is-positioned-color-stop($input) { 593@function easing-gradient-is-positioned-color-stop($input) {
599 @return (type-of($input) == list) and (type-of(nth($input, 1)) == color); 594 @return (meta.type-of($input) == list) and (meta.type-of(list.nth($input, 1)) == color);
600} 595}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-22 18:47:36 +0000