|
0
|
1 // Form control focus state
|
|
|
2 //
|
|
|
3 // Generate a customized focus state and for any input with the specified color,
|
|
|
4 // which defaults to the `@input-border-color-focus` variable.
|
|
|
5 //
|
|
|
6 // We highly encourage you to not customize the default value, but instead use
|
|
|
7 // this to tweak colors on an as-needed basis. This aesthetic change is based on
|
|
|
8 // WebKit's default styles, but applicable to a wider range of browsers. Its
|
|
|
9 // usability and accessibility should be taken into account with any change.
|
|
|
10 //
|
|
|
11 // Example usage: change the default blue border and shadow to white for better
|
|
|
12 // contrast against a dark gray background.
|
|
|
13 @mixin form-control-focus() {
|
|
|
14 &:focus {
|
|
|
15 color: $input-focus-color;
|
|
|
16 background-color: $input-focus-bg;
|
|
|
17 border-color: $input-focus-border-color;
|
|
|
18 outline: none;
|
|
|
19 @include box-shadow($input-focus-box-shadow);
|
|
|
20 }
|
|
|
21 }
|
|
|
22
|
|
|
23
|
|
|
24 @mixin form-validation-state($state, $color) {
|
|
|
25
|
|
|
26 .form-control,
|
|
|
27 .custom-select {
|
|
|
28 .was-validated &:#{$state},
|
|
|
29 &.is-#{$state} {
|
|
|
30 border-color: $color;
|
|
|
31
|
|
|
32 &:focus {
|
|
|
33 box-shadow: 0 0 0 .2rem rgba($color,.25);
|
|
|
34 }
|
|
|
35
|
|
|
36 ~ .invalid-feedback,
|
|
|
37 ~ .invalid-tooltip {
|
|
|
38 display: block;
|
|
|
39 }
|
|
|
40 }
|
|
|
41 }
|
|
|
42
|
|
|
43
|
|
|
44 // TODO: redo check markup lol crap
|
|
|
45 .form-check-input {
|
|
|
46 .was-validated &:#{$state},
|
|
|
47 &.is-#{$state} {
|
|
|
48 + .form-check-label {
|
|
|
49 color: $color;
|
|
|
50 }
|
|
|
51 }
|
|
|
52 }
|
|
|
53
|
|
|
54 // custom radios and checks
|
|
|
55 .custom-control-input {
|
|
|
56 .was-validated &:#{$state},
|
|
|
57 &.is-#{$state} {
|
|
|
58 ~ .custom-control-indicator {
|
|
|
59 background-color: rgba($color, .25);
|
|
|
60 }
|
|
|
61 ~ .custom-control-description {
|
|
|
62 color: $color;
|
|
|
63 }
|
|
|
64 }
|
|
|
65 }
|
|
|
66
|
|
|
67 // custom file
|
|
|
68 .custom-file-input {
|
|
|
69 .was-validated &:#{$state},
|
|
|
70 &.is-#{$state} {
|
|
|
71 ~ .custom-file-control {
|
|
|
72 border-color: $color;
|
|
|
73
|
|
|
74 &::before { border-color: inherit; }
|
|
|
75 }
|
|
|
76 &:focus {
|
|
|
77 box-shadow: 0 0 0 .2rem rgba($color,.25);
|
|
|
78 }
|
|
|
79 }
|
|
|
80 }
|
|
|
81 }
|
