@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
46 lines (37 loc) • 802 B
CSS
/* Utility class for allowing a details element with class .over assigned to contain a child div that displays 'over' page content */
/* EXAMPLE:
<details class="over">
<summary>Details</summary>
<div>
i will display over page content
</div>
</details>
*/
details[open]:has(details.over)>div {
overflow-y: auto;
}
details.over {
position: relative;
&[open] {
padding-bottom: 0;
overflow: visible;
}
&[open]>summary {
margin-bottom: 0;
}
>summary {
position: relative;
}
>:not(summary) {
position: absolute;
left: 0;
bottom: 0;
overflow-y: auto;
width: 100%;
z-index: calc(infinity);
transform: translateY(100%);
background: var(--bg, #ffffff);
padding: 1ch;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
}