12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- @mixin form-control-validation($color) {
- // Color the label and help text
- .text-help,
- .form-control-label,
- .radio,
- .checkbox,
- .radio-inline,
- .checkbox-inline,
- &.radio label,
- &.checkbox label,
- &.radio-inline label,
- &.checkbox-inline label,
- .custom-control {
- color: $color;
- }
- .form-control {
- border-color: $color;
- }
- // Set validation states also for addons
- .input-group-addon {
- color: $color;
- border-color: $color;
- background-color: lighten($color, 40%);
- }
- // Optional feedback icon
- .form-control-feedback {
- color: $color;
- }
- }
- @mixin form-control-focus() {
- &:focus {
- border-color: $input-border-focus;
- outline: none;
- }
- }
- // Form control sizing
- //
- // Relative text size, padding, and border-radii changes for form controls. For
- // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
- // element gets special love because it's special, and that's a fact!
- @mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
- #{$parent} {
- height: $input-height;
- padding: $padding-y $padding-x;
- font-size: $font-size;
- line-height: $line-height;
- @include border-radius($border-radius);
- }
- select#{$parent} {
- height: $input-height;
- line-height: $input-height;
- }
- textarea#{$parent},
- select[multiple]#{$parent} {
- height: auto;
- }
- }
|