formir/src/less/setup/classes.less

Pure CSS / HTML Framework

// Formir variables:

// Buttons
@button: button;
@buttons: buttons;
@button-focus: focus;
@button-active: active;
@button-hover: hover;
@button-disabled: disabled;
@button-circle: circle;
@button-inverse: inverse;
@button-as-link: as-link;
@button-inactive: inactive;
@button-ellipsis: ellipsis;
@button-block: block;
@button-border-contrast: border-contrast;
@button-transparent: transparent;

@button-group: button-group;
@button-group-horizontal: button-group-horizontal;
@button-reverse: reverse;
@button-gradient: gradient;

// Helpers
//// Visible
@display-none: display-none;
@hide: hide;
@display-block: display-block;
@show: show;
@display-inline-block: display-inline-block;
@display-inline: display-inline;
@display-table: display-table;
@display-table-cell: display-table-cell;
@display-flex: display-flex;
@display-inline-flex: display-inline-flex;
@hidden: hidden;
@visible: visible;
@text-hide: text-hide;
@none-events: none-events;

@print-hide: print-hide;
@print-show: print-show;
@not-screen-hide: not-screenhide;
@not-screen-show: not-screenshow;
@braille-hide: braille-hide;
@braille-show: braille-show;
@speech-hide: speech-hide;
@speech-show: speech-show;
@tv-hide: tv-hide;
@tv-show: tv-show;

@right: right;
@left: left;
@size: size;

//// Dimensions

@width: width;
@height: height;

@width-geo: width-geo;
@height-geo: height-geo;

@margin: margin;
@margin-top: margin-top;
@margin-bottom: margin-bottom;
@margin-left: margin-left;
@margin-right: margin-right;
@margin-horizontal: margin-horizontal;
@margin-vertical: margin-vertical;

@padding: padding;
@padding-top: padding-top;
@padding-bottom: padding-bottom;
@padding-left: padding-left;
@padding-right: padding-right;
@padding-horizontal: padding-horizontal;
@padding-vertical: padding-vertical;

@active: active;
@disabled: disabled;
@opacity: opacity;

//// Align
@text-center: text-center;
@text-right: text-right;
@text-left: text-left;
@text-justify: text-justify;

@float-right: float-right;
@float-left: float-left;

@horizontal-center: horizontal-center;

//// Toggle
@toggle: toggle;
@toggle-label: toggle-label;
@toggle-show: toggle-show;
@toggle-block: toggle-block;
@toggle-show: toggle-show;
@toggle-flex: toggle-flex;
@toggle-inline: toggle-inline;
@toggle-inline-block: toggle-inline-block;
@toggle-none: toggle-none;
@toggle-hide: toggle-hide;

@mobile-toggle: mobile-toggle;
@mobile-toggle-label: mobile-toggle-label;
@mobile-toggle-hide: mobile-toggle-hide;
@mobile-toggle-show: mobile-toggle-show;

// Responsive dimension
@m: m;
@mp: mp;
@t: t;
@tp: tp;
@d: d;

@under: under;

// Grid system
@grid: grid;
@cell: cell;

@row: row;
@column: column; // set cell as column
@column-force: column-force; // force set all child cell as column
@column-wrap: column-wrap; // set row and cell as column - stay width

@reverse: reverse; // reverse order
@release: release;
@keep-flex: keep-flex;

@gutter: gutter; // horizontal space between cell
@gutter-margin: gutter-margin;
@space: space; // vertical space between cell
@space-margin: space-margin;

@start-before: start-before;
@end-before: end-before;

@nowrap: nowrap; //prevent wrapping cell
@floating: floating; //set grid as float not flexbox

@justify-center: justify-center;
@justify-around: justify-around;
@justify-between: justify-between;
@justify-start: justify-start;
@justify-end: justify-end;

@vertical-center: vertical-center;
@vertical-start: vertical-start;
@vertical-end: vertical-end;

@vertical-items-center: vertical-items-center;
@vertical-items-stretch: vertical-items-stretch;
@vertical-items-start: vertical-items-start;
@vertical-items-end: vertical-items-end;


@offset: offset; //set offset on left from cell
@offset-left: offset-left; //set offset on left from cell
@offset-right: offset-right; //set offset on right from cell

//// Items
@items: items;

@items-center: items-center;
@items-stretch: items-stretch;
@items-start: items-start;
@items-end: items-end;


// Chart
@chart: chart;
@chart-value: value;
@chart-ring: ring;
@chart-control: chart-control;
@chart-value-colored: value-colored;

// Dropdown

