325 lines
7.0 KiB
SCSS
325 lines
7.0 KiB
SCSS
// 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?
|
|
@else if $expandValue {
|
|
@each $vendor in $vendor-prefixes {
|
|
#{$property}: #{str-replace-all($value, "-prefix-", $vendor)};
|
|
}
|
|
}
|
|
|
|
// Neither? Treat them as a normal declaration.
|
|
@else {
|
|
#{$property}: #{$value};
|
|
}
|
|
}
|