Forms pure css forms elements with validation and helper based on gird
Cases of use
grid #
size large#
size small#
grid and label#
validation#
status#
Setup #
core less/formir/setup/core.less #
@form-states: has-success, has-info, has-error, has-warning;
@form-state-invalid: has-error;
@form-state-valid: has-success;
@form-state-change-label: false;
@form-state-change-text-color: true;
@form-state-change-border: true;
@form-state-change-background: true;
@form-state-change-hint: true;
@form-state-change-tooltip: true;
@form-tooltip-position: right; // left / center / right
@form-tooltip-input-show-on: focus; // focus / not_focus / hover
classes less/formir/setup/classes.less #
@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;
variables less/formir/setup/variables.less #
@input-default-padding-vertical: 0.35rem;
@input-default-padding-horizontal: 0.5rem;
@input-border-style: solid;
@input-default-border-width: 1px;
@input-border-color: #ccc;
@input-default-border-radius: 3px;
@input-background-color: #fff;
@input-default-font-size: 1rem;
@input-default-line-height: 1.35rem;
@input-font-weight: normal;
@input-text-color: #000;
@input-default-outline: none;
@input-default-shadow: none;
@input-s-padding-vertical: @input-default-padding-vertical * @size-s;
@input-s-padding-horizontal: @input-default-padding-horizontal * @size-s;
@input-s-border-width: @input-default-border-width;
@input-s-border-radius: @input-default-border-radius - 1px;
@input-s-font-size: @input-default-font-size * @size-s;
@input-s-line-height: @input-default-line-height * @size-s;
@input-s-outline: @input-default-outline;
@input-s-shadow: @input-default-shadow;
@input-m-padding-vertical: @input-default-padding-vertical * @size-m;
@input-m-padding-horizontal: @input-default-padding-horizontal * @size-m;
@input-m-border-width: @input-default-border-width;
@input-m-border-radius: @input-default-border-radius + 2px;
@input-m-font-size: @input-default-font-size * @size-m;
@input-m-line-height: @input-default-line-height * @size-m;
@input-m-outline: @input-default-outline;
@input-m-shadow: @input-default-shadow;
@input-l-padding-vertical: @input-default-padding-vertical * @size-l;
@input-l-padding-horizontal: @input-default-padding-horizontal * @size-l;
@input-l-border-width: @input-default-border-width;
@input-l-border-radius: @input-default-border-radius + 1px;
@input-l-font-size: @input-default-font-size * @size-l;
@input-l-line-height: @input-default-line-height * @size-l;
@input-l-outline: @input-default-outline;
@input-l-shadow: @input-default-shadow;
@input-hover-border-style: @input-border-style;
@input-hover-border-color: @input-border-color;
@input-hover-outline: none;
@input-hover-shadow: none;
@input-hover-background-color: @input-background-color;
@input-focus-border-style: @input-border-style;
@input-focus-border-color: @input-border-color;
@input-focus-outline: none;
@input-focus-shadow: none;
@input-focus-background-color: @input-background-color;
@label-font-size: 1rem;
@label-line-height: 1.35rem;
@label-font-weight: normal;
@label-text-transform: none;
@label-text-color: #000;
@hint-font-size: 1rem;
@hint-line-height: 1.35rem;
@hint-font-weight: normal;
@hint-text-transform: none;
@hint-text-color: #000;
@input-icon-text-color: @input-text-color;
@input-icon-font-size: 1em;
@input-addon-text-color: @input-text-color;
@input-addon-text-transform: uppercase;
@input-addon-font-size: 0.8em;
@input-addon-font-weight: normal;
@input-lighten: 0%;
@input-background-lighten: 80%;
@input-border-lighten: 0%;
@input-color-has-success: lighten(@color-success, @input-lighten);
@input-color-has-info: lighten(@color-info, @input-lighten);
@input-color-has-warning: lighten(@color-warning, @input-lighten);
@input-color-has-error: lighten(@color-danger, @input-lighten);
@input-background-has-success: lighten(@color-success, @input-background-lighten);
@input-background-has-info: lighten(@color-info, @input-background-lighten);
@input-background-has-warning: lighten(@color-warning, @input-background-lighten);
@input-background-has-error: lighten(@color-danger, @input-background-lighten);
@input-background-contrast-has-success: @input-text-color;
@input-background-contrast-has-info: @input-text-color;
@input-background-contrast-has-warning: @input-text-color;
@input-background-contrast-has-error: @input-text-color;
@input-tooltip-has-success: @color-success;
@input-tooltip-has-info: @color-info;
@input-tooltip-has-warning: @color-warning;
@input-tooltip-has-error: @color-danger;
@input-tooltip-contrast-has-success: @color-success-contrast;
@input-tooltip-contrast-has-info: @color-info-contrast;
@input-tooltip-contrast-has-warning: @color-warning-contrast;
@input-tooltip-contrast-has-error: @color-danger-contrast;
@input-border-has-success: lighten(@color-success, @input-border-lighten);
@input-border-has-info: lighten(@color-info, @input-border-lighten);
@input-border-has-warning: lighten(@color-warning,@input-border-lighten);
@input-border-has-error: lighten(@color-danger, @input-border-lighten);
@select-arrow-icon-down: '\e855';
@select-arrow-icon-up: '\e856';
@select-max-height: 50vh;
