aboutsummaryrefslogtreecommitdiff
path: root/site/assets/scss/_component-examples.scss
AgeCommit message (Collapse)AuthorFilesLines
2023-10-05Docs: fix unnecessary right-margin for example code blocks (#39246)Christian Oliff1-0/+4
2023-06-03Docs: consistency between custom buttons, popovers and tooltipsJulien Déramond1-3/+4
2023-04-26Add new docsref page, fix docs border-radius issues (#38491)Mark Otto1-33/+25
* Add new docsref page, fix docs border-radius issues * Remove commented out code * Update docsref.md * Fix no-code example, fix mobile styles * Updates from review * Fix block margin, remove margin-right from pre on mobile since no clipboard icons, adjust masthead snippet * Fix errant styles for border-radius on homepage --------- Co-authored-by: XhmikosR <[email protected]>
2023-03-04Docs: fix overflow:auto horizontal scrollbars covering last line of code ↵Patrick H. Lauke1-3/+4
blocks (#37694) * Add dirty hack for Firefox * Disable stylelint check for function-url-quotes to make the hack go through unchallenged * Make the fix across all browsers It's not just Firefox - same issue can be seen (though slightly less horrible looking) on macOS / Chrome etc * Tweak padding, move clipboard button down slightly * Further CSS tweaks Forcing `overflow: overlay` should normalise behaviour between Chrome/Win and other implementations. While visually the Chrome/Win scrollbar still looks big and ugly, its height/spacing is now taken into account as being part of the content, so styles can be applied consistently with extra padding at the bottom * Linting fixes * Linting fixes * Apply suggestions from code review --------- Co-authored-by: Mark Otto <[email protected]>
2023-02-25Docs: Drop unused `.focused` style (#38087)Julien Déramond1-5/+0
2023-01-17Proposallouismaximepiton1-1/+1
2023-01-16Sass docs updates (#37897)Mark Otto1-0/+7
* Add maps * Redesign scss-docs rendering * Update other CSS sections * Fix linter
2023-01-05Docs: Small enhancements (#37803)Louis-Maxime Piton1-2/+9
* Consistency with the doc * Bring a class to avoid weird behavior * Consistency + Add some explaining text * fix(color)
2023-01-05Docs: remove some CSS from `.highlight-toolbar` defJulien Déramond1-7/+0
2023-01-02Use Bootstrap colors in syntax highlightingMark Otto1-2/+2
2022-12-29Focus ring helper and utilities (#33125)Mark Otto1-0/+5
* 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Patrick H. Lauke <[email protected]>
2022-12-18Docs: replace some `--#{$prefix}` by `--bs` in Sass files (#37617)Louis-Maxime Piton1-1/+1
Co-authored-by: Julien Déramond <[email protected]>
2022-11-28Add dark mode support (#35857)Mark Otto1-18/+26
* 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 <[email protected]> * 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 <[email protected]> * Apply suggestions from code review Co-authored-by: Julien Déramond <[email protected]> * 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 <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
2022-11-14Docs: add margin between buttons in tooltip examplesJulien Déramond1-2/+8
2022-10-22Add `z-index` utilities, `.z-*` (#37317)Mark Otto1-0/+26
* 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 <[email protected]> * custom appearance * linter Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Julien Déramond <[email protected]>
2022-08-31v5/docs: reintroduce `outline` for docs code samples, buttons when ↵Patrick H. Lauke1-5/+1
`: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-05-20CSS: few proposals (#36406)Louis-Maxime Piton1-8/+2
* Something to try about `!important` in color-bg helper * Better understanding border utility `.border-*-0` * Having rounded numbers of px
2022-05-06Docs(Scrollspy): minor changes to be aligned with new version of javascript ↵GeoSot1-10/+1
(#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 <[email protected]>
2022-04-19Refactor some docs examples CSS (#36194)Mark Otto1-113/+77
* 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-18One more code snippet fixMark Otto1-1/+17
2022-04-18Do some CSS and Migration guide cleanup (#36191)Mark Otto1-3/+9
* 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-18Fix spacing of code snippetsMark Otto1-18/+13
2022-04-17v5.2.0 design refresh, plus responsive offcanvas classes (#35736)Mark Otto1-14/+28
* 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-04-13Revamp Scrollspy using Intersection observer (#33421)GeoSot1-2/+16
* 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 <[email protected]> Co-authored-by: Patrick H. Lauke <[email protected]>
2022-04-11Update docs syntax colors head of dark mode (#35984)Mark Otto1-1/+1
* update syntax colors in preparation for dark mode changes * Improve color contrast
2022-03-13Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981)Mark Otto1-2/+2
* 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-08Convert popovers to CSS variablesMark Otto1-0/+11
2022-03-08Convert tooltips to CSS varsMark Otto1-0/+4
2022-02-28Replace instances of Sass vars for CSS variable versions of border-color and ↵Mark Otto1-2/+2
border-width
2022-02-25Separate override for hr's in component examplesMark Otto1-1/+5
2022-02-22Rely on `border-width` for `<hr>` size (#35491)Gaël Poupard1-1/+1
* 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 <[email protected]>
2021-12-16Add sticky bottom utility (#35518)Florian Lacreuse1-2/+4
Co-authored-by: XhmikosR <[email protected]>
2021-12-03Docs offcanvas navbar (#34487)Mark Otto1-4/+4
* 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 <[email protected]>
2021-08-03Add new placeholder component (#31859)Jaume Sala1-0/+11
Co-authored-by: XhmikosR <[email protected]> Co-authored-by: Jaume Sala <[email protected]> Co-authored-by: Mark Otto <[email protected]> Co-authored-by: Patrick H. Lauke <[email protected]>
2021-06-22v5.1: Add optional CSS grid (#31813)Mark Otto1-0/+15
2021-06-14Replace `/` division with multiplication and custom `divide()` function (#34245)Mark Otto1-3/+3
* 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-06Revert "Update look and feel of examples and copy buttons"Mark Otto1-32/+5
This reverts commit cdf56e0eefd797d4b0f26021d24958fc315a5f2c.
2021-04-04Update look and feel of examples and copy buttonsMark Otto1-5/+32
2021-03-23Make offcanvas example fully static (#33446)Mark Otto1-0/+3
2021-03-23Allow offcanvas to be initialized in open state (#33382)GeoSot1-3/+0
* Update docs to use new .show behavior and clarify some copy for first example Co-authored-by: Mark Otto <[email protected]> Co-authored-by: XhmikosR <[email protected]>
2021-03-02Offcanvas as component (#29017)GeoSot1-0/+12
* 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]>
2021-01-06fix(ratio): missing variable prefix (#32501)Gaël Poupard1-1/+1
This is the only unprefixed custom property, and its name is very common so I think we'd better prefix it too.
2020-12-04Add toast positioningMartijn Cuppens1-0/+5
2020-11-05Drop Legacy Edge support.XhmikosR1-1/+0
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-10-23Don't wrap the code snippets in our docs (#31679)Mark Otto1-0/+2
Co-authored-by: XhmikosR <[email protected]>
2020-09-23Updates to .ratio selectors and docsMark Otto1-5/+6
- 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-23Add example of responsive behavior for aspect ratiosMark Otto1-0/+9
2020-09-23Move styles to docs CSSMark Otto1-1/+4
2020-09-23Rename the classes and docs page, update everything accordinglyMark Otto1-2/+2
2020-09-23Updates responsive embeds with new class names and CSS variablesMark Otto1-0/+13
- 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