diff options
author | Mark Otto <markd.otto@gmail.com> | 2017-12-23 03:13:01 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-12-23 03:13:01 +0300 |
commit | 16f14172406fd88ddb21242ea361833ec19d4fc6 (patch) | |
tree | b3b73371bf3b8d2d6273b0a9fb6235e48b7a2bbf /scss/_forms.scss | |
parent | 13150872c6637d0d224aa9d14fe8e103aff3139e (diff) |
Form check markup v2 (#25050)
* match layout behaviors
* ditch the indicator as separate element for psuedo-elements on the label
* move disabled to attribute only on input
* redo default inline check to support new markup
* redo inline forms
* clean up vars
* update validation mixin to new structure
* update checks in docs
* linting for for/id attributes
Diffstat (limited to 'scss/_forms.scss')
-rw-r--r-- | scss/_forms.scss | 51 |
1 files changed, 19 insertions, 32 deletions
diff --git a/scss/_forms.scss b/scss/_forms.scss index 9cec3ac9c7..72bde5784e 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -207,33 +207,35 @@ select.form-control-lg { .form-check { position: relative; display: block; - margin-bottom: $form-check-margin-bottom; - - &.disabled { - .form-check-label { - color: $text-muted; - } - } -} - -.form-check-label { padding-left: $form-check-input-gutter; - margin-bottom: 0; // Override default `<label>` bottom margin } .form-check-input { position: absolute; margin-top: $form-check-input-margin-y; margin-left: -$form-check-input-gutter; + + &:disabled ~ .form-check-label { + color: $text-muted; + } +} + +.form-check-label { + margin-bottom: 0; // Override default `<label>` bottom margin } -// Radios and checkboxes on same line .form-check-inline { - display: inline-block; + display: inline-flex; + align-items: center; + padding-left: 0; // Override base .form-check margin-right: $form-check-inline-margin-x; - .form-check-label { - vertical-align: middle; + // Undo .form-check-input defaults and add some `margin-right`. + .form-check-input { + position: static; + margin-top: 0; + margin-right: $form-check-inline-input-margin-x; + margin-left: 0; } } @@ -310,10 +312,6 @@ select.form-control-lg { align-items: center; justify-content: center; width: auto; - margin-top: 0; - margin-bottom: 0; - } - .form-check-label { padding-left: 0; } .form-check-input { @@ -323,23 +321,12 @@ select.form-control-lg { margin-left: 0; } - // Custom form controls .custom-control { - display: flex; align-items: center; justify-content: center; - padding-left: 0; - } - .custom-control-indicator { - position: static; - display: inline-block; - margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate. - vertical-align: text-bottom; } - - // Re-override the feedback icon. - .has-feedback .form-control-feedback { - top: 0; + .custom-control-label { + margin-bottom: 0; } } } |