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

Details open animation and custom arrow, make icons use current text color

Browse Source
This commit is contained in:
daudix
2024-09-15 18:14:39 +03:00
parent 958ba09571
commit 75d2e5476c
10 changed files with 84 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
sass/_typography.scss
View File

@ -233,13 +233,48 @@ details {
background-color: var(--fg-muted-1);
padding: 0.875rem 1rem;
summary:hover {
summary {
cursor: pointer;
list-style: none;
&::marker,
&::-webkit-details-marker {
display: none;
}
&::before {
display: inline-block;
vertical-align: -0.125em;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m2.293 6.707 5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414L8 9.586 3.707 5.293a1 1 0 1 0-1.414 1.414m0 0'/%3E%3C/svg%3E");
transition: var(--transition);
margin-inline-end: 0.25rem;
background-color: currentColor;
width: 1rem;
height: 1rem;
content: "";
}
}
:last-child {
margin-block-end: 0;
}
&[open] summary {
&::before {
transform: scaleY(-100%);
}
&~* {
animation: details-open var(--transition);
@keyframes details-open {
from {
transform: translateY(-1rem);
opacity: 0;
}
}
}
}
}
figure {