Instead of applying `.btn-` or `.input-` to individual elements in
button and input groups, we now have new sizing classes to keep your
markup a little leaner.
* Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to
replicate `.input-sm` and `.input-lg`, respectively.
* Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your
`.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`,
respectively.
Both sets of new sizing classes simply use the existing individual
sizing classes as mixins, so customization of them is automatically
inherited when compiling.
This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices.
What was done
- Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria)
- Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users.
- Advised users to always use label elements. For inline forms, they can hide them with `.sr-only`
- Added 'Skip navigation' link
- Added "Accessibility" section to getting-started.html.
What *wasn't* done
- Contrast issues (twbs#3572)
- Tooltips (twbs#8469)
- Documentation re: usage of icons, since they now live in a separate repo
Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out.
- Also fixes the vertical alignment of labels in horizontal layouts on
account of the recent button and input padding changes
- Also changes the vertical alignment of the checkboxes and radios in
horizontal forms
* Moves input groups CSS into separate file
* Moves input groups docs into the Components page
* Add support for radios and checkboxes in input groups to fix#8679
* Remove `@carousel-control-hover-color` since that's just the same as
the default control color and all we change is `opacity` (it's required
for specificity).
* Add vars to customizer
* Update customizer nav to include new section
* Remove the `li` from the var names
* Consolidate and simplify `text-shadow` vars
