.custom-control {
position: relative;
+ z-index: 1;
display: block;
- min-height: ($font-size-base * $line-height-base);
- padding-left: $custom-control-gutter;
+ min-height: $font-size-base * $line-height-base;
+ padding-left: $custom-control-gutter + $custom-control-indicator-size;
+ color-adjust: exact; // Keep themed appearance for print
}
.custom-control-inline {
.custom-control-input {
position: absolute;
+ left: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
+ width: $custom-control-indicator-size;
+ height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
opacity: 0;
&:checked ~ .custom-control-label::before {
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
@if $enable-shadows {
- box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
} @else {
box-shadow: $custom-control-indicator-focus-box-shadow;
}
@include box-shadow($custom-control-indicator-active-box-shadow);
}
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+ &[disabled],
&:disabled {
~ .custom-control-label {
color: $custom-control-label-disabled-color;
.custom-control-label {
position: relative;
margin-bottom: 0;
+ color: $custom-control-label-color;
vertical-align: top;
+ cursor: $custom-control-cursor;
// Background-color and (when enabled) gradient
&::before {
position: absolute;
- top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
- left: -$custom-control-gutter;
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+ left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
// Foreground (icon)
&::after {
position: absolute;
- top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
- left: -$custom-control-gutter;
+ top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+ left: -($custom-control-gutter + $custom-control-indicator-size);
display: block;
width: $custom-control-indicator-size;
height: $custom-control-indicator-size;
content: "";
- background-repeat: no-repeat;
- background-position: center center;
- background-size: $custom-control-indicator-bg-size;
+ background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
}
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
- background-image: $custom-checkbox-indicator-icon-checked;
+ background-image: escape-svg($custom-checkbox-indicator-icon-checked);
}
}
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
}
&::after {
- background-image: $custom-checkbox-indicator-icon-indeterminate;
+ background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
- background-color: $custom-control-indicator-checked-disabled-bg;
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
&:indeterminate ~ .custom-control-label::before {
- background-color: $custom-control-indicator-checked-disabled-bg;
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
.custom-radio {
.custom-control-label::before {
+ // stylelint-disable-next-line property-disallowed-list
border-radius: $custom-radio-indicator-border-radius;
}
.custom-control-input:checked ~ .custom-control-label {
&::after {
- background-image: $custom-radio-indicator-icon-checked;
+ background-image: escape-svg($custom-radio-indicator-icon-checked);
+ }
+ }
+
+ .custom-control-input:disabled {
+ &:checked ~ .custom-control-label::before {
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+ }
+ }
+}
+
+
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+ padding-left: $custom-switch-width + $custom-control-gutter;
+
+ .custom-control-label {
+ &::before {
+ left: -($custom-switch-width + $custom-control-gutter);
+ width: $custom-switch-width;
+ pointer-events: all;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $custom-switch-indicator-border-radius;
+ }
+
+ &::after {
+ top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+ left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
+ width: $custom-switch-indicator-size;
+ height: $custom-switch-indicator-size;
+ background-color: $custom-control-indicator-border-color;
+ // stylelint-disable-next-line property-disallowed-list
+ border-radius: $custom-switch-indicator-border-radius;
+ @include transition(transform .15s ease-in-out, $custom-forms-transition);
+ }
+ }
+
+ .custom-control-input:checked ~ .custom-control-label {
+ &::after {
+ background-color: $custom-control-indicator-bg;
+ transform: translateX($custom-switch-width - $custom-control-indicator-size);
}
}
.custom-control-input:disabled {
&:checked ~ .custom-control-label::before {
- background-color: $custom-control-indicator-checked-disabled-bg;
+ @include gradient-bg($custom-control-indicator-checked-disabled-bg);
}
}
}
width: 100%;
height: $custom-select-height;
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+ font-family: $custom-select-font-family;
+ @include font-size($custom-select-font-size);
font-weight: $custom-select-font-weight;
line-height: $custom-select-line-height;
color: $custom-select-color;
vertical-align: middle;
- background: $custom-select-background;
- background-color: $custom-select-bg;
+ background: $custom-select-bg $custom-select-background;
border: $custom-select-border-width solid $custom-select-border-color;
- @if $enable-rounded {
- border-radius: $custom-select-border-radius;
- } @else {
- border-radius: 0;
- }
+ @include border-radius($custom-select-border-radius, 0);
@include box-shadow($custom-select-box-shadow);
appearance: none;
border-color: $custom-select-focus-border-color;
outline: 0;
@if $enable-shadows {
- box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
+ @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $custom-select-focus-box-shadow;
}
// Hides the default caret in IE11
&::-ms-expand {
- opacity: 0;
+ display: none;
+ }
+
+ // Remove outline from select box in FF
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $custom-select-color;
}
}
padding-top: $custom-select-padding-y-sm;
padding-bottom: $custom-select-padding-y-sm;
padding-left: $custom-select-padding-x-sm;
- font-size: $custom-select-font-size-sm;
+ @include font-size($custom-select-font-size-sm);
}
.custom-select-lg {
padding-top: $custom-select-padding-y-lg;
padding-bottom: $custom-select-padding-y-lg;
padding-left: $custom-select-padding-x-lg;
- font-size: $custom-select-font-size-lg;
+ @include font-size($custom-select-font-size-lg);
}
width: 100%;
height: $custom-file-height;
margin: 0;
+ overflow: hidden;
opacity: 0;
&:focus ~ .custom-file-label {
box-shadow: $custom-file-focus-box-shadow;
}
+ // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+ &[disabled] ~ .custom-file-label,
&:disabled ~ .custom-file-label {
background-color: $custom-file-disabled-bg;
}
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
+ overflow: hidden;
+ font-family: $custom-file-font-family;
font-weight: $custom-file-font-weight;
line-height: $custom-file-line-height;
color: $custom-file-color;
.custom-range {
width: 100%;
- height: calc(#{$custom-range-thumb-height} + #{$custom-range-thumb-focus-box-shadow-width * 2});
+ height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
&::-webkit-slider-thumb {
width: $custom-range-thumb-width;
height: $custom-range-thumb-height;
- margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific
+ margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
@include gradient-bg($custom-range-thumb-bg);
border: $custom-range-thumb-border;
@include border-radius($custom-range-thumb-border-radius);
cursor: $custom-range-track-cursor;
background-color: transparent;
border-color: transparent;
- border-width: ($custom-range-thumb-height * .5);
+ border-width: $custom-range-thumb-height / 2;
@include box-shadow($custom-range-track-box-shadow);
}