| 1 | /* |
| 2 | A simple little SCSS mixin for creating scrim gradients |
| 3 | Inspired by Andreas Larson - https://github.com/larsenwork |
| 4 | https://css-tricks.com/easing-linear-gradients/ |
| 5 | */ |
| 6 | |
| 7 | @function scrimGradient($startColor: $color-black, $direction: "to bottom") { |
| 8 | $scrimCoordinates: ( |
| 9 | 0: 1, |
| 10 | 19: 0.738, |
| 11 | 34: 0.541, |
| 12 | 47: 0.382, |
| 13 | 56.5: 0.278, |
| 14 | 65: 0.194, |
| 15 | 73: 0.126, |
| 16 | 80.2: 0.075, |
| 17 | 86.1: 0.042, |
| 18 | 91: 0.021, |
| 19 | 95.2: 0.008, |
| 20 | 98.2: 0.002, |
| 21 | 100: 0 |
| 22 | ); |
| 23 | |
| 24 | $hue: hue($startColor); |
| 25 | $saturation: saturation($startColor); |
| 26 | $lightness: lightness($startColor); |
| 27 | $stops: (); |
| 28 | |
| 29 | @each $colorStop, $alphaValue in $scrimCoordinates { |
| 30 | $stop: hsla($hue, $saturation, $lightness, $alphaValue) percentage($colorStop/100); |
| 31 | $stops: append($stops, $stop, comma); |
| 32 | } |
| 33 | |
| 34 | @return linear-gradient(unquote($direction), $stops); |
| 35 | } |