Add btn after mixin
This commit is contained in:
@ -42,3 +42,32 @@
|
|||||||
@content;
|
@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