Adding upstream version 5.2.3+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
b80f12a01d
commit
bc475d7d0d
GPG key ID:
FBB4F0E80A80222F
617 changed files with 89471 additions and 0 deletions
30
site/assets/js/application.js
Normal file
30
site/assets/js/application.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// Scroll the active sidebar link into view
|
||||
const sidenav = document.querySelector('.bd-sidebar')
|
||||
if (sidenav) {
|
||||
const sidenavHeight = sidenav.clientHeight
|
||||
const sidenavActiveLink = document.querySelector('.bd-links-nav .active')
|
||||
const sidenavActiveLinkTop = sidenavActiveLink.offsetTop
|
||||
const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
|
||||
const viewportTop = sidenavActiveLinkTop
|
||||
const viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
|
||||
|
||||
if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
|
||||
sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
|
||||
}
|
||||
}
|
||||
})()
|
||||
88
site/assets/js/code-examples.js
Normal file
88
site/assets/js/code-examples.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global ClipboardJS: false, bootstrap: false */
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
// Insert copy to clipboard button before .highlight
|
||||
const btnTitle = 'Copy to clipboard'
|
||||
const btnEdit = 'Edit on StackBlitz'
|
||||
|
||||
const btnHtml = [
|
||||
'<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 => {
|
||||
if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
|
||||
element.insertAdjacentHTML('beforebegin', btnHtml)
|
||||
element.previousElementSibling.append(element)
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} selector
|
||||
* @param {string} title
|
||||
*/
|
||||
function snippetButtonTooltip(selector, title) {
|
||||
document.querySelectorAll(selector).forEach(btn => {
|
||||
bootstrap.Tooltip.getOrCreateInstance(btn, { title })
|
||||
})
|
||||
}
|
||||
|
||||
snippetButtonTooltip('.btn-clipboard', btnTitle)
|
||||
snippetButtonTooltip('.btn-edit', btnEdit)
|
||||
|
||||
const clipboard = new ClipboardJS('.btn-clipboard', {
|
||||
target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight')
|
||||
})
|
||||
|
||||
clipboard.on('success', event => {
|
||||
const iconFirstChild = event.trigger.querySelector('.bi').firstChild
|
||||
const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
|
||||
const namespace = 'http://www.w3.org/1999/xlink'
|
||||
const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
|
||||
const originalTitle = event.trigger.title
|
||||
|
||||
tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
|
||||
event.trigger.addEventListener('hidden.bs.tooltip', () => {
|
||||
tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
|
||||
}, { once: true })
|
||||
event.clearSelection()
|
||||
iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))
|
||||
|
||||
setTimeout(() => {
|
||||
iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
|
||||
event.trigger.title = originalTitle
|
||||
}, 2000)
|
||||
})
|
||||
|
||||
clipboard.on('error', event => {
|
||||
const modifierKey = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
|
||||
const fallbackMsg = `Press ${modifierKey}C to copy`
|
||||
const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
|
||||
|
||||
tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
|
||||
event.trigger.addEventListener('hidden.bs.tooltip', () => {
|
||||
tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
|
||||
}, { once: true })
|
||||
})
|
||||
})()
|
||||
47
site/assets/js/search.js
Normal file
47
site/assets/js/search.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
|
||||
// IT'S ALL JUST JUNK FOR OUR DOCS!
|
||||
// ++++++++++++++++++++++++++++++++++++++++++
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
const searchElement = document.getElementById('docsearch')
|
||||
|
||||
if (!window.docsearch || !searchElement) {
|
||||
return
|
||||
}
|
||||
|
||||
const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version')
|
||||
|
||||
window.docsearch({
|
||||
apiKey: '3151f502c7b9e9dafd5e6372b691a24e',
|
||||
indexName: 'bootstrap',
|
||||
appId: 'AK7KMZKZHQ',
|
||||
container: searchElement,
|
||||
searchParameters: {
|
||||
facetFilters: [`version:${siteDocsVersion}`]
|
||||
},
|
||||
transformItems(items) {
|
||||
return items.map(item => {
|
||||
const liveUrl = 'https://getbootstrap.com/'
|
||||
|
||||
item.url = window.location.origin.startsWith(liveUrl) ?
|
||||
// On production, return the result as is
|
||||
item.url :
|
||||
// On development or Netlify, replace `item.url` with a trailing slash,
|
||||
// so that the result link is relative to the server root
|
||||
item.url.replace(liveUrl, '/')
|
||||
|
||||
// Prevent jumping to first header
|
||||
if (item.anchor === 'content') {
|
||||
item.url = item.url.replace(/#content$/, '')
|
||||
item.anchor = null
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
},
|
||||
// Set debug to `true` if you want to inspect the dropdown
|
||||
debug: false
|
||||
})
|
||||
})()
|
||||
154
site/assets/js/snippets.js
Normal file
154
site/assets/js/snippets.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
// 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-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
/* global bootstrap: false */
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
// --------
|
||||
// Tooltips
|
||||
// --------
|
||||
// Instantiate all tooltips in a docs or StackBlitz page
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
.forEach(tooltip => {
|
||||
new bootstrap.Tooltip(tooltip)
|
||||
})
|
||||
|
||||
// --------
|
||||
// Popovers
|
||||
// --------
|
||||
// Instantiate all popovers in a docs or StackBlitz page
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]')
|
||||
.forEach(popover => {
|
||||
new bootstrap.Popover(popover)
|
||||
})
|
||||
|
||||
// -------------------------------
|
||||
// Toasts
|
||||
// -------------------------------
|
||||
// Used by 'Placement' example in docs or StackBlitz
|
||||
const toastPlacement = document.getElementById('toastPlacement')
|
||||
if (toastPlacement) {
|
||||
document.getElementById('selectToastPlacement').addEventListener('change', function () {
|
||||
if (!toastPlacement.dataset.originalClass) {
|
||||
toastPlacement.dataset.originalClass = toastPlacement.className
|
||||
}
|
||||
|
||||
toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
|
||||
})
|
||||
}
|
||||
|
||||
// Instantiate all toasts in a docs page only
|
||||
document.querySelectorAll('.bd-example .toast')
|
||||
.forEach(toastNode => {
|
||||
const toast = new bootstrap.Toast(toastNode, {
|
||||
autohide: false
|
||||
})
|
||||
|
||||
toast.show()
|
||||
})
|
||||
|
||||
// Instantiate all toasts in a docs page only
|
||||
const toastTrigger = document.getElementById('liveToastBtn')
|
||||
const toastLiveExample = document.getElementById('liveToast')
|
||||
if (toastTrigger) {
|
||||
toastTrigger.addEventListener('click', () => {
|
||||
const toast = new bootstrap.Toast(toastLiveExample)
|
||||
|
||||
toast.show()
|
||||
})
|
||||
}
|
||||
|
||||
// -------------------------------
|
||||
// Alerts
|
||||
// -------------------------------
|
||||
// Used in 'Show live toast' example in docs or StackBlitz
|
||||
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
|
||||
const alertTrigger = document.getElementById('liveAlertBtn')
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
if (alertTrigger) {
|
||||
alertTrigger.addEventListener('click', () => {
|
||||
appendAlert('Nice, you triggered this alert message!', 'success')
|
||||
})
|
||||
}
|
||||
|
||||
// -------------------------------
|
||||
// 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
|
||||
const exampleModal = document.getElementById('exampleModal')
|
||||
if (exampleModal) {
|
||||
exampleModal.addEventListener('show.bs.modal', event => {
|
||||
// Button that triggered the modal
|
||||
const button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
const recipient = button.getAttribute('data-bs-whatever')
|
||||
|
||||
// Update the modal's content.
|
||||
const modalTitle = exampleModal.querySelector('.modal-title')
|
||||
const modalBodyInput = exampleModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = `New message to ${recipient}`
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
|
||||
// -------------------------------
|
||||
// Offcanvas
|
||||
// -------------------------------
|
||||
// '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)
|
||||
})
|
||||
}
|
||||
})()
|
||||
38
site/assets/scss/_ads.scss
Normal file
38
site/assets/scss/_ads.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// stylelint-disable declaration-no-important, selector-max-id
|
||||
|
||||
//
|
||||
// Carbon ads
|
||||
//
|
||||
|
||||
#carbonads {
|
||||
position: static;
|
||||
display: block;
|
||||
max-width: 400px;
|
||||
padding: 15px 15px 15px 160px;
|
||||
margin: 2rem 0;
|
||||
overflow: hidden;
|
||||
@include font-size(.8125rem);
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
background-color: $gray-100;
|
||||
|
||||
a {
|
||||
color: $gray-800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
float: left;
|
||||
margin-left: -145px;
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
margin-top: .75rem;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
21
site/assets/scss/_anchor.scss
Normal file
21
site/assets/scss/_anchor.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.anchor-link {
|
||||
padding: 0 .175rem;
|
||||
font-weight: 400;
|
||||
color: rgba($link-color, .5);
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
@include transition(color .15s ease-in-out, opacity .15s ease-in-out);
|
||||
|
||||
&::after {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
:hover > &,
|
||||
:target > & {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
60
site/assets/scss/_brand.scss
Normal file
60
site/assets/scss/_brand.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
//
|
||||
// Brand guidelines
|
||||
//
|
||||
|
||||
// Logo series wrapper
|
||||
.bd-brand-logos {
|
||||
color: $bd-violet;
|
||||
|
||||
.inverse {
|
||||
color: $white;
|
||||
background-color: $bd-violet;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual items
|
||||
.bd-brand-item {
|
||||
+ .bd-brand-item {
|
||||
border-top: 1px solid $white;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
+ .bd-brand-item {
|
||||
border-top: 0;
|
||||
border-left: 1px solid $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Color swatches
|
||||
//
|
||||
|
||||
.color-swatches {
|
||||
margin: 0 -5px;
|
||||
|
||||
// Docs colors
|
||||
.bd-purple {
|
||||
background-color: $bd-purple;
|
||||
}
|
||||
.bd-purple-light {
|
||||
background-color: $bd-purple-light;
|
||||
}
|
||||
.bd-purple-lighter {
|
||||
background-color: #e5e1ea;
|
||||
}
|
||||
.bd-gray {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
45
site/assets/scss/_buttons.scss
Normal file
45
site/assets/scss/_buttons.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// Buttons
|
||||
//
|
||||
// Custom buttons for the docs.
|
||||
|
||||
// scss-docs-start btn-css-vars-example
|
||||
.btn-bd-primary {
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet);
|
||||
--bs-btn-border-color: var(--bd-violet);
|
||||
--bs-btn-border-radius: .5rem;
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
|
||||
--bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
|
||||
--bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
|
||||
}
|
||||
// scss-docs-end btn-css-vars-example
|
||||
|
||||
.btn-bd-accent {
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bd-accent);
|
||||
--bs-btn-border-color: var(--bd-accent);
|
||||
--bs-btn-hover-color: var(--bd-dark);
|
||||
--bs-btn-hover-bg: var(--bd-accent);
|
||||
--bs-btn-hover-border-color: var(--bd-accent);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: var(--bs-btn-hover-bg);
|
||||
--bs-btn-active-border-color: var(--bs-btn-hover-border-color);
|
||||
}
|
||||
|
||||
.btn-bd-light {
|
||||
--bs-btn-color: var(--bs-gray-600);
|
||||
--bs-btn-border-color: var(--bs-gray-400);
|
||||
--bs-btn-hover-color: var(--bd-violet);
|
||||
--bs-btn-hover-border-color: var(--bd-violet);
|
||||
--bs-btn-active-color: var(--bd-violet);
|
||||
--bs-btn-active-bg: var(--bs-white);
|
||||
--bs-btn-active-border-color: var(--bd-violet);
|
||||
--bs-btn-focus-border-color: var(--bd-violet);
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
}
|
||||
35
site/assets/scss/_callouts.scss
Normal file
35
site/assets/scss/_callouts.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
//
|
||||
// Callouts
|
||||
//
|
||||
|
||||
.bd-callout {
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
background-color: var(--bd-callout-bg, var(--bs-gray-100));
|
||||
border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
|
||||
|
||||
h4 {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+ .bd-callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: rgba($black, .05);
|
||||
}
|
||||
}
|
||||
|
||||
// Variations
|
||||
@each $variant in $bd-callout-variants {
|
||||
.bd-callout-#{$variant} {
|
||||
--bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
|
||||
--bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
|
||||
}
|
||||
}
|
||||
44
site/assets/scss/_clipboard-js.scss
Normal file
44
site/assets/scss/_clipboard-js.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// clipboard.js
|
||||
//
|
||||
// JS-based `Copy` buttons for code snippets.
|
||||
|
||||
.bd-clipboard,
|
||||
.bd-edit {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: right;
|
||||
|
||||
+ .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clipboard,
|
||||
.btn-edit {
|
||||
display: block;
|
||||
padding: .5em;
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
background-color: $gray-100;
|
||||
border: 0;
|
||||
@include border-radius(.25rem);
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: .75rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
156
site/assets/scss/_colors.scss
Normal file
156
site/assets/scss/_colors.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
//
|
||||
// Docs color palette classes
|
||||
//
|
||||
|
||||
@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
|
||||
.swatch-#{$color} {
|
||||
color: color-contrast($value);
|
||||
background-color: #{$value};
|
||||
|
||||
&::after {
|
||||
$contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
|
||||
$against-white: "#{contrast-ratio($value, $white)}";
|
||||
$against-black: "#{contrast-ratio($value, $black)}";
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding-left: 1rem;
|
||||
font-size: .75rem;
|
||||
line-height: 1.35;
|
||||
white-space: pre;
|
||||
content:
|
||||
str-slice($contrast-ratio, 1, 4) "\A"
|
||||
str-slice($against-white, 1, 4) "\A"
|
||||
str-slice($against-black, 1, 4);
|
||||
background-color: $value;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
transparent .25rem,
|
||||
color-contrast($value) .25rem .75rem,
|
||||
transparent .75rem 1.25rem,
|
||||
$white 1.25rem 1.75rem,
|
||||
transparent 1.75rem 2.25rem,
|
||||
$black 2.25rem 2.75rem,
|
||||
transparent 2.75rem
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: .5rem 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable declaration-block-single-line-max-declarations
|
||||
|
||||
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
|
||||
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
|
||||
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
|
||||
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
|
||||
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
|
||||
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
|
||||
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
|
||||
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
|
||||
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
|
||||
|
||||
.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
|
||||
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
|
||||
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
|
||||
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
|
||||
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
|
||||
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
|
||||
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
|
||||
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
|
||||
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
|
||||
|
||||
.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
|
||||
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
|
||||
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
|
||||
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
|
||||
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
|
||||
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
|
||||
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
|
||||
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
|
||||
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
|
||||
|
||||
.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
|
||||
.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
|
||||
.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
|
||||
.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
|
||||
.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
|
||||
.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
|
||||
.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
|
||||
.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
|
||||
.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
|
||||
|
||||
.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
|
||||
.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
|
||||
.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
|
||||
.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
|
||||
.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
|
||||
.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
|
||||
.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
|
||||
.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
|
||||
.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
|
||||
|
||||
.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
|
||||
.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
|
||||
.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
|
||||
.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
|
||||
.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
|
||||
.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
|
||||
.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
|
||||
.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
|
||||
.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
|
||||
|
||||
.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
|
||||
.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
|
||||
.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
|
||||
.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
|
||||
.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
|
||||
.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
|
||||
.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
|
||||
.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
|
||||
.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
|
||||
|
||||
.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
|
||||
.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
|
||||
.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
|
||||
.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
|
||||
.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
|
||||
.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
|
||||
.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
|
||||
.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
|
||||
.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
|
||||
|
||||
.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
|
||||
.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
|
||||
.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
|
||||
.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
|
||||
.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
|
||||
.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
|
||||
.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
|
||||
.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
|
||||
.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
|
||||
|
||||
.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
|
||||
.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
|
||||
.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
|
||||
.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
|
||||
.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
|
||||
.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
|
||||
.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
|
||||
.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
|
||||
.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
|
||||
|
||||
.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
|
||||
.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
|
||||
.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
|
||||
.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
|
||||
.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
|
||||
.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
|
||||
.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
|
||||
.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
|
||||
.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
|
||||
|
||||
.bd-white { color: color-contrast($white); background-color: $white; }
|
||||
.bd-black { color: color-contrast($black); background-color: $black; }
|
||||
359
site/assets/scss/_component-examples.scss
Normal file
359
site/assets/scss/_component-examples.scss
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example-snippet {
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
--bd-example-padding: 1rem;
|
||||
|
||||
position: relative;
|
||||
padding: var(--bd-example-padding);
|
||||
margin: 0 ($bd-gutter-x * -.5);
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--bd-example-padding: 1.5rem;
|
||||
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
border-width: 1px;
|
||||
@include border-top-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
+ .bd-code-snippet {
|
||||
@include border-top-radius(0);
|
||||
border: solid $border-color;
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
> .form-control {
|
||||
+ .form-control {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress {
|
||||
margin-top: $spacer;
|
||||
}
|
||||
|
||||
> .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> hr:last-child {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
// Images
|
||||
> svg + svg,
|
||||
> img + img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin: .25rem .125rem;
|
||||
}
|
||||
> .btn-toolbar + .btn-toolbar {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
// List groups
|
||||
> .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
> [class*="list-group-horizontal"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Navbars
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
position: static;
|
||||
margin: calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1) var(--bd-example-padding); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.sticky-bottom {
|
||||
position: static;
|
||||
margin: var(--bd-example-padding) calc(var(--bd-example-padding) * -1) calc(var(--bd-example-padding) * -1); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row [class^="col"],
|
||||
.bd-example-cssgrid .grid > * {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
border: 1px solid rgba(var(--bd-violet-rgb), .25);
|
||||
}
|
||||
|
||||
.bd-example-row .row + .row,
|
||||
.bd-example-cssgrid .grid + .grid {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
|
||||
.bd-example-flex div {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
.example-container {
|
||||
width: 800px;
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
.example-row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
.example-content-main {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(8);
|
||||
}
|
||||
}
|
||||
|
||||
.example-content-secondary {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
||||
// Ratio helpers
|
||||
.bd-example-ratios {
|
||||
.ratio {
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bd-example-ratios-breakpoint {
|
||||
.ratio-4x3 {
|
||||
width: 16rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-offcanvas {
|
||||
.offcanvas {
|
||||
position: static;
|
||||
display: block;
|
||||
height: 200px;
|
||||
visibility: visible;
|
||||
transform: translate(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// scss-docs-start custom-tooltip
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bs-primary);
|
||||
}
|
||||
// scss-docs-end custom-tooltip
|
||||
|
||||
// scss-docs-start custom-popovers
|
||||
.custom-popover {
|
||||
--bs-popover-max-width: 200px;
|
||||
--bs-popover-border-color: var(--bs-primary);
|
||||
--bs-popover-header-bg: var(--bs-primary);
|
||||
--bs-popover-header-color: var(--bs-white);
|
||||
--bs-popover-body-padding-x: 1rem;
|
||||
--bs-popover-body-padding-y: .5rem;
|
||||
}
|
||||
// scss-docs-end custom-popovers
|
||||
|
||||
// Scrollspy demo on fixed height div
|
||||
.scrollspy-example {
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollspy-example-2 {
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.simple-list-example-scrollspy {
|
||||
.active {
|
||||
background-color: rgba(var(--bd-violet-rgb), .15);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
[class^="border"] {
|
||||
display: inline-block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-rounded-utils {
|
||||
[class*="rounded"] {
|
||||
margin: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-position-utils {
|
||||
position: relative;
|
||||
padding: 2rem;
|
||||
|
||||
.position-relative {
|
||||
height: 200px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.position-absolute {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-color: $dark;
|
||||
@include border-radius();
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-position-examples {
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholders
|
||||
.bd-example-placeholder-cards {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Toasts
|
||||
.bd-example-toasts {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
//
|
||||
// Code snippets
|
||||
//
|
||||
|
||||
.highlight {
|
||||
position: relative;
|
||||
padding: .75rem ($bd-gutter-x * .5);
|
||||
margin-bottom: 1rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: .75rem 1.25rem;
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .625rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: .625rem;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@include font-size(inherit);
|
||||
color: $gray-900; // Effectively the base text color
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0 ($bd-gutter-x * -.5) $spacer;
|
||||
|
||||
.highlight {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight-toolbar {
|
||||
border: solid $border-color;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
126
site/assets/scss/_content.scss
Normal file
126
site/assets/scss/_content.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
//
|
||||
// Bootstrap docs content theming
|
||||
//
|
||||
|
||||
.bd-content {
|
||||
// Offset content from fixed navbar when jumping to headings
|
||||
> :target {
|
||||
padding-top: 5rem;
|
||||
margin-top: -5rem;
|
||||
}
|
||||
|
||||
> h2:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
> ul li,
|
||||
> ol li {
|
||||
margin-bottom: .25rem;
|
||||
|
||||
// stylelint-disable selector-max-type, selector-max-compound-selectors
|
||||
> p ~ ul {
|
||||
margin-top: -.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
// stylelint-enable selector-max-type, selector-max-compound-selectors
|
||||
}
|
||||
|
||||
// Override Bootstrap defaults
|
||||
> .table,
|
||||
> .table-responsive .table {
|
||||
margin-bottom: 1.5rem;
|
||||
@include font-size(.875rem);
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: 2px solid currentcolor;
|
||||
}
|
||||
|
||||
tbody:not(:first-child) {
|
||||
border-top: 2px solid currentcolor;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent breaking of code
|
||||
// stylelint-disable-next-line selector-max-compound-selectors
|
||||
th,
|
||||
td:first-child > code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-options {
|
||||
td:nth-child(2) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-options td:last-child,
|
||||
.table-utilities td:last-child {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.bd-title {
|
||||
@include font-size(3rem);
|
||||
}
|
||||
|
||||
.bd-lead {
|
||||
@include font-size(1.5rem);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.bd-bg-violet {
|
||||
background-color: $bd-violet;
|
||||
}
|
||||
|
||||
.bi {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.icon-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration-color: rgba($primary, .5);
|
||||
text-underline-offset: .5rem;
|
||||
backface-visibility: hidden;
|
||||
|
||||
.bi {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bi {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-lg-start {
|
||||
@include media-breakpoint-up(lg) {
|
||||
border-left: $border-width solid $border-color;
|
||||
}
|
||||
}
|
||||
16
site/assets/scss/_footer.scss
Normal file
16
site/assets/scss/_footer.scss
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
.bd-footer {
|
||||
a {
|
||||
color: $gray-700;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $link-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
site/assets/scss/_layout.scss
Normal file
57
site/assets/scss/_layout.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.bd-gutter {
|
||||
--bs-gutter-x: #{$bd-gutter-x};
|
||||
}
|
||||
|
||||
.bd-layout {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: grid;
|
||||
grid-template-areas: "sidebar main";
|
||||
grid-template-columns: 1fr 5fr;
|
||||
gap: $grid-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.bd-main {
|
||||
grid-area: main;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
max-width: 760px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"intro"
|
||||
"toc"
|
||||
"content";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
gap: inherit;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-areas:
|
||||
"intro toc"
|
||||
"content toc";
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 4fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-intro {
|
||||
grid-area: intro;
|
||||
}
|
||||
|
||||
.bd-toc {
|
||||
grid-area: toc;
|
||||
}
|
||||
|
||||
.bd-content {
|
||||
grid-area: content;
|
||||
min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
|
||||
}
|
||||
96
site/assets/scss/_masthead.scss
Normal file
96
site/assets/scss/_masthead.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
.bd-masthead {
|
||||
--bd-pink-rgb: #{to-rgb($pink)};
|
||||
padding: 3rem 0;
|
||||
// stylelint-disable
|
||||
background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), .01), rgba(var(--bs-body-bg-rgb), 1) 85%),
|
||||
radial-gradient(ellipse at top left, rgba(var(--bs-primary-rgb), .5), transparent 50%),
|
||||
radial-gradient(ellipse at top right, rgba(var(--bd-accent-rgb), .5), transparent 50%),
|
||||
radial-gradient(ellipse at center right, rgba(var(--bd-violet-rgb), .5), transparent 50%),
|
||||
radial-gradient(ellipse at center left, rgba(var(--bd-pink-rgb), .5), transparent 50%);
|
||||
// stylelint-enable
|
||||
|
||||
h1 {
|
||||
@include font-size(4rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
font-weight: 400;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.bd-code-snippet {
|
||||
margin: 0;
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: 100%;
|
||||
padding: .5rem 1rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background-color: rgba(var(--bs-body-color-rgb), .075);
|
||||
@include border-radius(.5rem);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: -.125rem;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#carbonads { // stylelint-disable-line selector-max-id
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.masthead-followup {
|
||||
.lead {
|
||||
@include font-size(1rem);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@include border-radius(.5rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.lead {
|
||||
@include font-size(1.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-btn-lg {
|
||||
padding: .8rem 2rem;
|
||||
}
|
||||
|
||||
.masthead-followup-icon {
|
||||
padding: 1rem;
|
||||
color: rgba(var(--bg-rgb), 1);
|
||||
background-color: rgba(var(--bg-rgb), .1);
|
||||
background-blend-mode: multiple;
|
||||
@include border-radius(1rem);
|
||||
mix-blend-mode: darken;
|
||||
|
||||
svg {
|
||||
filter: drop-shadow(0 1px 1px #fff);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
91
site/assets/scss/_navbar.scss
Normal file
91
site/assets/scss/_navbar.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.bd-navbar {
|
||||
padding: .75rem 0;
|
||||
background-color: transparent;
|
||||
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
|
||||
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
|
||||
|
||||
.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 {
|
||||
transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
|
||||
|
||||
&: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);
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-min-width: 12rem;
|
||||
--#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
|
||||
@include rfs(.875rem, --#{$prefix}dropdown-font-size);
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.dropdown-item.current {
|
||||
font-weight: 600;
|
||||
background-image: escape-svg($dropdown-active-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $dropdown-item-padding-x top .6rem;
|
||||
background-size: .75rem .75rem;
|
||||
}
|
||||
}
|
||||
15
site/assets/scss/_placeholder-img.scss
Normal file
15
site/assets/scss/_placeholder-img.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
//
|
||||
// Placeholder svg used in the docs.
|
||||
//
|
||||
|
||||
// Remember to update `site/_layouts/examples.html` too if this changes!
|
||||
|
||||
.bd-placeholder-img {
|
||||
@include font-size(1.125rem);
|
||||
user-select: none;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
.bd-placeholder-img-lg {
|
||||
@include font-size(3.5rem);
|
||||
}
|
||||
141
site/assets/scss/_search.scss
Normal file
141
site/assets/scss/_search.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
// stylelint-disable selector-class-pattern
|
||||
|
||||
.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: #{$text-muted};
|
||||
--docsearch-hit-shadow: none;
|
||||
|
||||
z-index: 2000; // Make sure to be over all components showcased in the documentation
|
||||
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
--docsearch-searchbox-background: #{rgba($black, .1)};
|
||||
--docsearch-searchbox-color: #{$white};
|
||||
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
|
||||
--docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)};
|
||||
--docsearch-text-color: #{$white};
|
||||
--docsearch-muted-color: #{rgba($white, .65)};
|
||||
|
||||
width: 100%;
|
||||
height: 38px; // Match Bootstrap inputs
|
||||
margin: 0;
|
||||
border: 1px solid rgba($white, .4);
|
||||
@include border-radius(.375rem);
|
||||
|
||||
.DocSearch-Search-Icon {
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: rgba($bd-accent, 1);
|
||||
|
||||
.DocSearch-Search-Icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: var(--docsearch-searchbox-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button-Keys,
|
||||
.DocSearch-Button-Placeholder {
|
||||
@include media-breakpoint-down(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button-Keys {
|
||||
min-width: 0;
|
||||
padding: .125rem .25rem;
|
||||
background: rgba($black, .25);
|
||||
@include border-radius(.25rem);
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
top: 0;
|
||||
width: auto;
|
||||
height: 1.25rem;
|
||||
padding-right: .125rem;
|
||||
padding-left: .125rem;
|
||||
margin-right: 0;
|
||||
font-size: .875rem;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Commands-Key {
|
||||
padding-left: 1px;
|
||||
font-size: .875rem;
|
||||
background-color: rgba($black, .1);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
@include border-radius(var(--bs-border-radius));
|
||||
}
|
||||
|
||||
.DocSearch-Hits {
|
||||
mark {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit {
|
||||
padding-bottom: 0;
|
||||
@include border-radius(0);
|
||||
|
||||
a {
|
||||
@include border-radius(0);
|
||||
border: solid var(--bs-border-color);
|
||||
border-width: 0 1px 1px;
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
@include border-top-radius(var(--bs-border-radius));
|
||||
border-top-width: 1px;
|
||||
}
|
||||
&:last-child a {
|
||||
@include border-bottom-radius(var(--bs-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
53
site/assets/scss/_sidebar.scss
Normal file
53
site/assets/scss/_sidebar.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.bd-sidebar {
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
// Override collapse behaviors
|
||||
// stylelint-disable-next-line declaration-no-important
|
||||
display: block !important;
|
||||
height: subtract(100vh, 6rem);
|
||||
// Prevent focus styles to be cut off:
|
||||
padding-left: .25rem;
|
||||
margin-left: -.25rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links-nav {
|
||||
@include media-breakpoint-down(lg) {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xs, lg) {
|
||||
column-count: 2;
|
||||
column-gap: 1.5rem;
|
||||
|
||||
.bd-links-group {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.bd-links-span-all {
|
||||
column-span: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links-link {
|
||||
padding: .1875rem .5rem;
|
||||
margin-top: .125rem;
|
||||
margin-left: 1rem;
|
||||
color: rgba($black, .65);
|
||||
text-decoration: if($link-decoration == none, null, none);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
color: rgba($black, .85);
|
||||
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||
background-color: rgba(var(--bd-violet-rgb), .1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
7
site/assets/scss/_skippy.scss
Normal file
7
site/assets/scss/_skippy.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.skippy {
|
||||
background-color: $bd-purple;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
115
site/assets/scss/_syntax.scss
Normal file
115
site/assets/scss/_syntax.scss
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
:root {
|
||||
--base00: #fff;
|
||||
--base01: #f5f5f5;
|
||||
--base02: #c8c8fa;
|
||||
--base03: #565c64;
|
||||
--base04: #030303;
|
||||
--base05: #333;
|
||||
--base06: #fff;
|
||||
--base07: #9a6700;
|
||||
--base08: #bc4c00;
|
||||
--base09: #087990;
|
||||
--base0A: #795da3;
|
||||
--base0B: #183691;
|
||||
--base0C: #183691;
|
||||
--base0D: #795da3;
|
||||
--base0E: #a71d5d;
|
||||
--base0F: #333;
|
||||
}
|
||||
|
||||
.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: #fff;
|
||||
}
|
||||
.gi { color: var(--bs-success); }
|
||||
.gp {
|
||||
font-weight: 600;
|
||||
color: var(--base04);
|
||||
}
|
||||
.gs { font-weight: 600; }
|
||||
.gu {
|
||||
font-weight: 600;
|
||||
color: var(--base0C);
|
||||
}
|
||||
.kc { color: var(--base0E); }
|
||||
.kd { color: var(--base0E); }
|
||||
.kn { color: var(--base0C); }
|
||||
.kp { color: var(--base0E); }
|
||||
.kr { color: var(--base0E); }
|
||||
.kt { color: var(--base0A); }
|
||||
.ld { color: var(--base0C); }
|
||||
.m { color: var(--base09); }
|
||||
.s { color: var(--base0C); }
|
||||
.na { color: var(--base0A); }
|
||||
.nb { color: var(--base05); }
|
||||
.nc { color: var(--base07); }
|
||||
.no { color: var(--base08); }
|
||||
.nd { color: var(--base07); }
|
||||
.ni { color: var(--base08); }
|
||||
.ne { color: var(--base08); }
|
||||
.nf { color: var(--base0B); }
|
||||
.nl { color: var(--base05); }
|
||||
.nn { color: var(--base0A); }
|
||||
.nx { color: var(--base0A); }
|
||||
.py { color: var(--base08); }
|
||||
.nt { color: var(--base08); }
|
||||
.nv { color: var(--base08); }
|
||||
.ow { color: var(--base0C); }
|
||||
.w { color: #fff; }
|
||||
.mf { color: var(--base09); }
|
||||
.mh { color: var(--base09); }
|
||||
.mi { color: var(--base09); }
|
||||
.mo { color: var(--base09); }
|
||||
.sb { color: var(--base0C); }
|
||||
.sc { color: #fff; }
|
||||
.sd { color: var(--base04); }
|
||||
.s2 { color: var(--base0C); }
|
||||
.se { color: var(--base09); }
|
||||
.sh { color: var(--base0C); }
|
||||
.si { color: var(--base09); }
|
||||
.sx { color: var(--base0C); }
|
||||
.sr { color: var(--base0C); }
|
||||
.s1 { color: var(--base0C); }
|
||||
.ss { color: var(--base0C); }
|
||||
.bp { color: var(--base05); }
|
||||
.vc { color: var(--base08); }
|
||||
.vg { color: var(--base08); }
|
||||
.vi { color: var(--base08); }
|
||||
.il { color: var(--base09); }
|
||||
|
||||
// Color commas in rgba() values
|
||||
.m + .o { color: var(--base03); }
|
||||
|
||||
// Fix bash
|
||||
.language-sh .c { color: var(--base03); }
|
||||
|
||||
.chroma {
|
||||
.language-bash,
|
||||
.language-sh {
|
||||
.line::before {
|
||||
color: #777;
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
87
site/assets/scss/_toc.scss
Normal file
87
site/assets/scss/_toc.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
// stylelint-disable selector-max-type
|
||||
|
||||
.bd-toc {
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
height: subtract(100vh, 7rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
@include font-size(.875rem);
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
margin-top: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
code {
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.4rem);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&[aria-expanded="true"] {
|
||||
color: var(--bd-violet);
|
||||
background-color: $white;
|
||||
border-color: var(--bd-violet);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&[aria-expanded="true"] {
|
||||
box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc-collapse {
|
||||
@include media-breakpoint-down(md) {
|
||||
nav {
|
||||
padding: 1.25rem;
|
||||
background-color: var(--bs-gray-100);
|
||||
border: 1px solid $border-color;
|
||||
@include border-radius(.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important; // stylelint-disable-line declaration-no-important
|
||||
}
|
||||
}
|
||||
23
site/assets/scss/_variables.scss
Normal file
23
site/assets/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
// stylelint-disable scss/dollar-variable-default
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #4c0bce;
|
||||
$bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
|
||||
$bd-accent: #ffe484;
|
||||
$dropdown-active-icon: url("data:image/svg+xml,<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>");
|
||||
|
||||
$bd-gutter-x: 3rem;
|
||||
$bd-callout-variants: info, warning, danger !default;
|
||||
|
||||
:root {
|
||||
--bd-purple: #{$bd-purple};
|
||||
--bd-violet: #{$bd-violet};
|
||||
--bd-accent: #{$bd-accent};
|
||||
--bd-violet-rgb: #{to-rgb($bd-violet)};
|
||||
--bd-accent-rgb: #{to-rgb($bd-accent)};
|
||||
--bd-pink-rgb: #{to-rgb($pink-500)};
|
||||
--bd-teal-rgb: #{to-rgb($teal-500)};
|
||||
--docsearch-primary-color: var(--bd-violet);
|
||||
--docsearch-logo-color: var(--bd-violet);
|
||||
}
|
||||
59
site/assets/scss/docs.scss
Normal file
59
site/assets/scss/docs.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/*!
|
||||
* Bootstrap Docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2022 The Bootstrap Authors
|
||||
* Copyright 2011-2022 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
||||
// Dev notes
|
||||
//
|
||||
// Background information on nomenclature and architecture decisions here.
|
||||
//
|
||||
// - Bootstrap functions, variables, and mixins are included for easy reuse.
|
||||
// Doing so gives us access to the same core utilities provided by Bootstrap.
|
||||
// For example, consistent media queries through those mixins.
|
||||
//
|
||||
// - Bootstrap's **docs variables** are prefixed with `$bd-`.
|
||||
// These custom colors avoid collision with the components Bootstrap provides.
|
||||
//
|
||||
// - Classes are prefixed with `.bd-`.
|
||||
// These classes indicate custom-built or modified components for the design
|
||||
// and layout of the Bootstrap docs. They are not included in our builds.
|
||||
//
|
||||
// Happy Bootstrapping!
|
||||
|
||||
// Load Bootstrap variables and mixins
|
||||
@import "../../../scss/functions";
|
||||
@import "../../../scss/variables";
|
||||
@import "../../../scss/mixins";
|
||||
|
||||
// fusv-disable
|
||||
$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default
|
||||
$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
|
||||
// fusv-enable
|
||||
@import "../../../scss/grid";
|
||||
|
||||
// Load docs components
|
||||
@import "variables";
|
||||
@import "navbar";
|
||||
@import "search";
|
||||
@import "masthead";
|
||||
@import "ads";
|
||||
@import "content";
|
||||
@import "skippy";
|
||||
@import "sidebar";
|
||||
@import "layout";
|
||||
@import "toc";
|
||||
@import "footer";
|
||||
@import "component-examples";
|
||||
@import "buttons";
|
||||
@import "callouts";
|
||||
@import "brand";
|
||||
@import "colors";
|
||||
@import "clipboard-js";
|
||||
@import "placeholder-img";
|
||||
|
||||
// Load docs dependencies
|
||||
@import "syntax";
|
||||
@import "anchor";
|
||||
Loading…
Add table
Add a link
Reference in a new issue