yaffs.net Git - yaffs-website/blob - node_modules/video.js/src/css/utilities/_linear-gradient.scss

   1 // These functions and mixins taken from:
   2 //
   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
   6 //
   7
   8 /// Convert angle
   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) {
  17     @return $value
  18              / nth($conversion-factors, index($convertable-units, unit($value)))
  19              * nth($conversion-factors, index($convertable-units, $unit));
  20   }
  21
  22   @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
  23 }
  24
  25 /// Test if `$value` is an angle
  26 /// @param {*} $value - Value to test
  27 /// @return {Bool}
  28 @function is-direction($value) {
  29   $is-direction: index((
  30     'to top',
  31     'to top right',
  32     'to right top',
  33     'to right',
  34     'to bottom right',
  35     'to right bottom',
  36     'to bottom',
  37     'to bottom left',
  38     'to left bottom',
  39     'to left',
  40     'to left top',
  41     'to top left'
  42   ), $value);
  43   $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
  44
  45   @return $is-direction or $is-angle;
  46 }
  47
  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";
  55   }
  56
  57   $conversion-map: (
  58     'to top'          : 'bottom',
  59     'to top right'    : 'bottom left',
  60     'to right top'    : 'left bottom',
  61     'to right'        : 'left',
  62     'to bottom right' : 'top left',
  63     'to right bottom' : 'left top',
  64     'to bottom'       : 'top',
  65     'to bottom left'  : 'top right',
  66     'to left bottom'  : 'right top',
  67     'to left'         : 'right',
  68     'to left top'     : 'right bottom',
  69     'to top left'     : 'bottom right'
  70   );
  71
  72   @if map-has-key($conversion-map, $value) {
  73     @return map-get($conversion-map, $value);
  74   }
  75
  76   @return 90deg - convert-angle($value, 'deg');
  77 }
  78
  79 /// Mixin printing a linear-gradient
  80 /// as well as a plain color fallback
  81 /// and the `-webkit-` prefixed declaration
  82 /// @access public
  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);
  88     $direction: 180deg;
  89   }
  90
  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);
  94 }