28 lines
588 B
SCSS
28 lines
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;
|
||
|
|
}
|
||
|
|
}
|