[Summary view] [Print] [Text view]

   1  //
   2  // Check/radio
   3  //
   4  
   5  .form-check {
   6    display: block;
   7    min-height: $form-check-min-height;
   8    padding-left: $form-check-padding-start;
   9    margin-bottom: $form-check-margin-bottom;
  10  
  11    .form-check-input {
  12      float: left;
  13      margin-left: $form-check-padding-start * -1;
  14    }
  15  }
  16  
  17  .form-check-input {
  18    width: $form-check-input-width;
  19    height: $form-check-input-width;
  20    margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
  21    vertical-align: top;
  22    background-color: $form-check-input-bg;
  23    background-repeat: no-repeat;
  24    background-position: center;
  25    background-size: contain;
  26    border: $form-check-input-border;
  27    appearance: none;
  28    color-adjust: exact; // Keep themed appearance for print
  29    @include transition($form-check-transition);
  30  
  31    &[type="checkbox"] {
  32      @include border-radius($form-check-input-border-radius);
  33    }
  34  
  35    &[type="radio"] {
  36      // stylelint-disable-next-line property-disallowed-list
  37      border-radius: $form-check-radio-border-radius;
  38    }
  39  
  40    &:active {
  41      filter: $form-check-input-active-filter;
  42    }
  43  
  44    &:focus {
  45      border-color: $form-check-input-focus-border;
  46      outline: 0;
  47      box-shadow: $form-check-input-focus-box-shadow;
  48    }
  49  
  50    &:checked {
  51      background-color: $form-check-input-checked-bg-color;
  52      border-color: $form-check-input-checked-border-color;
  53  
  54      &[type="checkbox"] {
  55        @if $enable-gradients {
  56          background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
  57        } @else {
  58          background-image: escape-svg($form-check-input-checked-bg-image);
  59        }
  60      }
  61  
  62      &[type="radio"] {
  63        @if $enable-gradients {
  64          background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
  65        } @else {
  66          background-image: escape-svg($form-check-radio-checked-bg-image);
  67        }
  68      }
  69    }
  70  
  71    &[type="checkbox"]:indeterminate {
  72      background-color: $form-check-input-indeterminate-bg-color;
  73      border-color: $form-check-input-indeterminate-border-color;
  74  
  75      @if $enable-gradients {
  76        background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
  77      } @else {
  78        background-image: escape-svg($form-check-input-indeterminate-bg-image);
  79      }
  80    }
  81  
  82    &:disabled {
  83      pointer-events: none;
  84      filter: none;
  85      opacity: $form-check-input-disabled-opacity;
  86    }
  87  
  88    // Use disabled attribute in addition of :disabled pseudo-class
  89    // See: https://github.com/twbs/bootstrap/issues/28247
  90    &[disabled],
  91    &:disabled {
  92      ~ .form-check-label {
  93        opacity: $form-check-label-disabled-opacity;
  94      }
  95    }
  96  }
  97  
  98  .form-check-label {
  99    color: $form-check-label-color;
 100    cursor: $form-check-label-cursor;
 101  }
 102  
 103  //
 104  // Switch
 105  //
 106  
 107  .form-switch {
 108    padding-left: $form-switch-padding-start;
 109  
 110    .form-check-input {
 111      width: $form-switch-width;
 112      margin-left: $form-switch-padding-start * -1;
 113      background-image: escape-svg($form-switch-bg-image);
 114      background-position: left center;
 115      @include border-radius($form-switch-border-radius);
 116      @include transition($form-switch-transition);
 117  
 118      &:focus {
 119        background-image: escape-svg($form-switch-focus-bg-image);
 120      }
 121  
 122      &:checked {
 123        background-position: $form-switch-checked-bg-position;
 124  
 125        @if $enable-gradients {
 126          background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
 127        } @else {
 128          background-image: escape-svg($form-switch-checked-bg-image);
 129        }
 130      }
 131    }
 132  }
 133  
 134  .form-check-inline {
 135    display: inline-block;
 136    margin-right: $form-check-inline-margin-end;
 137  }
 138  
 139  .btn-check {
 140    position: absolute;
 141    clip: rect(0, 0, 0, 0);
 142    pointer-events: none;
 143  
 144    &[disabled],
 145    &:disabled {
 146      + .btn {
 147        pointer-events: none;
 148        filter: none;
 149        opacity: $form-check-btn-check-disabled-opacity;
 150      }
 151    }
 152  }