* v5: Promote floating labels example to component
- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example
* Update floating labels to support .form-select, make inputs and selects more consistent
- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity
* Streamline and bulletproof some things
- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC
* Move some values to variables, switch from scaling font-size to scale, update transforms
* Bring over changes from #30966 and add to them to tighten things up
* Delete the now unused example images
* Fix typo
* Allowlist the calc function
* Add transform-origin, update transform values
* Test out autofill fix
* Fix linter issue
* Mention it in the migration guide
* Bump bundlesize
* Add one more variable per review
* Shave .25rem off the height
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* v5: Add .fs-* utilities for font-size
- Adds new font-sizes Sass map
- Generates six new classes for setting only font-size
- Updates docs to mention this, including a scss-docs reference
* Update font utilities
- Make .fs-* utils for font-size use RFS
- Rename .font-weight-* utils to .fw-*
- Rename .font-style-* utils to .f-*
- Update order of utilities a bit
- Update docs to match
* Update migration docs to make note of these changes
* Be more specific in font-size docs about scale
* Update font-style abbreviation to .fst
* Fix font-weight property
* Formatting & font style utility fix
* Move to Alpha 3 migration section
* Update migration guide for more details, splitting alpha 2 stuff back to the appropriate section in Migration guide
* Tweak language on example
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
* Rename Navs to Navs and Tabs
Fixes#31378
* Add title to renamed file
* Update navs-tabs.md
* Add alias/redirect
* Fix references to renamed file, tweak title
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
- Remove group selector for ratio items
- Drop the .ratio-item entirely
- Update docs to explain updated approach
- Update Migration guide to reflect the latest
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
* Add default parameters to each border radius mixin
* Add border radius changes to migration guide
Co-authored-by: Jeremy Jackson <jeremy@librarymarket.com>
* Support 'null' and drop `none` with multiple args
* Output a warning when use 'none' with multiple arguments
* Add migration note
* Update migration.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add padding to badges
The current badges are very tightly padded, and because the top and bottom padding are the same, and aligned to the baseline, this makes badges with descenders (e.g. the "g" in "Danger") look uncomfortably close to the bottom. Adding more ample padding masks this a bit.
An alternative would be to have separate top and bottom padding, with the bottom one slightly larger than the top - but conversely, that then makes badges that contain no text with descenders, and particularly badges that contain all uppercase characters, look too bottom-heavy.
Also adding some left/right extra padding, as currently the pill badges look uncomfortably tight on the sides due to the rounding.
* Clarify screen reader changes
* Add some docs and reboot notes to migration guide
* Add mention of docs renaming of screen reader helper page
* Mention null vars from navs PR at #31035
* Update migration.md
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* feat(buttons): easier disabled state customization
* docs(migration): mention new arguments for disabled state in button-variant()
* Update migration.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Rename `sr-only`/`sr-only-focusable`
To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Docs: rename form checks page to "Checks / radios"
it's not immediately obvious that "checks" includes information about both checkboxes and radio buttons. while "checks / radios" is also still not perfect (as honestly even I didn't quite grok that "checks" meant checkboxes), it should make it slightly more obvious nonetheless
- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
- Use a semitransparent gradient from light to dark which works on any background-color
- Store the gradient as a custom property (--bs-gradient)
- Remove `.bg-gradient-*` variants in favour of `.bg-gradient` which works even when `$enable-gradients` are enabled
- Add gradients to navbar, active page links and badges when gradients are enabled
