diff --git a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss index 522481e..b541d01 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss @@ -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; +}