fun-fixed-header
The fun-fixed-header class adds standardized style to the fixed header used together with fun-header-controller for
making dynamic page headers.
It is designed to be used together with other classes like this:
<div class="fun-region fun-fixed-header flex items-center justify-between">Lorem Ipsum</div>
Note that in this example we’ve overridden the positioning with relative so that the header does not move itself to the top of the page.
Defined as:
Which unpacks as:
.fun-fixed-header { position: fixed; top: 0px; left: 0px; z-index: 300; height: 4rem; width: 100%; border-bottom-width: 1px; --tw-bg-opacity: 1; background-color: rgb(247 247 247 / var(--tw-bg-opacity)); --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } :is(.dark .fun-fixed-header) { --tw-border-opacity: 1; border-color: rgb(64 64 64 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(37 37 37 / var(--tw-bg-opacity)); }
