You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
7.2 KiB
376 lines
7.2 KiB
// vendor.scss v1.0 | @ajlkn | MIT licensed */ |
|
|
|
// Vars. |
|
|
|
/// Vendor prefixes. |
|
/// @var {list} |
|
$vendor-prefixes: ( |
|
'-moz-', |
|
'-webkit-', |
|
'-ms-', |
|
'' |
|
); |
|
|
|
/// Properties that should be vendorized. |
|
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org |
|
/// @var {list} |
|
$vendor-properties: ( |
|
|
|
// Animation. |
|
'animation', |
|
'animation-delay', |
|
'animation-direction', |
|
'animation-duration', |
|
'animation-fill-mode', |
|
'animation-iteration-count', |
|
'animation-name', |
|
'animation-play-state', |
|
'animation-timing-function', |
|
|
|
// Appearance. |
|
'appearance', |
|
|
|
// Backdrop filter. |
|
'backdrop-filter', |
|
|
|
// Background image options. |
|
'background-clip', |
|
'background-origin', |
|
'background-size', |
|
|
|
// Box sizing. |
|
'box-sizing', |
|
|
|
// Clip path. |
|
'clip-path', |
|
|
|
// Filter effects. |
|
'filter', |
|
|
|
// Flexbox. |
|
'align-content', |
|
'align-items', |
|
'align-self', |
|
'flex', |
|
'flex-basis', |
|
'flex-direction', |
|
'flex-flow', |
|
'flex-grow', |
|
'flex-shrink', |
|
'flex-wrap', |
|
'justify-content', |
|
'order', |
|
|
|
// Font feature. |
|
'font-feature-settings', |
|
'font-language-override', |
|
'font-variant-ligatures', |
|
|
|
// Font kerning. |
|
'font-kerning', |
|
|
|
// Fragmented borders and backgrounds. |
|
'box-decoration-break', |
|
|
|
// Grid layout. |
|
'grid-column', |
|
'grid-column-align', |
|
'grid-column-end', |
|
'grid-column-start', |
|
'grid-row', |
|
'grid-row-align', |
|
'grid-row-end', |
|
'grid-row-start', |
|
'grid-template-columns', |
|
'grid-template-rows', |
|
|
|
// Hyphens. |
|
'hyphens', |
|
'word-break', |
|
|
|
// Masks. |
|
'mask', |
|
'mask-border', |
|
'mask-border-outset', |
|
'mask-border-repeat', |
|
'mask-border-slice', |
|
'mask-border-source', |
|
'mask-border-width', |
|
'mask-clip', |
|
'mask-composite', |
|
'mask-image', |
|
'mask-origin', |
|
'mask-position', |
|
'mask-repeat', |
|
'mask-size', |
|
|
|
// Multicolumn. |
|
'break-after', |
|
'break-before', |
|
'break-inside', |
|
'column-count', |
|
'column-fill', |
|
'column-gap', |
|
'column-rule', |
|
'column-rule-color', |
|
'column-rule-style', |
|
'column-rule-width', |
|
'column-span', |
|
'column-width', |
|
'columns', |
|
|
|
// Object fit. |
|
'object-fit', |
|
'object-position', |
|
|
|
// Regions. |
|
'flow-from', |
|
'flow-into', |
|
'region-fragment', |
|
|
|
// Scroll snap points. |
|
'scroll-snap-coordinate', |
|
'scroll-snap-destination', |
|
'scroll-snap-points-x', |
|
'scroll-snap-points-y', |
|
'scroll-snap-type', |
|
|
|
// Shapes. |
|
'shape-image-threshold', |
|
'shape-margin', |
|
'shape-outside', |
|
|
|
// Tab size. |
|
'tab-size', |
|
|
|
// Text align last. |
|
'text-align-last', |
|
|
|
// Text decoration. |
|
'text-decoration-color', |
|
'text-decoration-line', |
|
'text-decoration-skip', |
|
'text-decoration-style', |
|
|
|
// Text emphasis. |
|
'text-emphasis', |
|
'text-emphasis-color', |
|
'text-emphasis-position', |
|
'text-emphasis-style', |
|
|
|
// Text size adjust. |
|
'text-size-adjust', |
|
|
|
// Text spacing. |
|
'text-spacing', |
|
|
|
// Transform. |
|
'transform', |
|
'transform-origin', |
|
|
|
// Transform 3D. |
|
'backface-visibility', |
|
'perspective', |
|
'perspective-origin', |
|
'transform-style', |
|
|
|
// Transition. |
|
'transition', |
|
'transition-delay', |
|
'transition-duration', |
|
'transition-property', |
|
'transition-timing-function', |
|
|
|
// Unicode bidi. |
|
'unicode-bidi', |
|
|
|
// User select. |
|
'user-select', |
|
|
|
// Writing mode. |
|
'writing-mode', |
|
|
|
); |
|
|
|
/// Values that should be vendorized. |
|
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org |
|
/// @var {list} |
|
$vendor-values: ( |
|
|
|
// Cross fade. |
|
'cross-fade', |
|
|
|
// Element function. |
|
'element', |
|
|
|
// Filter function. |
|
'filter', |
|
|
|
// Flexbox. |
|
'flex', |
|
'inline-flex', |
|
|
|
// Grab cursors. |
|
'grab', |
|
'grabbing', |
|
|
|
// Gradients. |
|
'linear-gradient', |
|
'repeating-linear-gradient', |
|
'radial-gradient', |
|
'repeating-radial-gradient', |
|
|
|
// Grid layout. |
|
'grid', |
|
'inline-grid', |
|
|
|
// Image set. |
|
'image-set', |
|
|
|
// Intrinsic width. |
|
'max-content', |
|
'min-content', |
|
'fit-content', |
|
'fill', |
|
'fill-available', |
|
'stretch', |
|
|
|
// Sticky position. |
|
'sticky', |
|
|
|
// Transform. |
|
'transform', |
|
|
|
// Zoom cursors. |
|
'zoom-in', |
|
'zoom-out', |
|
|
|
); |
|
|
|
// Functions. |
|
|
|
/// Removes a specific item from a list. |
|
/// @author Hugo Giraudel |
|
/// @param {list} $list List. |
|
/// @param {integer} $index Index. |
|
/// @return {list} Updated list. |
|
@function remove-nth($list, $index) { |
|
|
|
$result: null; |
|
|
|
@if type-of($index) != number { |
|
@warn "$index: #{quote($index)} is not a number for `remove-nth`."; |
|
} |
|
@else if $index == 0 { |
|
@warn "List index 0 must be a non-zero integer for `remove-nth`."; |
|
} |
|
@else if abs($index) > length($list) { |
|
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; |
|
} |
|
@else { |
|
|
|
$result: (); |
|
$index: if($index < 0, length($list) + $index + 1, $index); |
|
|
|
@for $i from 1 through length($list) { |
|
|
|
@if $i != $index { |
|
$result: append($result, nth($list, $i)); |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@return $result; |
|
|
|
} |
|
|
|
/// Replaces a substring within another string. |
|
/// @author Hugo Giraudel |
|
/// @param {string} $string String. |
|
/// @param {string} $search Substring. |
|
/// @param {string} $replace Replacement. |
|
/// @return {string} Updated string. |
|
@function str-replace($string, $search, $replace: '') { |
|
|
|
$index: str-index($string, $search); |
|
|
|
@if $index { |
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); |
|
} |
|
|
|
@return $string; |
|
|
|
} |
|
|
|
/// Replaces a substring within each string in a list. |
|
/// @param {list} $strings List of strings. |
|
/// @param {string} $search Substring. |
|
/// @param {string} $replace Replacement. |
|
/// @return {list} Updated list of strings. |
|
@function str-replace-all($strings, $search, $replace: '') { |
|
|
|
@each $string in $strings { |
|
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); |
|
} |
|
|
|
@return $strings; |
|
|
|
} |
|
|
|
// Mixins. |
|
|
|
/// Wraps @content in vendorized keyframe blocks. |
|
/// @param {string} $name Name. |
|
@mixin keyframes($name) { |
|
|
|
@-moz-keyframes #{$name} { @content; } |
|
@-webkit-keyframes #{$name} { @content; } |
|
@-ms-keyframes #{$name} { @content; } |
|
@keyframes #{$name} { @content; } |
|
|
|
} |
|
|
|
/// Vendorizes a declaration's property and/or value(s). |
|
/// @param {string} $property Property. |
|
/// @param {mixed} $value String/list of value(s). |
|
@mixin vendor($property, $value) { |
|
|
|
// Determine if property should expand. |
|
$expandProperty: index($vendor-properties, $property); |
|
|
|
// Determine if value should expand (and if so, add '-prefix-' placeholder). |
|
$expandValue: false; |
|
|
|
@each $x in $value { |
|
@each $y in $vendor-values { |
|
@if $y == str-slice($x, 1, str-length($y)) { |
|
|
|
$value: set-nth($value, index($value, $x), '-prefix-' + $x); |
|
$expandValue: true; |
|
|
|
} |
|
} |
|
} |
|
|
|
// Expand property? |
|
@if $expandProperty { |
|
@each $vendor in $vendor-prefixes { |
|
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
|
} |
|
} |
|
|
|
// Expand just the value? |
|
@elseif $expandValue { |
|
@each $vendor in $vendor-prefixes { |
|
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; |
|
} |
|
} |
|
|
|
// Neither? Treat them as a normal declaration. |
|
@else { |
|
#{$property}: #{$value}; |
|
} |
|
|
|
} |