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.
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 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 |
| $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-nameand$input-group-mobile-breakpointwill only be used if$include-fluid-input-groupis set totrue.
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.
| 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).
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.
| 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 | 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. |
| 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);
| 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);
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.