1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | .custom-control {
|
13 | position: relative;
|
14 | display: inline-flex;
|
15 | min-height: (1rem * $line-height-base);
|
16 | padding-left: $custom-control-gutter;
|
17 | margin-right: $custom-control-spacer-x;
|
18 | cursor: pointer;
|
19 | }
|
20 |
|
21 | .custom-control-input {
|
22 | position: absolute;
|
23 | z-index: -1;
|
24 | opacity: 0;
|
25 |
|
26 | &:checked ~ .custom-control-indicator {
|
27 | color: $custom-control-checked-indicator-color;
|
28 | background-color: $custom-control-checked-indicator-bg;
|
29 | @include box-shadow($custom-control-checked-indicator-box-shadow);
|
30 | }
|
31 |
|
32 | &:focus ~ .custom-control-indicator {
|
33 |
|
34 | box-shadow: $custom-control-focus-indicator-box-shadow;
|
35 | }
|
36 |
|
37 | &:active ~ .custom-control-indicator {
|
38 | color: $custom-control-active-indicator-color;
|
39 | background-color: $custom-control-active-indicator-bg;
|
40 | @include box-shadow($custom-control-active-indicator-box-shadow);
|
41 | }
|
42 |
|
43 | &:disabled {
|
44 | ~ .custom-control-indicator {
|
45 | cursor: $custom-control-disabled-cursor;
|
46 | background-color: $custom-control-disabled-indicator-bg;
|
47 | }
|
48 |
|
49 | ~ .custom-control-description {
|
50 | color: $custom-control-disabled-description-color;
|
51 | cursor: $custom-control-disabled-cursor;
|
52 | }
|
53 | }
|
54 | }
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 | .custom-control-indicator {
|
61 | position: absolute;
|
62 | top: (($line-height-base - $custom-control-indicator-size) / 2);
|
63 | left: 0;
|
64 | display: block;
|
65 | width: $custom-control-indicator-size;
|
66 | height: $custom-control-indicator-size;
|
67 | pointer-events: none;
|
68 | user-select: none;
|
69 | background-color: $custom-control-indicator-bg;
|
70 | background-repeat: no-repeat;
|
71 | background-position: center center;
|
72 | background-size: $custom-control-indicator-bg-size;
|
73 | @include box-shadow($custom-control-indicator-box-shadow);
|
74 | }
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 | .custom-checkbox {
|
81 | .custom-control-indicator {
|
82 | @include border-radius($custom-checkbox-radius);
|
83 | }
|
84 |
|
85 | .custom-control-input:checked ~ .custom-control-indicator {
|
86 | background-image: $custom-checkbox-checked-icon;
|
87 | }
|
88 |
|
89 | .custom-control-input:indeterminate ~ .custom-control-indicator {
|
90 | background-color: $custom-checkbox-indeterminate-bg;
|
91 | background-image: $custom-checkbox-indeterminate-icon;
|
92 | @include box-shadow($custom-checkbox-indeterminate-box-shadow);
|
93 | }
|
94 | }
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 | .custom-radio {
|
101 | .custom-control-indicator {
|
102 | border-radius: $custom-radio-radius;
|
103 | }
|
104 |
|
105 | .custom-control-input:checked ~ .custom-control-indicator {
|
106 | background-image: $custom-radio-checked-icon;
|
107 | }
|
108 | }
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | .custom-controls-stacked {
|
117 | display: flex;
|
118 | flex-direction: column;
|
119 |
|
120 | .custom-control {
|
121 | margin-bottom: $custom-control-spacer-y;
|
122 |
|
123 | + .custom-control {
|
124 | margin-left: 0;
|
125 | }
|
126 | }
|
127 | }
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 | .custom-select {
|
137 | display: inline-block;
|
138 | max-width: 100%;
|
139 | $select-border-width: ($border-width * 2);
|
140 | height: calc(#{$input-height} + #{$select-border-width});
|
141 | padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
142 | line-height: $custom-select-line-height;
|
143 | color: $custom-select-color;
|
144 | vertical-align: middle;
|
145 | background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
146 | background-size: $custom-select-bg-size;
|
147 | border: $custom-select-border-width solid $custom-select-border-color;
|
148 | @include border-radius($custom-select-border-radius);
|
149 |
|
150 | -moz-appearance: none;
|
151 | -webkit-appearance: none;
|
152 |
|
153 | &:focus {
|
154 | border-color: $custom-select-focus-border-color;
|
155 | outline: none;
|
156 | @include box-shadow($custom-select-focus-box-shadow);
|
157 |
|
158 | &::-ms-value {
|
159 | // For visual consistency with other platforms/browsers,
|
160 | // supress the default white text on blue background highlight given to
|
161 | // the selected option text when the (still closed) <select> receives focus
|
162 | // in IE and (under certain conditions) Edge.
|
163 | // See https://github.com/twbs/bootstrap/issues/19398.
|
164 | color: $input-color;
|
165 | background-color: $input-bg;
|
166 | }
|
167 | }
|
168 |
|
169 | &:disabled {
|
170 | color: $custom-select-disabled-color;
|
171 | cursor: $cursor-disabled;
|
172 | background-color: $custom-select-disabled-bg;
|
173 | }
|
174 |
|
175 |
|
176 | &::-ms-expand {
|
177 | opacity: 0;
|
178 | }
|
179 | }
|
180 |
|
181 | .custom-select-sm {
|
182 | padding-top: $custom-select-padding-y;
|
183 | padding-bottom: $custom-select-padding-y;
|
184 | font-size: $custom-select-sm-font-size;
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | }
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 | .custom-file {
|
198 | position: relative;
|
199 | display: inline-block;
|
200 | max-width: 100%;
|
201 | height: $custom-file-height;
|
202 | margin-bottom: 0;
|
203 | cursor: pointer;
|
204 | }
|
205 |
|
206 | .custom-file-input {
|
207 | min-width: $custom-file-width;
|
208 | max-width: 100%;
|
209 | height: $custom-file-height;
|
210 | margin: 0;
|
211 | filter: alpha(opacity = 0);
|
212 | opacity: 0;
|
213 |
|
214 | &:focus ~ .custom-file-control {
|
215 | @include box-shadow($custom-file-focus-box-shadow);
|
216 | }
|
217 | }
|
218 |
|
219 | .custom-file-control {
|
220 | position: absolute;
|
221 | top: 0;
|
222 | right: 0;
|
223 | left: 0;
|
224 | z-index: 5;
|
225 | height: $custom-file-height;
|
226 | padding: $custom-file-padding-x $custom-file-padding-y;
|
227 | line-height: $custom-file-line-height;
|
228 | color: $custom-file-color;
|
229 | pointer-events: none;
|
230 | user-select: none;
|
231 | background-color: $custom-file-bg;
|
232 | border: $custom-file-border-width solid $custom-file-border-color;
|
233 | @include border-radius($custom-file-border-radius);
|
234 | @include box-shadow($custom-file-box-shadow);
|
235 |
|
236 | @each $lang, $text in map-get($custom-file-text, placeholder) {
|
237 | &:lang(#{$lang})::after {
|
238 | content: $text;
|
239 | }
|
240 | }
|
241 |
|
242 | &::before {
|
243 | position: absolute;
|
244 | top: -$custom-file-border-width;
|
245 | right: -$custom-file-border-width;
|
246 | bottom: -$custom-file-border-width;
|
247 | z-index: 6;
|
248 | display: block;
|
249 | height: $custom-file-height;
|
250 | padding: $custom-file-padding-x $custom-file-padding-y;
|
251 | line-height: $custom-file-line-height;
|
252 | color: $custom-file-button-color;
|
253 | background-color: $custom-file-button-bg;
|
254 | border: $custom-file-border-width solid $custom-file-border-color;
|
255 | @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
256 | }
|
257 |
|
258 | @each $lang, $text in map-get($custom-file-text, button-label) {
|
259 | &:lang(#{$lang})::before {
|
260 | content: $text;
|
261 | }
|
262 | }
|
263 | }
|