123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376 |
- // 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};
- }
-
- }
|