diff options
Diffstat (limited to 'site/assets')
33 files changed, 1504 insertions, 849 deletions
diff --git a/site/assets/js/application.js b/site/assets/js/application.js index 2c57906c9..ef706ed4d 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -4,169 +4,17 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * 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, anchors: false, bootstrap: false */ +/* 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 */ -(function () { - 'use strict' - - // Tooltip and popover demos - document.querySelectorAll('.tooltip-demo') - .forEach(function (tooltip) { - new bootstrap.Tooltip(tooltip, { - selector: '[data-bs-toggle="tooltip"]' - }) - }) - - document.querySelectorAll('[data-bs-toggle="popover"]') - .forEach(function (popover) { - new bootstrap.Popover(popover) - }) - - var 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(function (toastNode) { - var toast = new bootstrap.Toast(toastNode, { - autohide: false - }) - - toast.show() - }) - - var toastTrigger = document.getElementById('liveToastBtn') - var toastLiveExample = document.getElementById('liveToast') - if (toastTrigger) { - toastTrigger.addEventListener('click', function () { - var toast = new bootstrap.Toast(toastLiveExample) - - toast.show() - }) - } - - var alertPlaceholder = document.getElementById('liveAlertPlaceholder') - var alertTrigger = document.getElementById('liveAlertBtn') - - function alert(message, type) { - var wrapper = document.createElement('div') - wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>' - - alertPlaceholder.append(wrapper) - } - - if (alertTrigger) { - alertTrigger.addEventListener('click', function () { - alert('Nice, you triggered this alert message!', 'success') - }) - } - - // Demos within modals - document.querySelectorAll('.tooltip-test') - .forEach(function (tooltip) { - new bootstrap.Tooltip(tooltip) - }) - - document.querySelectorAll('.popover-test') - .forEach(function (popover) { - new bootstrap.Popover(popover) - }) - - // Indeterminate checkbox example - document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]') - .forEach(function (checkbox) { - checkbox.indeterminate = true - }) - - // Disable empty links in docs examples - document.querySelectorAll('.bd-content [href="#"]') - .forEach(function (link) { - link.addEventListener('click', function (event) { - event.preventDefault() - }) - }) - - // Modal relatedTarget demo - var exampleModal = document.getElementById('exampleModal') - if (exampleModal) { - exampleModal.addEventListener('show.bs.modal', function (event) { - // Button that triggered the modal - var button = event.relatedTarget - // Extract info from data-bs-* attributes - var recipient = button.getAttribute('data-bs-whatever') - - // Update the modal's content. - var modalTitle = exampleModal.querySelector('.modal-title') - var modalBodyInput = exampleModal.querySelector('.modal-body input') - - modalTitle.textContent = 'New message to ' + recipient - modalBodyInput.value = recipient - }) - } - - // Insert copy to clipboard button before .highlight - var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>' - document.querySelectorAll('div.highlight') - .forEach(function (element) { - element.insertAdjacentHTML('beforebegin', btnHtml) - }) - - document.querySelectorAll('.btn-clipboard') - .forEach(function (btn) { - var tooltipBtn = new bootstrap.Tooltip(btn) - - 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() - }) - }) - - var clipboard = new ClipboardJS('.btn-clipboard', { - target: function (trigger) { - return trigger.parentNode.nextElementSibling - } - }) - - 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 }) - }, { 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) - var originalTitle = event.trigger.getAttribute('title') - - tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg }) - event.trigger.addEventListener('hidden.bs.tooltip', function () { - tooltipBtn.setContent({ '.tooltip-inner': originalTitle }) - }, { once: true }) - }) - - anchors.options = { - icon: '#' - } - anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5') -})() +sidebarScroll() +codeExamples() +snippets() 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 = [ + '<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 }) + }) +} 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 = [ + `<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) + }) + } +} diff --git a/site/assets/js/search.js b/site/assets/js/search.js index d88263d3f..48047abc8 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -2,52 +2,54 @@ // IT'S ALL JUST JUNK FOR OUR DOCS! // ++++++++++++++++++++++++++++++++++++++++++ -(function () { - 'use strict' - - var inputElement = document.getElementById('search-input') - - if (!window.docsearch || !inputElement) { +/*! + * 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' +// 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') + + if (!searchElement) { return } - var siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') + const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version') - document.addEventListener('keydown', function (event) { - if (event.ctrlKey && event.key === '/') { - event.preventDefault() - inputElement.focus() - } - }) - - window.docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', - indexName: 'bootstrap', - inputSelector: '#search-input', - algoliaOptions: { - facetFilters: ['version:' + siteDocsVersion] + docsearch({ + apiKey, + indexName, + appId, + container: searchElement, + searchParameters: { + facetFilters: [`version:${siteDocsVersion}`] }, - transformData: function (hits) { - return hits.map(function (hit) { - var liveUrl = 'https://getbootstrap.com/' + 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 - debug: false + } }) })() diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js new file mode 100644 index 000000000..82e11c345 --- /dev/null +++ b/site/assets/js/snippets.js @@ -0,0 +1,15 @@ +/* + * 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/. + */ + +// Note that this file is not published; we only include it in scripts.html +// for StackBlitz to work + +/* eslint-disable import/no-unresolved */ +import snippets from 'js/partials/snippets.js' +/* eslint-enable import/no-unresolved */ + +snippets() diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js new file mode 100644 index 000000000..ff8262474 --- /dev/null +++ b/site/assets/js/stackblitz.js @@ -0,0 +1,66 @@ +// 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(' ') + + openBootstrapSnippet(htmlSnippet, jsSnippet, classes) + }) +}) + +const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => { + const indexHtml = `<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="${cssCdn}" rel="stylesheet"> + <link href="https://getbootstrap.com/docs/${docsVersion}/assets/css/docs.css" rel="stylesheet"> + <title>Bootstrap Example</title> + <${'script'} defer src="${jsBundleCdn}"></${'script'}> + </head> + <body class="p-3 m-0 border-0 ${classes}"> + <!-- Example Code Start--> +${htmlSnippet.trimStart().replace(/^/gm, ' ').replace(/^ {4}$/gm, '').trimEnd()} + <!-- Example Code End --> + </body> +</html> +` + + const project = { + files: { + 'index.html': indexHtml, + ...(jsSnippet && { 'index.js': jsSnippetFile }) + }, + 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/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<e.length;i++)if(this.hasAnchorJSLink(e[i]))p.push(i);else{if(e[i].hasAttribute("id"))o=e[i].getAttribute("id");else if(e[i].hasAttribute("data-anchor-id"))o=e[i].getAttribute("data-anchor-id");else{for(c=a=this.urlify(e[i].textContent),s=0;n=t.indexOf(c=void 0!==n?a+"-"+s:c),s+=1,-1!==n;);n=void 0,t.push(c),e[i].setAttribute("id",c),o=c}(r=document.createElement("a")).className="anchorjs-link "+this.options.class,r.setAttribute("aria-label",this.options.ariaLabel),r.setAttribute("data-anchorjs-icon",this.options.icon),this.options.titleText&&(r.title=this.options.titleText),h=document.querySelector("base")?window.location.pathname+window.location.search:"",h=this.options.base||h,r.href=h+"#"+o,"always"===l&&(r.style.opacity="1"),""===this.options.icon&&(r.style.font="1em/1 anchorjs-icons","left"===this.options.placement&&(r.style.lineHeight="inherit")),"left"===this.options.placement?(r.style.position="absolute",r.style.marginLeft="-1em",r.style.paddingRight=".5em",e[i].insertBefore(r,e[i].firstChild)):(r.style.paddingLeft=".375em",e[i].appendChild(r))}for(i=0;i<p.length;i++)e.splice(p[i]-i,1);return this.elements=this.elements.concat(e),this},this.remove=function(A){for(var e,t,o=w(A),i=0;i<o.length;i++)(t=o[i].querySelector(".anchorjs-link"))&&(-1!==(e=this.elements.indexOf(o[i]))&&this.elements.splice(e,1),o[i].removeChild(t));return this},this.removeAll=function(){this.remove(this.elements)},this.urlify=function(A){var e=document.createElement("textarea");return e.innerHTML=A,A=e.value,this.options.truncate||d(this.options),A.trim().replace(/'/gi,"").replace(/[& +$,:;=?@"#{}|^~[`%!'<>\]./()*\\\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/js/vendor/clipboard.min.js b/site/assets/js/vendor/clipboard.min.js deleted file mode 100644 index 95f55d7b0..000000000 --- a/site/assets/js/vendor/clipboard.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/*! - * clipboard.js v2.0.8 - * 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<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var l=function(){function e(t){!function(t){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this),this.resolveOptions(t),this.initSelection()}var t,n,r;return t=e,(n=[{key:"resolveOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.action=t.action,this.container=t.container,this.emitter=t.emitter,this.target=t.target,this.text=t.text,this.trigger=t.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"createFakeElement",value:function(){var t="rtl"===document.documentElement.getAttribute("dir");this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[t?"right":"left"]="-9999px";t=window.pageYOffset||document.documentElement.scrollTop;return this.fakeElem.style.top="".concat(t,"px"),this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.fakeElem}},{key:"selectFake",value:function(){var t=this,e=this.createFakeElement();this.fakeHandlerCallback=function(){return t.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.container.appendChild(e),this.selectedText=o()(e),this.copyText(),this.removeFake()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=o()(this.target),this.copyText()}},{key:"copyText",value:function(){var e;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function(t){this.emitter.emit(t?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),document.activeElement.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=t,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(t){if(void 0!==t){if(!t||"object"!==c(t)||1!==t.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&t.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(t.hasAttribute("readonly")||t.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=t}},get:function(){return this._target}}])&&u(t.prototype,n),r&&u(t,r),e}();function s(t){return(s="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 f(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function d(n){var r=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}();return function(){var t,e=p(n);return t=r?(t=p(this).constructor,Reflect.construct(e,arguments,t)):e.apply(this,arguments),e=this,!(t=t)||"object"!==s(t)&&"function"!=typeof t?function(t){if(void 0!==t)return t;throw new ReferenceError("this hasn't been initialised - super() hasn't been called")}(e):t}}function p(t){return(p=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function y(t,e){t="data-clipboard-".concat(t);if(e.hasAttribute(t))return e.getAttribute(t)}var r=function(){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&h(t,e)}(o,i());var t,e,n,r=d(o);function o(t,e){var n;return function(t){if(!(t instanceof o))throw new TypeError("Cannot call a class as a function")}(this),(n=r.call(this)).resolveOptions(e),n.listenClick(t),n}return t=o,n=[{key:"isSupported",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:["copy","cut"],t="string"==typeof t?[t]:t,e=!!document.queryCommandSupported;return t.forEach(function(t){e=e&&!!document.queryCommandSupported(t)}),e}}],(e=[{key:"resolveOptions",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof t.action?t.action:this.defaultAction,this.target="function"==typeof t.target?t.target:this.defaultTarget,this.text="function"==typeof t.text?t.text:this.defaultText,this.container="object"===s(t.container)?t.container:document.body}},{key:"listenClick",value:function(t){var e=this;this.listener=a()(t,"click",function(t){return e.onClick(t)})}},{key:"onClick",value:function(t){t=t.delegateTarget||t.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new l({action:this.action(t),target:this.target(t),text:this.text(t),container:this.container,trigger:t,emitter:this})}},{key:"defaultAction",value:function(t){return y("action",t)}},{key:"defaultTarget",value:function(t){t=y("target",t);if(t)return document.querySelector(t)}},{key:"defaultText",value:function(t){return y("text",t)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}])&&f(t.prototype,e),n&&f(t,n),o}()},828:function(t){var e;"undefined"==typeof Element||Element.prototype.matches||((e=Element.prototype).matches=e.matchesSelector||e.mozMatchesSelector||e.msMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector),t.exports=function(t,e){for(;t&&9!==t.nodeType;){if("function"==typeof t.matches&&t.matches(e))return t;t=t.parentNode}}},438:function(t,e,n){var a=n(828);function i(t,e,n,r,o){var i=function(e,n,t,r){return function(t){t.delegateTarget=a(t.target,n),t.delegateTarget&&r.call(e,t)}}.apply(this,arguments);return t.addEventListener(n,i,o),{destroy:function(){t.removeEventListener(n,i,o)}}}t.exports=function(t,e,n,r,o){return"function"==typeof t.addEventListener?i.apply(null,arguments):"function"==typeof n?i.bind(null,document).apply(null,arguments):("string"==typeof t&&(t=document.querySelectorAll(t)),Array.prototype.map.call(t,function(t){return i(t,e,n,r,o)}))}},879:function(t,n){n.node=function(t){return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var e=Object.prototype.toString.call(t);return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof t||t instanceof String},n.fn=function(t){return"[object Function]"===Object.prototype.toString.call(t)}},370:function(t,e,n){var l=n(879),s=n(438);t.exports=function(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required arguments");if(!l.string(e))throw new TypeError("Second argument must be a String");if(!l.fn(n))throw new TypeError("Third argument must be a Function");if(l.node(t))return c=e,u=n,(a=t).addEventListener(c,u),{destroy:function(){a.removeEventListener(c,u)}};if(l.nodeList(t))return r=t,o=e,i=n,Array.prototype.forEach.call(r,function(t){t.addEventListener(o,i)}),{destroy:function(){Array.prototype.forEach.call(r,function(t){t.removeEventListener(o,i)})}};if(l.string(t))return t=t,e=e,n=n,s(document.body,t,e,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList");var r,o,i,a,c,u}},817:function(t){t.exports=function(t){var e,n="SELECT"===t.nodeName?(t.focus(),t.value):"INPUT"===t.nodeName||"TEXTAREA"===t.nodeName?((e=t.hasAttribute("readonly"))||t.setAttribute("readonly",""),t.select(),t.setSelectionRange(0,t.value.length),e||t.removeAttribute("readonly"),t.value):(t.hasAttribute("contenteditable")&&t.focus(),n=window.getSelection(),(e=document.createRange()).selectNodeContents(t),n.removeAllRanges(),n.addRange(e),n.toString());return n}},279:function(t){function e(){}e.prototype={on:function(t,e,n){var r=this.e||(this.e={});return(r[t]||(r[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){var r=this;function o(){r.off(t,o),e.apply(n,arguments)}return o._=e,this.on(t,o,n)},emit:function(t){for(var e=[].slice.call(arguments,1),n=((this.e||(this.e={}))[t]||[]).slice(),r=0,o=n.length;r<o;r++)n[r].fn.apply(n[r].ctx,e);return this},off:function(t,e){var n=this.e||(this.e={}),r=n[t],o=[];if(r&&e)for(var i=0,a=r.length;i<a;i++)r[i].fn!==e&&r[i].fn._!==e&&o.push(r[i]);return o.length?n[t]=o:delete n[t],this}},t.exports=e,t.exports.TinyEmitter=e}},o={},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,{a:e}),e},r.d=function(t,e){for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r(134).default;function r(t){if(o[t])return o[t].exports;var e=o[t]={exports:{}};return n[t](e,e.exports,r),e.exports}var n,o});
\ No newline at end of file diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss index 026d1a17a..cc5634096 100644 --- a/site/assets/scss/_ads.scss +++ b/site/assets/scss/_ads.scss @@ -14,16 +14,15 @@ @include font-size(.8125rem); line-height: 1.4; text-align: left; - background-color: rgba(0, 0, 0, .05); + background-color: var(--bs-tertiary-bg); a { - color: $gray-800; + color: var(--bs-body-color); text-decoration: none; } @include media-breakpoint-up(sm) { - max-width: 330px; - @include border-radius(4px); + @include border-radius(.5rem); } } @@ -35,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/_algolia.scss b/site/assets/scss/_algolia.scss deleted file mode 100644 index 097dbdd55..000000000 --- a/site/assets/scss/_algolia.scss +++ /dev/null @@ -1,92 +0,0 @@ -// Docsearch theming - -.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; - border: $dropdown-border-width solid $dropdown-border-color; - @include border-radius($dropdown-border-radius); - @include box-shadow($dropdown-box-shadow); - - @include media-breakpoint-up(md) { - width: 400px; - } -} - -.algolia-docsearch-suggestion--category-header { - padding: .125rem 1rem; - font-weight: 600; - color: $bd-purple-bright; - - // stylelint-disable-next-line selector-class-pattern - :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/_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; } } diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss index 73db11e18..03fe2fe1f 100644 --- a/site/assets/scss/_brand.scss +++ b/site/assets/scss/_brand.scss @@ -4,24 +4,24 @@ // 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; } } // Individual items .bd-brand-item { + .bd-brand-item { - border-top: 1px solid $white; + border-top: 1px solid var(--bs-border-color); } @include media-breakpoint-up(md) { + .bd-brand-item { border-top: 0; - border-left: 1px solid $white; + border-left: 1px solid var(--bs-border-color); } } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index b266d3e88..8e4c3838d 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -2,54 +2,51 @@ // // Custom buttons for the docs. +// 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-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%)}; } - -.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); - } +// 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 { - color: $gray-600; - border-color: $gray-300; + --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); +} - .show > &, - &:hover, - &:active { - color: $bd-purple-bright; - background-color: $white; - border-color: $bd-purple-bright; - } +.bd-btn-lg { + --bs-btn-border-radius: .5rem; - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } + padding: .8125rem 2rem; } diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index aff91f18b..c3e5629a8 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -3,39 +3,38 @@ // .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; - border: 1px solid $gray-200; - border-left-width: .25rem; - @include border-radius(); + 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; } - 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-color: var(--bs-#{$variant}-text-emphasis); + --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 83b9a8b9e..de709d09b 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,22 +17,28 @@ } } -.btn-clipboard { - position: absolute; - top: .65rem; - right: .65rem; - z-index: 10; +.btn-clipboard, +.btn-edit { display: block; - padding: .25rem .5rem; - @include font-size(.65em); - color: $primary; - background-color: $white; - border: 1px solid; - @include border-radius(); + 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); + } - &:hover, &:focus { - color: $white; - background-color: $primary; + z-index: 3; } } + +.btn-clipboard { + position: relative; + z-index: 2; + margin-top: 1.25rem; + margin-right: .75rem; +} diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index a71a8973b..da4bbace1 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -41,7 +41,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; } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index f93f1ee98..fde8b7f41 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -1,105 +1,37 @@ // -// Grid examples +// Docs 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(); +.bd-code-snippet { + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); + border-width: 1px 0; - @include media-breakpoint-up(sm) { - @include make-col(6); - } - - @include media-breakpoint-up(lg) { - @include make-col(4); + @include media-breakpoint-up(md) { + margin-right: 0; + margin-left: 0; + border-width: 1px; + @include border-radius(var(--bs-border-radius)); } } - -// -// Docs examples -// - .bd-example { + --bd-example-padding: 1rem; + position: relative; - padding: 1rem; - margin: 1rem (-$grid-gutter-width * .5) 0; - border: solid $gray-300; - border-width: 1px 0 0; + 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(sm) { - padding: 1.5rem; + @include media-breakpoint-up(md) { + --bd-example-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-radius(var(--bs-border-radius)); } + p { @@ -116,7 +48,7 @@ > .alert + .alert, > .navbar + .navbar, > .progress + .progress { - margin-top: 1rem; + margin-top: $spacer; } > .dropdown-menu { @@ -124,10 +56,15 @@ display: block; } - > :last-child { + > :last-child, + > nav:last-child .breadcrumb { margin-bottom: 0; } + > hr:last-child { + margin-bottom: $spacer; + } + // Images > svg + svg, > img + img { @@ -156,28 +93,81 @@ .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 { + .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 { - 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-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); } } @@ -186,9 +176,9 @@ .ratio { display: inline-block; width: 10rem; - color: $gray-600; - background-color: $gray-100; - border: $border-width solid $border-color; + color: var(--bs-secondary-color); + background-color: var(--bs-tertiary-bg); + border: var(--bs-border-width) solid var(--bs-border-color); > div { display: flex; @@ -207,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; @@ -229,37 +208,59 @@ } // Tooltips -.tooltip-demo a { - white-space: nowrap; +.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 { - position: relative; height: 200px; margin-top: .5rem; overflow: auto; } .scrollspy-example-2 { - position: relative; 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: #f5f5f5; - } -} - -.bd-example-border-utils-0 { - [class^="border"] { - border: 1px solid $border-color; + background-color: var(--bs-tertiary-bg); } } @@ -271,17 +272,17 @@ .bd-example-position-utils { position: relative; - padding: 3em; + padding: 2rem; .position-relative { height: 200px; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } .position-absolute { - width: 2em; - height: 2em; - background-color: $dark; + width: 2rem; + height: 2rem; + background-color: var(--bs-body-color); @include border-radius(); } } @@ -308,23 +309,64 @@ 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 { - padding: 1rem; - margin-bottom: 1rem; - background-color: $gray-100; + position: relative; + padding: .75rem ($bd-gutter-x * .5); + background-color: var(--bd-pre-bg); - @include media-breakpoint-up(sm) { - padding: 1rem 1.5rem; + @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: 0; - margin-top: .65rem; - margin-bottom: .65rem; + padding: .25rem 0 .875rem; + margin-top: .8125rem; + margin-bottom: 0; + overflow: overlay; white-space: pre; background-color: transparent; border: 0; @@ -332,17 +374,31 @@ 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; } } -.bd-content .highlight { - margin-right: (-$grid-gutter-width * .5); - margin-left: (-$grid-gutter-width * .5); +.bd-example-snippet .highlight pre { + margin-right: 0; +} - @include media-breakpoint-up(sm) { - margin-right: 0; - margin-left: 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; +} diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f2b5cfc54..811883b49 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -2,14 +2,14 @@ // Bootstrap docs content theming // -// Offset for the sticky header -@include media-breakpoint-up(md) { - :root { - scroll-padding-top: 4rem; +.bd-content { + > h2, + > h3, + > h4 { + --bs-heading-color: var(--bs-emphasis-color); } -} -.bd-content { + // Offset content from fixed navbar when jumping to headings > h2:not(:first-child) { margin-top: 3rem; } @@ -31,20 +31,28 @@ } // Override Bootstrap defaults - > .table { + > .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) { - display: block; - overflow-x: auto; - &.table-bordered { border: 0; } } + thead { + border-bottom: 2px solid currentcolor; + } + + tbody:not(:first-child) { + border-top: 2px solid currentcolor; + } + th, td { &:first-child { @@ -56,14 +64,45 @@ } } + th { + color: var(--bs-emphasis-color); + } + + strong { + color: var(--bs-emphasis-color); + } + // Prevent breaking of code - td:first-child > code { + th, + td:first-child > code { // stylelint-disable-line selector-max-compound-selectors 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); } @@ -72,10 +111,52 @@ font-weight: 300; } -.bd-text-purple-bright { - color: $bd-purple-bright; +.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); + } } -.bd-bg-purple-bright { - background-color: $bd-purple-bright; +// 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/_layout.scss b/site/assets/scss/_layout.scss index 707c4949d..d0482d9b7 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,13 +1,14 @@ +.bd-gutter { + --bs-gutter-x: #{$bd-gutter-x}; +} + .bd-layout { - @include media-breakpoint-up(md) { - display: grid; - gap: $grid-gutter-width; - grid-template-areas: "sidebar main"; - grid-template-columns: 1fr 3fr; - } @include media-breakpoint-up(lg) { + display: grid; + grid-template-areas: "sidebar main"; grid-template-columns: 1fr 5fr; + gap: $grid-gutter-width; } } @@ -18,22 +19,27 @@ .bd-main { grid-area: main; + @include media-breakpoint-down(lg) { + max-width: 760px; + margin-inline: auto; + } + @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/_masthead.scss b/site/assets/scss/_masthead.scss index 2e742e76d..d74d1ec24 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -1,38 +1,119 @@ .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 { + --bs-heading-color: var(--bs-emphasis-color); @include font-size(4rem); - line-height: 1; } - p:not(.lead) { - color: $gray-700; + .lead { + @include font-size(1rem); + font-weight: 400; + color: var(--bs-secondary-color); } - .btn { - padding: .8rem 2rem; - font-weight: 600; + .bd-code-snippet { + margin: 0; + border-color: var(--bs-border-color-translucent); + border-width: 1px; + @include border-radius(.5rem); } - .lead { - @include font-size(1.5rem); - font-weight: 400; - color: $gray-700; + + .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); + } } } -@include media-breakpoint-up(md) { - .mw-md-75 { max-width: 75%; } +.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: .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 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); } -.masthead-followup-svg { - filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125)); +.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; + } + } } diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 053cadf2e..2b598bf67 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,32 +1,129 @@ .bd-navbar { padding: .75rem 0; - background-color: $bd-purple-bright; + 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; + } } - .navbar-nav { - .nav-link { - padding-right: $spacer * .25; - padding-left: $spacer * .25; - color: rgba($white, .85); + .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; + } - &:hover, - &:focus { - color: $white; + .dropdown-item { + @include border-radius(.25rem); + + &:active { + .bi { + color: inherit !important; // stylelint-disable-line declaration-no-important + } } + } - &.active { - font-weight: 600; - color: $white; + .active { + font-weight: 600; + + .bi { + display: block !important; // stylelint-disable-line declaration-no-important } } } - .navbar-nav-svg { - width: 1rem; - height: 1rem; + .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); } } 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/_scrolling.scss b/site/assets/scss/_scrolling.scss new file mode 100644 index 000000000..0aaf7444e --- /dev/null +++ b/site/assets/scss/_scrolling.scss @@ -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; + } +} diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss new file mode 100644 index 000000000..592d65f98 --- /dev/null +++ b/site/assets/scss/_search.scss @@ -0,0 +1,173 @@ +// 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; + + 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. + + @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); +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index d893ba9dc..598da3d5b 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -1,87 +1,64 @@ .bd-sidebar { - @include media-breakpoint-down(md) { - margin: 0 -.75rem 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; + @include media-breakpoint-down(lg) { + .offcanvas-lg { + border-right-color: var(--bs-border-color); + box-shadow: var(--bs-box-shadow-lg); } } +} - a { - padding: .1875rem .5rem; - margin-top: .125rem; - margin-left: 1.25rem; - color: rgba($black, .65); - text-decoration: if($link-decoration == none, null, none); +.bd-links-heading { + color: var(--bs-emphasis-color); +} - &:hover, - &:focus { - color: rgba($black, .85); - text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba($bd-purple-bright, .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; - - &:hover, - &:focus { - color: rgba($black, .85); - background-color: rgba($bd-purple-bright, .1); - } + @include media-breakpoint-between(xs, lg) { + column-count: 2; + column-gap: 1.5rem; - &:focus { - box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7); + .bd-links-group { + break-inside: avoid; } - // 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: 1.125rem; + color: var(--bs-body-color); + text-decoration: if($link-decoration == none, null, none); - &::before { - transform: rotate(90deg); - } - } + &: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 { + &.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 8377ff423..000000000 --- a/site/assets/scss/_subnav.scss +++ /dev/null @@ -1,79 +0,0 @@ -.bd-subnavbar { - // 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; - display: flex; - align-items: center; - justify-content: center; - height: 1.5rem; - padding-right: .25rem; - padding-left: .25rem; - @include font-size(.75rem); - color: $gray-600; - content: "Ctrl + /"; - border: $border-width solid $border-color; - @include border-radius(.125rem); - } - - @include media-breakpoint-down(md) { - width: 100%; - } - - .form-control { - padding-right: 3.75rem; - - &:focus { - border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); - } - } -} - -.bd-sidebar-toggle { - color: $text-muted; - - &:hover, - &:focus { - color: $bd-purple-bright; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .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 8120bbef2..38ac11fb8 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -1,101 +1,141 @@ -// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern +: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); } -/* 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, .language-sh { - &::before { - color: #009; + .line::before { + 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 596945628..32bf3cf62 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 .bd-toc { @include media-breakpoint-up(lg) { @@ -15,23 +15,29 @@ ul { padding-left: 0; + margin-bottom: 0; list-style: none; ul { padding-left: 1rem; - margin-top: .25rem; } } - li { - margin-bottom: .25rem; - } - a { + display: block; + padding: .125rem 0 .125rem .75rem; color: inherit; + text-decoration: none; + border-left: .125rem solid transparent; - &:not(:hover) { - text-decoration: none; + &:hover, + &.active { + color: var(--bd-toc-color); + border-left-color: var(--bd-toc-color); + } + + &.active { + font-weight: 500; } code { @@ -40,3 +46,48 @@ } } } + +.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 + } +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 110600260..5e8ab5d6c 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,13 +1,35 @@ -// stylelint-disable scss/dollar-variable-default - // Local docs variables -$bd-purple: #563d7c; -$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list +$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-dark: #2a2730; -$bd-download: #ffe484; -$bd-info: #5bc0de; -$bd-warning: #f0ad4e; -$bd-danger: #d9534f; -$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"); -$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>"); +$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 +} diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 8b7bc99a1..af3817103 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -1,7 +1,6 @@ /*! * Bootstrap Docs (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. + * 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/. */ @@ -29,15 +28,14 @@ @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"; // Load docs components @import "variables"; @import "navbar"; -@import "subnav"; @import "masthead"; @import "ads"; @import "content"; @@ -53,8 +51,8 @@ $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"; @import "anchor"; -@import "algolia"; 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"; |