zoralabDIVIDER_DASH Technical Specification - ZORALab's Hestia

Main Purpose

This package's primary purpose is to provide user interface (UI) styling specifically for dash divider values. In web UI, it is shown as follows:

Legacy Recording

This package was known as divider-dash_hestiaUI before ZORALab's Hestia v1.2.0. The transformation was due to someone attempting to steal the copyrights and makes way for programming package's documentation restructuring.

Designers

This component was designed by the following creators:

Dependencies

This component has the following dependencies (arranged in the order from left-top to right-bottom):

HTML

For HTML, ZORALab's Hestia employs the W3C native syntax for simplicity and maximum compatibility sakes. ZORALab's Hestia recommends the following HTML code structure for this component.

Minimum HTML

The minimum required HTML codes are shown below:

<hr class='dash' />

CSS

ZORALab's Hestia heavily rely on CSS to style this component and offering its css variables for customizations. Below are the list of available CSS variables at your disposal.

Border Bottom

Affects the bottom border of the rendered component.

VARIABLE     : --divider-dash-border-bottom
CSS PROPERTY : border-bottom
DEFAULT      : 2px dashed var(--divider-color) (>= v1.2.0)

Border Bottom (Inverted)

Affects the bottom border of the rendered component while in inverted mode.

VARIABLE     : --divider-dash-border-bottom-inverted
CSS PROPERTY : border-bottom
DEFAULT      : 2px dashed var(--divider-color-inverted) (>= v1.2.0)

JavaScript

Fortunately, this component does not use any JavaScript. Relax.

ToCSS

Render the CSS output for this UI component.

Hugo

Usage example:

{{- $ret := partial "hestiaGUI/zoralabDIVIDER_DASH/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>