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 @include gradient-bg($custom-control-indicator-checked-bg);
30 @include box-shadow($custom-control-indicator-checked-box-shadow);
33 &:focus ~ .custom-control-label::before {
34 // the mixin is not used here to make sure there is feedback
35 box-shadow: $custom-control-indicator-focus-box-shadow;
38 &:active ~ .custom-control-label::before {
39 color: $custom-control-indicator-active-color;
40 background-color: $custom-control-indicator-active-bg;
41 @include box-shadow($custom-control-indicator-active-box-shadow);
45 ~ .custom-control-label {
46 color: $custom-control-label-disabled-color;
49 background-color: $custom-control-indicator-disabled-bg;
55 // Custom control indicators
57 // Build the custom controls out of pseudo-elements.
59 .custom-control-label {
63 // Background-color and (when enabled) gradient
66 top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
67 left: -$custom-control-gutter;
69 width: $custom-control-indicator-size;
70 height: $custom-control-indicator-size;
74 background-color: $custom-control-indicator-bg;
75 @include box-shadow($custom-control-indicator-box-shadow);
81 top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
82 left: -$custom-control-gutter;
84 width: $custom-control-indicator-size;
85 height: $custom-control-indicator-size;
87 background-repeat: no-repeat;
88 background-position: center center;
89 background-size: $custom-control-indicator-bg-size;
96 // Tweak just a few things for checkboxes.
99 .custom-control-label::before {
100 @include border-radius($custom-checkbox-indicator-border-radius);
103 .custom-control-input:checked ~ .custom-control-label {
105 @include gradient-bg($custom-control-indicator-checked-bg);
108 background-image: $custom-checkbox-indicator-icon-checked;
112 .custom-control-input:indeterminate ~ .custom-control-label {
114 @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
115 @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
118 background-image: $custom-checkbox-indicator-icon-indeterminate;
122 .custom-control-input:disabled {
123 &:checked ~ .custom-control-label::before {
124 background-color: $custom-control-indicator-checked-disabled-bg;
126 &:indeterminate ~ .custom-control-label::before {
127 background-color: $custom-control-indicator-checked-disabled-bg;
134 // Tweak just a few things for radios.
137 .custom-control-label::before {
138 border-radius: $custom-radio-indicator-border-radius;
141 .custom-control-input:checked ~ .custom-control-label {
143 @include gradient-bg($custom-control-indicator-checked-bg);
146 background-image: $custom-radio-indicator-icon-checked;
150 .custom-control-input:disabled {
151 &:checked ~ .custom-control-label::before {
152 background-color: $custom-control-indicator-checked-disabled-bg;
160 // Replaces the browser default select with a custom one, mostly pulled from
161 // https://primer.github.io/.
165 display: inline-block;
167 height: $custom-select-height;
168 padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
169 line-height: $custom-select-line-height;
170 color: $custom-select-color;
171 vertical-align: middle;
172 background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
173 background-size: $custom-select-bg-size;
174 border: $custom-select-border-width solid $custom-select-border-color;
175 @if $enable-rounded {
176 border-radius: $custom-select-border-radius;
180 @include box-shadow($custom-select-box-shadow);
184 border-color: $custom-select-focus-border-color;
186 @if $enable-shadows {
187 box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
189 box-shadow: $custom-select-focus-box-shadow;
193 // For visual consistency with other platforms/browsers,
194 // suppress the default white text on blue background highlight given to
195 // the selected option text when the (still closed) <select> receives focus
196 // in IE and (under certain conditions) Edge.
197 // See https://github.com/twbs/bootstrap/issues/19398.
199 background-color: $input-bg;
204 &[size]:not([size="1"]) {
206 padding-right: $custom-select-padding-x;
207 background-image: none;
211 color: $custom-select-disabled-color;
212 background-color: $custom-select-disabled-bg;
215 // Hides the default caret in IE11
222 height: $custom-select-height-sm;
223 padding-top: $custom-select-padding-y;
224 padding-bottom: $custom-select-padding-y;
225 font-size: $custom-select-font-size-sm;
229 height: $custom-select-height-lg;
230 padding-top: $custom-select-padding-y;
231 padding-bottom: $custom-select-padding-y;
232 font-size: $custom-select-font-size-lg;
238 // Custom file input.
242 display: inline-block;
244 height: $custom-file-height;
252 height: $custom-file-height;
256 &:focus ~ .custom-file-label {
257 border-color: $custom-file-focus-border-color;
258 box-shadow: $custom-file-focus-box-shadow;
261 border-color: $custom-file-focus-border-color;
265 &:disabled ~ .custom-file-label {
266 background-color: $custom-file-disabled-bg;
269 @each $lang, $value in $custom-file-text {
270 &:lang(#{$lang}) ~ .custom-file-label::after {
282 height: $custom-file-height;
283 padding: $custom-file-padding-y $custom-file-padding-x;
284 line-height: $custom-file-line-height;
285 color: $custom-file-color;
286 background-color: $custom-file-bg;
287 border: $custom-file-border-width solid $custom-file-border-color;
288 @include border-radius($custom-file-border-radius);
289 @include box-shadow($custom-file-box-shadow);
298 height: $custom-file-height-inner;
299 padding: $custom-file-padding-y $custom-file-padding-x;
300 line-height: $custom-file-line-height;
301 color: $custom-file-button-color;
303 @include gradient-bg($custom-file-button-bg);
304 border-left: $custom-file-border-width solid $custom-file-border-color;
305 @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
311 // Style range inputs the same across browsers. Vendor-specific rules for pseudo
312 // elements cannot be mixed. As such, there are no shared styles for focus or
313 // active states on prefixed selectors.
317 padding-left: 0; // Firefox specific
318 background-color: transparent;
324 // Pseudo-elements must be split across multiple rulesets to have an affect.
325 // No box-shadow() mixin for focus accessibility.
326 &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
327 &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
328 &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
331 &::-moz-focus-outer {
335 &::-webkit-slider-thumb {
336 width: $custom-range-thumb-width;
337 height: $custom-range-thumb-height;
338 margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
339 @include gradient-bg($custom-range-thumb-bg);
340 border: $custom-range-thumb-border;
341 @include border-radius($custom-range-thumb-border-radius);
342 @include box-shadow($custom-range-thumb-box-shadow);
343 @include transition($custom-forms-transition);
347 @include gradient-bg($custom-range-thumb-active-bg);
351 &::-webkit-slider-runnable-track {
352 width: $custom-range-track-width;
353 height: $custom-range-track-height;
354 color: transparent; // Why?
355 cursor: $custom-range-track-cursor;
356 background-color: $custom-range-track-bg;
357 border-color: transparent;
358 @include border-radius($custom-range-track-border-radius);
359 @include box-shadow($custom-range-track-box-shadow);
362 &::-moz-range-thumb {
363 width: $custom-range-thumb-width;
364 height: $custom-range-thumb-height;
365 @include gradient-bg($custom-range-thumb-bg);
366 border: $custom-range-thumb-border;
367 @include border-radius($custom-range-thumb-border-radius);
368 @include box-shadow($custom-range-thumb-box-shadow);
369 @include transition($custom-forms-transition);
373 @include gradient-bg($custom-range-thumb-active-bg);
377 &::-moz-range-track {
378 width: $custom-range-track-width;
379 height: $custom-range-track-height;
381 cursor: $custom-range-track-cursor;
382 background-color: $custom-range-track-bg;
383 border-color: transparent; // Firefox specific?
384 @include border-radius($custom-range-track-border-radius);
385 @include box-shadow($custom-range-track-box-shadow);
389 width: $custom-range-thumb-width;
390 height: $custom-range-thumb-height;
391 margin-top: 0; // Edge specific
392 margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
393 margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
394 @include gradient-bg($custom-range-thumb-bg);
395 border: $custom-range-thumb-border;
396 @include border-radius($custom-range-thumb-border-radius);
397 @include box-shadow($custom-range-thumb-box-shadow);
398 @include transition($custom-forms-transition);
402 @include gradient-bg($custom-range-thumb-active-bg);
407 width: $custom-range-track-width;
408 height: $custom-range-track-height;
410 cursor: $custom-range-track-cursor;
411 background-color: transparent;
412 border-color: transparent;
413 border-width: ($custom-range-thumb-height * .5);
414 @include box-shadow($custom-range-track-box-shadow);
418 background-color: $custom-range-track-bg;
419 @include border-radius($custom-range-track-border-radius);
423 margin-right: 15px; // arbitrary?
424 background-color: $custom-range-track-bg;
425 @include border-radius($custom-range-track-border-radius);
429 .custom-control-label::before,
432 @include transition($custom-forms-transition);