collapsible-react-component
Version:
Collapses and expands content with an animation.
48 lines (39 loc) • 1.26 kB
CSS
.Collapsible-module_wrapper__URAGe {
--Collapsible-transition-duration: 0.3s;
--Collapsible-transition-timing-function: ease;
display: grid;
transition-property: grid-template-rows, visibility;
transition-timing-function: var(--Collapsible-transition-timing-function);
transition-duration: var(--Collapsible-transition-duration);
}
@media (prefers-reduced-motion: reduce) {
.Collapsible-module_wrapper__URAGe {
/* 1ms is expected to be 1 frame / instant */
--Collapsible-transition-duration: 1ms;
--Collapsible-transition-timing-function: step-end;
}
}
.Collapsible-module_is_state_closed__bttZl {
grid-template-rows: 0fr;
visibility: hidden;
}
.Collapsible-module_is_state_open__qtklu {
grid-template-rows: 1fr;
}
.Collapsible-module_is_revealType_bottomFirst__SY2kp .Collapsible-module_in__d4G0r {
align-items: flex-end;
}
.Collapsible-module_is_revealType_topFirst__UTi0- .Collapsible-module_in__d4G0r {
align-items: flex-start;
}
.Collapsible-module_is_transitioning__hZ6h3 .Collapsible-module_in__d4G0r,
.Collapsible-module_is_state_closed__bttZl .Collapsible-module_in__d4G0r {
overflow: hidden;
}
.Collapsible-module_in__d4G0r {
display: flex;
align-items: flex-end;
}
.Collapsible-module_content__lts9O {
width: 100%;
}