1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 20:07:40 +02:00
2
Forms
Angelos Chalaris edited this page 2016-08-24 11:17:27 +03:00

The form styling provided allows you to easily style forms to your liking. Most elements inside a form will be styled using the values provided, however some inputs (ones that look and behave like buttons, checkboxes and radios) might not be styled the same way. This is intentional and can be resolved using the provided button styles and mixins to complement the form styles.

To customize your form styling, use the mixin provided in the _form.scss partial file.

##Definition

make-frm(
	$frm-name, 
	$frm-border, 
	$frm-border-radius, 
	$frm-margin, 
	$frm-padding, 
	$frm-focus-color, 
	$frm-invalid-color, 
	$frm-disabled-cursor, 
	$frm-disabled-opacity,
	$frm-readonly-bg-color, 
	$frm-readonly-border-color,
	$frm-select-height, 
	$frm-label-margin, 
	$frm-ctrl-group-name,
	$frm-ctrl-group-margin, 
	$frm-inline-name, 
	$frm-aligned-name, 
	$frm-aligned-label-width)

##Parameters

  • $frm-name : The class name of the form.
  • $frm-border : The border of the form elements.
  • $frm-border-radius : The border-radius of the form elements.
  • $frm-margin : The margin of the form elements.
  • $frm-padding : The padding of the form elements.
  • $frm-focus-color : The color used to mark the focused form element.
  • $frm-invalid-color : The color used to mark an invalid form element.
  • $frm-disabled-cursor : The cursor style when hovering over disabled form elements.
  • $frm-disabled-opacity : The opacity of the form elements when disabled.
  • $frm-readonly-bg-color : The background color of the form elements when they are readonly.
  • $frm-readonly-border-color : The border color of the form elements when they are readonly.
  • $frm-select-height : The height for non-multiline select elements in the form.
  • $frm-label-margin : The margin for the form's label elements.
  • $frm-ctrl-group-name : The class name of the control groups in the form.
  • $frm-ctl-group-margin : The margin for control groups inside the form.
  • $frm-inline-name : The class name for forms with inline style.
  • $frm-aligned-name : The class name for forms with aligned style.
  • $frm-aligned-label-width : The width of labels in forms with aligned style.

Notes:

  • [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling. Please use the button styles and mixins provided to properly style them to your liking.

##Remarks

  • The default form styling is stacked. To change this styling, additional classes are provided for inline and aligned styles.
  • Parts of the form styling can be stripped manually, like the extra styles for inline and aligned, or the control groups system.
  • The form styling mixin can be tweaked to apply to all forms by default. This can be done by modifying the SCSS file to apply to all form elements instead of elements with the specified class.