- Pushes the borders to the .accordion-item
- Simplifies the .accordion-flush
- Recreates the .accordion-button border-bottom with an inset box-shadow
- Updates background-color to solid to match other components like list group and prevent stacked translucent borders
- Use negative margin to overlap the consecutive items
* Add a new offcanvas component
* offcanvas.js: switch to string constants and `event.key`
* Remove unneeded code
* Sass optimizations
* Fixes
Make sure the element is hidden and not offscreen when inactive
fix close icon negative margins
Add content in right & bottom examples
Re-fix bottom offcanvas height not to cover all viewport
* Wording tweaks
* update tests and offcanvas class
* separate scrollbar functionality and use it in offcanvas
* Update .bundlewatch.config.json
* fix focus
* update btn-close / fix focus on close
* add aria-modal and role
return focus on trigger when offcanvas is closed
change body scrolling timings
* move common code to reusable functions
* add aria-labelledby
* Replace lorem ipsum text
* fix focus when offcanvas is closed
* updates
* revert modal, add tests for scrollbar
* show backdrop by default
* Update offcanvas.md
* Update offcanvas CSS to better match modals
- Add background-clip for borders
- Move from outline to border (less clever, more consistent)
- Add scss-docs in vars
* Revamp offcanvas docs
- Add static example to show and explain the components
- Split live examples and rename them
- Simplify example content
- Expand docs notes elsewhere
- Add sass docs
* Add .offcanvas-title instead of .modal-title
* Rename offcanvas example to offcanvas-navbar to reflect it's purpose
* labelledby references title and not header
* Add default shadow to offcanvas
* enable offcanvas-body to fill all the remaining wrapper area
* Be more descriptive, on Accessibility area
* remove redundant classes
* ensure in case of an already open offcanvas, not to open another one
* bring back backdrop|scroll combinations
* bring back toggling class
* refactor scrollbar method, plus tests
* add check if element is not full-width, according to #30621
* revert all in modal
* use documentElement innerWidth
* Rename classes to -start and -end
Also copyedit some docs wording
* omit some things on scrollbar
* PASS BrowserStack tests
-- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling.
* Rename '_handleClosing' to '_addEventListeners'
* change pipe usage to comma
* change Data.getData to Data.get
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
It's unclear what the reason for first introducing the original hack here (for `[tabindex="-1"]:focus {...}`) was. Seems something that may have been useful/necessary in SuitCSS, but don't think BS ever relied on this. https://github.com/twbs/bootstrap/issues/18330
It's since been modified to only apply when the browser wouldn't apply a visible outline anyway based on its own heuristics (the `:not(:focus-visible)` part) https://github.com/twbs/bootstrap/pull/28437/
But now, thinking this through more...in browsers that do support this pseudo-selector, what this is essentially saying is redundant: don't apply outline in cases where a `tabindex="-1"` element receives focus but the browser wouldn't normally apply focus outline". at best, this is unnecessary. at worst, this actually overrides things an author may explicitly be trying to do with adding `:focus { outline: ... }` explicitly.
* WIP: Mention variables, mixins, and loops in docs
* Add Sass sections to component pages
* add sass docs for forms and content
* Update buttons.md
* Remove empty mixins sections
* Massive update to utilities and some consistency changes
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Create the popper instance first
Make sure that popper instance has been created first and then apply the
styling on the dropdown(menu)
* Use `data-bs-popper` attibute to check popper
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* Dynamic tabs: use buttons rather than links
- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background
* Update js unit and visual test accordingly
- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)
* Add isolation:isolate to prevent focus being overlapped
https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
* Remove the margin from dropdown in favor of Popper
- Set the default margin to 0 for dropdowns (To remove the Popper's warning)
- Set the required offset in dropdown's defaults
* Remove the margin from the popover component
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Carousel: use buttons, not links, for prev/next
- expand the styles to neutralise border/background
- change docs page
- add extra unit test to check that links or buttons work as controls
- modify visual test to use buttons as well
- use buttons instead of links for prev/next
- remove `role="button"` from links that are actually links
* Clarify that controls can be button or link
* Update site/content/docs/5.0/components/carousel.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Explicitly set padding to 0 to prevent dipping/moving on active in Firefox
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
From initial testing, this bug doesn't seem to manifest itself anywhere in Bootstrap (since we don't just set transparent background anywhere on buttons, and when we do set explicit button styles in the more specific stylings, we already do create a custom `:focus` style anyway)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Adds currently missing utilities classes which are located in scss/helpers to
boostrap-utilities dist files.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Add some variables to allow users to modify how much a button gets
lighter or darker on :hover and :active.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
The RTL cheatsheet's dropdowns aren't positioned correctly because of RTLCSS transforming `right: auto` to `left:auto` (which conflicts with Popper positioning).
- Add CSS custom property with fallback to Sass variable
- Update docs to mention the new CSS custom property
- Rewrite some of the docs to use divider instead of separator, and add some context here and there
Remove the default invisible gradient causing the performance issue in #32266. By removing the custom property, the linear gradient will become invalid, thus not appear by default.
There can still be a performance issue with striped tables though.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add gap utilities
* Update .bundlewatch.config.json
* Revamp headings on this page for better organization
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Switches to slightly more verbose, but more consistent, z-index layering we use elsewhere (e.g., pagination). Doing this ensures we're not toggling position on and off, but rather z-index.
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Updated rounded utilities to fix scale, but not rename anything else
* Rename rounded-pill to border-radius-pill to match
Also reorder some variables while I'm here to make more sense
* Small copy addition
* Add example modifier class for spacing
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* 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>
On Ubuntu, our native font-stack doesn't output the same font on Firefox and Chrome. This is [a known aliasing issue](http://fontfamily.io/sans-serif) — check at the bottom, Ubuntu 14.04. Ubuntu 18.04 (my current) doesn't use the same (Firefox uses Liberation Sans, Chrome uses the default system font Ubuntu).
I'm inclined to prefer Liberation Sans since it's closer to Arial / Helvetica. This patch already exists in Boosted, didn't notice it was missing in bootstrap until today…
BTW, our linked Smashing Magazine's system fonts post mentions this and is even more accurate since it targets the three major Linux distributions. AFAIK this is not needed since [Liberation Sans is available everywhere](http://fontfamily.io/Liberation_Sans) — but we might go back to `Oxygen, Ubuntu, Cantarell`if we want to stick to system fonts.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* feature(spinners): slow down spinners when prefers-reduced-motion
* docs(spinners): add reduced motion callout and mention slowing down in accessibility page
* Update spinners.md
* docs(accessibility): rewording
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* Add .dropdown-menu-dark
* Match background color to navbar dark
* Update docs to include a navbar example
* Update dropdowns.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Replaces make-container mixin's padding-x param with gutter to match naming
- Changes value of container padding variable to match grid gutter width variable
- Uses local CSS variable for container padding
Fixes#31642
- 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
* Extra position utilities
Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.
* Update extra position utilities
* add default position values map
* tweak examples
* add real life examples
* fix double colon
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* 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>
* feat(buttons): ensure to increase contrasts on hover/active
* Update _buttons.scss
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@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.
Moves from 1.25em to 1em to better support custom font-size-base values. Most common would probably be .875rem (14px) and current sizing garbles that into 1.09-ish, thus causing the rendering issues in #31269.
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
* sr-only -> visually-hidden cleanup
It seems the old screen-readers.md file was left behind, and forgot to rename the mixin
* Fix broken mixins for visually-hidden
New default behavior for scroll anchoring (rolled out in Chrome 84?) leads to unsightly/odd accordion interactions - see #31341
This rule suppresses this new behavior and reverts back to the old way.
See https://drafts.csswg.org/css-scroll-anchoring/
* 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>
Replaces #30498 by adding four new null default variables for .nav-link. Doesn't carry over font-style from the original PR though since that's rarely used, at least by default Bootstrap. Nullifies all values from that PR, too, since we count on some basic inheritance here and don't need color by default.
"screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).
also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
* 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>
* v5: Add role=button cursor in Reboot
Ports the changes from #30562 made in v4.5 and adds them to v5. This replaces #30563 which sought to add this to the utility API, but the v4 PR shifted to implement an accessible solution vs a lone utility.
* Update reboot.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- 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.
* v5: Redo blockquote attributions
- Renames -small-* variables to -footer-*
- Updates blockquote demos with attribution to place it outside the blockquote with a figure wrapper
* Updated class name
* docs(examples): refactor blockquotes in masonry example
Co-authored-by: Gaël Poupard <gael.poupard@orange.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Update navbar docs to put .active class on .nav-link
Fixes#30652 in v5.
* Remove two selectors from navbar nav that are either unused, or duplicative
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- 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
Replaces a custom hsla() value (dunno what I was thinking when I added this) with a reassigned existing variable. This variable goes up the stack and attaches to the component-active-bg variable, derived from our primary color out of the box. Fixes#30646.
- Broke up existing theming page into separate pages
- Audited and updated each new docs page (some pages include some TBD sections)
- Update sidenav to reflect changes
- Fix links that pointed to the old Theming page
- Update docs styles to reflect recent changes
- Rewrite some bits in the Migration page
- Rename `$enable-prefers-reduced-motion-media-query` to `$enable-reduced-motion`
- Rename `$enable-pointer-cursor-for-buttons` to `$enable-button-pointers`
- Define background properties in `.form-check-input`
- Use `background-size: contain` to simplify background sizes (especially for those with linear gradients)
- Remove double `color-adjust`
- Adjust svgs to 20x20 box. This way the strokes aren't rescaled.
- Convert to Sass map
- Consolidate font-weights into single option (matching line-height for them)
- Add two new sizes and create a new scale
- Update migration docs
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant
- Staring at my laptop, I realized I'm wasting away space. This adds a
significant amount of CSS, but it feels right already.
- Added the xxl tier with a width that divides by 12
- Motivation was originally trying to have a third column for our toc so
that our docs are more useful
* Fix spinner-grow animation
Safari seems to be interpreting the old keyframes animation as incomplete. Adding `transform` to the second frame seems to resolve the issue.
Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
* style: groups sections
- adds two nl before any section
- extract elements from wrong section ex: `mark` from `form`
* style: format comments
* style: sticks all `see`s with the description
- sticks
- renames
* style: removes not needed spaces
* style: removes not needed number like other cases
* style: stick credits with description
* style: adds missing number
* Add utility class for the user-select property
* Docs: Add new page for behavior utility classes - includes user select utility
* Update and rename behaviors.md to interactions.md
* Update sidebar.yml
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
- Remove redundant `display: inline-block` from flex children
- Remove `line-height: inherit;` which is the default value of `line-height`
- Use flex shorthand
- Improve background shorthand
- Fix removed brand margin caused by requiring containers in navbars
This is a follow-up to #29322, specifically "allowing easy placement of
the `.form-check-input` in more places." In my testing in Firefox and
Chrome, setting `vertical-align: top` removes the need to add
`float-left` to vertically align the checkbox and label text. And doing
so does not visually affect examples which do apply `float: left` via
nesting in a `.form-check`.
* Scope .form-check-input layout to the .form-check parent
* Remove margin-bottom from list-group-items in case they are label elements
* document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs
- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin
Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.
- `.carousel-caption` doesn't need a z-index. There are no non-static element in its containing block (`.carousel-item`)
- The `z-index` of `.carousel-indicators` is way higher than it needs to be (`15`), the highest sibling `z-index` is `1`, so it can be set to `2` to be the top layer.
* Follow-up to #29095
This PR fixes the responsive containers that were added in #29095, originally stubbed out in #25631. Apologies to @browner12 for getting that wrong.
Fixes#25631.
* update navbar as well because we cannot reset all containers uniformly
* Update navbars example to include container-xl example to ensure containers match
* rewrite responsive containers docs, add table of max-widths
* Update container docs
- Move table up to the intro
- Remove the container example because it's actually hella confusing
- Update and link to grid example as a demo instead
* Allow .page-links to get left margin.
* Add border-radius to page-links in case they have left margin
* Apply MartijnCuppens suggestion to _pagination.scss
Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
* Plus if/else Rules
* Formatting fixes
* Fix border-radius for pagination-size
* Use mixin for default pagination sizing
- Remove unsupported browsers fixes
- More consistent comment blocks
- Reorganise order of some blocks
- Add height fix for date/month/week/time inputs (#18842)
- Remove redundant type selectors
- Additional resets and theming options for `legend`
- Add date & color inputs to reboot page
- Use the same borders for text search, text inputs, textareas and date inputs
- Move code styling to reboot
Drop `color()`, `theme-color()` & `gray()` functions in favor of variables. The functions just called a `map-get()` of a map where just the variables were defined.
Also the `theme-color-level()` now accepts any color you want instead of only `$theme-colors` colors. The first value now is a variable instead of the `$theme-colors` key.
