142 lines
3.7 KiB
Plaintext
142 lines
3.7 KiB
Plaintext
// Divider -- a rule between sections, optionally labelled.
|
|
//
|
|
// <Divider />
|
|
// <Divider label="or" />
|
|
// <Divider orientation="vertical" />
|
|
//
|
|
// The label sits between two rules rather than on top of one, so the text
|
|
// never overlaps the line at any width.
|
|
//
|
|
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
|
// and silently swallows the rule that follows it.
|
|
component Divider {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
label: string = ""
|
|
orientation: string = "horizontal"
|
|
variant: string = "solid"
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
shared function isVertical() {
|
|
return orientation === "vertical"
|
|
}
|
|
|
|
// The rule only takes the component colour when there is a label. A plain
|
|
// divider is chrome and should stay the border token.
|
|
shared function tone() {
|
|
return label ? color : "border"
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Divider"
|
|
class='wrn-divider {class}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-tone='{tone()}'
|
|
data-variant='{variant}'
|
|
data-orientation='{orientation}'
|
|
data-labelled='{label ? "true" : "false"}'
|
|
role="separator"
|
|
aria-orientation='{isVertical() ? "vertical" : "horizontal"}'
|
|
>
|
|
<span class="wrn-divider__rule" aria-hidden="true"></span>
|
|
<span class="wrn-divider__label" data-show="label">{label}</span>
|
|
<span class="wrn-divider__rule" data-show="label" aria-hidden="true"></span>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-divider {
|
|
--divider-tone: var(--wrn-color-border);
|
|
--divider-thickness: 1px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wrn-divider[data-tone="primary"] {
|
|
--divider-tone: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-divider[data-tone="secondary"] {
|
|
--divider-tone: var(--wrn-color-secondary);
|
|
}
|
|
|
|
.wrn-divider[data-tone="success"] {
|
|
--divider-tone: var(--wrn-color-success);
|
|
}
|
|
|
|
.wrn-divider[data-tone="warning"] {
|
|
--divider-tone: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-divider[data-tone="danger"] {
|
|
--divider-tone: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-divider[data-size="lg"] {
|
|
--divider-thickness: 2px;
|
|
}
|
|
|
|
.wrn-divider__rule {
|
|
flex: 1 1 auto;
|
|
height: var(--divider-thickness);
|
|
background: var(--divider-tone);
|
|
}
|
|
|
|
.wrn-divider[data-variant="dashed"] .wrn-divider__rule {
|
|
height: 0;
|
|
background: transparent;
|
|
border-top: var(--divider-thickness) dashed var(--divider-tone);
|
|
}
|
|
|
|
.wrn-divider[data-variant="dotted"] .wrn-divider__rule {
|
|
height: 0;
|
|
background: transparent;
|
|
border-top: var(--divider-thickness) dotted var(--divider-tone);
|
|
}
|
|
|
|
.wrn-divider__label {
|
|
flex: 0 0 auto;
|
|
color: var(--wrn-color-text-muted);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.wrn-divider[data-orientation="vertical"] {
|
|
flex-direction: column;
|
|
width: auto;
|
|
height: 100%;
|
|
min-height: 1.5rem;
|
|
margin-inline: 0.75rem;
|
|
}
|
|
|
|
.wrn-divider[data-orientation="vertical"] .wrn-divider__rule {
|
|
width: var(--divider-thickness);
|
|
height: auto;
|
|
}
|
|
|
|
.wrn-divider[data-orientation="vertical"][data-variant="dashed"] .wrn-divider__rule {
|
|
width: 0;
|
|
border-top: 0;
|
|
border-left: var(--divider-thickness) dashed var(--divider-tone);
|
|
}
|
|
|
|
.wrn-divider[data-orientation="vertical"][data-variant="dotted"] .wrn-divider__rule {
|
|
width: 0;
|
|
border-top: 0;
|
|
border-left: var(--divider-thickness) dotted var(--divider-tone);
|
|
}
|
|
}
|
|
}
|