1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | @mixin form-control-focus($ignore-warning: false) {
|
14 | &:focus {
|
15 | color: $input-focus-color;
|
16 | background-color: $input-focus-bg;
|
17 | border-color: $input-focus-border-color;
|
18 | outline: 0;
|
19 | @if $enable-shadows {
|
20 | @include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
21 | } @else {
|
22 |
|
23 | box-shadow: $input-focus-box-shadow;
|
24 | }
|
25 | }
|
26 | @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
|
27 | }
|
28 |
|
29 |
|
30 |
|
31 | @mixin form-validation-state-selector($state) {
|
32 | @if ($state == "valid" or $state == "invalid") {
|
33 | .was-validated #{if(&, "&", "")}:#{$state},
|
34 | #{if(&, "&", "")}.is-#{$state} {
|
35 | @content;
|
36 | }
|
37 | } @else {
|
38 | #{if(&, "&", "")}.is-#{$state} {
|
39 | @content;
|
40 | }
|
41 | }
|
42 | }
|
43 |
|
44 | @mixin form-validation-state($state, $color, $icon) {
|
45 | .#{$state}-feedback {
|
46 | display: none;
|
47 | width: 100%;
|
48 | margin-top: $form-feedback-margin-top;
|
49 | @include font-size($form-feedback-font-size);
|
50 | color: $color;
|
51 | }
|
52 |
|
53 | .#{$state}-tooltip {
|
54 | position: absolute;
|
55 | top: 100%;
|
56 | z-index: 5;
|
57 | display: none;
|
58 | max-width: 100%;
|
59 | padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
60 | margin-top: .1rem;
|
61 | @include font-size($form-feedback-tooltip-font-size);
|
62 | line-height: $form-feedback-tooltip-line-height;
|
63 | color: color-yiq($color);
|
64 | background-color: rgba($color, $form-feedback-tooltip-opacity);
|
65 | @include border-radius($form-feedback-tooltip-border-radius);
|
66 | }
|
67 |
|
68 | @include form-validation-state-selector($state) {
|
69 | ~ .#{$state}-feedback,
|
70 | ~ .#{$state}-tooltip {
|
71 | display: block;
|
72 | }
|
73 | }
|
74 |
|
75 | .form-control {
|
76 | @include form-validation-state-selector($state) {
|
77 | border-color: $color;
|
78 |
|
79 | @if $enable-validation-icons {
|
80 | padding-right: $input-height-inner;
|
81 | background-image: escape-svg($icon);
|
82 | background-repeat: no-repeat;
|
83 | background-position: right $input-height-inner-quarter center;
|
84 | background-size: $input-height-inner-half $input-height-inner-half;
|
85 | }
|
86 |
|
87 | &:focus {
|
88 | border-color: $color;
|
89 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
90 | }
|
91 | }
|
92 | }
|
93 |
|
94 |
|
95 | textarea.form-control {
|
96 | @include form-validation-state-selector($state) {
|
97 | @if $enable-validation-icons {
|
98 | padding-right: $input-height-inner;
|
99 | background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
100 | }
|
101 | }
|
102 | }
|
103 |
|
104 | .custom-select {
|
105 | @include form-validation-state-selector($state) {
|
106 | border-color: $color;
|
107 |
|
108 | @if $enable-validation-icons {
|
109 | padding-right: $custom-select-feedback-icon-padding-right;
|
110 | background: $custom-select-background, escape-svg($icon) $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
|
111 | }
|
112 |
|
113 | &:focus {
|
114 | border-color: $color;
|
115 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
116 | }
|
117 | }
|
118 | }
|
119 |
|
120 | .form-check-input {
|
121 | @include form-validation-state-selector($state) {
|
122 | ~ .form-check-label {
|
123 | color: $color;
|
124 | }
|
125 |
|
126 | ~ .#{$state}-feedback,
|
127 | ~ .#{$state}-tooltip {
|
128 | display: block;
|
129 | }
|
130 | }
|
131 | }
|
132 |
|
133 | .custom-control-input {
|
134 | @include form-validation-state-selector($state) {
|
135 | ~ .custom-control-label {
|
136 | color: $color;
|
137 |
|
138 | &::before {
|
139 | border-color: $color;
|
140 | }
|
141 | }
|
142 |
|
143 | &:checked {
|
144 | ~ .custom-control-label::before {
|
145 | border-color: lighten($color, 10%);
|
146 | @include gradient-bg(lighten($color, 10%));
|
147 | }
|
148 | }
|
149 |
|
150 | &:focus {
|
151 | ~ .custom-control-label::before {
|
152 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
153 | }
|
154 |
|
155 | &:not(:checked) ~ .custom-control-label::before {
|
156 | border-color: $color;
|
157 | }
|
158 | }
|
159 | }
|
160 | }
|
161 |
|
162 |
|
163 | .custom-file-input {
|
164 | @include form-validation-state-selector($state) {
|
165 | ~ .custom-file-label {
|
166 | border-color: $color;
|
167 | }
|
168 |
|
169 | &:focus {
|
170 | ~ .custom-file-label {
|
171 | border-color: $color;
|
172 | box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
173 | }
|
174 | }
|
175 | }
|
176 | }
|
177 | }
|