Update website

This commit is contained in:
Guilhem Lavaux 2024-11-19 08:02:04 +01:00
parent 4413528994
commit 1d90fbf296
6865 changed files with 1091082 additions and 0 deletions

View file

@ -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/.
*/
(() => {
'use strict'
// 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)
}
}
})()

View file

@ -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 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 = [
'<div class="bd-code-snippet">',
' <div class="bd-clipboard">',
' <button type="button" class="btn-clipboard">',
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
' </button>',
' </div>',
'</div>'
].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 })
})
})()

View file

@ -0,0 +1,45 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
(() => {
'use strict'
const searchElement = document.getElementById('docsearch')
if (!window.docsearch || !searchElement) {
return
}
const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
window.docsearch({
apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
indexName: 'bootstrap',
appId: 'AK7KMZKZHQ',
container: searchElement,
searchParameters: {
facetFilters: [`version:${siteDocsVersion}`]
},
transformItems(items) {
return items.map(item => {
const liveUrl = 'https://getbootstrap.com/'
item.url = window.location.origin.startsWith(liveUrl) ?
// On production, return the result as is
item.url :
// On development or Netlify, replace `item.url` with a trailing slash,
// so that the result link is relative to the server root
item.url.replace(liveUrl, '/')
// Prevent jumping to first header
if (item.anchor === 'content') {
item.url = item.url.replace(/#content$/, '')
item.anchor = null
}
return item
})
}
})
})()

View file

@ -0,0 +1,170 @@
// 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 = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].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)
})
}
})()

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,38 @@
// stylelint-disable declaration-no-important, selector-max-id
//
// Carbon ads
//
#carbonads {
position: static;
display: block;
max-width: 400px;
padding: 15px 15px 15px 160px;
margin: 2rem 0;
overflow: hidden;
@include font-size(.8125rem);
line-height: 1.4;
text-align: left;
background-color: var(--bs-tertiary-bg);
a {
color: var(--bs-body-color);
text-decoration: none;
}
@include media-breakpoint-up(sm) {
@include border-radius(.5rem);
}
}
.carbon-img {
float: left;
margin-left: -145px;
}
.carbon-poweredby {
display: block;
margin-top: .75rem;
color: var(--bs-body-color) !important;
}

View file

@ -0,0 +1,21 @@
.anchor-link {
padding: 0 .175rem;
font-weight: 400;
color: rgba($link-color, .5);
text-decoration: none;
opacity: 0;
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
&::after {
content: "#";
}
&:focus,
&:hover,
:hover > &,
:target > & {
color: $link-color;
text-decoration: none;
opacity: 1;
}
}

View file

@ -0,0 +1,60 @@
//
// Brand guidelines
//
// Logo series wrapper
.bd-brand-logos {
color: $bd-violet;
.inverse {
color: $white;
background-color: $bd-violet;
}
}
// Individual items
.bd-brand-item {
+ .bd-brand-item {
border-top: 1px solid var(--bs-border-color);
}
@include media-breakpoint-up(md) {
+ .bd-brand-item {
border-top: 0;
border-left: 1px solid var(--bs-border-color);
}
}
}
//
// Color swatches
//
.color-swatches {
margin: 0 -5px;
// Docs colors
.bd-purple {
background-color: $bd-purple;
}
.bd-purple-light {
background-color: $bd-purple-light;
}
.bd-purple-lighter {
background-color: #e5e1ea;
}
.bd-gray {
background-color: #f9f9f9;
}
}
.color-swatch {
width: 4rem;
height: 4rem;
@include media-breakpoint-up(md) {
width: 6rem;
height: 6rem;
}
}

View file

@ -0,0 +1,52 @@
// Buttons
//
// Custom buttons for the docs.
// scss-docs-start btn-css-vars-example
.btn-bd-primary {
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--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%)};
--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
.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);
--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 {
--btn-custom-color: #{mix($bd-violet, $white, 75%)};
--bs-btn-color: var(--bs-gray-600);
--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(--btn-custom-color);
--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;
}

View file

