trwnh.com/unified.test.hugo/assets/styles/mixins/prepend-icon.scss
2024-11-16 16:42:05 -06:00

28 lines
No EOL
588 B
SCSS

@mixin prepend-icon($icon, $how_far_right, $how_far_down) {
display: grid;
place-items: start start;
grid-template-columns: auto 1fr;
> * {
place-self: center start;
line-height: 1.5em;
}
&:before, &:after {
content: '';
display: inline-block;
block-size: 1em;
inline-size: 1em;
padding: 0.25em;
border-radius: 100em;
margin-inline-end: 0.5em;
}
&:before {
background: var(--ui-overlay);
}
&:after {
position: absolute;
background: var(--ui-overlay-text);
mask-image: $icon;
mask-repeat: no-repeat;
mask-position: $how_far_right $how_far_down;
}
}