From a780d74b28add417be398c525d2ed75775e02e16 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 3 Dec 2021 00:08:01 -0800 Subject: 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 --- site/assets/scss/_component-examples.scss | 8 ++++---- site/assets/scss/_layout.scss | 3 +++ site/assets/scss/_navbar.scss | 12 ++++++++++++ site/assets/scss/_sidebar.scss | 2 +- site/assets/scss/_subnav.scss | 11 +++++++---- site/assets/scss/_variables.scss | 2 ++ 6 files changed, 29 insertions(+), 9 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index f93f1ee98..208654ae0 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -85,7 +85,7 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem (-$grid-gutter-width * .5) 0; + margin: 1rem ($bd-gutter-x * -1) 0; border: solid $gray-300; border-width: 1px 0 0; @include clearfix(); @@ -313,7 +313,7 @@ // .highlight { - padding: 1rem; + padding: var(--bs-gutter-x) $bd-gutter-x; margin-bottom: 1rem; background-color: $gray-100; @@ -338,8 +338,8 @@ } .bd-content .highlight { - margin-right: (-$grid-gutter-width * .5); - margin-left: (-$grid-gutter-width * .5); + margin-right: $bd-gutter-x * -1; + margin-left: $bd-gutter-x * -1; @include media-breakpoint-up(sm) { margin-right: 0; diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index 707c4949d..03eab6f28 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,4 +1,7 @@ .bd-layout { + padding-right: $bd-gutter-x; + padding-left: $bd-gutter-x; + @include media-breakpoint-up(md) { display: grid; gap: $grid-gutter-width; diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 053cadf2e..07851b55c 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,4 +1,7 @@ .bd-navbar { + --bs-gutter-x: $bd-gutter-x; + --bs-gutter-y: $bd-gutter-x; + padding: .75rem 0; background-color: $bd-purple-bright; @@ -29,4 +32,13 @@ width: 1rem; height: 1rem; } + + .offcanvas { + background-color: $bd-purple-bright; + border-left: 0; + + @include media-breakpoint-down(md) { + box-shadow: $box-shadow-lg; + } + } } diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index d893ba9dc..b6d347fe7 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,6 +1,6 @@ .bd-sidebar { @include media-breakpoint-down(md) { - margin: 0 -.75rem 1rem; + margin: 0 ($bd-gutter-x * -1) 1rem; } } diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index 8377ff423..cc47c6fb5 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -1,4 +1,7 @@ .bd-subnavbar { + --bs-gutter-x: $bd-gutter-x; + --bs-gutter-y: $bd-gutter-x; + // The position and z-index are needed for the dropdown to stay on top of the content position: relative; z-index: $zindex-sticky; @@ -31,16 +34,16 @@ position: absolute; top: .4rem; right: .4rem; + bottom: .4rem; display: flex; align-items: center; justify-content: center; - height: 1.5rem; - padding-right: .25rem; - padding-left: .25rem; + padding-right: .3125rem; + padding-left: .3125rem; @include font-size(.75rem); color: $gray-600; content: "Ctrl + /"; - border: $border-width solid $border-color; + background-color: $gray-100; @include border-radius(.125rem); } diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 110600260..939492f70 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -11,3 +11,5 @@ $bd-warning: #f0ad4e; $bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,"); $sidebar-collapse-icon: url("data:image/svg+xml,"); + +$bd-gutter-x: 1.25rem; -- cgit v1.2.3 From 8cdb6c40bdf55229459f479111e6a44d49052cf1 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 14 Dec 2021 09:51:31 +0200 Subject: Update stylelint and stylelint-config-twbs-bootstrap (#35438) --- site/assets/scss/_algolia.scss | 3 ++- site/assets/scss/_layout.scss | 6 +++--- site/assets/scss/_placeholder-img.scss | 2 +- site/assets/scss/_syntax.scss | 2 +- 4 files changed, 7 insertions(+), 6 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 097dbdd55..89468d42b 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -1,5 +1,7 @@ // Docsearch theming +// stylelint-disable selector-class-pattern + .algolia-autocomplete { width: 100%; } @@ -24,7 +26,6 @@ font-weight: 600; color: $bd-purple-bright; - // stylelint-disable-next-line selector-class-pattern :not(.algolia-docsearch-suggestion__main) > & { display: none; } diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index 03eab6f28..f83cf094c 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -4,9 +4,9 @@ @include media-breakpoint-up(md) { display: grid; - gap: $grid-gutter-width; grid-template-areas: "sidebar main"; grid-template-columns: 1fr 3fr; + gap: $grid-gutter-width; } @include media-breakpoint-up(lg) { @@ -23,20 +23,20 @@ @include media-breakpoint-up(md) { display: grid; - gap: inherit; grid-template-areas: "intro" "toc" "content"; grid-template-rows: auto auto 1fr; + gap: inherit; } @include media-breakpoint-up(lg) { grid-template-areas: "intro toc" "content toc"; - grid-template-columns: 4fr 1fr; grid-template-rows: auto 1fr; + grid-template-columns: 4fr 1fr; } } diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss index 90a29544e..6f5bbe418 100644 --- a/site/assets/scss/_placeholder-img.scss +++ b/site/assets/scss/_placeholder-img.scss @@ -6,8 +6,8 @@ .bd-placeholder-img { @include font-size(1.125rem); - text-anchor: middle; user-select: none; + text-anchor: middle; } .bd-placeholder-img-lg { diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 8120bbef2..89c81d134 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -1,4 +1,4 @@ -// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern +// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations /* Background .chroma { background-color: #f0f0f0; } */ /* Other .chroma .x { } */ -- cgit v1.2.3 From d17801265e3562e5386b3445b84915618f5a81d7 Mon Sep 17 00:00:00 2001 From: Florian Lacreuse Date: Thu, 16 Dec 2021 09:27:00 +0100 Subject: Add sticky bottom utility (#35518) Co-authored-by: XhmikosR --- site/assets/scss/_component-examples.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 208654ae0..f81a0af18 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -159,7 +159,8 @@ margin: -1rem -1rem 1rem; } - .fixed-bottom { + .fixed-bottom, + .sticky-bottom { position: static; margin: 1rem -1rem -1rem; } @@ -169,7 +170,8 @@ .sticky-top { margin: -1.5rem -1.5rem 1rem; } - .fixed-bottom { + .fixed-bottom, + .sticky-bottom { margin: 1rem -1.5rem -1.5rem; } } -- cgit v1.2.3 From 9680e1745672f35f6a63c6670b1668e46d5c575d Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 3 Jan 2022 15:03:42 +0200 Subject: Bump copyright year to 2022 (#35639) --- site/assets/js/application.js | 4 ++-- site/assets/scss/docs.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 2c57906c9..e2a464d3c 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -4,8 +4,8 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 8b7bc99a1..0029e83af 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -1,7 +1,7 @@ /*! * Bootstrap Docs (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ -- cgit v1.2.3 From 96c67a7ff7acc590bc4b1aced56ee0290cc1b589 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 7 Feb 2022 10:05:43 +0200 Subject: Fix empty content of tooltip after 'copy' action in docs (#35773) Co-authored-by: XhmikosR --- site/assets/js/application.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index e2a464d3c..6a8c63cbb 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -118,7 +118,8 @@ } // Insert copy to clipboard button before .highlight - var btnHtml = '
' + var btnTitle = 'Copy to clipboard' + var btnHtml = '
' document.querySelectorAll('div.highlight') .forEach(function (element) { element.insertAdjacentHTML('beforebegin', btnHtml) @@ -126,7 +127,7 @@ document.querySelectorAll('.btn-clipboard') .forEach(function (btn) { - var tooltipBtn = new bootstrap.Tooltip(btn) + var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle }) btn.addEventListener('mouseleave', function () { // Explicitly hide tooltip, since after clicking it remains @@ -144,11 +145,10 @@ clipboard.on('success', function (event) { var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) - var originalTitle = event.trigger.getAttribute('title') tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' }) event.trigger.addEventListener('hidden.bs.tooltip', function () { - tooltipBtn.setContent({ '.tooltip-inner': originalTitle }) + tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) }, { once: true }) event.clearSelection() }) @@ -157,11 +157,10 @@ var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' var fallbackMsg = 'Press ' + modifierKey + 'C to copy' var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) - var originalTitle = event.trigger.getAttribute('title') tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg }) event.trigger.addEventListener('hidden.bs.tooltip', function () { - tooltipBtn.setContent({ '.tooltip-inner': originalTitle }) + tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) }, { once: true }) }) -- cgit v1.2.3 From ef9d8538a06f43f74f49d6829cbf301773381488 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Jul 2021 21:36:12 -0700 Subject: Convert .btn and mixins to use CSS variables --- site/assets/scss/_buttons.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index b266d3e88..adbc39ed9 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -2,6 +2,7 @@ // // Custom buttons for the docs. +// scss-docs-start btn-css-vars-example .btn-bd-primary { font-weight: 600; color: $white; @@ -19,6 +20,7 @@ box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); } } +// scss-docs-end btn-css-vars-example .btn-bd-download { font-weight: 600; -- cgit v1.2.3 From 3e6265ac55cd8548a83f2470a19ff1dcf28d3b0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 9 Feb 2022 14:15:15 -0800 Subject: Rewrite custom docs buttons - Use CSS variables wherever possible - Rename purple-bright to violet for brevity, add CSS vars versions - Rename download to accent --- site/assets/scss/_algolia.scss | 2 +- site/assets/scss/_brand.scss | 4 +-- site/assets/scss/_buttons.scss | 66 ++++++++++++++-------------------------- site/assets/scss/_content.scss | 4 +-- site/assets/scss/_navbar.scss | 4 +-- site/assets/scss/_sidebar.scss | 6 ++-- site/assets/scss/_subnav.scss | 8 ++--- site/assets/scss/_variables.scss | 19 ++++++++---- 8 files changed, 49 insertions(+), 64 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 89468d42b..9c457d2e3 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -24,7 +24,7 @@ .algolia-docsearch-suggestion--category-header { padding: .125rem 1rem; font-weight: 600; - color: $bd-purple-bright; + color: $bd-violet; :not(.algolia-docsearch-suggestion__main) > & { display: none; diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss index 73db11e18..9637cfb18 100644 --- a/site/assets/scss/_brand.scss +++ b/site/assets/scss/_brand.scss @@ -4,11 +4,11 @@ // Logo series wrapper .bd-brand-logos { - color: $bd-purple-bright; + color: $bd-violet; .inverse { color: $white; - background-color: $bd-purple-bright; + background-color: $bd-violet; } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index adbc39ed9..93ffa83ed 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -4,54 +4,32 @@ // scss-docs-start btn-css-vars-example .btn-bd-primary { - font-weight: 600; - color: $white; - background-color: $bd-purple-bright; - border-color: $bd-purple-bright; - - &:hover, - &:active { - color: $white; - background-color: shade-color($bd-purple-bright, 20%); - border-color: shade-color($bd-purple-bright, 20%); - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet); + --bs-btn-border-color: var(--bd-violet); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)}; + --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)}; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } // scss-docs-end btn-css-vars-example -.btn-bd-download { - font-weight: 600; - color: $bd-download; - border-color: $bd-download; - - &:hover, - &:active { - color: $bd-dark; - background-color: $bd-download; - border-color: $bd-download; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-download, .25); - } +.btn-bd-accent { + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bd-accent); + --bs-btn-border-color: var(--bd-accent); + --bs-btn-hover-color: var(--bd-dark); + --bs-btn-hover-bg: var(--bd-accent); + --bs-btn-hover-border-color: var(--bd-accent); + --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb); } .btn-bd-light { - color: $gray-600; - border-color: $gray-300; - - .show > &, - &:hover, - &:active { - color: $bd-purple-bright; - background-color: $white; - border-color: $bd-purple-bright; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } + --bs-btn-color: var(--bs-gray-600); + --bs-btn-border-color: var(--bs-gray-300); + --bs-btn-active-color: var(--bd-violet); + --bs-btn-active-bg: var(--bs-white); + --bs-btn-active-border-color: var(--bd-violet); + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f2b5cfc54..fa290dabc 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -73,9 +73,9 @@ } .bd-text-purple-bright { - color: $bd-purple-bright; + color: $bd-violet; } .bd-bg-purple-bright { - background-color: $bd-purple-bright; + background-color: $bd-violet; } diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 07851b55c..401731ae1 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -3,7 +3,7 @@ --bs-gutter-y: $bd-gutter-x; padding: .75rem 0; - background-color: $bd-purple-bright; + background-color: $bd-violet; .navbar-toggler { padding: 0; @@ -34,7 +34,7 @@ } .offcanvas { - background-color: $bd-purple-bright; + background-color: $bd-violet; border-left: 0; @include media-breakpoint-down(md) { diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index b6d347fe7..452b155ff 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -40,7 +40,7 @@ &:focus { color: rgba($black, .85); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba($bd-purple-bright, .1); + background-color: rgba($bd-violet, .1); } } @@ -55,11 +55,11 @@ &:hover, &:focus { color: rgba($black, .85); - background-color: rgba($bd-purple-bright, .1); + background-color: rgba($bd-violet, .1); } &:focus { - box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7); + box-shadow: 0 0 0 1px rgba($bd-violet, .7); } // Add chevron if there's a submenu diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index cc47c6fb5..db183ff6a 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -55,8 +55,8 @@ padding-right: 3.75rem; &:focus { - border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + border-color: $bd-violet; + box-shadow: 0 0 0 3px rgba($bd-violet, .25); } } } @@ -66,11 +66,11 @@ &:hover, &:focus { - color: $bd-purple-bright; + color: $bd-violet; } &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + box-shadow: 0 0 0 3px rgba($bd-violet, .25); } .bi-collapse { display: none; } diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 939492f70..0c40b17e9 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -2,14 +2,21 @@ // Local docs variables $bd-purple: #563d7c; -$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list +$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list -$bd-dark: #2a2730; -$bd-download: #ffe484; -$bd-info: #5bc0de; -$bd-warning: #f0ad4e; -$bd-danger: #d9534f; +$bd-accent: #ffe484; +$bd-info: #5bc0de; +$bd-warning: #f0ad4e; +$bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,"); $sidebar-collapse-icon: url("data:image/svg+xml,"); $bd-gutter-x: 1.25rem; + +:root { + --bd-purple: #{$bd-purple}; + --bd-violet: #{$bd-violet}; + --bd-accent: #{$bd-accent}; + --bd-violet-rgb: #{to-rgb($bd-violet)}; + --bd-accent-rgb: #{to-rgb($bd-accent)}; +} -- cgit v1.2.3 From ae12d645ef0225831e59248c45689042ebdb83d2 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 19 Feb 2022 15:16:23 +0200 Subject: Replace AnchorJS with a Hugo render hook (#32953) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Replace AnchorJS with a Hugo render hook * docs(anchors): improve aria-label on anchor links * docs(anchors): show anchor link when ed * docs(anchors): add hash in pseudo-element Co-authored-by: Gaël Poupard --- site/assets/js/application.js | 7 +------ site/assets/js/vendor/anchor.min.js | 9 --------- site/assets/scss/_anchor.scss | 16 +++++++++++++--- 3 files changed, 14 insertions(+), 18 deletions(-) delete mode 100644 site/assets/js/vendor/anchor.min.js (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 6a8c63cbb..b267bfb6f 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -10,7 +10,7 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* global ClipboardJS: false, anchors: false, bootstrap: false */ +/* global ClipboardJS: false, bootstrap: false */ (function () { 'use strict' @@ -163,9 +163,4 @@ tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) }, { once: true }) }) - - anchors.options = { - icon: '#' - } - anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') })() diff --git a/site/assets/js/vendor/anchor.min.js b/site/assets/js/vendor/anchor.min.js deleted file mode 100644 index 608fea9f7..000000000 --- a/site/assets/js/vendor/anchor.min.js +++ /dev/null @@ -1,9 +0,0 @@ -// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat -// -// AnchorJS - v4.3.1 - 2021-04-17 -// https://www.bryanbraun.com/anchorjs/ -// Copyright (c) 2021 Bryan Braun; Licensed MIT -// -// @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat -!function(A,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():(A.AnchorJS=e(),A.anchors=new A.AnchorJS)}(this,function(){"use strict";return function(A){function d(A){A.icon=Object.prototype.hasOwnProperty.call(A,"icon")?A.icon:"",A.visible=Object.prototype.hasOwnProperty.call(A,"visible")?A.visible:"hover",A.placement=Object.prototype.hasOwnProperty.call(A,"placement")?A.placement:"right",A.ariaLabel=Object.prototype.hasOwnProperty.call(A,"ariaLabel")?A.ariaLabel:"Anchor",A.class=Object.prototype.hasOwnProperty.call(A,"class")?A.class:"",A.base=Object.prototype.hasOwnProperty.call(A,"base")?A.base:"",A.truncate=Object.prototype.hasOwnProperty.call(A,"truncate")?Math.floor(A.truncate):64,A.titleText=Object.prototype.hasOwnProperty.call(A,"titleText")?A.titleText:""}function w(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new TypeError("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}this.options=A||{},this.elements=[],d(this.options),this.isTouchDevice=function(){return Boolean("ontouchstart"in window||window.TouchEvent||window.DocumentTouch&&document instanceof DocumentTouch)},this.add=function(A){var e,t,o,i,n,s,a,c,r,l,h,u,p=[];if(d(this.options),"touch"===(l=this.options.visible)&&(l=this.isTouchDevice()?"always":"hover"),0===(e=w(A=A||"h2, h3, h4, h5, h6")).length)return this;for(null===document.head.querySelector("style.anchorjs")&&((u=document.createElement("style")).className="anchorjs",u.appendChild(document.createTextNode("")),void 0===(A=document.head.querySelector('[rel="stylesheet"],style'))?document.head.appendChild(u):document.head.insertBefore(u,A),u.sheet.insertRule(".anchorjs-link{opacity:0;text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}",u.sheet.cssRules.length),u.sheet.insertRule(":hover>.anchorjs-link,.anchorjs-link:focus{opacity:1}",u.sheet.cssRules.length),u.sheet.insertRule("[data-anchorjs-icon]::after{content:attr(data-anchorjs-icon)}",u.sheet.cssRules.length),u.sheet.insertRule('@font-face{font-family:anchorjs-icons;src:url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype")}',u.sheet.cssRules.length)),u=document.querySelectorAll("[id]"),t=[].map.call(u,function(A){return A.id}),i=0;i\]./()*\\\n\t\b\v\u00A0]/g,"-").replace(/-{2,}/g,"-").substring(0,this.options.truncate).replace(/^-+|-+$/gm,"").toLowerCase()},this.hasAnchorJSLink=function(A){var e=A.firstChild&&-1<(" "+A.firstChild.className+" ").indexOf(" anchorjs-link "),A=A.lastChild&&-1<(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ");return e||A||!1}}}); -// @license-end diff --git a/site/assets/scss/_anchor.scss b/site/assets/scss/_anchor.scss index 96a7dbf9c..5bb39150b 100644 --- a/site/assets/scss/_anchor.scss +++ b/site/assets/scss/_anchor.scss @@ -1,11 +1,21 @@ -.anchorjs-link { +.anchor-link { + padding: 0 .175rem; font-weight: 400; color: rgba($link-color, .5); - @include transition(color .15s ease-in-out); + text-decoration: none; + opacity: 0; + @include transition(color .15s ease-in-out, opacity .15s ease-in-out); + + &::after { + content: "#"; + } &:focus, - &:hover { + &:hover, + :hover > &, + :target > & { color: $link-color; text-decoration: none; + opacity: 1; } } -- cgit v1.2.3 From 37f3977e6d96e274cb73255d99e3e4ec60f03c0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Tue, 22 Feb 2022 09:02:47 +0100 Subject: Rely on `border-width` for `
` 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 --- site/assets/scss/_component-examples.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index f81a0af18..9e017c507 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -124,7 +124,7 @@ display: block; } - > :last-child { + > :not(hr):last-child { margin-bottom: 0; } -- cgit v1.2.3 From 1c5ec4c310ee630884fb75050ecd94e771031839 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 24 Feb 2022 16:49:10 -0800 Subject: Separate override for hr's in component examples --- site/assets/scss/_component-examples.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 9e017c507..4bc44ad2f 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -124,10 +124,14 @@ display: block; } - > :not(hr):last-child { + > :last-child { margin-bottom: 0; } + > hr:last-child { + margin-bottom: $spacer; + } + // Images > svg + svg, > img + img { -- cgit v1.2.3 From 12d49f19b0b4e5735480d8a1c4cf789f16eac24a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Feb 2022 13:58:08 -0800 Subject: Remove thicker border on table thead elements Use the new .table-group-divider to create your own dividers as desired. Would love to find a better way to handle border-color for this, but for now, this is at least opt-in. I've applied it by default in another way for our docs tables to help differentiate our content vs our components. Fixes #35342 --- site/assets/scss/_content.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index fa290dabc..3dd380ef7 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -45,6 +45,10 @@ } } + thead { + border-bottom: 2px solid currentColor; + } + th, td { &:first-child { -- cgit v1.2.3 From efc59146671bb671993353cc1f0a0daff1bfe554 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Feb 2022 14:55:47 -0800 Subject: Replace instances of Sass vars for CSS variable versions of border-color and border-width --- site/assets/scss/_component-examples.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 4bc44ad2f..1d860b2c2 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -194,7 +194,7 @@ width: 10rem; color: $gray-600; background-color: $gray-100; - border: $border-width solid $border-color; + border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); > div { display: flex; @@ -265,7 +265,7 @@ .bd-example-border-utils-0 { [class^="border"] { - border: 1px solid $border-color; + border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); } } -- cgit v1.2.3 From abe9d310baa8084273a909cdeb10119556ecac07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 25 Feb 2022 14:06:14 +0100 Subject: =?UTF-8?q?Site=20assets:=20`.bd-bg-purple-bright`=20=E2=86=92=20`?= =?UTF-8?q?.bd-bg-violet`=20and=20drop=20unused=20`.bd-text-purple-bright`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/assets/scss/_content.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 3dd380ef7..e79108fc6 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -76,10 +76,6 @@ font-weight: 300; } -.bd-text-purple-bright { - color: $bd-violet; -} - -.bd-bg-purple-bright { +.bd-bg-violet { background-color: $bd-violet; } -- cgit v1.2.3 From fdcbbe3d92925305031ff76988d8276afb6a3277 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Jul 2021 09:21:53 +0300 Subject: Convert tooltips to CSS vars --- site/assets/scss/_component-examples.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 1d860b2c2..d29fefa7d 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -239,6 +239,10 @@ white-space: nowrap; } +.custom-tooltip { + --bs-tooltip-bg: var(--bs-primary); +} + // Scrollspy demo on fixed height div .scrollspy-example { position: relative; -- cgit v1.2.3 From 2e75ec3c41a54865caa48f46485a1c90b12b0de6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 Sep 2021 20:18:22 -0700 Subject: Convert popovers to CSS variables --- site/assets/scss/_component-examples.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index d29fefa7d..31a5063a7 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -243,6 +243,17 @@ --bs-tooltip-bg: var(--bs-primary); } +// scss-docs-start custom-popovers +.custom-popover { + --bs-popover-max-width: 200px; + --bs-popover-border-color: var(--bs-primary); + --bs-popover-header-bg: var(--bs-primary); + --bs-popover-header-color: var(--bs-white); + --bs-popover-body-padding-x: 1rem; + --bs-popover-body-padding-y: .5rem; +} +// scss-docs-end custom-popovers + // Scrollspy demo on fixed height div .scrollspy-example { position: relative; -- cgit v1.2.3 From 645f95584551409660fcd9b990fc24caa0327df5 Mon Sep 17 00:00:00 2001 From: Puru Vijay <47742487+PuruVJ@users.noreply.github.com> Date: Wed, 9 Mar 2022 21:02:58 +0530 Subject: docs: add a StackBlitz "Try It" button in code examples (#35644) Co-authored-by: GeoSot Co-authored-by: XhmikosR --- site/assets/js/application.js | 27 +++++++++++++++++---------- site/assets/scss/_clipboard-js.scss | 11 +++++++++-- 2 files changed, 26 insertions(+), 12 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index b267bfb6f..1719ed9f2 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -125,17 +125,24 @@ element.insertAdjacentHTML('beforebegin', btnHtml) }) - document.querySelectorAll('.btn-clipboard') - .forEach(function (btn) { - var tooltipBtn = new bootstrap.Tooltip(btn, { title: btnTitle }) - - btn.addEventListener('mouseleave', function () { - // Explicitly hide tooltip, since after clicking it remains - // focused (as it's a button), so tooltip would otherwise - // remain visible until focus is moved away - tooltipBtn.hide() - }) + /** + * + * @param {HTMLButtonElement} btn + * @param {string} title + */ + function snippetButtonTooltip(btn, title) { + var tooltipBtn = new bootstrap.Tooltip(btn, { title: title }) + + btn.addEventListener('mouseleave', function () { + // Explicitly hide tooltip, since after clicking it remains + // focused (as it's a button), so tooltip would otherwise + // remain visible until focus is moved away + tooltipBtn.hide() }) + } + + snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard') + snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz') var clipboard = new ClipboardJS('.btn-clipboard', { target: function (trigger) { diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 83b9a8b9e..b2b0854dc 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -2,7 +2,8 @@ // // JS-based `Copy` buttons for code snippets. -.bd-clipboard { +.bd-clipboard, +.bd-edit { position: relative; display: none; float: right; @@ -16,7 +17,8 @@ } } -.btn-clipboard { +.btn-clipboard, +.btn-edit { position: absolute; top: .65rem; right: .65rem; @@ -25,6 +27,7 @@ padding: .25rem .5rem; @include font-size(.65em); color: $primary; + white-space: nowrap; background-color: $white; border: 1px solid; @include border-radius(); @@ -35,3 +38,7 @@ background-color: $primary; } } + +.btn-edit { + right: 3.65rem; +} -- cgit v1.2.3 From 05c6e7dd66c10af8b2f8345b48c26de12f769335 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 11 Mar 2022 17:56:57 +0200 Subject: Fix docs error after #35644 (#36002) --- site/assets/js/application.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 1719ed9f2..0603f52c3 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -127,22 +127,24 @@ /** * - * @param {HTMLButtonElement} btn + * @param {string} selector * @param {string} title */ - function snippetButtonTooltip(btn, title) { - var tooltipBtn = new bootstrap.Tooltip(btn, { title: title }) - - btn.addEventListener('mouseleave', function () { - // Explicitly hide tooltip, since after clicking it remains - // focused (as it's a button), so tooltip would otherwise - // remain visible until focus is moved away - tooltipBtn.hide() + function snippetButtonTooltip(selector, title) { + document.querySelectorAll(selector).forEach(function (btn) { + var tooltipBtn = new bootstrap.Tooltip(btn, { title: title }) + + btn.addEventListener('mouseleave', function () { + // Explicitly hide tooltip, since after clicking it remains + // focused (as it's a button), so tooltip would otherwise + // remain visible until focus is moved away + tooltipBtn.hide() + }) }) } - snippetButtonTooltip(document.querySelector('.btn-clipboard'), 'Copy to clipboard') - snippetButtonTooltip(document.querySelector('.btn-edit'), 'Edit on Stackblitz') + snippetButtonTooltip('.btn-clipboard', 'Copy to clipboard') + snippetButtonTooltip('.btn-edit', 'Edit on Stackblitz') var clipboard = new ClipboardJS('.btn-clipboard', { target: function (trigger) { -- cgit v1.2.3 From acf6ea74a74328bcaa9f1c354f27e602cfbb8968 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Mar 2022 10:13:09 -0700 Subject: 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 --- site/assets/scss/_component-examples.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 31a5063a7..1c789a8ff 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -194,7 +194,7 @@ width: 10rem; color: $gray-600; background-color: $gray-100; - border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); + border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); > div { display: flex; @@ -280,7 +280,7 @@ .bd-example-border-utils-0 { [class^="border"] { - border: var(--#{$variable-prefix}border-width) solid var(--#{$variable-prefix}border-color); + border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); } } -- cgit v1.2.3 From a9a89debc7535a1c5857ced28c1002a2f682889f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 14 Mar 2022 00:38:04 -0700 Subject: Rewrite docs tables in Markdown with table shortcode (#31337) Co-authored-by: XhmikosR Co-authored-by: GeoSot --- site/assets/scss/_content.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index e79108fc6..e8ec8ac15 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -31,15 +31,12 @@ } // Override Bootstrap defaults - > .table { - max-width: 100%; + > .table, + > .table-responsive .table { margin-bottom: 1.5rem; @include font-size(.875rem); @include media-breakpoint-down(lg) { - display: block; - overflow-x: auto; - &.table-bordered { border: 0; } @@ -61,6 +58,7 @@ } // Prevent breaking of code + // stylelint-disable-next-line selector-max-compound-selectors td:first-child > code { white-space: nowrap; } -- cgit v1.2.3 From 6b4bdcc657da41838988765e6defc2032d17a4ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 29 Mar 2022 17:16:11 +0200 Subject: Fix typo for StackBlitz edit button's tooltip (#36073) --- site/assets/js/application.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 0603f52c3..cf5e4c9c7 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -144,7 +144,7 @@ } snippetButtonTooltip('.btn-clipboard', 'Copy to clipboard') - snippetButtonTooltip('.btn-edit', 'Edit on Stackblitz') + snippetButtonTooltip('.btn-edit', 'Edit on StackBlitz') var clipboard = new ClipboardJS('.btn-clipboard', { target: function (trigger) { -- cgit v1.2.3 From 273ebad151b98c37ebedc5111c3efff596dd0d24 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 1 Apr 2022 10:01:51 +0200 Subject: Changing to btnTitle and btnEdit --- site/assets/js/application.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index cf5e4c9c7..fa1fba00d 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -119,6 +119,7 @@ // Insert copy to clipboard button before .highlight var btnTitle = 'Copy to clipboard' + var btnEdit = 'Edit on StackBlitz' var btnHtml = '
' document.querySelectorAll('div.highlight') .forEach(function (element) { @@ -143,8 +144,8 @@ }) } - snippetButtonTooltip('.btn-clipboard', 'Copy to clipboard') - snippetButtonTooltip('.btn-edit', 'Edit on StackBlitz') + snippetButtonTooltip('.btn-clipboard', btnTitle) + snippetButtonTooltip('.btn-edit', btnEdit) var clipboard = new ClipboardJS('.btn-clipboard', { target: function (trigger) { -- cgit v1.2.3 From 7648848e04d7cf4753d229f467a6b020c92b366e Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 8 Apr 2022 09:17:00 +0300 Subject: Update devDependencies (#36120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update devDependencies * @babel/core ^7.17.8 → ^7.17.9 * @popperjs/core ^2.11.4 → ^2.11.5 * clean-css-cli ^5.5.2 → ^5.6.0 * eslint-plugin-import ^2.25.4 → ^2.26.0 * find-unused-sass-variables ^4.0.3 → ^4.0.4 * karma-rollup-preprocessor ^7.0.8 → ^7.0.7 * sass ^1.49.11 → ^1.50.0 * stylelint 14.2.0 → ^14.6.1 * Fix currentcolor case --- site/assets/scss/_content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index e8ec8ac15..d796c491e 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -43,7 +43,7 @@ } thead { - border-bottom: 2px solid currentColor; + border-bottom: 2px solid currentcolor; } th, -- cgit v1.2.3 From e206a6021bda6b9ccb07b3821477f4e38bc9d413 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 11 Apr 2022 18:43:18 -0700 Subject: Update docs syntax colors head of dark mode (#35984) * update syntax colors in preparation for dark mode changes * Improve color contrast --- site/assets/scss/_component-examples.scss | 2 +- site/assets/scss/_syntax.scss | 179 ++++++++++++++++-------------- 2 files changed, 97 insertions(+), 84 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 1c789a8ff..b687a68e6 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -336,7 +336,7 @@ .highlight { padding: var(--bs-gutter-x) $bd-gutter-x; margin-bottom: 1rem; - background-color: $gray-100; + background-color: var(--bs-gray-100); @include media-breakpoint-up(sm) { padding: 1rem 1.5rem; diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 89c81d134..56bc2840e 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -1,88 +1,101 @@ -// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations +:root { + --base00: #fff; + --base01: #f5f5f5; + --base02: #c8c8fa; + --base03: #565c64; + --base04: #030303; + --base05: #333; + --base06: #fff; + --base07: #9a6700; + --base08: #bc4c00; + --base09: #087990; + --base0A: #795da3; + --base0B: #183691; + --base0C: #183691; + --base0D: #795da3; + --base0E: #a71d5d; + --base0F: #333; +} + +.hll { background-color: #fff; } +.c { color: var(--base03); } +.err { color: var(--base08); } +.k { color: var(--base0E); } +.l { color: var(----base09); } +.n { color: var(--base08); } +.o { color: var(--base05); } +.p { color: var(--base05); } +.cm { color: var(--base04); } +.cp { color: var(--base08); } +.c1 { color: var(--base03); } +.cs { color: var(--base04); } +.gd { color: var(--base08); } +.ge { font-style: italic; } +.gh { + font-weight: 600; + color: #fff; +} +.gi { color: var(--base0C); } +.gp { + font-weight: 600; + color: var(--base04); +} +.gs { font-weight: 600; } +.gu { + font-weight: 600; + color: var(--base0C); +} +.kc { color: var(--base0E); } +.kd { color: var(--base0E); } +.kn { color: var(--base0C); } +.kp { color: var(--base0E); } +.kr { color: var(--base0E); } +.kt { color: var(--base0A); } +.ld { color: var(--base0C); } +.m { color: var(--base09); } +.s { color: var(--base0C); } +.na { color: var(--base0A); } +.nb { color: var(--base05); } +.nc { color: var(--base07); } +.no { color: var(--base08); } +.nd { color: var(--base07); } +.ni { color: var(--base08); } +.ne { color: var(--base08); } +.nf { color: var(--base0B); } +.nl { color: var(--base05); } +.nn { color: var(--base0A); } +.nx { color: var(--base0A); } +.py { color: var(--base08); } +.nt { color: var(--base08); } +.nv { color: var(--base08); } +.ow { color: var(--base0C); } +.w { color: #fff; } +.mf { color: var(--base09); } +.mh { color: var(--base09); } +.mi { color: var(--base09); } +.mo { color: var(--base09); } +.sb { color: var(--base0C); } +.sc { color: #fff; } +.sd { color: var(--base04); } +.s2 { color: var(--base0C); } +.se { color: var(--base09); } +.sh { color: var(--base0C); } +.si { color: var(--base09); } +.sx { color: var(--base0C); } +.sr { color: var(--base0C); } +.s1 { color: var(--base0C); } +.ss { color: var(--base0C); } +.bp { color: var(--base05); } +.vc { color: var(--base08); } +.vg { color: var(--base08); } +.vi { color: var(--base08); } +.il { color: var(--base09); } -/* Background .chroma { background-color: #f0f0f0; } */ -/* Other .chroma .x { } */ -/* Error .chroma .err { } */ -/* LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */ -/* LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */ -/* LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */ -/* LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */ -/* LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */ +// Color commas in rgba() values +.m + .o { color: var(--base03); } -/* Comment */ .chroma .c { color: #727272; } -/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; } -/* CommentMultiline */ .chroma .cm { color: #727272; } -/* CommentPreproc */ .chroma .cp { color: #008085; } -/* CommentPreprocFile */ .chroma .cpf { color: #007020; } -/* CommentSingle */ .chroma .c1 { color: #727272; } -/* CommentSpecial */ .chroma .cs { color: #727272; } -/* Generic .chroma .g { } */ -/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; } -/* GenericEmph */ .chroma .ge { font-style: italic; } -/* GenericError */ .chroma .gr { color: #f00; } -/* GenericHeading */ .chroma .gh { color: #030; } -/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; } -/* GenericOutput */ .chroma .go { color: #aaa; } -/* GenericPrompt */ .chroma .gp { color: #009; } -/* GenericStrong */ .chroma .gs { font-weight: 700; } -/* GenericSubheading */ .chroma .gu { color: #030; } -/* GenericTraceback */ .chroma .gt { color: #9c6; } -/* GenericUnderline */ .chroma .gl { text-decoration: underline; } -/* Keyword */ .chroma .k { color: #069; } -/* KeywordConstant */ .chroma .kc { color: #069; } -/* KeywordDeclaration */ .chroma .kd { color: #069; } -/* KeywordNamespace */ .chroma .kn { color: #069; } -/* KeywordPseudo */ .chroma .kp { color: #069; } -/* KeywordReserved */ .chroma .kr { color: #069; } -/* KeywordType */ .chroma .kt { color: #078; } -/* Literal .chroma .l { } */ -/* LiteralDate .chroma .ld { color: #c24f19 } */ -/* LiteralNumber */ .chroma .m { color: #c24f19; } -/* LiteralNumberBin */ .chroma .mb { color: #40a070; } -/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; } -/* LiteralNumberHex */ .chroma .mh { color: #c24f19; } -/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; } -/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; } -/* LiteralNumberOct */ .chroma .mo { color: #c24f19; } -/* LiteralString */ .chroma .s { color: #d73038; } -/* LiteralStringAffix */ .chroma .sa { color: #4070a0; } -/* LiteralStringBacktick */ .chroma .sb { color: #c30; } -/* LiteralStringChar */ .chroma .sc { color: #c30; } -/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; } -/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; } -/* LiteralStringDouble */ .chroma .s2 { color: #c30; } -/* LiteralStringEscape */ .chroma .se { color: #c30; } -/* LiteralStringHeredoc */ .chroma .sh { color: #c30; } -/* LiteralStringInterpol */ .chroma .si { color: #a00; } -/* LiteralStringOther */ .chroma .sx { color: #c30; } -/* LiteralStringRegex */ .chroma .sr { color: #337e7e; } -/* LiteralStringSingle */ .chroma .s1 { color: #c30; } -/* LiteralStringSymbol */ .chroma .ss { color: #fc3; } -/* Name .chroma .n { } */ -/* NameAttribute */ .chroma .na { color: #006ee0; } -/* NameBuiltin */ .chroma .nb { color: #366; } -/* NameBuiltinPseudo .chroma .bp { } */ -/* NameClass */ .chroma .nc { color: #168174; } -/* NameConstant */ .chroma .no { color: #360; } -/* NameDecorator */ .chroma .nd { color: #6b62de; } -/* NameEntity */ .chroma .ni { color: #727272; } -/* NameException */ .chroma .ne { color: #c00; } -/* NameFunction */ .chroma .nf { color: #b715f4; } -/* NameFunctionMagic .chroma .fm { } */ -/* NameLabel */ .chroma .nl { color: #6b62de; } -/* NameNamespace */ .chroma .nn { color: #007ca5; } -/* NameOther .chroma .nx { } */ -/* NameProperty .chroma .py { } */ -/* NameTag */ .chroma .nt { color: #2f6f9f; } -/* NameVariable */ .chroma .nv { color: #033; } -/* NameVariableClass .chroma .vc { } */ -/* NameVariableGlobal .chroma .vg { } */ -/* NameVariableInstance .chroma .vi { } */ -/* NameVariableMagic .chroma .vm { } */ -/* Operator */ .chroma .o { color: #555; } -/* OperatorWord */ .chroma .ow { color: #000; } -/* Punctuation .chroma .p { } */ -/* TextWhitespace */ .chroma .w { color: #bbb; } +// Fix bash +.language-sh .c { color: var(--base03); } .chroma { .language-bash, -- cgit v1.2.3 From fe257823ecca31cf5e582e9b8380a0ad0204075e Mon Sep 17 00:00:00 2001 From: Tiger Oakes Date: Tue, 12 Apr 2022 08:07:25 -0700 Subject: Use Babel and ES6 in docs JS files (#31607) * Pass docs js through Babel * Use ES6 in docs js * Only run babel on src files * Allow babel in Hugo * Update scripts.html * Inherit from the root .eslintrc.json * Use `Array.from` * Drop Babel from docs * Prefer template * replace IIFE with arrow functions Co-authored-by: XhmikosR Co-authored-by: GeoSot --- site/assets/js/application.js | 90 +++++++++++++++++++++---------------------- site/assets/js/search.js | 16 ++++---- 2 files changed, 53 insertions(+), 53 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index fa1fba00d..c14dc57c2 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -12,117 +12,117 @@ /* global ClipboardJS: false, bootstrap: false */ -(function () { +(() => { 'use strict' // Tooltip and popover demos document.querySelectorAll('.tooltip-demo') - .forEach(function (tooltip) { + .forEach(tooltip => { new bootstrap.Tooltip(tooltip, { selector: '[data-bs-toggle="tooltip"]' }) }) document.querySelectorAll('[data-bs-toggle="popover"]') - .forEach(function (popover) { + .forEach(popover => { new bootstrap.Popover(popover) }) - var toastPlacement = document.getElementById('toastPlacement') + const toastPlacement = document.getElementById('toastPlacement') if (toastPlacement) { document.getElementById('selectToastPlacement').addEventListener('change', function () { if (!toastPlacement.dataset.originalClass) { toastPlacement.dataset.originalClass = toastPlacement.className } - toastPlacement.className = toastPlacement.dataset.originalClass + ' ' + this.value + toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}` }) } document.querySelectorAll('.bd-example .toast') - .forEach(function (toastNode) { - var toast = new bootstrap.Toast(toastNode, { + .forEach(toastNode => { + const toast = new bootstrap.Toast(toastNode, { autohide: false }) toast.show() }) - var toastTrigger = document.getElementById('liveToastBtn') - var toastLiveExample = document.getElementById('liveToast') + const toastTrigger = document.getElementById('liveToastBtn') + const toastLiveExample = document.getElementById('liveToast') if (toastTrigger) { - toastTrigger.addEventListener('click', function () { - var toast = new bootstrap.Toast(toastLiveExample) + toastTrigger.addEventListener('click', () => { + const toast = new bootstrap.Toast(toastLiveExample) toast.show() }) } - var alertPlaceholder = document.getElementById('liveAlertPlaceholder') - var alertTrigger = document.getElementById('liveAlertBtn') + const alertPlaceholder = document.getElementById('liveAlertPlaceholder') + const alertTrigger = document.getElementById('liveAlertBtn') function alert(message, type) { - var wrapper = document.createElement('div') - wrapper.innerHTML = '' + const wrapper = document.createElement('div') + wrapper.innerHTML = `` alertPlaceholder.append(wrapper) } if (alertTrigger) { - alertTrigger.addEventListener('click', function () { + alertTrigger.addEventListener('click', () => { alert('Nice, you triggered this alert message!', 'success') }) } // Demos within modals document.querySelectorAll('.tooltip-test') - .forEach(function (tooltip) { + .forEach(tooltip => { new bootstrap.Tooltip(tooltip) }) document.querySelectorAll('.popover-test') - .forEach(function (popover) { + .forEach(popover => { new bootstrap.Popover(popover) }) // Indeterminate checkbox example document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') - .forEach(function (checkbox) { + .forEach(checkbox => { checkbox.indeterminate = true }) // Disable empty links in docs examples document.querySelectorAll('.bd-content [href="#"]') - .forEach(function (link) { - link.addEventListener('click', function (event) { + .forEach(link => { + link.addEventListener('click', event => { event.preventDefault() }) }) // Modal relatedTarget demo - var exampleModal = document.getElementById('exampleModal') + const exampleModal = document.getElementById('exampleModal') if (exampleModal) { - exampleModal.addEventListener('show.bs.modal', function (event) { + exampleModal.addEventListener('show.bs.modal', event => { // Button that triggered the modal - var button = event.relatedTarget + const button = event.relatedTarget // Extract info from data-bs-* attributes - var recipient = button.getAttribute('data-bs-whatever') + const recipient = button.getAttribute('data-bs-whatever') // Update the modal's content. - var modalTitle = exampleModal.querySelector('.modal-title') - var modalBodyInput = exampleModal.querySelector('.modal-body input') + const modalTitle = exampleModal.querySelector('.modal-title') + const modalBodyInput = exampleModal.querySelector('.modal-body input') - modalTitle.textContent = 'New message to ' + recipient + modalTitle.textContent = `New message to ${recipient}` modalBodyInput.value = recipient }) } // Insert copy to clipboard button before .highlight - var btnTitle = 'Copy to clipboard' - var btnEdit = 'Edit on StackBlitz' - var btnHtml = '
' + const btnTitle = 'Copy to clipboard' + const btnEdit = 'Edit on StackBlitz' + const btnHtml = '
' document.querySelectorAll('div.highlight') - .forEach(function (element) { + .forEach(element => { element.insertAdjacentHTML('beforebegin', btnHtml) }) @@ -132,10 +132,10 @@ * @param {string} title */ function snippetButtonTooltip(selector, title) { - document.querySelectorAll(selector).forEach(function (btn) { - var tooltipBtn = new bootstrap.Tooltip(btn, { title: title }) + document.querySelectorAll(selector).forEach(btn => { + const tooltipBtn = new bootstrap.Tooltip(btn, { title }) - btn.addEventListener('mouseleave', function () { + btn.addEventListener('mouseleave', () => { // Explicitly hide tooltip, since after clicking it remains // focused (as it's a button), so tooltip would otherwise // remain visible until focus is moved away @@ -147,29 +147,29 @@ snippetButtonTooltip('.btn-clipboard', btnTitle) snippetButtonTooltip('.btn-edit', btnEdit) - var clipboard = new ClipboardJS('.btn-clipboard', { - target: function (trigger) { + const clipboard = new ClipboardJS('.btn-clipboard', { + target(trigger) { return trigger.parentNode.nextElementSibling } }) - clipboard.on('success', function (event) { - var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) + clipboard.on('success', event => { + const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' }) - event.trigger.addEventListener('hidden.bs.tooltip', function () { + event.trigger.addEventListener('hidden.bs.tooltip', () => { tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) }, { once: true }) event.clearSelection() }) - clipboard.on('error', function (event) { - var modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' - var fallbackMsg = 'Press ' + modifierKey + 'C to copy' - var tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) + clipboard.on('error', event => { + const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' + const fallbackMsg = `Press ${modifierKey}C to copy` + const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg }) - event.trigger.addEventListener('hidden.bs.tooltip', function () { + event.trigger.addEventListener('hidden.bs.tooltip', () => { tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) }, { once: true }) }) diff --git a/site/assets/js/search.js b/site/assets/js/search.js index d88263d3f..15197bfd9 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -2,18 +2,18 @@ // IT'S ALL JUST JUNK FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++ -(function () { +(() => { 'use strict' - var inputElement = document.getElementById('search-input') + const inputElement = document.getElementById('search-input') if (!window.docsearch || !inputElement) { return } - var siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') + const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') - document.addEventListener('keydown', function (event) { + document.addEventListener('keydown', event => { if (event.ctrlKey && event.key === '/') { event.preventDefault() inputElement.focus() @@ -25,11 +25,11 @@ indexName: 'bootstrap', inputSelector: '#search-input', algoliaOptions: { - facetFilters: ['version:' + siteDocsVersion] + facetFilters: [`version:${siteDocsVersion}`] }, - transformData: function (hits) { - return hits.map(function (hit) { - var liveUrl = 'https://getbootstrap.com/' + transformData(hits) { + return hits.map(hit => { + const liveUrl = 'https://getbootstrap.com/' hit.url = window.location.origin.startsWith(liveUrl) ? // On production, return the result as is -- cgit v1.2.3 From ece16012270a9ef7781ce9269cb151c5e5961734 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 13 Apr 2022 20:29:13 +0300 Subject: 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 Co-authored-by: Patrick H. Lauke --- site/assets/scss/_component-examples.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index b687a68e6..330bd43ba 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -256,18 +256,32 @@ // Scrollspy demo on fixed height div .scrollspy-example { - position: relative; height: 200px; margin-top: .5rem; overflow: auto; } .scrollspy-example-2 { - position: relative; height: 350px; overflow: auto; } +.simple-list-example-scrollspy { + a { + padding: .25rem; + margin: .5rem 0; + + &:focus { + background-color: rgba($bd-purple, .65); + } + } + + .active { + background-color: rgba($bd-purple, .15); + } + +} + .bd-example-border-utils { [class^="border"] { display: inline-block; -- cgit v1.2.3 From fb21233098124c95c9fdfd54cb546739051464c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 14 Apr 2022 19:10:42 +0200 Subject: Fix Chroma line highlight style --- site/assets/scss/_syntax.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 56bc2840e..54f0cdaaa 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -17,7 +17,7 @@ --base0F: #333; } -.hll { background-color: #fff; } +.hl { background-color: var(--base02); } .c { color: var(--base03); } .err { color: var(--base08); } .k { color: var(--base0E); } -- cgit v1.2.3 From 195440f2fb1e94c014a9cf08f3eae40f3d224620 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Apr 2022 22:17:50 -0700 Subject: v5.2.0 design refresh, plus responsive offcanvas classes (#35736) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 * 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 --- site/assets/js/application.js | 74 ++++++------------------- site/assets/js/code-examples.js | 88 ++++++++++++++++++++++++++++++ site/assets/js/search.js | 7 ++- site/assets/scss/_ads.scss | 5 +- site/assets/scss/_algolia.scss | 7 ++- site/assets/scss/_buttons.scss | 16 ++++-- site/assets/scss/_callouts.scss | 30 +++++------ site/assets/scss/_clipboard-js.scss | 37 +++++++------ site/assets/scss/_component-examples.scss | 42 ++++++++++----- site/assets/scss/_content.scss | 59 +++++++++++++++++--- site/assets/scss/_layout.scss | 19 ++++--- site/assets/scss/_masthead.scss | 77 +++++++++++++++++++++----- site/assets/scss/_navbar.scss | 85 +++++++++++++++++++++-------- site/assets/scss/_search.scss | 62 +++++++++++++++++++++ site/assets/scss/_sidebar.scss | 90 ++++++++++--------------------- site/assets/scss/_subnav.scss | 82 ---------------------------- site/assets/scss/_syntax.scss | 2 +- site/assets/scss/_toc.scss | 45 ++++++++++++++++ site/assets/scss/_variables.scss | 12 ++--- site/assets/scss/docs.scss | 2 +- 20 files changed, 523 insertions(+), 318 deletions(-) create mode 100644 site/assets/js/code-examples.js create mode 100644 site/assets/scss/_search.scss delete mode 100644 site/assets/scss/_subnav.scss (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index c14dc57c2..55e896980 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -10,11 +10,26 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* global ClipboardJS: false, bootstrap: false */ +/* global bootstrap: false */ (() => { 'use strict' + // Scroll the active sidebar link into view + const sidenav = document.querySelector('.bd-sidebar') + if (sidenav) { + const sidenavHeight = sidenav.clientHeight + const sidenavActiveLink = document.querySelector('.bd-links-nav .active') + const sidenavActiveLinkTop = sidenavActiveLink.offsetTop + const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight + const viewportTop = sidenavActiveLinkTop + const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight + + if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) { + sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2) + } + } + // Tooltip and popover demos document.querySelectorAll('.tooltip-demo') .forEach(tooltip => { @@ -116,61 +131,4 @@ modalBodyInput.value = recipient }) } - - // Insert copy to clipboard button before .highlight - const btnTitle = 'Copy to clipboard' - const btnEdit = 'Edit on StackBlitz' - const btnHtml = '
' - document.querySelectorAll('div.highlight') - .forEach(element => { - element.insertAdjacentHTML('beforebegin', btnHtml) - }) - - /** - * - * @param {string} selector - * @param {string} title - */ - function snippetButtonTooltip(selector, title) { - document.querySelectorAll(selector).forEach(btn => { - const tooltipBtn = new bootstrap.Tooltip(btn, { title }) - - btn.addEventListener('mouseleave', () => { - // Explicitly hide tooltip, since after clicking it remains - // focused (as it's a button), so tooltip would otherwise - // remain visible until focus is moved away - tooltipBtn.hide() - }) - }) - } - - snippetButtonTooltip('.btn-clipboard', btnTitle) - snippetButtonTooltip('.btn-edit', btnEdit) - - const clipboard = new ClipboardJS('.btn-clipboard', { - target(trigger) { - return trigger.parentNode.nextElementSibling - } - }) - - clipboard.on('success', event => { - const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) - - tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' }) - event.trigger.addEventListener('hidden.bs.tooltip', () => { - tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) - }, { once: true }) - event.clearSelection() - }) - - clipboard.on('error', event => { - const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' - const fallbackMsg = `Press ${modifierKey}C to copy` - const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) - - tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg }) - event.trigger.addEventListener('hidden.bs.tooltip', () => { - tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) - }, { once: true }) - }) })() diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js new file mode 100644 index 000000000..4a61fa09b --- /dev/null +++ b/site/assets/js/code-examples.js @@ -0,0 +1,88 @@ +// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT +// IT'S ALL JUST JUNK FOR OUR DOCS! +// ++++++++++++++++++++++++++++++++++++++++++ + +/*! + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +/* global ClipboardJS: false, bootstrap: false */ + +(() => { + 'use strict' + // Insert copy to clipboard button before .highlight + const btnTitle = 'Copy to clipboard' + const btnEdit = 'Edit on StackBlitz' + + const btnHtml = [ + '
', + '
', + ' ', + '
', + '
' + ].join('') + + // wrap programmatically code blocks and add copy btn. + document.querySelectorAll('.highlight') + .forEach(element => { + if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode + element.insertAdjacentHTML('beforebegin', btnHtml) + element.previousElementSibling.append(element) + } + }) + + /** + * + * @param {string} selector + * @param {string} title + */ + function snippetButtonTooltip(selector, title) { + document.querySelectorAll(selector).forEach(btn => { + bootstrap.Tooltip.getOrCreateInstance(btn, { title }) + }) + } + + snippetButtonTooltip('.btn-clipboard', btnTitle) + snippetButtonTooltip('.btn-edit', btnEdit) + + const clipboard = new ClipboardJS('.btn-clipboard', { + target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight') + }) + + clipboard.on('success', event => { + const iconFirstChild = event.trigger.querySelector('.bi').firstChild + const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) + const namespace = 'http://www.w3.org/1999/xlink' + const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href') + const originalTitle = event.trigger.title + + tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' }) + event.trigger.addEventListener('hidden.bs.tooltip', () => { + tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) + }, { once: true }) + event.clearSelection() + iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2')) + + setTimeout(() => { + iconFirstChild.setAttributeNS(namespace, 'href', originalXhref) + event.trigger.title = originalTitle + }, 2000) + }) + + clipboard.on('error', event => { + const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-' + const fallbackMsg = `Press ${modifierKey}C to copy` + const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) + + tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg }) + event.trigger.addEventListener('hidden.bs.tooltip', () => { + tooltipBtn.setContent({ '.tooltip-inner': btnTitle }) + }, { once: true }) + }) +})() diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 15197bfd9..6c90a2087 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -14,12 +14,17 @@ const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') document.addEventListener('keydown', event => { - if (event.ctrlKey && event.key === '/') { + if ((((event.ctrlKey || event.metaKey) && event.key === 'k')) || (event.ctrlKey && event.key === '/')) { event.preventDefault() inputElement.focus() } }) + if (navigator.platform.includes('Win') || navigator.platform.includes('Linux')) { + const searchShortcut = document.querySelector('.bd-search') + searchShortcut.setAttribute('data-shortcut', '⌃K') + } + window.docsearch({ apiKey: '5990ad008512000bba2cf951ccf0332f', indexName: 'bootstrap', diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss index 026d1a17a..b9369eb19 100644 --- a/site/assets/scss/_ads.scss +++ b/site/assets/scss/_ads.scss @@ -14,7 +14,7 @@ @include font-size(.8125rem); line-height: 1.4; text-align: left; - background-color: rgba(0, 0, 0, .05); + background-color: $gray-100; a { color: $gray-800; @@ -22,8 +22,7 @@ } @include media-breakpoint-up(sm) { - max-width: 330px; - @include border-radius(4px); + @include border-radius(.5rem); } } diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 9c457d2e3..ab22ad9a7 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -12,12 +12,15 @@ margin: $dropdown-spacer 0 0; @include font-size(.875rem); background-color: $dropdown-bg; + background-clip: padding-box; border: $dropdown-border-width solid $dropdown-border-color; @include border-radius($dropdown-border-radius); - @include box-shadow($dropdown-box-shadow); + box-shadow: $dropdown-box-shadow; @include media-breakpoint-up(md) { - width: 400px; + width: 500px; + margin-top: .5rem; + margin-left: -110px; } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index 93ffa83ed..13bd6e48a 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -8,10 +8,14 @@ --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet); --bs-btn-border-color: var(--bd-violet); + --bs-btn-border-radius: .5rem; --bs-btn-hover-color: var(--bs-white); - --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)}; - --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)}; + --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; + --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #{shade-color($bd-violet, 20%)}; + --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)}; } // scss-docs-end btn-css-vars-example @@ -23,13 +27,19 @@ --bs-btn-hover-bg: var(--bd-accent); --bs-btn-hover-border-color: var(--bd-accent); --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: var(--bs-btn-hover-bg); + --bs-btn-active-border-color: var(--bs-btn-hover-border-color); } .btn-bd-light { --bs-btn-color: var(--bs-gray-600); - --bs-btn-border-color: var(--bs-gray-300); + --bs-btn-border-color: var(--bs-gray-400); + --bs-btn-hover-color: var(--bd-violet); + --bs-btn-hover-border-color: var(--bd-violet); --bs-btn-active-color: var(--bd-violet); --bs-btn-active-bg: var(--bs-white); --bs-btn-active-border-color: var(--bd-violet); + --bs-btn-focus-border-color: var(--bd-violet); --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index aff91f18b..4513a7d1d 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -6,36 +6,30 @@ padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; - border: 1px solid $gray-200; - border-left-width: .25rem; - @include border-radius(); + background-color: var(--bd-callout-bg, var(--bs-gray-100)); + border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300)); h4 { margin-bottom: .25rem; } - p:last-child { + > :last-child { margin-bottom: 0; } - code { - @include border-radius(); - } - + .bd-callout { margin-top: -.25rem; } -} -// Variations -.bd-callout-info { - border-left-color: $bd-info; -} - -.bd-callout-warning { - border-left-color: $bd-warning; + .highlight { + background-color: rgba($black, .05); + } } -.bd-callout-danger { - border-left-color: $bd-danger; +// Variations +@each $variant in $bd-callout-variants { + .bd-callout-#{$variant} { + --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075); + --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5); + } } diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index b2b0854dc..7acf90f0b 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -19,26 +19,29 @@ .btn-clipboard, .btn-edit { - position: absolute; - top: .65rem; - right: .65rem; - z-index: 10; display: block; - padding: .25rem .5rem; - @include font-size(.65em); - color: $primary; - white-space: nowrap; - background-color: $white; - border: 1px solid; - @include border-radius(); + padding: .5em; + line-height: 1; + color: $gray-900; + background-color: $gray-100; + border: 0; + @include border-radius(.25rem); - &:hover, - &:focus { - color: $white; - background-color: $primary; + &:hover { + color: $primary; } } -.btn-edit { - right: 3.65rem; +.btn-clipboard { + position: relative; + z-index: 2; + margin-top: .75rem; + margin-right: .75rem; +} + +.highlight-toolbar { + .btn-clipboard { + margin-top: 0; + margin-right: 0; + } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 330bd43ba..b305f088f 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -85,21 +85,17 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem ($bd-gutter-x * -1) 0; - border: solid $gray-300; + margin: 1rem ($bd-gutter-x * -.5) 0; + border: solid $border-color; border-width: 1px 0 0; @include clearfix(); - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding: 1.5rem; margin-right: 0; margin-left: 0; border-width: 1px; - @include border-top-radius(.25rem); - - + .bd-clipboard + .highlight { - @include border-bottom-radius(.25rem); - } + @include border-top-radius(var(--bs-border-radius)); } + p { @@ -348,12 +344,14 @@ // .highlight { - padding: var(--bs-gutter-x) $bd-gutter-x; + position: relative; + padding: .75rem ($bd-gutter-x * .5); margin-bottom: 1rem; background-color: var(--bs-gray-100); - @include media-breakpoint-up(sm) { - padding: 1rem 1.5rem; + @include media-breakpoint-up(md) { + padding: .75rem 1.25rem; + @include border-radius(var(--bs-border-radius)); } pre { @@ -363,6 +361,11 @@ white-space: pre; background-color: transparent; border: 0; + + // Undo tabindex that's automatically added by Hugo + &:focus { + outline: 0; + } } pre code { @@ -372,11 +375,22 @@ } } +.bd-example-snippet { + .highlight { + @include border-top-radius(0); + border: 1px solid $border-color; + } + .highlight-toolbar { + border: solid $border-color; + border-width: 0 1px; + } +} + .bd-content .highlight { - margin-right: $bd-gutter-x * -1; - margin-left: $bd-gutter-x * -1; + margin-right: $bd-gutter-x * -.5; + margin-left: $bd-gutter-x * -.5; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index d796c491e..cd594335a 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -2,14 +2,13 @@ // Bootstrap docs content theming // -// Offset for the sticky header -@include media-breakpoint-up(md) { - :root { - scroll-padding-top: 4rem; +.bd-content { + // Offset content from fixed navbar when jumping to headings + > :target { + padding-top: 5rem; + margin-top: -5rem; } -} -.bd-content { > h2:not(:first-child) { margin-top: 3rem; } @@ -46,6 +45,10 @@ border-bottom: 2px solid currentcolor; } + tbody:not(:first-child) { + border-top: 2px solid currentcolor; + } + th, td { &:first-child { @@ -59,12 +62,24 @@ // Prevent breaking of code // stylelint-disable-next-line selector-max-compound-selectors + th, td:first-child > code { white-space: nowrap; } } } +.table-options { + td:nth-child(2) { + min-width: 160px; + } +} + +.table-options td:last-child, +.table-utilities td:last-child { + min-width: 280px; +} + .bd-title { @include font-size(3rem); } @@ -77,3 +92,35 @@ .bd-bg-violet { background-color: $bd-violet; } + +.bi { + width: 1em; + height: 1em; + fill: currentcolor; +} + +.icon-link { + display: flex; + align-items: center; + text-decoration-color: rgba($primary, .5); + text-underline-offset: .5rem; + backface-visibility: hidden; + + .bi { + width: 1.5em; + height: 1.5em; + transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + } + + &:hover { + .bi { + transform: translate3d(5px, 0, 0); + } + } +} + +.border-lg-start { + @include media-breakpoint-up(lg) { + border-left: $border-width solid $border-color; + } +} diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index f83cf094c..d0482d9b7 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,16 +1,14 @@ +.bd-gutter { + --bs-gutter-x: #{$bd-gutter-x}; +} + .bd-layout { - padding-right: $bd-gutter-x; - padding-left: $bd-gutter-x; - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: grid; grid-template-areas: "sidebar main"; - grid-template-columns: 1fr 3fr; - gap: $grid-gutter-width; - } - - @include media-breakpoint-up(lg) { grid-template-columns: 1fr 5fr; + gap: $grid-gutter-width; } } @@ -21,6 +19,11 @@ .bd-main { grid-area: main; + @include media-breakpoint-down(lg) { + max-width: 760px; + margin-inline: auto; + } + @include media-breakpoint-up(md) { display: grid; grid-template-areas: diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 2e742e76d..42ad0f385 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -1,38 +1,87 @@ .bd-masthead { + --bd-pink-rgb: #{to-rgb($pink)}; padding: 3rem 0; - background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%); + // stylelint-disable + background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%), + radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%), + radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%), + radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%), + radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%); + // stylelint-enable h1 { @include font-size(4rem); line-height: 1; } - p:not(.lead) { + .lead { + @include font-size(1rem); + font-weight: 400; color: $gray-700; } - .btn { - padding: .8rem 2rem; - font-weight: 600; + .highlight { + padding: .5rem 4rem .5rem 1rem; + margin-bottom: 0; + line-height: 1.25; + background-color: rgba(var(--bs-body-color-rgb), .075); + @include border-radius(.5rem); + } + .btn-clipboard { + margin-top: .4rem; + background-color: transparent; + } + + #carbonads { // stylelint-disable-line selector-max-id + margin-right: auto; + margin-left: auto; } + + @include media-breakpoint-up(md) { + .lead { + @include font-size(1.5rem); + } + } +} + +.masthead-followup { .lead { - @include font-size(1.5rem); - font-weight: 400; - color: $gray-700; + @include font-size(1rem); + } + + .highlight { + @include border-radius(.5rem); + } + + @include media-breakpoint-up(md) { + .lead { + @include font-size(1.25rem); + } } } -@include media-breakpoint-up(md) { - .mw-md-75 { max-width: 75%; } +.bd-btn-lg { + padding: .8rem 2rem; } .masthead-followup-icon { - padding: .75rem; - background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01)); - @include border-radius(.75rem); - box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1); + padding: 1rem; + color: rgba(var(--bg-rgb), 1); + background-color: rgba(var(--bg-rgb), .1); + background-blend-mode: multiple; + @include border-radius(1rem); + mix-blend-mode: darken; + + svg { + filter: drop-shadow(0 1px 1px #fff); + } } .masthead-followup-svg { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125)); } + +.masthead-notice { + background-color: var(--bd-accent); + box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75); +} diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 401731ae1..4f9f3f829 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,44 +1,85 @@ .bd-navbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - padding: .75rem 0; - background-color: $bd-violet; + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); .navbar-toggler { padding: 0; + margin-right: -.5rem; border: 0; + + &:first-child { + margin-left: -.5rem; + } + + .bi { + width: 1.5rem; + height: 1.5rem; + } + + &:focus { + box-shadow: none; + } } - .navbar-nav { - .nav-link { - padding-right: $spacer * .25; - padding-left: $spacer * .25; - color: rgba($white, .85); + .navbar-brand { + transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + + &:hover { + transform: rotate(-5deg) scale(1.1); + } + } - &:hover, - &:focus { - color: $white; - } + .navbar-toggler, + .nav-link { + padding-right: $spacer * .25; + padding-left: $spacer * .25; + color: rgba($white, .85); - &.active { - font-weight: 600; - color: $white; - } + &:hover, + &:focus { + color: $white; + } + + &.active { + font-weight: 600; + color: $white; } } .navbar-nav-svg { - width: 1rem; - height: 1rem; + display: inline-block; + vertical-align: -.125rem; } - .offcanvas { - background-color: $bd-violet; + .offcanvas-lg { + background-color: var(--bd-violet); border-left: 0; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { box-shadow: $box-shadow-lg; } } + + .dropdown-toggle { + &:focus { + outline: 0; + } + } + + .dropdown-menu { + --#{$variable-prefix}dropdown-min-width: 12rem; + --#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + @include rfs(.875rem, --#{$variable-prefix}dropdown-font-size); + box-shadow: $dropdown-box-shadow; + } + + .dropdown-item.current { + font-weight: 600; + background-image: escape-svg($dropdown-active-icon); + background-repeat: no-repeat; + background-position: right $dropdown-item-padding-x top .6rem; + background-size: .75rem .75rem; + } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss new file mode 100644 index 000000000..1825337a0 --- /dev/null +++ b/site/assets/scss/_search.scss @@ -0,0 +1,62 @@ +.bd-search { + position: relative; + width: 100%; + + &::after { + position: absolute; + top: .4rem; + right: .4rem; + bottom: .4rem; + display: flex; + align-items: center; + justify-content: center; + padding-right: .3125rem; + padding-left: .3125rem; + @include font-size(.75rem); + color: rgba($white, .65); + // content: "⌘K"; + content: attr(data-shortcut); + background-color: rgba($white, .1); + @include border-radius(.125rem); + } + + @include media-breakpoint-up(lg) { + position: absolute; + top: .75rem; + left: 50%; + width: 200px; + margin-left: -100px; + } + + @include media-breakpoint-up(xl) { + width: 280px; + margin-left: -140px; + } + + .form-control { + padding-right: 2.75rem; + color: $white; + background-color: rgba($black, .1); + border-color: rgba($white, .4); + transition-property: background-color, border-color, box-shadow; + + &::placeholder { + color: rgba($white, .65); + } + + &::-webkit-search-cancel-button { + appearance: none; + width: 1rem; + height: 1rem; + cursor: pointer; + background: escape-svg($search-clear-icon) no-repeat 0 0; + background-size: 100% 100%; + } + + &:focus { + background-color: rgba($black, .25); + border-color: rgba($bd-accent, 1); + box-shadow: 0 0 0 .25rem rgba($bd-accent, .4); + } + } +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 452b155ff..ed76b3ca8 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,87 +1,53 @@ .bd-sidebar { - @include media-breakpoint-down(md) { - margin: 0 ($bd-gutter-x * -1) 1rem; - } -} - -.bd-links { - overflow: auto; - font-weight: 600; - - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { position: sticky; top: 5rem; // Override collapse behaviors // stylelint-disable-next-line declaration-no-important display: block !important; - height: subtract(100vh, 7rem); + height: subtract(100vh, 6rem); // Prevent focus styles to be cut off: padding-left: .25rem; margin-left: -.25rem; overflow-y: auto; } +} - > ul { - @include media-breakpoint-down(md) { - padding: 1.5rem .75rem; - background-color: $gray-100; - border-bottom: 1px solid $gray-200; - } - } - - a { - padding: .1875rem .5rem; - margin-top: .125rem; - margin-left: 1.25rem; - color: rgba($black, .65); - text-decoration: if($link-decoration == none, null, none); - - &:hover, - &:focus { - color: rgba($black, .85); - text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba($bd-violet, .1); - } +.bd-links-nav { + @include media-breakpoint-down(lg) { + font-size: .875rem; } - .btn { - // Custom styles (as we don't have a completely neutral button style) - padding: .25rem .5rem; - font-weight: 600; - color: rgba($black, .65); - background-color: transparent; - border: 0; + @include media-breakpoint-between(xs, lg) { + column-count: 2; + column-gap: 1.5rem; - &:hover, - &:focus { - color: rgba($black, .85); - background-color: rgba($bd-violet, .1); + .bd-links-group { + break-inside: avoid; } - &:focus { - box-shadow: 0 0 0 1px rgba($bd-violet, .7); - } - - // Add chevron if there's a submenu - &::before { - width: 1.25em; - line-height: 0; // Align in the middle - content: escape-svg($sidebar-collapse-icon); - @include transition(transform .35s ease); - transform-origin: .5em 50%; + .bd-links-span-all { + column-span: all; } + } +} - &[aria-expanded="true"] { - color: rgba($black, .85); +.bd-links-link { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1rem; + color: rgba($black, .65); + text-decoration: if($link-decoration == none, null, none); - &::before { - transform: rotate(90deg); - } - } + &:hover, + &:focus, + &.active { + color: rgba($black, .85); + text-decoration: if($link-hover-decoration == underline, none, null); + background-color: rgba(var(--bd-violet-rgb), .1); } - .active { + &.active { font-weight: 600; - color: rgba($black, .85); } } diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss deleted file mode 100644 index db183ff6a..000000000 --- a/site/assets/scss/_subnav.scss +++ /dev/null @@ -1,82 +0,0 @@ -.bd-subnavbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - - // The position and z-index are needed for the dropdown to stay on top of the content - position: relative; - z-index: $zindex-sticky; - background-color: rgba($white, .95); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); - - .dropdown-menu { - @include font-size(.875rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); - } - - .dropdown-item.current { - font-weight: 600; - background-image: escape-svg($dropdown-active-icon); - background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; - } - - @include media-breakpoint-up(md) { - position: sticky; - top: 0; - } -} - -.bd-search { - position: relative; - - &::after { - position: absolute; - top: .4rem; - right: .4rem; - bottom: .4rem; - display: flex; - align-items: center; - justify-content: center; - padding-right: .3125rem; - padding-left: .3125rem; - @include font-size(.75rem); - color: $gray-600; - content: "Ctrl + /"; - background-color: $gray-100; - @include border-radius(.125rem); - } - - @include media-breakpoint-down(md) { - width: 100%; - } - - .form-control { - padding-right: 3.75rem; - - &:focus { - border-color: $bd-violet; - box-shadow: 0 0 0 3px rgba($bd-violet, .25); - } - } -} - -.bd-sidebar-toggle { - color: $text-muted; - - &:hover, - &:focus { - color: $bd-violet; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-violet, .25); - } - - .bi-collapse { display: none; } - - &:not(.collapsed) { - .bi-expand { display: none; } - .bi-collapse { display: inline-block; } - } -} diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 54f0cdaaa..662f70dc4 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -101,7 +101,7 @@ .language-bash, .language-sh { &::before { - color: #009; + color: #777; content: "$ "; user-select: none; } diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 596945628..512a11b42 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -15,6 +15,7 @@ ul { padding-left: 0; + margin-bottom: 0; list-style: none; ul { @@ -40,3 +41,47 @@ } } } + +.bd-toc-toggle { + display: flex; + align-items: center; + + @include media-breakpoint-down(sm) { + justify-content: space-between; + width: 100%; + } + + @include media-breakpoint-down(md) { + border: 1px solid $border-color; + @include border-radius(.4rem); + + &:hover, + &:focus, + &:active, + &[aria-expanded="true"] { + color: var(--bd-violet); + background-color: $white; + border-color: var(--bd-violet); + } + + &:focus, + &[aria-expanded="true"] { + box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25); + } + } +} + +.bd-toc-collapse { + @include media-breakpoint-down(md) { + nav { + padding: 1.25rem; + background-color: var(--bs-gray-100); + border: 1px solid $border-color; + @include border-radius(.25rem); + } + } + + @include media-breakpoint-up(md) { + display: block !important; // stylelint-disable-line declaration-no-important + } +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 0c40b17e9..8f74f94d0 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,17 +1,15 @@ // stylelint-disable scss/dollar-variable-default // Local docs variables -$bd-purple: #563d7c; +$bd-purple: #4c0bce; $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; -$bd-info: #5bc0de; -$bd-warning: #f0ad4e; -$bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,"); -$sidebar-collapse-icon: url("data:image/svg+xml,"); +$search-clear-icon: url("data:image/svg+xml,"); -$bd-gutter-x: 1.25rem; +$bd-gutter-x: 3rem; +$bd-callout-variants: info, warning, danger !default; :root { --bd-purple: #{$bd-purple}; @@ -19,4 +17,6 @@ $bd-gutter-x: 1.25rem; --bd-accent: #{$bd-accent}; --bd-violet-rgb: #{to-rgb($bd-violet)}; --bd-accent-rgb: #{to-rgb($bd-accent)}; + --bd-pink-rgb: #{to-rgb($pink-500)}; + --bd-teal-rgb: #{to-rgb($teal-500)}; } diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 0029e83af..f1390e2fa 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -37,7 +37,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default // Load docs components @import "variables"; @import "navbar"; -@import "subnav"; +@import "search"; @import "masthead"; @import "ads"; @import "content"; -- cgit v1.2.3 From 3990ff04a00f2768b768e1c852594e3a365b9c61 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Apr 2022 18:05:09 -0700 Subject: Fix spacing of code snippets --- site/assets/scss/_component-examples.scss | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index b305f088f..701682d20 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -85,16 +85,10 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem ($bd-gutter-x * -.5) 0; - border: solid $border-color; - border-width: 1px 0 0; @include clearfix(); @include media-breakpoint-up(md) { padding: 1.5rem; - margin-right: 0; - margin-left: 0; - border-width: 1px; @include border-top-radius(var(--bs-border-radius)); } @@ -375,23 +369,24 @@ } } -.bd-example-snippet { +.bd-code-snippet { + margin: $spacer ($bd-gutter-x * -.5); + border: solid $border-color; + border-width: 1px 0; + .highlight { - @include border-top-radius(0); - border: 1px solid $border-color; - } - .highlight-toolbar { - border: solid $border-color; - border-width: 0 1px; + margin-bottom: 0; } -} - -.bd-content .highlight { - margin-right: $bd-gutter-x * -.5; - margin-left: $bd-gutter-x * -.5; @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; + border-width: 1px; + @include border-radius($border-radius); } } + +.highlight-toolbar { + border: solid $border-color; + border-width: 1px 0; +} -- cgit v1.2.3 From 3362c8cf13cc3610a6e0ac1efc673f7f8c74ac08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Apr 2022 20:56:18 -0700 Subject: 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 --- site/assets/scss/_component-examples.scss | 12 +++++++++--- site/assets/scss/_masthead.scss | 6 +++++- site/assets/scss/_syntax.scss | 2 +- 3 files changed, 15 insertions(+), 5 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 701682d20..73ffe2f8e 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -82,6 +82,15 @@ // Docs examples // +.bd-example-snippet { + border: solid $border-color; + border-width: 1px 0; + + @include media-breakpoint-up(md) { + border-width: 1px; + } +} + .bd-example { position: relative; padding: 1rem; @@ -371,8 +380,6 @@ .bd-code-snippet { margin: $spacer ($bd-gutter-x * -.5); - border: solid $border-color; - border-width: 1px 0; .highlight { margin-bottom: 0; @@ -381,7 +388,6 @@ @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; - border-width: 1px; @include border-radius($border-radius); } } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 42ad0f385..4bb356e10 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -20,9 +20,13 @@ color: $gray-700; } + .bd-code-snippet { + margin: 0; + @include border-radius(.5rem); + } + .highlight { padding: .5rem 4rem .5rem 1rem; - margin-bottom: 0; line-height: 1.25; background-color: rgba(var(--bs-body-color-rgb), .075); @include border-radius(.5rem); diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 662f70dc4..487550bfd 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -35,7 +35,7 @@ font-weight: 600; color: #fff; } -.gi { color: var(--base0C); } +.gi { color: var(--bs-success); } .gp { font-weight: 600; color: var(--base04); -- cgit v1.2.3 From 2aad1696f1536202b1d66205f7f9889b3b311755 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Apr 2022 21:41:58 -0700 Subject: One more code snippet fix --- site/assets/scss/_component-examples.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 73ffe2f8e..75d4e96cd 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -94,13 +94,25 @@ .bd-example { position: relative; padding: 1rem; + margin: 0 ($bd-gutter-x * -.5); + border: solid $border-color; + border-width: 1px 0 0; @include clearfix(); @include media-breakpoint-up(md) { padding: 1.5rem; + margin-right: 0; + margin-left: 0; + border-width: 1px; @include border-top-radius(var(--bs-border-radius)); } + + .bd-code-snippet { + @include border-top-radius(0); + border: solid $border-color; + border-width: 0 1px 1px; + } + + p { margin-top: 2rem; } @@ -379,12 +391,16 @@ } .bd-code-snippet { - margin: $spacer ($bd-gutter-x * -.5); + margin: 0 ($bd-gutter-x * -.5) $spacer; .highlight { margin-bottom: 0; } + .bd-example { + border: 0; + } + @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; -- cgit v1.2.3 From e089aef00fef68c6a815327d8b988e14cfcf4d9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Apr 2022 11:21:43 -0700 Subject: 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 --- site/assets/scss/_component-examples.scss | 190 ++++++++++++------------------ 1 file changed, 77 insertions(+), 113 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 75d4e96cd..d48154a86 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -1,83 +1,3 @@ -// -// Grid examples -// - -.bd-example-row { - .row { - > .col, - > [class^="col-"] { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(39, 41, 43, .03); - border: 1px solid rgba(39, 41, 43, .1); - } - } - - .row + .row { - margin-top: 1rem; - } -} - -.bd-example-row-flex-cols .row { - min-height: 10rem; - background-color: rgba(255, 0, 0, .1); -} - -.bd-example-cssgrid { - text-align: center; - - .grid + .grid { - margin-top: 1rem; - } - - .grid > * { - padding-top: .75rem; - padding-bottom: .75rem; - background-color: rgba(255, 0, 255, .1); - border: 1px solid rgba(255, 0, 255, .25); - } -} - -.bd-highlight { - background-color: rgba($bd-purple, .15); - border: 1px solid rgba($bd-purple, .15); -} - -// Grid mixins -.example-container { - width: 800px; - @include make-container(); -} - -.example-row { - @include make-row(); -} - -.example-content-main { - @include make-col-ready(); - - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(8); - } -} - -.example-content-secondary { - @include make-col-ready(); - - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(4); - } -} - - // // Docs examples // @@ -92,15 +12,18 @@ } .bd-example { + --bd-example-padding: 1rem; + position: relative; - padding: 1rem; + padding: var(--bd-example-padding); margin: 0 ($bd-gutter-x * -.5); border: solid $border-color; - border-width: 1px 0 0; + border-width: 1px 0; @include clearfix(); @include media-breakpoint-up(md) { - padding: 1.5rem; + --bd-example-padding: 1.5rem; + margin-right: 0; margin-left: 0; border-width: 1px; @@ -127,7 +50,7 @@ > .alert + .alert, > .navbar + .navbar, > .progress + .progress { - margin-top: 1rem; + margin-top: $spacer; } > .dropdown-menu { @@ -171,30 +94,80 @@ .fixed-top, .sticky-top { position: static; - margin: -1rem -1rem 1rem; + margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list } .fixed-bottom, .sticky-bottom { position: static; - margin: 1rem -1rem -1rem; - } + margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list - @include media-breakpoint-up(sm) { - .fixed-top, - .sticky-top { - margin: -1.5rem -1.5rem 1rem; - } - .fixed-bottom, - .sticky-bottom { - margin: 1rem -1.5rem -1.5rem; - } } // Pagination .pagination { - margin-top: .5rem; - margin-bottom: .5rem; + margin-bottom: 0; + } +} + +// +// Grid examples +// + +.bd-example-row [class^="col"], +.bd-example-cssgrid .grid > * { + padding-top: .75rem; + padding-bottom: .75rem; + background-color: rgba(var(--bd-violet-rgb), .1); + border: 1px solid rgba(var(--bd-violet-rgb), .25); +} + +.bd-example-row .row + .row, +.bd-example-cssgrid .grid + .grid { + margin-top: 1rem; +} + +.bd-example-row-flex-cols .row { + min-height: 10rem; + background-color: rgba(255, 0, 0, .1); +} + +.bd-example-flex div { + background-color: rgba($bd-purple, .15); + border: 1px solid rgba($bd-purple, .15); +} + +// Grid mixins +.example-container { + width: 800px; + @include make-container(); +} + +.example-row { + @include make-row(); +} + +.example-content-main { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(8); + } +} + +.example-content-secondary { + @include make-col-ready(); + + @include media-breakpoint-up(sm) { + @include make-col(6); + } + + @include media-breakpoint-up(lg) { + @include make-col(4); } } @@ -224,18 +197,7 @@ } } -.bd-example-modal { - background-color: #fafafa; - - .modal { - position: static; - display: block; - } -} - .bd-example-offcanvas { - @include border-start-radius(0); - .offcanvas { position: static; display: block; @@ -250,9 +212,11 @@ white-space: nowrap; } +// scss-docs-start custom-tooltip .custom-tooltip { --bs-tooltip-bg: var(--bs-primary); } +// scss-docs-end custom-tooltip // scss-docs-start custom-popovers .custom-popover { @@ -290,7 +254,6 @@ .active { background-color: rgba($bd-purple, .15); } - } .bd-example-border-utils { @@ -317,7 +280,7 @@ .bd-example-position-utils { position: relative; - padding: 3em; + padding: 2rem; .position-relative { height: 200px; @@ -325,8 +288,8 @@ } .position-absolute { - width: 2em; - height: 2em; + width: 2rem; + height: 2rem; background-color: $dark; @include border-radius(); } @@ -398,6 +361,7 @@ } .bd-example { + margin: 0; border: 0; } -- cgit v1.2.3 From 1dc59b0d4e9ea5dd1a07aa91f964b491de1310ba Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 20 Apr 2022 09:02:31 +0200 Subject: Minor fixes --- site/assets/scss/_clipboard-js.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'site/assets') diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 7acf90f0b..b4d8e234f 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -30,6 +30,10 @@ &:hover { color: $primary; } + + &:focus { + z-index: 3; + } } .btn-clipboard { -- cgit v1.2.3 From 9a614a7e1dd21d6a4b2f6e36c0ad390fd4767528 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 21 Apr 2022 10:05:14 -0700 Subject: Add .show class to offcanvas example, and disable it's normal behavior in our JS --- site/assets/js/application.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 55e896980..20d917990 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -131,4 +131,12 @@ modalBodyInput.value = recipient }) } + + // Offcanvas demo + const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') + if (myOffcanvas) { + myOffcanvas.addEventListener('show.bs.offcanvas', event => { + event.preventDefault() + }, false) + } })() -- cgit v1.2.3 From 54e0af0303fe6617e438b9bf68e85b377b0e8ef2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 25 Apr 2022 12:34:49 +0200 Subject: Clean up last `$variable-prefix` usages --- site/assets/scss/_navbar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 4f9f3f829..57e3f47b7 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -69,9 +69,9 @@ } .dropdown-menu { - --#{$variable-prefix}dropdown-min-width: 12rem; - --#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); - @include rfs(.875rem, --#{$variable-prefix}dropdown-font-size); + --#{$prefix}dropdown-min-width: 12rem; + --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + @include rfs(.875rem, --#{$prefix}dropdown-font-size); box-shadow: $dropdown-box-shadow; } -- cgit v1.2.3 From d2497b0384d05af9159743d7ff58fd071d5c5cbb Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 4 May 2022 01:48:30 +0300 Subject: ref(Docs assets): Separate js assets --- site/assets/js/application.js | 112 ----------------------------------- site/assets/js/snippets.js | 132 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+), 112 deletions(-) create mode 100644 site/assets/js/snippets.js (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 20d917990..dec23635d 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -10,8 +10,6 @@ * For details, see https://creativecommons.org/licenses/by/3.0/. */ -/* global bootstrap: false */ - (() => { 'use strict' @@ -29,114 +27,4 @@ sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2) } } - - // Tooltip and popover demos - document.querySelectorAll('.tooltip-demo') - .forEach(tooltip => { - new bootstrap.Tooltip(tooltip, { - selector: '[data-bs-toggle="tooltip"]' - }) - }) - - document.querySelectorAll('[data-bs-toggle="popover"]') - .forEach(popover => { - new bootstrap.Popover(popover) - }) - - const toastPlacement = document.getElementById('toastPlacement') - if (toastPlacement) { - document.getElementById('selectToastPlacement').addEventListener('change', function () { - if (!toastPlacement.dataset.originalClass) { - toastPlacement.dataset.originalClass = toastPlacement.className - } - - toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}` - }) - } - - document.querySelectorAll('.bd-example .toast') - .forEach(toastNode => { - const toast = new bootstrap.Toast(toastNode, { - autohide: false - }) - - toast.show() - }) - - const toastTrigger = document.getElementById('liveToastBtn') - const toastLiveExample = document.getElementById('liveToast') - if (toastTrigger) { - toastTrigger.addEventListener('click', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() - }) - } - - const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - const alertTrigger = document.getElementById('liveAlertBtn') - - function alert(message, type) { - const wrapper = document.createElement('div') - wrapper.innerHTML = `` - - alertPlaceholder.append(wrapper) - } - - if (alertTrigger) { - alertTrigger.addEventListener('click', () => { - alert('Nice, you triggered this alert message!', 'success') - }) - } - - // Demos within modals - document.querySelectorAll('.tooltip-test') - .forEach(tooltip => { - new bootstrap.Tooltip(tooltip) - }) - - document.querySelectorAll('.popover-test') - .forEach(popover => { - new bootstrap.Popover(popover) - }) - - // Indeterminate checkbox example - document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') - .forEach(checkbox => { - checkbox.indeterminate = true - }) - - // Disable empty links in docs examples - document.querySelectorAll('.bd-content [href="#"]') - .forEach(link => { - link.addEventListener('click', event => { - event.preventDefault() - }) - }) - - // Modal relatedTarget demo - const exampleModal = document.getElementById('exampleModal') - if (exampleModal) { - exampleModal.addEventListener('show.bs.modal', event => { - // Button that triggered the modal - const button = event.relatedTarget - // Extract info from data-bs-* attributes - const recipient = button.getAttribute('data-bs-whatever') - - // Update the modal's content. - const modalTitle = exampleModal.querySelector('.modal-title') - const modalBodyInput = exampleModal.querySelector('.modal-body input') - - modalTitle.textContent = `New message to ${recipient}` - modalBodyInput.value = recipient - }) - } - - // Offcanvas demo - const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') - if (myOffcanvas) { - myOffcanvas.addEventListener('show.bs.offcanvas', event => { - event.preventDefault() - }, false) - } })() diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js new file mode 100644 index 000000000..61aec7d08 --- /dev/null +++ b/site/assets/js/snippets.js @@ -0,0 +1,132 @@ +// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT +// IT'S ALL JUST JUNK FOR OUR DOCS! +// ++++++++++++++++++++++++++++++++++++++++++ + +/*! + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +/* global bootstrap: false */ + +(() => { + 'use strict' + + // Tooltip and popover demos + document.querySelectorAll('.tooltip-demo') + .forEach(tooltip => { + new bootstrap.Tooltip(tooltip, { + selector: '[data-bs-toggle="tooltip"]' + }) + }) + + document.querySelectorAll('[data-bs-toggle="popover"]') + .forEach(popover => { + new bootstrap.Popover(popover) + }) + + const toastPlacement = document.getElementById('toastPlacement') + if (toastPlacement) { + document.getElementById('selectToastPlacement').addEventListener('change', function () { + if (!toastPlacement.dataset.originalClass) { + toastPlacement.dataset.originalClass = toastPlacement.className + } + + toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}` + }) + } + + document.querySelectorAll('.bd-example .toast') + .forEach(toastNode => { + const toast = new bootstrap.Toast(toastNode, { + autohide: false + }) + + toast.show() + }) + + const toastTrigger = document.getElementById('liveToastBtn') + const toastLiveExample = document.getElementById('liveToast') + if (toastTrigger) { + toastTrigger.addEventListener('click', () => { + const toast = new bootstrap.Toast(toastLiveExample) + + toast.show() + }) + } + + const alertPlaceholder = document.getElementById('liveAlertPlaceholder') + const alertTrigger = document.getElementById('liveAlertBtn') + + const appendAlert = (message, type) => { + const wrapper = document.createElement('div') + wrapper.innerHTML = [ + `' + ].join('') + + alertPlaceholder.append(wrapper) + } + + if (alertTrigger) { + alertTrigger.addEventListener('click', () => { + appendAlert('Nice, you triggered this alert message!', 'success') + }) + } + + // Demos within modals + document.querySelectorAll('.tooltip-test') + .forEach(tooltip => { + new bootstrap.Tooltip(tooltip) + }) + + document.querySelectorAll('.popover-test') + .forEach(popover => { + new bootstrap.Popover(popover) + }) + + // Indeterminate checkbox example + document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') + .forEach(checkbox => { + checkbox.indeterminate = true + }) + + // Disable empty links in docs examples + document.querySelectorAll('.bd-content [href="#"]') + .forEach(link => { + link.addEventListener('click', event => { + event.preventDefault() + }) + }) + + // Modal relatedTarget demo + const exampleModal = document.getElementById('exampleModal') + if (exampleModal) { + exampleModal.addEventListener('show.bs.modal', event => { + // Button that triggered the modal + const button = event.relatedTarget + // Extract info from data-bs-* attributes + const recipient = button.getAttribute('data-bs-whatever') + + // Update the modal's content. + const modalTitle = exampleModal.querySelector('.modal-title') + const modalBodyInput = exampleModal.querySelector('.modal-body input') + + modalTitle.textContent = `New message to ${recipient}` + modalBodyInput.value = recipient + }) + } + + // Offcanvas demo + const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') + if (myOffcanvas) { + myOffcanvas.addEventListener('show.bs.offcanvas', event => { + event.preventDefault() + }, false) + } +})() -- cgit v1.2.3 From 6b49d26b21cabb7322a820183c6d925263cddba1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 May 2022 16:56:43 -0700 Subject: v5.2.0: Migrate to DocSearch 3 (#36176) * Migrate to DocSearch v3 Fixes #33338 * initialize `siteDocsVersion` const after the proper check * Update site/layouts/partials/stylesheet.html Co-authored-by: GeoSot * Update header.html * code review changes * Update search.js * Fix contrast issue, tweak some styles * Fix some navbar changes * temporary safari fix for docsearch3 Co-authored-by: GeoSot Co-authored-by: XhmikosR --- site/assets/js/search.js | 45 +++++-------- site/assets/scss/_navbar.scss | 2 +- site/assets/scss/_search.scss | 137 ++++++++++++++++++++++++++++----------- site/assets/scss/_variables.scss | 3 +- 4 files changed, 118 insertions(+), 69 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 6c90a2087..9bad2749f 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -5,51 +5,40 @@ (() => { 'use strict' - const inputElement = document.getElementById('search-input') + const searchElement = document.getElementById('docsearch') - if (!window.docsearch || !inputElement) { + if (!window.docsearch || !searchElement) { return } - const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') - - document.addEventListener('keydown', event => { - if ((((event.ctrlKey || event.metaKey) && event.key === 'k')) || (event.ctrlKey && event.key === '/')) { - event.preventDefault() - inputElement.focus() - } - }) - - if (navigator.platform.includes('Win') || navigator.platform.includes('Linux')) { - const searchShortcut = document.querySelector('.bd-search') - searchShortcut.setAttribute('data-shortcut', '⌃K') - } + const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version') window.docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', + apiKey: '3151f502c7b9e9dafd5e6372b691a24e', indexName: 'bootstrap', - inputSelector: '#search-input', - algoliaOptions: { + appId: 'AK7KMZKZHQ', + container: searchElement, + searchParameters: { facetFilters: [`version:${siteDocsVersion}`] }, - transformData(hits) { - return hits.map(hit => { + transformItems(items) { + return items.map(item => { const liveUrl = 'https://getbootstrap.com/' - hit.url = window.location.origin.startsWith(liveUrl) ? + item.url = window.location.origin.startsWith(liveUrl) ? // On production, return the result as is - hit.url : - // On development or Netlify, replace `hit.url` with a trailing slash, + item.url : + // On development or Netlify, replace `item.url` with a trailing slash, // so that the result link is relative to the server root - hit.url.replace(liveUrl, '/') + item.url.replace(liveUrl, '/') // Prevent jumping to first header - if (hit.anchor === 'content') { - hit.url = hit.url.replace(/#content$/, '') - hit.anchor = null + if (item.anchor === 'content') { + item.url = item.url.replace(/#content$/, '') + item.anchor = null } - return hit + return item }) }, // Set debug to `true` if you want to inspect the dropdown diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 57e3f47b7..4805a3c47 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -63,7 +63,7 @@ } .dropdown-toggle { - &:focus { + &:focus:not(:focus-visible) { outline: 0; } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 1825337a0..9739d7a3a 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -1,25 +1,9 @@ +// stylelint-disable selector-class-pattern + .bd-search { position: relative; width: 100%; - &::after { - position: absolute; - top: .4rem; - right: .4rem; - bottom: .4rem; - display: flex; - align-items: center; - justify-content: center; - padding-right: .3125rem; - padding-left: .3125rem; - @include font-size(.75rem); - color: rgba($white, .65); - // content: "⌘K"; - content: attr(data-shortcut); - background-color: rgba($white, .1); - @include border-radius(.125rem); - } - @include media-breakpoint-up(lg) { position: absolute; top: .75rem; @@ -33,30 +17,105 @@ margin-left: -140px; } - .form-control { - padding-right: 2.75rem; - color: $white; - background-color: rgba($black, .1); - border-color: rgba($white, .4); - transition-property: background-color, border-color, box-shadow; +} - &::placeholder { - color: rgba($white, .65); - } +.DocSearch-Container { + --docsearch-muted-color: #{$text-muted}; + --docsearch-hit-shadow: none; - &::-webkit-search-cancel-button { - appearance: none; - width: 1rem; - height: 1rem; - cursor: pointer; - background: escape-svg($search-clear-icon) no-repeat 0 0; - background-size: 100% 100%; - } + z-index: 1030; - &:focus { - background-color: rgba($black, .25); - border-color: rgba($bd-accent, 1); - box-shadow: 0 0 0 .25rem rgba($bd-accent, .4); + @include media-breakpoint-up(lg) { + padding-top: 4rem; + } +} + +.DocSearch-Button { + --docsearch-searchbox-background: #{rgba($black, .1)}; + --docsearch-searchbox-color: #{$white}; + --docsearch-searchbox-focus-background: #{rgba($black, .25)}; + --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)}; + --docsearch-text-color: #{$white}; + --docsearch-muted-color: #{rgba($white, .65)}; + + width: 100%; + margin: 0; + border: 1px solid rgba($white, .4); + @include border-radius(.375rem); + + .DocSearch-Search-Icon { + opacity: .65; + } + + &:active, + &:focus, + &:hover { + border-color: rgba($bd-accent, 1); + + .DocSearch-Search-Icon { + opacity: 1; } } } + +.DocSearch-Button-Keys { + min-width: 0; + padding-right: .25rem; + padding-left: .25rem; + background: rgba($black, .25); + @include border-radius(.25rem); +} + +.DocSearch-Button-Key { + top: 0; + width: auto; + height: 1.25rem; + padding-right: .125rem; + padding-left: .125rem; + margin-right: 0; + font-size: .875rem; + background: none; + box-shadow: none; +} + +.DocSearch-Commands-Key { + padding-left: 1px; + font-size: .875rem; + background-color: rgba($black, .1); + background-image: none; + box-shadow: none; +} + +.DocSearch-Form { + @include border-radius(var(--bs-border-radius)); +} + +.DocSearch-Hits { + mark { + padding: 0; + } +} + +.DocSearch-Hit { + padding-bottom: 0; + @include border-radius(0); + + a { + @include border-radius(0); + border: solid var(--bs-border-color); + border-width: 0 1px 1px; + } + + &:first-child a { + @include border-top-radius(var(--bs-border-radius)); + border-top-width: 1px; + } + &:last-child a { + @include border-bottom-radius(var(--bs-border-radius)); + } +} + +.DocSearch-Hit-icon { + display: flex; + align-items: center; +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 8f74f94d0..b460392d0 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -6,7 +6,6 @@ $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable- $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; $dropdown-active-icon: url("data:image/svg+xml,"); -$search-clear-icon: url("data:image/svg+xml,"); $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; @@ -19,4 +18,6 @@ $bd-callout-variants: info, warning, danger !default; --bd-accent-rgb: #{to-rgb($bd-accent)}; --bd-pink-rgb: #{to-rgb($pink-500)}; --bd-teal-rgb: #{to-rgb($teal-500)}; + --docsearch-primary-color: var(--bd-violet); + --docsearch-logo-color: var(--bd-violet); } -- cgit v1.2.3 From f02bdf7c5276eecb754343b4cf0e17e385512806 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 4 May 2022 11:05:15 +0300 Subject: docs: add proper markup on modal's page tooltips ands popovers --- site/assets/js/snippets.js | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 61aec7d08..4a9a9dc8f 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -16,11 +16,10 @@ 'use strict' // Tooltip and popover demos - document.querySelectorAll('.tooltip-demo') + // Tooltip and popover demos + document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { - new bootstrap.Tooltip(tooltip, { - selector: '[data-bs-toggle="tooltip"]' - }) + new bootstrap.Tooltip(tooltip) }) document.querySelectorAll('[data-bs-toggle="popover"]') @@ -79,17 +78,6 @@ }) } - // Demos within modals - document.querySelectorAll('.tooltip-test') - .forEach(tooltip => { - new bootstrap.Tooltip(tooltip) - }) - - document.querySelectorAll('.popover-test') - .forEach(popover => { - new bootstrap.Popover(popover) - }) - // Indeterminate checkbox example document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') .forEach(checkbox => { -- cgit v1.2.3 From 92e6856235555622c14f120b641f8118af33a5a3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sat, 7 May 2022 07:23:49 +0300 Subject: 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 --- site/assets/scss/_component-examples.scss | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index d48154a86..52b67543a 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -242,17 +242,8 @@ } .simple-list-example-scrollspy { - a { - padding: .25rem; - margin: .5rem 0; - - &:focus { - background-color: rgba($bd-purple, .65); - } - } - .active { - background-color: rgba($bd-purple, .15); + background-color: rgba(var(--bd-violet-rgb), .15); } } -- cgit v1.2.3 From 46bb9e78d74e0c7f4fa6f6fa611f3d9f8f28860b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 May 2022 10:11:09 -0700 Subject: Fix homepage npm install snippet --- site/assets/scss/_masthead.scss | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 4bb356e10..76d003c95 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -26,13 +26,22 @@ } .highlight { - padding: .5rem 4rem .5rem 1rem; - line-height: 1.25; + width: 100%; + padding: .5rem 1rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); @include border-radius(.5rem); + + @include media-breakpoint-up(lg) { + padding-right: 4rem; + } } .btn-clipboard { - margin-top: .4rem; + position: absolute; + top: -.125rem; + right: 0; background-color: transparent; } -- cgit v1.2.3 From e12e0806fbf7f7896316a142d732052a72b16aab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 May 2022 12:39:23 -0700 Subject: Update search box styling and position --- site/assets/scss/_search.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 9739d7a3a..49e34e8ee 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -6,7 +6,7 @@ @include media-breakpoint-up(lg) { position: absolute; - top: .75rem; + top: .875rem; left: 50%; width: 200px; margin-left: -100px; @@ -39,6 +39,7 @@ --docsearch-muted-color: #{rgba($white, .65)}; width: 100%; + height: 38px; // Match Bootstrap inputs margin: 0; border: 1px solid rgba($white, .4); @include border-radius(.375rem); @@ -60,8 +61,7 @@ .DocSearch-Button-Keys { min-width: 0; - padding-right: .25rem; - padding-left: .25rem; + padding: .125rem .25rem; background: rgba($black, .25); @include border-radius(.25rem); } -- cgit v1.2.3 From e2e107fc7215f36ff73cf2fbb29e35d703a82679 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 20 May 2022 19:28:31 +0200 Subject: CSS: few proposals (#36406) * Something to try about `!important` in color-bg helper * Better understanding border utility `.border-*-0` * Having rounded numbers of px --- site/assets/scss/_component-examples.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) (limited to 'site/assets') diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 52b67543a..6f3256894 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -257,12 +257,6 @@ } } -.bd-example-border-utils-0 { - [class^="border"] { - border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); - } -} - .bd-example-rounded-utils { [class*="rounded"] { margin: .25rem; @@ -325,8 +319,8 @@ pre { padding: 0; - margin-top: .65rem; - margin-bottom: .65rem; + margin-top: .625rem; + margin-bottom: .625rem; white-space: pre; background-color: transparent; border: 0; -- cgit v1.2.3 From 3a327c9015eff72631151eb3771e066361c82589 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 20 May 2022 13:43:30 -0700 Subject: Rewrite Webpack guide (#36382) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Rewrite Webpack guide Co-Authored-By: GeoSot Co-Authored-By: Julien Déramond <17381666+julien-deramond@users.noreply.github.com> * rewrite some pieces * eslint-skip Co-authored-by: GeoSot Co-authored-by: Julien Déramond <17381666+julien-deramond@users.noreply.github.com> --- site/assets/scss/_syntax.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 487550bfd..106032c07 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -100,7 +100,7 @@ .chroma { .language-bash, .language-sh { - &::before { + .line::before { color: #777; content: "$ "; user-select: none; -- cgit v1.2.3 From dea14df8ca9dffbaa77168fa7bdac853364d52c5 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 24 May 2022 19:39:57 +0200 Subject: CSS: doc fixes (#36425) * Remove unused attributes * Use utilities rather than using new CSS * Removed unused class * Change StackBlitz icon `aria-label` + small inconsistency --- site/assets/js/code-examples.js | 2 +- site/assets/scss/_clipboard-js.scss | 7 ------- site/assets/scss/_masthead.scss | 4 ---- 3 files changed, 1 insertion(+), 12 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 4a61fa09b..25486c2fe 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -22,7 +22,7 @@ '
', '
', ' ', '
', '
' diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index b4d8e234f..3a876a5e6 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -42,10 +42,3 @@ margin-top: .75rem; margin-right: .75rem; } - -.highlight-toolbar { - .btn-clipboard { - margin-top: 0; - margin-right: 0; - } -} diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 76d003c95..81d4d998c 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -90,10 +90,6 @@ } } -.masthead-followup-svg { - filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125)); -} - .masthead-notice { background-color: var(--bd-accent); box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75); -- cgit v1.2.3 From 8b85267739e4bee63f13dfa14a94f94926b4fd7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 26 May 2022 23:29:08 +0200 Subject: Fix StackBlitz examples by embedding snippets.js when needed (#36352) * Fix StackBlitz examples by embedding snippets.js when needed * Fix Popovers * Fix tooltips * Fix Toasts * Add comment sections * Fix Alerts * Indeterminate heckboxes + classes handling * Nothing to do for links * Fix modals * Nothing to do for Offcanvas * Remove correctly .bd-example * Add body .p-3 for all StackBlitz examples --- site/assets/js/snippets.js | 46 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 8 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 4a9a9dc8f..5e58493de 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -1,5 +1,7 @@ -// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT -// IT'S ALL JUST JUNK FOR OUR DOCS! +// NOTICE!!! Initially embedded in our docs this JavaScript +// file contains elements that can help you create reproducible +// use cases in StackBlitz for instance. +// In a real project please adapt this content to your needs. // ++++++++++++++++++++++++++++++++++++++++++ /*! @@ -15,18 +17,28 @@ (() => { 'use strict' - // Tooltip and popover demos - // Tooltip and popover demos + // -------- + // Tooltips + // -------- + // Instanciate all tooltips in a docs or StackBlitz page document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip) }) + // -------- + // Popovers + // -------- + // Instanciate all popovers in a docs or StackBlitz page document.querySelectorAll('[data-bs-toggle="popover"]') .forEach(popover => { new bootstrap.Popover(popover) }) + // ------------------------------- + // Toasts + // ------------------------------- + // Used by 'Placement' example in docs or StackBlitz const toastPlacement = document.getElementById('toastPlacement') if (toastPlacement) { document.getElementById('selectToastPlacement').addEventListener('change', function () { @@ -38,6 +50,7 @@ }) } + // Instanciate all toasts in a docs page only document.querySelectorAll('.bd-example .toast') .forEach(toastNode => { const toast = new bootstrap.Toast(toastNode, { @@ -47,6 +60,7 @@ toast.show() }) + // Instanciate all toasts in a docs page only const toastTrigger = document.getElementById('liveToastBtn') const toastLiveExample = document.getElementById('liveToast') if (toastTrigger) { @@ -57,6 +71,10 @@ }) } + // ------------------------------- + // Alerts + // ------------------------------- + // Used in 'Show live toast' example in docs or StackBlitz const alertPlaceholder = document.getElementById('liveAlertPlaceholder') const alertTrigger = document.getElementById('liveAlertBtn') @@ -78,13 +96,19 @@ }) } - // Indeterminate checkbox example + // ------------------------------- + // Checks & Radios + // ------------------------------- + // Indeterminate checkbox example in docs and StackBlitz document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') .forEach(checkbox => { checkbox.indeterminate = true }) - // Disable empty links in docs examples + // ------------------------------- + // Links + // ------------------------------- + // Disable empty links in docs examples only document.querySelectorAll('.bd-content [href="#"]') .forEach(link => { link.addEventListener('click', event => { @@ -92,7 +116,10 @@ }) }) - // Modal relatedTarget demo + // ------------------------------- + // Modal + // ------------------------------- + // Modal 'Varying modal content' example in docs and StackBlitz const exampleModal = document.getElementById('exampleModal') if (exampleModal) { exampleModal.addEventListener('show.bs.modal', event => { @@ -110,7 +137,10 @@ }) } - // Offcanvas demo + // ------------------------------- + // Offcanvas + // ------------------------------- + // 'Offcanvas components' example in docs only const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') if (myOffcanvas) { myOffcanvas.addEventListener('show.bs.offcanvas', event => { -- cgit v1.2.3 From ac89c3692b642daf0a2b6cc274715733a7a47d33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 1 Jun 2022 10:06:26 +0200 Subject: Docs: remove unused _algolia.scss --- site/assets/scss/_algolia.scss | 96 ------------------------------------------ site/assets/scss/docs.scss | 1 - 2 files changed, 97 deletions(-) delete mode 100644 site/assets/scss/_algolia.scss (limited to 'site/assets') diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss deleted file mode 100644 index ab22ad9a7..000000000 --- a/site/assets/scss/_algolia.scss +++ /dev/null @@ -1,96 +0,0 @@ -// Docsearch theming - -// stylelint-disable selector-class-pattern - -.algolia-autocomplete { - width: 100%; -} - -.ds-dropdown-menu { - width: 100%; - padding: $dropdown-padding-y 0; - margin: $dropdown-spacer 0 0; - @include font-size(.875rem); - background-color: $dropdown-bg; - background-clip: padding-box; - border: $dropdown-border-width solid $dropdown-border-color; - @include border-radius($dropdown-border-radius); - box-shadow: $dropdown-box-shadow; - - @include media-breakpoint-up(md) { - width: 500px; - margin-top: .5rem; - margin-left: -110px; - } -} - -.algolia-docsearch-suggestion--category-header { - padding: .125rem 1rem; - font-weight: 600; - color: $bd-violet; - - :not(.algolia-docsearch-suggestion__main) > & { - display: none; - } - - .ds-suggestion:not(:first-child) & { - padding-top: .75rem; - margin-top: .75rem; - border-top: 1px solid rgba(0, 0, 0, .1); - } -} - -.algolia-docsearch-suggestion--content { - padding: .25rem 1rem; - - .ds-cursor & { - background-color: rgba($bd-purple-light, .2); - } -} - -.algolia-docsearch-suggestion { - display: block; - text-decoration: none; -} - -.algolia-docsearch-suggestion--subcategory-column { - display: none; -} - -.algolia-docsearch-suggestion--subcategory-inline { - display: inline; - color: $gray-700; - - &::after { - padding: 0 .25rem; - content: "/"; - } -} - -.algolia-docsearch-suggestion--title { - display: inline; - font-weight: 500; - color: $gray-800; -} - -.algolia-docsearch-suggestion--text { - color: $gray-800; - @include font-size(.75rem); -} - -.algolia-docsearch-suggestion--highlight { - color: $purple; - background-color: rgba($purple, .1); -} - -.algolia-docsearch-footer { - padding: .5rem 1rem 0; - margin-top: .625rem; - @include font-size(.75rem); - color: $gray-600; - border-top: 1px solid rgba(0, 0, 0, .1); -} - -.algolia-docsearch-footer--logo { - color: inherit; -} diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index f1390e2fa..521493461 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -57,4 +57,3 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default // Load docs dependencies @import "syntax"; @import "anchor"; -@import "algolia"; -- cgit v1.2.3 From 24d79fe74c7c9a8800c94f209b09a0679989ffa5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 Jun 2022 07:41:39 -0700 Subject: Add example of dark navbar and offcanvas to docs (#36510) --- site/assets/js/snippets.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 5e58493de..66ef949f7 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -141,10 +141,12 @@ // Offcanvas // ------------------------------- // 'Offcanvas components' example in docs only - const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') + const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas') if (myOffcanvas) { - myOffcanvas.addEventListener('show.bs.offcanvas', event => { - event.preventDefault() - }, false) + myOffcanvas.forEach(offcanvas => { + offcanvas.addEventListener('show.bs.offcanvas', event => { + event.preventDefault() + }, false) + }) } })() -- cgit v1.2.3 From 8de048833049f8b6af2c07df2d44d98c1ee095db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sat, 25 Jun 2022 09:42:59 +0200 Subject: Docs: update clipboard.js to v2.0.11 --- site/assets/js/vendor/clipboard.min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/vendor/clipboard.min.js b/site/assets/js/vendor/clipboard.min.js index 95f55d7b0..1103f811e 100644 --- a/site/assets/js/vendor/clipboard.min.js +++ b/site/assets/js/vendor/clipboard.min.js @@ -1,7 +1,7 @@ /*! - * clipboard.js v2.0.8 + * clipboard.js v2.0.11 * https://clipboardjs.com/ * * Licensed MIT © Zeno Rocha */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={134:function(t,e,n){"use strict";n.d(e,{default:function(){return r}});var e=n(279),i=n.n(e),e=n(370),a=n.n(e),e=n(817),o=n.n(e);function c(t){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function u(t,e){for(var n=0;n Date: Tue, 28 Jun 2022 07:41:15 +0200 Subject: Fix search modal z-index to be on top of all docs showcased components (#36627) --- site/assets/scss/_search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 49e34e8ee..24c0e2dc8 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -23,7 +23,7 @@ --docsearch-muted-color: #{$text-muted}; --docsearch-hit-shadow: none; - z-index: 1030; + z-index: 2000; // Make sure to be over all components showcased in the documentation @include media-breakpoint-up(lg) { padding-top: 4rem; -- cgit v1.2.3 From 6cf72530ed31bc69ed9fa6168bb7629a48cf8884 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 6 Jul 2022 07:43:38 +0200 Subject: Docs: add indeterminate disabled checkbox example (#36674) --- site/assets/js/snippets.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 66ef949f7..640ff85c5 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -102,7 +102,9 @@ // Indeterminate checkbox example in docs and StackBlitz document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') .forEach(checkbox => { - checkbox.indeterminate = true + if (checkbox.id.includes('Indeterminate')) { + checkbox.indeterminate = true + } }) // ------------------------------- -- cgit v1.2.3 From 6d101b15a4af000b32be236063e9e5b58385d077 Mon Sep 17 00:00:00 2001 From: Marc Wrobel Date: Sun, 17 Jul 2022 20:54:34 +0200 Subject: Fix typos in `snippets.js` (#36758) --- site/assets/js/snippets.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'site/assets') diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 640ff85c5..53f8a786e 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -20,7 +20,7 @@ // -------- // Tooltips // -------- - // Instanciate all tooltips in a docs or StackBlitz page + // Instantiate all tooltips in a docs or StackBlitz page document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip) @@ -29,7 +29,7 @@ // -------- // Popovers // -------- - // Instanciate all popovers in a docs or StackBlitz page + // Instantiate all popovers in a docs or StackBlitz page document.querySelectorAll('[data-bs-toggle="popover"]') .forEach(popover => { new bootstrap.Popover(popover) @@ -50,7 +50,7 @@ }) } - // Instanciate all toasts in a docs page only + // Instantiate all toasts in a docs page only document.querySelectorAll('.bd-example .toast') .forEach(toastNode => { const toast = new bootstrap.Toast(toastNode, { @@ -60,7 +60,7 @@ toast.show() }) - // Instanciate all toasts in a docs page only + // Instantiate all toasts in a docs page only const toastTrigger = document.getElementById('liveToastBtn') const toastLiveExample = document.getElementById('liveToast') if (toastTrigger) { -- cgit v1.2.3 From 3feaf6ca0b0c6b6e134a8937ca132d43ed949a68 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Jul 2022 13:30:42 -0700 Subject: Move DocSearch out of offcanvas to always show it on mobile (#36824) --- site/assets/scss/_navbar.scss | 6 ++++++ site/assets/scss/_search.scss | 21 ++++++++++++++++++++- 2 files changed, 26 insertions(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 4805a3c47..0cff3e2a8 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -4,6 +4,12 @@ background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); + .bd-navbar-toggle { + @include media-breakpoint-down(lg) { + width: 4.25rem; + } + } + .navbar-toggler { padding: 0; margin-right: -.5rem; diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 24c0e2dc8..bce04c9d2 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -2,7 +2,6 @@ .bd-search { position: relative; - width: 100%; @include media-breakpoint-up(lg) { position: absolute; @@ -57,6 +56,26 @@ opacity: 1; } } + + @include media-breakpoint-down(lg) { + &, + &:hover, + &:focus { + background: transparent; + border: 0; + box-shadow: none; + } + &:focus { + box-shadow: var(--docsearch-searchbox-shadow); + } + } +} + +.DocSearch-Button-Keys, +.DocSearch-Button-Placeholder { + @include media-breakpoint-down(lg) { + display: none; + } } .DocSearch-Button-Keys { -- cgit v1.2.3 From 995df354f260ccf46672e4dc9e7b2c242bd4c02d Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Thu, 25 Aug 2022 14:38:04 +0200 Subject: Set cursor to auto instead of pointer on `.DocSearch-Container` --- site/assets/scss/_search.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'site/assets') diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index bce04c9d2..a7e26331f 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -23,6 +23,7 @@ --docsearch-hit-shadow: none; z-index: 2000; // Make sure to be over all components showcased in the documentation + cursor: auto; @include media-breakpoint-up(lg) { padding-top: 4rem; -- cgit v1.2.3 From 4cea8b1786ddbe365747cabebe9bee44d70a3b6d Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Fri, 26 Aug 2022 09:19:33 +0200 Subject: Add a comment for track the bug. --- site/assets/scss/_search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site/assets') diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index a7e26331f..01e9d036e 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -23,7 +23,7 @@ --docsearch-hit-shadow: none; z-index: 2000; // Make sure to be over all components showcased in the documentation - cursor: auto; + cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled. @include media-breakpoint-up(lg) { padding-top: 4rem; -- cgit v1.2.3 From cda901f2444d6b09cfa3261c84ef98288e3b9834 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 1 Sep 2022 02:30:23 +0100 Subject: v5/docs: reintroduce `outline` for docs code samples, buttons when `:not(:focus-visible)` (#36507) * Remove outline suppression for focused `
`

Sighted keyboard users rely on knowing where their focus is. If the `
` 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
---
 site/assets/scss/_component-examples.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 6f3256894..f4865daf8 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -320,15 +320,11 @@
   pre {
     padding: 0;
     margin-top: .625rem;
+    margin-right: 1.875rem;
     margin-bottom: .625rem;
     white-space: pre;
     background-color: transparent;
     border: 0;
-
-    // Undo tabindex that's automatically added by Hugo
-    &:focus {
-      outline: 0;
-    }
   }
 
   pre code {
-- 
cgit v1.2.3


From 538f50be5a7c5f9f94c2eb25bf2e15270159df51 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 22 Oct 2022 16:51:44 -0400
Subject: Home imports (#37318)

* Update docs homepage to use separate partials for each section

Also modifies the homepage code snippets under getting started to remove the code comments, making copy-pasting easier.

* Update some copy and examples

* newlines

* type button

* more code review, bring back interactive components

* fix hover
---
 site/assets/scss/_masthead.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 81d4d998c..6a1d34de4 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -94,3 +94,13 @@
   background-color: var(--bd-accent);
   box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
 }
+
+.animate-img {
+  > img {
+    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+  }
+
+  &:hover > img {
+    transform: scale(1.1);
+  }
+}
-- 
cgit v1.2.3


From 0968db80997613828634ddb4b2c3980871f0ed41 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 22 Oct 2022 17:13:39 -0400
Subject: Add `z-index` utilities, `.z-*` (#37317)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 

* custom appearance

* linter

Co-authored-by: Julien Déramond 
Co-authored-by: Julien Déramond 
---
 site/assets/scss/_component-examples.scss | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f4865daf8..8f39b2209 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -302,6 +302,32 @@
   min-height: 240px;
 }
 
+.bd-example-zindex-levels {
+  min-height: 15rem;
+
+  > div {
+    background-color: tint-color($bd-violet, 75%);
+    border: 1px solid tint-color($bd-violet, 50%);
+  }
+
+  > :nth-child(2) {
+    top: 3rem;
+    left: 3rem;
+  }
+  > :nth-child(3) {
+    top: 4.5rem;
+    left: 4.5rem;
+  }
+  > :nth-child(4) {
+    top: 6rem;
+    left: 6rem;
+  }
+  > :nth-child(5) {
+    top: 7.5rem;
+    left: 7.5rem;
+  }
+}
+
 //
 // Code snippets
 //
-- 
cgit v1.2.3


From f97149a4af97d0888029f760ece8a8cecfc4fcc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Mon, 14 Nov 2022 08:30:46 +0100
Subject: Docs: add margin between buttons in tooltip examples

---
 site/assets/scss/_component-examples.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 8f39b2209..0d8460a14 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -208,8 +208,14 @@
 }
 
 // Tooltips
-.tooltip-demo a {
-  white-space: nowrap;
+.tooltip-demo {
+  a {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: .25rem .125rem;
+  }
 }
 
 // scss-docs-start custom-tooltip
-- 
cgit v1.2.3


From fc3f4b67d65c575daa661ecf31cf59b4ff3cced5 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 28 Nov 2022 22:30:26 -0800
Subject: Add dark mode support (#35857)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 

* 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 

* Apply suggestions from code review

Co-authored-by: Julien Déramond 

* 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 
Co-authored-by: Julien Déramond 
---
 site/assets/js/color-modes/index.js       | 62 +++++++++++++++++++++++++++++
 site/assets/scss/_ads.scss                |  6 +--
 site/assets/scss/_brand.scss              |  4 +-
 site/assets/scss/_buttons.scss            | 14 ++++---
 site/assets/scss/_callouts.scss           |  6 ++-
 site/assets/scss/_clipboard-js.scss       |  6 +--
 site/assets/scss/_component-examples.scss | 44 ++++++++++++---------
 site/assets/scss/_content.scss            | 65 ++++++++++++++++++++++++++++---
 site/assets/scss/_footer.scss             |  4 +-
 site/assets/scss/_masthead.scss           | 16 +++++---
 site/assets/scss/_navbar.scss             | 58 +++++++++++++++++++++------
 site/assets/scss/_sidebar.scss            | 19 +++++++--
 site/assets/scss/_syntax.scss             | 26 +++++++++++--
 site/assets/scss/_toc.scss                | 13 ++++---
 site/assets/scss/_variables.scss          | 13 ++++++-
 15 files changed, 283 insertions(+), 73 deletions(-)
 create mode 100644 site/assets/js/color-modes/index.js

(limited to 'site/assets')

diff --git a/site/assets/js/color-modes/index.js b/site/assets/js/color-modes/index.js
new file mode 100644
index 000000000..51bfd40a7
--- /dev/null
+++ b/site/assets/js/color-modes/index.js
@@ -0,0 +1,62 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    btnToActive.classList.add('active')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('load', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss
index b9369eb19..cc5634096 100644
--- a/site/assets/scss/_ads.scss
+++ b/site/assets/scss/_ads.scss
@@ -14,10 +14,10 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);
 
   a {
-    color: $gray-800;
+    color: var(--bs-body-color);
     text-decoration: none;
   }
 
@@ -34,5 +34,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: $gray-700 !important;
+  color: var(--bs-body-color) !important;
 }
diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index 9637cfb18..304075c92 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -15,13 +15,13 @@
 // Individual items
 .bd-brand-item {
   + .bd-brand-item {
-    border-top: 1px solid $white;
+    border-top: 1px solid var(--#{$prefix}border-color);
   }
 
   @include media-breakpoint-up(md) {
     + .bd-brand-item {
       border-top: 0;
-      border-left: 1px solid $white;
+      border-left: 1px solid var(--#{$prefix}border-color);
     }
   }
 }
diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
index 13bd6e48a..300bdca9c 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -33,13 +33,15 @@
 }
 
 .btn-bd-light {
+  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
   --bs-btn-color: var(--bs-gray-600);
-  --bs-btn-border-color: var(--bs-gray-400);
-  --bs-btn-hover-color: var(--bd-violet);
-  --bs-btn-hover-border-color: var(--bd-violet);
-  --bs-btn-active-color: var(--bd-violet);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--btn-custom-color);
+  --bs-btn-hover-border-color: var(--btn-custom-color);
+  --bs-btn-active-color: var(--btn-custom-color);
   --bs-btn-active-bg: var(--bs-white);
-  --bs-btn-active-border-color: var(--bd-violet);
-  --bs-btn-focus-border-color: var(--bd-violet);
+  --bs-btn-active-border-color: var(--btn-custom-color);
+  --bs-btn-focus-border-color: var(--btn-custom-color);
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index 4513a7d1d..016a2ed24 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -6,6 +6,7 @@
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
+  color: var(--bd-callout-color, inherit);
   background-color: var(--bd-callout-bg, var(--bs-gray-100));
   border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
 
@@ -29,7 +30,8 @@
 // Variations
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
-    --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
-    --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
+    --bd-callout-color: var(--bs-#{$variant}-text);
+    --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+    --bd-callout-border: var(--bs-#{$variant}-border-subtle);
   }
 }
diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 3a876a5e6..1e0003bcb 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -22,13 +22,13 @@
   display: block;
   padding: .5em;
   line-height: 1;
-  color: $gray-900;
-  background-color: $gray-100;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
   border: 0;
   @include border-radius(.25rem);
 
   &:hover {
-    color: $primary;
+    color: var(--bs-link-color);
   }
 
   &:focus {
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 0d8460a14..dcedffa13 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -3,7 +3,7 @@
 //
 
 .bd-example-snippet {
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   position: relative;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5);
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
   @include clearfix();
 
@@ -32,7 +32,7 @@
 
   + .bd-code-snippet {
     @include border-top-radius(0);
-    border: solid $border-color;
+    border: solid var(--bs-border-color);
     border-width: 0 1px 1px;
   }
 
@@ -58,7 +58,8 @@
     display: block;
   }
 
-  > :last-child {
+  > :last-child,
+  > nav:last-child .breadcrumb {
     margin-bottom: 0;
   }
 
@@ -115,11 +116,12 @@
 //
 
 .bd-example-row [class^="col"],
-.bd-example-cssgrid .grid > * {
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: rgba(var(--bd-violet-rgb), .1);
-  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
 .bd-example-row .row + .row,
@@ -129,12 +131,12 @@
 
 .bd-example-row-flex-cols .row {
   min-height: 10rem;
-  background-color: rgba(255, 0, 0, .1);
+  background-color: rgba(var(--bd-violet-rgb), .15);
 }
 
 .bd-example-flex div {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
 // Grid mixins
@@ -176,8 +178,8 @@
   .ratio {
     display: inline-block;
     width: 10rem;
-    color: $gray-600;
-    background-color: $gray-100;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
     border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
 
     > div {
@@ -259,7 +261,7 @@
     width: 5rem;
     height: 5rem;
     margin: .25rem;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 }
 
@@ -275,13 +277,13 @@
 
   .position-relative {
     height: 200px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 
   .position-absolute {
     width: 2rem;
     height: 2rem;
-    background-color: $dark;
+    background-color: var(--bs-body-color);
     @include border-radius();
   }
 }
@@ -342,7 +344,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-tertiary-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -361,7 +363,7 @@
 
   pre code {
     @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
     word-wrap: normal;
   }
 }
@@ -386,6 +388,12 @@
 }
 
 .highlight-toolbar {
-  border: solid $border-color;
+  background-color: var(--bs-tertiary-bg);
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
+
+  .btn-clipboard {
+    margin-top: 0;
+    margin-right: 0;
+  }
 }
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index cd594335a..14d27b2fd 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -32,6 +32,9 @@
   // Override Bootstrap defaults
   > .table,
   > .table-responsive .table {
+    --bs-table-border-color: var(--bs-border-color);
+
+    max-width: 100%;
     margin-bottom: 1.5rem;
     @include font-size(.875rem);
 
@@ -60,6 +63,14 @@
       }
     }
 
+    th {
+      color: var(--bs-emphasis-color);
+    }
+
+    strong {
+      color: var(--bs-emphasis-color);
+    }
+
     // Prevent breaking of code
     // stylelint-disable-next-line selector-max-compound-selectors
     th,
@@ -80,6 +91,16 @@
   min-width: 280px;
 }
 
+.table-swatches {
+  th {
+    color: var(--bs-emphasis-color);
+  }
+
+  td code {
+    white-space: nowrap;
+  }
+}
+
 .bd-title {
   @include font-size(3rem);
 }
@@ -89,13 +110,10 @@
   font-weight: 300;
 }
 
-.bd-bg-violet {
-  background-color: $bd-violet;
-}
-
 .bi {
   width: 1em;
   height: 1em;
+  vertical-align: -.125em;
   fill: currentcolor;
 }
 
@@ -121,6 +139,43 @@
 
 .border-lg-start {
   @include media-breakpoint-up(lg) {
-    border-left: $border-width solid $border-color;
+    border-left: var(--bs-border-width) solid var(--bs-border-color);
+  }
+}
+
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+  color: var(--bs-link-color);
+
+  &:hover,
+  details[open] > & {
+    color: var(--bs-link-hover-color);
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
   }
 }
+// scss-docs-end custom-color-mode
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 87cee6d2b..42e1ca051 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -4,12 +4,12 @@
 
 .bd-footer {
   a {
-    color: $gray-700;
+    color: var(--bs-body-color);
     text-decoration: none;
 
     &:hover,
     &:focus {
-      color: $link-color;
+      color: var(--bs-link-hover-color);
       text-decoration: underline;
     }
   }
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 6a1d34de4..52b282fcf 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -11,13 +11,12 @@
 
   h1 {
     @include font-size(4rem);
-    line-height: 1;
   }
 
   .lead {
     @include font-size(1rem);
     font-weight: 400;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
   }
 
   .bd-code-snippet {
@@ -46,8 +45,7 @@
   }
 
   #carbonads { // stylelint-disable-line selector-max-id
-    margin-right: auto;
-    margin-left: auto;
+    margin-inline: auto;
   }
 
   @include media-breakpoint-up(md) {
@@ -86,7 +84,7 @@
   mix-blend-mode: darken;
 
   svg {
-    filter: drop-shadow(0 1px 1px #fff);
+    filter: drop-shadow(0 1px 1px var(--bs-body-bg));
   }
 }
 
@@ -104,3 +102,11 @@
     transform: scale(1.1);
   }
 }
+
+@if $enable-dark-mode {
+  [data-bs-theme="dark"] {
+    .masthead-followup-icon {
+      mix-blend-mode: lighten;
+    }
+  }
+}
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 0cff3e2a8..9f1f4e71a 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,8 +1,16 @@
 .bd-navbar {
   padding: .75rem 0;
   background-color: transparent;
-  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    display: block;
+    content: "";
+    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+  }
 
   .bd-navbar-toggle {
     @include media-breakpoint-down(lg) {
@@ -30,6 +38,7 @@
   }
 
   .navbar-brand {
+    color: $white;
     transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
 
     &:hover {
@@ -60,7 +69,7 @@
   }
 
   .offcanvas-lg {
-    background-color: var(--bd-violet);
+    background-color: var(--bd-violet-bg);
     border-left: 0;
 
     @include media-breakpoint-down(lg) {
@@ -75,17 +84,42 @@
   }
 
   .dropdown-menu {
-    --#{$prefix}dropdown-min-width: 12rem;
-    --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
-    @include rfs(.875rem, --#{$prefix}dropdown-font-size);
+    --bs-dropdown-min-width: 12rem;
+    --bs-dropdown-padding-x: .25rem;
+    --bs-dropdown-padding-y: .25rem;
+    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+    @include rfs(.875rem, --bs-dropdown-font-size);
+    @include font-size(.875rem);
+    @include border-radius(.5rem);
     box-shadow: $dropdown-box-shadow;
+
+    li + li {
+      margin-top: .125rem;
+    }
+
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .bi {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+
+    .active {
+      font-weight: 600;
+
+      .bi {
+        display: block !important; // stylelint-disable-line declaration-no-important
+      }
+    }
   }
+}
 
-  .dropdown-item.current {
-    font-weight: 600;
-    background-image: escape-svg($dropdown-active-icon);
-    background-repeat: no-repeat;
-    background-position: right $dropdown-item-padding-x top .6rem;
-    background-size: .75rem .75rem;
+@include color-mode(dark) {
+  .bd-navbar {
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
   }
 }
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index ed76b3ca8..6f1ef292f 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -11,6 +11,17 @@
     margin-left: -.25rem;
     overflow-y: auto;
   }
+
+  @include media-breakpoint-down(lg) {
+    .offcanvas-lg {
+      border-right-color: var(--bs-border-color);
+      box-shadow: $box-shadow-lg;
+    }
+  }
+}
+
+.bd-links-heading {
+  color: var(--bs-emphasis-color);
 }
 
 .bd-links-nav {
@@ -35,16 +46,16 @@
 .bd-links-link {
   padding: .1875rem .5rem;
   margin-top: .125rem;
-  margin-left: 1rem;
-  color: rgba($black, .65);
+  margin-left: 1.125rem;
+  color: var(--bs-body-color);
   text-decoration: if($link-decoration == none, null, none);
 
   &:hover,
   &:focus,
   &.active {
-    color: rgba($black, .85);
+    color: var(--bs-emphasis-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: rgba(var(--bd-violet-rgb), .1);
+    background-color: var(--bd-sidebar-link-bg);
   }
 
   &.active {
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 106032c07..7c327ec15 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-bs-theme="light"] {
   --base00: #fff;
   --base01: #f5f5f5;
   --base02: #c8c8fa;
@@ -17,6 +18,25 @@
   --base0F: #333;
 }
 
+[data-bs-theme="dark"] {
+  --base00: #282c34;
+  --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #868e96;
+  --base04: #565c64;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #d19a66;
+  --base08: #e06c75;
+  --base09: #d19a66;
+  --base0A: #e5c07b;
+  --base0B: #98c379;
+  --base0C: #56b6c2;
+  --base0D: #61afef;
+  --base0E: #c678dd;
+  --base0F: #be5046;
+}
+
 .hl { background-color: var(--base02); }
 .c { color: var(--base03); }
 .err { color: var(--base08); }
@@ -101,14 +121,14 @@
   .language-bash,
   .language-sh {
     .line::before {
-      color: #777;
+      color: var(--base03);
       content: "$ ";
       user-select: none;
     }
   }
 
   .language-powershell::before {
-    color: #009;
+    color: var(--base0C);
     content: "PM> ";
     user-select: none;
   }
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 512a11b42..ffa6a0c44 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -52,15 +52,16 @@
   }
 
   @include media-breakpoint-down(md) {
-    border: 1px solid $border-color;
-    @include border-radius(.4rem);
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+    @include border-radius(var(--bs-border-radius));
 
     &:hover,
     &:focus,
     &:active,
     &[aria-expanded="true"] {
       color: var(--bd-violet);
-      background-color: $white;
+      background-color: var(--bs-body-bg);
       border-color: var(--bd-violet);
     }
 
@@ -75,9 +76,9 @@
   @include media-breakpoint-down(md) {
     nav {
       padding: 1.25rem;
-      background-color: var(--bs-gray-100);
-      border: 1px solid $border-color;
-      @include border-radius(.25rem);
+      background-color: var(--bs-tertiary-bg);
+      border: 1px solid var(--bs-border-color);
+      @include border-radius(var(--bs-border-radius));
     }
   }
 
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index b460392d0..ccc7c1f8f 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -5,12 +5,12 @@ $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-accent:       #ffe484;
-$dropdown-active-icon: url("data:image/svg+xml,");
 
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
 
-:root {
+:root,
+[data-bs-theme="light"] {
   --bd-purple: #{$bd-purple};
   --bd-violet: #{$bd-violet};
   --bd-accent: #{$bd-accent};
@@ -20,4 +20,13 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-teal-rgb: #{to-rgb($teal-500)};
   --docsearch-primary-color: var(--bd-violet);
   --docsearch-logo-color: var(--bd-violet);
+
+  --bd-violet-bg: var(--bd-violet);
+  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+}
+
+[data-bs-theme="dark"] {
+  --bd-violet: #{mix($bd-violet, $white, 75%)};
+  --bd-violet-bg: #{$bd-violet};
+  --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
 }
-- 
cgit v1.2.3


From 0444d2cfe53390d6eaf86e8a6f6976309bb0ad25 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Tue, 29 Nov 2022 07:20:35 +0000
Subject: Docs: rewrite/reorganise carousel docs page (#37354)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Instantiate/initialize all non-autoplaying carousels in docs pages

* Rewrite/reorganise carousel docs page

* start with static/non-autoplaying examples
* explicitly mention that carousels currently need to be manually initialized
* split out and explain autoplaying and the weird "autoplay after first interaction" behaviour, as well as the pause on hover/focus

* Add callout about autoplaying and accessibility

* Don't have the dark variant example autoplay

* Add "autoplaying" to cspell custom dictionary

* Tweal wording, move Page Visibility API to autoplay section

* Tweak explanation for methods, add line break in js code for consistency with last code block on the page

* Tweak method descriptions

* Tweak headings (plural "carousels")

* Move some paragraphs out of intro and into basic example, reword the nested and accessibility paragraph

* Tweak warning about `.active` slide

* Tweak callout wording

* Further prose tweaks

move the sentence about not double-initialising autoplaying carousels to the callout right at the top
instead of talking about `data-bs...` attributes, talk about the "option" instead, as authors may be setting these not via data attributes, but at instatiation time with options in the constructor
remove the incorrect statement about pausing when keyboard focus is in the carousel

* Instantiate/initialize all non-autoplaying carousels in docs pages

* Rewrite/reorganise carousel docs page

* start with static/non-autoplaying examples
* explicitly mention that carousels currently need to be manually initialized
* split out and explain autoplaying and the weird "autoplay after first interaction" behaviour, as well as the pause on hover/focus

* Add callout about autoplaying and accessibility

* Don't have the dark variant example autoplay

* Add "autoplaying" to cspell custom dictionary

* Tweal wording, move Page Visibility API to autoplay section

* Tweak explanation for methods, add line break in js code for consistency with last code block on the page

* Tweak method descriptions

* Tweak headings (plural "carousels")

* Move some paragraphs out of intro and into basic example, reword the nested and accessibility paragraph

* Tweak warning about `.active` slide

* Tweak callout wording

* Further prose tweaks

move the sentence about not double-initialising autoplaying carousels to the callout right at the top
instead of talking about `data-bs...` attributes, talk about the "option" instead, as authors may be setting these not via data attributes, but at instatiation time with options in the constructor
remove the incorrect statement about pausing when keyboard focus is in the carousel

* Fix relative link

* Update site/assets/js/snippets.js

Co-authored-by: GeoSot 

* Fix snippet.js

* Tweak content organisation just a bit

Co-authored-by: GeoSot 
Co-authored-by: Julien Déramond 
Co-authored-by: Julien Déramond 
Co-authored-by: Mark Otto 
---
 site/assets/js/snippets.js | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 53f8a786e..43b8a095c 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -96,6 +96,15 @@
     })
   }
 
+  // --------
+  // Carousels
+  // --------
+  // Instantiate all non-autoplaying carousels in a docs or StackBlitz page
+  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
+    .forEach(carousel => {
+      bootstrap.Carousel.getOrCreateInstance(carousel)
+    })
+
   // -------------------------------
   // Checks & Radios
   // -------------------------------
-- 
cgit v1.2.3


From 18fec8bf365e34bc8439af99eddc18ec3e14a8a1 Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Thu, 1 Dec 2022 20:14:33 +0200
Subject: code-examples.js: switch to `firstElementChild` (#37570)

This ensures that we will get the first element child and not text
---
 site/assets/js/code-examples.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index 25486c2fe..edb13598f 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -56,7 +56,7 @@
   })
 
   clipboard.on('success', event => {
-    const iconFirstChild = event.trigger.querySelector('.bi').firstChild
+    const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
     const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
     const namespace = 'http://www.w3.org/1999/xlink'
     const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
-- 
cgit v1.2.3


From 6807008159012b9cf370db87dcd804c4cae3a1b5 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton 
Date: Sun, 18 Dec 2022 08:19:33 +0100
Subject: Docs: replace some `--#{$prefix}` by `--bs` in Sass files (#37617)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond 
---
 site/assets/scss/_brand.scss              | 4 ++--
 site/assets/scss/_component-examples.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index 304075c92..03fe2fe1f 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -15,13 +15,13 @@
 // Individual items
 .bd-brand-item {
   + .bd-brand-item {
-    border-top: 1px solid var(--#{$prefix}border-color);
+    border-top: 1px solid var(--bs-border-color);
   }
 
   @include media-breakpoint-up(md) {
     + .bd-brand-item {
       border-top: 0;
-      border-left: 1px solid var(--#{$prefix}border-color);
+      border-left: 1px solid var(--bs-border-color);
     }
   }
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index dcedffa13..11800a638 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -180,7 +180,7 @@
     width: 10rem;
     color: var(--bs-secondary-color);
     background-color: var(--bs-tertiary-bg);
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 
     > div {
       display: flex;
-- 
cgit v1.2.3


From e1315d11f2fb9a43b96dd48bf8f9aaf5305372b2 Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Sun, 18 Dec 2022 23:32:17 +0200
Subject: docs: move color-mode script (#37658)

* docs: move color-mode script

* Move color-modes.js in static folder

* Async load color-modes.js

* Switch to DOMContentLoaded

* Revert async loading
---
 site/assets/js/color-modes/index.js | 62 -------------------------------------
 1 file changed, 62 deletions(-)
 delete mode 100644 site/assets/js/color-modes/index.js

(limited to 'site/assets')

diff --git a/site/assets/js/color-modes/index.js b/site/assets/js/color-modes/index.js
deleted file mode 100644
index 51bfd40a7..000000000
--- a/site/assets/js/color-modes/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*!
- * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- */
-
-(() => {
-  'use strict'
-
-  const storedTheme = localStorage.getItem('theme')
-
-  const getPreferredTheme = () => {
-    if (storedTheme) {
-      return storedTheme
-    }
-
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  }
-
-  const setTheme = function (theme) {
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
-    }
-  }
-
-  setTheme(getPreferredTheme())
-
-  const showActiveTheme = theme => {
-    const activeThemeIcon = document.querySelector('.theme-icon-active use')
-    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
-
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      element.classList.remove('active')
-    })
-
-    btnToActive.classList.add('active')
-    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-  }
-
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    if (storedTheme !== 'light' || storedTheme !== 'dark') {
-      setTheme(getPreferredTheme())
-    }
-  })
-
-  window.addEventListener('load', () => {
-    showActiveTheme(getPreferredTheme())
-
-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
-      })
-  })
-})()
-- 
cgit v1.2.3


