gradients.styl 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. @import 'config'
  2. /*
  3. * Implicit color stop position.
  4. */
  5. pos-in-stops(i, stops)
  6. len = length(stops)
  7. if len - 1 == i
  8. 100%
  9. else if i
  10. unit(i / len * 100, '%')
  11. else
  12. 0
  13. /*
  14. * Normalize color stops:
  15. *
  16. * - (color pos) -> (pos color)
  17. * - (color) -> (implied-pos color)
  18. *
  19. */
  20. normalize-stops(stops)
  21. stops = clone(stops)
  22. for stop, i in stops
  23. if length(stop) == 1
  24. color = stop[0]
  25. stop[0] = pos-in-stops(i, stops)
  26. stop[1] = color
  27. else if typeof(stop[1]) == 'unit'
  28. pos = stop[1]
  29. stop[1] = stop[0]
  30. stop[0] = pos
  31. stops
  32. /*
  33. * Join color stops with the given translation function.
  34. */
  35. join-stops(stops, translate)
  36. str = ''
  37. len = length(stops)
  38. for stop, i in stops
  39. str += ', ' if i
  40. pos = stop[0]
  41. color = stop[1]
  42. str += translate(color, pos)
  43. unquote(str)
  44. /*
  45. * Standard color stop.
  46. */
  47. std-stop(color, pos)
  48. '%s %s' % (color pos)
  49. /*
  50. * Create a linear gradient with the given start position
  51. * and variable number of color stops.
  52. *
  53. * Examples:
  54. *
  55. * background: linear-gradient(top, red, green, blue)
  56. * background: linear-gradient(bottom, red, green 50%, blue)
  57. * background: linear-gradient(bottom, red, 50% green, blue)
  58. * background: linear-gradient(bottom, red, 50% green, 90% white, blue)
  59. *
  60. */
  61. linear-gradient(start, stops...)
  62. error('color stops required') unless length(stops)
  63. unquote('linear-gradient(' + join(', ',arguments) + ')')
  64. /*
  65. * Create a linear gradient image with the given start position
  66. * and variable number of color stops.
  67. */
  68. linear-gradient-image(start, stops...)
  69. error('node-canvas is required for linear-gradient-image()') unless has-canvas
  70. stops = stops[0] if length(stops) == 1
  71. error('gradient image size required') unless start[0] is a 'unit'
  72. size = start[0]
  73. start = start[1] or 'top'
  74. grad = create-gradient-image(size, start)
  75. stops = normalize-stops(stops)
  76. add-color-stop(grad, stop[0], stop[1]) for stop in stops
  77. 'url(%s)' % gradient-data-uri(grad)