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

Reply icon on replies, make mask code more DRY

Browse Source
This commit is contained in:
David Lapshin
2024-05-21 19:40:37 +03:00
parent 5d5e08cb35
commit 067ee7428f
4 changed files with 43 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
sass/_comments.scss
View File

@ -35,9 +35,40 @@ section#comments {
justify-items: start;
&.comment-reply {
position: relative;
border-left: 0.25rem solid var(--fg-muted-2);
border-radius: 0.25rem;
padding-left: 1rem;
&::before,
&::after {
transition: transform var(--transition);
}
&::before {
position: absolute;
top: 0.75rem;
left: -0.25rem;
background: var(--bg-color), var(--primary-color);
width: 0.25rem;
height: 0.375rem;
content: "";
}
&::after {
$reply-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 2a1 1 0 0 0-.707.293l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 1 0 1.414-1.414L3.414 8H12c1.117 0 2 .883 2 2v3c0 .55.45 1 1 1s1-.45 1-1v-3q.001-.035-.004-.07A4.01 4.01 0 0 0 12 6H3.414l2.293-2.293A1 1 0 0 0 5 2m0 0'/%3E%3C/svg%3E");
-webkit-mask-size: cover;
-webkit-mask-image: $reply-icon;
position: absolute;
top: 0.5rem;
left: -0.75rem;
mask-image: $reply-icon;
mask-size: cover;
background-color: var(--fg-muted-4);
width: 1rem;
height: 1rem;
content: "";
}
}
.avatar-link {