mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Switch to btn-check
This commit is contained in:
parent
1a0a0858ef
commit
8b7b234fd1
7 changed files with 29 additions and 29 deletions
|
@ -14,8 +14,8 @@
|
||||||
|
|
||||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||||
// the borders properly
|
// the borders properly
|
||||||
> .btn-toggle:checked + .btn,
|
> .btn-check:checked + .btn,
|
||||||
> .btn-toggle:focus + .btn,
|
> .btn-check:focus + .btn,
|
||||||
> .btn:hover,
|
> .btn:hover,
|
||||||
> .btn:focus,
|
> .btn:focus,
|
||||||
> .btn:active,
|
> .btn:active,
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
// - Target second buttons which are not part of toggle buttons
|
// - Target second buttons which are not part of toggle buttons
|
||||||
// - Target third or more child
|
// - Target third or more child
|
||||||
// - Target buttons in a button group
|
// - Target buttons in a button group
|
||||||
> :not(.btn-toggle) + .btn,
|
> :not(.btn-check) + .btn,
|
||||||
> .btn:nth-child(n + 3),
|
> .btn:nth-child(n + 3),
|
||||||
> .btn-group:not(:first-child) > .btn {
|
> .btn-group:not(:first-child) > .btn {
|
||||||
@include border-left-radius(0);
|
@include border-left-radius(0);
|
||||||
|
|
|
@ -24,14 +24,14 @@
|
||||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle:focus + &,
|
.btn-check:focus + &,
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: $btn-focus-box-shadow;
|
box-shadow: $btn-focus-box-shadow;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle:checked + &,
|
.btn-check:checked + &,
|
||||||
.btn-toggle:active + &,
|
.btn-check:active + &,
|
||||||
&:active,
|
&:active,
|
||||||
&.active {
|
&.active {
|
||||||
@include box-shadow($btn-active-box-shadow);
|
@include box-shadow($btn-active-box-shadow);
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
margin-right: $form-check-inline-margin-right;
|
margin-right: $form-check-inline-margin-right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle {
|
.btn-check {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
clip: rect(0, 0, 0, 0);
|
clip: rect(0, 0, 0, 0);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
border-color: $hover-border;
|
border-color: $hover-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle:focus + &,
|
.btn-check:focus + &,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $hover-color;
|
color: $hover-color;
|
||||||
@include gradient-bg($hover-background);
|
@include gradient-bg($hover-background);
|
||||||
|
@ -38,8 +38,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle:checked + &,
|
.btn-check:checked + &,
|
||||||
.btn-toggle:active + &,
|
.btn-check:active + &,
|
||||||
&:active,
|
&:active,
|
||||||
&.active,
|
&.active,
|
||||||
.show > &.dropdown-toggle {
|
.show > &.dropdown-toggle {
|
||||||
|
@ -85,13 +85,13 @@
|
||||||
border-color: $active-border;
|
border-color: $active-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle:focus + &,
|
.btn-check:focus + &,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-toggle:checked + &,
|
.btn-check:checked + &,
|
||||||
.btn-toggle:active + &,
|
.btn-check:active + &,
|
||||||
&:active,
|
&:active,
|
||||||
&.active,
|
&.active,
|
||||||
&.dropdown-toggle.show {
|
&.dropdown-toggle.show {
|
||||||
|
|
|
@ -103,7 +103,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
|
||||||
|
|
||||||
## Button plugin
|
## Button plugin
|
||||||
|
|
||||||
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
The button plugin allows you to create simple on/off toggle buttons.
|
||||||
|
|
||||||
### Toggle states
|
### Toggle states
|
||||||
|
|
||||||
|
|
|
@ -214,16 +214,16 @@ Omit the wrapping `.form-check` for checkboxes and radios that have no label tex
|
||||||
|
|
||||||
### Checkbox toggle buttons
|
### Checkbox toggle buttons
|
||||||
|
|
||||||
Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-toggle` class as previous sibling to toggle the input state.
|
Bootstrap's `.btn` styles can be applied to `<label>`s, to provide checkbox style button toggling. Add an input with a `.btn-check` class as previous sibling to toggle the input state.
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<input type="checkbox" class="btn-toggle" id="btn-toggle" autocomplete="off">
|
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
|
||||||
<label class="btn btn-primary" for="btn-toggle">Single toggle</label>
|
<label class="btn btn-primary" for="btn-check">Single toggle</label>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<input type="checkbox" class="btn-toggle" id="btn-toggle-2" checked autocomplete="off">
|
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
|
||||||
<label class="btn btn-primary" for="btn-toggle-2">Checked</label>
|
<label class="btn btn-primary" for="btn-check-2">Checked</label>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
||||||
### Radio toggle buttons
|
### Radio toggle buttons
|
||||||
|
@ -232,13 +232,13 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<input type="radio" class="btn-toggle" name="options" id="option1" autocomplete="off" checked>
|
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
|
||||||
<label class="btn btn-secondary" for="option1">Checked</label>
|
<label class="btn btn-secondary" for="option1">Checked</label>
|
||||||
|
|
||||||
<input type="radio" class="btn-toggle" name="options" id="option2" autocomplete="off">
|
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
|
||||||
<label class="btn btn-secondary" for="option2">Radio</label>
|
<label class="btn btn-secondary" for="option2">Radio</label>
|
||||||
|
|
||||||
<input type="radio" class="btn-toggle" name="options" id="option3" autocomplete="off">
|
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off">
|
||||||
<label class="btn btn-secondary" for="option3">Radio</label>
|
<label class="btn btn-secondary" for="option3">Radio</label>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
@ -246,17 +246,17 @@ Toggle buttons can be grouped in a [button group]({{< docsref "/components/butto
|
||||||
### Outlined styles
|
### Outlined styles
|
||||||
|
|
||||||
{{< example >}}
|
{{< example >}}
|
||||||
<input type="checkbox" class="btn-toggle" id="btn-toggle-outlined" autocomplete="off">
|
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
|
||||||
<label class="btn btn-outline-primary" for="btn-toggle-outlined">Single toggle</label><br>
|
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>
|
||||||
|
|
||||||
<input type="checkbox" class="btn-toggle" id="btn-toggle-2-outlined" checked autocomplete="off">
|
<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
|
||||||
<label class="btn btn-outline-secondary" for="btn-toggle-2-outlined">Checked</label><br>
|
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>
|
||||||
|
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<input type="radio" class="btn-toggle" name="options-outlined" id="success-outlined" autocomplete="off" checked>
|
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
|
||||||
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
|
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
|
||||||
|
|
||||||
<input type="radio" class="btn-toggle" name="options-outlined" id="danger-outlined" autocomplete="off">
|
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
|
||||||
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
|
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
|
||||||
</div>
|
</div>
|
||||||
{{< /example >}}
|
{{< /example >}}
|
||||||
|
|
|
@ -150,7 +150,7 @@ Badges were overhauled to better differentiate themselves from buttons and to be
|
||||||
|
|
||||||
### Buttons
|
### Buttons
|
||||||
|
|
||||||
- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-toggle` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650).
|
- The checkbox/radio toggle is removed from the button plugin in favour of a CSS only solution, which is documented in the [form checks]({{< docsref "/forms/checks#toggle-buttons" >}}) docs. The `.btn-check` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650).
|
||||||
|
|
||||||
### Cards
|
### Cards
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue