M: Add animation to details element

This commit is contained in:
Ivan 2025-06-18 10:16:26 +03:00
parent 56a7985bcb
commit fb705249bb

View File

@ -23,12 +23,12 @@
} }
html { html {
interpolate-size: allow-keywords;
text-size-adjust: none; text-size-adjust: none;
hanging-punctuation: first last; hanging-punctuation: first last;
color-scheme: dark light; color-scheme: dark light;
interpolate-size: allow-keywords;
} }
body { body {
@ -54,8 +54,6 @@
} }
:root { :root {
interpolate-size: allow-keywords;
font-size: var(--font-size-base); font-size: var(--font-size-base);
line-height: var(--line-height); line-height: var(--line-height);
font-family: var(--font-main); font-family: var(--font-main);
@ -142,6 +140,23 @@
content: '\2009'; content: '\2009';
} }
details {
overflow: hidden;
}
details::details-content {
block-size: 0;
transition-property: block-size, content-visibility;
transition-duration: var(--duration-dropdown);
transition-timing-function: var(--ease-in-out);
transition-behavior: allow-discrete;
}
details[open]::details-content {
block-size: auto;
}
summary { summary {
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;