The transform of .showing was being overridden by .offcanvas.offcanvas-start, while .show wasn't. This resulted in an illusion of the offcanvas waiting for the backdrop, reported in #36347. Moving the show classes below the position classes fixes this problem.
* refactor(Modal.js): stop using backdrop class to handle clicks over modal
* Revert #35554 and backdrop callback usage
Explanation: In order to bypass `.modal`, was applied a css rule `pointer-events:none` which caused the side effect, and user couldn't scroll "long content modals"
* Update .bundlewatch.config.json
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Remove `--bs-border-opacity: 1` from `.border-*` utilities
We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this.
* Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues
* Add some demos of border utils to the docs
* Handle disabled tabs
* Fix after feedback
* Update js/src/tab.js
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Update js/src/tab.js
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Commit suggestions via GitHub broke the thing
* Add some unit tests
* Remove temp doc modification
* Add tests for left arrow
* Add disabled tabs in JavaScript Behavior section
* Compact 4 tests to 2 tests
* Compact 4 tests to 2 tests
* Add 'disabled' attribute for all buttons
* Change the disabled pane position only for the vertical version
* Change ids for the confusing first example in JavaScript behavior
* Use disabled attribute instead of the class for buttons in tabs
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Revert `border-color` change
* Add new border-color-translucent for when we want optional alpha-transparency in our border-color
Apply to drodpowns, modals, offcanvas, popovers, and toasts
* bundlewatch
* Add responsive offcanvas classes
- Updates navbar-expand classes to de-dupe some styles—these shouldn't interfere now.
- Adds some JS to the offcanvas component to help with responsiveness
Co-Authored-By: GeoSot <geo.sotis@gmail.com>
* Redesign homepage, docs, and examples
Homepage:
- New Bootstrap purple navbar
- Redesigned masthead
- Rewrote and redesigned homepage content
- Replace Copy text with icons like Bootstrap Icons site across all ClipboardJS instances
- Fixed padding issues in site footer
- Match homepage button styles to examples page, use gap instead of tons of responsive margin utils
Docs:
- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile
- Redesign code snippets to better house two action buttons
Examples:
- Redesign Examples page layout
- Add new example for responsive offcanvases in navbars
* Convert offcanvas to CSS vars
* Feat: add resize handler to Offcanvas.js.
If we could use as default the `.offcanvas` class without modifiers, we then, could add a simplified selector
The selector itself, ignores the .offcanvas class as it doesn't have any responsive behavior
The `aria-modal` addon is to protect us, selection backdrop elements
* Separate examples code, Add some selectors, fix stackblitz btn
Co-authored-by: GeoSot <geo.sotis@gmail.com>
* Remove not needed css form tooltip & popover as it is made by popper
Remove tooltip margin variable, as popper needs margin to be zero
* Remove popover left/top initializers as they are handled by popper
* nullify `margin` variable and add deprecation message
* Document change in migration guide
* Update _variables.scss
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Bring back webkit calendar picker indicator for datalists
* Replace webkit datalist indicator with Bootstrap Icons
* Use default datalist icons on date or time inputs in Chrome
Remove the dropdown arrow from text type inputs
* Bundlewatch
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Convert accordion to CSS vars
* Update accordion.md
* Convert navs to CSS variables
* Split up CSS vars
* bundlewatch
* fix vars
* Convert cards to CSS vars
* Convert modals to CSS variables
* Bundlewatch
Co-authored-by: Geremia Taglialatela <tagliala.dev@gmail.com>
* Add additional root variables, rename $variable-prefix to $prefix
- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout
* Bundlewatch
Sometimes we can set `.active` class only to link tag and not parent.
Since active status style is applied only to `.page-link` and not `.page-item`, would also make more sense to just add the active class to `.page-link` itself.
The other way to set `.active` class to `.page-item` still remain, so there is not BC.
Allow to set also `.disabled` class to `.page-link`
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Split CSS vars for padding values
Make these few components consistent with where we're heading with other components. Had to add some new Sass variables to handle the dropdown-header element, but not a huge deal. This ensures we can drop the combined variable in v6 when we're ready.
* Update scss/_dropdown.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Deprecate dropdown-header-padding var
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
- Updates the utilities mixin to check for specific CSS variable names via `css-variable`
- Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1`
- Adds new `.border-opacity-*` classes
- Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width`
- Documents the new variable changes
Use the new .table-group-divider to create your own dividers as desired. Would love to find a better way to handle border-color for this, but for now, this is at least opt-in.
I've applied it by default in another way for our docs tables to help differentiate our content vs our components.
Fixes#35342
Some Linux distributions (like Debian) have fontconfig aliases for Arial
that picks specific fonts. But such generic aliases might be less
desirable than the known-good Linux specific fonts.
This fixes a problem on my setup where Liberation Sans is aliased as
Arial, even when Noto Sans is available. Liberation Sans doesn't support
a weight of 500, so we end up rendering headers at the normal weight of
400, which makes them stand out less. Reordering the Arial fallback
makes us instead pick Noto Sans over Lieration Sans, which does support
a weight of 500, and makes headers stand out again.
While we're at it, fixup the reboot documentation to match, and change
the comment about Helvetica Neue; that's not a "Basic web-fallback" font,
it's the UI font on older iOS and macOS versions.
In this way we can use color tints other than grays in our custom theme, w/o having to extend it later (e.g `$primary: $indigo-600;` ). This could be done in the project variables file, but i believe most developers just include a full local copy of `scss/_variables.scss` before the the original `default` file and change the values the need (maybe also removing the !default flag) so that it's easier to track changes and custom values during upgrades.
* Add z-index for .toast-container
- Adds positioning and z-index to toast container so that it has a system-declared layer in relation to other components.
- Updates docs to use the class better
Fixes $34028
* Remove unnecessary z-index from docs examples
* fix(reboot): revert hr styles to v4 implementation
* docs(cheatsheet): add a hr example
* fix(reboot): currentColor is the initial border-color value
* Document hr element in Reboot docs
* Update migration guide
* Update scss/_variables.scss
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Support floating labels on `.form-control-plaintext`
* Update floating-labels.md
* Apply suggestions from code review
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
Remove explicit use of aria-hidden & visibility for offcanvas when closed, handling it with css
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
We already do this in rows, so to best support our containers, we need
to do it at the container level as well.
Fixes#32658, fixes#34614, closes#32658.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Separate container classes from enable-grid-classes optoin
* Document the new option
* Mention in migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* fix(tables): separator for table direct children
* fix(tables): drop universal selectors
* fix(tables): trying the lobotomized owl selector
* fix(tables): get closer to v4
* fix(tables): ensure borderless are borderless
- Adds grayscale colors
- Adds root and body variables
Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly
Change approach slightly to prevent cascade
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Jaume Sala <jaumesala@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
- Moves the make-cssgrid() mixin to the grid mixins stylesheet
- Updates the g-start-* classes to start at 1 instead of 0 as 0 is an invalid value (fixes#34399)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* fix(forms): prevent color control from shrinking
Fixes#34195
Setting `min-width` alongside `max-width` wouldn't make any sense IMHO. The only concern I have is whether we should introduce a dedicated variable for said width?
* feat(forms): introduce ` $form-color-width`
* feat(forms): use ` $form-color-width`
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add maps for all colors, document how to extend color utilities
* Updates to make this more functional for v5
- Moves color maps into _variables.scss for now (felt weird to split them out when the variables are there)
- Adds a new function, map-merge-multiple(), and updates docs that reference combo-map
- Updates code snippet and docs guidance about how to extend the color utils to handle this
* Update site/content/docs/5.0/customize/color.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add responsive utility classes for opacity
- fix for #33483
* remove responsive opacity utils as it has impact on bootstrap.css bundle size
* Update opacity.md
* Update site/content/docs/5.0/utilities/opacity.md
Co-authored-by: Mark Otto <otto@github.com>
* Update site/content/docs/5.0/utilities/opacity.md
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Harish <halodoc@ip-192-168-1-101.ap-southeast-1.compute.internal>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
* Convert bulk of division to multiplication
* Use custom divide() function instead of Dart Sass math module for greater compatibility
* Apply suggestions from code review
* Fix functions
A selectbox is styled in a very similar way as an input (`.form-control`), including border-color and box-shadow. So it can be assumed it should apply the same CSS transition for these properties when focused, but this was missing.
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
* respect /share modal's backdrop functionality, keeping consistency
* listen click events over backdrop (only) and trigger `hide()` without add/remove event tricks
* achieve to hide foreign open offcanvas instances without glitches `if (allReadyOpen && allReadyOpen !== target)`, in case another is going to be open, when user clicks on trigger button
There are 5 places where [readonly] selector is used. I have replaced with :read-only for consistency.
fix for https://github.com/twbs/bootstrap/issues/33101
Co-authored-by: Harish <halodoc@ip-192-168-43-211.ap-southeast-1.compute.internal>
Implementation provided in #33411 does not take into account that some
Operating Systems may display a vertical scrollbar in the multiple
select field
This implementation will hide the validation icons from multiple select
fields, just like Bootstrap 4 does.
Fix: #33591
Validation feedback for `<select multiple>` should look like
`<textarea>`.
The previous implementation was placing the validation icon in the
middle of the select field together with the single select arrow, that
is not supposed to be part of this kind of inputs
