zoralabDRAWER_TOP Technical Specification - ZORALab's Hestia

Main Purpose

This package's primary purpose is to provide user interface (UI) styling specifically for top drawer navigator values. This page is already deployed all usable drawer already.

Legacy Recording

This package was known as a part of drawer_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:

<nav class='top-drawer'>
	<input id='...DRAWER_ID...' type='checkbox' />
	<label class='trigger' for='...DRAWER_ID...'>
		<span class='open'>☰</span>
		<span class='close'>𝖷</span>
	</label>
	<label class='overlay' for='...DRAWER_ID...'></label>


	<div class='content'>
		...
	</div>
</nav>

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.

Z-Index

Affects the z-index of the rendered component.

VARIABLE     : --top-drawer-z-index
CSS PROPERTY : z-index
DEFAULT      : var(--drawer-z-index) (>= v1.2.0)

Z-Index (Opened)

Affects the z-index of the rendered component when opened.

VARIABLE     : --top-drawer-z-index-opened
CSS PROPERTY : z-index
DEFAULT      : var(--drawer-z-index-opened) (>= v1.2.0)

Width

Affects the width of the rendered component (when closed).

VARIABLE     : --top-drawer-width
CSS PROPERTY : width
DEFAULT      : 100vw (>= v1.2.0)

Width (Opened)

Affects the width of the rendered component when opened.

VARIABLE     : --top-drawer-width-opened
CSS PROPERTY : width
DEFAULT      : var(--top-drawer-width) (>= v1.2.0)

Height

Affects the height of the rendered component (when closed).

VARIABLE     : --top-drawer-height
CSS PROPERTY : height
DEFAULT      : 0 (>= v1.2.0)

Height (Opened)

Affects the height of the rendered component when opened.

VARIABLE     : --top-drawer-height-opened
CSS PROPERTY : height
DEFAULT      : 85vh (>= v1.2.0)

Overflow

Affects the overflow behavior of the rendered component.

VARIABLE     : --top-drawer-overflow
CSS PROPERTY : overflow
DEFAULT      : auto hidden (>= v1.2.0)

Border

Affects the border of the rendered component.

VARIABLE     : --top-drawer-border
CSS PROPERTY : border
DEFAULT      : var(--drawer-border) (>= v1.2.0)

Border Radius

Affects the border radius of the rendered component.

VARIABLE     : --top-drawer-border-radius
CSS PROPERTY : border-radius
DEFAULT      : 0 0 var(--drawer-border-radius) var(--drawer-border-radius) (>= v1.2.0)

Color

Affects the color of the rendered component.

VARIABLE     : --top-drawer-color
CSS PROPERTY : color
DEFAULT      : var(--drawer-color) (>= v1.2.0)

Background

Affects the background of the rendered component.

VARIABLE     : --top-drawer-background
CSS PROPERTY : background
DEFAULT      : var(--drawer-background) (>= v1.2.0)

Box Shadow

Affects the box shadow of the rendered component.

VARIABLE     : --top-drawer-box-shadow
CSS PROPERTY : box-shadow
DEFAULT      : var(--drawer-box-shadow) (>= v1.2.0)

Transition

Affects the animation timing of the rendered component.

VARIABLE     : --top-drawer-transition
CSS PROPERTY : transition
DEFAULT      : var(--drawer-transition) (>= v1.2.0)

Width (Trigger)

Affects the trigger's width of the rendered component.

VARIABLE     : --top-drawer-trigger-width
CSS PROPERTY : width
DEFAULT      : var(--drawer-trigger-width) (>= v1.2.0)

Height (Trigger)

Affects the trigger's height of the rendered component.

VARIABLE     : --top-drawer-trigger-height
CSS PROPERTY : height
DEFAULT      : var(--drawer-trigger-height) (>= v1.2.0)

Top Position (Trigger)

Affects the trigger's top position of the rendered component.

VARIABLE     : --top-drawer-trigger-position-top
CSS PROPERTY : top
DEFAULT      : 0 (>= v1.2.0)

Left Position (Trigger)

