Explicitly re-adds the "hand" `cursor:pointer` for non-disabled `.btn`, `.close`, `.navbar-toggler` elements, as well as forcing `page-link` pagination controls to always have the "hand" cursor (even if an author uses it on, say, `<button>` elements for a dynamically updating in-page pagination).
Controversial, as everybody jumped on the bandwagon following this article https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b - which does have its merits of course, but there are also counter-arguments like http://kizu.ru/en/issues/cursor-pointer/
And seeing the amount of issues we've seen following the change, and the potential complexity needed to consistently address the cursor issue (see https://github.com/twbs/bootstrap/issues/24156 where i explore how the cursor needs to be based on "intent", and how that's tough to determine), I'm favouring an opinionated take here of just reintroducing the `cursor:pointer`.
* Update the form focus mixin to use a manual `$enable-shadows` check so we can always ensure a focus state for accessibility and consistency
* - Add new `$input-btn-focus-width` and `$input-btn-focus-color` variables.
- Replace separate `$btn-focus-box-shadow` and `$input-focus-box-shadow`
variables with unified `$input-btn-focus-box-shadow` to match our
combined variables approach elsewhere.
* Put new focus width var to use in buttons mixins
* use new button input-box shadow var
* Add a new mixin for quickly adding linear gradient to components when $enable-gradients is set to true
* use correct var
* fix focus shadows in button mixins
* Add opt-in gradients to alerts, buttons, carousel, custom radios and checkboxes, custom file input, and dropdown items
* Generate .bg-gradient- utilities
* add headings to colors page and document bg-gradient utils
* update the button color for active status, check with yiq as it's done for basic state and hover state
Uses some if/else action to ensure there's readable text on hover. Swapped out a hex value to a variable while I was in there.
Fixes#23398, fixes#23351.
When focused, these buttons styled as links still give good visible focus indication through the underline, so this should not be a concern. Closes#22655
- removes original outline removal (hah)
- replaces it with an explicit `outline: 0` on `.btn`
- instead of replicating `:hover` for `:focus`, uses custom and themed `box-shadow` for an "outline"
- not mapped to the `$enable-shadows` variable because accessibility
Trying to simplify our output here by revamping these selectors. We overcomplicated things by setting hover styles for nearly every state (disabled and active included), and we set them in the wrong order.
This commit does the following:
- Reorders states so disabled comes before active, thereby removing the need to set disabled-active styles.
- Removes all focus and hover styles from disabled states as those will naturally inherit from the default button state.
- Renamed `.open` to `.show` to fix dropdown toggle highlighting.
- Tweaked some indendation in the Sass.
- Moves from no set line-height (inherited of 1.5) to declared 1.25 for
all inputs and buttons (regardless of size modifier).
- Updates padding to be `.5rem` instead of `.375rem` so that padding is
more likely to be whole numbers based on the root font-size.
- Whole numbers will be beneficial in avoiding odd fractional pixels
that can lead to misalignment as shown in #18607.
- Large buttons and inputs are now a tad wider, and smaller
buttons/inputs a tad shorter and narrower, too.
- Rename -height to -height-base to match other vars
- Drop use of -height across the board and rely on it to be inherited
- Adjust padding of .dropdown-header to account for different line-height of h6 heading element (this needs refactoring for variables and rems also)
Both widgets need to use the same border width because of input groups.
Thus:
$btn-border-width => $input-btn-border-width
$input-border-width => $input-btn-border-width
[skip sauce]
If we want to support namespaced import:
```scss
.twbs {
@import 'bootstrap';
}
```
We cannot use `selector &`, see sass/sass#1817.
`fieldset[disabled] &` is not needed as we no longer support IE8.
- no real need for everything to be 100% shared
- padding looked and felt too large for inputs but not for buttons
- tying forms and buttons seems fine, but throwing in pagination feels wrong
Mark Otto
Mark Otto
patrickhlauke
Andres Galante
Patrick Yeo
XhmikosR
i.sychev
Prateek Goel
Svyatoslav Polishchuk
Dominic Watson
Tom Lutzenberger
Simon Bächler
Chris Rebert
Gleb Mazovetskiy
Sid Roberts
Chris Rebert