* Docs: replace twbs/bootstrap-npm-starter by twbs/examples/tree/main/icons-font
* Revamp starter template to use new .icon-link, fix Bootstrap icon and text at top
* Remove extra CSS file
* Change links to twbs/examples
* Fix icon name
* Adjust icon link offset to more reasonable and scaling distance
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add new link utilities, update colored link helpers
* Remove commented out code
* Fixes
* Remove examples changes
* Fixes and copy
* Fix icon-link instances on homepage
* Bump bundlewatch
* Fix node-sass issue for rgba() function bug
* More bundlewatch
* One more time after merge
* Add callout for a11y
* Hover and focus-visible
* Add a11y callouts
* Remove duplicate for now
* More code review feedback
* Add global variables for box-shadow focus rings
* Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs
* fix variable name
* Add CSS variables for global focus styling, document it
* Move to CSS vars section
* Update scss/_nav.scss
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Helper and utils
* Fix bundlewatch
* Change 'Focus ring' in sidebar so that the page can be visible
* Minor typo fix
* fix merge
* Revamp some more, improve docs
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* Add .nav-underline modifier class
* Tweak sizing and spacing, add underline on hover
* Rebuild with Sass and CSS variables
* Document CSS vars
* Bump bundlewatch
* Set up CSS testing using sass-true and mocha
Use mocha to handle the heavy lifting of finding tests and running them.
Mocha is made to look directly for SCSS files which are compiled
thanks to Node's require.extensions mechanism.
* Add CSS tests to workflow
* Add tests for the generate-utility mixin
* Add tests for utilities generation
* Fix linting issues
* Fix test contents
Don't know why the whole utilities.test.scss ended up copied in the api.test.scss
* Remove unnecessary entry in package.json
* Move to Jasmine for running the tests
* Move running of CSS tests before CSS build
* Update linting set up
Add exceptions for test files in stylelint
* Remove irrelevant option for sass-true
* Fix linting issues after rebase
* Add color mode tests
* Fix linter
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Fix Sass compilation when `$color-mode-type` is set to `media-query`
* Update mixin names, fix docs color modes for using media queries by using mixin
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Rework progress bar markup and styles
Logically moves the various `role` and `aria-` attributes to the `.progress` element itself, leaving the `.progress-bar` to be used purely for the visual presentation. This fixes the problem #36736 that in certain browser/AT combinations, zero-value/zero-width progress bars are completely ignored and not announced.
For multiple/stacked progress bars, this PR introduces a new wrapper and class `.progress-stacked`, to accommodate for the fact that with the more logical structure above, we need full `.progress` elements with child `.progress-bar` elements, and can't get away with the fudge we had before of having a single `.progress` with multiple `.progress-bar`s.
Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced)
* Add a note about progress bar change in migration guide
* Add notes with old markup examples and explanation
* Fix bundlewatch
* Update site/content/docs/5.2/components/progress.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Reintroduce deleted styles
Turns out they're needed for correct positioning of text inside progress bar
* Move changes in markup to Migrationg guide, link to that from top of progress page, rewrite some content
* Fix typo in callout
* Clarify "Sizing" section
* Remove redundant "now"
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Add dark mode to docs
* Minor fix: missing space indentation
* Minor fix: revert utilities/z-index added-in modification
* Remove prev: and next: from doc because extracted to another PR
* Use .bg-body-tertiary in all Utilities > Overflow examples
* fix example
* Fix up spacing examples
* Update box-shadow Sass variables and utilities to auto-adjust to color modes
* Remove unused docs class
* Refactor form styles to use CSS variable for background images on .form-check and .form-switch
* Fix docs selector
* Rename shortcut for clarity
* Heading consistency
* Reintroduce missing 4th grid item in Utilities > Spacing example
* Fix bundlewatch
* .bd-callout* rendering is OK so removing comments in the code
* Update scss/_utilities.scss
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Fix gutters example styling
* Fix text colors on background utils docs
* redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken
* fix some color utils examples
* Deprecate mixin notice
* Deprecate notice for list-group-item-variant() mixin
* Revamp new link CSS vars
* Use map-keys in some each Sass files
* Remove list-group-item-variant mixin ref in sass loop desc
* Display CSS vars scoped to our built-in dark mode
* Revert previous commit
* Fix list group variant link
* Fix typo
* Remove imports of alert/list-group mixins in scss/_mixins.scss
* Small formatting + comments removal in scss/_content.scss
* Fix alert links colors
* fix dropdown border-radius mixin
* fix link color and underline again, this time using CSS var override for color var and fallback value for the underline
* fix colors on docs navbar for dark mode
* remove two changes
* missing ref
* another link underline fix, just use sass vars for link decoration for now
* missing color bg docs, plus move dropdown override to scss
* more changes from review
* fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin
* Few fixes around type
- Restored CSS variable for color on headings, this time with a fallback value
- In conjunction, restored and wrapped the default CSS var with a null value check
- Split headings and paragraphs docs in Reboot, elaborated on them
* Restyle custom details > summary element in docs
* Rewrite some migration docs
* fix form checks
* Fix up some navbar styling, tweak docs callout
* Fix select images, mostly for validation styling
* Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs
* Update site/content/docs/5.2/components/scrollspy.md
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* Apply suggestions from code review
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
* mention form control css vars in migration guide
* Tweak grid and flex docs background examples
* clarify some docs
* fix some more things
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
* Grid Gap Updates
- added column-gap
- added row-gap
* Grid Gap Updates
* Bundlewatch update
* Apply suggestions from code review
Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Deprecation Warning: $weight: Passing a number without unit % (100) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
* Add support for customising a card title color
* Group `*card-title-*` variables together
* Add support for customising a card subtitle color
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Added "overflow-x" and "overflow-y"
- Having the same properties as overflow but for just the x and y axises
- Usecase being I want my y axis to be scrollable but not my x axis
- E.g a card with a vertical list of items.
* Added "object-fit" utilities
- The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
- A responsive alternative to using background-img for a resizable fill/fit image.
* Updated documantation for the overflow utilities
- Now includes docs for `overflow-x` and `overflow-y` utilities
* Placeholder shortcode updated
- Can now choose to render an img tag or svg
- The image contains a base64 svg generated within the template
- example shortcode updated to detect, replace and render preview of 'img' tags as well
* New documentaion for Object Fit added
- Documentation added for the 'object-fit' util
* Updated spell checks issues
* Update object-fit.md
* Update overflow.md
* Update object-fit.md
* Updated markup to address HTML Validation Errors
- error: Bad value for attribute "src" on element "img": Illegal character in scheme data: space is not allowed.
- info warning: Self-closing tag syntax in text/html documents is widely discouraged; it's unnecessary and interacts badly with other HTML features (e.g., unquoted attribute values). If you're using a tool that injects self-closing tag syntax into all void elements, without any option to prevent it from doing so, then consider switching to a different tool.
* Updated Fix
- Added Legibility to the img markup (example.html)
- Fixed issue with example not working properly (because image closing tag no longer has "/>" )
* update values by step of 0.25 in bundlewatch.config
The following values in .bundlewatch.config.json have been updated:
- ./dist/css/bootstrap-utilities.css
- ./dist/css/bootstrap-utilities.min.css
- ./dist/css/bootstrap.css
- ./dist/css/bootstrap.min.css
Co-authored-by: Daniel O <dobiekwe@byteworks.com.ng>
Co-authored-by: Mark Otto <otto@github.com>
The .toast-container tries to use the z-index CSS variable, which is defined under .toast.
However, this variable is not accessible to the container. This change copies the variable to the spot where it can be used.
* Replace :focus styles with :focus-visible
* Remove :active / .active styles
* Don't apply :hover styles for `.btn` that follows a `.btn-check`
This removes a large part of the visual confusion of button checks/radios - that you currently have to move your mouse away from them to see what they actually changed to (checked or unchecked)
* Reintroduce :active, but *not* for button checks/radios
* Sort focus styling specifically for button checks/radios
don't change background on focus, just give it the border/outline. again, avoids confusion whether something is checked or not while focused
* Re-add `outline:0` which was lost when resolving last merge conflict
Co-authored-by: Mark Otto <markd.otto@gmail.com>
postcss-values-parser returns a syntax error when a negative value is
provided in a `calc` function after a CSS variable.
This is not an issue with Bootstrap itself, but a workaround to allow
projects using postcss-values-parser to keep upgrading and compiling
bootstrap
Ref: shellscape/postcss-values-parser#138, twbs/bootstrap#35033
Fix: #36851
* flush variant of accordion border radius
Fixed issues regarding to last accordion-item has rounded edges at the bottom left and right corners when focused and are in closed state
* Update _accordion.scss
Co-authored-by: Mark Otto <otto@github.com>
* Remove outline suppression for focused `<pre>`
Sighted keyboard users rely on knowing where their focus is. If the `<pre>` receives focus (so that it can be scrolled by keyboard users, for instance) then it's essential that they know this is the case
* Only suppress outline for buttons when `:not(:focus-visible)`
* Add right-hand margin to pre
avoids having the focus outline awkwardly clipped by the copy button
This was an issue with the tables as well, but that has been updated here - 4a3c004c34
This was also noted here - 36501#issuecomment-1153187062_
This effects the 5.2 beta1 that is released on the homepage.
Whats happening is with a fresh download and compile, with some compilers, I noticed not all of them run into this issue, we get the Sass variable showing up and not the actual value.
Steps to reproduce -
- Download the source code form the docs for beta 2 and extract
- Open VSCode -> open folder to the bootstrap directory you just extracted
- install the "Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro" v2.3.53 by Eno Yao extension
---- might have to restart VSCode
- go to that extensions settings, and set the directory to save the output / compiled version to `../dist`
- tap that Compile Hero on the bottom to activate the extension
- open `bootstrap.scss` add a space or a new line and save it
- check the compiles version and you should see the errors
