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