mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Form check markup v2 (#25050)

Browse Source 
* 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
This commit is contained in:
Mark Otto
2017-12-22 16:13:01 -08:00
committed by GitHub
parent 13150872c6
commit 16f1417240
7 changed files with 235 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
scss/_forms.scss
View File

@@ -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;
}
}
}