0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Commit Graph

138 Commits

Author SHA1 Message Date
GeoSot
1c02ef4f97
Allow offcanvas to be initialized in open state (#33382)
* Update docs to use new .show behavior and clarify some copy for first example

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-03-23 08:22:59 +02:00
GeoSot
548be2ed66
Offcanvas as component (#29017)
* 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>
2021-03-02 19:10:10 +02:00
Gaël Poupard
2bb42a9176
docs(scroll offset): improve a11y for sticky header (#33027)
Our current trick works great for headings or landmarks `:target`ed by links activation, however it still allows focus to be hidden under the sticky header. 

1. Go to any docs page, 
2. use a TOC link to scroll down the page, 
3. then `Shift`+`Tab` to navigate backward using keyboard. 

You should see on some browsers (mainly Firefox from my tests, but it used to do the same in Chrome) that focused elements isn't visible, hidden by our sticky header.

Applying `scroll-padding-top` to the `:root` solves this without any side-effect—but it requires to drop `scroll-margin-top` for anchors to prevent doubling the offset.

FWIW based on my test, Edgium and Chromium don't really care since they seem to have a new heuristic for such cases, making the focused element scroll to the center of the view.
2021-02-10 07:27:43 +02:00
XhmikosR
f95004f654
Revert "docs: Fix popover example showing above navbar (#32445)" (#32533)
This reverts commit 517446069a.
2021-01-13 22:51:39 +02:00
XhmikosR
f2c504397e
Bump copyright year to 2021 (#32713) 2021-01-07 12:12:53 +02:00
Gaël Poupard
acec356c81
fix(ratio): missing variable prefix (#32501)
This is the only unprefixed custom property, and its name is very common so I think we'd better prefix it too.
2021-01-06 08:14:54 +02:00
XhmikosR
9b7bb7b568
docs(sidebar): invalid CSS value (#32575)
Co-authored-by: Gaël Poupard <gael.poupard@orange.com>
2020-12-21 18:54:03 +02:00
Siju Samson
517446069a
docs: Fix popover example showing above navbar (#32445)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-12-18 10:19:30 +02:00
Patrick H. Lauke
65f1bf027a
Docs: style clipboard button on :focus, not just :hover (#32461)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-12-15 09:43:12 +02:00
Gaël Poupard
c2f67d72e8 docs(skip links): new powers for .visually-hidden-focusable 2020-12-15 09:22:14 +02:00
XhmikosR
4341c34261
docs: SVG consistency changes (#32259)
* Move inlined SVG to a partial.

Also, add `fill="currentColor"` in the SVGs.

* docs: reorder attributes
2020-12-10 11:48:14 +02:00
Martijn Cuppens
1f2e600304 Add toast positioning 2020-12-04 16:15:51 +02:00
XhmikosR
8f8787725b
Update _syntax.scss (#32117)
* Update _syntax.scss with the latest chroma selectors

* Sort selectors

* Remove no longer needed chroma workaround

* remove comments
2020-11-23 21:34:38 +02:00
Patrick H. Lauke
5ec6400bd0
Docs: change sidebar collapse controls to actual button elements (#31098)
apart from the visual styling, there's probably no good reason why these shouldn't be `<button>` elements, semantically

the buttons still look a shade too button-like, despite using `.btn-light`. the last remnant of button styling can probably be suppressed further, *or* this makes the case for expanding the core button styles to have one that looks completely non-button and non-link like (for cases where an additional style/hint was given already, or it's clear from context that something's an actionable button or link)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-11-18 20:20:05 +02:00
Mark Otto
09a09387f4
Add keyboard shortcut to focus search field (#31702)
* Documentation: Add slash key event to focus the input search.

* Add little tag for keyboard shortcut in the search field

* Use ctrl / as keyboard shortcut

* Update search.js

Co-authored-by: chuckrincon <chuckrincon@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-11-05 08:56:02 -08:00
XhmikosR
e8f1709adf Drop Legacy Edge support.
This allows us to move forward without being held back. Microsoft already replaces the Legacy Edge with the new one on supported Windows versions.
2020-11-05 15:37:34 +02:00
Patrick H. Lauke
3b64580949
Make docs anchorjs links darker on keyboard focus (#32050)
* Make docs anchorjs links darker on keyboard focus

Not just on mouse hover

* Update site/assets/scss/_anchor.scss

Co-authored-by: Mark Otto <markd.otto@gmail.com>

Co-authored-by: Mark Otto <markd.otto@gmail.com>
2020-11-02 20:55:41 +00:00
Mark Otto
594efec0f1
Don't wrap the code snippets in our docs (#31679)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-10-23 01:06:52 +03:00
Martijn Cuppens
cdc12165a9
Colors rewrite (#30622) 2020-10-13 09:58:06 +02:00
Mark Otto
74279460c2
v5: Adjust docs sidebar and navbar (#31119)
* Hide the docs nav on mobile, redesign it for two columns on narrow devices

* Tweak spacing on ToC

* Redesign sidebar and subnav

* Revamp subnav mobile layout so everything's on one line

* Tighten up masthead a little

* Switch the icon for the subnav and do a little icon toggling

* Fix mobile overflow since we changed guters stuff

* Add the widths

* make the subnav icon purple
2020-09-25 09:35:24 -07:00
Mark Otto
9f60659d1d Updates to .ratio selectors and docs
- Remove group selector for ratio items
- Drop the .ratio-item entirely
- Update docs to explain updated approach
- Update Migration guide to reflect the latest
2020-09-23 13:30:11 -07:00
Mark Otto
73e5640405 Add example of responsive behavior for aspect ratios 2020-09-23 13:30:11 -07:00
Mark Otto
3b8c17029f Move styles to docs CSS 2020-09-23 13:30:11 -07:00
Mark Otto
fe38a85839 Rename the classes and docs page, update everything accordingly 2020-09-23 13:30:11 -07:00
Mark Otto
18f8601d29 Updates responsive embeds with new class names and CSS variables
- 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
2020-09-23 13:30:11 -07:00
Mark Otto
1e69503a73 Increase margin in button examples to better highlight focus styles 2020-09-22 16:49:02 -07:00
Jaume Sala
7bbfd439c9
Extra position utilities (#31280)
* 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>
2020-09-20 19:42:41 -07:00
Gaël Poupard
28a92234e5
docs(layout): ensure content sits in main (#31610)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-09-10 12:33:11 +03:00
XhmikosR
b7b470683f Update _brand.scss 2020-09-10 11:56:02 +03:00
Mark Otto
eb23b98fb5 First pass at cleaning up About pages and brand assets 2020-09-10 11:56:02 +03:00
Gaël Poupard
7134f6aa38
Drop h4 color customization in callouts (#31576) 2020-09-03 10:45:04 +02:00
Patrick H. Lauke
0e007e697e
Docs: Add top/bottom margin to highlighted code samples (#31036)
* Add top/bottom margin to highlighted code samples

provide more space to avoid having the "Copy" button overlap code sample content

* Modify clipboard button style

Per https://github.com/twbs/bootstrap/pull/31036#issuecomment-661322566 and https://github.com/twbs/bootstrap/pull/31036#issuecomment-668162630

* Tweak margin, clipboard button size and position

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-09-02 07:17:53 +01:00
Gaël Poupard
cb1eee16f0 docs(skippy): prevent skip links from overlapping header 2020-07-13 12:36:29 -07:00
Martijn Cuppens
7cedb8eeae
Fix sidebar jump (#31232) 2020-07-03 15:16:05 +02:00
Mark Otto
ca22e72411 Remove backdrop-filter from docs subnav
Fixes #31163.
2020-06-25 09:47:20 +03:00
Mark Otto
6ca54573a9 Update v5 homepage to match v4.5's changes 2020-06-16 21:19:32 +03:00
Martijn Cuppens
7e28764e67 Change breakpoint-max implementation
- 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.
2020-06-14 14:50:47 -07:00
XhmikosR
3d8d0012c8
Stylelint: remove redundant disables (#31006) 2020-06-12 11:11:36 +03:00
Gaël Poupard
407b4c3606
docs(layout): improve layout when content is short (#30908)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-05-28 20:33:41 +03:00
Gaël Poupard
ad518e2097
Apply utilities in docs styles (#30866)
* docs(theming): apply utilities where possible

* Update docs-sidebar.html

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-05-26 19:02:19 +03:00
Gaël Poupard
b45a2ab178 docs(customize/colors): dump grays swatches (unused) and merge -500 in swatches 2020-05-20 09:49:18 +02:00
Gaël Poupard
a0dd474bc6 docs(theming): display contrast ratios in color swatches 2020-05-20 09:49:18 +02:00
Mark Otto
3e73039936
v5: Unify spacing across components (#30564)
Co-Authored-By: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-04-30 15:17:08 +02:00
Mark Otto
f6e2f4c656 Rewrite Theming docs as Customize section
- 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
2020-04-26 17:26:04 -07:00
Martijn Cuppens
4fc701f6aa
Drop @support (position: sticky) media query (#30415) 2020-04-18 14:10:18 +02:00
Mark Otto
3ab9323ad2 Slight adjustment to the h3 heading spacing in docs 2020-04-14 21:03:56 -07:00
Mark Otto
7dedccfb9a Update docs for new XXL grid tier
- 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
2020-04-13 14:40:47 -07:00
Mark Otto
bb3e5f712a Move table of contents to new sidebar, restyle it to be simpler 2020-04-13 13:55:34 -07:00
Martijn Cuppens
8fe162d67a
Remove redundant class and line height (#30542) 2020-04-09 21:25:09 +03:00
Martijn Cuppens
43d866313d Fix active state dropdown 2020-03-31 22:52:57 +02:00
Martijn Cuppens
6dfe8e02d7
Fix text decorations (#30492)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-03-31 21:42:38 +03:00
Martijn Cuppens
4448856038 Simplify sidebar styles 2020-03-28 17:57:22 +02:00
Gaël Poupard
9efaeba35e docs(sidenav): use class selector for active item 2020-03-28 17:57:22 +02:00
Gaël Poupard
c0aa3a1e1e docs(sidenav): transition arrow too 2020-03-28 17:57:22 +02:00
Gaël Poupard
72230091b6 docs(sidenav): get rid of custom JS for active state 2020-03-28 17:57:22 +02:00
Gaël Poupard
79dc21b22b docs(sidenav): fix struggling CSS when collapsing sidenav 2020-03-28 17:57:22 +02:00
Gaël Poupard
03908ea37a
Use WCAG contrast algo (#30168) 2020-03-23 18:03:56 +01:00
Gaël Poupard
9eccb3a230
Documentation skip links (#30073)
* docs(skip-links): add a skip to main navigation skip link

* docs(skip-links): revamp skip-links pattern

* docs(navs): use aria-label on navs

* docs(navs): use 'docs navigation' label in sidebar nav
2020-03-23 16:23:37 +02:00
Martijn Cuppens
7fc4037a02 Remove redundant text decoration from hover states 2020-03-20 09:35:55 +01:00
Martijn Cuppens
39c11c6b3f Restore hover text decoration on toc links 2020-03-20 09:33:53 +01:00
Mark Otto
1e0575ced2 remove dupe text-decoration 2020-03-17 12:26:35 -07:00
Mark Otto
685da5c802 supress underline on toc 2020-03-17 12:26:35 -07:00
Mark Otto
a66e5e6643 Remove links from docs sidebar 2020-03-17 12:26:35 -07:00
Martijn Cuppens
3b555aaf61 Limit to scroll-margin-top to elements with an id 2020-03-12 17:56:16 +02:00
Martijn Cuppens
61b86c1e86 Use scroll-margin-top instead of pseudo hack 2020-03-12 17:56:16 +02:00
Martijn Cuppens
e45c92f1d5 Remove .bd-example-responsive-containers
Added in https://github.com/twbs/bootstrap/pull/29095/files#diff-d4fb29267ed3a7c27482bbeac1723ab6 but never used
2020-03-12 08:45:28 +01:00
Martijn Cuppens
9daf36fdb7 Bootstrap 5 grid documentation
Co-authored-by: Mark Otto <markd.otto@gmail.com>
2020-03-10 20:30:29 +01:00
Catalin Zalog
0e611a3dcd style(css): removes &-* scss pattern 2020-03-08 12:59:18 -07:00
XhmikosR
414314f3cb
Switch versions & docs search (#30336) 2020-03-05 10:01:15 +02:00
Mark Otto
50c95d9b5d
Embedded examples cleanup (#30330)
* Thin out embedded examples borders, rounded their corners
* Fix busted class
* Adjust nesting of .bd-example styles, tweak padding while I'm at it
* combine selectors
* cleanup some margins that always cancel each other out
* Remove redundant universal selector

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-03-04 21:32:45 +09:00
Martijn Cuppens
2e581510dc
Add transparent background color to versions switcher (#30192) 2020-02-16 21:49:54 +02:00
XhmikosR
8d791f2800
Revert "Placeholder for transitions reset to prevent code duplication #29862"
This reverts commit cd7e5d1111.

Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
2020-02-15 12:41:33 +01:00
Mark Otto
22062ed9d7
Docs table of contents list style fix (#30176)
* Fix missing bullets from table of contents top level

* Add .text-muted to toc for lighter bullets
2020-02-15 09:40:27 +02:00
Gaël Poupard
cd7e5d1111
Placeholder for transitions reset to prevent code duplication… (#29870)
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-02-14 20:50:50 +01:00
Christopher Morrissey
7fd6dd9d58
v5 docs: added wrapping class for rounded utils (#29379)
* Added wrapping class for rounded utils

Tweak /utilities/borders/#border-radius #29343

* Remove the extra div.

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2020-02-13 22:22:10 -08:00
Martijn Cuppens
6f4784c8bb
Docs navbar tweaks (#29948) 2020-02-13 13:45:33 +01:00
Martijn Cuppens
dc64ff3314 Convert background shorthands to separate properties 2020-02-12 19:45:54 +02:00
Martijn Cuppens
fb91ee4d84
Cleanup content (#30120) 2020-02-03 11:34:20 +02:00
Gaël Poupard
5b896b526e docs(styles): drop .booticon styles (#30071) 2020-01-23 15:29:34 +02:00
XhmikosR
7b990eb2f4
Bump copyright year to 2020. (#29944) 2020-01-02 11:34:48 +02:00
Martijn Cuppens
b39f704954
Cleanup algolia theming (#29888) 2019-12-25 21:08:15 +01:00
wojtask9
043b054480 Remove .form-group leftovers (#29449) 2019-12-09 19:22:12 +01:00
Martijn Cuppens
cd077cd599 Enable RFS for font resizing
- Enable RFS
- Add documentation
- Disable doc font size overrides
2019-11-25 13:05:57 +02:00
Martijn Cuppens
08ba61e276 Remove calc function from docs 2019-10-31 08:30:53 +02:00
midzer
819f922276 remove superflous transition parameter (#29595) 2019-10-26 18:47:55 +02:00
Mark Otto
943bef258d
v5: Update colors to add shades and tints (#29348)
* Add variables for shades and tints of each major color

* getting-started/theming.md: use a `range`.
2019-10-18 11:04:27 -07:00
XhmikosR
de3a3731bd
Sass: remove redundant stylelint inline suppressions. (#29427) 2019-09-26 21:50:14 +03:00
XhmikosR
129bb08fc4
Use Hugo for our docs Sass and JS. (#29280)
Now there's only one command needed to run the docs: `npm run docs-serve`.

Also, simplify the npm scripts.
2019-09-17 00:22:49 +03:00