hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't duplicate icons in the resulting CSS

Browse Source 
Intead, use CSS variables.
This commit is contained in:
daudix
2024-08-26 21:43:56 +03:00
parent 2f00256c0f
commit 3121386fd3
12 changed files with 128 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
sass/_external.scss
View File

@ -1,10 +1,10 @@
.external::after {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' %3E%3Cpath d='m6 6 5-5M7 1h4v4M4 2H3a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V8' style='fill:none;stroke:black;stroke-linejoin:round;stroke-linecap:round;stroke-width:2;stroke-dasharray:none'/%3E%3C/svg%3E");
-webkit-mask-image: var(--icon);
-webkit-mask-size: cover;
display: inline-block;
opacity: 0.6;
mask-image: $icon;
mask-image: var(--icon);
mask-size: cover;
margin-inline-start: 0.25rem;
background-color: var(--primary-color);