# 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.

## 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.

Variables
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
$select-padding-right | Padding right | Right padding of `<select>` elements | 20px
$input-group-name | String | Class name for input groups | 'input-group'
$include-fluid-input-group | Logical | Enables fluid input groups1 | true
$input-group-fluid-name | String | Class name for fluid input groups1 | 'fluid'
$input-group-mobile-breakpoint | Breakpoint | Breakpoint for fluid input groups on mobile devices1 | 767px
$include-vertical-input-group | Logical | Enables vertical input groups1 | true
$input-group-vertical-name | String | Class name for vertical input groups1 | 'fluid'
$hide-file-inputs | Logical | Hides all `<input type="file">` elements, allowing access only via the use of labels | true

### Notes:

1. 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`.
2. The value of `$input-group-vertical-name` will only be used if `$include-vertical-input-group` is set to `true`.

## Checkboxes & radio buttons

The input_control 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.

Variables
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
$checkbox-box-shadow | Box shadow | Box shadow for checkbox/radio elements | 0 1px 3px rgba(0,0,0, 0.1)

### Notes:

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

## Switches

The input_control module contains custom classes and styles for defining switch components.

Variables
Variable | Type | Description | Sample value
--- | --- | --- | ---
$include-switch | Logical | Enables switch components1 | true
$switch-name | String | Class name for switch components1 | 'switch'
$switch-bar-back-color | Color | Background color for the bar of switch components1 | #bdbdbd
$switch-on-bar-back-color | Color | Background color for the bar of switch components (when turned on)1 | #bdbdbd
$switch-bar-width | Width | Text color for the bar of switch components1 | 28px
$switch-bar-height | Height | Text color for the bar of switch components1 | 14px
$switch-bar-border-style | Border | Border style for the bar of switch components1 | 1px solid #212121
$switch-bar-border-radius | Border radius | Border radius for the bar of switch components1 | 2px
$switch-bar-box-shadow | Box shadow | Box shadow for the bar of switch components1 | 0 1px 3px rgba(0,0,0, 0.1)
$switch-bottom-spacing | Position bottom (`px` preferred) | Position bottom spacing for switch components1 | 8px
$switch-knob-back-color | Color | Background color for the knob of switch components1 | #e0e0e0
$switch-on-knob-back-color | Color | Background color for the knob of switch components (when turned on)1 | #0277bd
$switch-knob-width | Width | Text color for the knob of switch components1 | 20px
$switch-knob-height | Height | Text color for the knob of switch components1 | 20px
$switch-knob-border-style | Border | Border style for the knob of switch components1 | 1px solid #212121
$switch-knob-border-radius | Border radius | Border radius for the knob of switch components1 | 100%
$switch-knob-box-shadow | Box shadow | Box shadow for the knob of switch components1 | 0 1px 3px rgba(0,0,0, 0.1)

### Notes:

1. The values used in the switch components will only be used if `$include-switch` is set to `true`.

## Button & button groups

The input_control module's button elements are highly customizable, along with the button groups that can be used in combination with them.

Variables
Variable | Type | Description | Sample value
--- | --- | --- | ---
$button-back-color | Color | Background color for button elements | #bdbdbd
$button-fore-color | Color | Text color for button elements | $fore-color
$button-border-style | Border | Border style for button elements | 1px solid #9e9e9e
$button-border-radius | Border radius | Border radius for button elements | 2px
$button-margin | Margin | Margin for button elements | 8px
$button-padding | Padding | Padding for button elements | 8px 12px
$button-box-shadow | Box shadow | Box shadow for button elements | 0 1px 3px rgba(0,0,0, 0.1)
$button-back-opacity | Opacity | Background opacity for button elements (default) | 0.65
$button-hover-back-opacity | Opacity | Background opacity for button elements (focused) | 0.8
$button-disabled-opacity | Opacity | Opacity for button elements (focused) | 0.65
$button-class-name | String | Class name for button elements | 'button'
$button-group-name | String | Class name for button groups | 'button-group'
$button-group-border-style | Border | Border style for button groups | 1px solid #9e9e9e
$button-group-margin | Margin | Margin for button groups | 8px
$button-group-box-shadow | Box shadow | Box shadow for button groups | 0 1px 3px rgba(0,0,0, 0.1)
$button-group-mobile-breakpoint | Breakpoint | Breakpoint for button groups on mobile devices | 767px

## Button mixins

The input_control module contains a couple of mixins for adding custom styles to button elements (color and style variants).

Mixin definitions
Mixin | Description
--- | ---
make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity, $button-alt-hover-back-opacity, $button-alt-fore-color) | Creates a new button color variant using the specified values.
make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius, $button-alt-padding, $button-alt-margin) | Creates a new button style variant using the specified values.

make-button-alt-color
Parameter | Type | Description | Sample value
--- | --- | --- | ---
$button-alt-name | String | Class name for the button color variant | 'primary'
$button-alt-back-color | Color | Background color for the button color variant | #0277bd
$button-alt-back-opacity | Opacity | Background opacity for the button color variant (default) | 0.9
$button-alt-hover-back-opacity | Opacity | Background opacity for the button color variant (focused) | 1
$button-alt-fore-color | Color | (Optional) Text color for the button color variant | #fafafa

### Sample usage

    @include make-button-alt-color ('primary', #0277bd, 0.9, 1, #fafafa);

make-button-alt-style
Parameter | Type | Description | Sample value
--- | --- | --- | ---
$button-alt-name | String | Class name for the button style variant | 'large'
$button-alt-border-style | Border | Border style for the button style variant | 2px solid #9e9e9e
$button-alt-border-radius | Border radius | Border radius for the button style variant | 4px
$button-alt-padding | Padding | Padding for the button style variant | 12px 18px
$button-alt-margin | Margin | Margin for the button style variant | 10px

### Sample usage

    @include make-button-alt-style ('large', 2px solid #9e9e9e, 4px, 18px, 10px);

## Switch mixins

The input_control module contains a mixin for adding custom color variants to switches.

Mixin definition
Mixin | Description
--- | ---
make-switch-alt-color ($switch-alt-name, $switch-alt-on-knob-back-color, $switch-alt-on-bar-back-color, $switch-alt-knob-back-color, $switch-alt-bar-back-color) | Creates a new switch color variant using the specified values.

make-switch-alt-color
Parameter | Type | Description | Sample value
--- | --- | --- | ---
$switch-alt-name | String | Class name for the switch color variant | 'primary'
$switch-alt-on-knob-back-color | Color | Background color for the knob of the switch component (when turned on) | #e53935
$switch-alt-on-bar-back-color | Color | (Optional) Background color for the bar of the switch component (when turned on) | #bdbdbd
$switch-alt-knob-back-color | Color | (Optional) Background color for the knob of the switch component | #e0e0e0
$switch-alt-bar-back-color | Color | (Optional) Background color for the bar of the switch component | #bdbdbd

### Sample usage

    @include make-switch-alt-color ('secondary', #e53935, #bdbdbd, #e0e0e0, #bdbdbd);

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.