init'
This commit is contained in:
343
assets/sass/libs/_vendor.scss
Normal file
343
assets/sass/libs/_vendor.scss
Normal file
@@ -0,0 +1,343 @@
|
||||
// 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};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user