1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +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

@@ -174,83 +174,56 @@ select.form-control {
//
// Indent the labels to position radios/checkboxes as hanging controls.
.radio,
.checkbox {
.form-check {
position: relative;
display: block;
// margin-top: ($spacer * .75);
margin-bottom: ($spacer * .75);
label {
padding-left: 1.25rem;
margin-bottom: 0;
cursor: pointer;
// Move up sibling radios or checkboxes for tighter spacing
+ .form-check {
margin-top: -.25rem;
}
// When there's no labels, don't position the input.
input:only-child {
position: static;
&.disabled {
.form-check-label {
cursor: $cursor-disabled;
}
}
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: .25rem;
// margin-top: 4px \9;
margin-left: -1.25rem;
.form-check-label {
padding-left: 1.25rem;
margin-bottom: 0; // Override default `<label>` bottom margin
cursor: pointer;
}
.radio + .radio,
.checkbox + .checkbox {
// Move up sibling radios or checkboxes for tighter spacing
margin-top: -.25rem;
.form-check-input {
position: absolute;
margin-top: .25rem;
margin-left: -1.25rem;
&:only-child {
position: static;
}
}
// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
.form-check-inline {
position: relative;
display: inline-block;
padding-left: 1.25rem;
margin-bottom: 0;
margin-bottom: 0; // Override default `<label>` bottom margin
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: .75rem;
}
// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
&:disabled,
+ .form-check-inline {
margin-left: .75rem;
}
&.disabled {
cursor: $cursor-disabled;
}
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
&.disabled {
cursor: $cursor-disabled;
}
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
&.disabled {
label {
cursor: $cursor-disabled;
}
}
}
// Form control feedback states

View File

@@ -321,6 +321,17 @@ textarea {
border-radius: 0;
}
input[type="radio"],
input[type="checkbox"] {
// Apply a disabled cursor for radios and checkboxes.
//
// Note: Neither radios nor checkboxes can be readonly.
&:disabled {
cursor: $cursor-disabled;
}
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],