Andy Smith
113 lines
2.5 KiB
CSS
113 lines
2.5 KiB
CSS
/* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
|
|
|
|
.expander {
|
|
--expander-height: calc(1em + 1lh);
|
|
--expander-width: 11ch;
|
|
--expander-radius: calc(var(--expander-height) / 2);
|
|
--expander-duration: 150ms;
|
|
|
|
interpolate-size: allow-keywords;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.expander__button {
|
|
--btn-border-radius: var(--expander-radius);
|
|
|
|
align-items: center;
|
|
block-size: var(--expander-height);
|
|
cursor: pointer;
|
|
display: flex;
|
|
inline-size: var(--expander-width);
|
|
justify-content: flex-start;
|
|
padding-inline: 1.5ch;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
[open] & {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 1ch;
|
|
}
|
|
}
|
|
|
|
.expander__content {
|
|
--btn-border-radius: var(--expander-radius);
|
|
|
|
align-items: stretch;
|
|
border-radius: var(--expander-radius);
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding-block-start: var(--expander-height);
|
|
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/* For browsers that support animation */
|
|
@supports selector(details::details-content) {
|
|
.expander::details-content {
|
|
--btn-border-radius: var(--expander-radius);
|
|
|
|
block-size: var(--expander-height);
|
|
border-radius: var(--expander-radius);
|
|
inset: 0 auto auto 0;
|
|
inline-size: var(--expander-width);
|
|
overflow: clip;
|
|
position: absolute;
|
|
transition: content-visibility var(--expander-duration) allow-discrete, block-size var(--expander-duration), inline-size var(--expander-duration);
|
|
}
|
|
|
|
.expander[open]::details-content {
|
|
block-size: auto;
|
|
inline-size: auto;
|
|
}
|
|
|
|
.expander__content {
|
|
min-inline-size: var(--expander-width);
|
|
}
|
|
}
|
|
|
|
/* Fallback for browsers that don't support animation */
|
|
@supports not selector(details::details-content) {
|
|
.expander__content {
|
|
border-radius: var(--expander-radius);
|
|
inset: 0 auto auto 0;
|
|
min-inline-size: var(--expander-width);
|
|
position: absolute;
|
|
|
|
[open] & {
|
|
block-size: auto;
|
|
inline-size: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.expander__item {
|
|
--btn-background: transparent;
|
|
--btn-border-radius: 0.3em;
|
|
--btn-border-size: 0;
|
|
--btn-font-weight: 500;
|
|
--btn-padding: var(--inline-space-half) var(--inline-space);
|
|
--hover-size: 0;
|
|
--outline-color: transparent;
|
|
|
|
inline-size: calc(100% + var(--inline-space-double));
|
|
margin-inline-start: calc(-1 * var(--inline-space));
|
|
justify-content: flex-start;
|
|
white-space: nowrap;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
background-color: oklch(var(--lch-ink-inverted) / 15%);
|
|
}
|
|
}
|