resources/tools/dash/app/pal/static/sass/bootstrap/forms/_form-check.scss

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