1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 00:29:52 +02:00

Redo checkboxes and radios

- Move disabled radio and checkbox styles to Reboot
- Collapse .radio and .checkbox into single class, .form-check
- Collapse .radio-inline and .checkbox-inline into single class, .form-check-inline
- Require classes for sub-elements in both new classes
This commit is contained in:
Mark Otto
2016-05-08 16:05:27 -07:00
parent bd904d70c9
commit dde85e9888
11 changed files with 122 additions and 164 deletions

View File

@@ -477,6 +477,11 @@ textarea {
border-radius: 0;
}
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
cursor: not-allowed;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
@@ -2242,41 +2247,37 @@ select.form-control:focus::-ms-value {
margin-bottom: 1rem;
}
.radio,
.checkbox {
.form-check {
position: relative;
display: block;
margin-bottom: 0.75rem;
}
.radio label,
.checkbox label {
.form-check + .form-check {
margin-top: -.25rem;
}
.form-check.disabled .form-check-label {
cursor: not-allowed;
}
.form-check-label {
padding-left: 1.25rem;
margin-bottom: 0;
cursor: pointer;
}
.radio label input:only-child,
.checkbox label input:only-child {
position: static;
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
.form-check-input {
position: absolute;
margin-top: .25rem;
margin-left: -1.25rem;
}
.radio + .radio,
.checkbox + .checkbox {
margin-top: -.25rem;
.form-check-input:only-child {
position: static;
}
.radio-inline,
.checkbox-inline {
.form-check-inline {
position: relative;
display: inline-block;
padding-left: 1.25rem;
@@ -2285,25 +2286,11 @@ select.form-control:focus::-ms-value {
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
.form-check-inline + .form-check-inline {
margin-left: .75rem;
}
input[type="radio"]:disabled, input[type="radio"].disabled,
input[type="checkbox"]:disabled,
input[type="checkbox"].disabled {
cursor: not-allowed;
}
.radio-inline.disabled,
.checkbox-inline.disabled {
cursor: not-allowed;
}
.radio.disabled label,
.checkbox.disabled label {
.form-check-inline.disabled {
cursor: not-allowed;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long