diff options
| author | Nikita Mikhaylov <[email protected]> | 2020-09-29 21:49:50 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-09-29 21:49:50 +0300 |
| commit | 0cb880c7fbd93d262a29e4660975d5c8cc0b9676 (patch) | |
| tree | b7f190ccfc248facd7ca5636f05116f5f5ed52a7 /scss | |
| parent | 319954d369a09c1bca1fc1721f6977e3a7b1d86d (diff) | |
| download | bootstrap-0cb880c7fbd93d262a29e4660975d5c8cc0b9676.tar.xz bootstrap-0cb880c7fbd93d262a29e4660975d5c8cc0b9676.zip | |
Fix disabled checkbox toggle buttons (#31651)
* fix disabled checkbox toggle buttons
* add disabled checks-radios examples in documentation
Co-authored-by: XhmikosR <[email protected]>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 4 | ||||
| -rw-r--r-- | scss/forms/_form-check.scss | 13 |
2 files changed, 15 insertions, 2 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index e4d844ffd..3657aa522 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -695,6 +695,10 @@ $form-check-input-indeterminate-bg-color: $component-active-bg !default; $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default; +$form-check-input-disabled-opacity: .5 !default; +$form-check-label-disabled-opacity: $form-check-input-disabled-opacity !default; +$form-check-btn-check-disabled-opacity: $btn-disabled-opacity !default; + $form-switch-color: rgba(0, 0, 0, .25) !default; $form-switch-width: 2em !default; $form-switch-padding-left: $form-switch-width + .5em !default; diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 84e3e57d1..16a27246a 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -82,7 +82,7 @@ &:disabled { pointer-events: none; filter: none; - opacity: .5; + opacity: $form-check-input-disabled-opacity; } // Use disabled attribute in addition of :disabled pseudo-class @@ -90,7 +90,7 @@ &[disabled], &:disabled { ~ .form-check-label { - opacity: .5; + opacity: $form-check-label-disabled-opacity; } } } @@ -139,4 +139,13 @@ 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; + } + } } |