@ -0,0 +1,40 @@
//
// Callouts
//
.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;
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));
h4 {
margin-bottom: .25rem;
}
> :last-child {
margin-bottom: 0;
}
+ .bd-callout {
margin-top: -.25rem;
}
.highlight {
background-color: rgba($black, .05);
}
}
// Variations
@each $variant in $bd-callout-variants {
.bd-callout-#{$variant} {
--bd-callout-color: var(--bs-#{$variant}-text-emphasis);
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
--bd-callout-border: var(--bs-#{$variant}-border-subtle);
}
}

View file

@ -0,0 +1,44 @@
// clipboard.js
//
// JS-based `Copy` buttons for code snippets.
.bd-clipboard,
.bd-edit {
position: relative;
display: none;
float: right;
+ .highlight {
margin-top: 0;
}
@include media-breakpoint-up(md) {
display: block;
}
}
.btn-clipboard,
.btn-edit {
display: block;
padding: .5em;
line-height: 1;
color: var(--bs-body-color);
background-color: var(--bd-pre-bg);
border: 0;
@include border-radius(.25rem);
&:hover {
color: var(--bs-link-hover-color);
}
&:focus {
z-index: 3;
}
}
.btn-clipboard {
position: relative;
z-index: 2;
margin-top: 1.25rem;
margin-right: .75rem;
}

View file

@ -0,0 +1,155 @@
//
// Docs color palette classes
//
@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
.swatch-#{$color} {
color: color-contrast($value);
background-color: #{$value};
&::after {
$contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
$against-white: "#{contrast-ratio($value, $white)}";
$against-black: "#{contrast-ratio($value, $black)}";
position: absolute;
top: 1rem;
right: 1rem;
padding-left: 1rem;
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content:
str-slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4);
background-color: $value;
background-image:
linear-gradient(
to bottom,
transparent .25rem,
color-contrast($value) .25rem .75rem,
transparent .75rem 1.25rem,
$white 1.25rem 1.75rem,
transparent 1.75rem 2.25rem,
$black 2.25rem 2.75rem,
transparent 2.75rem
);
background-repeat: no-repeat;
background-size: .5rem 100%;
}
}
}
// 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; }
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
.bd-white { color: color-contrast($white); background-color: $white; }
.bd-black { color: color-contrast($black); background-color: $black; }

View file