@dropdown: dropdown;
@dropdown-content: dropdown-content;
@dropdown-focusable: focusable;
@dropdown-top: top;
@dropdown-left: left;
@dropdown-right: right;

// Forms:
@form: form;
@label: label;
@control: control;
@control-group: control-group; // in grid use cell classes
@hint: hint;
@fieldset: fieldset; // tag or class
@legend: legend; // class only

@grid-form: grid-form;

@form-validate: validate;
@form-input-touched: touched;

@input: input;
@inputs: inputs;
@input-inverse: inverse;
@input-transparent: transparent;
@input-hover: hover;
@input-focus: focus;

@input-valid: valid;
@input-invalid: invalid;

///// Addon
@addon-position: after;
@addon-left: left-addon;
@icon-left: left-icon;

///// Select
@select: select;
@select-content: select-content;
@select-hide-selected: hide-selected;
@select-hoverable: hoverable;
@select-placeholder: placeholder;
@select-active: active;
@select-disabled: disabled;
@select-readonly: readonly;
@select-count-selected: count-selected;
@select-all: select-all;

@select-arrow: select-arrow;

// Table
@table: table;
@inline-table: inline-table;
@tbody: tbody;
@thead: thead;
@tfoot: tfoot;
@th: th;
@tr: tr;
@td: td;
@col: col;
@colgroup: colgroup;

@table-scroll: table-scroll;
@table-mobile: table-mobile;
@table-fixed: table-fixed;
@table-ellipsis: table-ellipsis;
@table-td-ellipsis: td-ellipsis;
@table-header-sticky: header-sticky;
@table-body-sticky: body-sticky;
@table-footer-sticky: footer-sticky;
@table-borders-horizontal: borders-horizontal;
@table-borders-vertical: borders-vertical;
@table-borders: borders;
@table-borders-outside: borders-outside;
@table-hoverable-td: hoverable-td;
@table-hoverable-tr: hoverable-tr;
@table-hoverable-col: hoverable-col;
@table-zebra-odd: zebra-odd;
@table-zebra-even: zebra-even;
@table-on-hover: on-hover;
@table-un-hover: un-hover;
@table-number: number;
@table-bold: bold;
@actions: actions;
@expandable: expandable;
@expandable-toggler: expandable-toggler;
@expandable-trigger: expandable-trigger;
@toggle-show: toggle-show;
@toggle-hide: toggle-hide;

@flex: flex;

// Window
@window: window;
@window-content: window-content;
@window-header: window-header;
@window-footer: window-footer;

// Modal
@modal: modal;
@modal-wrapper: modal-wrapper;
@modal-window: modal-window;
@modal-footer: modal-footer;
@modal-header: modal-header;
@modal-content: modal-content;
@modal-close: modal-close;
@modal-backdrop: modal-backdrop;
@modal-animated: animated;
@modal-open: modal-open;
@modal-opened: modal-opened;
@modal-centered: centered;

@modal-window-s: modal-window-s;
@modal-window-l: modal-window-l;
@modal-window-xl: modal-window-xl;
@modal-window-fullscreen: modal-window-fullscreen;

// Tabs
@tabs: tabs;
@tab: tab;
@tab-navs: tab-navs;
@tab-pages: tab-pages;
@tab-navs: tab-navs;
@tab-labels: tab-labels;
@tab-addons: tab-addons;


// Accordion
@accordions: accordions;
@accordion: accordion;
@accordion-label: label;
@accordion-content: content;
@accordion-collapsible: accordion-collapsible;
@accordion-label-hide: label-hide;
@accordion-horizontal: horizontal;
@accordion-focusable: focusable;
@accordion-animated: animated;
@accordion-hoverable: hoverable;
@accordion-arrow: arrow;

// Tooltip
@tooltip: tooltip;
@has-tooltip: has-tooltip;
@tooltip-bottom: bottom;
@tooltip-bottom-right: bottom-right;
@tooltip-bottom-center: bottom-center;
@tooltip-top: top;
@tooltip-top-right: right;
@tooltip-center: center;
@tooltip-right: right;
@tooltip-right-middle: right-middle;
@tooltip-left-middle: left-middle;
@tooltip-right-top: right-top;
@tooltip-right-bottom: right-bottom;
@tooltip-left-top: left-top;
@tooltip-left-bottom: left-bottom;
@tooltip-hoverable: hoverable; // tooltip not hide when try hover on it (arrow will be not work with data-tooltip)
@tooltip-hovered: hovered; // simulate :hover state to active tooltip manually
@tooltip-absolute: absolute;
@tooltip-fixed: fixed;

