42 lines
1.8 KiB
SCSS
42 lines
1.8 KiB
SCSS
|
// ----------------------------------------------------------------
|
||
|
|
// Form Elements Standardization
|
||
|
|
// ----------------------------------------------------------------
|
||
|
|
// Consistent Margins
|
||
|
|
form{@extend %margin-bottom;}
|
||
|
|
|
||
|
|
// Corrects font-family and size not being inherited in all browsers, inconsistent margins, line-heights and transforms
|
||
|
|
button, input, select, textarea{border:0; font:{family:inherit; size:100%}; line-height:normal; margin:0; text-transform:none}
|
||
|
|
|
||
|
|
// Makes buttons look like buttons with appropriate cursors
|
||
|
|
button, html input[type='button'], input[type='reset'], input[type='submit']{cursor:pointer; -webkit-appearance:button}
|
||
|
|
|
||
|
|
// Makes it look like a normal text input, only with a (x) when text has been entered
|
||
|
|
input[type='search']{-webkit-appearance:textfield}
|
||
|
|
|
||
|
|
// Disabled input styling
|
||
|
|
input[disabled]{background:$c-Light; cursor:not-allowed}
|
||
|
|
|
||
|
|
// Read Only input styling
|
||
|
|
input[readonly]{background:$c-Disabled}
|
||
|
|
|
||
|
|
// Removes extra inner padding for webkit
|
||
|
|
input[type='search']::-webkit-search-decoration{-webkit-appearance:none}
|
||
|
|
|
||
|
|
// Removes inner padding & border in Firefox 4+
|
||
|
|
button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0}
|
||
|
|
|
||
|
|
// Makes sure that overflow shows and text is aligned to top of area
|
||
|
|
textarea{overflow:auto; vertical-align:top; border: 2px solid #DCE4EC;}
|
||
|
|
|
||
|
|
$form-control-selector: 'select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input';
|
||
|
|
|
||
|
|
#{$form-control-selector}{
|
||
|
|
color:#000;
|
||
|
|
height:auto!important;
|
||
|
|
line-height:inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea{margin-bottom:10px}
|
||
|
|
|
||
|
|
input[type=submit]{margin-top:10px}
|