1 // Embedded icons from Open Iconic.
2 // Released under MIT and copyright 2014 Waybury.
3 // https://useiconic.com/open
6 // Checkboxes and radios
8 // Base class takes care of all the key behavioral aspects.
13 min-height: ($font-size-base * $line-height-base);
14 padding-left: $custom-control-gutter;
17 .custom-control-inline {
19 margin-right: $custom-control-spacer-x;
22 .custom-control-input {
24 z-index: -1; // Put the input behind the label so it doesn't overlay text
27 &:checked ~ .custom-control-label::before {
28 color: $custom-control-indicator-checked-color;
29 border-color: $custom-control-indicator-checked-border-color;
30 @include gradient-bg($custom-control-indicator-checked-bg);
31 @include box-shadow($custom-control-indicator-checked-box-shadow);
34 &:focus ~ .custom-control-label::before {
35 // the mixin is not used here to make sure there is feedback
37 box-shadow: $input-box-shadow, $input-focus-box-shadow;
39 box-shadow: $custom-control-indicator-focus-box-shadow;
43 &:focus:not(:checked) ~ .custom-control-label::before {
44 border-color: $custom-control-indicator-focus-border-color;
47 &:not(:disabled):active ~ .custom-control-label::before {
48 color: $custom-control-indicator-active-color;
49 background-color: $custom-control-indicator-active-bg;
50 border-color: $custom-control-indicator-active-border-color;
51 @include box-shadow($custom-control-indicator-active-box-shadow);
55 ~ .custom-control-label {
56 color: $custom-control-label-disabled-color;
59 background-color: $custom-control-indicator-disabled-bg;
65 // Custom control indicators
67 // Build the custom controls out of pseudo-elements.
69 .custom-control-label {
74 // Background-color and (when enabled) gradient
77 top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
78 left: -$custom-control-gutter;
80 width: $custom-control-indicator-size;
81 height: $custom-control-indicator-size;
84 background-color: $custom-control-indicator-bg;
85 border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
86 @include box-shadow($custom-control-indicator-box-shadow);
92 top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
93 left: -$custom-control-gutter;
95 width: $custom-control-indicator-size;
96 height: $custom-control-indicator-size;
98 background-repeat: no-repeat;
99 background-position: center center;
100 background-size: $custom-control-indicator-bg-size;
107 // Tweak just a few things for checkboxes.
110 .custom-control-label::before {
111 @include border-radius($custom-checkbox-indicator-border-radius);
114 .custom-control-input:checked ~ .custom-control-label {
116 background-image: $custom-checkbox-indicator-icon-checked;
120 .custom-control-input:indeterminate ~ .custom-control-label {
122 border-color: $custom-checkbox-indicator-indeterminate-border-color;
123 @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
124 @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
127 background-image: $custom-checkbox-indicator-icon-indeterminate;
131 .custom-control-input:disabled {
132 &:checked ~ .custom-control-label::before {
133 background-color: $custom-control-indicator-checked-disabled-bg;
135 &:indeterminate ~ .custom-control-label::before {
136 background-color: $custom-control-indicator-checked-disabled-bg;
143 // Tweak just a few things for radios.
146 .custom-control-label::before {
147 border-radius: $custom-radio-indicator-border-radius;
150 .custom-control-input:checked ~ .custom-control-label {
152 background-image: $custom-radio-indicator-icon-checked;
156 .custom-control-input:disabled {
157 &:checked ~ .custom-control-label::before {
158 background-color: $custom-control-indicator-checked-disabled-bg;
166 // Replaces the browser default select with a custom one, mostly pulled from
167 // https://primer.github.io/.
171 display: inline-block;
173 height: $custom-select-height;
174 padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
175 font-weight: $custom-select-font-weight;
176 line-height: $custom-select-line-height;
177 color: $custom-select-color;
178 vertical-align: middle;
179 background: $custom-select-background;
180 background-color: $custom-select-bg;
181 border: $custom-select-border-width solid $custom-select-border-color;
182 @if $enable-rounded {
183 border-radius: $custom-select-border-radius;
187 @include box-shadow($custom-select-box-shadow);
191 border-color: $custom-select-focus-border-color;
193 @if $enable-shadows {
194 box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
196 box-shadow: $custom-select-focus-box-shadow;
200 // For visual consistency with other platforms/browsers,
201 // suppress the default white text on blue background highlight given to
202 // the selected option text when the (still closed) <select> receives focus
203 // in IE and (under certain conditions) Edge.
204 // See https://github.com/twbs/bootstrap/issues/19398.
206 background-color: $input-bg;
211 &[size]:not([size="1"]) {
213 padding-right: $custom-select-padding-x;
214 background-image: none;
218 color: $custom-select-disabled-color;
219 background-color: $custom-select-disabled-bg;
222 // Hides the default caret in IE11
229 height: $custom-select-height-sm;
230 padding-top: $custom-select-padding-y-sm;
231 padding-bottom: $custom-select-padding-y-sm;
232 padding-left: $custom-select-padding-x-sm;
233 font-size: $custom-select-font-size-sm;
237 height: $custom-select-height-lg;
238 padding-top: $custom-select-padding-y-lg;
239 padding-bottom: $custom-select-padding-y-lg;
240 padding-left: $custom-select-padding-x-lg;
241 font-size: $custom-select-font-size-lg;
247 // Custom file input.
251 display: inline-block;
253 height: $custom-file-height;
261 height: $custom-file-height;
265 &:focus ~ .custom-file-label {
266 border-color: $custom-file-focus-border-color;
267 box-shadow: $custom-file-focus-box-shadow;
270 &:disabled ~ .custom-file-label {
271 background-color: $custom-file-disabled-bg;
274 @each $lang, $value in $custom-file-text {
275 &:lang(#{$lang}) ~ .custom-file-label::after {
280 ~ .custom-file-label[data-browse]::after {
281 content: attr(data-browse);
291 height: $custom-file-height;
292 padding: $custom-file-padding-y $custom-file-padding-x;
293 font-weight: $custom-file-font-weight;
294 line-height: $custom-file-line-height;
295 color: $custom-file-color;
296 background-color: $custom-file-bg;
297 border: $custom-file-border-width solid $custom-file-border-color;
298 @include border-radius($custom-file-border-radius);
299 @include box-shadow($custom-file-box-shadow);
308 height: $custom-file-height-inner;
309 padding: $custom-file-padding-y $custom-file-padding-x;
310 line-height: $custom-file-line-height;
311 color: $custom-file-button-color;
313 @include gradient-bg($custom-file-button-bg);
314 border-left: inherit;
315 @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
321 // Style range inputs the same across browsers. Vendor-specific rules for pseudo
322 // elements cannot be mixed. As such, there are no shared styles for focus or
323 // active states on prefixed selectors.
327 height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
328 padding: 0; // Need to reset padding
329 background-color: transparent;
335 // Pseudo-elements must be split across multiple rulesets to have an effect.
336 // No box-shadow() mixin for focus accessibility.
337 &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
338 &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
339 &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
342 &::-moz-focus-outer {
346 &::-webkit-slider-thumb {
347 width: $custom-range-thumb-width;
348 height: $custom-range-thumb-height;
349 margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
350 @include gradient-bg($custom-range-thumb-bg);
351 border: $custom-range-thumb-border;
352 @include border-radius($custom-range-thumb-border-radius);
353 @include box-shadow($custom-range-thumb-box-shadow);
354 @include transition($custom-forms-transition);
358 @include gradient-bg($custom-range-thumb-active-bg);
362 &::-webkit-slider-runnable-track {
363 width: $custom-range-track-width;
364 height: $custom-range-track-height;
365 color: transparent; // Why?
366 cursor: $custom-range-track-cursor;
367 background-color: $custom-range-track-bg;
368 border-color: transparent;
369 @include border-radius($custom-range-track-border-radius);
370 @include box-shadow($custom-range-track-box-shadow);
373 &::-moz-range-thumb {
374 width: $custom-range-thumb-width;
375 height: $custom-range-thumb-height;
376 @include gradient-bg($custom-range-thumb-bg);
377 border: $custom-range-thumb-border;
378 @include border-radius($custom-range-thumb-border-radius);
379 @include box-shadow($custom-range-thumb-box-shadow);
380 @include transition($custom-forms-transition);
384 @include gradient-bg($custom-range-thumb-active-bg);
388 &::-moz-range-track {
389 width: $custom-range-track-width;
390 height: $custom-range-track-height;
392 cursor: $custom-range-track-cursor;
393 background-color: $custom-range-track-bg;
394 border-color: transparent; // Firefox specific?
395 @include border-radius($custom-range-track-border-radius);
396 @include box-shadow($custom-range-track-box-shadow);
400 width: $custom-range-thumb-width;
401 height: $custom-range-thumb-height;
402 margin-top: 0; // Edge specific
403 margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
404 margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
405 @include gradient-bg($custom-range-thumb-bg);
406 border: $custom-range-thumb-border;
407 @include border-radius($custom-range-thumb-border-radius);
408 @include box-shadow($custom-range-thumb-box-shadow);
409 @include transition($custom-forms-transition);
413 @include gradient-bg($custom-range-thumb-active-bg);
418 width: $custom-range-track-width;
419 height: $custom-range-track-height;
421 cursor: $custom-range-track-cursor;
422 background-color: transparent;
423 border-color: transparent;
424 border-width: ($custom-range-thumb-height * .5);
425 @include box-shadow($custom-range-track-box-shadow);
429 background-color: $custom-range-track-bg;
430 @include border-radius($custom-range-track-border-radius);
434 margin-right: 15px; // arbitrary?
435 background-color: $custom-range-track-bg;
436 @include border-radius($custom-range-track-border-radius);
440 &::-webkit-slider-thumb {
441 background-color: $custom-range-thumb-disabled-bg;
444 &::-webkit-slider-runnable-track {
448 &::-moz-range-thumb {
449 background-color: $custom-range-thumb-disabled-bg;
452 &::-moz-range-track {
457 background-color: $custom-range-thumb-disabled-bg;
462 .custom-control-label::before,
465 @include transition($custom-forms-transition);