Form mixins

Improves default browser form input, label, select and textarea styles

#form.form-element(options);

Useful to use as a starting point when designing the element styles
Form elements currently supported are label, input, select and textarea
Options may vary depending on the form element

Label

To style a label element use the following mixin. This mixin accepts 3 parameters with the following default values:

1font-size: 1.2rem;
2font-weight: 700;
3color: @color[primary];

#form.label(@size, @weight, @color);
Form Label

To customize adjust the values, for example:

#form.label(18px, 400, @color[secondary]);
Form Label

#form.input(@type);

This library currently includes 4 types of text input styles:

#form.input();

#form.input(rounded);

#form.input(dark);

#form.input(dark-rounded);

Select Element default style:

#form.select();

Select Element style with radius:

#form.select(rounded);

Browser default textarea styles are plain and unatractive. Using the mixin below, you can instatly size it so it's more visible.

#form.textarea();