zoralabARROW Technical Specification - ZORALab's Hestia

Main Purpose

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

This is a paragraph.

This is a paragraph.

Legacy Recording

This package was first released in ZORALab's Hestia v1.2.0.

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:

<div class='arrow' style='--arrow-angle="[ROTATION_ANGLE]"; --arrow-size="[SIZE]px";'></div>

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.

Size

Affects the size of the rendered component.

VARIABLE     : --arrow-size
CSS PROPERTY : width; height
DEFAULT      : 60px (>= v1.2.0)

Rotation Angle

Affects the rotation angle of the rendered component.

VARIABLE     : --arrow-angle
CSS PROPERTY : transform (rotate)
DEFAULT      : 0deg (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --arrow-margin
CSS PROPERTY : margin
DEFAULT      : 0 (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --arrow-border
CSS PROPERTY : border
DEFAULT      : 2px currentColor solid (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

VARIABLE     : --arrow-border-radius
CSS PROPERTY : border-radius
DEFAULT      : 50% (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --arrow-color
CSS PROPERTY : color
DEFAULT      : var(--body-color) (>= v1.2.0)

Color (Inverted)

Affects the color of the rendered component in inverted mode.

VARIABLE     : --arrow-color-inverted
CSS PROPERTY : color
DEFAULT      : var(--body-color-inverted) (>= v1.2.0)

Color (Print Mode)

Affects the color of the rendered component during print mode.

VARIABLE     : --arrow-color-print
CSS PROPERTY : color
DEFAULT      : var(--body-color-print) (>= v1.2.0)

Transition

Affects the transition timing of the rendered component.

VARIABLE     : --arrow-timing
CSS PROPERTY : animation-duration
DEFAULT      : 1.7s (>= v1.2.0)

Translation Factor

Affects the fading arrow's distance of the rendered component.

VARIABLE     : --arrow-translate-factor
CSS PROPERTY : top
DEFAULT      : 80% (>= v1.2.0)

Size (Content)

Affects the arrow content's size of the rendered component.

VARIABLE     : --arrow-content-size
CSS PROPERTY : width; height
DEFAULT      : 35% (>= v1.2.0)

Border (content)

Affects the arrow content's border of the rendered component.

VARIABLE     : --arrow-content-border
CSS PROPERTY : border
DEFAULT      : 2px currentColor solid (>= 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/zoralabARROW/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>