163 lines
3.9 KiB
Plaintext
163 lines
3.9 KiB
Plaintext
// Container -- a centred, width-limited page wrapper.
|
|
//
|
|
// <Container maxWidth="lg">...</Container>
|
|
//
|
|
// It also accepts columns and gap, because it always has and applications
|
|
// depend on it. Reach for Grid when a grid is the point; reach for Container
|
|
// when the point is the reading width.
|
|
//
|
|
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
|
// and silently swallows the rule that follows it.
|
|
component Container {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
// Stays 2 to match what shipped. A published default cannot be changed
|
|
// without silently reflowing every Container already in use.
|
|
columns: number = 2
|
|
gap: string = "md"
|
|
maxWidth: string = "xl"
|
|
centered: boolean = true
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
shared function columnCount() {
|
|
var value = Number(columns)
|
|
if (!value || value < 1) {
|
|
return 1
|
|
}
|
|
return Math.min(6, value)
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Container"
|
|
class='wrn-container {class}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-gap='{gap}'
|
|
data-max-width='{maxWidth}'
|
|
data-centered='{centered}'
|
|
data-columns='{columnCount()}'
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-container {
|
|
--container-gap: 1.25rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.wrn-container[data-centered="true"] {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
/* Reading widths, not breakpoints: the cap is about line length. */
|
|
.wrn-container[data-max-width="md"] {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.wrn-container[data-max-width="lg"] {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.wrn-container[data-max-width="xl"],
|
|
.wrn-container[data-max-width="wide"] {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.wrn-container[data-max-width="2xl"] {
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.wrn-container[data-max-width="full"] {
|
|
max-width: none;
|
|
}
|
|
|
|
.wrn-container[data-size="compact"] {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.wrn-container[data-size="comfortable"] {
|
|
padding-inline: 1.25rem;
|
|
}
|
|
|
|
.wrn-container[data-size="spacious"] {
|
|
padding-inline: 1.5rem;
|
|
}
|
|
|
|
.wrn-container[data-gap="xs"] {
|
|
--container-gap: 0.5rem;
|
|
}
|
|
|
|
.wrn-container[data-gap="sm"] {
|
|
--container-gap: 0.75rem;
|
|
}
|
|
|
|
.wrn-container[data-gap="lg"] {
|
|
--container-gap: 2rem;
|
|
}
|
|
|
|
.wrn-container[data-gap="xl"] {
|
|
--container-gap: 2.5rem;
|
|
}
|
|
|
|
/*
|
|
* Columns are opt-in. One column stays plain flow so a container does not
|
|
* quietly turn every page into a grid.
|
|
*/
|
|
.wrn-container:not([data-columns="1"]) {
|
|
display: grid;
|
|
gap: var(--container-gap);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.wrn-container[data-columns="2"],
|
|
.wrn-container[data-columns="3"],
|
|
.wrn-container[data-columns="4"],
|
|
.wrn-container[data-columns="5"],
|
|
.wrn-container[data-columns="6"] {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.wrn-container[data-size="default"],
|
|
.wrn-container[data-size="comfortable"],
|
|
.wrn-container[data-size="spacious"] {
|
|
padding-inline: 1.5rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.wrn-container[data-columns="3"] {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.wrn-container[data-columns="4"] {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.wrn-container[data-columns="5"] {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.wrn-container[data-columns="6"] {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.wrn-container[data-size="default"],
|
|
.wrn-container[data-size="comfortable"],
|
|
.wrn-container[data-size="spacious"] {
|
|
padding-inline: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|