From f6687e99b5171da9559f3192aa3397b82adf43e1 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 20 Dec 2022 14:25:36 -0800
Subject: Follow up

---
 site/assets/scss/docs.scss | 1 -
 1 file changed, 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 521493461..509cc33fd 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -1,7 +1,6 @@
 /*!
  * Bootstrap Docs (https://getbootstrap.com/)
  * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
-- 
cgit v1.2.3


From 41f62c5a11d98d49646296f996fa844d05f9514d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Wed, 21 Dec 2022 07:52:07 +0100
Subject: Fix Sass compilation when `$color-mode-type` is set to `media-query`
 (#37687)

* Fix Sass compilation when `$color-mode-type` is set to `media-query`

* Update mixin names, fix docs color modes for using media queries by using mixin

Co-authored-by: Mark Otto 
---
 site/assets/scss/_syntax.scss    | 2 +-
 site/assets/scss/_variables.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 7c327ec15..092307e05 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -18,7 +18,7 @@
   --base0F: #333;
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark, true) {
   --base00: #282c34;
   --base01: #353b45;
   --base02: #3e4451;
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index ccc7c1f8f..b3730ebef 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -25,7 +25,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
 }
 
-[data-bs-theme="dark"] {
+@include color-mode(dark, true) {
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
-- 
cgit v1.2.3


From 6295d3ba36045252729772b90a60d857dfa13aa9 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 26 Dec 2022 11:32:43 -0800
Subject: Few miscellaneous docs fixes (#37625)

* Update hero button color

* Fix link color on examples index

* Move .bd-btn-lg to docs buttons partial, move larger border-radius to that class so medium buttons don't look odd

* Undo the markup split

* Round padding up to whole number
---
 site/assets/scss/_buttons.scss  | 11 ++++++++---
 site/assets/scss/_masthead.scss |  4 ----
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
index 300bdca9c..8e4c3838d 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -6,9 +6,8 @@
 .btn-bd-primary {
   --bs-btn-font-weight: 600;
   --bs-btn-color: var(--bs-white);
-  --bs-btn-bg: var(--bd-violet);
-  --bs-btn-border-color: var(--bd-violet);
-  --bs-btn-border-radius: .5rem;
+  --bs-btn-bg: var(--bd-violet-bg);
+  --bs-btn-border-color: var(--bd-violet-bg);
   --bs-btn-hover-color: var(--bs-white);
   --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
   --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
@@ -45,3 +44,9 @@
   --bs-btn-focus-border-color: var(--btn-custom-color);
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
+
+.bd-btn-lg {
+  --bs-btn-border-radius: .5rem;
+
+  padding: .8125rem 2rem;
+}
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 52b282fcf..d39f640ae 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -71,10 +71,6 @@
   }
 }
 
-.bd-btn-lg {
-  padding: .8rem 2rem;
-}
-
 .masthead-followup-icon {
   padding: 1rem;
   color: rgba(var(--bg-rgb), 1);
-- 
cgit v1.2.3


From 993ad97fdc0bcbc0fb63dcafb466f81e5be004e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Wed, 28 Dec 2022 01:43:42 +0100
Subject: Docs: handle light/dark mode in Algolia search modal (#37738)

* Docs: handle light/dark mode in Algolia search modal

* Improve scopes
---
 site/assets/scss/_search.scss    | 31 +++++++++++++++++++++++++++++++
 site/assets/scss/_variables.scss |  2 --
 2 files changed, 31 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 01e9d036e..3046d57db 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -1,5 +1,30 @@
 // stylelint-disable selector-class-pattern
 
+:root {
+  --docsearch-primary-color: var(--bd-violet);
+  --docsearch-logo-color: var(--bd-violet);
+}
+
+@include color-mode(dark, true) {
+  // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3
+  // in html[data-theme="dark"] selector
+  // and are slightly modified for formatting purpose
+  --docsearch-text-color: #f5f6f7;
+  --docsearch-container-background: rgba(9, 10, 17, .8);
+  --docsearch-modal-background: #15172a;
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-searchbox-background: #090a11;
+  --docsearch-searchbox-focus-background: #000;
+  --docsearch-hit-color: #bec3c9;
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: #090a11;
+  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3);
+  --docsearch-footer-background: #1e2136;
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2);
+  --docsearch-muted-color: #7f8497;
+}
+
 .bd-search {
   position: relative;
 
@@ -139,3 +164,9 @@
   display: flex;
   align-items: center;
 }
+
+// Fix --docsearch-logo-color that doesn't do anything
+.DocSearch-Logo svg .cls-1,
+.DocSearch-Logo svg .cls-2 {
+  fill: var(--docsearch-logo-color);
+}
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index b3730ebef..9d3f82e12 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -18,8 +18,6 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
-  --docsearch-primary-color: var(--bd-violet);
-  --docsearch-logo-color: var(--bd-violet);
 
   --bd-violet-bg: var(--bd-violet);
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
-- 
cgit v1.2.3


From a9810ece616b45be77be1b5c7f54db9e25b23bca Mon Sep 17 00:00:00 2001
From: GeoSot 
Date: Thu, 29 Dec 2022 22:11:01 +0200
Subject: Use scrollspy on docs pages (#33428)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* use scrollspy on docs pages

* Update colors by taking into account new dark mode

* Restyle it

* Update colors once more

* Fix some color contrast issues

Co-authored-by: Julien Déramond 
Co-authored-by: Mark Otto 
---
 site/assets/scss/_syntax.scss    |  2 +-
 site/assets/scss/_toc.scss       | 27 +++++++++++++++++++--------
 site/assets/scss/_variables.scss |  3 ++-
 3 files changed, 22 insertions(+), 10 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 092307e05..5d5f10922 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -27,7 +27,7 @@
   --base05: #abb2bf;
   --base06: #b6bdca;
   --base07: #d19a66;
-  --base08: #e06c75;
+  --base08: #{$red-300};
   --base09: #d19a66;
   --base0A: #e5c07b;
   --base0B: #98c379;
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index ffa6a0c44..38915aaee 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
 
 .bd-toc {
   @include media-breakpoint-up(lg) {
@@ -16,23 +16,34 @@
     ul {
       padding-left: 0;
       margin-bottom: 0;
+      margin-left: -.75rem;
       list-style: none;
 
       ul {
         padding-left: 1rem;
-        margin-top: .25rem;
-      }
-    }
+        margin-left: -1rem;
 
-    li {
-      margin-bottom: .25rem;
+        a {
+          padding-left: 1.375rem;
+        }
+      }
     }
 
     a {
+      display: block;
+      padding: .125rem 0 .125rem .625rem;
       color: inherit;
+      text-decoration: none;
+      border-left: .125rem solid transparent;
+
+      &:hover,
+      &.active {
+        color: var(--bd-toc-color);
+        border-left-color: var(--bd-toc-color);
+      }
 
-      &:not(:hover) {
-        text-decoration: none;
+      &.active {
+        font-weight: 500;
       }
 
       code {
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 9d3f82e12..964a77394 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -18,13 +18,14 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-accent-rgb: #{to-rgb($bd-accent)};
   --bd-pink-rgb: #{to-rgb($pink-500)};
   --bd-teal-rgb: #{to-rgb($teal-500)};
-
   --bd-violet-bg: var(--bd-violet);
+  --bd-toc-color: var(--bd-violet);
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
 }
 
 @include color-mode(dark, true) {
   --bd-violet: #{mix($bd-violet, $white, 75%)};
   --bd-violet-bg: #{$bd-violet};
+  --bd-toc-color: var(--#{$prefix}emphasis-color);
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
 }
-- 
cgit v1.2.3


From fabe0741992494d13796e4c9c1b4f1f9f0ac5856 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 29 Dec 2022 12:11:40 -0800
Subject: Darken some text emphasis and syntax colors

---
 site/assets/scss/_callouts.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index 016a2ed24..a398dd957 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -3,6 +3,8 @@
 //
 
 .bd-callout {
+  --#{$prefix}link-color-rgb: #{to-rgb($blue-600)};
+
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-- 
cgit v1.2.3


From 1a043b55bcfe3b9b1f327fe78639b82321f38633 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Thu, 29 Dec 2022 21:38:42 +0100
Subject: Docs: enhance callouts links on dark mode

---
 site/assets/scss/_callouts.scss  | 2 +-
 site/assets/scss/_variables.scss | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index a398dd957..b39b947c4 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -3,7 +3,7 @@
 //
 
 .bd-callout {
-  --#{$prefix}link-color-rgb: #{to-rgb($blue-600)};
+  --#{$prefix}link-color-rgb: var(--bd-callout-link);
 
   padding: 1.25rem;
   margin-top: 1.25rem;
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 964a77394..6da6a4761 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -21,6 +21,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-violet-bg: var(--bd-violet);
   --bd-toc-color: var(--bd-violet);
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+  --bd-callout-link: #{to-rgb($blue-600)};
 }
 
 @include color-mode(dark, true) {
@@ -28,4 +29,5 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-violet-bg: #{$bd-violet};
   --bd-toc-color: var(--#{$prefix}emphasis-color);
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
+  --bd-callout-link: #{to-rgb($blue-300)};
 }
-- 
cgit v1.2.3


From 9e17b2b34cdec9dce063bba09b01aa9a63e7dd94 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 29 Dec 2022 14:19:22 -0800
Subject: Focus ring helper and utilities (#33125)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 

* 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 
Co-authored-by: Julien Déramond 
Co-authored-by: Patrick H. Lauke 
---
 site/assets/scss/_component-examples.scss | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 11800a638..99bc460c1 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -397,3 +397,8 @@
     margin-right: 0;
   }
 }
+
+.focused {
+  outline: 0;
+  box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
+}
-- 
cgit v1.2.3


From 2cc580e2d1e70d942965d54365db24fe6728ad00 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Mon, 2 Jan 2023 00:30:53 +0000
Subject: Docs: remove remnants of Twitter / bump dates (#37779)

---
 site/assets/js/application.js   | 3 +--
 site/assets/js/code-examples.js | 3 +--
 site/assets/js/snippets.js      | 3 +--
 site/assets/scss/docs.scss      | 2 +-
 4 files changed, 4 insertions(+), 7 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index dec23635d..6bb71f0c2 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -4,8 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
+ * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index edb13598f..555bd7b6f 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -4,8 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
+ * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 43b8a095c..a69b4bf64 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -6,8 +6,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
- * Copyright 2011-2022 Twitter, Inc.
+ * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 509cc33fd..9d71147a8 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -1,6 +1,6 @@
 /*!
  * Bootstrap Docs (https://getbootstrap.com/)
- * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2023 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
-- 
cgit v1.2.3


From d0b0fec4092ffe203adcccbe7892cdabef1b5a06 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 1 Jan 2023 22:23:58 -0800
Subject: Fix code color in callouts

---
 site/assets/scss/_callouts.scss  | 1 +
 site/assets/scss/_variables.scss | 2 ++
 2 files changed, 3 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index b39b947c4..591ac863a 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -4,6 +4,7 @@
 
 .bd-callout {
   --#{$prefix}link-color-rgb: var(--bd-callout-link);
+  --#{$prefix}code-color: var(--bd-callout-code-color);
 
   padding: 1.25rem;
   margin-top: 1.25rem;
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 6da6a4761..c85639018 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -22,6 +22,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-toc-color: var(--bd-violet);
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
   --bd-callout-link: #{to-rgb($blue-600)};
+  --bd-callout-code-color: #{$pink-600};
 }
 
 @include color-mode(dark, true) {
@@ -30,4 +31,5 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-toc-color: var(--#{$prefix}emphasis-color);
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
   --bd-callout-link: #{to-rgb($blue-300)};
+  --bd-callout-code-color: #{$pink-300};
 }
-- 
cgit v1.2.3


From 19d547be3d31bc96a163f56237dd372ba8994d35 Mon Sep 17 00:00:00 2001
From: AucT 
Date: Tue, 3 Jan 2023 08:06:09 +0200
Subject: fix live toast demo (#37590)

* fix live toast demo

* Fix live toast demo

* Update snippets.js

* Update toasts.md

* Update snippets.js

* Code review comments addressed

Co-authored-by: XhmikosR 
Co-authored-by: Mark Otto 
---
 site/assets/js/snippets.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index a69b4bf64..95fce2da8 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -19,7 +19,7 @@
   // --------
   // Tooltips
   // --------
-  // Instantiate all tooltips in a docs or StackBlitz page
+  // Instantiate all tooltips in a docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach(tooltip => {
       new bootstrap.Tooltip(tooltip)
@@ -28,7 +28,7 @@
   // --------
   // Popovers
   // --------
-  // Instantiate all popovers in a docs or StackBlitz page
+  // Instantiate all popovers in docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="popover"]')
     .forEach(popover => {
       new bootstrap.Popover(popover)
@@ -49,7 +49,7 @@
     })
   }
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
       const toast = new bootstrap.Toast(toastNode, {
@@ -59,14 +59,14 @@
       toast.show()
     })
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
+
   if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
-      const toast = new bootstrap.Toast(toastLiveExample)
-
-      toast.show()
+      toastBootstrap.show()
     })
   }
 
@@ -98,7 +98,7 @@
   // --------
   // Carousels
   // --------
-  // Instantiate all non-autoplaying carousels in a docs or StackBlitz page
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
   document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
     .forEach(carousel => {
       bootstrap.Carousel.getOrCreateInstance(carousel)
-- 
cgit v1.2.3


From 3ee2a7549553a81e1efc47af53a85f515cc3eaf9 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 2 Jan 2023 11:31:28 -0800
Subject: Use Bootstrap colors in syntax highlighting

---
 site/assets/scss/_clipboard-js.scss       |  2 +-
 site/assets/scss/_component-examples.scss |  4 +--
 site/assets/scss/_syntax.scss             | 46 +++++++++++++++----------------
 site/assets/scss/_variables.scss          |  2 ++
 4 files changed, 28 insertions(+), 26 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 1e0003bcb..6bf42db64 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -23,7 +23,7 @@
   padding: .5em;
   line-height: 1;
   color: var(--bs-body-color);
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
   border: 0;
   @include border-radius(.25rem);
 
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 99bc460c1..cde77a2c9 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -344,7 +344,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -388,7 +388,7 @@
 }
 
 .highlight-toolbar {
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bd-pre-bg);
   border: solid var(--bs-border-color);
   border-width: 1px 0;
 
diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 5d5f10922..0cc26d76b 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,40 +1,40 @@
 :root,
 [data-bs-theme="light"] {
-  --base00: #fff;
-  --base01: #f5f5f5;
+  // --base00: #fff;
+  // --base01: #f5f5f5;
   --base02: #c8c8fa;
   --base03: #565c64;
-  --base04: #030303;
+  --base04: #666;
   --base05: #333;
   --base06: #fff;
-  --base07: #9a6700;
-  --base08: #bc4c00;
-  --base09: #087990;
-  --base0A: #795da3;
-  --base0B: #183691;
-  --base0C: #183691;
-  --base0D: #795da3;
-  --base0E: #a71d5d;
+  --base07: #{$teal-700}; // #9a6700
+  --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
+  --base09: #{$cyan-700}; // #087990
+  --base0A: #{$purple-500}; // #795da3
+  --base0B: #{$blue-700}; // #183691
+  --base0C: #{$blue-700}; // #183691
+  --base0D: #{$purple-500}; // #795da3
+  --base0E: #{$pink-600}; // #a71d5d
   --base0F: #333;
 }
 
 @include color-mode(dark, true) {
-  --base00: #282c34;
-  --base01: #353b45;
+  // --base00: #282c34;
+  // --base01: #353b45;
   --base02: #3e4451;
   --base03: #868e96;
-  --base04: #565c64;
+  --base04: #868e96;
   --base05: #abb2bf;
   --base06: #b6bdca;
-  --base07: #d19a66;
-  --base08: #{$red-300};
-  --base09: #d19a66;
-  --base0A: #e5c07b;
-  --base0B: #98c379;
-  --base0C: #56b6c2;
-  --base0D: #61afef;
-  --base0E: #c678dd;
-  --base0F: #be5046;
+  --base07: #{$orange-300}; // #d19a66
+  --base08: #{$cyan-300};
+  --base09: #{$orange-300}; // #d19a66
+  --base0A: #{$yellow-200}; // #e5c07b
+  --base0B: #{$teal-300}; // #98c379
+  --base0C: #{$teal-300}; // #56b6c2
+  --base0D: #{$blue-300}; // #61afef
+  --base0E: #{$indigo-200}; // #c678dd
+  --base0F: #{$red-300}; // #be5046
 }
 
 .hl { background-color: var(--base02); }
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index c85639018..2be534994 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -23,6 +23,7 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
   --bd-callout-link: #{to-rgb($blue-600)};
   --bd-callout-code-color: #{$pink-600};
+  --bd-pre-bg: var(--bs-tertiary-bg);
 }
 
 @include color-mode(dark, true) {
@@ -32,4 +33,5 @@ $bd-callout-variants: info, warning, danger !default;
   --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
   --bd-callout-link: #{to-rgb($blue-300)};
   --bd-callout-code-color: #{$pink-300};
+  --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
 }
-- 
cgit v1.2.3


From da1c96896572512f128354b28e159e8d1c393bdd Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 3 Jan 2023 19:28:26 -0800
Subject: Remove dark mode --bs-heading-color value, set to null, and add
 custom styles for the docs dark mode headings

---
 site/assets/scss/_content.scss | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 14d27b2fd..14b8b93fe 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -9,6 +9,12 @@
     margin-top: -5rem;
   }
 
+  > h2,
+  > h3,
+  > h4 {
+    --#{$prefix}heading-color: #fff;
+  }
+
   > h2:not(:first-child) {
     margin-top: 3rem;
   }
@@ -102,6 +108,7 @@
 }
 
 .bd-title {
+  --#{$prefix}heading-color: #fff;
   @include font-size(3rem);
 }
 
-- 
cgit v1.2.3


From d70b5db2e0aee9ea9a7255d28395278876bf53ba Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 3 Jan 2023 22:23:46 -0800
Subject: Add new link utilities, icon link helper, and update colored link
 helpers (#37762)

* Add new link utilities, update colored link helpers

* Remove commented out code

* Fixes

* Remove examples changes

* Fixes and copy

* Fix icon-link instances on homepage

* Bump bundlewatch

* Fix node-sass issue for rgba() function bug

* More bundlewatch

* One more time after merge

* Add callout for a11y

* Hover and focus-visible

* Add a11y callouts

* Remove duplicate for now

* More code review feedback
---
 site/assets/scss/_content.scss | 20 --------------------
 1 file changed, 20 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 14b8b93fe..126ec9f88 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -124,26 +124,6 @@
   fill: currentcolor;
 }
 
-.icon-link {
-  display: flex;
-  align-items: center;
-  text-decoration-color: rgba($primary, .5);
-  text-underline-offset: .5rem;
-  backface-visibility: hidden;
-
-  .bi {
-    width: 1.5em;
-    height: 1.5em;
-    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
-  }
-
-  &:hover {
-    .bi {
-      transform: translate3d(5px, 0, 0);
-    }
-  }
-}
-
 .border-lg-start {
   @include media-breakpoint-up(lg) {
     border-left: var(--bs-border-width) solid var(--bs-border-color);
-- 
cgit v1.2.3


From 803d9d405c9d1d79f4810725668bdf2f2614ded2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Wed, 4 Jan 2023 17:47:31 +0100
Subject: Docs: fix headings color in light/dark mode (#37802)

---
 site/assets/scss/_content.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 126ec9f88..9eca80464 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -12,7 +12,7 @@
   > h2,
   > h3,
   > h4 {
-    --#{$prefix}heading-color: #fff;
+    --bs-heading-color: var(--bs-emphasis-color);
   }
 
   > h2:not(:first-child) {
@@ -108,7 +108,7 @@
 }
 
 .bd-title {
-  --#{$prefix}heading-color: #fff;
+  --bs-heading-color: var(--bs-emphasis-color);
   @include font-size(3rem);
 }
 
-- 
cgit v1.2.3


From 1b83ab24fcd14a7ca413c732eebf04193a644c8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Thu, 5 Jan 2023 21:33:06 +0100
Subject: Docs: remove some CSS from `.highlight-toolbar` def

---
 site/assets/scss/_component-examples.scss | 7 -------
 1 file changed, 7 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index cde77a2c9..f47ca1ada 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -389,13 +389,6 @@
 
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
-  border: solid var(--bs-border-color);
-  border-width: 1px 0;
-
-  .btn-clipboard {
-    margin-top: 0;
-    margin-right: 0;
-  }
 }
 
 .focused {
-- 
cgit v1.2.3


From fd1ec97bd3fdc5b942f4fff60c6764e3e13db2a8 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton 
Date: Fri, 6 Jan 2023 04:59:59 +0100
Subject: Docs: Small enhancements (#37803)

* Consistency with the doc

* Bring a class to avoid weird behavior

* Consistency + Add some explaining text

* fix(color)
---
 site/assets/scss/_component-examples.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index f47ca1ada..eedacb449 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -314,8 +314,15 @@
   min-height: 15rem;
 
   > div {
-    background-color: tint-color($bd-violet, 75%);
-    border: 1px solid tint-color($bd-violet, 50%);
+    color: var(--bs-body-bg);
+    background-color: var(--bd-violet);
+    border: 1px solid var(--bd-purple);
+
+    > span {
+      position: absolute;
+      right: 5px;
+      bottom: 0;
+    }
   }
 
   > :nth-child(2) {
-- 
cgit v1.2.3


From 7399b130525374423e537f5f083d4e749607ed31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Fri, 6 Jan 2023 08:47:46 +0100
Subject: Docs: fix `.btn-clipboard` and `.btn-edit` link hover color

---
 site/assets/scss/_clipboard-js.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 6bf42db64..97b454e03 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -28,7 +28,7 @@
   @include border-radius(.25rem);
 
   &:hover {
-    color: var(--bs-link-color);
+    color: var(--bs-link-hover-color);
   }
 
   &:focus {
-- 
cgit v1.2.3


From 9042efd0f86dd571386f62bacc8738ac975517fc Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton 
Date: Tue, 17 Jan 2023 00:55:28 +0100
Subject: Deprecate the Sass var and remove any occurence of the `.text-muted`
 (#37890)

---
 site/assets/scss/_search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 3046d57db..ca1e5b060 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -44,7 +44,7 @@
 }
 
 .DocSearch-Container {
-  --docsearch-muted-color: #{$text-muted};
+  --docsearch-muted-color: var(--bs-secondary-color);
   --docsearch-hit-shadow: none;
 
   z-index: 2000; // Make sure to be over all components showcased in the documentation
-- 
cgit v1.2.3


From 779baab3698be49772086f2648b6c5079ffd6bef Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 16 Jan 2023 16:56:50 -0800
Subject: Small color mode docs CSS fixes (#37896)

* SImplify background gradient syntax

* Move inline style to CSS file
---
 site/assets/scss/_navbar.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 9f1f4e71a..5a1c529ca 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -9,7 +9,7 @@
     z-index: -1;
     display: block;
     content: "";
-    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
   }
 
   .bd-navbar-toggle {
@@ -116,6 +116,10 @@
       }
     }
   }
+
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
 }
 
 @include color-mode(dark) {
-- 
cgit v1.2.3


From 20ab8219a0caca784483e93083cde269055d0f3a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 16 Jan 2023 18:57:24 -0800
Subject: Sass docs updates (#37897)

* Add maps

* Redesign scss-docs rendering

* Update other CSS sections

* Fix linter
---
 site/assets/scss/_component-examples.scss | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index eedacb449..6c6cc677f 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -380,6 +380,7 @@
 
   .highlight {
     margin-bottom: 0;
+    @include border-top-radius(0);
   }
 
   .bd-example {
@@ -398,6 +399,12 @@
   background-color: var(--bd-pre-bg);
 }
 
+.bd-scss-docs {
+  .highlight-toolbar {
+    @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+  }
+}
+
 .focused {
   outline: 0;
   box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
-- 
cgit v1.2.3


From 16aff741ecf47b2ce682b625c1a6ab3ae80f8256 Mon Sep 17 00:00:00 2001
From: louismaximepiton 
Date: Tue, 17 Jan 2023 09:54:54 +0100
Subject: Proposal

---
 site/assets/scss/_component-examples.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 6c6cc677f..25385cf8e 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -134,7 +134,7 @@
   background-color: rgba(var(--bd-violet-rgb), .15);
 }
 
-.bd-example-flex div {
+.bd-example-flex div:not(.vr) {
   background-color: rgba(var(--bd-violet-rgb), .15);
   border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
-- 
cgit v1.2.3


From 82391bc7b7c41e40f6223b7cfac48c5c3ae56255 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 25 Jan 2023 18:11:22 -0800
Subject: Theme color improvements (#37953)

* Use tint-color() and shade-color() functions to generate new color mode adaptive theme values

* More consistent shading

* Fix callouts use of emphasis variables

* Use tint and shade functions on link and code colors for dark mode
---
 site/assets/scss/_callouts.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index 591ac863a..c3e5629a8 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -33,7 +33,7 @@
 // Variations
 @each $variant in $bd-callout-variants {
   .bd-callout-#{$variant} {
-    --bd-callout-color: var(--bs-#{$variant}-text);
+    --bd-callout-color: var(--bs-#{$variant}-text-emphasis);
     --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
     --bd-callout-border: var(--bs-#{$variant}-border-subtle);
   }
-- 
cgit v1.2.3


From 9f5dca077751ff4abc2361d13766a4ed18ee04fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Sat, 11 Feb 2023 08:04:09 +0100
Subject: Remove `debug` references from DocSearch v2 (#38032)

---
 site/assets/js/search.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/search.js b/site/assets/js/search.js
index 9bad2749f..b095d3bbd 100644
--- a/site/assets/js/search.js
+++ b/site/assets/js/search.js
@@ -40,8 +40,6 @@
 
         return item
       })
-    },
-    // Set debug to `true` if you want to inspect the dropdown
-    debug: false
+    }
   })
 })()
-- 
cgit v1.2.3


From d0fece932072872eb0e6aa688849f80465cfe6b6 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 21 Jan 2023 22:55:38 +0000
Subject: Docs: add scroll-margin-top for keyboard navigation

---
 site/assets/scss/_scrolling.scss | 5 +++++
 site/assets/scss/docs.scss       | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 site/assets/scss/_scrolling.scss

(limited to 'site/assets')

diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
new file mode 100644
index 000000000..dcd9f3d39
--- /dev/null
+++ b/site/assets/scss/_scrolling.scss
@@ -0,0 +1,5 @@
+// When navigating with the keyboard, prevent focus from landing behind the sticky header
+
+main *:focus {
+  scroll-margin-top: 100px;
+}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 9d71147a8..fb85262e7 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
+@import "scrolling";
 
 // Load docs dependencies
 @import "syntax";
-- 
cgit v1.2.3


From 9dd42e1a07cba04d52050f47d9a343416d72b8c0 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 14 Feb 2023 08:58:08 -0800
Subject: Attempt to fix focus ring being cut off in table of contents (#37965)

* Attempt to fix focus ring being cut off in table of contents

* Update _toc.scss

---------

Co-authored-by: Patrick H. Lauke 
---
 site/assets/scss/_toc.scss | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 38915aaee..32bf3cf62 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 
 .bd-toc {
   @include media-breakpoint-up(lg) {
@@ -16,22 +16,16 @@
     ul {
       padding-left: 0;
       margin-bottom: 0;
-      margin-left: -.75rem;
       list-style: none;
 
       ul {
         padding-left: 1rem;
-        margin-left: -1rem;
-
-        a {
-          padding-left: 1.375rem;
-        }
       }
     }
 
     a {
       display: block;
-      padding: .125rem 0 .125rem .625rem;
+      padding: .125rem 0 .125rem .75rem;
       color: inherit;
       text-decoration: none;
       border-left: .125rem solid transparent;
@@ -86,7 +80,7 @@
 .bd-toc-collapse {
   @include media-breakpoint-down(md) {
     nav {
-      padding: 1.25rem;
+      padding: 1.25rem 1.25rem 1.25rem 1rem;
       background-color: var(--bs-tertiary-bg);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));
-- 
cgit v1.2.3


From 6b4b77e32052c28b9c338e813d4b44dc893c922d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Sat, 25 Feb 2023 18:18:04 +0100
Subject: Docs: Drop unused `.focused` style (#38087)

---
 site/assets/scss/_component-examples.scss | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 25385cf8e..bc75559aa 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -404,8 +404,3 @@
     @include border-top-radius(calc(var(--bs-border-radius) + 1px));
   }
 }
-
-.focused {
-  outline: 0;
-  box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
-}
-- 
cgit v1.2.3


From d5f4532b3eb0c1ae2c904bb58c488bc3da44b8f3 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Sat, 4 Mar 2023 20:05:54 +0000
Subject: Docs: fix overflow:auto horizontal scrollbars covering last line of
 code 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 
---
 site/assets/scss/_clipboard-js.scss       |  2 +-
 site/assets/scss/_component-examples.scss |  7 ++++---
 site/assets/scss/_masthead.scss           | 10 +++++++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss
index 97b454e03..de709d09b 100644
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -39,6 +39,6 @@
 .btn-clipboard {
   position: relative;
   z-index: 2;
-  margin-top: .75rem;
+  margin-top: 1.25rem;
   margin-right: .75rem;
 }
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index bc75559aa..14adbe94d 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -359,10 +359,11 @@
   }
 
   pre {
-    padding: 0;
-    margin-top: .625rem;
+    padding: .25rem 0 .875rem;
+    margin-top: .8125rem;
     margin-right: 1.875rem;
-    margin-bottom: .625rem;
+    margin-bottom: 0;
+    overflow: overlay;
     white-space: pre;
     background-color: transparent;
     border: 0;
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index d39f640ae..4ca5068bc 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -36,10 +36,18 @@
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;
     }
+
+    pre {
+      padding: 0;
+      margin-top: .625rem;
+      margin-right: 1.875rem;
+      margin-bottom: .625rem;
+      overflow: hidden;
+    }
   }
   .btn-clipboard {
     position: absolute;
-    top: -.125rem;
+    top: -.625rem;
     right: 0;
     background-color: transparent;
   }
-- 
cgit v1.2.3


From 1f7e7ebd1033aa50ba39fdd66b2fb48b8540a05d Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" 
Date: Wed, 8 Mar 2023 14:51:49 +0100
Subject: Better use the CSS

---
 site/assets/scss/_scrolling.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
index dcd9f3d39..84db8809a 100644
--- a/site/assets/scss/_scrolling.scss
+++ b/site/assets/scss/_scrolling.scss
@@ -1,5 +1,10 @@
 // When navigating with the keyboard, prevent focus from landing behind the sticky header
 
-main *:focus {
-  scroll-margin-top: 100px;
+main {
+  a,
+  button,
+  [tabindex="0"] {
+    scroll-margin-top: 100px;
+    scroll-margin-bottom: 100px;
+  }
 }
-- 
cgit v1.2.3


From c400653990959d1f136382cbcc38babaae23117e Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Wed, 15 Mar 2023 06:30:45 +0200
Subject: Tweak stylelint config (#38228)

* rename to .stylelintrc.json
* add reportInvalidScopeDisables to config
* move reportNeedlessDisables to config
* merge the two configs
* remove unneeded disabled rules from the examples config
---
 site/assets/scss/_variables.scss | 2 --
 site/assets/scss/docs.scss       | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 2be534994..3770e81d8 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -1,5 +1,3 @@
-// stylelint-disable scss/dollar-variable-default
-
 // Local docs variables
 $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index fb85262e7..4ab417e96 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -28,8 +28,8 @@
 @import "../../../scss/mixins";
 
 // fusv-disable
-$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
-$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
+$enable-grid-classes: false;
+$enable-cssgrid: true;
 // fusv-enable
 @import "../../../scss/grid";
 
-- 
cgit v1.2.3


From adf7b8dc4083b6ddc318e466dbb5d87f3af0ce17 Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Wed, 15 Mar 2023 06:40:58 +0200
Subject: Docs: use core mixins in a couple of places (#38236)

---
 site/assets/scss/_masthead.scss  | 2 +-
 site/assets/scss/_navbar.scss    | 2 +-
 site/assets/scss/_variables.scss | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 4ca5068bc..b42d8c54e 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -99,7 +99,7 @@
 
 .animate-img {
   > img {
-    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+    @include transition(transform .2s ease-in-out);
   }
 
   &:hover > img {
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 5a1c529ca..110797b98 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -39,7 +39,7 @@
 
   .navbar-brand {
     color: $white;
-    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
+    @include transition(transform .2s ease-in-out);
 
     &:hover {
       transform: rotate(-5deg) scale(1.1);
diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss
index 3770e81d8..5e8ab5d6c 100644
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -2,7 +2,7 @@
 $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
-$bd-accent:       #ffe484;
+$bd-accent:        #ffe484;
 
 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
-- 
cgit v1.2.3


From 2d0c94c05a8d338b1644a49820747d0cf72621ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Mon, 20 Mar 2023 00:57:35 +0100
Subject: Docs: make all headings use `var(--bs-emphasis-color)` (#38262)

---
 site/assets/scss/_masthead.scss | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index b42d8c54e..33015d681 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -10,6 +10,7 @@
   // stylelint-enable
 
   h1 {
+    --bs-heading-color: var(--bs-emphasis-color);
     @include font-size(4rem);
   }
 
@@ -64,6 +65,12 @@
 }
 
 .masthead-followup {
+  h2,
+  h3,
+  h4 {
+    --bs-heading-color: var(--bs-emphasis-color);
+  }
+
   .lead {
     @include font-size(1rem);
   }
-- 
cgit v1.2.3


From a6d8aa827d645796cf986e289b7311360318a21f Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton 
Date: Mon, 20 Mar 2023 01:45:46 +0100
Subject: Proposal to use `scroll-margin-top` instead of introducing padding
 and negative margin (#38220)

---
 site/assets/scss/_content.scss   | 5 -----
 site/assets/scss/_scrolling.scss | 5 ++++-
 2 files changed, 4 insertions(+), 6 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 9eca80464..3ca1dc3b2 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -4,11 +4,6 @@
 
 .bd-content {
   // Offset content from fixed navbar when jumping to headings
-  > :target {
-    padding-top: 5rem;
-    margin-top: -5rem;
-  }
-
   > h2,
   > h3,
   > h4 {
diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
index 84db8809a..201796003 100644
--- a/site/assets/scss/_scrolling.scss
+++ b/site/assets/scss/_scrolling.scss
@@ -3,8 +3,11 @@
 main {
   a,
   button,
+  h2,
+  h3,
+  h4,
   [tabindex="0"] {
-    scroll-margin-top: 100px;
+    scroll-margin-top: 80px;
     scroll-margin-bottom: 100px;
   }
 }
-- 
cgit v1.2.3


From aadfe7edce1a7ad3fa102eccb4d561466de9cb9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Thu, 23 Mar 2023 13:31:24 +0100
Subject: Fix comment position in `assets/scss/_content.scss` (#38281)

---
 site/assets/scss/_content.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 3ca1dc3b2..ba053dfaf 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -3,13 +3,13 @@
 //
 
 .bd-content {
-  // Offset content from fixed navbar when jumping to headings
   > h2,
   > h3,
   > h4 {
     --bs-heading-color: var(--bs-emphasis-color);
   }
 
+  // Offset content from fixed navbar when jumping to headings
   > h2:not(:first-child) {
     margin-top: 3rem;
   }
-- 
cgit v1.2.3


From 1729bcca1b3a842829c9a64fe1f34fdd53465189 Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Mon, 27 Mar 2023 11:04:52 +0300
Subject: docs: remove trailing newline when copying snippets (#38321)

---
 site/assets/js/code-examples.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index 555bd7b6f..f224500f4 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -13,6 +13,7 @@
 
 (() => {
   'use strict'
+
   // Insert copy to clipboard button before .highlight
   const btnTitle = 'Copy to clipboard'
   const btnEdit = 'Edit on StackBlitz'
@@ -27,7 +28,7 @@
     ''
   ].join('')
 
-  // wrap programmatically code blocks and add copy btn.
+  // Wrap programmatically code blocks and add copy btn.
   document.querySelectorAll('.highlight')
     .forEach(element => {
       if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
@@ -51,7 +52,8 @@
   snippetButtonTooltip('.btn-edit', btnEdit)
 
   const clipboard = new ClipboardJS('.btn-clipboard', {
-    target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight')
+    target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
+    text: trigger => trigger.parentNode.nextElementSibling.textContent.trimEnd()
   })
 
   clipboard.on('success', event => {
-- 
cgit v1.2.3


From 06f7c3b6c73580cd05b131bdab4d156a864d418c Mon Sep 17 00:00:00 2001
From: Hannah Issermann 
Date: Mon, 27 Mar 2023 11:10:25 +0200
Subject: Add js-docs shortcode to ensure consistency between doc and js code
 (#38316)

Co-authored-by: XhmikosR 
---
 site/assets/js/snippets.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 95fce2da8..66c7a005c 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -60,6 +60,7 @@
     })
 
   // Instantiate all toasts in docs pages only
+  // js-docs-start live-toast
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
 
@@ -69,14 +70,15 @@
       toastBootstrap.show()
     })
   }
+  // js-docs-end live-toast
 
   // -------------------------------
   // Alerts
   // -------------------------------
-  // Used in 'Show live toast' example in docs or StackBlitz
-  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
-  const alertTrigger = document.getElementById('liveAlertBtn')
+  // Used in 'Show live alert' example in docs or StackBlitz
 
+  // js-docs-start live-alert
+  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
   const appendAlert = (message, type) => {
     const wrapper = document.createElement('div')
     wrapper.innerHTML = [
@@ -89,11 +91,13 @@
     alertPlaceholder.append(wrapper)
   }
 
+  const alertTrigger = document.getElementById('liveAlertBtn')
   if (alertTrigger) {
     alertTrigger.addEventListener('click', () => {
       appendAlert('Nice, you triggered this alert message!', 'success')
     })
   }
+  // js-docs-end live-alert
 
   // --------
   // Carousels
@@ -130,6 +134,7 @@
   // Modal
   // -------------------------------
   // Modal 'Varying modal content' example in docs and StackBlitz
+  // js-docs-start varying-modal-content
   const exampleModal = document.getElementById('exampleModal')
   if (exampleModal) {
     exampleModal.addEventListener('show.bs.modal', event => {
@@ -137,6 +142,8 @@
       const button = event.relatedTarget
       // Extract info from data-bs-* attributes
       const recipient = button.getAttribute('data-bs-whatever')
+      // If necessary, you could initiate an Ajax request here
+      // and then do the updating in a callback.
 
       // Update the modal's content.
       const modalTitle = exampleModal.querySelector('.modal-title')
@@ -146,6 +153,7 @@
       modalBodyInput.value = recipient
     })
   }
+  // js-docs-end varying-modal-content
 
   // -------------------------------
   // Offcanvas
-- 
cgit v1.2.3


From 74c6f2bcfb1ca3391c2134e4e3425409b1c11939 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Thu, 30 Mar 2023 14:03:48 +0100
Subject: Fix clipboard code (#38380)

---
 site/assets/js/code-examples.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index f224500f4..e1f680e7e 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -53,7 +53,7 @@
 
   const clipboard = new ClipboardJS('.btn-clipboard', {
     target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
-    text: trigger => trigger.parentNode.nextElementSibling.textContent.trimEnd()
+    text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd()
   })
 
   clipboard.on('success', event => {
-- 
cgit v1.2.3


From 8986c5e0a56c41f56cdded2549bc5ecbfa0d4c44 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 9 Apr 2023 11:48:53 -0700
Subject: Fix colors in diff syntax colors

---
 site/assets/scss/_syntax.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss
index 0cc26d76b..38ac11fb8 100644
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -35,6 +35,13 @@
   --base0D: #{$blue-300}; // #61afef
   --base0E: #{$indigo-200}; // #c678dd
   --base0F: #{$red-300}; // #be5046
+
+  .language-diff .gd {
+    color: $red-400;
+  }
+  .language-diff .gi {
+    color: $green-400;
+  }
 }
 
 .hl { background-color: var(--base02); }
@@ -53,7 +60,7 @@
 .ge { font-style: italic; }
 .gh {
   font-weight: 600;
-  color: #fff;
+  color: var(--base0A);
 }
 .gi { color: var(--bs-success); }
 .gp {
-- 
cgit v1.2.3


From fdd306f48100304b09ffd525a4d0cd3f524e0693 Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Tue, 11 Apr 2023 11:44:19 +0300
Subject: Update devDependencies (#38437)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update devDependencies

* @babel/preset-env                 ^7.20.2  →  ^7.21.4
* @rollup/plugin-node-resolve       ^15.0.1  →  ^15.0.2
* eslint                            ^8.37.0  →  ^8.38.0
* rtlcss                             ^4.0.0  →   ^4.1.0
* sass                              ^1.60.0  →  ^1.61.0
* stylelint                        ^14.16.1  →  ^15.4.0
* stylelint-config-twbs-bootstrap    ^7.0.0  →   ^9.0.1
* vnu-jar                           22.9.29  →  23.4.11

* Fix the new Stylelint issues
---
 site/assets/scss/_colors.scss | 2 --
 1 file changed, 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index a71a8973b..652a7f2d3 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -40,8 +40,6 @@
   }
 }
 
-// stylelint-disable declaration-block-single-line-max-declarations
-
 .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
 .bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
 .bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
-- 
cgit v1.2.3


From 6182c0d96249344ba0288d175bead275c3ec42dd Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 26 Apr 2023 15:57:27 -0700
Subject: Add new docsref page, fix docs border-radius issues (#38491)

* 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 
---
 site/assets/js/application.js             |  5 +--
 site/assets/scss/_component-examples.scss | 58 +++++++++++++------------------
 site/assets/scss/_masthead.scss           |  9 ++---
 3 files changed, 31 insertions(+), 41 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 6bb71f0c2..712b31a23 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -14,9 +14,10 @@
 
   // Scroll the active sidebar link into view
   const sidenav = document.querySelector('.bd-sidebar')
-  if (sidenav) {
+  const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
+
+  if (sidenav && sidenavActiveLink) {
     const sidenavHeight = sidenav.clientHeight
-    const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
     const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
     const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
     const viewportTop = sidenavActiveLinkTop
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 14adbe94d..0f1018b06 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -2,12 +2,16 @@
 // Docs examples
 //
 
-.bd-example-snippet {
+.bd-code-snippet {
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color);
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
+    margin-right: 0;
+    margin-left: 0;
     border-width: 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 }
 
@@ -16,7 +20,7 @@
 
   position: relative;
   padding: var(--bd-example-padding);
-  margin: 0 ($bd-gutter-x * -.5);
+  margin: 0 ($bd-gutter-x * -.5) 1rem;
   border: solid var(--bs-border-color);
   border-width: 1px 0;
   @include clearfix();
@@ -27,13 +31,7 @@
     margin-right: 0;
     margin-left: 0;
     border-width: 1px;
-    @include border-top-radius(var(--bs-border-radius));
-  }
-
-  + .bd-code-snippet {
-    @include border-top-radius(0);
-    border: solid var(--bs-border-color);
-    border-width: 0 1px 1px;
+    @include border-radius(var(--bs-border-radius));
   }
 
   + p {
@@ -350,18 +348,22 @@
 .highlight {
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
-  margin-bottom: 1rem;
   background-color: var(--bd-pre-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
-    @include border-radius(var(--bs-border-radius));
+    @include border-radius(calc(var(--bs-border-radius) - 1px));
+  }
+
+  @include media-breakpoint-up(lg) {
+    pre {
+      margin-right: 1.875rem;
+    }
   }
 
   pre {
     padding: .25rem 0 .875rem;
     margin-top: .8125rem;
-    margin-right: 1.875rem;
     margin-bottom: 0;
     overflow: overlay;
     white-space: pre;
@@ -376,32 +378,22 @@
   }
 }
 
-.bd-code-snippet {
-  margin: 0 ($bd-gutter-x * -.5) $spacer;
+.highlight-toolbar {
+  background-color: var(--bd-pre-bg);
 
-  .highlight {
-    margin-bottom: 0;
+  + .highlight {
     @include border-top-radius(0);
   }
-
-  .bd-example {
-    margin: 0;
-    border: 0;
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: 0;
-    @include border-radius($border-radius);
-  }
 }
 
-.highlight-toolbar {
-  background-color: var(--bd-pre-bg);
-}
-
-.bd-scss-docs {
+.bd-file-ref {
   .highlight-toolbar {
-    @include border-top-radius(calc(var(--bs-border-radius) + 1px));
+    @include media-breakpoint-up(md) {
+      @include border-top-radius(calc(var(--bs-border-radius) - 1px));
+    }
   }
 }
+
+.bd-content .bd-code-snippet {
+  margin-bottom: 1rem;
+}
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 33015d681..aa7d16070 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -22,6 +22,8 @@
 
   .bd-code-snippet {
     margin: 0;
+    border-color: var(--bs-border-color-translucent);
+    border-width: 1px;
     @include border-radius(.5rem);
   }
 
@@ -32,7 +34,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     background-color: rgba(var(--bs-body-color-rgb), .075);
-    @include border-radius(.5rem);
+    @include border-radius(calc(.5rem - 1px));
 
     @include media-breakpoint-up(lg) {
       padding-right: 4rem;
@@ -41,7 +43,6 @@
     pre {
       padding: 0;
       margin-top: .625rem;
-      margin-right: 1.875rem;
       margin-bottom: .625rem;
       overflow: hidden;
     }
@@ -75,10 +76,6 @@
     @include font-size(1rem);
   }
 
-  .highlight {
-    @include border-radius(.5rem);
-  }
-
   @include media-breakpoint-up(md) {
     .lead {
       @include font-size(1.25rem);
-- 
cgit v1.2.3


From 27954217168f5293391a7f672bec69d5b27ca4dd Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 27 Apr 2023 18:32:56 -0700
Subject: Fix sizing on masthead npm i snippet (#38521)

---
 site/assets/scss/_masthead.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index aa7d16070..d74d1ec24 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -42,8 +42,7 @@
 
     pre {
       padding: 0;
-      margin-top: .625rem;
-      margin-bottom: .625rem;
+      margin: .625rem 0;
       overflow: hidden;
     }
   }
-- 
cgit v1.2.3


From 896c390a25544c34c3d332c86cbcef457596e82f Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Mon, 1 May 2023 00:40:57 +0300
Subject: Update devDependencies (#38537)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* @babel/cli                       ^7.21.0  →  ^7.21.5
* @babel/core                      ^7.21.4  →  ^7.21.5
* @babel/preset-env                ^7.21.4  →  ^7.21.5
* find-unused-sass-variables        ^4.0.8  →   ^5.0.0
* rollup                           ^3.21.0  →  ^3.21.2
* stylelint-config-twbs-bootstrap   ^9.0.1  →  ^10.0.0
---
 site/assets/scss/_colors.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 652a7f2d3..da4bbace1 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -40,6 +40,7 @@
   }
 }
 
+// stylelint-disable declaration-block-single-line-max-declarations
 .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
 .bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
 .bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
-- 
cgit v1.2.3


From c5f46b020c797ff72b36b7be098310156cbf0aac Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Wed, 31 May 2023 07:36:19 +0300
Subject: Update code-examples.js (#38675)

---
 site/assets/js/code-examples.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index e1f680e7e..3b03b17c4 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -20,18 +20,19 @@
 
   const btnHtml = [
     '
',
-    '   
',
-    '      ',
-    '   
',
+    '  
',
+    '    ',
+    '  
',
     '
'
   ].join('')
 
   // Wrap programmatically code blocks and add copy btn.
   document.querySelectorAll('.highlight')
     .forEach(element => {
-      if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
+      // Ignore examples made by shortcode
+      if (!element.closest('.bd-example-snippet')) {
         element.insertAdjacentHTML('beforebegin', btnHtml)
         element.previousElementSibling.append(element)
       }
-- 
cgit v1.2.3


From 6e49236541b65b65752cf8547b791c8dff44ed3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Wed, 31 May 2023 12:38:04 +0200
Subject: Docs: consistency between custom buttons, popovers and tooltips

---
 site/assets/scss/_component-examples.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 0f1018b06..1d8caed66 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -220,15 +220,16 @@
 
 // scss-docs-start custom-tooltip
 .custom-tooltip {
-  --bs-tooltip-bg: var(--bs-primary);
+  --bs-tooltip-bg: var(--bd-violet-bg);
+  --bs-tooltip-color: var(--bs-white);
 }
 // scss-docs-end custom-tooltip
 
 // scss-docs-start custom-popovers
 .custom-popover {
   --bs-popover-max-width: 200px;
-  --bs-popover-border-color: var(--bs-primary);
-  --bs-popover-header-bg: var(--bs-primary);
+  --bs-popover-border-color: var(--bd-violet-bg);
+  --bs-popover-header-bg: var(--bd-violet-bg);
   --bs-popover-header-color: var(--bs-white);
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: .5rem;
-- 
cgit v1.2.3


From 78b4e5d2d6d9543769ed53ab29df34855c8d75ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Thu, 27 Jul 2023 23:00:17 +0200
Subject: Use box-shadow CSS vars instead of Sass vars in assets and variables

---
 site/assets/scss/_navbar.scss  | 2 +-
 site/assets/scss/_sidebar.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 110797b98..2b598bf67 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -73,7 +73,7 @@
     border-left: 0;
 
     @include media-breakpoint-down(lg) {
-      box-shadow: $box-shadow-lg;
+      box-shadow: var(--bs-box-shadow-lg);
     }
   }
 
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 6f1ef292f..598da3d5b 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -15,7 +15,7 @@
   @include media-breakpoint-down(lg) {
     .offcanvas-lg {
       border-right-color: var(--bs-border-color);
-      box-shadow: $box-shadow-lg;
+      box-shadow: var(--bs-box-shadow-lg);
     }
   }
 }
-- 
cgit v1.2.3


From 4a7dfa404f1363087b9d0e3ad88cd4f5b7504b83 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" 
Date: Fri, 28 Jul 2023 10:01:53 +0200
Subject: Add form elements in focusable elements when scrolling

---
 site/assets/scss/_scrolling.scss | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_scrolling.scss b/site/assets/scss/_scrolling.scss
index 201796003..0aaf7444e 100644
--- a/site/assets/scss/_scrolling.scss
+++ b/site/assets/scss/_scrolling.scss
@@ -3,6 +3,9 @@
 main {
   a,
   button,
+  input,
+  select,
+  textarea,
   h2,
   h3,
   h4,
-- 
cgit v1.2.3


From 323f9d6f687ab148da4ad074e0eddef8ab3b132b Mon Sep 17 00:00:00 2001
From: Christian Oliff 
Date: Thu, 5 Oct 2023 19:03:42 +0900
Subject: Docs: fix unnecessary right-margin for example code blocks (#39246)

---
 site/assets/scss/_component-examples.scss | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 1d8caed66..fde8b7f41 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -379,6 +379,10 @@
   }
 }
 
+.bd-example-snippet .highlight pre {
+  margin-right: 0;
+}
+
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
 
-- 
cgit v1.2.3


From 52cc9342cb5df6b13ea421deb75477a73419745b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Mon, 5 Feb 2024 21:39:38 +0100
Subject: Bump copyright year to 2024

---
 site/assets/js/application.js   | 2 +-
 site/assets/js/code-examples.js | 2 +-
 site/assets/js/snippets.js      | 2 +-
 site/assets/scss/docs.scss      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 712b31a23..a16defbd4 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -4,7 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
index 3b03b17c4..3462da59b 100644
--- a/site/assets/js/code-examples.js
+++ b/site/assets/js/code-examples.js
@@ -4,7 +4,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 66c7a005c..94d8f6dee 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -6,7 +6,7 @@
 
 /*!
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 4ab417e96..0eb5bdde3 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -1,6 +1,6 @@
 /*!
  * Bootstrap Docs (https://getbootstrap.com/)
- * Copyright 2011-2023 The Bootstrap Authors
+ * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
-- 
cgit v1.2.3


From f545964f8f7446a889b9226d865807d58b7fb8cb Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton 
Date: Fri, 8 Mar 2024 09:04:12 +0100
Subject: Docs: fix position of search modal to avoid interface blocking at
 small breakpoints (#39739)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond 
---
 site/assets/scss/_search.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'site/assets')

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index ca1e5b060..592d65f98 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -47,6 +47,7 @@
   --docsearch-muted-color: var(--bs-secondary-color);
   --docsearch-hit-shadow: none;
 
+  position: fixed;
   z-index: 2000; // Make sure to be over all components showcased in the documentation
   cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
 
-- 
cgit v1.2.3


From 24f749cb768b7d7830ed9bc7b3b38d35dbbccffd Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Fri, 8 Mar 2024 12:43:44 +0200
Subject: docs: bundle assets with Hugo

Also:

* load any docs' third-party dependencies from node_modules (except for examples)
* exclude docsearch from layouts that don't use it
* preconnect to algolia only when not examples layout
* switch to `RelPermalink`
* refactor JS assets into partials
---
 site/assets/js/application.js            |  26 ++---
 site/assets/js/code-examples.js          |  90 ----------------
 site/assets/js/partials/code-examples.js |  90 ++++++++++++++++
 site/assets/js/partials/sidebar.js       |  30 ++++++
 site/assets/js/partials/snippets.js      | 168 ++++++++++++++++++++++++++++++
 site/assets/js/search.js                 |  15 ++-
 site/assets/js/snippets.js               | 169 ++-----------------------------
 site/assets/js/stackblitz.js             |  67 ++++++++++++
 site/assets/js/vendor/clipboard.min.js   |   7 --
 site/assets/scss/_search.scss            |   2 +
 10 files changed, 383 insertions(+), 281 deletions(-)
 delete mode 100644 site/assets/js/code-examples.js
 create mode 100644 site/assets/js/partials/code-examples.js
 create mode 100644 site/assets/js/partials/sidebar.js
 create mode 100644 site/assets/js/partials/snippets.js
 create mode 100644 site/assets/js/stackblitz.js
 delete mode 100644 site/assets/js/vendor/clipboard.min.js

(limited to 'site/assets')

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index a16defbd4..ef706ed4d 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -9,22 +9,12 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-(() => {
-  'use strict'
+/* eslint-disable import/no-unresolved */
+import sidebarScroll from 'js/partials/sidebar.js'
+import codeExamples from 'js/partials/code-examples.js'
+import snippets from 'js/partials/snippets.js'
+/* eslint-enable import/no-unresolved */
 
