1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 09:05:47 +02:00

Remove checkbox/radio toggle from button plugin in favor of a CSS only solution

This commit is contained in:
Martijn Cuppens
2020-05-02 11:11:24 +02:00
committed by Mark Otto
parent 1b2ea5efb1
commit 1a0a0858ef
10 changed files with 122 additions and 317 deletions

View File

@@ -10,15 +10,17 @@
> .btn {
position: relative;
flex: 1 1 auto;
}
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
&:hover,
&:focus,
&:active,
&.active {
z-index: 1;
}
// Bring the hover, focused, and "active" buttons to the front to overlay
// the borders properly
> .btn-toggle:checked + .btn,
> .btn-toggle:focus + .btn,
> .btn:hover,
> .btn:focus,
> .btn:active,
> .btn.active {
z-index: 1;
}
}
@@ -46,7 +48,11 @@
@include border-right-radius(0);
}
> .btn:not(:first-child),
// - Target second buttons which are not part of toggle buttons
// - Target third or more child
// - Target buttons in a button group
> :not(.btn-toggle) + .btn,
> .btn:nth-child(n + 3),
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
@@ -132,28 +138,3 @@
@include border-top-radius(0);
}
}
// Checkbox and radio options
//
// In order to support the browser's form validation feedback, powered by the
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
// `display: none;` or `visibility: hidden;` as that also hides the popover.
// Simply visually hiding the inputs via `opacity` would leave them clickable in
// certain cases which is prevented by using `clip` and `pointer-events`.
// This way, we ensure a DOM element is visible to position the popover from.
//
// See https://github.com/twbs/bootstrap/pull/12794 and
// https://github.com/twbs/bootstrap/pull/14559 for more information.
.btn-group-toggle {
> .btn,
> .btn-group > .btn {
input[type="radio"],
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
}
}