Add btn after mixin
This commit is contained in:
@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user