Input Control

The input_control module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Home
Customization
Input Control

Quick overview

The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The input_control module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.

Quick start

To customize the input_control module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).

Forms & input

The input_control module's forms and input fields can be easily customized to use different sizes and colors, as well as different class names for groupping.

Variable	Type	Description	Sample value
$form-back-color	Color	Background color for `<form>` elements	#eeeeee
$form-fore-color	Color	Text color for `<form>` elements	$fore-color
$form-border-style	Border	Border style for `<form>` elements	1px solid #bdbdbd
$form-border-radius	Border radius	Border radius for `<form>` elements	2px
$form-margin	Margin	Margin for `<form>` elements	8px
$form-padding	Padding	Padding for `<form>` elements	12px
$form-box-shadow	Box shadow	Box shadow for `<form>` elements	0 1px 3px rgba(0,0,0, 0.1)
$fieldset-back-color	Color	Background color for `<fieldset>` elements	$form-back-color
$fieldset-border-style	Border	Border style for `<fieldset>` elements	1px solid #bdbdbd
$fieldset-border-radius	Border radius	Border radius for `<fieldset>` elements	2px
$fieldset-margin	Margin	Margin for `<fieldset>` elements	2px
$fieldset-padding	Padding	Padding for `<fieldset>` elements	8px
$legend-fore-color	Color	Text color for `<legend>` elements	$form-fore-color
$legend-font-size	Font size	Font size for `<legend>` elements	0.925em
$legend-font-weight	Font weight	Font weight for `<legend>` elements	700
$legend-padding	Padding	Padding for `<legend>` elements	2px 4px
$label-padding	Padding	Padding for `<label>` elements	4px
$input-back-color	Color	Background color for `<input>` elements	#fafafa
$input-fore-color	Color	Text color for `<input>` elements	$fore-color
$input-border-style	Border	Border style for `<input>` elements	1px solid #bdbdbd
$input-border-radius	Border radius	Border radius for `<input>` elements	1px
$input-margin	Margin	Margin for `<input>` elements	2px
$input-padding	Padding	Padding for `<input>` elements	8px 12px
$input-focus-border-color	Color	Border color for `<input>` elements (focused)	#0288d1
$input-invalid-border-color	Color	Border color for `<input>` elements (invalid)	#d32f2f
$input-readonly-border-color	Color	Border color for `<input>` elements (readonly)	#bdbdbd
$input-readonly-back-color	Color	Background color for `<input>` elements (readonly)	#e0e0e0
$input-placeholder-fore-color	Color	Text color for placeholder text of `<input>` elements	#616161
$input-disabled-opacity	Opacity	Opacity of `<input>` elements (disabled)	0.75
$input-group-name	String	Class name for input groups	'input-group'
$include-fluid-input-group	Logical	Enables fluid input groups¹	true
$input-group-fluid-name	String	Class name for fluid input groups¹	'fluid'
$input-group-mobile-breakpoint	Breakpoint	Breakpoint for fluid input groups on mobile devices¹	767px
$hide-file-inputs	Logical	Hides all `<input type="file">` elements, allowing access only via the use of labels	true

Notes:

The values of $input-group-fluid-name and $input-group-mobile-breakpoint will only be used if $include-fluid-input-group is set to true.

Checkboxes & radio buttons

The navigation module's checkbox and radio button elements are based on custom rules and depend on the use of <label> elements and input groups to be stylized and properly displayed.

Variable	Type	Description	Sample value
$checkbox-size	Size (single value, `px` preferred)	The size of checkbox/radio elements (determines multiple values of the elements)	16px
$checkbox-back-color	Color	Background color for checkbox/radio elements	$input-back-color
$checkbox-fore-color	Color	Text color for checkbox/radio elements	$input-fore-color
$checkbox-border-thickness	Border width	Border width for checkbox/radio elements	1px
$checkbox-border-color	Color	Border color for checkbox/radio elements	#bdbdbd
$checkbox-border-radius	Border radius	Border radius for checkbox/radio elements	2px
$checkbox-focus-border-color	Color	Border color for checkbox/radio elements (focused)	#0288d1
$checkbox-bottom-spacing	Position bottom (`px` preferred)	Position bottom spacing for checkbox/radio elements	6px
$checkbox-disabled-opacity	Opacity	Opacity for checkbox/radio elements (disabled)	0.75

Notes:

It is highly recommended to stick to one unit type for the definitions of checkbox/radio elements (our suggestion is px).

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.