zoralabNOTE Technical Specification - ZORALab's Hestia

Main Purpose

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

Legacy Recording

This package was known as note_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:

<div class="note">
	<input id="...ID-A..." type="checkbox" checked>
	<label for="...ID-A...">...</label>
	<p class="content">
		...
	</p>
</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.

Box-Sizing

Affects the box-sizing behavior of the rendered component.

VARIABLE     : --note-box-sizing
CSS PROPERTY : box-sizing
DEFAULT      : border-box (>= v1.2.0)

Margin

Affects the margin of the rendered component.

VARIABLE     : --note-margin
CSS PROPERTY : margin
DEFAULT      : 1.3rem auto (>= v1.2.0)

Padding

Affects the padding of the rendered component.

VARIABLE     : --note-padding
CSS PROPERTY : padding
DEFAULT      : 0 (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --note-border
CSS PROPERTY : border
DEFAULT      : 1px solid var(--color-primary-400) (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

VARIABLE     : --note-border-radius
CSS PROPERTY : border-radius
DEFAULT      : .5rem (>= v1.2.0)

Min-Width

Affects the minimum width of the rendered component.

VARIABLE     : --note-min-width
CSS PROPERTY : min-width
DEFAULT      : initial (>= v1.2.0)

Width

Affects the width of the rendered component.

VARIABLE     : --note-width
CSS PROPERTY : width
DEFAULT      : 100% (>= v1.2.0)

Max-Width

Affects the maximum width of the rendered component.

VARIABLE     : --note-max-width
CSS PROPERTY : max-width
DEFAULT      : 100% (>= v1.2.0)

Min-Height

Affects the minimum height of the rendered component.

VARIABLE     : --note-min-height
CSS PROPERTY : min-height
DEFAULT      : initial (>= v1.2.0)

Height

Affects the height of the rendered component.

VARIABLE     : --note-height
CSS PROPERTY : height
DEFAULT      : max-content (>= v1.2.0)

Max-Height

Affects the maximum height of the rendered component.

VARIABLE     : --note-max-height
CSS PROPERTY : max-height
DEFAULT      : initial (>= v1.2.0)

Timing

Affects the animation timing of the rendered component.

VARIABLE     : --note-timing
CSS PROPERTY : transition
DEFAULT      : var(--timing-normal) (>= v1.2.0)

Title Font Size

Affects the title's font size of the rendered component.

VARIABLE     : --note-title-font-size
CSS PROPERTY : font-size
DEFAULT      : 2.5rem (>= v1.2.0)

Title Font Style

Affects the title's font style of the rendered component.

VARIABLE     : --note-title-font-style
CSS PROPERTY : font-style
DEFAULT      : normal (>= v1.2.0)

Title Font Weight

Affects the title's font weight of the rendered component.

VARIABLE     : --note-title-font-weight
CSS PROPERTY : font-weight
DEFAULT      : 500 (>= v1.2.0)

Title Text Transform

Affects the title's text transformation of the rendered component.

VARIABLE     : --note-title-text-transform
CSS PROPERTY : text-transform
DEFAULT      : titlecase (>= v1.2.0)

Title Text Align

Affects the title's text alignment of the rendered component.

VARIABLE     : --note-title-text-align
CSS PROPERTY : text-align
DEFAULT      : left (>= v1.2.0)

Title Color

Affects the title's color of the rendered component.

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

Title Color (Print Mode)

Affects the title's color of the rendered component when in print mode.

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

Title Indicator Color

Affects the title indicator's color of the rendered component.

VARIABLE     : --note-title-indicator-color
CSS PROPERTY : color
DEFAULT      : var(--color-contrast-400) (>= v1.2.0)

Title Indicator Color (Print Mode)

Affects the title indicator's color of the rendered component when in print mode.

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

Title Background

Affects the title's background of the rendered component.

VARIABLE     : --note-title-background
CSS PROPERTY : background
DEFAULT      : var(--color-primary-900) (>= v1.2.0)

Title Background (Print Mode)

Affects the background of the rendered component when in print mode.

VARIABLE     : --note-title-background-print
CSS PROPERTY : background
DEFAULT      : var(--body-background-print) (>= v1.2.0)

Content Margin

Affects the content's margin of the rendered component.

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

Content Padding

Affects the content padding of the rendered component.

VARIABLE     : --note-content-padding
CSS PROPERTY : padding
DEFAULT      : 2rem (>= v1.2.0)

Content Color

Affects the content's color of the rendered component.

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

Content Color (Print Mode)

Affects the content's color of the rendered component when in print mode.

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

Content Background

Affects the content's background of the rendered component.

VARIABLE     : --note-content-background
CSS PROPERTY : background
DEFAULT      : var(--color-primary-100) (>= v1.2.0)

Content Background (Print Mode)

Affects the content's background of the rendered component when in print mode.

VARIABLE     : --note-content-background-print
CSS PROPERTY : background
DEFAULT      : var(--body-background-print) (>= 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/zoralabNOTE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>