-  // Scroll the active sidebar link into view
-  const sidenav = document.querySelector('.bd-sidebar')
-  const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
-
-  if (sidenav && sidenavActiveLink) {
-    const sidenavHeight = sidenav.clientHeight
-    const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
-    const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
-    const viewportTop = sidenavActiveLinkTop
-    const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
-
-    if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
-      sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
-    }
-  }
-})()
+sidebarScroll()
+codeExamples()
+snippets()
diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js
deleted file mode 100644
index 3462da59b..000000000
--- a/site/assets/js/code-examples.js
+++ /dev/null
@@ -1,90 +0,0 @@
-// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
-// IT'S ALL JUST JUNK FOR OUR DOCS!
-// ++++++++++++++++++++++++++++++++++++++++++
-
-/*!
- * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
- * Copyright 2011-2024 The Bootstrap Authors
- * Licensed under the Creative Commons Attribution 3.0 Unported License.
- * For details, see https://creativecommons.org/licenses/by/3.0/.
- */
-
-/* global ClipboardJS: false, bootstrap: false */
-
-(() => {
-  'use strict'
-
-  // Insert copy to clipboard button before .highlight
-  const btnTitle = 'Copy to clipboard'
-  const btnEdit = 'Edit on StackBlitz'
-
-  const btnHtml = [
-    '
',
-    '  
',
-    '    ',
-    '  
',
-    '
'
-  ].join('')
-
-  // Wrap programmatically code blocks and add copy btn.
-  document.querySelectorAll('.highlight')
-    .forEach(element => {
-      // Ignore examples made by shortcode
-      if (!element.closest('.bd-example-snippet')) {
-        element.insertAdjacentHTML('beforebegin', btnHtml)
-        element.previousElementSibling.append(element)
-      }
-    })
-
-  /**
-   *
-   * @param {string} selector
-   * @param {string} title
-   */
-  function snippetButtonTooltip(selector, title) {
-    document.querySelectorAll(selector).forEach(btn => {
-      bootstrap.Tooltip.getOrCreateInstance(btn, { title })
-    })
-  }
-
-  snippetButtonTooltip('.btn-clipboard', btnTitle)
-  snippetButtonTooltip('.btn-edit', btnEdit)
-
-  const clipboard = new ClipboardJS('.btn-clipboard', {
-    target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
-    text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd()
-  })
-
-  clipboard.on('success', event => {
-    const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-    const namespace = 'http://www.w3.org/1999/xlink'
-    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
-    const originalTitle = event.trigger.title
-
-    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
-    event.trigger.addEventListener('hidden.bs.tooltip', () => {
-      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
-    }, { once: true })
-    event.clearSelection()
-    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
-
-    setTimeout(() => {
-      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
-      event.trigger.title = originalTitle
-    }, 2000)
-  })
-
-  clipboard.on('error', event => {
-    const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
-    const fallbackMsg = `Press ${modifierKey}C to copy`
-    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
-
-    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
-    event.trigger.addEventListener('hidden.bs.tooltip', () => {
-      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
-    }, { once: true })
-  })
-})()
diff --git a/site/assets/js/partials/code-examples.js b/site/assets/js/partials/code-examples.js
new file mode 100644
index 000000000..d81191a96
--- /dev/null
+++ b/site/assets/js/partials/code-examples.js
@@ -0,0 +1,90 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global bootstrap: false */
+
+import ClipboardJS from 'clipboard'
+
+export default () => {
+  // Insert copy to clipboard button before .highlight
+  const btnTitle = 'Copy to clipboard'
+  const btnEdit = 'Edit on StackBlitz'
+
+  const btnHtml = [
+    '
',
+    '  
',
+    '    ',
+    '  
',
+    '
'
+  ].join('')
+
+  // Wrap programmatically code blocks and add copy btn.
+  document.querySelectorAll('.highlight')
+    .forEach(element => {
+      // Ignore examples made by shortcode
+      if (!element.closest('.bd-example-snippet')) {
+        element.insertAdjacentHTML('beforebegin', btnHtml)
+        element.previousElementSibling.append(element)
+      }
+    })
+
+  /**
+   *
+   * @param {string} selector
+   * @param {string} title
+   */
+  function snippetButtonTooltip(selector, title) {
+    document.querySelectorAll(selector).forEach(btn => {
+      bootstrap.Tooltip.getOrCreateInstance(btn, { title })
+    })
+  }
+
+  snippetButtonTooltip('.btn-clipboard', btnTitle)
+  snippetButtonTooltip('.btn-edit', btnEdit)
+
+  const clipboard = new ClipboardJS('.btn-clipboard', {
+    target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'),
+    text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd()
+  })
+
+  clipboard.on('success', event => {
+    const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
+    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+    const namespace = 'http://www.w3.org/1999/xlink'
+    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
+    const originalTitle = event.trigger.title
+
+    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
+    event.trigger.addEventListener('hidden.bs.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
+    }, { once: true })
+    event.clearSelection()
+    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
+
+    setTimeout(() => {
+      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
+      event.trigger.title = originalTitle
+    }, 2000)
+  })
+
+  clipboard.on('error', event => {
+    const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+    const fallbackMsg = `Press ${modifierKey}C to copy`
+    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
+
+    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
+    event.trigger.addEventListener('hidden.bs.tooltip', () => {
+      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
+    }, { once: true })
+  })
+}
diff --git a/site/assets/js/partials/sidebar.js b/site/assets/js/partials/sidebar.js
new file mode 100644
index 000000000..c43f41481
--- /dev/null
+++ b/site/assets/js/partials/sidebar.js
@@ -0,0 +1,30 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+export default () => {
+  // Scroll the active sidebar link into view
+  const sidenav = document.querySelector('.bd-sidebar')
+  const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
+
+  if (!sidenav || !sidenavActiveLink) {
+    return
+  }
+
+  const sidenavHeight = sidenav.clientHeight
+  const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
+  const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
+  const viewportTop = sidenavActiveLinkTop
+  const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
+
+  if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
+    sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
+  }
+}
diff --git a/site/assets/js/partials/snippets.js b/site/assets/js/partials/snippets.js
new file mode 100644
index 000000000..1771612cf
--- /dev/null
+++ b/site/assets/js/partials/snippets.js
@@ -0,0 +1,168 @@
+// NOTICE!!! Initially embedded in our docs this JavaScript
+// file contains elements that can help you create reproducible
+// use cases in StackBlitz for instance.
+// In a real project please adapt this content to your needs.
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global bootstrap: false */
+
+export default () => {
+  // --------
+  // Tooltips
+  // --------
+  // Instantiate all tooltips in a docs or StackBlitz
+  document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach(tooltip => {
+      new bootstrap.Tooltip(tooltip)
+    })
+
+  // --------
+  // Popovers
+  // --------
+  // Instantiate all popovers in docs or StackBlitz
+  document.querySelectorAll('[data-bs-toggle="popover"]')
+    .forEach(popover => {
+      new bootstrap.Popover(popover)
+    })
+
+  // -------------------------------
+  // Toasts
+  // -------------------------------
+  // Used by 'Placement' example in docs or StackBlitz
+  const toastPlacement = document.getElementById('toastPlacement')
+  if (toastPlacement) {
+    document.getElementById('selectToastPlacement').addEventListener('change', function () {
+      if (!toastPlacement.dataset.originalClass) {
+        toastPlacement.dataset.originalClass = toastPlacement.className
+      }
+
+      toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
+    })
+  }
+
+  // Instantiate all toasts in docs pages only
+  document.querySelectorAll('.bd-example .toast')
+    .forEach(toastNode => {
+      const toast = new bootstrap.Toast(toastNode, {
+        autohide: false
+      })
+
+      toast.show()
+    })
+
+  // Instantiate all toasts in docs pages only
+  // js-docs-start live-toast
+  const toastTrigger = document.getElementById('liveToastBtn')
+  const toastLiveExample = document.getElementById('liveToast')
+
+  if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
+    toastTrigger.addEventListener('click', () => {
+      toastBootstrap.show()
+    })
+  }
+  // js-docs-end live-toast
+
+  // -------------------------------
+  // Alerts
+  // -------------------------------
+  // Used in 'Show live alert' example in docs or StackBlitz
+
+  // js-docs-start live-alert
+  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+  const appendAlert = (message, type) => {
+    const wrapper = document.createElement('div')
+    wrapper.innerHTML = [
+      `'
+    ].join('')
+
+    alertPlaceholder.append(wrapper)
+  }
+
+  const alertTrigger = document.getElementById('liveAlertBtn')
+  if (alertTrigger) {
+    alertTrigger.addEventListener('click', () => {
+      appendAlert('Nice, you triggered this alert message!', 'success')
+    })
+  }
+  // js-docs-end live-alert
+
+  // --------
+  // Carousels
+  // --------
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
+  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
+    .forEach(carousel => {
+      bootstrap.Carousel.getOrCreateInstance(carousel)
+    })
+
+  // -------------------------------
+  // Checks & Radios
+  // -------------------------------
+  // Indeterminate checkbox example in docs and StackBlitz
+  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
+    .forEach(checkbox => {
+      if (checkbox.id.includes('Indeterminate')) {
+        checkbox.indeterminate = true
+      }
+    })
+
+  // -------------------------------
+  // Links
+  // -------------------------------
+  // Disable empty links in docs examples only
+  document.querySelectorAll('.bd-content [href="#"]')
+    .forEach(link => {
+      link.addEventListener('click', event => {
+        event.preventDefault()
+      })
+    })
+
+  // -------------------------------
+  // Modal
+  // -------------------------------
+  // Modal 'Varying modal content' example in docs and StackBlitz
+  // js-docs-start varying-modal-content
+  const exampleModal = document.getElementById('exampleModal')
+  if (exampleModal) {
+    exampleModal.addEventListener('show.bs.modal', event => {
+      // Button that triggered the modal
+      const button = event.relatedTarget
+      // Extract info from data-bs-* attributes
+      const recipient = button.getAttribute('data-bs-whatever')
+      // If necessary, you could initiate an Ajax request here
+      // and then do the updating in a callback.
+
+      // Update the modal's content.
+      const modalTitle = exampleModal.querySelector('.modal-title')
+      const modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+      modalTitle.textContent = `New message to ${recipient}`
+      modalBodyInput.value = recipient
+    })
+  }
+  // js-docs-end varying-modal-content
+
+  // -------------------------------
+  // Offcanvas
+  // -------------------------------
+  // 'Offcanvas components' example in docs only
+  const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
+  if (myOffcanvas) {
+    myOffcanvas.forEach(offcanvas => {
+      offcanvas.addEventListener('show.bs.offcanvas', event => {
+        event.preventDefault()
+      }, false)
+    })
+  }
+}
diff --git a/site/assets/js/search.js b/site/assets/js/search.js
index b095d3bbd..95d920c44 100644
--- a/site/assets/js/search.js
+++ b/site/assets/js/search.js
@@ -2,18 +2,25 @@
 // IT'S ALL JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++
 
-(() => {
-  'use strict'
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+import docsearch from '@docsearch/js'
 
+(() => {
   const searchElement = document.getElementById('docsearch')
 
-  if (!window.docsearch || !searchElement) {
+  if (!searchElement) {
     return
   }
 
   const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
 
-  window.docsearch({
+  docsearch({
     apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
     indexName: 'bootstrap',
     appId: 'AK7KMZKZHQ',
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 94d8f6dee..3fce5e437 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -1,170 +1,15 @@
-// NOTICE!!! Initially embedded in our docs this JavaScript
-// file contains elements that can help you create reproducible
-// use cases in StackBlitz for instance.
-// In a real project please adapt this content to your needs.
-// ++++++++++++++++++++++++++++++++++++++++++
-
-/*!
+/*
  * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
  * Copyright 2011-2024 The Bootstrap Authors
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global bootstrap: false */
-
-(() => {
-  'use strict'
-
-  // --------
-  // Tooltips
-  // --------
-  // Instantiate all tooltips in a docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    .forEach(tooltip => {
-      new bootstrap.Tooltip(tooltip)
-    })
-
-  // --------
-  // Popovers
-  // --------
-  // Instantiate all popovers in docs or StackBlitz
-  document.querySelectorAll('[data-bs-toggle="popover"]')
-    .forEach(popover => {
-      new bootstrap.Popover(popover)
-    })
-
-  // -------------------------------
-  // Toasts
-  // -------------------------------
-  // Used by 'Placement' example in docs or StackBlitz
-  const toastPlacement = document.getElementById('toastPlacement')
-  if (toastPlacement) {
-    document.getElementById('selectToastPlacement').addEventListener('change', function () {
-      if (!toastPlacement.dataset.originalClass) {
-        toastPlacement.dataset.originalClass = toastPlacement.className
-      }
-
-      toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
-    })
-  }
-
-  // Instantiate all toasts in docs pages only
-  document.querySelectorAll('.bd-example .toast')
-    .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
-
-      toast.show()
-    })
-
-  // Instantiate all toasts in docs pages only
-  // js-docs-start live-toast
-  const toastTrigger = document.getElementById('liveToastBtn')
-  const toastLiveExample = document.getElementById('liveToast')
-
-  if (toastTrigger) {
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
-    toastTrigger.addEventListener('click', () => {
-      toastBootstrap.show()
-    })
-  }
-  // js-docs-end live-toast
-
-  // -------------------------------
-  // Alerts
-  // -------------------------------
-  // Used in 'Show live alert' example in docs or StackBlitz
-
-  // js-docs-start live-alert
-  const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
-  const appendAlert = (message, type) => {
-    const wrapper = document.createElement('div')
-    wrapper.innerHTML = [
-      `'
-    ].join('')
-
-    alertPlaceholder.append(wrapper)
-  }
-
-  const alertTrigger = document.getElementById('liveAlertBtn')
-  if (alertTrigger) {
-    alertTrigger.addEventListener('click', () => {
-      appendAlert('Nice, you triggered this alert message!', 'success')
-    })
-  }
-  // js-docs-end live-alert
-
-  // --------
-  // Carousels
-  // --------
-  // Instantiate all non-autoplaying carousels in docs or StackBlitz
-  document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
-    .forEach(carousel => {
-      bootstrap.Carousel.getOrCreateInstance(carousel)
-    })
-
-  // -------------------------------
-  // Checks & Radios
-  // -------------------------------
-  // Indeterminate checkbox example in docs and StackBlitz
-  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
-    .forEach(checkbox => {
-      if (checkbox.id.includes('Indeterminate')) {
-        checkbox.indeterminate = true
-      }
-    })
-
-  // -------------------------------
-  // Links
-  // -------------------------------
-  // Disable empty links in docs examples only
-  document.querySelectorAll('.bd-content [href="#"]')
-    .forEach(link => {
-      link.addEventListener('click', event => {
-        event.preventDefault()
-      })
-    })
-
-  // -------------------------------
-  // Modal
-  // -------------------------------
-  // Modal 'Varying modal content' example in docs and StackBlitz
-  // js-docs-start varying-modal-content
-  const exampleModal = document.getElementById('exampleModal')
-  if (exampleModal) {
-    exampleModal.addEventListener('show.bs.modal', event => {
-      // Button that triggered the modal
-      const button = event.relatedTarget
-      // Extract info from data-bs-* attributes
-      const recipient = button.getAttribute('data-bs-whatever')
-      // If necessary, you could initiate an Ajax request here
-      // and then do the updating in a callback.
-
-      // Update the modal's content.
-      const modalTitle = exampleModal.querySelector('.modal-title')
-      const modalBodyInput = exampleModal.querySelector('.modal-body input')
+// Note that this file is not published; we only include it in scrpts.html
+// for StackBlitz to work
 
-      modalTitle.textContent = `New message to ${recipient}`
-      modalBodyInput.value = recipient
-    })
-  }
-  // js-docs-end varying-modal-content
+/* eslint-disable import/no-unresolved */
+import snippets from 'js/partials/snippets.js'
+/* eslint-enable import/no-unresolved */
 
