Add btn after mixin

This commit is contained in:
2025-12-24 11:53:36 +01:00
parent c7cb507121
commit 252b20bdc6

View File

@ -42,3 +42,32 @@
@content;
}
}
// Mixin to add an after pseudo-element with a mask image to customize button colors
/* Example:
.btn{
&::after {
@include btn-after("../img/arrow-right.svg");
}
}
*/
@mixin btn-after($url, $color: currentColor) {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.5em;
vertical-align: middle;
background-color: currentColor;
mask-image: url(#{$url});
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url(#{$url});
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}