@kanton-basel-stadt/designsystem
Version:
Unplugin to install the digital design system of the canton of Basel-Stadt
51 lines (43 loc) • 1.05 kB
CSS
@layer components {
:root {
--page-header-top-height: 46px;
--page-header-bottom-height: 58px;
--page-header-height: calc(
var(--page-header-top-height) + var(--page-header-bottom-height)
);
@screen lg {
--page-header-bottom-height: 0px;
--page-header-top-height: 70px;
}
}
html.is-site-bettingen {
--page-header-bottom-height: 0px;
}
.page-header {
height: var(--page-header-height);
grid-template: 'L . M' 'N N N';
grid-template-rows: 46px 1fr;
@screen lg {
grid-template: 'L N M';
grid-template-rows: auto;
}
@apply lg:grid-cols-3;
}
.page-header-mobile-enter-active,
.page-header-mobile-leave-active {
@apply transition duration-300 ease-swing overflow-hidden;
@apply motion-reduce:!transition-none;
> div,
> a {
@apply transition duration-300 ease-swing;
}
}
.page-header-mobile-enter-from,
.page-header-mobile-leave-to {
@apply opacity-0;
> div,
> a {
@apply translate-x-50;
}
}
}