-  // -------------------------------
-  // Offcanvas
-  // -------------------------------
-  // 'Offcanvas components' example in docs only
-  const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas')
-  if (myOffcanvas) {
-    myOffcanvas.forEach(offcanvas => {
-      offcanvas.addEventListener('show.bs.offcanvas', event => {
-        event.preventDefault()
-      }, false)
-    })
-  }
-})()
+snippets()
diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js
new file mode 100644
index 000000000..c6f44b0f4
--- /dev/null
+++ b/site/assets/js/stackblitz.js
@@ -0,0 +1,67 @@
+// NOTICE!!! Initially embedded in our docs this JavaScript
+// file contains elements that can help you create reproducible
+// use cases in StackBlitz for instance.
+// In a real project please adapt this content to your needs.
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+import sdk from '@stackblitz/sdk'
+// https://gohugo.io/hugo-pipes/js/#options
+import {
+  cssCdn, docsVersion, jsBundleCdn, jsSnippetFile
+} from '@params' // eslint-disable-line import/no-unresolved
+
+// Open in StackBlitz logic
+document.querySelectorAll('.btn-edit').forEach(btn => {
+  btn.addEventListener('click', event => {
+    const codeSnippet = event.target.closest('.bd-code-snippet')
+    const exampleEl = codeSnippet.querySelector('.bd-example')
+
+    const htmlSnippet = exampleEl.innerHTML
+    const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
+    // Get extra classes for this example
+    const classes = Array.from(exampleEl.classList).join(' ')
+
+    sdk.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
+  })
+})
+
+sdk.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
+  const markup = `
+
+  
+    
+    
+    
+    
+    Bootstrap Example
+    <${'script'} src="${jsBundleCdn}">
+  
+  
+
+    
+${htmlSnippet.replace(/^/gm, '    ')}
+    
+  
+`
+
+  const jsSnippetContent = jsSnippet ? jsSnippetFile : null
+  const project = {
+    files: {
+      'index.html': markup,
+      'index.js': jsSnippetContent
+    },
+    title: 'Bootstrap Example',
+    description: `Official example from ${window.location.href}`,
+    template: jsSnippet ? 'javascript' : 'html',
+    tags: ['bootstrap']
+  }
+
+  sdk.openProject(project, { openFile: 'index.html' })
+}
diff --git a/site/assets/js/vendor/clipboard.min.js b/site/assets/js/vendor/clipboard.min.js
deleted file mode 100644
index 1103f811e..000000000
--- a/site/assets/js/vendor/clipboard.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/*!
- * clipboard.js v2.0.11
- * https://clipboardjs.com/
- *
- * Licensed MIT © Zeno Rocha
- */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={686:function(t,e,n){"use strict";n.d(e,{default:function(){return b}});var e=n(279),i=n.n(e),e=n(370),u=n.n(e),e=n(817),r=n.n(e);function c(t){try{return document.execCommand(t)}catch(t){return}}var a=function(t){t=r()(t);return c("cut"),t};function o(t,e){var n,o,t=(n=t,o="rtl"===document.documentElement.getAttribute("dir"),(t=document.createElement("textarea")).style.fontSize="12pt",t.style.border="0",t.style.padding="0",t.style.margin="0",t.style.position="absolute",t.style[o?"right":"left"]="-9999px",o=window.pageYOffset||document.documentElement.scrollTop,t.style.top="".concat(o,"px"),t.setAttribute("readonly",""),t.value=n,t);return e.container.appendChild(t),e=r()(t),c("copy"),t.remove(),e}var f=function(t){var e=1
Date: Wed, 2 Aug 2023 10:38:19 +0300
Subject: docs: improve stackblitz.js

* tweak indentation
* stop extending the sdk object
* conditionally add `index.js`
---
 site/assets/js/stackblitz.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js
index c6f44b0f4..54eca3e21 100644
--- a/site/assets/js/stackblitz.js
+++ b/site/assets/js/stackblitz.js
@@ -28,12 +28,12 @@ document.querySelectorAll('.btn-edit').forEach(btn => {
     // Get extra classes for this example
     const classes = Array.from(exampleEl.classList).join(' ')
 
-    sdk.openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
+    openBootstrapSnippet(htmlSnippet, jsSnippet, classes)
   })
 })
 
-sdk.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
-  const markup = `
+const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
+  const indexHtml = `
 
   
     
@@ -44,18 +44,17 @@ sdk.openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
     <${'script'} src="${jsBundleCdn}">
   
   
-
-    
-${htmlSnippet.replace(/^/gm, '    ')}
-    
+    
+${htmlSnippet.trimStart().replace(/^/gm, '    ').replace(/^ {4}$/gm, '').trimEnd()}
+    
   
-`
+
+`
 
-  const jsSnippetContent = jsSnippet ? jsSnippetFile : null
   const project = {
     files: {
-      'index.html': markup,
-      'index.js': jsSnippetContent
+      'index.html': indexHtml,
+      ...(jsSnippet && { 'index.js': jsSnippetFile })
     },
     title: 'Bootstrap Example',
     description: `Official example from ${window.location.href}`,
-- 
cgit v1.2.3


From 6922f5d9cb1e903877532f23214a4378aeaad909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Fri, 8 Mar 2024 12:55:18 +0200
Subject: docs: move search style to its own CSS file

---
 site/assets/scss/_search.scss |  2 --
 site/assets/scss/docs.scss    |  1 -
 site/assets/scss/search.scss  | 14 ++++++++++++++
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 site/assets/scss/search.scss

(limited to 'site/assets')

diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
index 4bd9d8072..592d65f98 100644
--- a/site/assets/scss/_search.scss
+++ b/site/assets/scss/_search.scss
@@ -1,7 +1,5 @@
 // stylelint-disable selector-class-pattern
 
-@import "@docsearch/css/dist/style";
-
 :root {
   --docsearch-primary-color: var(--bd-violet);
   --docsearch-logo-color: var(--bd-violet);
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 0eb5bdde3..af3817103 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -36,7 +36,6 @@ $enable-cssgrid: true;
 // Load docs components
 @import "variables";
 @import "navbar";
-@import "search";
 @import "masthead";
 @import "ads";
 @import "content";
diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss
new file mode 100644
index 000000000..149b23679
--- /dev/null
+++ b/site/assets/scss/search.scss
@@ -0,0 +1,14 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
+@import "variables";
+
+@import "@docsearch/css/dist/style";
+@import "search";
-- 
cgit v1.2.3


From 45fe28c5a6ed88d1a661355349aed799a79ed0fe Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Fri, 8 Mar 2024 12:53:43 +0200
Subject: docs: use defer when possible for JS

---
 site/assets/js/stackblitz.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js
index 54eca3e21..ff8262474 100644
--- a/site/assets/js/stackblitz.js
+++ b/site/assets/js/stackblitz.js
@@ -41,7 +41,7 @@ const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
     
     
     Bootstrap Example
-    <${'script'} src="${jsBundleCdn}">
+    <${'script'} defer src="${jsBundleCdn}">
   
   
     
-- 
cgit v1.2.3


From f7f0026e4af2fee210b664e145dfe55bd12b7deb Mon Sep 17 00:00:00 2001
From: XhmikosR 
Date: Wed, 13 Mar 2024 08:38:53 +0200
Subject: docs: move algolia config to hugo config

---
 site/assets/js/search.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/js/search.js b/site/assets/js/search.js
index 95d920c44..48047abc8 100644
--- a/site/assets/js/search.js
+++ b/site/assets/js/search.js
@@ -10,6 +10,9 @@
  */
 
 import docsearch from '@docsearch/js'
+// https://gohugo.io/hugo-pipes/js/#options
+// eslint-disable-next-line import/no-unresolved
+import { appId, apiKey, indexName } from '@params';
 
 (() => {
   const searchElement = document.getElementById('docsearch')
@@ -21,9 +24,9 @@ import docsearch from '@docsearch/js'
   const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
 
   docsearch({
-    apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
-    indexName: 'bootstrap',
-    appId: 'AK7KMZKZHQ',
+    apiKey,
+    indexName,
+    appId,
     container: searchElement,
     searchParameters: {
       facetFilters: [`version:${siteDocsVersion}`]
-- 
cgit v1.2.3


From 24cc552343c817b0d13201639c635a778d55da09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= 
Date: Tue, 26 Mar 2024 16:25:27 +0100
Subject: Fix typo in `site/assets/js/snippets.js` comments (#39840)

---
 site/assets/js/snippets.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'site/assets')

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 3fce5e437..82e11c345 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -5,7 +5,7 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-// Note that this file is not published; we only include it in scrpts.html
+// Note that this file is not published; we only include it in scripts.html
 // for StackBlitz to work
 
 /* eslint-disable import/no-unresolved */
-- 
cgit v1.2.3


From bb927451e813081e887397d0d604b45a676348fb Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 1 May 2024 14:57:03 +0300
Subject: Build(deps-dev): Bump stylelint from 16.3.1 to 16.4.0 (#39936)

* Build(deps-dev): Bump stylelint from 16.3.1 to 16.4.0

Bumps [stylelint](https://github.com/stylelint/stylelint) from 16.3.1 to 16.4.0.
- [Release notes](https://github.com/stylelint/stylelint/releases)
- [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/stylelint/stylelint/compare/16.3.1...16.4.0)

---
updated-dependencies:
- dependency-name: stylelint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] 

* Update _content.scss

---------

Signed-off-by: dependabot[bot] 
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: XhmikosR 
---
 site/assets/scss/_content.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'site/assets')

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index ba053dfaf..811883b49 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -73,9 +73,8 @@
     }
 
     // Prevent breaking of code
-    // stylelint-disable-next-line selector-max-compound-selectors
     th,
-    td:first-child > code {
+    td:first-child > code { // stylelint-disable-line selector-max-compound-selectors
       white-space: nowrap;
     }
   }
-- 
cgit v1.2.3