TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Refactor icons

Browse source
This commit is contained in:
TheThomaas 2024-01-30 22:24:16 +01:00
parent 3623c8216b
commit 3dd73a0477
1 changed files with 28 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/scss/components/_icons.scss
View file

@ -5,51 +5,49 @@
[class*=" icon-"], [class*=" icon-"],
[class^="icon-"] { [class^="icon-"] {
vertical-align: top;
}
[class*=" icon-"]:before,
[class*=" icon-"]:after,
[class^="icon-"]:before,
[class^="icon-"]:after {
--icon-size: 1.5rem; --icon-size: 1.5rem;
vertical-align: top;
&:before, &:after {
--m-interior: .5rem;
--m-exterior: -.125rem;
background-color: currentColor; background-color: currentColor;
display: inline-block; display: inline-block;
flex: 0 0 auto; flex: 0 0 auto;
height: 1.5rem; block-size: 1.5rem;
height: var(--icon-size); inline-size: 1.5rem;
width: 1.5rem; block-size: var(--icon-size);
width: var(--icon-size); inline-size: var(--icon-size);
-webkit-mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
mask-size: 100% 100%; mask-size: 100% 100%;
vertical-align: calc(.375em - .75rem); vertical-align: calc(.375em - .75rem);
vertical-align: calc((.75em - var(--icon-size))*.5); vertical-align: calc((.75em - var(--icon-size))*.5);
} }
[class*=" icon-"]:before,
[class^="icon-"]:before { &:before,
&.icon--right:after {
content: ""; content: "";
} }
.icon--right[class*=" icon-"]:before, &.icon--right:before {
.icon--right[class^="icon-"]:before { content: none
content: none;
} }
}
.icon--left:before { .icon--left:before {
margin-left: -.125rem; margin-inline-start: var(--m-exterior);
margin-right: .5rem; margin-inline-end: var(--m-interior);
}
.icon--right:after {
content: "";
margin-left: .5rem;
margin-right: -.125rem;
} }
.icon--sm:before, .icon--right:after {
.icon--sm:after { margin-inline-start: var(--m-interior);
margin-inline-end: var(--m-exterior);
}
.icon--sm {
--icon-size: 1rem; --icon-size: 1rem;
} }
.icon--lg:before, .icon--lg {
.icon--lg:after {
--icon-size: 2rem; --icon-size: 2rem;
} }