bootstrap/forms/_form-check.scss

0001 //
0002 // Check/radio
0003 //
0004
0005 .form-check {
0006   display: block;
0007   min-height: $form-check-min-height;
0008   padding-left: $form-check-padding-start;
0009   margin-bottom: $form-check-margin-bottom;
0010
0011   .form-check-input {
0012     float: left;
0013     margin-left: $form-check-padding-start * -1;
0014   }
0015 }
0016
0017 .form-check-input {
0018   width: $form-check-input-width;
0019   height: $form-check-input-width;
0020   margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
0021   vertical-align: top;
0022   background-color: $form-check-input-bg;
0023   background-repeat: no-repeat;
0024   background-position: center;
0025   background-size: contain;
0026   border: $form-check-input-border;
0027   appearance: none;
0028   color-adjust: exact; // Keep themed appearance for print
0029   @include transition($form-check-transition);
0030
0031   &[type="checkbox"] {
0032     @include border-radius($form-check-input-border-radius);
0033   }
0034
0035   &[type="radio"] {
0036     // stylelint-disable-next-line property-disallowed-list
0037     border-radius: $form-check-radio-border-radius;
0038   }
0039
0040   &:active {
0041     filter: $form-check-input-active-filter;
0042   }
0043
0044   &:focus {
0045     border-color: $form-check-input-focus-border;
0046     outline: 0;
0047     box-shadow: $form-check-input-focus-box-shadow;
0048   }
0049
0050   &:checked {
0051     background-color: $form-check-input-checked-bg-color;
0052     border-color: $form-check-input-checked-border-color;
0053
0054     &[type="checkbox"] {
0055       @if $enable-gradients {
0056         background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
0057       } @else {
0058         background-image: escape-svg($form-check-input-checked-bg-image);
0059       }
0060     }
0061
0062     &[type="radio"] {
0063       @if $enable-gradients {
0064         background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
0065       } @else {
0066         background-image: escape-svg($form-check-radio-checked-bg-image);
0067       }
0068     }
0069   }
0070
0071   &[type="checkbox"]:indeterminate {
0072     background-color: $form-check-input-indeterminate-bg-color;
0073     border-color: $form-check-input-indeterminate-border-color;
0074
0075     @if $enable-gradients {
0076       background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
0077     } @else {
0078       background-image: escape-svg($form-check-input-indeterminate-bg-image);
0079     }
0080   }
0081
0082   &:disabled {
0083     pointer-events: none;
0084     filter: none;
0085     opacity: $form-check-input-disabled-opacity;
0086   }
0087
0088   // Use disabled attribute in addition of :disabled pseudo-class
0089   // See: https://github.com/twbs/bootstrap/issues/28247
0090   &[disabled],
0091   &:disabled {
0092     ~ .form-check-label {
0093       opacity: $form-check-label-disabled-opacity;
0094     }
0095   }
0096 }
0097
0098 .form-check-label {
0099   color: $form-check-label-color;
0100   cursor: $form-check-label-cursor;
0101 }
0102
0103 //
0104 // Switch
0105 //
0106
0107 .form-switch {
0108   padding-left: $form-switch-padding-start;
0109
0110   .form-check-input {
0111     width: $form-switch-width;
0112     margin-left: $form-switch-padding-start * -1;
0113     background-image: escape-svg($form-switch-bg-image);
0114     background-position: left center;
0115     @include border-radius($form-switch-border-radius);
0116
0117     &:focus {
0118       background-image: escape-svg($form-switch-focus-bg-image);
0119     }
0120
0121     &:checked {
0122       background-position: $form-switch-checked-bg-position;
0123
0124       @if $enable-gradients {
0125         background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
0126       } @else {
0127         background-image: escape-svg($form-switch-checked-bg-image);
0128       }
0129     }
0130   }
0131 }
0132
0133 .form-check-inline {
0134   display: inline-block;
0135   margin-right: $form-check-inline-margin-end;
0136 }
0137
0138 .btn-check {
0139   position: absolute;
0140   clip: rect(0, 0, 0, 0);
0141   pointer-events: none;
0142
0143   &[disabled],
0144   &:disabled {
0145     + .btn {
0146       pointer-events: none;
0147       filter: none;
0148       opacity: $form-check-btn-check-disabled-opacity;
0149     }
0150   }
0151 }