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

53 Commits

Author SHA1 Message Date
Louis-Maxime Piton
fd1ec97bd3
Docs: Small enhancements (#37803)
* Consistency with the doc

* Bring a class to avoid weird behavior

* Consistency + Add some explaining text

* fix(color)
2023-01-05 19:59:59 -08:00
Julien Déramond
1b83ab24fc Docs: remove some CSS from .highlight-toolbar def 2023-01-05 19:29:17 -08:00
Mark Otto
3ee2a75495 Use Bootstrap colors in syntax highlighting 2023-01-02 22:06:59 -08:00
Mark Otto
9e17b2b34c
Focus ring helper and utilities (#33125)
* 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>
2022-12-29 14:19:22 -08:00
Louis-Maxime Piton
6807008159
Docs: replace some --#{$prefix} by --bs in Sass files (#37617)
Co-authored-by: Julien Déramond <juderamond@gmail.com>
2022-12-18 08:19:33 +01:00
Mark Otto
fc3f4b67d6
Add dark mode support (#35857)
* 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>
2022-11-28 22:30:26 -08:00
Julien Déramond
f97149a4af Docs: add margin between buttons in tooltip examples 2022-11-14 09:32:14 -08:00
Mark Otto
0968db8099
Add z-index utilities, .z-* (#37317)
* Add z-index utilities, .z-*

* Fix missing comma in _utilities.scss

* Fix bundlewatch

* Fix lint

* Update site/content/docs/5.2/utilities/z-index.md

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* custom appearance

* linter

Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2022-10-22 17:13:39 -04:00
Patrick H. Lauke
cda901f244
v5/docs: reintroduce outline for docs code samples, buttons when :not(:focus-visible) (#36507)
* 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
2022-08-31 18:30:23 -07:00
Louis-Maxime Piton
e2e107fc72
CSS: few proposals (#36406)
* Something to try about `!important` in color-bg helper

* Better understanding border utility `.border-*-0`

* Having rounded numbers of px
2022-05-20 10:28:31 -07:00
GeoSot
92e6856235
Docs(Scrollspy): minor changes to be aligned with new version of javascript (#36260)
* Docs(Scrollspy): minor changes to be aligned with new version of javascript code

* first example: add proper root-margin
* 'nested nav' example: add more content to sections & enable smooth-scroll

* fix typo

* Changes after feedback

* Update examples and docs to streamline some things and improve how it works section

Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-05-06 21:23:49 -07:00
Mark Otto
e089aef00f
Refactor some docs examples CSS (#36194)
* Fix some more borders and margins

* Flex utilities docs: remove .bd-highlight class from snippets

* Explicit close target

* Reorder to keep base class up top

* Fix custom position example

* Tooltips: add code snippet, use scss-docs ref for custom tooltip

* Tweak text for pagination examples

* Modals: move custom styles to utilities

* Grid docs: Combine selectors and share coloring

* Refactor tons of little things
2022-04-19 11:21:43 -07:00
Mark Otto
2aad1696f1 One more code snippet fix 2022-04-18 21:49:31 -07:00
Mark Otto
3362c8cf13
Do some CSS and Migration guide cleanup (#36191)
* Do some CSS and Migration guide cleanup

- More code snippet tweaks
- Fix some homepage hero bugs
- Do a cleanup on Migration guide content to highlight more changes and fix some issues from merge conflicts
2022-04-18 20:56:18 -07:00
Mark Otto
3990ff04a0 Fix spacing of code snippets 2022-04-18 18:19:01 -07:00
Mark Otto
195440f2fb
v5.2.0 design refresh, plus responsive offcanvas classes (#35736)
* 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>
2022-04-17 22:17:50 -07:00
GeoSot
ece1601227
Revamp Scrollspy using Intersection observer (#33421)
* Revamp scrollspy to use IntersectionObserver

* Add smooth scroll support

* Update scrollspy.js/md

* move functionality to method

* Update scrollspy.js

* Add SmoothScroll to docs example

* Refactor Using `Maps` and smaller methods

* Update scrollspy.md/js

* Update scrollspy.spec.js

* Support backwards compatibility

* minor optimizations

* Merge activation functionality

* Update scrollspy.md

* Update scrollspy.js

* Rewording some of the documentation changes

* Update scrollspy.js

* Update scrollspy.md

* tweaking calculation functionality & drop text that suggests, to deactivate target when wrapper is not visible

* tweak calculation

* Fix lint

* Support scrollspy in body & tests

* change doc example to a more valid solution

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
2022-04-13 10:29:13 -07:00
Mark Otto
e206a6021b
Update docs syntax colors head of dark mode (#35984)
* update syntax colors in preparation for dark mode changes

* Improve color contrast
2022-04-11 18:43:18 -07:00
Mark Otto
acf6ea74a7
Add additional root variables, rename $variable-prefix to $prefix (#35981)
* 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
2022-03-13 10:13:09 -07:00
Mark Otto
2e75ec3c41 Convert popovers to CSS variables 2022-03-08 14:53:53 -08:00
Mark Otto
fdcbbe3d92 Convert tooltips to CSS vars 2022-03-08 14:53:53 -08:00
Mark Otto
efc5914667 Replace instances of Sass vars for CSS variable versions of border-color and border-width 2022-02-28 11:40:32 -08:00
Mark Otto
1c5ec4c310 Separate override for hr's in component examples 2022-02-25 08:37:38 -08:00
Gaël Poupard
37f3977e6d
Rely on border-width for <hr> size (#35491)
* 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>
2022-02-22 10:02:47 +02:00
Florian Lacreuse
d17801265e
Add sticky bottom utility (#35518)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-12-16 10:27:00 +02:00
Mark Otto
a780d74b28
Docs offcanvas navbar (#34487)
* Redesign docs navbar to use offcanvas, tweak overall padding while I'm here

* Match code snippets to new gutter width

* Replace value with docs-specific variable

Opted not to do a CSS variable here since on .bd-content it would be inherited into our examples

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-12-03 10:08:01 +02:00
Jaume Sala
39b7c75b13
Add new placeholder component (#31859)
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>
2021-08-03 08:59:00 -07:00
Mark Otto
dd824f2d3e
v5.1: Add optional CSS grid (#31813) 2021-06-22 19:51:16 -07:00
Mark Otto
be17444756
Replace / division with multiplication and custom divide() function (#34245)
* 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-06-14 09:35:30 -07:00
Mark Otto
a398c500b8 Revert "Update look and feel of examples and copy buttons"
This reverts commit cdf56e0eef.
2021-04-06 21:03:27 -07:00
Mark Otto
cdf56e0eef Update look and feel of examples and copy buttons 2021-04-04 20:21:17 -07:00
Mark Otto
232e392c91
Make offcanvas example fully static (#33446) 2021-03-23 19:06:11 +02:00
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
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
Martijn Cuppens
1f2e600304 Add toast positioning 2020-12-04 16:15:51 +02: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
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
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
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
XhmikosR
3d8d0012c8
Stylelint: remove redundant disables (#31006) 2020-06-12 11:11:36 +03: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
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