From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- site/assets/js/application.js | 8 +- site/assets/js/code-examples.js | 11 +-- site/assets/js/search.js | 4 +- site/assets/js/snippets.js | 40 ++++++--- site/assets/scss/_ads.scss | 6 +- site/assets/scss/_brand.scss | 4 +- site/assets/scss/_buttons.scss | 25 ++++-- site/assets/scss/_callouts.scss | 9 +- site/assets/scss/_clipboard-js.scss | 8 +- site/assets/scss/_colors.scss | 1 - site/assets/scss/_component-examples.scss | 142 +++++++++++++++++++----------- site/assets/scss/_content.scss | 89 +++++++++++++------ site/assets/scss/_footer.scss | 4 +- site/assets/scss/_masthead.scss | 53 +++++++---- site/assets/scss/_navbar.scss | 64 +++++++++++--- site/assets/scss/_scrolling.scss | 13 +++ site/assets/scss/_search.scss | 33 ++++++- site/assets/scss/_sidebar.scss | 19 +++- site/assets/scss/_syntax.scss | 57 ++++++++---- site/assets/scss/_toc.scss | 36 ++++---- site/assets/scss/_variables.scss | 26 ++++-- site/assets/scss/docs.scss | 8 +- 22 files changed, 462 insertions(+), 198 deletions(-) create mode 100644 site/assets/scss/_scrolling.scss (limited to 'site/assets') diff --git a/site/assets/js/application.js b/site/assets/js/application.js index dec2363..712b31a 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -4,8 +4,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -15,9 +14,10 @@ // Scroll the active sidebar link into view const sidenav = document.querySelector('.bd-sidebar') - if (sidenav) { + const sidenavActiveLink = document.querySelector('.bd-links-nav .active') + + if (sidenav && sidenavActiveLink) { const sidenavHeight = sidenav.clientHeight - const sidenavActiveLink = document.querySelector('.bd-links-nav .active') const sidenavActiveLinkTop = sidenavActiveLink.offsetTop const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight const viewportTop = sidenavActiveLinkTop diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 25486c2..e1f680e 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -4,8 +4,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -14,6 +13,7 @@ (() => { 'use strict' + // Insert copy to clipboard button before .highlight const btnTitle = 'Copy to clipboard' const btnEdit = 'Edit on StackBlitz' @@ -28,7 +28,7 @@ '' ].join('') - // wrap programmatically code blocks and add copy btn. + // Wrap programmatically code blocks and add copy btn. document.querySelectorAll('.highlight') .forEach(element => { if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode @@ -52,11 +52,12 @@ snippetButtonTooltip('.btn-edit', btnEdit) const clipboard = new ClipboardJS('.btn-clipboard', { - target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight') + target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'), + text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd() }) clipboard.on('success', event => { - const iconFirstChild = event.trigger.querySelector('.bi').firstChild + const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger) const namespace = 'http://www.w3.org/1999/xlink' const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href') diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 9bad274..b095d3b 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -40,8 +40,6 @@ return item }) - }, - // Set debug to `true` if you want to inspect the dropdown - debug: false + } }) })() diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 53f8a78..66c7a00 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -6,8 +6,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -20,7 +19,7 @@ // -------- // Tooltips // -------- - // Instantiate all tooltips in a docs or StackBlitz page + // Instantiate all tooltips in a docs or StackBlitz document.querySelectorAll('[data-bs-toggle="tooltip"]') .forEach(tooltip => { new bootstrap.Tooltip(tooltip) @@ -29,7 +28,7 @@ // -------- // Popovers // -------- - // Instantiate all popovers in a docs or StackBlitz page + // Instantiate all popovers in docs or StackBlitz document.querySelectorAll('[data-bs-toggle="popover"]') .forEach(popover => { new bootstrap.Popover(popover) @@ -50,7 +49,7 @@ }) } - // Instantiate all toasts in a docs page only + // Instantiate all toasts in docs pages only document.querySelectorAll('.bd-example .toast') .forEach(toastNode => { const toast = new bootstrap.Toast(toastNode, { @@ -60,24 +59,26 @@ toast.show() }) - // Instantiate all toasts in a docs page only + // 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', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() + toastBootstrap.show() }) } + // js-docs-end live-toast // ------------------------------- // Alerts // ------------------------------- - // Used in 'Show live toast' example in docs or StackBlitz - const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - const alertTrigger = document.getElementById('liveAlertBtn') + // Used in 'Show live alert' example in docs or StackBlitz + // js-docs-start live-alert + const alertPlaceholder = document.getElementById('liveAlertPlaceholder') const appendAlert = (message, type) => { const wrapper = document.createElement('div') wrapper.innerHTML = [ @@ -90,11 +91,22 @@ 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 @@ -122,6 +134,7 @@ // Modal // ------------------------------- // Modal 'Varying modal content' example in docs and StackBlitz + // js-docs-start varying-modal-content const exampleModal = document.getElementById('exampleModal') if (exampleModal) { exampleModal.addEventListener('show.bs.modal', event => { @@ -129,6 +142,8 @@ const button = event.relatedTarget // Extract info from data-bs-* attributes const recipient = button.getAttribute('data-bs-whatever') + // If necessary, you could initiate an Ajax request here + // and then do the updating in a callback. // Update the modal's content. const modalTitle = exampleModal.querySelector('.modal-title') @@ -138,6 +153,7 @@ modalBodyInput.value = recipient }) } + // js-docs-end varying-modal-content // ------------------------------- // Offcanvas diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss index b9369eb..cc56340 100644 --- a/site/assets/scss/_ads.scss +++ b/site/assets/scss/_ads.scss @@ -14,10 +14,10 @@ @include font-size(.8125rem); line-height: 1.4; text-align: left; - background-color: $gray-100; + background-color: var(--bs-tertiary-bg); a { - color: $gray-800; + color: var(--bs-body-color); text-decoration: none; } @@ -34,5 +34,5 @@ .carbon-poweredby { display: block; margin-top: .75rem; - color: $gray-700 !important; + color: var(--bs-body-color) !important; } diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss index 9637cfb..03fe2fe 100644 --- a/site/assets/scss/_brand.scss +++ b/site/assets/scss/_brand.scss @@ -15,13 +15,13 @@ // Individual items .bd-brand-item { + .bd-brand-item { - border-top: 1px solid $white; + border-top: 1px solid var(--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 13bd6e4..8e4c383 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -6,9 +6,8 @@ .btn-bd-primary { --bs-btn-font-weight: 600; --bs-btn-color: var(--bs-white); - --bs-btn-bg: var(--bd-violet); - --bs-btn-border-color: var(--bd-violet); - --bs-btn-border-radius: .5rem; + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; @@ -33,13 +32,21 @@ } .btn-bd-light { + --btn-custom-color: #{mix($bd-violet, $white, 75%)}; + --bs-btn-color: var(--bs-gray-600); - --bs-btn-border-color: var(--bs-gray-400); - --bs-btn-hover-color: var(--bd-violet); - --bs-btn-hover-border-color: var(--bd-violet); - --bs-btn-active-color: var(--bd-violet); + --bs-btn-border-color: var(--bs-border-color); + --bs-btn-hover-color: var(--btn-custom-color); + --bs-btn-hover-border-color: var(--btn-custom-color); + --bs-btn-active-color: var(--btn-custom-color); --bs-btn-active-bg: var(--bs-white); - --bs-btn-active-border-color: var(--bd-violet); - --bs-btn-focus-border-color: var(--bd-violet); + --bs-btn-active-border-color: var(--btn-custom-color); + --bs-btn-focus-border-color: var(--btn-custom-color); --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } + +.bd-btn-lg { + --bs-btn-border-radius: .5rem; + + padding: .8125rem 2rem; +} diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index 4513a7d..c3e5629 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -3,9 +3,13 @@ // .bd-callout { + --#{$prefix}link-color-rgb: var(--bd-callout-link); + --#{$prefix}code-color: var(--bd-callout-code-color); + padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; + color: var(--bd-callout-color, inherit); background-color: var(--bd-callout-bg, var(--bs-gray-100)); border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300)); @@ -29,7 +33,8 @@ // Variations @each $variant in $bd-callout-variants { .bd-callout-#{$variant} { - --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075); - --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5); + --bd-callout-color: var(--bs-#{$variant}-text-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 3a876a5..de709d0 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -22,13 +22,13 @@ display: block; padding: .5em; line-height: 1; - color: $gray-900; - background-color: $gray-100; + color: var(--bs-body-color); + background-color: var(--bd-pre-bg); border: 0; @include border-radius(.25rem); &:hover { - color: $primary; + color: var(--bs-link-hover-color); } &:focus { @@ -39,6 +39,6 @@ .btn-clipboard { position: relative; z-index: 2; - margin-top: .75rem; + margin-top: 1.25rem; margin-right: .75rem; } diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index a71a897..da4bbac 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 f4865da..0f1018b 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -2,12 +2,16 @@ // Docs examples // -.bd-example-snippet { - border: solid $border-color; +.bd-code-snippet { + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); border-width: 1px 0; @include media-breakpoint-up(md) { + margin-right: 0; + margin-left: 0; border-width: 1px; + @include border-radius(var(--bs-border-radius)); } } @@ -16,8 +20,8 @@ position: relative; padding: var(--bd-example-padding); - margin: 0 ($bd-gutter-x * -.5); - border: solid $border-color; + margin: 0 ($bd-gutter-x * -.5) 1rem; + border: solid var(--bs-border-color); border-width: 1px 0; @include clearfix(); @@ -27,13 +31,7 @@ margin-right: 0; margin-left: 0; border-width: 1px; - @include border-top-radius(var(--bs-border-radius)); - } - - + .bd-code-snippet { - @include border-top-radius(0); - border: solid $border-color; - border-width: 0 1px 1px; + @include border-radius(var(--bs-border-radius)); } + p { @@ -58,7 +56,8 @@ display: block; } - > :last-child { + > :last-child, + > nav:last-child .breadcrumb { margin-bottom: 0; } @@ -115,11 +114,12 @@ // .bd-example-row [class^="col"], -.bd-example-cssgrid .grid > * { +.bd-example-cols [class^="col"] > *, +.bd-example-cssgrid [class*="grid"] > * { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(var(--bd-violet-rgb), .1); - border: 1px solid rgba(var(--bd-violet-rgb), .25); + background-color: rgba(var(--bd-violet-rgb), .15); + border: 1px solid rgba(var(--bd-violet-rgb), .3); } .bd-example-row .row + .row, @@ -129,12 +129,12 @@ .bd-example-row-flex-cols .row { min-height: 10rem; - background-color: rgba(255, 0, 0, .1); + background-color: rgba(var(--bd-violet-rgb), .15); } -.bd-example-flex div { - background-color: rgba($bd-purple, .15); - border: 1px solid rgba($bd-purple, .15); +.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 @@ -176,9 +176,9 @@ .ratio { display: inline-block; width: 10rem; - color: $gray-600; - background-color: $gray-100; - border: var(--#{$prefix}border-width) solid var(--#{$prefix}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; @@ -208,8 +208,14 @@ } // Tooltips -.tooltip-demo a { - white-space: nowrap; +.tooltip-demo { + a { + white-space: nowrap; + } + + .btn { + margin: .25rem .125rem; + } } // scss-docs-start custom-tooltip @@ -253,7 +259,7 @@ width: 5rem; height: 5rem; margin: .25rem; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } } @@ -269,13 +275,13 @@ .position-relative { height: 200px; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } .position-absolute { width: 2rem; height: 2rem; - background-color: $dark; + background-color: var(--bs-body-color); @include border-radius(); } } @@ -302,6 +308,39 @@ 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 // @@ -309,19 +348,24 @@ .highlight { position: relative; padding: .75rem ($bd-gutter-x * .5); - margin-bottom: 1rem; - background-color: var(--bs-gray-100); + background-color: var(--bd-pre-bg); @include media-breakpoint-up(md) { padding: .75rem 1.25rem; - @include border-radius(var(--bs-border-radius)); + @include border-radius(calc(var(--bs-border-radius) - 1px)); + } + + @include media-breakpoint-up(lg) { + pre { + margin-right: 1.875rem; + } } pre { - padding: 0; - margin-top: .625rem; - margin-right: 1.875rem; - margin-bottom: .625rem; + padding: .25rem 0 .875rem; + margin-top: .8125rem; + margin-bottom: 0; + overflow: overlay; white-space: pre; background-color: transparent; border: 0; @@ -329,31 +373,27 @@ 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-code-snippet { - margin: 0 ($bd-gutter-x * -.5) $spacer; - - .highlight { - margin-bottom: 0; - } +.highlight-toolbar { + background-color: var(--bd-pre-bg); - .bd-example { - margin: 0; - border: 0; + + .highlight { + @include border-top-radius(0); } +} - @include media-breakpoint-up(md) { - margin-right: 0; - margin-left: 0; - @include border-radius($border-radius); +.bd-file-ref { + .highlight-toolbar { + @include media-breakpoint-up(md) { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } } } -.highlight-toolbar { - border: solid $border-color; - border-width: 1px 0; +.bd-content .bd-code-snippet { + margin-bottom: 1rem; } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index cd59433..ba053df 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -3,12 +3,13 @@ // .bd-content { - // Offset content from fixed navbar when jumping to headings - > :target { - padding-top: 5rem; - margin-top: -5rem; + > h2, + > h3, + > h4 { + --bs-heading-color: var(--bs-emphasis-color); } + // Offset content from fixed navbar when jumping to headings > h2:not(:first-child) { margin-top: 3rem; } @@ -32,6 +33,9 @@ // Override Bootstrap defaults > .table, > .table-responsive .table { + --bs-table-border-color: var(--bs-border-color); + + max-width: 100%; margin-bottom: 1.5rem; @include font-size(.875rem); @@ -60,6 +64,14 @@ } } + th { + color: var(--bs-emphasis-color); + } + + strong { + color: var(--bs-emphasis-color); + } + // Prevent breaking of code // stylelint-disable-next-line selector-max-compound-selectors th, @@ -80,7 +92,18 @@ 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); } @@ -89,38 +112,52 @@ font-weight: 300; } -.bd-bg-violet { - background-color: $bd-violet; -} - .bi { width: 1em; height: 1em; + vertical-align: -.125em; 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 +.border-lg-start { + @include media-breakpoint-up(lg) { + border-left: var(--bs-border-width) solid var(--bs-border-color); } +} - &:hover { - .bi { - transform: translate3d(5px, 0, 0); - } +// 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}; + } -.border-lg-start { - @include media-breakpoint-up(lg) { - border-left: $border-width solid $border-color; + .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 87cee6d..42e1ca0 100644 --- a/site/assets/scss/_footer.scss +++ b/site/assets/scss/_footer.scss @@ -4,12 +4,12 @@ .bd-footer { a { - color: $gray-700; + color: var(--bs-body-color); text-decoration: none; &:hover, &:focus { - color: $link-color; + color: var(--bs-link-hover-color); text-decoration: underline; } } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 81d4d99..d74d1ec 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -10,18 +10,20 @@ // stylelint-enable h1 { + --bs-heading-color: var(--bs-emphasis-color); @include font-size(4rem); - line-height: 1; } .lead { @include font-size(1rem); font-weight: 400; - color: $gray-700; + color: var(--bs-secondary-color); } .bd-code-snippet { margin: 0; + border-color: var(--bs-border-color-translucent); + border-width: 1px; @include border-radius(.5rem); } @@ -32,22 +34,27 @@ text-overflow: ellipsis; white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); - @include border-radius(.5rem); + @include border-radius(calc(.5rem - 1px)); @include media-breakpoint-up(lg) { padding-right: 4rem; } + + pre { + padding: 0; + margin: .625rem 0; + overflow: hidden; + } } .btn-clipboard { position: absolute; - top: -.125rem; + top: -.625rem; right: 0; background-color: transparent; } #carbonads { // stylelint-disable-line selector-max-id - margin-right: auto; - margin-left: auto; + margin-inline: auto; } @include media-breakpoint-up(md) { @@ -58,12 +65,14 @@ } .masthead-followup { - .lead { - @include font-size(1rem); + h2, + h3, + h4 { + --bs-heading-color: var(--bs-emphasis-color); } - .highlight { - @include border-radius(.5rem); + .lead { + @include font-size(1rem); } @include media-breakpoint-up(md) { @@ -73,10 +82,6 @@ } } -.bd-btn-lg { - padding: .8rem 2rem; -} - .masthead-followup-icon { padding: 1rem; color: rgba(var(--bg-rgb), 1); @@ -86,7 +91,7 @@ mix-blend-mode: darken; svg { - filter: drop-shadow(0 1px 1px #fff); + filter: drop-shadow(0 1px 1px var(--bs-body-bg)); } } @@ -94,3 +99,21 @@ background-color: var(--bd-accent); box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75); } + +.animate-img { + > img { + @include transition(transform .2s ease-in-out); + } + + &:hover > img { + transform: scale(1.1); + } +} + +@if $enable-dark-mode { + [data-bs-theme="dark"] { + .masthead-followup-icon { + mix-blend-mode: lighten; + } + } +} diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 0cff3e2..110797b 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,8 +1,16 @@ .bd-navbar { padding: .75rem 0; background-color: transparent; - background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); + box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); + + &::after { + position: absolute; + inset: 0; + z-index: -1; + display: block; + content: ""; + background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + } .bd-navbar-toggle { @include media-breakpoint-down(lg) { @@ -30,7 +38,8 @@ } .navbar-brand { - transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + color: $white; + @include transition(transform .2s ease-in-out); &:hover { transform: rotate(-5deg) scale(1.1); @@ -60,7 +69,7 @@ } .offcanvas-lg { - background-color: var(--bd-violet); + background-color: var(--bd-violet-bg); border-left: 0; @include media-breakpoint-down(lg) { @@ -75,17 +84,46 @@ } .dropdown-menu { - --#{$prefix}dropdown-min-width: 12rem; - --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); - @include rfs(.875rem, --#{$prefix}dropdown-font-size); + --bs-dropdown-min-width: 12rem; + --bs-dropdown-padding-x: .25rem; + --bs-dropdown-padding-y: .25rem; + --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1); + @include rfs(.875rem, --bs-dropdown-font-size); + @include font-size(.875rem); + @include border-radius(.5rem); box-shadow: $dropdown-box-shadow; + + li + li { + margin-top: .125rem; + } + + .dropdown-item { + @include border-radius(.25rem); + + &:active { + .bi { + color: inherit !important; // stylelint-disable-line declaration-no-important + } + } + } + + .active { + font-weight: 600; + + .bi { + display: block !important; // stylelint-disable-line declaration-no-important + } + } } - .dropdown-item.current { - font-weight: 600; - background-image: escape-svg($dropdown-active-icon); - background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; + .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/_scrolling.scss b/site/assets/scss/_scrolling.scss new file mode 100644 index 0000000..2017960 --- /dev/null +++ b/site/assets/scss/_scrolling.scss @@ -0,0 +1,13 @@ +// When navigating with the keyboard, prevent focus from landing behind the sticky header + +main { + a, + button, + 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 index 01e9d03..ca1e5b0 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -1,5 +1,30 @@ // stylelint-disable selector-class-pattern +:root { + --docsearch-primary-color: var(--bd-violet); + --docsearch-logo-color: var(--bd-violet); +} + +@include color-mode(dark, true) { + // From here, the values are copied from https://cdn.jsdelivr.net/npm/@docsearch/css@3 + // in html[data-theme="dark"] selector + // and are slightly modified for formatting purpose + --docsearch-text-color: #f5f6f7; + --docsearch-container-background: rgba(9, 10, 17, .8); + --docsearch-modal-background: #15172a; + --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309; + --docsearch-searchbox-background: #090a11; + --docsearch-searchbox-focus-background: #000; + --docsearch-hit-color: #bec3c9; + --docsearch-hit-shadow: none; + --docsearch-hit-background: #090a11; + --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b); + --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, 0 2px 2px 0 rgba(3, 4, 9, .3); + --docsearch-footer-background: #1e2136; + --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, .5), 0 -4px 8px 0 rgba(0, 0, 0, .2); + --docsearch-muted-color: #7f8497; +} + .bd-search { position: relative; @@ -19,7 +44,7 @@ } .DocSearch-Container { - --docsearch-muted-color: #{$text-muted}; + --docsearch-muted-color: var(--bs-secondary-color); --docsearch-hit-shadow: none; z-index: 2000; // Make sure to be over all components showcased in the documentation @@ -139,3 +164,9 @@ display: flex; align-items: center; } + +// Fix --docsearch-logo-color that doesn't do anything +.DocSearch-Logo svg .cls-1, +.DocSearch-Logo svg .cls-2 { + fill: var(--docsearch-logo-color); +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index ed76b3c..6f1ef29 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -11,6 +11,17 @@ margin-left: -.25rem; overflow-y: auto; } + + @include media-breakpoint-down(lg) { + .offcanvas-lg { + border-right-color: var(--bs-border-color); + box-shadow: $box-shadow-lg; + } + } +} + +.bd-links-heading { + color: var(--bs-emphasis-color); } .bd-links-nav { @@ -35,16 +46,16 @@ .bd-links-link { padding: .1875rem .5rem; margin-top: .125rem; - margin-left: 1rem; - color: rgba($black, .65); + margin-left: 1.125rem; + color: var(--bs-body-color); text-decoration: if($link-decoration == none, null, none); &:hover, &:focus, &.active { - color: rgba($black, .85); + color: var(--bs-emphasis-color); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba(var(--bd-violet-rgb), .1); + background-color: var(--bd-sidebar-link-bg); } &.active { diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 106032c..38ac11f 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -1,22 +1,49 @@ -:root { - --base00: #fff; - --base01: #f5f5f5; +:root, +[data-bs-theme="light"] { + // --base00: #fff; + // --base01: #f5f5f5; --base02: #c8c8fa; --base03: #565c64; - --base04: #030303; + --base04: #666; --base05: #333; --base06: #fff; - --base07: #9a6700; - --base08: #bc4c00; - --base09: #087990; - --base0A: #795da3; - --base0B: #183691; - --base0C: #183691; - --base0D: #795da3; - --base0E: #a71d5d; + --base07: #{$teal-700}; // #9a6700 + --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00 + --base09: #{$cyan-700}; // #087990 + --base0A: #{$purple-500}; // #795da3 + --base0B: #{$blue-700}; // #183691 + --base0C: #{$blue-700}; // #183691 + --base0D: #{$purple-500}; // #795da3 + --base0E: #{$pink-600}; // #a71d5d --base0F: #333; } +@include color-mode(dark, true) { + // --base00: #282c34; + // --base01: #353b45; + --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); } @@ -33,7 +60,7 @@ .ge { font-style: italic; } .gh { font-weight: 600; - color: #fff; + color: var(--base0A); } .gi { color: var(--bs-success); } .gp { @@ -101,14 +128,14 @@ .language-bash, .language-sh { .line::before { - color: #777; + color: var(--base03); content: "$ "; user-select: none; } } .language-powershell::before { - color: #009; + color: var(--base0C); content: "PM> "; user-select: none; } diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 512a11b..32bf3cf 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) { @@ -20,19 +20,24 @@ 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; + + &:hover, + &.active { + color: var(--bd-toc-color); + border-left-color: var(--bd-toc-color); + } - &:not(:hover) { - text-decoration: none; + &.active { + font-weight: 500; } code { @@ -52,15 +57,16 @@ } @include media-breakpoint-down(md) { - border: 1px solid $border-color; - @include border-radius(.4rem); + color: var(--bs-body-color); + border: 1px solid var(--bs-border-color); + @include border-radius(var(--bs-border-radius)); &:hover, &:focus, &:active, &[aria-expanded="true"] { color: var(--bd-violet); - background-color: $white; + background-color: var(--bs-body-bg); border-color: var(--bd-violet); } @@ -74,10 +80,10 @@ .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); + 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)); } } diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index b460392..5e8ab5d 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -1,16 +1,14 @@ -// 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,"); +$bd-accent: #ffe484; $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; -:root { +:root, +[data-bs-theme="light"] { --bd-purple: #{$bd-purple}; --bd-violet: #{$bd-violet}; --bd-accent: #{$bd-accent}; @@ -18,6 +16,20 @@ $bd-callout-variants: info, warning, danger !default; --bd-accent-rgb: #{to-rgb($bd-accent)}; --bd-pink-rgb: #{to-rgb($pink-500)}; --bd-teal-rgb: #{to-rgb($teal-500)}; - --docsearch-primary-color: var(--bd-violet); - --docsearch-logo-color: var(--bd-violet); + --bd-violet-bg: var(--bd-violet); + --bd-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 5214934..4ab417e 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -1,7 +1,6 @@ /*! * Bootstrap Docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -29,8 +28,8 @@ @import "../../../scss/mixins"; // fusv-disable -$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default -$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default +$enable-grid-classes: false; +$enable-cssgrid: true; // fusv-enable @import "../../../scss/grid"; @@ -53,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default @import "colors"; @import "clipboard-js"; @import "placeholder-img"; +@import "scrolling"; // Load docs dependencies @import "syntax"; -- cgit v1.2.3