/* Primary Colors */
/* Secondary Colors */
/* Derivative Colors */
form.aui {
margin: 20px 0 0 0;
position: relative;
}
form.aui:first-child {
margin-top: 0;
}
/* Field styles */
form.aui .text,
form.aui .password,
form.aui .upfile,
form.aui .textarea,
form.aui .select,
form.aui .multi-select,
form.aui .aui-select2-container {
color: #333333;
font-family: inherit;
font-size: 14px;
}
form.aui .text,
form.aui .password,
form.aui .textarea,
form.aui .select,
form.aui .multi-select,
form.aui .aui-select2-container .select2-choices {
border: 1px solid #cccccc;
border-radius: 3.01px;
box-shadow: inset 0 1px 3px #cccccc;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: inherit;
margin: 0;
max-width: 250px;
vertical-align: baseline;
width: 100%;
}
form.aui .text,
form.aui .password,
form.aui .select,
form.aui .aui-select2-container .select2-choices {
height: 2.1428571428571em;
/* 30px - using ems so the fields increase in line with user specified font-sizes */
line-height: 1.4285714285714;
/* Required for IE8. Causes misaligned placeholder text in Safari 5 - fixed in Safari 6 though */
padding: 4px 5px;
}
form.aui .select {
padding: 6px 5px 5px 5px;
/* Firefox doesn't allow line-height to be adjusted and selects break horribly when the font-family is changed. Using padding instead */
}
form.aui .textarea,
form.aui .select[size],
form.aui .multi-select {
height: auto;
line-height: 1.4285714285714;
margin: 0;
padding: 4px 5px;
}
form.aui .textarea {
overflow-y: auto;
}
/* Ensure AUI Select2's do not show as regular text fields */
form.aui .aui-select2-container {
border: 0;
box-shadow: none;
height: auto;
max-width: 250px;
padding: 0 !important;
/* !important because padding is applied to `form.aui .select` in forms-ie.css */
vertical-align: baseline;
width: 100%;
}
form.aui .aui-select2-container .select2-choices {
height: auto;
max-width: none;
}
/* Do not give file inputs a height or width because they break horribly in certain browsers. */
form.aui .upfile {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
margin: 5px 0;
padding: 0;
}
form.aui optgroup {
background-color: #f5f5f5;
color: #707070;
font-style: normal;
font-weight: normal;
}
form.aui option,
form.aui optgroup option {
background-color: #ffffff;
color: #333333;
}
/* Disabled form element styles */
form.aui .text[disabled],
form.aui .password[disabled],
form.aui .textarea[disabled],
form.aui .select[disabled],
form.aui .multi-select[disabled],
form.aui .select[disabled] option,
form.aui .select[disabled] optgroup,
form.aui .multi-select[disabled] option,
form.aui .multi-select[disabled] optgroup {
background-color: #f5f5f5;
color: #999999;
}
form.aui .text[disabled],
form.aui .password[disabled],
form.aui .textarea[disabled],
form.aui .select[disabled],
form.aui .multi-select[disabled] {
box-shadow: none;
color: #999999;
}
form.aui .text[disabled],
form.aui .password[disabled],
form.aui .textarea[disabled],
form.aui .select[disabled],
form.aui .multi-select[disabled],
form.aui .radio[disabled],
form.aui .checkbox[disabled] {
cursor: not-allowed;
}
/* Placeholder styling
* - You have to use two rules, because user agents are required to ignore a rule with an unknown selector.
* Since WebKit doesn’t know the proprietary Mozilla selector and vice versa, you have to include them separately.
* See http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css#answer-2610741
*/
form.aui .text::-webkit-input-placeholder,
form.aui .password::-webkit-input-placeholder,
form.aui .textarea::-webkit-input-placeholder {
color: #707070;
}
form.aui .text::-moz-placeholder,
form.aui .password::-moz-placeholder,
form.aui .textarea::-moz-placeholder {
color: #707070;
opacity: 1;
}
/* Field widths
* - don't add widths to file inputs - they break horribly
*/
form.aui .short-field {
max-width: 75px;
}
form.aui .medium-field {
max-width: 165px;
}
form.aui .long-field {
max-width: 500px;
}
form.aui .full-width-field {
max-width: none;
}
/* Structural elements */
form.aui fieldset {
border: 0;
clear: both;
display: block;
margin: 0;
padding: 0;
position: relative;
}
form.aui legend,
form.aui label {
color: #707070;
}
form.aui .icon-required {
left: 100%;
position: absolute;
top: 5px;
}
form.aui div.description {
color: #707070;
font-size: 12px;
line-height: 1.66666666666667;
margin: 5px 0 0 0;
}
form.aui div.description:first-child {
margin-top: 0;
}
form.aui .field-value {
display: inline-block;
font-weight: bold;
padding-top: 5px;
}
/* TODO: don't support this in AUI Forms 2 */
form.aui legend {
display: none;
}
form.aui .field-group,
form.aui .group,
form.aui .date-select {
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
padding: 4px 0 4px 145px;
position: relative;
margin: 1px 0;
width: 100%;
}
form.aui .group {
padding-top: 0;
}
form.aui .field-group:before,
form.aui .field-group:after,
form.aui .group:before,
form.aui .group:after,
form.aui .date-select:before,
form.aui .date-select:after {
content: " ";
display: table;
}
form.aui .field-group:after,
form.aui .group:after,
form.aui .date-select:after {
clear: both;
}
form.aui legend,
form.aui .field-group > label {
float: left;
margin-left: -145px;
padding: 5px 0 0 0;
position: relative;
text-align: right;
width: 130px;
word-wrap: break-word;
}
form.aui .checkbox > label,
form.aui .radio > label {
color: #333333;
}
form.aui div.checkbox > .checkbox[disabled] + label,
form.aui div.radio > .radio[disabled] + label {
color: #999999;
cursor: not-allowed;
}
form.aui .field-group .error,
form.aui .group .error,
form.aui .checkbox .error,
form.aui .radio .error {
clear: both;
color: #d04437;
display: block;
margin: 5px 0 0 0;
}
form.aui .field-group .error:first-child,
form.aui .checkbox .error:first-child,
form.aui .radio .error:first-child {
margin-top: 0;
}
form.aui .group legend,
form.aui .date-select legend {
display: block;
}
form.aui .group .field-group,
form.aui .date-select .field-group {
clear: none;
padding-left: 0;
padding-top: 0;
}
form.aui .date-select .field-group label {
display: none;
}
form.aui div.checkbox,
form.aui div.radio {
margin: 5px 0 0 0;
padding: 0 0 0 20px;
position: relative;
}
form.aui legend + .field-group,
form.aui legend + .checkbox,
form.aui legend + .radio {
margin-top: 0;
padding-top: 5px;
}
form.aui div.checkbox:first-child,
form.aui div.radio:first-child {
margin-top: 0;
}
form.aui .matrix {
padding-top: 5px;
}
form.aui div.radio input.radio,
form.aui div.checkbox input.checkbox {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
height: 1.4285714285714em;
left: 0;
margin: 0;
padding: 2px;
position: absolute;
vertical-align: baseline;
}
/* Buttons */
form.aui .buttons-container {
-moz-box-sizing: border-box;
box-sizing: border-box;
clear: both;
margin: 1px 0 0 0;
padding: 4px 0 4px 145px;
position: relative;
width: 100%;
}
/* Long Labels
* add long-label class to form eg: