From f381ab343109e5a1c51df8842a77a83417c93f60 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Mon, 16 Jan 2023 22:22:58 +0330 Subject: [PATCH 01/11] feat(ui-kit/icon-box): new component --- ui/ui-kit/src/icon-box/icon-box.ts | 127 +++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 ui/ui-kit/src/icon-box/icon-box.ts diff --git a/ui/ui-kit/src/icon-box/icon-box.ts b/ui/ui-kit/src/icon-box/icon-box.ts new file mode 100644 index 000000000..794515568 --- /dev/null +++ b/ui/ui-kit/src/icon-box/icon-box.ts @@ -0,0 +1,127 @@ +import {AlwatrSurfaceElement, ifDefined, css, customElement, html, property} from '@alwatr/element'; + +import '@alwatr/icon'; + +declare global { + interface HTMLElementTagNameMap { + 'alwatr-icon-box': AlwatrStandardIconButton; + } +} + +/** + * Alwatr standard icon button element. + * + * @prop {String} icon + * @prop {String} href + * @prop {String} headline + * @prop {String} description + * @prop {String} urlPrefix + * @prop {Boolean} flipRtl + * + * @attr {String} icon + * @attr {String} href + * @attr {String} headline + * @attr {String} description + * @attr {String} url-prefix + * @attr {Boolean} flip-rtl + */ +@customElement('alwatr-icon-box') +export class AlwatrStandardIconButton extends AlwatrSurfaceElement { + static override styles = [ + AlwatrSurfaceElement.styles, + css` + :host { + display: flex; + transition-property: background-color, color; + } + + a { + display: flex; + flex-direction: column; + padding: calc(3 * var(--sys-spacing-track)); + gap: calc(1.5 * var(--sys-spacing-track)); + color: inherit; + text-decoration: none; + } + + .headline { + font-family: var(--sys-typescale-title-large-font-family-name); + font-weight: var(--sys-typescale-title-large-font-weight); + font-size: var(--sys-typescale-title-large-font-size); + letter-spacing: var(--sys-typescale-title-large-letter-spacing); + line-height: var(--sys-typescale-title-large-line-height); + } + + .description { + font-family: var(--sys-typescale-label-large-font-family-name); + font-weight: var(--sys-typescale-label-large-font-weight); + font-size: var(--sys-typescale-label-large-font-size); + letter-spacing: var(--sys-typescale-label-large-letter-spacing); + line-height: var(--sys-typescale-label-large-line-height); + } + + alwatr-icon { + color: var(--sys-color-primary); + width: calc(5 * var(--sys-spacing-track)); + height: calc(5 * var(--sys-spacing-track)); + margin-bottom: var(--sys-spacing-track); + transition-property: color; + } + + :host, + :host alwatr-icon { + transition-duration: var(--sys-motion-duration-small-out); + transition-timing-function: var(--sys-motion-easing-exiting); + } + `, + css` + :host(:hover) { + --_surface-color-on: var(--sys-color-on-primary-hsl); + --_surface-color-bg: var(--sys-color-primary-hsl); + } + :host(:hover) alwatr-icon { + color: var(--sys-color-on-primary); + } + + :host(:hover), + :host(:hover) alwatr-icon { + transition-duration: var(--sys-motion-duration-small-in); + transition-timing-function: var(--sys-motion-easing-incoming); + } + `, + ]; + + @property() + icon = ''; + + @property() + headline = ''; + + @property() + description = ''; + + @property() + href?: string; + + @property({attribute: 'url-prefix'}) + urlPrefix?: string; + + @property({type: Boolean, attribute: 'flip-rtl'}) + flipRtl = false; + + override connectedCallback(): void { + super.connectedCallback(); + this.setAttribute('stated', ''); + this.setAttribute('elevated', ''); + } + + override render(): unknown { + return html` + + +
${this.headline}
+
${this.description}
+ + `; + } +} From 533fccdbc867a44dd0f624d13287c16ccf825148 Mon Sep 17 00:00:00 2001 From: MohammadMahdi Zamanian Date: Tue, 17 Jan 2023 00:19:04 +0330 Subject: [PATCH 02/11] fix(ui-kit/icon-box): empty & linkable width --- ui/ui-kit/src/icon-box/icon-box.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/ui/ui-kit/src/icon-box/icon-box.ts b/ui/ui-kit/src/icon-box/icon-box.ts index 794515568..107e646fc 100644 --- a/ui/ui-kit/src/icon-box/icon-box.ts +++ b/ui/ui-kit/src/icon-box/icon-box.ts @@ -38,6 +38,7 @@ export class AlwatrStandardIconButton extends AlwatrSurfaceElement { a { display: flex; flex-direction: column; + width: 100%; padding: calc(3 * var(--sys-spacing-track)); gap: calc(1.5 * var(--sys-spacing-track)); color: inherit; @@ -60,6 +61,11 @@ export class AlwatrStandardIconButton extends AlwatrSurfaceElement { line-height: var(--sys-typescale-label-large-line-height); } + .headline:empty, + .description:empty { + display: none; + } + alwatr-icon { color: var(--sys-color-primary); width: calc(5 * var(--sys-spacing-track)); From 080e624214b7518db49fbe27b3c7087c49e79935 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Wed, 18 Jan 2023 17:50:38 +0330 Subject: [PATCH 03/11] refacotr(ui/icon-box): use object for properties --- ui/ui-kit/src/icon-box/icon-box.ts | 40 ++++++++++++++---------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/ui/ui-kit/src/icon-box/icon-box.ts b/ui/ui-kit/src/icon-box/icon-box.ts index 107e646fc..99f0632a5 100644 --- a/ui/ui-kit/src/icon-box/icon-box.ts +++ b/ui/ui-kit/src/icon-box/icon-box.ts @@ -8,6 +8,14 @@ declare global { } } +export type iconBoxProperties = { + icon: string; + headline: string; + description: string; + href?: string; + flipRtl: boolean; +} + /** * Alwatr standard icon button element. * @@ -97,23 +105,13 @@ export class AlwatrStandardIconButton extends AlwatrSurfaceElement { `, ]; - @property() - icon = ''; - - @property() - headline = ''; - - @property() - description = ''; - - @property() - href?: string; - - @property({attribute: 'url-prefix'}) - urlPrefix?: string; - - @property({type: Boolean, attribute: 'flip-rtl'}) - flipRtl = false; + @property({type: Object}) + properties: iconBoxProperties = { + icon: '', + description: '', + flipRtl: false, + headline: '', + }; override connectedCallback(): void { super.connectedCallback(); @@ -123,10 +121,10 @@ export class AlwatrStandardIconButton extends AlwatrSurfaceElement { override render(): unknown { return html` - - -
${this.headline}
-
${this.description}
+ + +
${this.properties.headline}
+
${this.properties.description}
 `; } From 87b720b9844f71d9314b20c90803b18e0b1c379a Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 17:59:33 +0330 Subject: [PATCH 04/11] feat(demo-pwa): demo icon-box --- ui/demo-pwa/src/page-card.ts | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts index cb4b8d3fb..4389fb92e 100644 --- a/ui/demo-pwa/src/page-card.ts +++ b/ui/demo-pwa/src/page-card.ts @@ -1,6 +1,7 @@ import {customElement, AlwatrSmartElement, css, html} from '@alwatr/element'; import '@alwatr/ui-kit/card/card.js'; +import '@alwatr/ui-kit/card/icon-box.js'; declare global { interface HTMLElementTagNameMap { @@ -8,6 +9,8 @@ declare global { } } +const loremText = `مداد رنگی ها مشغول بودند به جز مداد سفید، هیهم باشیم شاید فردا ما هم در کنار هم نباشیم…`; + /** * Alwatr Demo Home Page */ @@ -19,16 +22,18 @@ export class AlwatrPageCard extends AlwatrSmartElement { flex-wrap: wrap; padding: var(--sys-spacing-track); box-sizing: border-box; - height: 100%; + /* height: 100%; */ gap: var(--sys-spacing-track); } - alwatr-card { + alwatr-card, + alwatr-icon-box { flex-grow: 1; display: flex; align-items: flex-end; width: 25%; user-select: none; + min-height: 15rem; } input { @@ -48,15 +53,34 @@ export class AlwatrPageCard extends AlwatrSmartElement { override render(): unknown { super.render(); return html` + + + + + + + From c5d34d81a1828d3be67316fba9fd08c205d02f31 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 18:05:21 +0330 Subject: [PATCH 05/11] refactor(icon-box): review and change property name --- ui/ui-kit/src/icon-box/icon-box.ts | 40 ++++++++---------------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/ui/ui-kit/src/icon-box/icon-box.ts b/ui/ui-kit/src/icon-box/icon-box.ts index 99f0632a5..5c295fa5e 100644 --- a/ui/ui-kit/src/icon-box/icon-box.ts +++ b/ui/ui-kit/src/icon-box/icon-box.ts @@ -1,40 +1,26 @@ -import {AlwatrSurfaceElement, ifDefined, css, customElement, html, property} from '@alwatr/element'; +import {AlwatrSurfaceElement, ifDefined, css, customElement, html, property, nothing} from '@alwatr/element'; import '@alwatr/icon'; declare global { interface HTMLElementTagNameMap { - 'alwatr-icon-box': AlwatrStandardIconButton; + 'alwatr-icon-box': AlwatrIconBox; } } -export type iconBoxProperties = { +export type IconBoxContent = { icon: string; headline: string; description: string; href?: string; - flipRtl: boolean; + flipRtl?: boolean; } /** * Alwatr standard icon button element. - * - * @prop {String} icon - * @prop {String} href - * @prop {String} headline - * @prop {String} description - * @prop {String} urlPrefix - * @prop {Boolean} flipRtl - * - * @attr {String} icon - * @attr {String} href - * @attr {String} headline - * @attr {String} description - * @attr {String} url-prefix - * @attr {Boolean} flip-rtl */ @customElement('alwatr-icon-box') -export class AlwatrStandardIconButton extends AlwatrSurfaceElement { +export class AlwatrIconBox extends AlwatrSurfaceElement { static override styles = [ AlwatrSurfaceElement.styles, css` @@ -106,12 +92,7 @@ export class AlwatrStandardIconButton extends AlwatrSurfaceElement { ]; @property({type: Object}) - properties: iconBoxProperties = { - icon: '', - description: '', - flipRtl: false, - headline: '', - }; + content?: IconBoxContent; override connectedCallback(): void { super.connectedCallback(); @@ -120,11 +101,12 @@ export class AlwatrStandardIconButton extends AlwatrSurfaceElement { } override render(): unknown { + if (this.content == null) return nothing; return html` - - -
${this.properties.headline}
-
${this.properties.description}
+ + +
${this.content.headline}
+
${this.content.description}
 `; } From e876ded4291c1b88e4fe251e17fd32a52a6198d5 Mon Sep 17 00:00:00 2001 From: "S. Amir Mohammad Najafi" Date: Wed, 18 Jan 2023 18:24:22 +0330 Subject: [PATCH 06/11] refacotr(ui/icon-box): demo --- ui/demo-pwa/src/page-card.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts index 4389fb92e..20845ec3a 100644 --- a/ui/demo-pwa/src/page-card.ts +++ b/ui/demo-pwa/src/page-card.ts @@ -54,19 +54,14 @@ export class AlwatrPageCard extends AlwatrSmartElement { super.render(); return html` From 8510c2f210dd84f73bfeaf8ca9039cc388eac1cf Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 18:33:48 +0330 Subject: [PATCH 07/11] refactor(icon-box): move to card --- ui/ui-kit/src/{icon-box => card}/icon-box.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ui/ui-kit/src/{icon-box => card}/icon-box.ts (100%) diff --git a/ui/ui-kit/src/icon-box/icon-box.ts b/ui/ui-kit/src/card/icon-box.ts similarity index 100% rename from ui/ui-kit/src/icon-box/icon-box.ts rename to ui/ui-kit/src/card/icon-box.ts From 7cc19feb2aaddb19f1935cba446b94497d145874 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 18:34:51 +0330 Subject: [PATCH 08/11] chore(demo-pwa): review --- ui/demo-pwa/esbuild.mjs | 3 ++- ui/demo-pwa/src/page-card.ts | 5 ++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/demo-pwa/esbuild.mjs b/ui/demo-pwa/esbuild.mjs index 8fb338c6f..59454c10e 100755 --- a/ui/demo-pwa/esbuild.mjs +++ b/ui/demo-pwa/esbuild.mjs @@ -128,7 +128,8 @@ if (debugMode) { /* TODO: - - Assets hash + - Workbox and sw + - Res (all assets) hash - PostCSS css file - lit css loader - PostCSS lit internal styles diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts index 20845ec3a..8a83d4f9e 100644 --- a/ui/demo-pwa/src/page-card.ts +++ b/ui/demo-pwa/src/page-card.ts @@ -57,11 +57,10 @@ export class AlwatrPageCard extends AlwatrSmartElement { .content=${{icon: 'gift-outline', headline: 'شرکت در قرعه کشی میدکس', description: loremText}} > From abd122d49ba72b30f56304b441233909d7c70565 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 20:37:23 +0330 Subject: [PATCH 09/11] refactor(ui-kit): motion tokens name --- ui/ui-kit/style/token/motion.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/ui-kit/style/token/motion.css b/ui/ui-kit/style/token/motion.css index fb1e2100b..bbd787994 100644 --- a/ui/ui-kit/style/token/motion.css +++ b/ui/ui-kit/style/token/motion.css @@ -2,12 +2,12 @@ --ref-motion-duration-frame: 16.66666666666666667ms; --sys-motion-duration-none: calc(2 * var(--ref-motion-duration-frame)); - --sys-motion-duration-small-in: calc(8 * var(--ref-motion-duration-frame)); + --sys-motion-duration-small: calc(8 * var(--ref-motion-duration-frame)); --sys-motion-duration-small-out: calc(6 * var(--ref-motion-duration-frame)); - --sys-motion-duration-medium-in: calc(16 * var(--ref-motion-duration-frame)); + --sys-motion-duration-medium: calc(16 * var(--ref-motion-duration-frame)); --sys-motion-duration-medium-out: calc(12 * var(--ref-motion-duration-frame)); - --sys-motion-duration-large-in: calc(18 * var(--ref-motion-duration-frame)); - --sys-motion-duration-large-out: calc(16 * var(--ref-motion-duration-frame)); + --sys-motion-duration-large: calc(18 * var(--ref-motion-duration-frame)); + --sys-motion-duration-large-out: var(--sys-motion-duration-medium); --sys-motion-easing-linear: cubic-bezier(0.4, 0, 0.6, 1); --sys-motion-easing-incoming: cubic-bezier(0, 0, 0.2, 1); From 2003e33e5095358e24fd4e07b3fc92a3b8a9d7d7 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 20:37:54 +0330 Subject: [PATCH 10/11] feat(icon-box): new style and layout --- ui/demo-pwa/src/page-card.ts | 16 +++-- ui/element/src/surface-element.ts | 2 +- ui/ui-kit/src/card/card.ts | 2 +- ui/ui-kit/src/card/icon-box.ts | 97 ++++++++++++++----------------- 4 files changed, 57 insertions(+), 60 deletions(-) diff --git a/ui/demo-pwa/src/page-card.ts b/ui/demo-pwa/src/page-card.ts index 8a83d4f9e..219bce4b6 100644 --- a/ui/demo-pwa/src/page-card.ts +++ b/ui/demo-pwa/src/page-card.ts @@ -22,20 +22,24 @@ export class AlwatrPageCard extends AlwatrSmartElement { flex-wrap: wrap; padding: var(--sys-spacing-track); box-sizing: border-box; - /* height: 100%; */ + height: 100%; gap: var(--sys-spacing-track); + overflow-y: scroll; } alwatr-card, alwatr-icon-box { flex-grow: 1; - display: flex; - align-items: flex-end; width: 25%; user-select: none; min-height: 15rem; } + alwatr-card { + display: flex; + align-items: flex-end; + } + input { padding: var(--sys-spacing-track); color: inherit; @@ -54,13 +58,13 @@ export class AlwatrPageCard extends AlwatrSmartElement { super.render(); return html` diff --git a/ui/element/src/surface-element.ts b/ui/element/src/surface-element.ts index 7489d95f7..11da2d338 100644 --- a/ui/element/src/surface-element.ts +++ b/ui/element/src/surface-element.ts @@ -46,7 +46,7 @@ export class AlwatrSurfaceElement extends AlwatrDummyElement { ); background-repeat: no-repeat; outline: 0; - border-radius: var(--sys-radius-small); + border-radius: var(--sys-radius-medium); overflow: hidden; overflow: clip; } diff --git a/ui/ui-kit/src/card/card.ts b/ui/ui-kit/src/card/card.ts index 07c38e4e3..7e038380f 100644 --- a/ui/ui-kit/src/card/card.ts +++ b/ui/ui-kit/src/card/card.ts @@ -23,7 +23,7 @@ export class AlwatrCard extends AlwatrSurfaceElement { ]; override render(): unknown { - super.render(); + this._logger.logMethod('render'); return html``; } } diff --git a/ui/ui-kit/src/card/icon-box.ts b/ui/ui-kit/src/card/icon-box.ts index 5c295fa5e..9831018a2 100644 --- a/ui/ui-kit/src/card/icon-box.ts +++ b/ui/ui-kit/src/card/icon-box.ts @@ -1,7 +1,9 @@ -import {AlwatrSurfaceElement, ifDefined, css, customElement, html, property, nothing} from '@alwatr/element'; +import {css, customElement, html, property, nothing, ifDefined} from '@alwatr/element'; import '@alwatr/icon'; +import {AlwatrCard} from './card.js'; + declare global { interface HTMLElementTagNameMap { 'alwatr-icon-box': AlwatrIconBox; @@ -20,74 +22,62 @@ export type IconBoxContent = { * Alwatr standard icon button element. */ @customElement('alwatr-icon-box') -export class AlwatrIconBox extends AlwatrSurfaceElement { +export class AlwatrIconBox extends AlwatrCard { static override styles = [ - AlwatrSurfaceElement.styles, + AlwatrCard.styles, css` :host { - display: flex; - transition-property: background-color, color; + display: block; + padding: 0; + transition-property: color, background-color; + transition-duration: var(--sys-motion-duration-small); + transition-timing-function: var(--sys-motion-easing-linear); + } + :host(:hover) { + --_surface-color-on: var(--sys-color-on-primary-hsl); + --_surface-color-bg: var(--sys-color-primary-hsl); } a { - display: flex; - flex-direction: column; - width: 100%; - padding: calc(3 * var(--sys-spacing-track)); - gap: calc(1.5 * var(--sys-spacing-track)); + display: block; + padding: calc(2 * var(--sys-spacing-track)); + border-radius: inherit; color: inherit; text-decoration: none; } .headline { - font-family: var(--sys-typescale-title-large-font-family-name); - font-weight: var(--sys-typescale-title-large-font-weight); - font-size: var(--sys-typescale-title-large-font-size); - letter-spacing: var(--sys-typescale-title-large-letter-spacing); - line-height: var(--sys-typescale-title-large-line-height); + font-family: var(--sys-typescale-display-small-font-family-name); + font-weight: var(--sys-typescale-display-small-font-weight); + font-size: var(--sys-typescale-display-small-font-size); + letter-spacing: var(--sys-typescale-display-small-letter-spacing); + line-height: var(--sys-typescale-display-small-line-height); + margin-bottom: calc(2 * var(--sys-spacing-track)); + } + + .headline alwatr-icon { + display: block; + margin-bottom: var(--sys-spacing-track); + font-size: 2em; + color: var(--sys-color-primary); + transition: color var(--sys-motion-duration-small) var(--sys-motion-easing-linear); + } + :host(:hover) .headline alwatr-icon { + color: var(--sys-color-on-primary); } .description { - font-family: var(--sys-typescale-label-large-font-family-name); - font-weight: var(--sys-typescale-label-large-font-weight); - font-size: var(--sys-typescale-label-large-font-size); - letter-spacing: var(--sys-typescale-label-large-letter-spacing); - line-height: var(--sys-typescale-label-large-line-height); + font-family: var(--sys-typescale-body-medium-font-family-name); + font-weight: var(--sys-typescale-body-medium-font-weight); + font-size: var(--sys-typescale-body-medium-font-size); + letter-spacing: var(--sys-typescale-body-medium-letter-spacing); + line-height: var(--sys-typescale-body-medium-line-height); } .headline:empty, .description:empty { display: none; } - - alwatr-icon { - color: var(--sys-color-primary); - width: calc(5 * var(--sys-spacing-track)); - height: calc(5 * var(--sys-spacing-track)); - margin-bottom: var(--sys-spacing-track); - transition-property: color; - } - - :host, - :host alwatr-icon { - transition-duration: var(--sys-motion-duration-small-out); - transition-timing-function: var(--sys-motion-easing-exiting); - } - `, - css` - :host(:hover) { - --_surface-color-on: var(--sys-color-on-primary-hsl); - --_surface-color-bg: var(--sys-color-primary-hsl); - } - :host(:hover) alwatr-icon { - color: var(--sys-color-on-primary); - } - - :host(:hover), - :host(:hover) alwatr-icon { - transition-duration: var(--sys-motion-duration-small-in); - transition-timing-function: var(--sys-motion-easing-incoming); - } `, ]; @@ -97,15 +87,18 @@ export class AlwatrIconBox extends AlwatrSurfaceElement { override connectedCallback(): void { super.connectedCallback(); this.setAttribute('stated', ''); - this.setAttribute('elevated', ''); + this.setAttribute('elevated', '3'); } override render(): unknown { + this._logger.logMethod('render'); if (this.content == null) return nothing; return html` - -
${this.content.headline}
+
+ + ${this.content.headline} +
${this.content.description}
 `; From 18fdde1ce4e55869c491a90c603bb7059424bef5 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 18 Jan 2023 20:42:30 +0330 Subject: [PATCH 11/11] fix(icon-box): style when desc is empty --- ui/ui-kit/src/card/icon-box.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/ui-kit/src/card/icon-box.ts b/ui/ui-kit/src/card/icon-box.ts index 9831018a2..695e8ea7b 100644 --- a/ui/ui-kit/src/card/icon-box.ts +++ b/ui/ui-kit/src/card/icon-box.ts @@ -52,7 +52,6 @@ export class AlwatrIconBox extends AlwatrCard { font-size: var(--sys-typescale-display-small-font-size); letter-spacing: var(--sys-typescale-display-small-letter-spacing); line-height: var(--sys-typescale-display-small-line-height); - margin-bottom: calc(2 * var(--sys-spacing-track)); } .headline alwatr-icon { @@ -72,9 +71,9 @@ export class AlwatrIconBox extends AlwatrCard { font-size: var(--sys-typescale-body-medium-font-size); letter-spacing: var(--sys-typescale-body-medium-letter-spacing); line-height: var(--sys-typescale-body-medium-line-height); + margin-top: calc(2 * var(--sys-spacing-track)); } - .headline:empty, .description:empty { display: none; }