// // Default Form Elements // —————————————-
label {
display: inline-block;
}
.form-input {
background-color: $input-bgr-color; border: 1px solid $input-border-color; border-radius: $input-border-radius; color: $input-font-color; display: block; font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes line-height: $line-height-regular; // set line height since it was resetted by normalize padding: $input-padding; width: 100%; @include placeholder($input-font-color-placeholder); -webkit-appearance: none; @include transition(all $transition-time-out $transition-function); &.hover, &:hover { // on input fields the cursor indicates focus, so we need no hover on focuesed states background-color: hsv-darken($input-bgr-color, 7%, true); @include transition($transition-time-in, '-duration'); } @include form-control-focus($input-bgr-color); &.active, &:active { background-color: hsv-darken($input-bgr-color, 15%, true); } &.disabled, &.readonly, &[disabled], &[readonly] { background-color: $input-disabled-bgr-color; border-color: $input-disabled-border-color; color: $input-disabled-font-color; cursor: not-allowed; resize: none; @include placeholder($input-disabled-font-color-placeholder); }
}
// firefox fix to prevent textareas < one line textarea.form-input { min-height: $input-min-height; }
.decoration-positive { @include input-decoration-variant($color-positive, $color-positive, $background-color-regular); } .decoration-warning { @include input-decoration-variant($color-warning, $color-warning, $background-color-regular); } .decoration-negative { @include input-decoration-variant($color-negative, $color-negative, $background-color-regular); }
.form-input-set {
display: block; margin-bottom: building-units(1); > label { display: block; font-size: $font-size-small; @include margin-top-bu(1, $font-size-small); @include margin-bottom-bu(.5, $font-size-small); }
}
// default checkbox/radio style .form-radio, .form-checkbox {
width: 24px; height: 24px;
}
.form-radio-set, .form-checkbox-set {
display: block; margin-bottom: 12px; label { display: block; padding-left: 36px; // reset label to left align on small screens = width + margin of radio/checkbox cursor: pointer; line-height: 24px; } &.disabled label { cursor: not-allowed; color: $input-disabled-font-color; }
}
.form-radio-set .form-radio, .form-checkbox-set .form-checkbox {
vertical-align: middle; float: left; margin-left: -36px; // reset label to left align on small screens = width + margin of radio/checkbox margin-right: 12px;
}
.form-fieldset {
border: 0; padding: 0 12px; margin: 0; min-width: 0; > legend { color: $color-gray; display: block; width: 100%; box-sizing: content-box; padding: 0 12px; margin: 0 -12px; padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular); border-bottom: 1px solid #b2b2b2; } > legend + * { -webkit-margin-top-collapse: separate; margin-top: 12px; }
}
// fieldset width fix for ff // @-moz-document url-prefix() { // .form-fieldset { // display: table-cell; // } // }
.form-select {
background-color: #ededed; border: 1px solid $input-border-color; border-radius: $input-border-radius; color: $input-font-color; display: block; font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes line-height: $line-height-regular; // set line height since it was resetted by normalize padding: $input-padding; width: 100%; option { background-color: #fff; // reset background color } &.focus, &:focus { background-color: #ededed; outline: 0; } &.hover, &:hover { background-color: hsv-darken(#ededed, 7%, true); } &.active, &:active { background-color: hsv-darken(#ededed, 15%, true); } &.disabled, &.readonly, &[disabled], &[readonly] { background-color: #f7f7f7; border-color: $input-disabled-border-color; color: $input-disabled-font-color; cursor: not-allowed; resize: none; @include placeholder($input-disabled-font-color-placeholder); }
}
.has-icon {
position: relative; .form-input { padding-left: 36px; .input-group-large & { padding-left: 52px; } }
}
.form-icon {
position: absolute; top: 0; left: 0; z-index: 3; display: block; text-align: center; pointer-events: none; width: 36px; height: 36px; line-height: 36px;
}