Affects the trigger's left position of the rendered component.

VARIABLE     : --top-drawer-trigger-position-left
CSS PROPERTY : left
DEFAULT      : 50% (>= v1.2.0)

Bottom Position (Trigger)

Affects the trigger's bottom position of the rendered component.

VARIABLE     : --top-drawer-trigger-position-bottom
CSS PROPERTY : bottom
DEFAULT      : unset (>= v1.2.0)

Right Position (Trigger)

Affects the trigger's right position of the rendered component.

VARIABLE     : --top-drawer-trigger-position-right
CSS PROPERTY : right
DEFAULT      : unset (>= v1.2.0)

Z-Index (Trigger)

Affects the trigger's z-index of the rendered component.

VARIABLE     : --top-drawer-trigger-z-index
CSS PROPERTY : z-index
DEFAULT      : var(--drawer-trigger-z-index) (>= v1.2.0)

Border (Trigger)

Affects the trigger's border of the rendered component.

VARIABLE     : --top-drawer-trigger-border
CSS PROPERTY : border
DEFAULT      : unset (>= v1.2.0)

Border Radius (Trigger)

Affects the trigger's border radius of the rendered component.

VARIABLE     : --top-drawer-trigger-border-radius
CSS PROPERTY : border-radius
DEFAULT      : 0 0 var(--drawer-trigger-border-radius) var(--drawer-trigger-border-radius)

Font Size (Trigger)

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

VARIABLE     : --top-drawer-trigger-font-size
CSS PROPERTY : font-size
DEFAULT      : var(--drawer-trigger-font-size) (>= v1.2.0)

Font Style (Trigger)

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

VARIABLE     : --top-drawer-trigger-font-style
CSS PROPERTY : font-style
DEFAULT      : var(--drawer-trigger-font-style) (>= v1.2.0)

Color (Trigger)

Affects the trigger's color of the rendered component.

VARIABLE     : --top-drawer-trigger-color
CSS PROPERTY : color
DEFAULT      : var(--drawer-trigger-color) (>= v1.2.0)

Background (Trigger)

Affects the trigger's background of the rendered component.

VARIABLE     : --top-drawer-trigger-background
CSS PROPERTY : background
DEFAULT      : var(--drawer-background) (>= v1.2.0)

Box Shadow (Trigger)

Affects the trigger's box shadow of the rendered component.

VARIABLE     : --top-drawer-trigger-box-shadow
CSS PROPERTY : box-shadow
DEFAULT      : 0 0 2rem var(--drawer-trigger-color) (>= v1.2.0)

Transform (Trigger)

Affects the trigger's transform of the rendered component.

VARIABLE     : --top-drawer-trigger-transform
CSS PROPERTY : transform
DEFAULT      : translateX(-50%) (>= v1.2.0)

Transform (Trigger + Focus)

Affects the trigger's transform of the rendered component while being focused.

VARIABLE     : --top-drawer-trigger-transform-focus
CSS PROPERTY : transform
DEFAULT      : scale(1.3) translateX(-50%) (>= v1.2.0)

Z-Index (Overlay)

Affects the overlay layer's z-index of the rendered component.

VARIABLE     : --top-drawer-overlay-z-index
CSS PROPERTY : z-index
DEFAULT      : var(--drawer-overlay-z-index) (>= v1.2.0)

Color (Overlay)

Affects the overlay layer's color of the rendered component.

VARIABLE     : --top-drawer-overlay-color
CSS PROPERTY : color
DEFAULT      : var(--drawer-overlay-color) (>= v1.2.0)

Background (Overlay)

Affects the overlay layer's background of the rendered component.

VARIABLE     : --top-drawer-overlay-background
CSS PROPERTY : background
DEFAULT      : var(--drawer-overlay-background) (>= v1.2.0)

Transition (Overlay)

Affects the overlay layer's animation timing of the rendered component.

VARIABLE     : --top-drawer-overlay-transition
CSS PROPERTY : transition
DEFAULT      : var(--drawer-overlay-transition) (>= 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/zoralabDRAWER_TOP/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>