@ -0,0 +1,404 @@
//
// Docs examples
//
.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));
}
}
.bd-example {
--bd-example-padding: 1rem;
position: relative;
padding: var(--bd-example-padding);
margin: 0 ($bd-gutter-x * -.5) 1rem;
border: solid var(--bs-border-color);
border-width: 1px 0;
@include clearfix();
@include media-breakpoint-up(md) {
--bd-example-padding: 1.5rem;
margin-right: 0;
margin-left: 0;
border-width: 1px;
@include border-radius(var(--bs-border-radius));
}
+ p {
margin-top: 2rem;
}
> .form-control {
+ .form-control {
margin-top: .5rem;
}
}
> .nav + .nav,
> .alert + .alert,
> .navbar + .navbar,
> .progress + .progress {
margin-top: $spacer;
}
> .dropdown-menu {
position: static;
display: block;
}
> :last-child,
> nav:last-child .breadcrumb {
margin-bottom: 0;
}
> hr:last-child {
margin-bottom: $spacer;
}
// Images
> svg + svg,
> img + img {
margin-left: .5rem;
}
// Buttons
> .btn,
> .btn-group {
margin: .25rem .125rem;
}
> .btn-toolbar + .btn-toolbar {
margin-top: .5rem;
}
// List groups
> .list-group {
max-width: 400px;
}
> [class*="list-group-horizontal"] {
max-width: 100%;
}
// Navbars
.fixed-top,
.sticky-top {
position: static;
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: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
}
// Pagination
.pagination {
margin-bottom: 0;
}
}
//
// Grid examples
//
.bd-example-row [class^="col"],
.bd-example-cols [class^="col"] > *,
.bd-example-cssgrid [class*="grid"] > * {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(var(--bd-violet-rgb), .15);
border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
.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(var(--bd-violet-rgb), .15);
}
.bd-example-flex div:not(.vr) {
background-color: rgba(var(--bd-violet-rgb), .15);
border: 1px solid rgba(var(--bd-violet-rgb), .3);
}
// 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);
}
}
// Ratio helpers
.bd-example-ratios {
.ratio {
display: inline-block;
width: 10rem;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
> div {
display: flex;
align-items: center;
justify-content: center;
}
}
}
.bd-example-ratios-breakpoint {
.ratio-4x3 {
width: 16rem;
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
}
.bd-example-offcanvas {
.offcanvas {
position: static;
display: block;
height: 200px;
visibility: visible;
transform: translate(0);
}
}
// Tooltips
.tooltip-demo {
a {
white-space: nowrap;
}
.btn {
margin: .25rem .125rem;
}
}
// scss-docs-start custom-tooltip
.custom-tooltip {
--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(--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;
}
// scss-docs-end custom-popovers
// Scrollspy demo on fixed height div
.scrollspy-example {
height: 200px;
margin-top: .5rem;
overflow: auto;
}
.scrollspy-example-2 {
height: 350px;
overflow: auto;
}
.simple-list-example-scrollspy {
.active {
background-color: rgba(var(--bd-violet-rgb), .15);
}
}
.bd-example-border-utils {
[class^="border"] {
display: inline-block;
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: var(--bs-tertiary-bg);
}
}
.bd-example-rounded-utils {
[class*="rounded"] {
margin: .25rem;
}
}
.bd-example-position-utils {
position: relative;
padding: 2rem;
.position-relative {
height: 200px;
background-color: var(--bs-tertiary-bg);
}
.position-absolute {
width: 2rem;
height: 2rem;
background-color: var(--bs-body-color);
@include border-radius();
}
}
.bd-example-position-examples {
&::after {
content: none;
}
}
// Placeholders
.bd-example-placeholder-cards {
&::after {
display: none;
}
.card {
width: 18rem;
}
}
// Toasts
.bd-example-toasts {
min-height: 240px;
}
.bd-example-zindex-levels {
min-height: 15rem;
> div {
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) {
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
//
.highlight {
position: relative;
padding: .75rem ($bd-gutter-x * .5);
background-color: var(--bd-pre-bg);
@include media-breakpoint-up(md) {
padding: .75rem 1.25rem;
@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-bottom: 0;
overflow: overlay;
white-space: pre;
background-color: transparent;
border: 0;
}
pre code {
@include font-size(inherit);
color: var(--bs-body-color); // Effectively the base text color
word-wrap: normal;
}
}
.bd-example-snippet .highlight pre {
margin-right: 0;
}
.highlight-toolbar {
background-color: var(--bd-pre-bg);
+ .highlight {
@include border-top-radius(0);
}
}
.bd-file-ref {
.highlight-toolbar {
@include media-breakpoint-up(md) {
@include border-top-radius(calc(var(--bs-border-radius) - 1px));
}
}
}
.bd-content .bd-code-snippet {
margin-bottom: 1rem;
}

View file

@ -0,0 +1,163 @@
//
// Bootstrap docs content theming
//
.bd-content {
> 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;
}
> h3 {
margin-top: 2rem;
}
> ul li,
> ol li {
margin-bottom: .25rem;
// stylelint-disable selector-max-type, selector-max-compound-selectors
> p ~ ul {
margin-top: -.5rem;
margin-bottom: 1rem;
}
// stylelint-enable selector-max-type, selector-max-compound-selectors
}
// 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);
@include media-breakpoint-down(lg) {
&.table-bordered {
border: 0;
}
}
thead {
border-bottom: 2px solid currentcolor;
}
tbody:not(:first-child) {
border-top: 2px solid currentcolor;
}
th,
td {
&:first-child {
padding-left: 0;
}
&:not(:last-child) {
padding-right: 1.5rem;
}
}
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,
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;
}
.table-swatches {
th {
color: var(--bs-emphasis-color);
}
td code {
white-space: nowrap;
}
}
.bd-title {
--bs-heading-color: var(--bs-emphasis-color);
@include font-size(3rem);
}
.bd-lead {
@include font-size(1.5rem);
font-weight: 300;
}
.bi {
width: 1em;
height: 1em;
vertical-align: -.125em;
fill: currentcolor;
}
.border-lg-start {
@include media-breakpoint-up(lg) {
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

View file

@ -0,0 +1,16 @@
//
// Footer
//
.bd-footer {
a {
color: var(--bs-body-color);
text-decoration: none;
&:hover,
&:focus {
color: var(--bs-link-hover-color);
text-decoration: underline;
}
}
}

View file

@ -0,0 +1,57 @@
.bd-gutter {
--bs-gutter-x: #{$bd-gutter-x};
}
.bd-layout {
@include media-breakpoint-up(lg) {
display: grid;
grid-template-areas: "sidebar main";
grid-template-columns: 1fr 5fr;
gap: $grid-gutter-width;
}
}
.bd-sidebar {
grid-area: sidebar;
}
.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:
"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-rows: auto 1fr;
grid-template-columns: 4fr 1fr;
}
}
.bd-intro {
grid-area: intro;
}
.bd-toc {
grid-area: toc;
}
.bd-content {
grid-area: content;
min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
}

View file

@ -0,0 +1,119 @@
.bd-masthead {
--bd-pink-rgb: #{to-rgb($pink)};
padding: 3rem 0;
// 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 {
--bs-heading-color: var(--bs-emphasis-color);
@include font-size(4rem);
}
.lead {
@include font-size(1rem);
font-weight: 400;
color: var(--bs-secondary-color);
}
.bd-code-snippet {
margin: 0;
border-color: var(--bs-border-color-translucent);
border-width: 1px;
@include border-radius(.5rem);
}
.highlight {
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(calc(.5rem - 1px));
@include media-breakpoint-up(lg) {
padding-right: 4rem;
}
pre {
padding: 0;
margin: .625rem 0;
overflow: hidden;
}
}
.btn-clipboard {
position: absolute;
top: -.625rem;
right: 0;
background-color: transparent;
}
#carbonads { // stylelint-disable-line selector-max-id
margin-inline: auto;
}
@include media-breakpoint-up(md) {
.lead {
@include font-size(1.5rem);
}
}
}
.masthead-followup {
h2,
h3,
h4 {
--bs-heading-color: var(--bs-emphasis-color);
}
.lead {
@include font-size(1rem);
}
@include media-breakpoint-up(md) {
.lead {
@include font-size(1.25rem);
}
}
}
.masthead-followup-icon {
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 var(--bs-body-bg));
}
}
.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);
}
.animate-img {
> img {
@include transition(transform .2s ease-in-out);
}
&:hover > img {
transform: scale(1.1);
}
}
@if $enable-dark-mode {
[data-bs-theme="dark"] {
.masthead-followup-icon {
mix-blend-mode: lighten;
}
}
}

