1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 16:19:53 +02:00

Simplify disabled styles (#29296)

* Simplify disabled styles

* Mention pointer-events usage
This commit is contained in:
Martijn Cuppens
2019-12-27 17:40:06 +01:00
committed by XhmikosR
parent 167a93a0f3
commit 4387038421
8 changed files with 50 additions and 63 deletions

View File

@@ -86,7 +86,7 @@ Buttons will appear pressed (with a darker background, darker border, and inset
## Disabled state
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
{{< example >}}
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>

View File

@@ -5,10 +5,14 @@ description: A generic close button for dismissing content like modals and alert
group: components
---
**Be sure to include text for screen readers**, as we've done with `aria-label`.
**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
{{< example >}}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="close" disabled aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{< /example >}}

View File

@@ -91,6 +91,10 @@ Changes to Reboot, typography, tables, and more.
## Components
### Disabled states
- Disabled states of the buttons, close button, pagination link & form range now have `pointer-events: none` added. This simplifies our codebase and makes it easier to override active states in CSS. [#29296](https://github.com/twbs/bootstrap/pull/29296).
### Alerts
- **Todo:** Remove auto-darkening of `<hr>` elements in `.alert-*` class variants. `<hr>`s use `rgba()` for their color, so these should naturally blend anyway.