mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 15:50:01 +02:00
Code Issues Releases Wiki Activity

Redo checkboxes and radios

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

55
dist/css/bootstrap.css
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;
}