Overview
This page describes all variables that exist within the ZUI.
| Name | Type | Description |
|---|---|---|
zui-alert-danger-background |
color |
The background color of a dangerous alert. |
zui-alert-danger-border |
color |
The border of a dangerous alert. |
zui-alert-danger-border-color |
color |
The border color of a dangerous alert. |
zui-alert-font-icon-danger |
string |
The icon character that is used for dangerous alerts. |
zui-alert-font-icon-info |
string |
The icon character that is used for information alerts. |
zui-alert-font-icon-subtle |
string |
The icon character that is used for warning alerts. |
zui-alert-font-icon-success |
string |
The icon character that is used for success alerts. |
zui-alert-font-icon-warning |
string |
The icon character that is used for warning alerts. |
zui-alert-info-background |
color |
The background color of an information alert. |
zui-alert-info-border |
color |
The border of an information alert. |
zui-alert-info-border-color |
color |
The border color of an information alert. |
zui-alert-subtle-background |
color |
The background color of a subtle alert. |
zui-alert-subtle-border |
color |
The border of a subtle alert. |
zui-alert-subtle-border-color |
color |
The border color of a subtle alert. |
zui-alert-success-background |
color |
The background color of a success alert. |
zui-alert-success-border |
color |
The border of a success alert. |
zui-alert-success-border-color |
color |
The border color of a success alert. |
zui-alert-warning-background |
color |
The background color of a warning alert. |
zui-alert-warning-border |
color |
The border of a warning alert. |
zui-alert-warning-border-color |
color |
The border color of a warning alert. |
zui-anchor-color |
color |
The color of anchors. |
zui-anchor-color-disabled |
color |
The color of disabled anchors. |
zui-anchor-cursor-disabled |
cursor |
The cursor used for anchors that are disabled. |
zui-anchor-text-decoration |
text-decoration |
The text decoration of anchors. |
zui-anchor-text-decoration-hover |
text-decoration |
The text decoration of anchors when hovered. |
zui-badge-background |
color |
The background color of a badge. |
zui-badge-color |
color |
The text color of a badge. |
zui-badge-selector |
string |
The selector used to match badges. |
zui-banner-danger-background |
color |
The background color of a dangerous banner. |
zui-banner-danger-color |
color |
The text color of a dangerous banner. |
zui-banner-danger-link-color |
color |
The anchor color of a dangerous banner. |
zui-banner-danger-selector |
string |
The selector that matches dangerous banners. |
zui-banner-info-background |
color |
The background color of an information banner. |
zui-banner-info-color |
color |
The text color of an information banner. |
zui-banner-info-link-color |
color |
The anchor color of an information banner. |
zui-banner-selector |
string |
The selector that matches banners. |
zui-banner-success-background |
color |
The background color of a success banner. |
zui-banner-success-color |
color |
The text color of a success banner. |
zui-banner-success-link-color |
color |
The anchor color of a success banner. |
zui-banner-success-selector |
string |
The selector that matches success banners. |
zui-banner-warning-background |
color |
The background color of a warning banner. |
zui-banner-warning-color |
color |
The text color of a warning banner. |
zui-banner-warning-link-color |
color |
The anchor color of a warning banner. |
zui-banner-warning-selector |
string |
The selector that matches warning banners. |
zui-blanket-background-color |
color |
The background color of the blanket. |
zui-blanket-opacity |
float |
The opacity value which is a vlaue between 0 and 1. |
zui-blanket-selector |
string |
The name of the class used for the blanket. |
zui-blanket-transition |
transition |
The transition of the blanket. |
zui-blanket-transition-delay |
time |
The transition delay before the blanket is shown. |
zui-blanket-z-index |
color |
The background color of the blanket. |
zui-blockquote-border-color |
color |
The border color of blockquotes. |
zui-blockquote-border-size |
size |
The border size of blockquotes. |
zui-blockquote-border-style |
border-style |
The border style of blockquotes. |
zui-blockquote-color |
color |
The textual color of blockquotes. |
zui-blockquote-margin |
margin |
The margin of blockquotes. |
zui-blockquote-padding |
padding |
The padding of blockquotes. |
zui-body-background |
size |
The background color of the body. |
zui-body-font-color |
color |
The font color of the body. |
zui-body-font-family |
size |
The font family of the body. |
zui-body-font-size |
size |
The font size of the body. |
zui-body-font-style |
font-style |
The font style of the body. |
zui-body-font-weight |
font-weight |
The font weight of the body. |
zui-body-line-height |
size |
The line height of the body. |
zui-color-alert |
color |
The color used for alerts. This is used for the "top bar" and "alert" patterns. |
zui-color-black |
color |
The primary color black. |
zui-color-blue |
color |
The primary color blue. |
zui-color-green |
color |
The primary color green. |
zui-color-info |
color |
The color used for information. This is used for the "top bar" and "alert" patterns. |
zui-color-primary |
color |
The primary color used throughout the library. |
zui-color-primary-border |
color |
The primary color for borders used throughout the library. |
zui-color-primary-hover |
color |
The primary color used throughout the library when hovered over elements. |
zui-color-red |
color |
The primary color red. |
zui-color-secondary |
color |
The secondary color used throughout the library. |
zui-color-secondary-hover |
color |
The secondary color used throughout the library when hovered over elements. |
zui-color-success |
color |
The color used for success. This is used for the "top bar" and "alert" patterns. |
zui-color-warning |
color |
The color used for warnings. This is used for the "top bar" and "alert" patterns. |
zui-color-white |
color |
The primary color white. |
zui-color-yellow |
color |
The primary color yellow. |
zui-cursor-alias-value |
cursor |
Indicating an alias or shortcut is to be created. |
zui-cursor-all-scroll-value |
cursor |
Cursor showing that something can be scrolled in any direction (panned). |
zui-cursor-auto-value |
cursor |
The browser determines the cursor to display based on the current context. |
zui-cursor-cell-value |
cursor |
Indicating that cells can be selected. |
zui-cursor-col-resize-value |
cursor |
The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating. |
zui-cursor-context-menu-value |
cursor |
A context menu is available under the cursor. |
zui-cursor-copy-value |
cursor |
Indicating that something can be copied. |
zui-cursor-crosshair-value |
cursor |
Cross cursor, often used to indicate selection in a bitmap. |
zui-cursor-default-value |
cursor |
Default cursor, typically an arrow. |
zui-cursor-e-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-ew-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-grab-value |
cursor |
Indicates that something can be grabbed (dragged to be moved). |
zui-cursor-grabbing-value |
cursor |
Indicates that something can be grabbed (dragged to be moved). |
zui-cursor-help-value |
cursor |
Indicating help is available. |
zui-cursor-move-value |
cursor |
The hovered object may be moved. |
zui-cursor-n-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-ne-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-nesw-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-no-drop-value |
cursor |
Cursor showing that a drop is not allowed at the current location. |
zui-cursor-none-value |
cursor |
No cursor is rendered. |
zui-cursor-not-allowed-value |
cursor |
Cursor showing that something cannot be done. |
zui-cursor-ns-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-nw-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-nwse-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-pointer-value |
cursor |
E.g. used when hovering over links, typically a hand. |
zui-cursor-progress-value |
cursor |
The program is busy in the background but the user can still interact with the interface (unlike for wait). |
zui-cursor-row-resize-value |
cursor |
The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them. |
zui-cursor-s-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-se-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-sw-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-text-value |
cursor |
Indicating text can be selected, typically an I-beam. |
zui-cursor-vertical-text-value |
cursor |
Indicating that vertical text can be selected, typically a sideways I-beam. |
zui-cursor-w-resize-value |
cursor |
Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. |
zui-cursor-wait-value |
cursor |
The program is busy (sometimes an hourglass or a watch). |
zui-cursor-zoom-in-value |
cursor |
Indicates that something can be zoomed (magnified) in. |
zui-cursor-zoom-out-value |
cursor |
Indicates that something can be zoomed (magnified) out. |
zui-dialog-background |
background |
The background of a dialog. |
zui-dialog-border |
border |
The border of a dialog. |
zui-dialog-border-radius |
size |
The border radius of a dialog. |
zui-dialog-border-radius-size-full |
size |
The border radius for full screen dialogs. |
zui-dialog-footer-background |
color |
The background -color used for the footer. |
zui-dialog-footer-height |
height |
The height of the dialog footer. |
zui-dialog-footer-padding |
padding |
The padding used for the footer. |
zui-dialog-header-background |
background |
The background color of the dialog header. |
zui-dialog-header-color |
color |
The font color of the header. |
zui-dialog-header-font-size |
size |
The font size of the header. |
zui-dialog-header-height |
height |
The height of the header. |
zui-dialog-header-padding |
padding |
The padding used for the header. |
zui-dialog-hint-color |
color |
The font color of hints. |
zui-dialog-hint-line-height |
size |
The line-height used for the hints. |
zui-dialog-menu-width |
size |
The width of a page menu. |
zui-dialog-min-height |
size |
The minimum height of a dialog. |
zui-dialog-selector |
string |
The selector for dialogs. |
zui-dialog-selector-footer |
string |
The selector for the footer. |
zui-dialog-selector-footer-left |
string |
The selector for the left footer. |
zui-dialog-selector-footer-right |
string |
The selector for the right footer. |
zui-dialog-selector-full |
string |
The selector for full size dialogs. |
zui-dialog-selector-header |
string |
The selector for the dialog title. |
zui-dialog-selector-hint |
string |
The selector for a hint in the footer. |
zui-dialog-selector-inline |
string |
The selector for inline dialogs. |
zui-dialog-selector-large |
string |
The selector for large dialogs. |
zui-dialog-selector-medium |
string |
The selector for medium dialogs. |
zui-dialog-selector-menu |
string |
The selector for the menu. |
zui-dialog-selector-page |
string |
The selector for the page. |
zui-dialog-selector-page-body |
string |
The selector for the body of the page. |
zui-dialog-selector-panel |
string |
The selector for the panel. |
zui-dialog-selector-panel-no-padding |
string |
The selector for the panel that should not have padding. |
zui-dialog-selector-small |
string |
The selector for small dialogs. |
zui-dialog-selector-tiny |
string |
The selector for tiny dialogs. |
zui-dialog-selector-xlarge |
string |
The selector for extra large dialogs. |
zui-dialog-size-full-height |
size |
The width of a full screen dialog. |
zui-dialog-size-full-width |
size |
The height of a full screen dialog. |
zui-dialog-size-large-height |
size |
The height of a large size dialog. |
zui-dialog-size-large-width |
size |
The width of a large size dialog. |
zui-dialog-size-medium-height |
size |
The height of a medium size dialog. |
zui-dialog-size-medium-width |
size |
The width of a medium size dialog. |
zui-dialog-size-small-height |
size |
The height of a small dialog. |
zui-dialog-size-small-width |
size |
The width of a small dialog. |
zui-dialog-size-tiny-height |
size |
The height of a tiny dialog. |
zui-dialog-size-tiny-width |
size |
The width of a tiny dialog. |
zui-dialog-size-xlarge-height |
size |
The height of an extra large size dialog. |
zui-dialog-size-xlarge-width |
size |
The width of an extra large size dialog. |
zui-dialog-z-index |
integer |
The z-index used for dialogs. |
zui-file-selection-selector |
string |
The selector for the file selection dialog. |
zui-flexgrid-class-container |
string |
The name of the class used to define a flexgrid container. |
zui-flexgrid-class-container-fluid |
string |
The name of the class used to define a fluid flexgrid container. |
zui-flexgrid-class-lg-column |
string |
The prefix of the class used to define a large size column in a flexgrid container. |
zui-flexgrid-class-lg-push |
string |
The prefix of the class used to push an element in a large size column in a flexgrid container. |
zui-flexgrid-class-md-column |
string |
The prefix of the class used to define a medium size column in a flexgrid container. |
zui-flexgrid-class-md-push |
string |
The prefix of the class used to push an element in a mediumn size column in a flexgrid container. |
zui-flexgrid-class-row |
string |
The name of the class used to define a row in a flexgrid container. |
zui-flexgrid-class-row-reverse |
string |
The name of the class used to define a row in a flexgrid container. |
zui-flexgrid-class-sm-column |
string |
The prefix of the class used to define a small size column in a flexgrid container. |
zui-flexgrid-class-sm-push |
string |
The prefix of the class used to push an element in a small size column in a flexgrid container. |
zui-flexgrid-class-xs-column |
string |
The prefix of the class used to define an extra small size column in a flexgrid container. |
zui-flexgrid-class-xs-push |
string |
The prefix of the class used to push an element in an extra small size column in a flexgrid container. |
zui-flexgrid-column-count |
integer |
The amount of columns to use in the grid. |
zui-flexgrid-media-query-lg |
string |
The media query used to match large screens. |
zui-flexgrid-media-query-md |
string |
The media query used to match medium screens. |
zui-flexgrid-media-query-sm |
string |
The media query used to match small screens. |
zui-flexgrid-media-query-xs |
string |
The media query used to match extra small screens. |
zui-font-content-arrow-down |
string |
The content character for icon arrow-down. |
zui-font-content-arrow-left |
string |
The content character for icon arrow-left. |
zui-font-content-arrow-right |
string |
The content character for icon arrow-right. |
zui-font-content-arrow-up |
string |
The content character for icon arrow-up. |
zui-font-content-bookmark |
string |
The content character for icon bookmark. |
zui-font-content-bug |
string |
The content character for icon bug. |
zui-font-content-calendar |
string |
The content character for icon calendar. |
zui-font-content-ccw |
string |
The content character for icon ccw. |
zui-font-content-check |
string |
The content character for icon check. |
zui-font-content-code |
string |
The content character for icon code. |
zui-font-content-cw |
string |
The content character for icon cw. |
zui-font-content-danger |
string |
The content character for icon danger. |
zui-font-content-download |
string |
The content character for icon download. |
zui-font-content-female |
string |
The content character for icon female. |
zui-font-content-gear |
string |
The content character for icon gear. |
zui-font-content-gift |
string |
The content character for icon gift. |
zui-font-content-git-branch |
string |
The content character for icon git-branch. |
zui-font-content-git-commit |
string |
The content character for icon git-commit. |
zui-font-content-git-compare |
string |
The content character for icon git-compare. |
zui-font-content-git-merge |
string |
The content character for icon git-merge. |
zui-font-content-git-pull-request |
string |
The content character for icon git-pull-request. |
zui-font-content-globe |
string |
The content character for icon globe. |
zui-font-content-heart |
string |
The content character for icon heart. |
zui-font-content-info |
string |
The content character for icon info. |
zui-font-content-light-bulb |
string |
The content character for icon light-bulb. |
zui-font-content-male |
string |
The content character for icon male. |
zui-font-content-mention |
string |
The content character for icon mention. |
zui-font-content-monitor |
string |
The content character for icon monitor. |
zui-font-content-mortar-board |
string |
The content character for icon mortar-board. |
zui-font-content-organization |
string |
The content character for icon organization. |
zui-font-content-person |
string |
The content character for icon person. |
zui-font-content-plus |
string |
The content character for icon plus. |
zui-font-content-pulse |
string |
The content character for icon pulse. |
zui-font-content-puzzle |
string |
The content character for icon puzzle. |
zui-font-content-question |
string |
The content character for icon question. |
zui-font-content-radio-tower |
string |
The content character for icon radio-tower. |
zui-font-content-refresh |
string |
The content character for icon refresh. |
zui-font-content-repo-forked |
string |
The content character for icon repo-forked. |
zui-font-content-results |
string |
The content character for icon results. |
zui-font-content-rocket |
string |
The content character for icon rocket. |
zui-font-content-rss |
string |
The content character for icon rss. |
zui-font-content-sort-asc |
string |
The content character for icon sort-asc. |
zui-font-content-sort-desc |
string |
The content character for icon sort-desc. |
zui-font-content-star |
string |
The content character for icon star. |
zui-font-content-tags |
string |
The content character for icon tags. |
zui-font-content-thumbnails |
string |
The content character for icon thumbnails. |
zui-font-content-upload |
string |
The content character for icon upload. |
zui-font-content-warning |
string |
The content character for icon warning. |
zui-font-content-x |
string |
The content character for icon x. |
zui-footer-anchor-color |
color |
The alignment of the footer. |
zui-footer-background-color |
color |
The background color of the footer. |
zui-footer-border-top |
border |
The top border of the footer. |
zui-footer-class |
string |
The name of the class used to define a footer. |
zui-footer-font |
font |
The font (usually just the size) of the footer. |
zui-footer-line-height |
size |
The line height of the footer. |
zui-footer-margin-size |
size |
The size left and right from the separator. |
zui-footer-padding |
border |
The padding of the footer. |
zui-footer-separator |
string |
The separator used in between the list items. |
zui-footer-text-align |
alignment |
The alignment of the footer. |
zui-header-h1-color |
color |
The color of an h1-element. |
zui-header-h1-font-size |
color |
The font-size of an h1-element. |
zui-header-h2-color |
color |
The color of an h2-element. |
zui-header-h2-font-size |
color |
The font-size of an h2-element. |
zui-header-h3-color |
color |
The color of an h3-element. |
zui-header-h3-font-size |
color |
The font-size of an h3-element. |
zui-header-h4-color |
color |
The color of an h4-element. |
zui-header-h4-font-size |
color |
The font-size of an h4-element. |
zui-header-h5-color |
color |
The color of an h5-element. |
zui-header-h5-font-size |
color |
The font-size of an h5-element. |
zui-header-h6-color |
color |
The color of an h6-element. |
zui-header-h6-font-size |
color |
The font-size of an h6-element. |
zui-header-small-color |
color |
The color of a small element within a header. |
zui-header-small-font-size |
font-size |
The font-size of a small element within a header. |
zui-horizontal-line-background |
color |
The background of the horizontal line. Usually just the color. |
zui-horizontal-line-border |
size |
The border of the horizontal line. Usually just the size. |
zui-horizontal-line-height |
size |
The height of the horizontal line. |
zui-horizontal-line-margin |
size |
The margin of the horizontal line. |
zui-horizontal-line-selector |
string |
The selector that matches a horizontal line. |
zui-image-round-border-radius |
size |
The size of the border radius. |
zui-image-round-selector |
string |
The selector for round images. |
zui-list-margin |
margin |
The margin of lists |
zui-namespace |
string |
The namespace that is used for data attributes. Set to false to have no namespace. |
zui-note-background |
color |
The background color of a note. |
zui-note-border |
border |
The border of a note. |
zui-note-border-radius |
size |
The border radius of a note. |
zui-note-max-width |
size |
The maximum width of a note. |
zui-note-padding |
size |
The padding used within a note. |
zui-pagination-anchor-margin |
rectangle |
The margin of the anchors in the pagination box. |
zui-pagination-margin |
rectangle |
The margin of the pagination box. |
zui-progress-bar-selector |
string |
The selector for the progress bar. |
zui-progress-bar-selector-value |
string |
The selector for the progress bar value element. |
zui-rem-base |
size |
The base value used to calculate the rem value from. |
zui-status-blue-filled-background |
color |
The background color of a blue filled status. |
zui-status-blue-filled-border |
color |
The border of a blue filled status. |
zui-status-blue-filled-color |
color |
The color of a blue filled status. |
zui-status-blue-subtle-background |
color |
The background color of a blue subtle status. |
zui-status-blue-subtle-border |
color |
The border of a blue subtle status. |
zui-status-blue-subtle-color |
color |
The color of a blue subtle status. |
zui-status-brown-filled-background |
color |
The background color of a brown filled status. |
zui-status-brown-filled-border |
color |
The border of a brown filled status. |
zui-status-brown-filled-color |
color |
The color of a brown filled status. |
zui-status-brown-subtle-background |
color |
The background color of a brown subtle status. |
zui-status-brown-subtle-border |
color |
The border of a brown subtle status. |
zui-status-brown-subtle-color |
color |
The color of a brown subtle status. |
zui-status-default-filled-background |
color |
The background color of a filled status. |
zui-status-default-filled-border |
color |
The border of a filled status. |
zui-status-default-filled-color |
color |
The color of a filled status. |
zui-status-default-subtle-background |
color |
The background color of a subtle status. |
zui-status-default-subtle-border |
color |
The border of a subtle status. |
zui-status-default-subtle-color |
color |
The color of a subtle status. |
zui-status-green-filled-background |
color |
The background color of a green filled status. |
zui-status-green-filled-border |
color |
The border of a green filled status. |
zui-status-green-filled-color |
color |
The color of a green filled status. |
zui-status-green-subtle-background |
color |
The background color of a green subtle status. |
zui-status-green-subtle-border |
color |
The border of a green subtle status. |
zui-status-green-subtle-color |
color |
The color of a green subtle status. |
zui-status-red-filled-background |
color |
The background color of a red filled status. |
zui-status-red-filled-border |
color |
The border of a red filled status. |
zui-status-red-filled-color |
color |
The color of a red filled status. |
zui-status-red-subtle-background |
color |
The background color of a red subtle status. |
zui-status-red-subtle-border |
color |
The border of a red subtle status. |
zui-status-red-subtle-color |
color |
The color of a red subtle status. |
zui-status-yellow-filled-background |
color |
The background color of a yellow filled status. |
zui-status-yellow-filled-border |
color |
The border of a yellow filled status. |
zui-status-yellow-filled-color |
color |
The color of a yellow filled status. |
zui-status-yellow-subtle-background |
color |
The background color of a yellow subtle status. |
zui-status-yellow-subtle-border |
color |
The border of a yellow subtle status. |
zui-status-yellow-subtle-color |
color |
The color of a yellow subtle status. |
zui-subheader-h1-color |
color |
The subheader color of an h1-element. |
zui-subheader-h1-font-size |
color |
The font-size of an h1 subheader element. |
zui-subheader-h2-color |
color |
The subheader color of an h2-element. |
zui-subheader-h2-font-size |
color |
The font-size of an h2 subheader element. |
zui-subheader-h3-color |
color |
The subheader color of an h3-element. |
zui-subheader-h3-font-size |
color |
The font-size of an h3 subheader element. |
zui-subheader-h4-color |
color |
The subheader color of an h4-element. |
zui-subheader-h4-font-size |
color |
The font-size of an h4 subheader element. |
zui-subheader-h5-color |
color |
The subheader color of an h5-element. |
zui-subheader-h5-font-size |
color |
The font-size of an h5 subheader element. |
zui-subheader-h6-color |
color |
The subheader color of an h6-element. |
zui-subheader-h6-font-size |
color |
The font-size of an h6 subheader element. |
zui-top-bar-background |
color |
The background color of the top-bar. |
zui-top-bar-border-bottom |
border |
The bottom border of the top-bar. |
zui-top-bar-color |
color |
The textual color of the top-bar. |
zui-top-bar-link-background |
color |
The background color of links. |