View file

@ -0,0 +1,129 @@
.bd-navbar {
padding: .75rem 0;
background-color: transparent;
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(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
}
.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
width: 4.25rem;
}
}
.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-brand {
color: $white;
@include transition(transform .2s ease-in-out);
&:hover {
transform: rotate(-5deg) scale(1.1);
}
}
.navbar-toggler,
.nav-link {
padding-right: $spacer * .25;
padding-left: $spacer * .25;
color: rgba($white, .85);
&:hover,
&:focus {
color: $white;
}
&.active {
font-weight: 600;
color: $white;
}
}
.navbar-nav-svg {
display: inline-block;
vertical-align: -.125rem;
}
.offcanvas-lg {
background-color: var(--bd-violet-bg);
border-left: 0;
@include media-breakpoint-down(lg) {
box-shadow: var(--bs-box-shadow-lg);
}
}
.dropdown-toggle {
&:focus:not(:focus-visible) {
outline: 0;
}
}
.dropdown-menu {
--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-menu-end {
--bs-dropdown-min-width: 8rem;
}
}
@include color-mode(dark) {
.bd-navbar {
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
}
}

View file

@ -0,0 +1,15 @@
//
// Placeholder svg used in the docs.
//
// Remember to update `site/_layouts/examples.html` too if this changes!
.bd-placeholder-img {
@include font-size(1.125rem);
user-select: none;
text-anchor: middle;
}
.bd-placeholder-img-lg {
@include font-size(3.5rem);
}

View file

@ -0,0 +1,16 @@
// When navigating with the keyboard, prevent focus from landing behind the sticky header
main {
a,
button,
input,
select,
textarea,
h2,
h3,
h4,
[tabindex="0"] {
scroll-margin-top: 80px;
scroll-margin-bottom: 100px;
}
}

View file

@ -0,0 +1,172 @@
// 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;
@include media-breakpoint-up(lg) {
position: absolute;
top: .875rem;
left: 50%;
width: 200px;
margin-left: -100px;
}
@include media-breakpoint-up(xl) {
width: 280px;
margin-left: -140px;
}
}
.DocSearch-Container {
--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
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;
}
}
.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%;
height: 38px; // Match Bootstrap inputs
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;
}
}
@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 {
min-width: 0;
padding: .125rem .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;
}
// Fix --docsearch-logo-color that doesn't do anything
.DocSearch-Logo svg .cls-1,
.DocSearch-Logo svg .cls-2 {
fill: var(--docsearch-logo-color);
}

View file