// Popup
@popup: popup;
@has-popup: has-popup;
@popup-with-menu: with-menu;
@popup-bottom: bottom;
@popup-bottom-right: bottom-right;
@popup-bottom-center: bottom-center;
@popup-top: top;
@popup-top-right: right;
@popup-center: center;
@popup-right: right;
@popup-right-middle: right-middle;
@popup-left-middle: left-middle;
@popup-right-top: right-top;
@popup-right-bottom: right-bottom;
@popup-left-top: left-top;
@popup-left-bottom: left-bottom;
@popup-hoverable: hoverable;
@popup-active: active;
@popup-absolute: absolute;
@popup-fixed: fixed;
@popup-manual: manual;
@popup-header: popup-header;
@popup-footer: popup-footer;
@popup-content: popup-content;

// Side
@side: .side; // tag 'aside' or class or both
@side-top: top;
@side-bottom: bottom;
@side-left: left;
@side-right: right;
@side-collapse: side-collapse; // sidebar will be collapsed - set expand on ready (unchecked)
@side-expand: side-expand; // sidebar will be expand - set collapse on ready (unchecked)
@side-hide: side-hide; // sidebar will be hide - set expand on ready (unchecked)
@side-hide-expand: side-hide-expand; // sidebar will be expand - set hide on ready (unchecked)
@side-backdrop: side-backdrop;
@side-close: side-close;
@side-open: side-open; // element for open sidebar (label) when is collapse and not visible;
@side-animated: animated;
@side-hoverable: hoverable;
@side-hover-backdrop: hover-backdrop;
@side-focusable: focusable;
@side-focus-backdrop: focus-backdrop;
@side-cover: cover;
@side-uncover-hover: uncover-hover;
@side-uncover-focus: uncover-focus;
@side-overflow: overflow;
@side-absolute: absolute;
@side-relative: relative;
@side-static: static;
@side-float: float;
@side-full-height: side-full-height;
@side-expanded-hide: expanded-hide;
@side-expanded-show: expanded-show;
@side-collapsed-hide: collapsed-hide;
@side-collapsed-show: collapsed-show;

// Layout
@content-holder: content-holder;
@body-content: body-content;

@center-vertically: center-vertically;
@horizontally: horizontally;

//// Header
@header: .header; // tag 'header' or class or both
@header-content: header-content;
@header-fixed: fixed;

//// Footer
@footer: footer; // tag 'header' or class or both

// Description list
@dd: dd; // tag 'dd' or class or both
@dt: dt; // tag 'dt' or class or both
@dl: dl; // tag 'dl' or class or both

@dl-horizontally: horizontally;
@dl-horizontally-collapse: collapse;
@dl-title-colon: title-colon;
@dl-size: size;
@dl-space: space;

// Menu
@menu: .menu; // tag or class and tag
@menu-horizontal: horizontal;
@menu-wrap: wrap;
@menu-auto-width: auto-width;
@menu-inside: menu-inside;
@menu-item: .item; // tag or class and tag
@menu-item-anchor: .anchor; // tag 'a' or class and tag
@menu-inside-absolute: menu-absolute;
@menu-inside-fixed: menu-fixed;

@menu-mobile: menu-mobile;

// Icons
@icon: icon;
@icon-position: before; // before or after


// Typography
//// Heading
@h1: h1;
@h2: h2;
@h3: h3;
@h4: h4;
@h5: h5;
@h6: h6;
@h1-class: @h1;
@h2-class: @h2;
@h3-class: @h3;
@h4-class: @h4;
@h5-class: @h5;
@h6-class: @h6;
@h-actions: actions; // class of actions in heading
@h-mute: small; // class or tag alternative text

// Link
@link: .link; // tag or class and tag

//// Colors
@background-color: background;
@background-color-hoverable: hoverable;
@text-color: text;
@border-color: border;

//// List
@ul: ul;
@ol: ol;
@li: li;
@list-clear: clear;

//// Article
@article: article;
@article-p: p;

// Section
@section: section; // tag or class and tag
@section-full-height: full-height;

@section-header: section-header;
@section-footer: section-footer;
@section-content: section-content;
@section-expandable: section-expandable;
@with-padding: with-padding;
@with-table: with-table;
@with-tabs: with-tabs;
@with-border: with-border;
@overflow-hidden: overflow-hidden;
@overflow-auto: overflow-auto;
@overflow-scroll: overflow-scroll;


// Alerts
@alerts: alerts;
@alert: alert;
@alert-light: light;
@alert-trigger: alert-trigger;