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
parent
bd904d70c9
commit
dde85e9888
|
|
@ -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
|
|
@ -425,41 +425,41 @@ Grid-based form layouts also support large and small inputs.
|
|||
|
||||
## Checkboxes and radios
|
||||
|
||||
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
|
||||
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
|
||||
Disabled checkboxes and radios are supported, but to provide a `not-allowed` cursor on hover of the parent `<label>`, you'll need to add the `.disabled` class to the parent `.form-check`.
|
||||
|
||||
### Default (stacked)
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="">
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" value="" disabled>
|
||||
Option two is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
Option one is this and that—be sure to include why it's great
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
Option two can be something else and selecting it will deselect option one
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
<div class="form-check disabled">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
Option three is disabled
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -467,29 +467,29 @@ Disabled checkboxes and radios are supported, but to provide a "not-allowed" cur
|
|||
|
||||
### Inline
|
||||
|
||||
Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes or radios for controls that appear on the same line.
|
||||
Groups of checkboxes or radios that appear on the same horizontal row are similar to their stacked counterparts, but require different HTML and a single class. To switch from stacked to inline, drop the surrounding `<div>`, add `.form-check-inline` to the `<label>`, and keep the `.form-check-input` on the `<input>`.
|
||||
|
||||
{% example html %}
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||||
</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
<label class="form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
|
||||
</label>
|
||||
{% endexample %}
|
||||
|
||||
|
|
@ -498,14 +498,14 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
|
|||
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
|
||||
|
||||
{% example html %}
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
|
|||
Loading…
Reference in New Issue