SF Textfield
A text input reduced to a glowing underline. Takes a placeholder property and is tinted by --sf-color.
Examples
Properties
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | '' | Placeholder text shown while the field is empty. |
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--sf-color | <color> | #f90 | Tint for the outline, text and glow. Set it on the element or any ancestor. |
Usage
<zakuni-sf-textfield placeholder="Call sign" style="--sf-color: #7df9ff"></zakuni-sf-textfield>The value lives on the inner input element. The glow strengthens while the field has focus.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('zakuni-sf-textfield')
export class ZakuniSFTextfield extends LitElement {
@property({ type: String })
placeholder = '';
static styles = css`
:host {
--_c: var(--sf-color, #f90);
display: inline-block;
}
input {
background: none;
border: 0;
border-bottom: 1px solid var(--_c);
color: var(--_c);
caret-color: var(--_c);
font-size: 1rem;
font-weight: 300;
padding: 0.5em 0.25em;
outline: none;
filter: drop-shadow(0 0 4px var(--_c));
transition: filter 0.2s;
}
input::placeholder {
color: color-mix(in srgb, var(--_c) 50%, transparent);
}
input:focus {
box-shadow: 0 1px 0 var(--_c);
filter: drop-shadow(0 0 10px var(--_c));
}
`;
render() {
return html`
<input placeholder=${this.placeholder}>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-textfield": ZakuniSFTextfield;
}
}