aboutsummaryrefslogtreecommitdiff
path: root/scss/_offcanvas.scss
AgeCommit message (Collapse)AuthorFilesLines
2023-11-15Drop evenly items distribution for modal and offcanvas headers (#39373)MarkoOleksiyenko1-4/+1
2022-10-04Remove duplicate `--#{$prefix}offcanvas-zindex` (#37257)Neeraj Kumar Das1-1/+0
2022-10-03Add new css vars for Offcanvas (#36815)Isabelle Chanclou1-2/+5
* Add 3 new css vars for Offcanvas feature * Fix new css variable after review * Update _offcanvas.scss Co-authored-by: Mark Otto <[email protected]>
2022-09-04Add workarounds for postcss values parser errorGeremia Taglialatela1-3/+3
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
2022-08-31Adding missing CSS variables for `z-index`louismaximepiton1-1/+2
2022-05-14Offcanvas not showing with .showing (#36353)Justin Kruit1-11/+11
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.
2022-04-17v5.2.0 design refresh, plus responsive offcanvas classes (#35736)Mark Otto1-63/+116
* 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 <[email protected]> * 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 <[email protected]>
2022-01-05Remove explicit use of aria-hidden for offcanvas when closed (#35589)Patrick H. Lauke1-4/+11
Remove explicit use of aria-hidden & visibility for offcanvas when closed, handling it with css Co-authored-by: GeoSot <[email protected]> Co-authored-by: Gaël Poupard <[email protected]>
2021-06-25Variablize backdrop for modal and offcanvasMark Otto1-0/+4
2021-06-14Don't set auto margin on offcanvas closeMark Otto1-1/+3
2021-06-14Replace `/` division with multiplication and custom `divide()` function (#34245)Mark Otto1-2/+2
* 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
2021-04-19Use the backdrop util in offcanvas, enforcing consistency (#33545)GeoSot1-11/+0
* 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
2021-04-04Add offcanvas-top modifier (#33549)Mark Otto1-0/+10
2021-04-04Vertically align offcanvas header componentsMark Otto1-0/+1
Fixes #33460
2021-03-02Offcanvas as component (#29017)GeoSot1-0/+77
* 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 <[email protected]> Co-authored-by: Martijn Cuppens <[email protected]> Co-authored-by: Mark Otto <[email protected]>