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.
vizality/renderer/src/styles/utils/mixins/_mask.scss

32 lines
1023 B

/**
* Makes using masks simpler and automates the browser prefixing.
* @param {url} $image Image to mask
* @param {color} [$background-color] Mask color
* @param {string} [$size] Mask image size in pixels or percent
* @param {string} [$extras=no-repeat center] Mask image options
* @param {boolean} [$important=false] Whether the masking rule should be marked with !important
*/
@mixin mask($image, $background-color: null, $size: null, $extras: no-repeat center, $important: false) {
@if ($important) {
-webkit-mask: $image $extras !important;
mask: $image $extras !important;
@if ($background-color) {
background-color: $background-color !important;
}
@if ($size) {
-webkit-mask-size: $size !important;
mask-size: $size !important;
}
} @else {
-webkit-mask: $image $extras;
mask: $image $extras;
@if ($background-color) {
background-color: $background-color;
}
@if ($size) {
-webkit-mask-size: $size;
mask-size: $size;
}
}
}