* 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>
* docs(carousel): double-spaces out there
* docs(toasts): missing word, ins't it?
* docs(cheatsheet): use buttons for carousels and tabs ion cheatsheets too
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>
Response to issue #32810
Use of the .bg-white class to define visual aspects of the examples
would be unintuitive for theme builders to test themes on.
This replaces instances of .bg-white with .bg-body in the examples.
- Edited examples to replace use .bg-white class with .bg-body class
- product
- offcanvas
- pricing
- cheatsheet
- cheatsheet-rtl
- Edited utilities colors.md & shadows.md to include .bg-body class
The "active" CSS class must be on "nav-link" element, see `_navbar.scss`:
```css
.nav-link.active {
color: $navbar-dark-active-color;
}
```
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* site: Fix .font-italic to .fst-italic in blog example
The font utility class was renamed from .font-italic to .fst-italic
but a few references didn't get updated.
* site: Fix .font-weight-* to .fw-* in RTL examples
These font utility classes were renamed from .font-weight-* to .fw-*
but a few references didn't get updated.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Replaces shorter examples with more sensible/representative/inforrmative text. For longer passages, resorted to using SFW extracts from http://katyperryipsum.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>
* 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: 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>
