_vendor.scss 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. // vendor.scss v1.0 | @ajlkn | MIT licensed */
  2. // Vars.
  3. /// Vendor prefixes.
  4. /// @var {list}
  5. $vendor-prefixes: (
  6. '-moz-',
  7. '-webkit-',
  8. '-ms-',
  9. ''
  10. );
  11. /// Properties that should be vendorized.
  12. /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
  13. /// @var {list}
  14. $vendor-properties: (
  15. // Animation.
  16. 'animation',
  17. 'animation-delay',
  18. 'animation-direction',
  19. 'animation-duration',
  20. 'animation-fill-mode',
  21. 'animation-iteration-count',
  22. 'animation-name',
  23. 'animation-play-state',
  24. 'animation-timing-function',
  25. // Appearance.
  26. 'appearance',
  27. // Backdrop filter.
  28. 'backdrop-filter',
  29. // Background image options.
  30. 'background-clip',
  31. 'background-origin',
  32. 'background-size',
  33. // Box sizing.
  34. 'box-sizing',
  35. // Clip path.
  36. 'clip-path',
  37. // Filter effects.
  38. 'filter',
  39. // Flexbox.
  40. 'align-content',
  41. 'align-items',
  42. 'align-self',
  43. 'flex',
  44. 'flex-basis',
  45. 'flex-direction',
  46. 'flex-flow',
  47. 'flex-grow',
  48. 'flex-shrink',
  49. 'flex-wrap',
  50. 'justify-content',
  51. 'order',
  52. // Font feature.
  53. 'font-feature-settings',
  54. 'font-language-override',
  55. 'font-variant-ligatures',
  56. // Font kerning.
  57. 'font-kerning',
  58. // Fragmented borders and backgrounds.
  59. 'box-decoration-break',
  60. // Grid layout.
  61. 'grid-column',
  62. 'grid-column-align',
  63. 'grid-column-end',
  64. 'grid-column-start',
  65. 'grid-row',
  66. 'grid-row-align',
  67. 'grid-row-end',
  68. 'grid-row-start',
  69. 'grid-template-columns',
  70. 'grid-template-rows',
  71. // Hyphens.
  72. 'hyphens',
  73. 'word-break',
  74. // Masks.
  75. 'mask',
  76. 'mask-border',
  77. 'mask-border-outset',
  78. 'mask-border-repeat',
  79. 'mask-border-slice',
  80. 'mask-border-source',
  81. 'mask-border-width',
  82. 'mask-clip',
  83. 'mask-composite',
  84. 'mask-image',
  85. 'mask-origin',
  86. 'mask-position',
  87. 'mask-repeat',
  88. 'mask-size',
  89. // Multicolumn.
  90. 'break-after',
  91. 'break-before',
  92. 'break-inside',
  93. 'column-count',
  94. 'column-fill',
  95. 'column-gap',
  96. 'column-rule',
  97. 'column-rule-color',
  98. 'column-rule-style',
  99. 'column-rule-width',
  100. 'column-span',
  101. 'column-width',
  102. 'columns',
  103. // Object fit.
  104. 'object-fit',
  105. 'object-position',
  106. // Regions.
  107. 'flow-from',
  108. 'flow-into',
  109. 'region-fragment',
  110. // Scroll snap points.
  111. 'scroll-snap-coordinate',
  112. 'scroll-snap-destination',
  113. 'scroll-snap-points-x',
  114. 'scroll-snap-points-y',
  115. 'scroll-snap-type',
  116. // Shapes.
  117. 'shape-image-threshold',
  118. 'shape-margin',
  119. 'shape-outside',
  120. // Tab size.
  121. 'tab-size',
  122. // Text align last.
  123. 'text-align-last',
  124. // Text decoration.
  125. 'text-decoration-color',
  126. 'text-decoration-line',
  127. 'text-decoration-skip',
  128. 'text-decoration-style',
  129. // Text emphasis.
  130. 'text-emphasis',
  131. 'text-emphasis-color',
  132. 'text-emphasis-position',
  133. 'text-emphasis-style',
  134. // Text size adjust.
  135. 'text-size-adjust',
  136. // Text spacing.
  137. 'text-spacing',
  138. // Transform.
  139. 'transform',
  140. 'transform-origin',
  141. // Transform 3D.
  142. 'backface-visibility',
  143. 'perspective',
  144. 'perspective-origin',
  145. 'transform-style',
  146. // Transition.
  147. 'transition',
  148. 'transition-delay',
  149. 'transition-duration',
  150. 'transition-property',
  151. 'transition-timing-function',
  152. // Unicode bidi.
  153. 'unicode-bidi',
  154. // User select.
  155. 'user-select',
  156. // Writing mode.
  157. 'writing-mode',
  158. );
  159. /// Values that should be vendorized.
  160. /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
  161. /// @var {list}
  162. $vendor-values: (
  163. // Cross fade.
  164. 'cross-fade',
  165. // Element function.
  166. 'element',
  167. // Filter function.
  168. 'filter',
  169. // Flexbox.
  170. 'flex',
  171. 'inline-flex',
  172. // Grab cursors.
  173. 'grab',
  174. 'grabbing',
  175. // Gradients.
  176. 'linear-gradient',
  177. 'repeating-linear-gradient',
  178. 'radial-gradient',
  179. 'repeating-radial-gradient',
  180. // Grid layout.
  181. 'grid',
  182. 'inline-grid',
  183. // Image set.
  184. 'image-set',
  185. // Intrinsic width.
  186. 'max-content',
  187. 'min-content',
  188. 'fit-content',
  189. 'fill',
  190. 'fill-available',
  191. 'stretch',
  192. // Sticky position.
  193. 'sticky',
  194. // Transform.
  195. 'transform',
  196. // Zoom cursors.
  197. 'zoom-in',
  198. 'zoom-out',
  199. );
  200. // Functions.
  201. /// Removes a specific item from a list.
  202. /// @author Hugo Giraudel
  203. /// @param {list} $list List.
  204. /// @param {integer} $index Index.
  205. /// @return {list} Updated list.
  206. @function remove-nth($list, $index) {
  207. $result: null;
  208. @if type-of($index) != number {
  209. @warn "$index: #{quote($index)} is not a number for `remove-nth`.";
  210. }
  211. @else if $index == 0 {
  212. @warn "List index 0 must be a non-zero integer for `remove-nth`.";
  213. }
  214. @else if abs($index) > length($list) {
  215. @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
  216. }
  217. @else {
  218. $result: ();
  219. $index: if($index < 0, length($list) + $index + 1, $index);
  220. @for $i from 1 through length($list) {
  221. @if $i != $index {
  222. $result: append($result, nth($list, $i));
  223. }
  224. }
  225. }
  226. @return $result;
  227. }
  228. /// Replaces a substring within another string.
  229. /// @author Hugo Giraudel
  230. /// @param {string} $string String.
  231. /// @param {string} $search Substring.
  232. /// @param {string} $replace Replacement.
  233. /// @return {string} Updated string.
  234. @function str-replace($string, $search, $replace: '') {
  235. $index: str-index($string, $search);
  236. @if $index {
  237. @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  238. }
  239. @return $string;
  240. }
  241. /// Replaces a substring within each string in a list.
  242. /// @param {list} $strings List of strings.
  243. /// @param {string} $search Substring.
  244. /// @param {string} $replace Replacement.
  245. /// @return {list} Updated list of strings.
  246. @function str-replace-all($strings, $search, $replace: '') {
  247. @each $string in $strings {
  248. $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
  249. }
  250. @return $strings;
  251. }
  252. // Mixins.
  253. /// Wraps @content in vendorized keyframe blocks.
  254. /// @param {string} $name Name.
  255. @mixin keyframes($name) {
  256. @-moz-keyframes #{$name} { @content; }
  257. @-webkit-keyframes #{$name} { @content; }
  258. @-ms-keyframes #{$name} { @content; }
  259. @keyframes #{$name} { @content; }
  260. }
  261. /// Vendorizes a declaration's property and/or value(s).
  262. /// @param {string} $property Property.
  263. /// @param {mixed} $value String/list of value(s).
  264. @mixin vendor($property, $value) {
  265. // Determine if property should expand.
  266. $expandProperty: index($vendor-properties, $property);
  267. // Determine if value should expand (and if so, add '-prefix-' placeholder).
  268. $expandValue: false;
  269. @each $x in $value {
  270. @each $y in $vendor-values {
  271. @if $y == str-slice($x, 1, str-length($y)) {
  272. $value: set-nth($value, index($value, $x), '-prefix-' + $x);
  273. $expandValue: true;
  274. }
  275. }
  276. }
  277. // Expand property?
  278. @if $expandProperty {
  279. @each $vendor in $vendor-prefixes {
  280. #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
  281. }
  282. }
  283. // Expand just the value?
  284. @elseif $expandValue {
  285. @each $vendor in $vendor-prefixes {
  286. #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
  287. }
  288. }
  289. // Neither? Treat them as a normal declaration.
  290. @else {
  291. #{$property}: #{$value};
  292. }
  293. }