133 lines
3.0 KiB
Plaintext
133 lines
3.0 KiB
Plaintext
component PublicPageShell {
|
|
props {
|
|
maxWidth: string = "full"
|
|
fullWidth: boolean = true
|
|
headerOffset: string = "none"
|
|
background: string = "default"
|
|
overflow: string = "clip"
|
|
minHeight: string = "screen"
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "default"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="PublicPageShell"
|
|
class='wrn-page-shell {class}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-variant='{variant}'
|
|
data-background='{background}'
|
|
data-overflow='{overflow}'
|
|
data-min-height='{minHeight}'
|
|
data-header-offset='{headerOffset}'
|
|
>
|
|
<slot name="before"></slot>
|
|
|
|
<main
|
|
class="wrn-page-shell__main"
|
|
data-full-width='{fullWidth}'
|
|
data-max-width='{maxWidth}'
|
|
>
|
|
<slot></slot>
|
|
</main>
|
|
|
|
<slot name="after"></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-page-shell {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 100%;
|
|
min-width: 0;
|
|
color: var(--wrn-color-text);
|
|
background: var(--wrn-color-background);
|
|
}
|
|
|
|
.wrn-page-shell[data-background="soft"] {
|
|
background: var(--wrn-color-surface-soft);
|
|
}
|
|
|
|
.wrn-page-shell[data-background="raised"] {
|
|
background: var(--wrn-color-surface-raised);
|
|
}
|
|
|
|
.wrn-page-shell[data-min-height="screen"] {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/*
|
|
* dvh tracks the browser chrome on a phone, so a full-height shell does
|
|
* not leave a gap when the address bar collapses.
|
|
*/
|
|
.wrn-page-shell[data-min-height="dvh"] {
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
.wrn-page-shell[data-overflow="clip"] {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.wrn-page-shell[data-overflow="hidden"] {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/*
|
|
* One main element rather than a branch per width. fullWidth is an
|
|
* attribute, so the width cap and the gutters are a couple of rules
|
|
* instead of two copies of the same markup.
|
|
*/
|
|
.wrn-page-shell__main {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-page-shell__main[data-full-width="false"] {
|
|
margin-inline: auto;
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.wrn-page-shell__main[data-full-width="false"][data-max-width="lg"] {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.wrn-page-shell__main[data-full-width="false"][data-max-width="xl"] {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.wrn-page-shell__main[data-full-width="false"][data-max-width="2xl"] {
|
|
max-width: 96rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.wrn-page-shell__main[data-full-width="false"] {
|
|
padding-inline: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.wrn-page-shell__main[data-full-width="false"] {
|
|
padding-inline: 2rem;
|
|
}
|
|
}
|
|
|
|
/* Room for a fixed header to sit over the top of the shell. */
|
|
.wrn-page-shell[data-header-offset="sm"] {
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.wrn-page-shell[data-header-offset="md"] {
|
|
padding-top: 5rem;
|
|
}
|
|
|
|
.wrn-page-shell[data-header-offset="lg"] {
|
|
padding-top: 6rem;
|
|
}
|
|
}
|
|
}
|