Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | // Form validation states |
| 2 | // |
||
| 3 | // Used in forms.less to generate the form validation CSS for warnings, errors, |
||
| 4 | // and successes. |
||
| 5 | |||
| 6 | @mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) { |
||
| 7 | // Color the label and help text |
||
| 8 | .help-block, |
||
| 9 | .control-label, |
||
| 10 | .radio, |
||
| 11 | .checkbox, |
||
| 12 | .radio-inline, |
||
| 13 | .checkbox-inline, |
||
| 14 | &.radio label, |
||
| 15 | &.checkbox label, |
||
| 16 | &.radio-inline label, |
||
| 17 | &.checkbox-inline label { |
||
| 18 | color: $text-color; |
||
| 19 | } |
||
| 20 | // Set the border and box shadow on specific inputs to match |
||
| 21 | .form-control { |
||
| 22 | border-color: $border-color; |
||
| 23 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work |
||
| 24 | &:focus { |
||
| 25 | border-color: darken($border-color, 10%); |
||
| 26 | $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%); |
||
| 27 | @include box-shadow($shadow); |
||
| 28 | } |
||
| 29 | } |
||
| 30 | // Set validation states also for addons |
||
| 31 | .input-group-addon { |
||
| 32 | color: $text-color; |
||
| 33 | border-color: $border-color; |
||
| 34 | background-color: $background-color; |
||
| 35 | } |
||
| 36 | // Optional feedback icon |
||
| 37 | .form-control-feedback { |
||
| 38 | color: $text-color; |
||
| 39 | } |
||
| 40 | } |
||
| 41 | |||
| 42 | |||
| 43 | // Form control focus state |
||
| 44 | // |
||
| 45 | // Generate a customized focus state and for any input with the specified color, |
||
| 46 | // which defaults to the `$input-border-focus` variable. |
||
| 47 | // |
||
| 48 | // We highly encourage you to not customize the default value, but instead use |
||
| 49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on |
||
| 50 | // WebKit's default styles, but applicable to a wider range of browsers. Its |
||
| 51 | // usability and accessibility should be taken into account with any change. |
||
| 52 | // |
||
| 53 | // Example usage: change the default blue border and shadow to white for better |
||
| 54 | // contrast against a dark gray background. |
||
| 55 | @mixin form-control-focus($color: $input-border-focus) { |
||
| 56 | $color-rgba: rgba(red($color), green($color), blue($color), .6); |
||
| 57 | &:focus { |
||
| 58 | border-color: $color; |
||
| 59 | outline: 0; |
||
| 60 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba); |
||
| 61 | } |
||
| 62 | } |
||
| 63 | |||
| 64 | // Form control sizing |
||
| 65 | // |
||
| 66 | // Relative text size, padding, and border-radii changes for form controls. For |
||
| 67 | // horizontal sizing, wrap controls in the predefined grid classes. `<select>` |
||
| 68 | // element gets special love because it's special, and that's a fact! |
||
| 69 | // [converter] $parent hack |
||
| 70 | @mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { |
||
| 71 | #{$parent} { |
||
| 72 | height: $input-height; |
||
| 73 | padding: $padding-vertical $padding-horizontal; |
||
| 74 | font-size: $font-size; |
||
| 75 | line-height: $line-height; |
||
| 76 | border-radius: $border-radius; |
||
| 77 | } |
||
| 78 | |||
| 79 | select#{$parent} { |
||
| 80 | height: $input-height; |
||
| 81 | line-height: $input-height; |
||
| 82 | } |
||
| 83 | |||
| 84 | textarea#{$parent}, |
||
| 85 | select[multiple]#{$parent} { |
||
| 86 | height: auto; |
||
| 87 | } |
||
| 88 | } |