|
1 | | -// Bootstrap 4 likes to hide feedbacks, we don't like it, especially react-form-with-constraints-tools's DisplayFields |
2 | | -// [.invalid-feedback doesn't show for .input-group with an invalid control](https://github.com/twbs/bootstrap/issues/23454) |
3 | | -.valid-feedback, |
4 | | -.invalid-feedback { |
5 | | - // stylelint-disable-next-line declaration-no-important |
6 | | - display: block !important; // [Is there an opposite to display:none?](https://stackoverflow.com/a/37289654/990356) |
7 | | -} |
8 | | - |
9 | | -// stylelint-disable max-nesting-depth |
10 | | - |
11 | | -// [v4-beta form-validation-state() mixin does not work](https://github.com/twbs/bootstrap/issues/23371) |
12 | | -// [Fix form-validation-state() for unknown pseudo classes](https://github.com/twbs/bootstrap/pull/27409) |
13 | | -// [ability to generate warning form state](https://github.com/twbs/bootstrap/pull/26471) |
14 | | -// Taken and adapted from https://github.com/twbs/bootstrap/blob/v4.1.3/scss/mixins/_forms.scss#L29 |
15 | | -// Commented lines: 'display: none' + '.was-validated &:#{$state}' |
16 | | -@mixin form-validation-state2($state, $color) { |
17 | | - .#{$state}-feedback { |
18 | | - //display: none; |
19 | | - width: 100%; |
20 | | - margin-top: $form-feedback-margin-top; |
21 | | - font-size: $form-feedback-font-size; |
22 | | - color: $color; |
23 | | - } |
24 | | - |
25 | | - .#{$state}-tooltip { |
26 | | - position: absolute; |
27 | | - top: 100%; |
28 | | - z-index: 5; |
29 | | - display: none; |
30 | | - max-width: 100%; // Contain to parent when possible |
31 | | - padding: $tooltip-padding-y $tooltip-padding-x; |
32 | | - margin-top: 0.1rem; |
33 | | - font-size: $tooltip-font-size; |
34 | | - line-height: $line-height-base; |
35 | | - color: color-yiq($color); |
36 | | - background-color: rgba($color, $tooltip-opacity); |
37 | | - @include border-radius($tooltip-border-radius); |
38 | | - } |
39 | | - |
40 | | - .form-control, |
41 | | - .custom-select { |
42 | | - //.was-validated &:#{$state}, |
43 | | - &.is-#{$state} { |
44 | | - border-color: $color; |
45 | | - |
46 | | - &:focus { |
47 | | - border-color: $color; |
48 | | - box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); |
49 | | - } |
50 | | - |
51 | | - ~ .#{$state}-feedback, |
52 | | - ~ .#{$state}-tooltip { |
53 | | - display: block; |
54 | | - } |
55 | | - } |
56 | | - } |
57 | | - |
58 | | - .form-control-file { |
59 | | - //.was-validated &:#{$state}, |
60 | | - &.is-#{$state} { |
61 | | - ~ .#{$state}-feedback, |
62 | | - ~ .#{$state}-tooltip { |
63 | | - display: block; |
64 | | - } |
65 | | - } |
66 | | - } |
67 | | - |
68 | | - .form-check-input { |
69 | | - //.was-validated &:#{$state}, |
70 | | - &.is-#{$state} { |
71 | | - ~ .form-check-label { |
72 | | - color: $color; |
73 | | - } |
74 | | - |
75 | | - ~ .#{$state}-feedback, |
76 | | - ~ .#{$state}-tooltip { |
77 | | - display: block; |
78 | | - } |
79 | | - } |
80 | | - } |
81 | | - |
82 | | - .custom-control-input { |
83 | | - //.was-validated &:#{$state}, |
84 | | - &.is-#{$state} { |
85 | | - ~ .custom-control-label { |
86 | | - color: $color; |
87 | | - |
88 | | - &::before { |
89 | | - background-color: lighten($color, 25%); |
90 | | - } |
91 | | - } |
92 | | - |
93 | | - ~ .#{$state}-feedback, |
94 | | - ~ .#{$state}-tooltip { |
95 | | - display: block; |
96 | | - } |
97 | | - |
98 | | - &:checked { |
99 | | - ~ .custom-control-label::before { |
100 | | - @include gradient-bg(lighten($color, 10%)); |
101 | | - } |
102 | | - } |
103 | | - |
104 | | - &:focus { |
105 | | - ~ .custom-control-label::before { |
106 | | - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, 0.25); |
107 | | - } |
108 | | - } |
109 | | - } |
110 | | - } |
111 | | - |
112 | | - // custom file |
113 | | - .custom-file-input { |
114 | | - //.was-validated &:#{$state}, |
115 | | - &.is-#{$state} { |
116 | | - ~ .custom-file-label { |
117 | | - border-color: $color; |
118 | | - |
119 | | - &::after { |
120 | | - border-color: inherit; |
121 | | - } |
122 | | - } |
123 | | - |
124 | | - ~ .#{$state}-feedback, |
125 | | - ~ .#{$state}-tooltip { |
126 | | - display: block; |
127 | | - } |
128 | | - |
129 | | - &:focus { |
130 | | - ~ .custom-file-label { |
131 | | - box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); |
132 | | - } |
133 | | - } |
134 | | - } |
135 | | - } |
136 | | -} |
137 | | - |
138 | | -// https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L572 |
139 | | -// $form-feedback-valid-color => $success => $green => #28a745 |
140 | | -// $form-feedback-invalid-color => $danger => $red => #dc3545 |
141 | | -$form-feedback-warning-color: theme-color('warning') !default; // $yellow => #ffc107 |
142 | | -$form-feedback-info-color: theme-color('info') !default; // $cyan => #17a2b8 |
143 | | - |
144 | | -// https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_forms.scss#L243 |
| 1 | +// FIXME Bootstrap 5.0.1 form-validation-state mixin needs an icon |
| 2 | +// We should submit a PR to remove this requirement |
| 3 | +$empty-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"); |
| 4 | + |
| 5 | +// https://github.com/twbs/bootstrap/blob/v5.0.1/scss/_variables.scss#L884-L893 |
| 6 | +// https://github.com/twbs/bootstrap/blob/v5.0.1/scss/mixins/_forms.scss#L18 |
| 7 | +@include form-validation-state('info', $info, $empty-icon); |
| 8 | +@include form-validation-state('warning', $warning, $empty-icon); |
145 | 9 | // The order matters: invalid should be the last to override the other CSS rules |
146 | | -// @include form-validation-state("valid", $form-feedback-valid-color); |
147 | | -// @include form-validation-state("invalid", $form-feedback-invalid-color); |
148 | | -@include form-validation-state2('info', $form-feedback-info-color); |
149 | | -@include form-validation-state2('warning', $form-feedback-warning-color); |
150 | | -@include form-validation-state2('valid', $form-feedback-valid-color); |
151 | | -@include form-validation-state2('invalid', $form-feedback-invalid-color); |
| 10 | +@include form-validation-state('valid', $form-feedback-valid-color, $form-feedback-icon-valid); |
| 11 | +@include form-validation-state( |
| 12 | + 'invalid', |
| 13 | + $form-feedback-invalid-color, |
| 14 | + $form-feedback-icon-invalid |
| 15 | +); |
0 commit comments