1 // These functions and mixins taken from:
3 // "Building a linear-gradient Mixin in Sass" by Hugo Giraudel
4 // http://www.sitepoint.com/building-linear-gradient-mixin-sass/
5 // http://sassmeister.com/gist/b58f6e2cc3160007c880
9 /// @author Chris Eppstein
10 /// @param {Number} $value - Value to convert
11 /// @param {String} $unit - Unit to convert to
12 /// @return {Number} Converted angle
13 @function convert-angle($value, $unit) {
14 $convertable-units: deg grad turn rad;
15 $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
16 @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
18 / nth($conversion-factors, index($convertable-units, unit($value)))
19 * nth($conversion-factors, index($convertable-units, $unit));
22 @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
25 /// Test if `$value` is an angle
26 /// @param {*} $value - Value to test
28 @function is-direction($value) {
29 $is-direction: index((
43 $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
45 @return $is-direction or $is-angle;
48 /// Convert a direction to legacy syntax
49 /// @param {Keyword | Angle} $value - Value to convert
50 /// @require {function} is-direction
51 /// @require {function} convert-angle
52 @function legacy-direction($value) {
53 @if is-direction($value) == false {
54 @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
59 'to top right' : 'bottom left',
60 'to right top' : 'left bottom',
62 'to bottom right' : 'top left',
63 'to right bottom' : 'left top',
65 'to bottom left' : 'top right',
66 'to left bottom' : 'right top',
68 'to left top' : 'right bottom',
69 'to top left' : 'bottom right'
72 @if map-has-key($conversion-map, $value) {
73 @return map-get($conversion-map, $value);
76 @return 90deg - convert-angle($value, 'deg');
79 /// Mixin printing a linear-gradient
80 /// as well as a plain color fallback
81 /// and the `-webkit-` prefixed declaration
83 /// @param {String | List | Angle} $direction - Linear gradient direction
84 /// @param {Arglist} $color-stops - List of color-stops composing the gradient
85 @mixin linear-gradient($direction, $color-stops...) {
86 @if is-direction($direction) == false {
87 $color-stops: ($direction, $color-stops);
91 background: nth(nth($color-stops, 1), 1);
92 background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
93 background: linear-gradient($direction, $color-stops);