133 lines
3.2 KiB
Plaintext
133 lines
3.2 KiB
Plaintext
import Container from "./Container.wrn"
|
|
|
|
component Section {
|
|
props {
|
|
id: string = ""
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
variant: string = "default"
|
|
spacing: string = "lg"
|
|
maxWidth: string = "xl"
|
|
fullWidth: boolean = false
|
|
borderTop: boolean = false
|
|
borderBottom: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
{...attrs}
|
|
data-ui-component="Section"
|
|
class='wrn-section {class}'
|
|
id='{id}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-variant='{variant}'
|
|
data-spacing='{spacing}'
|
|
data-border-top='{borderTop}'
|
|
data-border-bottom='{borderBottom}'
|
|
>
|
|
{#if fullWidth}
|
|
<slot></slot>
|
|
{:else}
|
|
<Container
|
|
columns="1"
|
|
gap="md"
|
|
maxWidth='{maxWidth}'
|
|
size='{size}'
|
|
color='{color}'
|
|
>
|
|
<slot></slot>
|
|
</Container>
|
|
{/if}
|
|
</section>
|
|
}
|
|
|
|
style {
|
|
.wrn-section {
|
|
--section-tint: transparent;
|
|
--section-ink: inherit;
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-block: 3rem;
|
|
background: var(--section-tint);
|
|
color: var(--section-ink);
|
|
}
|
|
|
|
.wrn-section[data-spacing="sm"] {
|
|
padding-block: 2rem;
|
|
}
|
|
|
|
.wrn-section[data-spacing="md"] {
|
|
padding-block: 3rem;
|
|
}
|
|
|
|
.wrn-section[data-spacing="xl"] {
|
|
padding-block: 5rem;
|
|
}
|
|
|
|
.wrn-section[data-variant="soft"] {
|
|
--section-tint: var(--wrn-color-surface-soft);
|
|
}
|
|
|
|
.wrn-section[data-variant="raised"] {
|
|
--section-tint: var(--wrn-color-surface-raised);
|
|
}
|
|
|
|
/*
|
|
* tinted and solid pick their fill from the component colour, which is
|
|
* why these are two attributes rather than one class per pairing. The
|
|
* previous version spent a line on every variant and colour combination.
|
|
*/
|
|
.wrn-section[data-variant="tinted"][data-color="primary"] {
|
|
--section-tint: var(--wrn-color-primary-soft);
|
|
}
|
|
|
|
.wrn-section[data-variant="tinted"][data-color="success"] {
|
|
--section-tint: var(--wrn-color-success-soft);
|
|
}
|
|
|
|
.wrn-section[data-variant="tinted"][data-color="warning"] {
|
|
--section-tint: var(--wrn-color-warning-soft);
|
|
}
|
|
|
|
.wrn-section[data-variant="tinted"][data-color="danger"] {
|
|
--section-tint: var(--wrn-color-danger-soft);
|
|
}
|
|
|
|
.wrn-section[data-variant="tinted"][data-color="info"] {
|
|
--section-tint: var(--wrn-color-info-soft);
|
|
}
|
|
|
|
.wrn-section[data-variant="solid"][data-color="primary"] {
|
|
--section-tint: var(--wrn-color-primary);
|
|
--section-ink: var(--wrn-color-on-primary);
|
|
}
|
|
|
|
.wrn-section[data-variant="solid"][data-color="danger"] {
|
|
--section-tint: var(--wrn-color-danger);
|
|
--section-ink: var(--wrn-color-on-danger);
|
|
}
|
|
|
|
.wrn-section[data-border-top="true"] {
|
|
border-top: 1px solid var(--wrn-color-border);
|
|
}
|
|
|
|
.wrn-section[data-border-bottom="true"] {
|
|
border-bottom: 1px solid var(--wrn-color-border);
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.wrn-section[data-spacing="lg"] {
|
|
padding-block: 5rem;
|
|
}
|
|
|
|
.wrn-section[data-spacing="xl"] {
|
|
padding-block: 6rem;
|
|
}
|
|
}
|
|
}
|
|
}
|