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

Move the rest of the icons to CSS mask

Browse Source 
This way user can change the icon without overriding the template
itself, plus it's cleaner this way
This commit is contained in:
daudix
2024-06-13 17:15:35 +03:00
parent c0c06fe929
commit 9eee1bc77d
12 changed files with 79 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
sass/_comments.scss
View File

@ -143,10 +143,12 @@ section#comments {
font-variant-numeric: tabular-nums;
text-decoration: none;
svg {
.icon {
vertical-align: -0.125em;
transition: transform var(--transition-longer);
margin-inline-end: 0.25rem;
width: 1rem;
height: 1rem;
}
&:hover {
@ -165,10 +167,17 @@ section#comments {
&:hover {
background-color: var(--boosts-bg);
svg {
.icon {
transform: rotate(180deg);
}
}
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1v2H4C1.8 3 0 4.8 0 7v2a4 4 0 0 0 1.02 2.672 1 1 0 1 0 1.488-1.336A1.97 1.97 0 0 1 2 9V7c0-1.125.875-2 2-2h4v2h1v-.008a1 1 0 0 0 .707-.285l2-2a1 1 0 0 0 0-1.414l-2-2A1 1 0 0 0 9 1.008V1zm6.29 3a1 1 0 0 0-.72.258.993.993 0 0 0-.078 1.41c.317.355.508.816.508 1.34v2c0 1.125-.875 2-2 2H8V9H7v.008a1 1 0 0 0-.707.285l-2 2a1 1 0 0 0 0 1.414l2 2c.187.184.441.29.707.285V15h1v-1.992h4c2.2 0 4-1.805 4-4v-2a4 4 0 0 0-1.02-2.676A1 1 0 0 0 14.29 4m0 0'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
background-color: var(--boosts-fg);
}
}
.faves {
@ -177,10 +186,17 @@ section#comments {
&:hover {
background-color: var(--faves-bg);
svg {
.icon {
transform: rotate(72deg);
}
}
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E");
-webkit-mask-image: $icon;
mask-image: $icon;
background-color: var(--faves-fg);
}
}
}
}