diff --git a/README.md b/README.md index 0f1cd56..ad31ee9 100644 --- a/README.md +++ b/README.md @@ -40,17 +40,19 @@ resources: | ---- | ------ | ------------ | -------------------------- | | type | string | **Required** | `custom:text-divider-row` | | text | string | **Required** | Text to display in divider | +| align | string | Optional | Specifies the text alignment. Must be: 'left', 'center' or 'right' | ## Theme Variables The following variables are available and can be set in your theme to change the appearance of the lock. Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS. -| name | Default | Description | -| ------------------------ | ---------------------- | ------------- | -| `text-divider-color` | `secondary-text-color` | Divider color | -| `text-divider-font-size` | `14px` | Font size | -| `text-divider-line-size` | `1px` | Line size | +| name | Default | Description | +| ------------------------ | ---------------------- | -------------- | +| `text-divider-color` | `secondary-text-color` | Divider color | +| `text-divider-font-size` | `14px` | Font size | +| `text-divider-line-size` | `1px` | Line size | +| `text-divider-margin` | `1em 0` | Divider margin | ## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) diff --git a/src/const.ts b/src/const.ts index 211ecfe..7aea969 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1 +1 @@ -export const CARD_VERSION = '1.4.0'; +export const CARD_VERSION = '1.4.1'; diff --git a/src/text-divider-row.ts b/src/text-divider-row.ts index 9f30b1e..1ccab52 100755 --- a/src/text-divider-row.ts +++ b/src/text-divider-row.ts @@ -21,13 +21,27 @@ class TextDividerRow extends LitElement { this._config = config; } + protected getClass(): string { + const allowedValues = ['center', 'left', 'right']; + if (this._config && this._config.align) { + if (allowedValues.includes(this._config.align)) { + return `text-divider text-divider-${this._config.align}`; + } + } + return 'text-divider text-divider-center'; + } + protected render(): TemplateResult | void { if (!this._config) { return html``; } return html` -

${this._config.text}

+
+

+ ${this._config.text} +

+
`; } @@ -36,30 +50,51 @@ class TextDividerRow extends LitElement { :host { display: block; position: relative; + --background: var(--ha-card-background, var(--card-background-color)); --divider-color: var(--text-divider-color, var(--secondary-text-color)); --font-size: var(--text-divider-font-size, 14px); --line-size: var(--text-divider-line-size, 1px); } + .text-divider { - margin: 1em 0; + width: 100%; + border-bottom: var(--line-size) solid var(--divider-color); line-height: 0; + margin: 10px 0 20px; + } + + .text-divider-container { + margin: var(--text-divider-margin, 1em 0); + } + + .text-divider-center { text-align: center; - white-space: nowrap; - display: flex; - align-items: center; } + + .text-divider-left { + text-align: left; + } + + .text-divider-right { + text-align: right; + } + .text-divider span { - padding: 1em; color: var(--divider-color); font-size: var(--font-size); + background: var(--background); + padding: 1px 1em; } - .text-divider:before, - .text-divider:after { - content: ''; - background: var(--divider-color); - display: block; - height: var(--line-size); - width: 100%; + .text-divider-center span { + margin: 0px; + } + + .text-divider-left span { + margin: 0 0 0 1em; + } + + .text-divider-right span { + margin: 0 1em 0 0; } `; } diff --git a/src/types.ts b/src/types.ts index c58c0e5..e5f7d53 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,5 @@ export interface TextDividerRowConfig { type: string; text: string; + align: string; }