|
|
|
|
|
|
|
|
|
.form-check { |
|
display: block; |
|
min-height: $form-check-min-height; |
|
padding-left: $form-check-padding-start; |
|
margin-bottom: $form-check-margin-bottom; |
|
|
|
.form-check-input { |
|
float: left; |
|
margin-left: $form-check-padding-start * -1; |
|
} |
|
} |
|
|
|
.form-check-input { |
|
width: $form-check-input-width; |
|
height: $form-check-input-width; |
|
margin-top: ($line-height-base - $form-check-input-width) / 2; |
|
vertical-align: top; |
|
background-color: $form-check-input-bg; |
|
background-repeat: no-repeat; |
|
background-position: center; |
|
background-size: contain; |
|
border: $form-check-input-border; |
|
appearance: none; |
|
color-adjust: exact; |
|
@include transition($form-check-transition); |
|
|
|
&[type="checkbox"] { |
|
@include border-radius($form-check-input-border-radius); |
|
} |
|
|
|
&[type="radio"] { |
|
|
|
border-radius: $form-check-radio-border-radius; |
|
} |
|
|
|
&:active { |
|
filter: $form-check-input-active-filter; |
|
} |
|
|
|
&:focus { |
|
border-color: $form-check-input-focus-border; |
|
outline: 0; |
|
box-shadow: $form-check-input-focus-box-shadow; |
|
} |
|
|
|
&:checked { |
|
background-color: $form-check-input-checked-bg-color; |
|
border-color: $form-check-input-checked-border-color; |
|
|
|
&[type="checkbox"] { |
|
@if $enable-gradients { |
|
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient); |
|
} @else { |
|
background-image: escape-svg($form-check-input-checked-bg-image); |
|
} |
|
} |
|
|
|
&[type="radio"] { |
|
@if $enable-gradients { |
|
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient); |
|
} @else { |
|
background-image: escape-svg($form-check-radio-checked-bg-image); |
|
} |
|
} |
|
} |
|
|
|
&[type="checkbox"]:indeterminate { |
|
background-color: $form-check-input-indeterminate-bg-color; |
|
border-color: $form-check-input-indeterminate-border-color; |
|
|
|
@if $enable-gradients { |
|
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient); |
|
} @else { |
|
background-image: escape-svg($form-check-input-indeterminate-bg-image); |
|
} |
|
} |
|
|
|
&:disabled { |
|
pointer-events: none; |
|
filter: none; |
|
opacity: $form-check-input-disabled-opacity; |
|
} |
|
|
|
|
|
|
|
&[disabled], |
|
&:disabled { |
|
~ .form-check-label { |
|
opacity: $form-check-label-disabled-opacity; |
|
} |
|
} |
|
} |
|
|
|
.form-check-label { |
|
color: $form-check-label-color; |
|
cursor: $form-check-label-cursor; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.form-switch { |
|
padding-left: $form-switch-padding-start; |
|
|
|
.form-check-input { |
|
width: $form-switch-width; |
|
margin-left: $form-switch-padding-start * -1; |
|
background-image: escape-svg($form-switch-bg-image); |
|
background-position: left center; |
|
@include border-radius($form-switch-border-radius); |
|
@include transition($form-switch-transition); |
|
|
|
&:focus { |
|
background-image: escape-svg($form-switch-focus-bg-image); |
|
} |
|
|
|
&:checked { |
|
background-position: $form-switch-checked-bg-position; |
|
|
|
@if $enable-gradients { |
|
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient); |
|
} @else { |
|
background-image: escape-svg($form-switch-checked-bg-image); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.form-check-inline { |
|
display: inline-block; |
|
margin-right: $form-check-inline-margin-end; |
|
} |
|
|
|
.btn-check { |
|
position: absolute; |
|
clip: rect(0, 0, 0, 0); |
|
pointer-events: none; |
|
|
|
&[disabled], |
|
&:disabled { |
|
+ .btn { |
|
pointer-events: none; |
|
filter: none; |
|
opacity: $form-check-btn-check-disabled-opacity; |
|
} |
|
} |
|
} |
|
|