@ -0,0 +1,64 @@
.bd-sidebar {
@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, 6rem);
// Prevent focus styles to be cut off:
padding-left: .25rem;
margin-left: -.25rem;
overflow-y: auto;
}
@include media-breakpoint-down(lg) {
.offcanvas-lg {
border-right-color: var(--bs-border-color);
box-shadow: var(--bs-box-shadow-lg);
}
}
}
.bd-links-heading {
color: var(--bs-emphasis-color);
}
.bd-links-nav {
@include media-breakpoint-down(lg) {
font-size: .875rem;
}
@include media-breakpoint-between(xs, lg) {
column-count: 2;
column-gap: 1.5rem;
.bd-links-group {
break-inside: avoid;
}
.bd-links-span-all {
column-span: all;
}
}
}
.bd-links-link {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.125rem;
color: var(--bs-body-color);
text-decoration: if($link-decoration == none, null, none);
&:hover,
&:focus,
&.active {
color: var(--bs-emphasis-color);
text-decoration: if($link-hover-decoration == underline, none, null);
background-color: var(--bd-sidebar-link-bg);
}
&.active {
font-weight: 600;
}
}

View file

@ -0,0 +1,7 @@
.skippy {
background-color: $bd-purple;
a {
color: $white;
}
}

View file

@ -0,0 +1,142 @@
:root,
[data-bs-theme="light"] {
// --base00: #fff;
// --base01: #f5f5f5;
--base02: #c8c8fa;
--base03: #565c64;
--base04: #666;
--base05: #333;
--base06: #fff;
--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;
--base02: #3e4451;
--base03: #868e96;
--base04: #868e96;
--base05: #abb2bf;
--base06: #b6bdca;
--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
.language-diff .gd {
color: $red-400;
}
.language-diff .gi {
color: $green-400;
}
}
.hl { background-color: var(--base02); }
.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: var(--base0A);
}
.gi { color: var(--bs-success); }
.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); }
// Color commas in rgba() values
.m + .o { color: var(--base03); }
// Fix bash
.language-sh .c { color: var(--base03); }
.chroma {
.language-bash,
.language-sh {
.line::before {
color: var(--base03);
content: "$ ";
user-select: none;
}
}
.language-powershell::before {
color: var(--base0C);
content: "PM> ";
user-select: none;
}
}

View file

@ -0,0 +1,93 @@
// stylelint-disable selector-max-type, selector-no-qualifying-type
.bd-toc {
@include media-breakpoint-up(lg) {
position: sticky;
top: 5rem;
right: 0;
z-index: 2;
height: subtract(100vh, 7rem);
overflow-y: auto;
}
nav {
@include font-size(.875rem);
ul {
padding-left: 0;
margin-bottom: 0;
list-style: none;
ul {
padding-left: 1rem;
}
}
a {
display: block;
padding: .125rem 0 .125rem .75rem;
color: inherit;
text-decoration: none;
border-left: .125rem solid transparent;
&:hover,
&.active {
color: var(--bd-toc-color);
border-left-color: var(--bd-toc-color);
}
&.active {
font-weight: 500;
}
code {
font: inherit;
}
}
}
}
.bd-toc-toggle {
display: flex;
align-items: center;
@include media-breakpoint-down(sm) {
justify-content: space-between;
width: 100%;
}
@include media-breakpoint-down(md) {
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: var(--bs-body-bg);
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 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));
}
}
@include media-breakpoint-up(md) {
display: block !important; // stylelint-disable-line declaration-no-important
}
}

View file

@ -0,0 +1,35 @@
// Local docs variables
$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-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default;
:root,
[data-bs-theme="light"] {
--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)};
--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);
--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) {
--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);
--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
}

View file

@ -0,0 +1,59 @@
/*!
* Bootstrap 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/.
*/
// Dev notes
//
// Background information on nomenclature and architecture decisions here.
//
// - Bootstrap functions, variables, and mixins are included for easy reuse.
// Doing so gives us access to the same core utilities provided by Bootstrap.
// For example, consistent media queries through those mixins.
//
// - Bootstrap's **docs variables** are prefixed with `$bd-`.
// These custom colors avoid collision with the components Bootstrap provides.
//
// - Classes are prefixed with `.bd-`.
// These classes indicate custom-built or modified components for the design
// and layout of the Bootstrap docs. They are not included in our builds.
//
// Happy Bootstrapping!
// Load Bootstrap variables and mixins
@import "../../../scss/functions";
@import "../../../scss/variables";
@import "../../../scss/mixins";
// fusv-disable
$enable-grid-classes: false;
$enable-cssgrid: true;
// fusv-enable
@import "../../../scss/grid";
// Load docs components
@import "variables";
@import "navbar";
@import "search";
@import "masthead";
@import "ads";
@import "content";
@import "skippy";
@import "sidebar";
@import "layout";
@import "toc";
@import "footer";
@import "component-examples";
@import "buttons";
@import "callouts";
@import "brand";
@import "colors";
@import "clipboard-js";
@import "placeholder-img";
@import "scrolling";
// Load docs dependencies
@import "syntax";
@import "anchor";