53 lines
994 B
SCSS
53 lines
994 B
SCSS
@use "./icons/download";
|
|
@use "./icons/github";
|
|
@use "./icons/internet";
|
|
@use "./icons/mail";
|
|
|
|
[class*=" icon-"],
|
|
[class^="icon-"] {
|
|
--icon-size: 1.5rem;
|
|
vertical-align: top;
|
|
|
|
&:before, &:after {
|
|
--m-interior: .5rem;
|
|
--m-exterior: -.125rem;
|
|
background-color: var(--icon-color, currentColor);
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
block-size: 1.5rem;
|
|
inline-size: 1.5rem;
|
|
block-size: var(--icon-size);
|
|
inline-size: var(--icon-size);
|
|
-webkit-mask-size: 100% 100%;
|
|
mask-size: 100% 100%;
|
|
vertical-align: calc(.375em - .75rem);
|
|
vertical-align: calc((.75em - var(--icon-size))*.5);
|
|
}
|
|
|
|
&:before,
|
|
&.icon--right:after {
|
|
content: "";
|
|
}
|
|
|
|
&.icon--right:before {
|
|
content: none
|
|
}
|
|
}
|
|
|
|
.icon--left:before {
|
|
margin-inline-start: var(--m-exterior);
|
|
margin-inline-end: var(--m-interior);
|
|
}
|
|
|
|
.icon--right:after {
|
|
margin-inline-start: var(--m-interior);
|
|
margin-inline-end: var(--m-exterior);
|
|
}
|
|
|
|
.icon--sm {
|
|
--icon-size: 1rem;
|
|
}
|
|
|
|
.icon--lg {
|
|
--icon-size: 2rem;
|
|
} |