SF Divider
A thin glowing line for separating content on dark backgrounds. Tinted by --sf-color.
Examples
Up
Wide container
Red
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--sf-color | <color> | #f90 | Tint for the text, line and glow. Set it on the element or any ancestor. |
Usage
<zakuni-sf-divider style="--sf-color: #7df9ff"></zakuni-sf-divider>The element is a block that fills its container and is at least 80px wide. Unlike the Simple divider, the colour comes from --sf-color, not from the text colour.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('zakuni-sf-divider')
export class ZakuniSFDivider extends LitElement {
static styles = css`
:host {
--_c: var(--sf-color, #f90);
display: block;
min-width: 80px;
}
hr {
border: none;
height: 1px;
margin: 0.5em 0;
background: var(--_c);
box-shadow: 0 0 6px var(--_c);
}
`;
render() {
return html`<hr>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-divider": ZakuniSFDivider;
}
}