diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site')
180 files changed, 2108 insertions, 1710 deletions
diff --git a/vendor/twbs/bootstrap/site/.eslintrc.json b/vendor/twbs/bootstrap/site/.eslintrc.json deleted file mode 100644 index 0a16f82f9..000000000 --- a/vendor/twbs/bootstrap/site/.eslintrc.json +++ /dev/null @@ -1,55 +0,0 @@ -{ - "extends": "../.eslintrc.json", - "env": { - "browser": true, - "node": false - }, - "parserOptions": { - "sourceType": "script" - }, - "plugins": [ - "markdown" - ], - "rules": { - "no-new": "off", - "strict": "error", - "unicorn/no-array-for-each": "off", - "unicorn/numeric-separators-style": "off", - "unicorn/prefer-node-protocol": "off" - }, - "overrides": [ - { - // 2. Enable the Markdown processor for all .md files. - "files": [ - "./**/*.md" - ], - "processor": "markdown/markdown" - }, - { - // In v2, configuration for fenced code blocks is separate from the - // containing Markdown file. Each code block has a virtual filename - // appended to the Markdown file's path. - "files": [ - "./**/*.md/*.js" - ], - // Configuration for fenced code blocks goes with the override for - // the code block's virtual filename, for example: - "parserOptions": { - "ecmaFeatures": { - "impliedStrict": true - } - }, - "rules": { - "no-array-for-each": "off", - "no-labels": "off", - "no-redeclare": "off", - "no-undef": "off", - "no-unused-expressions": "off", - "no-unused-labels": "off", - "no-unused-vars": "off", - "unicorn/no-array-for-each": "off", - "unicorn/numeric-separators-style": "off" - } - } - ] -} diff --git a/vendor/twbs/bootstrap/site/assets/js/application.js b/vendor/twbs/bootstrap/site/assets/js/application.js index dec23635d..6bb71f0c2 100644 --- a/vendor/twbs/bootstrap/site/assets/js/application.js +++ b/vendor/twbs/bootstrap/site/assets/js/application.js @@ -4,8 +4,7 @@ /*! * JavaScript for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ diff --git a/vendor/twbs/bootstrap/site/assets/js/code-examples.js b/vendor/twbs/bootstrap/site/assets/js/code-examples.js index edb13598f..e1f680e7e 100644 --- a/vendor/twbs/bootstrap/site/assets/js/code-examples.js +++ b/vendor/twbs/bootstrap/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 @@ '</div>' ].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,7 +52,8 @@ snippetButtonTooltip('.btn-edit', btnEdit) const clipboard = new ClipboardJS('.btn-clipboard', { - target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight') + target: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight'), + text: trigger => trigger.closest('.bd-code-snippet').querySelector('.highlight').textContent.trimEnd() }) clipboard.on('success', event => { diff --git a/vendor/twbs/bootstrap/site/assets/js/search.js b/vendor/twbs/bootstrap/site/assets/js/search.js index 9bad2749f..b095d3bbd 100644 --- a/vendor/twbs/bootstrap/site/assets/js/search.js +++ b/vendor/twbs/bootstrap/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/vendor/twbs/bootstrap/site/assets/js/snippets.js b/vendor/twbs/bootstrap/site/assets/js/snippets.js index 43b8a095c..66c7a005c 100644 --- a/vendor/twbs/bootstrap/site/assets/js/snippets.js +++ b/vendor/twbs/bootstrap/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,16 +91,18 @@ 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 a docs or StackBlitz page + // Instantiate all non-autoplaying carousels in docs or StackBlitz document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])') .forEach(carousel => { bootstrap.Carousel.getOrCreateInstance(carousel) @@ -131,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 => { @@ -138,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') @@ -147,6 +153,7 @@ modalBodyInput.value = recipient }) } + // js-docs-end varying-modal-content // ------------------------------- // Offcanvas diff --git a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss index 300bdca9c..8e4c3838d 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss @@ -6,9 +6,8 @@ .btn-bd-primary { --bs-btn-font-weight: 600; --bs-btn-color: var(--bs-white); - --bs-btn-bg: var(--bd-violet); - --bs-btn-border-color: var(--bd-violet); - --bs-btn-border-radius: .5rem; + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; @@ -45,3 +44,9 @@ --bs-btn-focus-border-color: var(--btn-custom-color); --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } + +.bd-btn-lg { + --bs-btn-border-radius: .5rem; + + padding: .8125rem 2rem; +} diff --git a/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss b/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss index 016a2ed24..c3e5629a8 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss @@ -3,6 +3,9 @@ // .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; @@ -30,7 +33,7 @@ // Variations @each $variant in $bd-callout-variants { .bd-callout-#{$variant} { - --bd-callout-color: var(--bs-#{$variant}-text); + --bd-callout-color: var(--bs-#{$variant}-text-emphasis); --bd-callout-bg: var(--bs-#{$variant}-bg-subtle); --bd-callout-border: var(--bs-#{$variant}-border-subtle); } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss b/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss index 1e0003bcb..de709d09b 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss @@ -23,12 +23,12 @@ padding: .5em; line-height: 1; color: var(--bs-body-color); - background-color: var(--bs-tertiary-bg); + background-color: var(--bd-pre-bg); border: 0; @include border-radius(.25rem); &:hover { - color: var(--bs-link-color); + 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/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss index 11800a638..14adbe94d 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss @@ -134,7 +134,7 @@ background-color: rgba(var(--bd-violet-rgb), .15); } -.bd-example-flex div { +.bd-example-flex div:not(.vr) { background-color: rgba(var(--bd-violet-rgb), .15); border: 1px solid rgba(var(--bd-violet-rgb), .3); } @@ -314,8 +314,15 @@ min-height: 15rem; > div { - background-color: tint-color($bd-violet, 75%); - border: 1px solid tint-color($bd-violet, 50%); + color: var(--bs-body-bg); + background-color: var(--bd-violet); + border: 1px solid var(--bd-purple); + + > span { + position: absolute; + right: 5px; + bottom: 0; + } } > :nth-child(2) { @@ -344,7 +351,7 @@ position: relative; padding: .75rem ($bd-gutter-x * .5); margin-bottom: 1rem; - background-color: var(--bs-tertiary-bg); + background-color: var(--bd-pre-bg); @include media-breakpoint-up(md) { padding: .75rem 1.25rem; @@ -352,10 +359,11 @@ } pre { - padding: 0; - margin-top: .625rem; + padding: .25rem 0 .875rem; + margin-top: .8125rem; margin-right: 1.875rem; - margin-bottom: .625rem; + margin-bottom: 0; + overflow: overlay; white-space: pre; background-color: transparent; border: 0; @@ -373,6 +381,7 @@ .highlight { margin-bottom: 0; + @include border-top-radius(0); } .bd-example { @@ -388,12 +397,11 @@ } .highlight-toolbar { - background-color: var(--bs-tertiary-bg); - border: solid var(--bs-border-color); - border-width: 1px 0; + background-color: var(--bd-pre-bg); +} - .btn-clipboard { - margin-top: 0; - margin-right: 0; +.bd-scss-docs { + .highlight-toolbar { + @include border-top-radius(calc(var(--bs-border-radius) + 1px)); } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_content.scss b/vendor/twbs/bootstrap/site/assets/scss/_content.scss index 14d27b2fd..ba053dfaf 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_content.scss +++ b/vendor/twbs/bootstrap/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; } @@ -102,6 +103,7 @@ } .bd-title { + --bs-heading-color: var(--bs-emphasis-color); @include font-size(3rem); } @@ -117,26 +119,6 @@ fill: currentcolor; } -.icon-link { - display: flex; - align-items: center; - text-decoration-color: rgba($primary, .5); - text-underline-offset: .5rem; - backface-visibility: hidden; - - .bi { - width: 1.5em; - height: 1.5em; - transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list - } - - &:hover { - .bi { - transform: translate3d(5px, 0, 0); - } - } -} - .border-lg-start { @include media-breakpoint-up(lg) { border-left: var(--bs-border-width) solid var(--bs-border-color); diff --git a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss index 52b282fcf..33015d681 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss @@ -10,6 +10,7 @@ // stylelint-enable h1 { + --bs-heading-color: var(--bs-emphasis-color); @include font-size(4rem); } @@ -36,10 +37,18 @@ @include media-breakpoint-up(lg) { padding-right: 4rem; } + + pre { + padding: 0; + margin-top: .625rem; + margin-right: 1.875rem; + margin-bottom: .625rem; + overflow: hidden; + } } .btn-clipboard { position: absolute; - top: -.125rem; + top: -.625rem; right: 0; background-color: transparent; } @@ -56,6 +65,12 @@ } .masthead-followup { + h2, + h3, + h4 { + --bs-heading-color: var(--bs-emphasis-color); + } + .lead { @include font-size(1rem); } @@ -71,10 +86,6 @@ } } -.bd-btn-lg { - padding: .8rem 2rem; -} - .masthead-followup-icon { padding: 1rem; color: rgba(var(--bg-rgb), 1); @@ -95,7 +106,7 @@ .animate-img { > img { - transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + @include transition(transform .2s ease-in-out); } &:hover > img { diff --git a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss index 9f1f4e71a..110797b98 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss @@ -9,7 +9,7 @@ z-index: -1; display: block; content: ""; - background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); } .bd-navbar-toggle { @@ -39,7 +39,7 @@ .navbar-brand { color: $white; - transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list + @include transition(transform .2s ease-in-out); &:hover { transform: rotate(-5deg) scale(1.1); @@ -116,6 +116,10 @@ } } } + + .dropdown-menu-end { + --bs-dropdown-min-width: 8rem; + } } @include color-mode(dark) { diff --git a/vendor/twbs/bootstrap/site/assets/scss/_search.scss b/vendor/twbs/bootstrap/site/assets/scss/_search.scss index 01e9d036e..ca1e5b060 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_search.scss +++ b/vendor/twbs/bootstrap/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/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss b/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss index 092307e05..0cc26d76b 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss @@ -1,40 +1,40 @@ :root, [data-bs-theme="light"] { - --base00: #fff; - --base01: #f5f5f5; + // --base00: #fff; + // --base01: #f5f5f5; --base02: #c8c8fa; --base03: #565c64; - --base04: #030303; + --base04: #666; --base05: #333; --base06: #fff; - --base07: #9a6700; - --base08: #bc4c00; - --base09: #087990; - --base0A: #795da3; - --base0B: #183691; - --base0C: #183691; - --base0D: #795da3; - --base0E: #a71d5d; + --base07: #{$teal-700}; // #9a6700 + --base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00 + --base09: #{$cyan-700}; // #087990 + --base0A: #{$purple-500}; // #795da3 + --base0B: #{$blue-700}; // #183691 + --base0C: #{$blue-700}; // #183691 + --base0D: #{$purple-500}; // #795da3 + --base0E: #{$pink-600}; // #a71d5d --base0F: #333; } @include color-mode(dark, true) { - --base00: #282c34; - --base01: #353b45; + // --base00: #282c34; + // --base01: #353b45; --base02: #3e4451; --base03: #868e96; - --base04: #565c64; + --base04: #868e96; --base05: #abb2bf; --base06: #b6bdca; - --base07: #d19a66; - --base08: #e06c75; - --base09: #d19a66; - --base0A: #e5c07b; - --base0B: #98c379; - --base0C: #56b6c2; - --base0D: #61afef; - --base0E: #c678dd; - --base0F: #be5046; + --base07: #{$orange-300}; // #d19a66 + --base08: #{$cyan-300}; + --base09: #{$orange-300}; // #d19a66 + --base0A: #{$yellow-200}; // #e5c07b + --base0B: #{$teal-300}; // #98c379 + --base0C: #{$teal-300}; // #56b6c2 + --base0D: #{$blue-300}; // #61afef + --base0E: #{$indigo-200}; // #c678dd + --base0F: #{$red-300}; // #be5046 } .hl { background-color: var(--base02); } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_toc.scss b/vendor/twbs/bootstrap/site/assets/scss/_toc.scss index ffa6a0c44..32bf3cf62 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_toc.scss +++ b/vendor/twbs/bootstrap/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 { @@ -75,7 +80,7 @@ .bd-toc-collapse { @include media-breakpoint-down(md) { nav { - padding: 1.25rem; + padding: 1.25rem 1.25rem 1.25rem 1rem; background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); @include border-radius(var(--bs-border-radius)); diff --git a/vendor/twbs/bootstrap/site/assets/scss/_variables.scss b/vendor/twbs/bootstrap/site/assets/scss/_variables.scss index b3730ebef..5e8ab5d6c 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_variables.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_variables.scss @@ -1,10 +1,8 @@ -// 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; +$bd-accent: #ffe484; $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; @@ -18,15 +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/vendor/twbs/bootstrap/site/assets/scss/docs.scss b/vendor/twbs/bootstrap/site/assets/scss/docs.scss index 509cc33fd..4ab417e96 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/docs.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/docs.scss @@ -1,6 +1,6 @@ /*! * Bootstrap Docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. * For details, see https://creativecommons.org/licenses/by/3.0/. */ @@ -28,8 +28,8 @@ @import "../../../scss/mixins"; // fusv-disable -$enable-grid-classes: false; // stylelint-disable-line scss/dollar-variable-default -$enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default +$enable-grid-classes: false; +$enable-cssgrid: true; // fusv-enable @import "../../../scss/grid"; @@ -52,6 +52,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default @import "colors"; @import "clipboard-js"; @import "placeholder-img"; +@import "scrolling"; // Load docs dependencies @import "syntax"; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md b/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md index 9c31da07f..59f262eff 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/about/brand.md @@ -10,7 +10,7 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline ## Logo -When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap. +When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. <div class="bd-brand-item px-2 py-5 mb-3 border rounded-3"> <img class="d-block img-fluid mx-auto" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="256" height="204"> @@ -29,19 +29,15 @@ Our logo mark is also available in black and white. All rules for our primary lo ## Name -Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_. +Bootstrap should always be referred to as just **Bootstrap**. No capital _s_. <div class="bd-brand-logos d-sm-flex text-center border rounded-3 overflow-hidden w-100 mb-3"> - <div class="bd-brand-item w-100 p-3"> + <div class="bd-brand-item w-100 px-2 py-5"> <div class="h3">Bootstrap</div> <strong class="text-success">Correct</strong> </div> - <div class="bd-brand-item w-100 p-3"> - <div class="h3 text-muted">BootStrap</div> - <strong class="text-danger">Incorrect</strong> - </div> - <div class="bd-brand-item w-100 p-3"> - <div class="h3 text-muted">Twitter Bootstrap</div> + <div class="bd-brand-item w-100 px-2 py-5"> + <div class="h3 text-body-secondary">BootStrap</div> <strong class="text-danger">Incorrect</strong> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md index 33399772a..227d11a86 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/accordion.md @@ -24,36 +24,36 @@ Click the accordions below to expand/collapse the accordion content. {{< example >}} <div class="accordion" id="accordionExample"> <div class="accordion-item"> - <h2 class="accordion-header" id="headingOne"> + <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> - <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> + <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> - <h2 class="accordion-header" id="headingTwo"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> - <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> + <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> - <h2 class="accordion-header" id="headingThree"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> - <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> + <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> @@ -64,37 +64,37 @@ Click the accordions below to expand/collapse the accordion content. ### Flush -Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. +Add `.accordion-flush` to remove some borders and rounded corners to render accordions edge-to-edge with their parent container. {{< example class="bg-body-secondary" >}} <div class="accordion accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> - <h2 class="accordion-header" id="flush-headingOne"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Accordion Item #1 </button> </h2> - <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> + <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> - <h2 class="accordion-header" id="flush-headingTwo"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Accordion Item #2 </button> </h2> - <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> + <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> <div class="accordion-item"> - <h2 class="accordion-header" id="flush-headingThree"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Accordion Item #3 </button> </h2> - <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample"> + <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div> </div> </div> @@ -108,36 +108,36 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord {{< example >}} <div class="accordion" id="accordionPanelsStayOpenExample"> <div class="accordion-item"> - <h2 class="accordion-header" id="panelsStayOpen-headingOne"> + <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne"> Accordion Item #1 </button> </h2> - <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne"> + <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> - <h2 class="accordion-header" id="panelsStayOpen-headingTwo"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"> Accordion Item #2 </button> </h2> - <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo"> + <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> - <h2 class="accordion-header" id="panelsStayOpen-headingThree"> + <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree"> Accordion Item #3 </button> </h2> - <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree"> + <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md index 7ea5b9b42..b6e78ea42 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/alerts.md @@ -38,28 +38,7 @@ Click the button below to show an alert (hidden with inline styles to start), th We use the following JavaScript to trigger our live alert demo: -```js -const alertPlaceholder = document.getElementById('liveAlertPlaceholder') - -const alert = (message, type) => { - const wrapper = document.createElement('div') - wrapper.innerHTML = [ - `<div class="alert alert-${type} alert-dismissible" role="alert">`, - ` <div>${message}</div>`, - ' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>', - '</div>' - ].join('') - - alertPlaceholder.append(wrapper) -} - -const alertTrigger = document.getElementById('liveAlertBtn') -if (alertTrigger) { - alertTrigger.addEventListener('click', () => { - alert('Nice, you triggered this alert message!', 'success') - }) -} -``` +{{< js-docs name="live-alert" file="site/assets/js/snippets.js" >}} ### Link color diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md index 0012f9748..fc68fc580 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/breadcrumb.md @@ -54,11 +54,8 @@ $breadcrumb-divider: quote(">"); It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. - {{< callout info >}} -### Using embedded SVG - -Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape. +**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info. {{< /callout >}} {{< example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md index 8f7d2d6a9..9c6356249 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/button-group.md @@ -18,12 +18,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`. </div> {{< /example >}} -{{< callout warning >}} -##### Ensure correct `role` and provide a label - -In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`. - -In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used. +{{< callout info >}} +Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them. {{< /callout >}} These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}). @@ -145,21 +141,21 @@ Instead of applying button sizing classes to every button in a group, just add ` {{< example >}} <div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> - <button type="button" class="btn btn-outline-dark">Left</button> - <button type="button" class="btn btn-outline-dark">Middle</button> - <button type="button" class="btn btn-outline-dark">Right</button> + <button type="button" class="btn btn-outline-primary">Left</button> + <button type="button" class="btn btn-outline-primary">Middle</button> + <button type="button" class="btn btn-outline-primary">Right</button> </div> <br> <div class="btn-group" role="group" aria-label="Default button group"> - <button type="button" class="btn btn-outline-dark">Left</button> - <button type="button" class="btn btn-outline-dark">Middle</button> - <button type="button" class="btn btn-outline-dark">Right</button> + <button type="button" class="btn btn-outline-primary">Left</button> + <button type="button" class="btn btn-outline-primary">Middle</button> + <button type="button" class="btn btn-outline-primary">Right</button> </div> <br> <div class="btn-group btn-group-sm" role="group" aria-label="Small button group"> - <button type="button" class="btn btn-outline-dark">Left</button> - <button type="button" class="btn btn-outline-dark">Middle</button> - <button type="button" class="btn btn-outline-dark">Right</button> + <button type="button" class="btn btn-outline-primary">Left</button> + <button type="button" class="btn btn-outline-primary">Middle</button> + <button type="button" class="btn btn-outline-primary">Right</button> </div> {{< /example >}} @@ -190,12 +186,12 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli {{< example >}} <div class="btn-group-vertical" role="group" aria-label="Vertical button group"> - <button type="button" class="btn btn-dark">Button</button> - <button type="button" class="btn btn-dark">Button</button> - <button type="button" class="btn btn-dark">Button</button> - <button type="button" class="btn btn-dark">Button</button> - <button type="button" class="btn btn-dark">Button</button> - <button type="button" class="btn btn-dark">Button</button> + <button type="button" class="btn btn-primary">Button</button> + <button type="button" class="btn btn-primary">Button</button> + <button type="button" class="btn btn-primary">Button</button> + <button type="button" class="btn btn-primary">Button</button> + <button type="button" class="btn btn-primary">Button</button> + <button type="button" class="btn btn-primary">Button</button> </div> {{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md index 396beec7f..ae58fca9a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/buttons.md @@ -6,9 +6,23 @@ group: components toc: true --- -## Examples +## Base class -Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. +Bootstrap has a base `.btn` class that sets up basic styles such as padding and content alignment. By default, `.btn` controls have a transparent border and background color, and lack any explicit focus and hover styles. + +{{< example >}} +<button type="button" class="btn">Base class</button> +{{< /example >}} + +The `.btn` class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles. + +{{< callout warning >}} +If you are using the `.btn` class on its own, remember to at least define some explicit `:focus` and/or `:focus-visible` styles. +{{< /callout >}} + +## Variants + +Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control. {{< example >}} {{< buttons.inline >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md index f715a5eac..2ad32b470 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/card.md @@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> - <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> + <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> @@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements. <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> - <div class="card-footer text-muted"> + <div class="card-footer text-body-secondary"> 2 days ago </div> </div> @@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"— <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}} </div> @@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -487,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> @@ -495,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> @@ -503,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> <div class="card"> @@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> <div class="card"> @@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> @@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> @@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up. <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> @@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up. <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> </div> <div class="card-footer"> - <small class="text-muted">Last updated 3 mins ago</small> + <small class="text-body-secondary">Last updated 3 mins ago</small> </div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md index dca8e9a79..422f0aaec 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/carousel.md @@ -347,9 +347,9 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`). -## Sass +## CSS -### Variables +### Sass variables Variables for all carousels: diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md index 39b80e1cd..533271b49 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/close-button.md @@ -24,7 +24,9 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event ## Dark variant -{{< callout info >}} +{{< deprecated-in "5.3.0" >}} + +{{< callout warning >}} **Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. {{< /callout >}} @@ -37,8 +39,16 @@ Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to inv </div> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.3.0" >}} + +As part of Bootstrap's evolving CSS variables approach, close button now uses local CSS variables on `.btn-close` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} + +### Sass variables + {{< scss-docs name="close-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md index 95abc536c..21b9c3e06 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/collapse.md @@ -100,9 +100,9 @@ If your control element is targeting a single collapsible element – i.e. the ` Note that Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [ARIA Authoring Practices Guide accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) - you will need to include these yourself with custom JavaScript. -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="collapse-transition" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md index b7dae56ab..098882064 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/dropdowns.md @@ -400,8 +400,7 @@ And putting it to use in a navbar: ## Directions {{< callout info >}} -#### RTL -Directions are mirrored when using Bootstrap in RTL, meaning `.dropstart` will appear on the right side. +**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side. {{< /callout >}} ### Centered @@ -842,7 +841,7 @@ Separate groups of related menu items with a divider. Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width. {{< example >}} -<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;"> +<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;"> <p> Some example text that's free-flowing within the dropdown menu. </p> @@ -1026,7 +1025,7 @@ Variables for the CSS-based carets that indicate a dropdown's interactivity: {{< scss-docs name="caret-variables" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins Mixins are used to generate the CSS-based carets and can be found in `scss/mixins/_caret.scss`. @@ -1057,6 +1056,10 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown. ### Via JavaScript +{{< callout warning >}} +Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of whether you call your dropdown via JavaScript or use the data-api. +{{< /callout >}} + Call the dropdowns via JavaScript: ```js @@ -1064,12 +1067,6 @@ const dropdownElementList = document.querySelectorAll('.dropdown-toggle') const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl)) ``` -{{< callout info >}} -##### `data-bs-toggle="dropdown"` still required - -Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element. -{{< /callout >}} - ### Options {{< markdown >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md index daa7a8818..2a0d22f86 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/list-group.md @@ -230,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> - <small class="text-muted">3 days ago</small> + <small class="text-body-secondary">3 days ago</small> </div> <p class="mb-1">Some placeholder content in a paragraph.</p> - <small class="text-muted">And some muted small print.</small> + <small class="text-body-secondary">And some muted small print.</small> </a> <a href="#" class="list-group-item list-group-item-action"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> - <small class="text-muted">3 days ago</small> + <small class="text-body-secondary">3 days ago</small> </div> <p class="mb-1">Some placeholder content in a paragraph.</p> - <small class="text-muted">And some muted small print.</small> + <small class="text-body-secondary">And some muted small print.</small> </a> </div> {{< /example >}} @@ -319,6 +319,8 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca ### Sass mixins +{{< deprecated-in "5.3.0" >}} + Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s. {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md index 09ae0653d..55272b33f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/modal.md @@ -481,24 +481,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati </div> {{< /example >}} -```js -const exampleModal = document.getElementById('exampleModal') -exampleModal.addEventListener('show.bs.modal', event => { - // Button that triggered the modal - const button = event.relatedTarget - // Extract info from data-bs-* attributes - const recipient = button.getAttribute('data-bs-whatever') - // If necessary, you could initiate an AJAX request here - // and then do the updating in a callback. - // - // Update the modal's content. - const modalTitle = exampleModal.querySelector('.modal-title') - const modalBodyInput = exampleModal.querySelector('.modal-body input') - - modalTitle.textContent = `New message to ${recipient}` - modalBodyInput.value = recipient -}) -``` +{{< js-docs name="varying-modal-content" file="site/assets/js/snippets.js" >}} ### Toggle between modals @@ -576,7 +559,7 @@ Modals have three optional sizes, available via modifier classes to be placed on | Size | Class | Modal max-width | --- | --- | --- | | Small | `.modal-sm` | `300px` | -| Default | <span class="text-muted">None</span> | `500px` | +| Default | <span class="text-body-secondary">None</span> | `500px` | | Large | `.modal-lg` | `800px` | | Extra large | `.modal-xl` | `1140px` | {{< /bs-table >}} @@ -643,7 +626,7 @@ Another override is the option to pop up a modal that covers the user viewport, {{< bs-table >}} | Class | Availability | -| --- | --- | --- | +| --- | --- | | `.modal-fullscreen` | Always | | `.modal-fullscreen-sm-down` | `576px` | | `.modal-fullscreen-md-down` | `768px` | @@ -786,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS {{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loop [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md index 3afd89cd5..a150f8653 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/navbar.md @@ -328,7 +328,7 @@ Mix and match with other components and utilities as needed. **New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`. {{< /callout >}} -Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities. +Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` utilities. <div class="bd-example"> <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark"> @@ -658,7 +658,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Collapsed content</h5> - <span class="text-muted">Toggleable via the navbar brand.</span> + <span class="text-body-secondary">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> @@ -682,7 +682,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr <nav class="navbar bg-body-tertiary fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> @@ -727,7 +727,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br ```html <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"> <a class="navbar-brand" href="#">Offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel"> @@ -742,7 +742,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark <nav class="navbar navbar-dark bg-dark fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas dark navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/navs-tabs.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/navs-tabs.md index 57c47e0cb..324250664 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/navs-tabs.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/navs-tabs.md @@ -167,6 +167,27 @@ Take that same HTML, but use `.nav-pills` instead: </ul> {{< /example >}} +### Underline + +Take that same HTML, but use `.nav-underline` instead: + +{{< example >}} +<ul class="nav nav-underline"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Active</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item"> + <a class="nav-link disabled">Disabled</a> + </li> +</ul> +{{< /example >}} + ### Fill and justify Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width. @@ -324,6 +345,12 @@ On the `.nav-pills` modifier class: {{< scss-docs name="nav-pills-css-vars" file="scss/_nav.scss" >}} +{{< added-in "5.3.0" >}} + +On the `.nav-underline` modifier class: + +{{< scss-docs name="nav-underline-css-vars" file="scss/_nav.scss" >}} + ### Sass variables {{< scss-docs name="nav-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md index ee1a4c4d8..7c4c86206 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/offcanvas.md @@ -139,10 +139,14 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi ## Dark offcanvas -{{< added-in "5.2.0" >}} +{{< deprecated-in "5.3.0" >}} {{< added-in "5.2.0" >}} Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. +{{< callout warning >}} +Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. +{{< /callout >}} + {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}} <div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel"> <div class="offcanvas-header"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/placeholders.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/placeholders.md index 5ebaab3aa..3dca3476b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/placeholders.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/placeholders.md @@ -38,7 +38,7 @@ In the example below, we take a typical card component and recreate it with plac <span class="placeholder col-6"></span> <span class="placeholder col-8"></span> </p> - <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a> + <a class="btn btn-primary disabled placeholder col-6"></a> </div> </div> </div> @@ -67,7 +67,7 @@ In the example below, we take a typical card component and recreate it with plac <span class="placeholder col-6"></span> <span class="placeholder col-8"></span> </p> - <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a> + <a class="btn btn-primary disabled placeholder col-6"></a> </div> </div> ``` @@ -83,7 +83,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is <span class="placeholder col-6"></span> </p> -<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a> +<a class="btn btn-primary disabled placeholder col-4"></a> {{< /example >}} {{< callout info >}} @@ -138,8 +138,8 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c </p> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="placeholders" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md index f86404382..0a2138db9 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/popovers.md @@ -111,12 +111,10 @@ You can customize the appearance of popovers using [CSS variables](#variables). ### Dismiss on next click -Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element. +Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element. {{< callout danger >}} -#### Specific markup required for dismiss-on-next-click - -For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute. +**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `<a>` elements, not `<button>`s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). {{< /callout >}} {{< example stackblitz_add_js="true" >}} @@ -165,13 +163,11 @@ const popover = new bootstrap.Popover(exampleEl, options) ``` {{< callout warning >}} -### Making popovers work for keyboard and assistive technology users - -To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users. +**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers as this will make them impossible to trigger for keyboard users. -While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream. +Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover's content to be announced to assistive technology users as one long, uninterrupted stream. -Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>Tab</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead. +Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links), as it may lead to an illogical focus order or make the popover content itself completely unreachable for keyboard users. In cases where you must use these elements, consider using a modal dialog instead. {{< /callout >}} ### Options @@ -191,7 +187,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `animation` | boolean | `true` | Apply a CSS fade transition to the popover. | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). | | `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. | -| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | +| `content` | string, element, function | `''` | The popover's text content. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. | | `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. | | `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). | @@ -203,7 +199,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | | `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. | -| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | +| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | {{< /bs-table >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md index c441f13c8..73f131589 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md @@ -15,7 +15,7 @@ toc: true Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. -- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). +- The `.progress` wrapper also requires a `role="progressbar"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). - We use the inner `.progress-bar` purely for the visual bar and label. - The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width. - We provide a special `.progress-stacked` class to create multiple/stacked progress bars. @@ -57,7 +57,7 @@ Bootstrap provides a handful of [utilities for setting width]({{< docsref "/util You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly. {{< example >}} -<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px"> +<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px"> <div class="progress-bar" style="width: 25%"></div> </div> <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px"> @@ -75,6 +75,14 @@ Add labels to your progress bars by placing text within the `.progress-bar`. </div> {{< /example >}} +Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}). + +{{< example >}} +<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div> +</div> +{{< /example >}} + ## Backgrounds Use background utility classes to change the appearance of individual progress bars. @@ -98,6 +106,31 @@ Use background utility classes to change the appearance of individual progress b {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. + +{{< example >}} +<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-success" style="width: 25%">25%</div> +</div> +<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div> +</div> +<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div> +</div> +<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-danger" style="width: 100%">100%</div> +</div> +{{< /example >}} + +Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes. + +{{< example >}} +<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar text-bg-warning" style="width: 75%">75%</div> +</div> +{{< /example >}} + ## Multiple bars You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/scrollspy.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/scrollspy.md index 4bb5978f3..d1abf75e3 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/scrollspy.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/scrollspy.md @@ -12,7 +12,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen - To start, scrollspy requires two things: a navigation, list group, or a simple set of links, plus a scrollable container. The scrollable container can be the `<body>` or a custom element with a set `height` and `overflow-y: scroll`. -- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. Be sure to also include a `tabindex="0"` to ensure keyboard access. +- On the scrollable container, add `data-bs-spy="scroll"` and `data-bs-target="#navId"` where `navId` is the unique `id` of the associated navigation. If there is no focusable element inside the element, be sure to also include a `tabindex="0"` to ensure keyboard access. - As you scroll the "spied" container, an `.active` class is added and removed from anchor links within the associated navigation. Links must have resolvable `id` targets, otherwise they're ignored. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md index b7a84dc6e..a7d1cb713 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/toasts.md @@ -87,17 +87,7 @@ Click the button below to show a toast (positioned with our utilities in the low We use the following JavaScript to trigger our live toast demo: -```js -const toastTrigger = document.getElementById('liveToastBtn') -const toastLiveExample = document.getElementById('liveToast') -if (toastTrigger) { - toastTrigger.addEventListener('click', () => { - const toast = new bootstrap.Toast(toastLiveExample) - - toast.show() - }) -} -``` +{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} ### Translucent @@ -108,7 +98,7 @@ Toasts are slightly translucent to blend in with what's below them. <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">11 mins ago</small> + <small class="text-body-secondary">11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -127,7 +117,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">just now</small> + <small class="text-body-secondary">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -139,7 +129,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -246,7 +236,7 @@ For systems that generate more notifications, consider using a wrapping element <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">just now</small> + <small class="text-body-secondary">just now</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -258,7 +248,7 @@ For systems that generate more notifications, consider using a wrapping element <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md index ef269eca4..cf628e344 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/tooltips.md @@ -46,8 +46,7 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra Hover over the links below to see tooltips: {{< example class="tooltip-demo" stackblitz_add_js="true" >}} -<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project. -</p> +<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p> {{< /example >}} {{< callout warning >}} @@ -136,9 +135,7 @@ As part of Bootstrap’s evolving CSS variables approach, tooltips now use local ## Usage -The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. - -Trigger the tooltip via JavaScript: +The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript: ```js const exampleEl = document.getElementById('example') @@ -146,9 +143,7 @@ const tooltip = new bootstrap.Tooltip(exampleEl, options) ``` {{< callout warning >}} -##### Overflow `auto` and `scroll` - -Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`: +Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`: ```js const tooltip = new bootstrap.Tooltip('#example', { @@ -162,9 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', { The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin). {{< callout warning >}} -##### Making tooltips work for keyboard and assistive technology users - -You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users. +**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users. {{< /callout >}} ```html @@ -221,7 +214,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | | `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. | -| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | +| `title` | string, element, function | `''` | The tooltip title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | {{< /bs-table >}} @@ -274,7 +267,7 @@ tooltip.setContent({ '.tooltip-inner': 'another title' }) ``` {{< callout info >}} -The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` +The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null` {{< /callout >}} ### Events @@ -283,10 +276,10 @@ The `setContent` method accepts an `object` argument, where each property-key is | Event | Description | | --- | --- | | `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. | -| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | +| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). | | `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. | | `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. | -| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | +| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). | {{< /bs-table >}} ```js diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/figures.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/figures.md index 29a38d723..985113709 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/figures.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/figures.md @@ -26,8 +26,8 @@ Aligning the figure's caption is easy with our [text utilities]({{< docsref "/ut </figure> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="figure-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/images.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/images.md index b55e7a2b8..02795617f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/images.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/images.md @@ -54,9 +54,9 @@ If you are using the `<picture>` element to specify multiple `<source>` elements </picture> ``` -## Sass +## CSS -### Variables +### Sass variables Variables are available for image thumbnails. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md index a695009dc..ef2bd13bc 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/reboot.md @@ -269,6 +269,10 @@ Various form elements have been rebooted for simpler base styles. Here are some These changes, and more, are demonstrated below. +{{< callout warning >}} +{{< partial "callouts/warning-input-support.md" >}} +{{< /callout >}} + <form class="bd-example"> <fieldset> <legend>Example legend</legend> @@ -391,10 +395,6 @@ These changes, and more, are demonstrated below. </fieldset> </form> -{{< callout warning >}} -{{< partial "callouts/warning-input-support.md" >}} -{{< /callout >}} - ### Pointers on buttons Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change. @@ -411,8 +411,8 @@ The `<address>` element is updated to reset the browser default `font-style` fro <div class="bd-example"> <address> - <strong>Twitter, Inc.</strong><br> - 1355 Market St, Suite 900<br> + <strong>ACME Corporation</strong><br> + 1123 Fictional St,<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> @@ -466,10 +466,8 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o <input type="text" hidden> ``` -{{< callout warning >}} -##### jQuery incompatibility - -`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements. +{{< callout info >}} +Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements. {{< /callout >}} To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md index 044a7147f..3e393fda1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/tables.md @@ -823,13 +823,13 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loop {{< scss-docs name="table-loop" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/content/typography.md b/vendor/twbs/bootstrap/site/content/docs/5.3/content/typography.md index 733013281..ca0f4e985 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/content/typography.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/content/typography.md @@ -60,7 +60,7 @@ Use the included utility classes to recreate the small secondary heading text fr {{< example >}} <h3> Fancy display heading - <small class="text-muted">With faded secondary text</small> + <small class="text-body-secondary">With faded secondary text</small> </h3> {{< /example >}} @@ -269,9 +269,9 @@ Align terms and descriptions horizontally by using our grid system's predefined In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works. -## Sass +## CSS -### Variables +### Sass variables Headings have some dedicated variables for sizing and spacing. @@ -281,6 +281,6 @@ Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/con {{< scss-docs name="type-variables" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}). diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md index 55d06ee97..c6f9bef20 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color-modes.md @@ -11,7 +11,7 @@ added: "5.3" **Bootstrap now supports color modes, starting with dark mode!** With v5.3.0 you can implement your own color mode toggler (see below for an example from Bootstrap's docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the `<html>` element, or on specific components and elements, thanks to the `data-bs-theme` attribute. -Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#sass-usage). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below. +Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—see [the usage section for details](#building-with-sass). Heads up though—this eliminates your ability to change themes on a per-component basis as shown below. ## Example @@ -62,73 +62,6 @@ For example, to change the color mode of a dropdown menu, add `data-bs-theme="li - We use a custom `_variables-dark.scss` to power those shared global CSS variable overrides for dark mode. This file isn't required for your own custom color modes, but it's required for our dark mode for two reasons. First, it's better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more. -## Nesting color modes - -Use `data-bs-theme` on a nested element to change the color mode for a group of elements or components. In the example below, we have an outer dark mode with a nested light mode. You'll notice components naturally adapt their appearance, but you may need to add some utilities along the way to utilize the styles specific to each color mode. - -For example, despite using `data-bs-theme="dark"` on a random `<div>`, the `<div>` has no `background-color` as it's set on the `<body>`. As such, if you want the `color` and `background-color` to adapt, you'll need to add `.text-body` and `.bg-body`. - -{{< example class="p-0" >}} -<div data-bs-theme="dark" class="p-3 text-body bg-body"> - <nav aria-label="breadcrumb"> - <ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Color modes</a></li> - <li class="breadcrumb-item active" aria-current="page">Dark</li> - </ol> - </nav> - - <p>This should be shown in a <strong>dark</strong> theme at all times.</p> - - <div class="progress mb-4"> - <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> - </div> - - <div class="dropdown mb-4"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark2" data-bs-toggle="dropdown" aria-expanded="false"> - Dark dropdown - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark2"> - <li><a class="dropdown-item active" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Another action</a></li> - <li><a class="dropdown-item" href="#">Something else here</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Separated link</a></li> - </ul> - </div> - - <div data-bs-theme="light" class="p-3 text-body bg-body rounded"> - <nav aria-label="breadcrumb"> - <ol class="breadcrumb"> - <li class="breadcrumb-item"><a href="#">Color modes</a></li> - <li class="breadcrumb-item"><a href="#">Dark</a></li> - <li class="breadcrumb-item active" aria-current="page">Light</li> - </ol> - </nav> - - <p>This should be shown in a <strong>light</strong> theme at all times.</p> - - <div class="progress mb-4"> - <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> - </div> - - <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight2" data-bs-toggle="dropdown" aria-expanded="false"> - Light dropdown - </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight2"> - <li><a class="dropdown-item active" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Action</a></li> - <li><a class="dropdown-item" href="#">Another action</a></li> - <li><a class="dropdown-item" href="#">Something else here</a></li> - <li><hr class="dropdown-divider"></li> - <li><a class="dropdown-item" href="#">Separated link</a></li> - </ul> - </div> - </div> -</div> -{{< /example >}} - ## Usage ### Enable dark mode @@ -159,14 +92,14 @@ Our new dark mode option is available to use for all users of Bootstrap, but it' We use a custom Sass mixin, `color-mode()`, to help you control _how_ color modes are applied. By default, we use a `data` attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark. -In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and it's compiled CSS output. +In case you want to use media queries and only make color modes automatic, you can change the mixin's default type via Sass variable. Consider the following snippet and its compiled CSS output. ```scss $color-mode-type: data; @include color-mode(dark) { .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } @@ -176,7 +109,7 @@ Outputs to: ```css [data-bs-theme=dark] .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } ``` @@ -188,7 +121,7 @@ $color-mode-type: media-query; @include color-mode(dark) { .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } @@ -199,7 +132,7 @@ Outputs to: ```css @media (prefers-color-scheme: dark) { .element { - color: var(--bs-primary-text); + color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); } } @@ -256,7 +189,7 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc ### Variables -Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#sass-usage) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes. +Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to `data-bs-theme` but [can be configured](#building-with-sass) to use a `prefers-color-scheme` media query. Use these variables as a guideline for generating your own new color modes. {{< scss-docs name="root-dark-mode-vars" file="scss/_root.scss" >}} @@ -268,6 +201,6 @@ CSS variables for our dark color mode are partially generated from dark mode spe ### Sass mixin -Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#sass-usage) for more details. +Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details. {{< scss-docs name="color-mode-mixin" file="scss/mixins/_color-mode.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md index fd4a7f37a..6a3c323b0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/color.md @@ -10,7 +10,7 @@ toc: true {{< added-in "5.3.0" >}} -Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged. +Bootstrap's color palette has continued to expand and become more nuanced in v5.3.0. We've added new variables for `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps or utility classes) with the express goal of making it easier to customize across multiple colors modes like light and dark. These new variables are globally set on `:root` and are adapted for our new dark color mode while our original theme colors remain unchanged. Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` and `rgba()` color modes. For example, `rgba(var(--bs-secondary-bg-rgb), .5)`. @@ -111,7 +111,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Primary —** Main theme color, used for hyperlinks, focus styles, and component and form active states.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-primary">Primary</div> + <div class="p-3 rounded-2 bg-primary"> </div> </td> <td> {{< markdown >}}`--bs-primary`<br>`--bs-primary-rgb`{{< /markdown >}} @@ -119,7 +119,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-primary-bg-subtle); --bs-border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-primary-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-primary-bg-subtle`{{< /markdown >}} @@ -127,7 +127,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-primary-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-primary-border-subtle`{{< /markdown >}} @@ -135,10 +135,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-primary-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-primary-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-primary-text`{{< /markdown >}} + {{< markdown >}}`--bs-primary-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -146,7 +146,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Success —** Theme color used for positive or successful actions and information.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-success">Success</div> + <div class="p-3 rounded-2 bg-success"> </div> </td> <td> {{< markdown >}}`--bs-success`<br>`--bs-success-rgb`{{< /markdown >}} @@ -154,7 +154,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-success-bg-subtle); --bs-border-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-success-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-success-bg-subtle`{{< /markdown >}} @@ -162,7 +162,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-border-subtle); color: var(--bs-success-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-success-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-success-border-subtle`{{< /markdown >}} @@ -170,10 +170,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-success-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-success-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-success-text`{{< /markdown >}} + {{< markdown >}}`--bs-success-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -181,7 +181,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Danger —** Theme color used for errors and dangerous actions.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-danger">Danger</div> + <div class="p-3 rounded-2 bg-danger"> </div> </td> <td> {{< markdown >}}`--bs-danger`<br>`--bs-danger-rgb`{{< /markdown >}} @@ -189,7 +189,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-danger-bg-subtle); --bs-border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-danger-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-danger-bg-subtle`{{< /markdown >}} @@ -197,7 +197,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-danger-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-danger-border-subtle`{{< /markdown >}} @@ -205,10 +205,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-danger-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-danger-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-danger-text`{{< /markdown >}} + {{< markdown >}}`--bs-danger-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -216,7 +216,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Warning —** Theme color used for non-destructive warning messages.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-warning">Warning</div> + <div class="p-3 rounded-2 bg-warning"> </div> </td> <td> {{< markdown >}}`--bs-warning`<br>`--bs-warning-rgb`{{< /markdown >}} @@ -224,7 +224,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-warning-bg-subtle); --bs-border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-warning-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-warning-bg-subtle`{{< /markdown >}} @@ -232,7 +232,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-warning-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-warning-border-subtle`{{< /markdown >}} @@ -240,10 +240,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-warning-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-warning-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-warning-text`{{< /markdown >}} + {{< markdown >}}`--bs-warning-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -251,7 +251,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Info —** Theme color used for neutral and informative content.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-info">Info</div> + <div class="p-3 rounded-2 bg-info"> </div> </td> <td> {{< markdown >}}`--bs-info`<br>`--bs-info-rgb`{{< /markdown >}} @@ -259,7 +259,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-info-bg-subtle); --bs-border-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-info-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-info-bg-subtle`{{< /markdown >}} @@ -267,7 +267,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-info-border-subtle); color: var(--bs-info-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-info-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-info-border-subtle`{{< /markdown >}} @@ -275,10 +275,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-info-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-info-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-info-text`{{< /markdown >}} + {{< markdown >}}`--bs-info-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -286,7 +286,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Light —** Additional theme option for less contrasting colors.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-light border">Light</div> + <div class="p-3 rounded-2 bg-light"> </div> </td> <td> {{< markdown >}}`--bs-light`<br>`--bs-light-rgb`{{< /markdown >}} @@ -294,7 +294,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-light-bg-subtle); --bs-border-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-light-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-light-bg-subtle`{{< /markdown >}} @@ -302,7 +302,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-light-border-subtle); color: var(--bs-light-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-light-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-light-border-subtle`{{< /markdown >}} @@ -310,10 +310,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-light-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-light-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-light-text`{{< /markdown >}} + {{< markdown >}}`--bs-light-text-emphasis`{{< /markdown >}} </td> </tr> <tr> @@ -321,7 +321,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` {{< markdown >}}**Dark —** Additional theme option for higher contrasting colors.{{< /markdown >}} </td> <td class="ps-0"> - <div class="p-3 rounded-2 text-bg-dark border">Dark</div> + <div class="p-3 rounded-2 bg-dark"> </div> </td> <td> {{< markdown >}}`--bs-dark`<br>`--bs-dark-rgb`{{< /markdown >}} @@ -329,7 +329,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2 border" style="background-color: var(--bs-dark-bg-subtle); --bs-border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Background subtle</div> + <div class="p-3 rounded-2" style="background-color: var(--bs-dark-bg-subtle)"> </div> </td> <td> {{< markdown >}}`--bs-dark-bg-subtle`{{< /markdown >}} @@ -337,7 +337,7 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 rounded-2" style="background-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text);">Border subtle</div> + <div class="p-3 rounded-2" style="border: 5px var(--bs-dark-border-subtle) solid"> </div> </td> <td> {{< markdown >}}`--bs-dark-border-subtle`{{< /markdown >}} @@ -345,10 +345,10 @@ Colors ending in `-rgb` provide the `red, green, blue` values for use in `rgb()` </tr> <tr> <td> - <div class="px-3 py-2 h-100 rounded-2" style="background-color: var(--bs-dark-text); color: var(--bs-body-bg);">Text</div> + <div class="py-3 fw-bold h5" style="color: var(--bs-dark-text-emphasis)">Text</div> </td> <td> - {{< markdown >}}`--bs-dark-text`{{< /markdown >}} + {{< markdown >}}`--bs-dark-text-emphasis`{{< /markdown >}} </td> </tr> </tbody> @@ -480,6 +480,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`) ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md index 05c77df57..ffb40c0c4 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/css-variables.md @@ -21,7 +21,7 @@ These CSS variables are available everywhere, regardless of color mode. ```css {{< root.inline >}} {{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE ":root {([^}]*)}" $css 1 -}} +{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} {{- if (eq (len $match) 0) -}} {{- errorf "Got no matches for :root in %q!" $.Page.Path -}} @@ -32,6 +32,21 @@ These CSS variables are available everywhere, regardless of color mode. {{< /root.inline >}} ``` +### Dark mode + +These variables are scoped to our built-in dark mode. + +```css +{{< root.inline >}} +{{- $css := readFile "dist/css/bootstrap.css" -}} +{{- $match := findRE `\[data-bs-theme=dark\] {([^}]*)}` $css 1 -}} +{{- if (eq (len $match) 0) -}} +{{- errorf "Got no matches for [data-bs-theme=dark] in %q!" $.Page.Path -}} +{{- end -}} +{{- index $match 0 -}} +{{< /root.inline >}} +``` + ## Component variables Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. @@ -59,6 +74,20 @@ a { } ``` +## Focus variables + +{{< added-in "5.3.0" >}} + +Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles. + +In our Sass, we set default values that can be customized before compiling. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`). + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + ## Grid breakpoints While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md index e618ce23a..2622f88db 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/optimize.md @@ -42,14 +42,11 @@ import 'bootstrap/js/dist/modal'; This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your `package.json` file. {{< callout info >}} -### Default Exports - -Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following: +**Heads up!** Files in `bootstrap/js/dist` use the **default export**. To use them, do the following: <!-- eslint-skip --> ```js import Modal from 'bootstrap/js/dist/modal' - const modal = new Modal(document.getElementById('myModal')) ``` {{< /callout >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md index 25c31bdb6..ed890acd0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/overview.md @@ -12,6 +12,8 @@ sections: description: Customize Bootstrap with built-in variables to easily toggle global CSS preferences. - title: Color description: Learn about and customize the color systems that support the entire toolkit. + - title: Color modes + description: Explore our default light mode and the new dark mode, or create custom color modes yourself. - title: Components description: Learn how we build nearly all our components responsively and with base and modifier classes. - title: CSS variables diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/.stylelintrc b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/.stylelintrc deleted file mode 100644 index 79ea92df0..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/.stylelintrc +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": [ - "stylelint-config-twbs-bootstrap" - ], - "rules": { - "at-rule-no-vendor-prefix": null, - "comment-empty-line-before": null, - "media-feature-name-no-vendor-prefix": null, - "property-disallowed-list": null, - "property-no-vendor-prefix": null, - "selector-no-qualifying-type": null, - "selector-no-vendor-prefix": null, - "value-no-vendor-prefix": null - } -} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/_index.md b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/_index.md index 46688839b..2fa9a4528 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/_index.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/_index.md @@ -7,39 +7,60 @@ aliases: "/examples/" {{< list-examples.inline >}} {{ range $entry := $.Site.Data.examples -}} -<div class="row g-lg-5 mb-5"> - <div class="bd-content col-lg-3"> - <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2> - <p>{{ $entry.description }}</p> - {{ if eq $entry.category "RTL" -}} - <div class="bd-callout bd-callout-warning small"> - <p> - <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest? - </p> - <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p> - </div> - {{ end -}} - </div> - - <div class="col-lg-9"> - {{ range $i, $example := $entry.examples -}} - {{- $len := len $entry.examples -}} - {{ if (eq $i 0) }}<div class="row">{{ end }} - <div class="col-sm-6 col-md-4 mb-3"> - <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> +<div class="bd-content"> + <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2> + <p>{{ $entry.description }}</p> + {{ if eq $entry.category "RTL" -}} + <div class="bd-callout bd-callout-warning small"> + <p> + <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest? + </p> + <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p> + </div> + {{ end -}} + {{ range $i, $example := $entry.examples -}} + {{- $len := len $entry.examples -}} + {{ if (eq $i 0) }}<div class="row">{{ end }} + {{ if $entry.external }} + <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3"> + <svg class="bi fs-5 flex-shrink-0 mt-1"><use xlink:href="#box-seam"></use></svg> + <div> + <h3 class="h5 mb-1"> + <a class="d-block link-offset-1" href="{{ $.Site.Params.github_org }}{{ $example.url }}/" target="_blank" rel="noopener"> + {{ $example.name }} + </a> + </h3> + <p class="text-body-secondary">{{ $example.description }}</p> + <p> + {{- $htmlIndexLocation := "index.html" -}} + {{- if $example.htmlIndexLocation -}} + {{- $htmlIndexLocation = printf "%s/index.html" $example.htmlIndexLocation -}} + {{- end }} + <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $htmlIndexLocation | urlquery }}" target="_blank" rel="noopener"> + <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg> + Edit in StackBlitz + </a> + </p> + </div> + </div> + {{ else }} + <div class="col-sm-6 col-md-3 mb-3"> + <a class="d-block link-offset-1" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}> <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png, /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x" src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png" alt="" width="480" height="300" loading="lazy"> - <h3 class="h5 mb-1">{{ $example.name }}</h3> + <h3 class="h5 mb-1"> + {{ $example.name }} + </h3> </a> - <p class="text-muted">{{ $example.description }}</p> + <p class="text-body-secondary">{{ $example.description }}</p> </div> - {{ if (eq (add $i 1) $len) }}</div>{{ end }} - {{ end -}} - </div> + {{ end }} + {{ if (eq (add $i 1) $len) }}</div>{{ end }} + {{ end -}} </div> {{ end -}} {{< /list-examples.inline >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album-rtl/index.html index 3408056bc..bae47373a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album-rtl/index.html @@ -4,16 +4,16 @@ title: مثال الألبوم direction: rtl --- -<header> - <div class="collapse bg-dark" id="navbarHeader"> +<header data-bs-theme="dark"> + <div class="collapse text-bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> - <h4 class="text-white">حول</h4> - <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p> + <h4>حول</h4> + <p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> - <h4 class="text-white">تواصل معي</h4> + <h4>تواصل معي</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">تابعني على تويتر</a></li> <li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li> @@ -42,7 +42,7 @@ direction: rtl <div class="row py-lg-5"> <div class="col-lg-6 col-md-8 mx-auto"> <h1 class="fw-light">مثال الألبوم</h1> - <p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p> + <p class="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p> <p> <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a> <a href="#" class="btn btn-secondary my-2">عمل ثانوي</a> @@ -51,7 +51,7 @@ direction: rtl </div> </section> - <div class="album py-5 bg-light"> + <div class="album py-5 bg-body-tertiary"> <div class="container"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> @@ -65,7 +65,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -80,7 +80,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -95,7 +95,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -111,7 +111,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -126,7 +126,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -141,7 +141,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -157,7 +157,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -172,7 +172,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -187,7 +187,7 @@ direction: rtl <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> </div> - <small class="text-muted">9 دقائق</small> + <small class="text-body-secondary">9 دقائق</small> </div> </div> </div> @@ -198,7 +198,7 @@ direction: rtl </main> -<footer class="text-muted py-5"> +<footer class="text-body-secondary py-5"> <div class="container"> <p class="float-end mb-1"> <a href="#">عد إلى الأعلى</a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album/index.html index 2d25d726a..54b2c5bde 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/album/index.html @@ -3,16 +3,16 @@ layout: examples title: Album example --- -<header> - <div class="collapse bg-dark" id="navbarHeader"> +<header data-bs-theme="dark"> + <div class="collapse text-bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> - <h4 class="text-white">About</h4> - <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> + <h4>About</h4> + <p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p> </div> <div class="col-sm-4 offset-md-1 py-4"> - <h4 class="text-white">Contact</h4> + <h4>Contact</h4> <ul class="list-unstyled"> <li><a href="#" class="text-white">Follow on Twitter</a></li> <li><a href="#" class="text-white">Like on Facebook</a></li> @@ -41,7 +41,7 @@ title: Album example <div class="row py-lg-5"> <div class="col-lg-6 col-md-8 mx-auto"> <h1 class="fw-light">Album example</h1> - <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p> + <p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p> <p> <a href="#" class="btn btn-primary my-2">Main call to action</a> <a href="#" class="btn btn-secondary my-2">Secondary action</a> @@ -50,7 +50,7 @@ title: Album example </div> </section> - <div class="album py-5 bg-light"> + <div class="album py-5 bg-body-tertiary"> <div class="container"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> @@ -64,7 +64,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -79,7 +79,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -94,7 +94,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -110,7 +110,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -125,7 +125,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -140,7 +140,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -156,7 +156,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -171,7 +171,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -186,7 +186,7 @@ title: Album example <button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> </div> - <small class="text-muted">9 mins</small> + <small class="text-body-secondary">9 mins</small> </div> </div> </div> @@ -197,7 +197,7 @@ title: Album example </main> -<footer class="text-muted py-5"> +<footer class="text-body-secondary py-5"> <div class="container"> <p class="float-end mb-1"> <a href="#">Back to top</a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html index 05af925eb..c3c6c6293 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog-rtl/index.html @@ -59,7 +59,7 @@ include_js: false <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-primary">العالم</strong> <h3 class="mb-0">مشاركة مميزة</h3> - <div class="mb-1 text-muted">نوفمبر 12</div> + <div class="mb-1 text-body-secondary">نوفمبر 12</div> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <a href="#" class="stretched-link">أكمل القراءة</a> </div> @@ -73,7 +73,7 @@ include_js: false <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-success">التصميم</strong> <h3 class="mb-0">عنوان الوظيفة</h3> - <div class="mb-1 text-muted">نوفمبر 11</div> + <div class="mb-1 text-body-secondary">نوفمبر 11</div> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <a href="#" class="stretched-link">أكمل القراءة</a> </div> @@ -161,7 +161,7 @@ include_js: false <div class="col-md-4"> <div class="position-sticky" style="top: 2rem;"> - <div class="p-4 mb-3 bg-light rounded"> + <div class="p-4 mb-3 bg-body-tertiary rounded"> <h4 class="fst-italic">حول</h4> <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html index 6b60ea069..9f11a21f9 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/index.html @@ -14,7 +14,7 @@ include_js: false <a class="link-secondary" href="#">Subscribe</a> </div> <div class="col-4 text-center"> - <a class="blog-header-logo text-dark" href="#">Large</a> + <a class="blog-header-logo text-body-emphasis" href="#">Large</a> </div> <div class="col-4 d-flex justify-content-end align-items-center"> <a class="link-secondary" href="#" aria-label="Search"> @@ -58,7 +58,7 @@ include_js: false <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-primary">World</strong> <h3 class="mb-0">Featured post</h3> - <div class="mb-1 text-muted">Nov 12</div> + <div class="mb-1 text-body-secondary">Nov 12</div> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <a href="#" class="stretched-link">Continue reading</a> </div> @@ -72,7 +72,7 @@ include_js: false <div class="col p-4 d-flex flex-column position-static"> <strong class="d-inline-block mb-2 text-success">Design</strong> <h3 class="mb-0">Post title</h3> - <div class="mb-1 text-muted">Nov 11</div> + <div class="mb-1 text-body-secondary">Nov 11</div> <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <a href="#" class="stretched-link">Continue reading</a> </div> @@ -213,7 +213,7 @@ include_js: false <div class="col-md-4"> <div class="position-sticky" style="top: 2rem;"> - <div class="p-4 mb-3 bg-light rounded"> + <div class="p-4 mb-3 bg-body-tertiary rounded"> <h4 class="fst-italic">About</h4> <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel-rtl/index.html index b8c35d669..aa42eb50d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel-rtl/index.html @@ -6,7 +6,7 @@ extra_css: - "../carousel/carousel.rtl.css" --- -<header> +<header data-bs-theme="dark"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">شرائح العرض</a> @@ -44,7 +44,7 @@ extra_css: </div> <div class="carousel-inner"> <div class="carousel-item active"> - {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-start"> <h1>عنوان المثال.</h1> @@ -54,7 +54,7 @@ extra_css: </div> </div> <div class="carousel-item"> - {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}} <div class="container"> <div class="carousel-caption"> <h1>عنوان مثال آخر.</h1> @@ -64,7 +64,7 @@ extra_css: </div> </div> <div class="carousel-item"> - {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-end"> <h1>واحد أكثر لقياس جيد.</h1> @@ -94,19 +94,19 @@ extra_css: <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-lg-4"> - {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} <h2 class="fw-normal">عنوان</h2> <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p> <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> - {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} <h2 class="fw-normal">عنوان آخر</h2> <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p> <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> - {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2> <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p> <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p> @@ -120,11 +120,11 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> - <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2> + <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-body-secondary"> سيذهل عقلك. </span></h2> <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p> </div> <div class="col-md-5"> - {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} </div> </div> @@ -132,11 +132,11 @@ extra_css: <div class="row featurette"> <div class="col-md-7 order-md-2"> - <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2> + <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-body-secondary"> شاهد بنفسك. </span></h2> <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p> </div> <div class="col-md-5 order-md-1"> - {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} </div> </div> @@ -144,11 +144,11 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> - <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2> + <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-body-secondary"> كش ملك. </span></h2> <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p> </div> <div class="col-md-5"> - {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css index 0bdf9768d..be0af524a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.css @@ -5,7 +5,7 @@ body { padding-top: 3rem; padding-bottom: 3rem; - color: #5a5a5a; + color: rgb(var(--bs-tertiary-color-rgb)); } diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css index d20a8111a..9ff275d4e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/carousel.rtl.css @@ -5,7 +5,7 @@ body { padding-top: 3rem; padding-bottom: 3rem; - color: #5a5a5a; + color: rgb(var(--bs-tertiary-color-rgb)); } diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/index.html index 67c0dd529..fec439b4e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/carousel/index.html @@ -5,7 +5,7 @@ extra_css: - "carousel.css" --- -<header> +<header data-bs-theme="dark"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Carousel</a> @@ -43,7 +43,7 @@ extra_css: </div> <div class="carousel-inner"> <div class="carousel-item active"> - {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-start"> <h1>Example headline.</h1> @@ -53,7 +53,7 @@ extra_css: </div> </div> <div class="carousel-item"> - {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}} <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> @@ -63,7 +63,7 @@ extra_css: </div> </div> <div class="carousel-item"> - {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}} + {{< placeholder width="100%" height="100%" background="var(--bs-secondary-color)" text="false" title="false" >}} <div class="container"> <div class="carousel-caption text-end"> <h1>One more for good measure.</h1> @@ -93,19 +93,19 @@ extra_css: <!-- Three columns of text below the carousel --> <div class="row"> <div class="col-lg-4"> - {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} <h2 class="fw-normal">Heading</h2> <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p> <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> - {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} <h2 class="fw-normal">Heading</h2> <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p> <p><a class="btn btn-secondary" href="#">View details »</a></p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> - {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}} + {{< placeholder width="140" height="140" background="var(--bs-secondary-color)" text="false" class="rounded-circle" >}} <h2 class="fw-normal">Heading</h2> <p>And lastly this, the third column of representative placeholder content.</p> <p><a class="btn btn-secondary" href="#">View details »</a></p> @@ -119,11 +119,11 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> - <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2> + <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-body-secondary">It’ll blow your mind.</span></h2> <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p> </div> <div class="col-md-5"> - {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} </div> </div> @@ -131,11 +131,11 @@ extra_css: <div class="row featurette"> <div class="col-md-7 order-md-2"> - <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2> + <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-body-secondary">See for yourself.</span></h2> <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p> </div> <div class="col-md-5 order-md-1"> - {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} </div> </div> @@ -143,11 +143,11 @@ extra_css: <div class="row featurette"> <div class="col-md-7"> - <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> + <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-body-secondary">Checkmate.</span></h2> <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p> </div> <div class="col-md-5"> - {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} + {{< placeholder width="500" height="500" background="var(--bs-secondary-bg)" color="var(--bs-secondary-color)" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}} </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html index d3d0c6f00..8ffbb5726 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet-rtl/index.html @@ -5,7 +5,7 @@ extra_css: - "../cheatsheet/cheatsheet.rtl.css" extra_js: - src: "../cheatsheet/cheatsheet.js" -body_class: "bg-light" +body_class: "bg-body-tertiary" direction: rtl --- @@ -18,7 +18,7 @@ direction: rtl <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a> </div> </header> -<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> +<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2"> <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2> <nav class="small" id="toc"> <ul class="list-unstyled"> @@ -623,36 +623,36 @@ direction: rtl {{< example show_markup="false" >}} <div class="accordion" id="accordionExample"> <div class="accordion-item"> - <h4 class="accordion-header" id="headingOne"> + <h4 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> عنصر المطوية الأول </button> </h4> - <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> + <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> <div class="accordion-item"> - <h4 class="accordion-header" id="headingTwo"> + <h4 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> عنصر المطوية الثاني </button> </h4> - <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> + <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> </div> </div> <div class="accordion-item"> - <h4 class="accordion-header" id="headingThree"> + <h4 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> عنصر المطوية الثالث </button> </h4> - <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> + <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootstrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow. </div> @@ -821,7 +821,7 @@ direction: rtl <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> <a href="#" class="btn btn-primary">اذهب لمكان ما</a> </div> - <div class="card-footer text-muted"> + <div class="card-footer text-body-secondary"> منذ يومان </div> </div> @@ -853,7 +853,7 @@ direction: rtl <div class="card-body"> <h5 class="card-title">عنوان البطاقة</h5> <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> - <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p> + <p class="card-text"><small class="text-body-secondary">آخر تحديث منذ 3 دقائق</small></p> </div> </div> </div> @@ -1221,7 +1221,7 @@ direction: rtl <div> {{< example show_markup="false" >}} - <nav class="navbar navbar-expand-lg bg-light"> + <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" @@ -1434,7 +1434,7 @@ direction: rtl <div> <div class="bd-example"> - <nav id="navbar-example2" class="navbar bg-light px-3"> + <nav id="navbar-example2" class="navbar bg-body-tertiary px-3"> <a class="navbar-brand" href="#">شريط التنقل</a> <ul class="nav nav-pills"> <li class="nav-item"> @@ -1510,7 +1510,7 @@ direction: rtl <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">قبل 11 دقيقة</small> + <small class="text-body-secondary">قبل 11 دقيقة</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button> </div> <div class="toast-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html index 6ee32654d..7470c4efe 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cheatsheet/index.html @@ -5,7 +5,7 @@ extra_css: - "cheatsheet.css" extra_js: - src: "cheatsheet.js" -body_class: "bg-light" +body_class: "bg-body-tertiary" --- <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark"> @@ -17,7 +17,7 @@ body_class: "bg-light" <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a> </div> </header> -<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> +<aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2"> <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2> <nav class="small" id="toc"> <ul class="list-unstyled"> @@ -622,36 +622,36 @@ body_class: "bg-light" {{< example show_markup="false" >}} <div class="accordion" id="accordionExample"> <div class="accordion-item"> - <h4 class="accordion-header" id="headingOne"> + <h4 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h4> - <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> + <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> - <h4 class="accordion-header" id="headingTwo"> + <h4 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h4> - <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> + <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> <div class="accordion-item"> - <h4 class="accordion-header" id="headingThree"> + <h4 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h4> - <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> + <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> @@ -820,7 +820,7 @@ body_class: "bg-light" <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> - <div class="card-footer text-muted"> + <div class="card-footer text-body-secondary"> 2 days ago </div> </div> @@ -852,7 +852,7 @@ body_class: "bg-light" <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -1220,7 +1220,7 @@ body_class: "bg-light" <div> {{< example show_markup="false" >}} - <nav class="navbar navbar-expand-lg bg-light"> + <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy" @@ -1431,7 +1431,7 @@ body_class: "bg-light" <div> <div class="bd-example"> - <nav id="navbar-example2" class="navbar bg-light px-3"> + <nav id="navbar-example2" class="navbar bg-body-tertiary px-3"> <a class="navbar-brand" href="#">Navbar</a> <ul class="nav nav-pills"> <li class="nav-item"> @@ -1506,7 +1506,7 @@ body_class: "bg-light" <div class="toast-header"> {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">11 mins ago</small> + <small class="text-body-secondary">11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout-rtl/index.html index e2a7971c1..6516efea6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout-rtl/index.html @@ -6,7 +6,7 @@ extra_css: - "../checkout/checkout.css" extra_js: - src: "../checkout/checkout.js" -body_class: "bg-light" +body_class: "bg-body-tertiary" --- <div class="container"> @@ -20,32 +20,32 @@ body_class: "bg-light" <div class="row g-3"> <div class="col-md-5 col-lg-4 order-md-last"> <h4 class="d-flex justify-content-between align-items-center mb-3"> - <span class="text-muted">عربة التسوق</span> + <span class="text-body-secondary">عربة التسوق</span> <span class="badge bg-secondary rounded-pill">3</span> </h4> <ul class="list-group mb-3"> <li class="list-group-item d-flex justify-content-between lh-sm"> <div> <h6 class="my-0">اسم المنتج</h6> - <small class="text-muted">وصف مختصر</small> + <small class="text-body-secondary">وصف مختصر</small> </div> - <span class="text-muted">$12</span> + <span class="text-body-secondary">$12</span> </li> <li class="list-group-item d-flex justify-content-between lh-sm"> <div> <h6 class="my-0">المنتج الثاني</h6> - <small class="text-muted">وصف مختصر</small> + <small class="text-body-secondary">وصف مختصر</small> </div> - <span class="text-muted">$8</span> + <span class="text-body-secondary">$8</span> </li> <li class="list-group-item d-flex justify-content-between lh-sm"> <div> <h6 class="my-0">البند الثالث</h6> - <small class="text-muted">وصف مختصر</small> + <small class="text-body-secondary">وصف مختصر</small> </div> - <span class="text-muted">$5</span> + <span class="text-body-secondary">$5</span> </li> - <li class="list-group-item d-flex justify-content-between bg-light"> + <li class="list-group-item d-flex justify-content-between bg-body-tertiary"> <div class="text-success"> <h6 class="my-0">رمز ترويجي</h6> <small>EXAMPLECODE</small> @@ -97,7 +97,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label> + <label for="email" class="form-label">البريد الإلكتروني <span class="text-body-secondary">(اختياري)</span></label> <input type="email" class="form-control" id="email" placeholder="you@example.com"> <div class="invalid-feedback"> يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن. @@ -113,7 +113,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label> + <label for="address2" class="form-label">عنوان 2 <span class="text-body-secondary">(اختياري)</span></label> <input type="text" class="form-control" id="address2" placeholder="شقة 24"> </div> @@ -183,7 +183,7 @@ body_class: "bg-light" <div class="col-md-6"> <label for="cc-name" class="form-label">الاسم على البطاقة</label> <input type="text" class="form-control" id="cc-name" placeholder="" required> - <small class="text-muted">الاسم الكامل كما هو معروض على البطاقة</small> + <small class="text-body-secondary">الاسم الكامل كما هو معروض على البطاقة</small> <div class="invalid-feedback"> الاسم على البطاقة مطلوب </div> @@ -221,7 +221,7 @@ body_class: "bg-light" </div> </div> </main> - <footer class="my-5 pt-5 text-muted text-center text-small"> + <footer class="my-5 pt-5 text-body-secondary text-center text-small"> <p class="mb-1">© {{< year >}}-2017 اسم الشركة</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout/index.html index ba415f0d9..d39f0f2a4 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/checkout/index.html @@ -5,7 +5,7 @@ extra_css: - "checkout.css" extra_js: - src: "checkout.js" -body_class: "bg-light" +body_class: "bg-body-tertiary" --- <div class="container"> @@ -26,25 +26,25 @@ body_class: "bg-light" <li class="list-group-item d-flex justify-content-between lh-sm"> <div> <h6 class="my-0">Product name</h6> - <small class="text-muted">Brief description</small> + <small class="text-body-secondary">Brief description</small> </div> - <span class="text-muted">$12</span> + <span class="text-body-secondary">$12</span> </li> <li class="list-group-item d-flex justify-content-between lh-sm"> <div> <h6 class="my-0">Second product</h6> - <small class="text-muted">Brief description</small> + <small class="text-body-secondary">Brief description</small> </div> - <span class="text-muted">$8</span> + <span class="text-body-secondary">$8</span> </li> <li class="list-group-item d-flex justify-content-between lh-sm"> <div> <h6 class="my-0">Third item</h6> - <small class="text-muted">Brief description</small> + <small class="text-body-secondary">Brief description</small> </div> - <span class="text-muted">$5</span> + <span class="text-body-secondary">$5</span> </li> - <li class="list-group-item d-flex justify-content-between bg-light"> + <li class="list-group-item d-flex justify-content-between bg-body-tertiary"> <div class="text-success"> <h6 class="my-0">Promo code</h6> <small>EXAMPLECODE</small> @@ -96,7 +96,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label> + <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label> <input type="email" class="form-control" id="email" placeholder="you@example.com"> <div class="invalid-feedback"> Please enter a valid email address for shipping updates. @@ -112,7 +112,7 @@ body_class: "bg-light" </div> <div class="col-12"> - <label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label> + <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label> <input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> </div> @@ -182,7 +182,7 @@ body_class: "bg-light" <div class="col-md-6"> <label for="cc-name" class="form-label">Name on card</label> <input type="text" class="form-control" id="cc-name" placeholder="" required> - <small class="text-muted">Full name as displayed on card</small> + <small class="text-body-secondary">Full name as displayed on card</small> <div class="invalid-feedback"> Name on card is required </div> @@ -221,7 +221,7 @@ body_class: "bg-light" </div> </main> - <footer class="my-5 pt-5 text-muted text-center text-small"> + <footer class="my-5 pt-5 text-body-secondary text-center text-small"> <p class="mb-1">© 2017–{{< year >}} Company Name</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#">Privacy</a></li> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js index 96e0895bf..d278c628b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/dashboard.js @@ -38,15 +38,13 @@ }] }, options: { - scales: { - yAxes: [{ - ticks: { - beginAtZero: false - } - }] - }, - legend: { - display: false + plugins: { + legend: { + display: false + }, + tooltip: { + boxPadding: 3 + } } } }) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/index.html index bc41cc604..9b2eb8caf 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard-rtl/index.html @@ -7,8 +7,8 @@ extra_css: extra_js: - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" - - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" - integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" + integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" - src: "dashboard.js" --- @@ -27,7 +27,7 @@ extra_js: <div class="container-fluid"> <div class="row"> - <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> + <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse"> <div class="position-sticky pt-3 sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> @@ -68,7 +68,7 @@ extra_js: </li> </ul> - <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase"> + <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <span>التقارير المحفوظة</span> <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <span data-feather="plus-circle" class="align-text-bottom"></span> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js index e1379758b..d190d7961 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.js @@ -38,15 +38,13 @@ }] }, options: { - scales: { - yAxes: [{ - ticks: { - beginAtZero: false - } - }] - }, - legend: { - display: false + plugins: { + legend: { + display: false + }, + tooltip: { + boxPadding: 3 + } } } }) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html index b3b40c266..88ac303ab 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/index.html @@ -6,8 +6,8 @@ extra_css: extra_js: - src: "https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js" integrity: "sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" - - src: "https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js" - integrity: "sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" + - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js" + integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" - src: "dashboard.js" --- @@ -26,7 +26,7 @@ extra_js: <div class="container-fluid"> <div class="row"> - <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> + <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-body-tertiary sidebar collapse"> <div class="position-sticky pt-3 sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> @@ -67,7 +67,7 @@ extra_js: </li> </ul> - <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase"> + <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <span>Saved reports</span> <a class="link-secondary" href="#" aria-label="Add a new report"> <span data-feather="plus-circle" class="align-text-bottom"></span> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/dropdowns.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/dropdowns.css index 556f310a9..f633e2cd8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/dropdowns.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/dropdowns.css @@ -1,7 +1,3 @@ -.dropdown-menu { - margin: 4rem auto; -} - .dropdown-item-danger { color: var(--bs-red); } @@ -15,12 +11,13 @@ } .btn-hover-light { - background-color: var(--bs-white); + color: var(--bs-body-color); + background-color: var(--bs-body-bg); } .btn-hover-light:hover, .btn-hover-light:focus { - color: var(--bs-blue); - background-color: var(--bs-light); + color: var(--bs-link-hover-color); + background-color: var(--bs-tertiary-bg); } .cal-month, @@ -46,22 +43,17 @@ } .cal-btn:not([disabled]) { font-weight: 500; + color: var(--bs-emphasis-color); } .cal-btn:hover, .cal-btn:focus { - background-color: rgba(0, 0, 0, .05); + background-color: var(--bs-secondary-bg); } .cal-btn[disabled] { border: 0; opacity: .5; } -.form-control-dark { - background-color: rgba(255, 255, 255, .05); - border-color: rgba(255, 255, 255, .15); -} - - .w-220px { width: 220px; } @@ -74,6 +66,6 @@ width: 340px; } -.w-600px { - width: 600px; +.opacity-10 { + opacity: .1; } diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/index.html index f08f69701..3dac768f2 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dropdowns/index.html @@ -7,37 +7,6 @@ body_class: "" --- <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - <symbol id="bootstrap" viewBox="0 0 118 94"> - <title>Bootstrap</title> - <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> - </symbol> - - <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16"> - <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> - </symbol> - - <symbol id="check2" viewBox="0 0 16 16"> - <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> - </symbol> - - <symbol id="check2-circle" viewBox="0 0 16 16"> - <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/> - <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/> - </symbol> - - <symbol id="bookmark-star" viewBox="0 0 16 16"> - <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/> - <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> - </symbol> - - <symbol id="grid-fill" viewBox="0 0 16 16"> - <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/> - </symbol> - - <symbol id="stars" viewBox="0 0 16 16"> - <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/> - </symbol> - <symbol id="film" viewBox="0 0 16 16"> <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/> </symbol> @@ -80,15 +49,15 @@ body_class: "" </symbol> </svg> -<div class="d-flex gap-5 justify-content-center"> - <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px"> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 shadow w-220px" data-bs-theme="light"> <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li> <li><a class="dropdown-item rounded-2" href="#">Another action</a></li> <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li> </ul> - <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px"> + <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-3 mx-0 border-0 shadow w-220px" data-bs-theme="dark"> <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li> <li><a class="dropdown-item rounded-2" href="#">Another action</a></li> <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li> @@ -99,9 +68,9 @@ body_class: "" <div class="b-example-divider"></div> -<div class="d-flex gap-5 justify-content-center"> - <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"> - <form class="p-2 mb-2 bg-light border-bottom"> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="light"> + <form class="p-2 mb-2 bg-body-tertiary border-bottom"> <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter..."> </form> <ul class="list-unstyled mb-0"> @@ -124,9 +93,9 @@ body_class: "" </ul> </div> - <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px"> + <div class="dropdown-menu d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px" data-bs-theme="dark"> <form class="p-2 mb-2 bg-dark border-bottom border-dark"> - <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter..."> + <input type="search" class="form-control bg-dark" autocomplete="false" placeholder="Type to filter..."> </form> <ul class="list-unstyled mb-0"> <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#"> @@ -151,8 +120,8 @@ body_class: "" <div class="b-example-divider"></div> -<div class="d-flex gap-5 justify-content-center"> - <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px"> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light"> <li> <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> @@ -191,7 +160,7 @@ body_class: "" </a> </li> </ul> - <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-220px"> + <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark"> <li> <a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> @@ -234,80 +203,161 @@ body_class: "" <div class="b-example-divider"></div> -<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px"> - <div class="d-grid gap-1"> - <div class="cal"> - <div class="cal-month"> - <button class="btn cal-btn" type="button"> - <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> - </button> - <strong class="cal-month-name">June</strong> - <select class="form-select cal-month-name d-none"> - <option value="January">January</option> - <option value="February">February</option> - <option value="March">March</option> - <option value="April">April</option> - <option value="May">May</option> - <option selected value="June">June</option> - <option value="July">July</option> - <option value="August">August</option> - <option value="September">September</option> - <option value="October">October</option> - <option value="November">November</option> - <option value="December">December</option> - </select> - <button class="btn cal-btn" type="button"> - <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> - </button> - </div> - <div class="cal-weekdays text-muted"> - <div class="cal-weekday">Sun</div> - <div class="cal-weekday">Mon</div> - <div class="cal-weekday">Tue</div> - <div class="cal-weekday">Wed</div> - <div class="cal-weekday">Thu</div> - <div class="cal-weekday">Fri</div> - <div class="cal-weekday">Sat</div> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="light"> + <div class="d-grid gap-1"> + <div class="cal"> + <div class="cal-month"> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> + </button> + <strong class="cal-month-name">June</strong> + <select class="form-select cal-month-name d-none"> + <option value="January">January</option> + <option value="February">February</option> + <option value="March">March</option> + <option value="April">April</option> + <option value="May">May</option> + <option selected value="June">June</option> + <option value="July">July</option> + <option value="August">August</option> + <option value="September">September</option> + <option value="October">October</option> + <option value="November">November</option> + <option value="December">December</option> + </select> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> + </button> + </div> + <div class="cal-weekdays text-body-secondary"> + <div class="cal-weekday">Sun</div> + <div class="cal-weekday">Mon</div> + <div class="cal-weekday">Tue</div> + <div class="cal-weekday">Wed</div> + <div class="cal-weekday">Thu</div> + <div class="cal-weekday">Fri</div> + <div class="cal-weekday">Sat</div> + </div> + <div class="cal-days"> + <button class="btn cal-btn" disabled type="button">30</button> + <button class="btn cal-btn" disabled type="button">31</button> + + <button class="btn cal-btn" type="button">1</button> + <button class="btn cal-btn" type="button">2</button> + <button class="btn cal-btn" type="button">3</button> + <button class="btn cal-btn" type="button">4</button> + <button class="btn cal-btn" type="button">5</button> + <button class="btn cal-btn" type="button">6</button> + <button class="btn cal-btn" type="button">7</button> + + <button class="btn cal-btn" type="button">8</button> + <button class="btn cal-btn" type="button">9</button> + <button class="btn cal-btn" type="button">10</button> + <button class="btn cal-btn" type="button">11</button> + <button class="btn cal-btn" type="button">12</button> + <button class="btn cal-btn" type="button">13</button> + <button class="btn cal-btn" type="button">14</button> + + <button class="btn cal-btn" type="button">15</button> + <button class="btn cal-btn" type="button">16</button> + <button class="btn cal-btn" type="button">17</button> + <button class="btn cal-btn" type="button">18</button> + <button class="btn cal-btn" type="button">19</button> + <button class="btn cal-btn" type="button">20</button> + <button class="btn cal-btn" type="button">21</button> + + <button class="btn cal-btn" type="button">22</button> + <button class="btn cal-btn" type="button">23</button> + <button class="btn cal-btn" type="button">24</button> + <button class="btn cal-btn" type="button">25</button> + <button class="btn cal-btn" type="button">26</button> + <button class="btn cal-btn" type="button">27</button> + <button class="btn cal-btn" type="button">28</button> + + <button class="btn cal-btn" type="button">29</button> + <button class="btn cal-btn" type="button">30</button> + <button class="btn cal-btn" type="button">31</button> + </div> </div> - <div class="cal-days"> - <button class="btn cal-btn" disabled type="button">30</button> - <button class="btn cal-btn" disabled type="button">31</button> + </div> + </div> - <button class="btn cal-btn" type="button">1</button> - <button class="btn cal-btn" type="button">2</button> - <button class="btn cal-btn" type="button">3</button> - <button class="btn cal-btn" type="button">4</button> - <button class="btn cal-btn" type="button">5</button> - <button class="btn cal-btn" type="button">6</button> - <button class="btn cal-btn" type="button">7</button> + <div class="dropdown-menu d-block position-static p-2 mx-0 shadow rounded-3 w-340px" data-bs-theme="dark"> + <div class="d-grid gap-1"> + <div class="cal"> + <div class="cal-month"> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> + </button> + <strong class="cal-month-name">June</strong> + <select class="form-select cal-month-name d-none"> + <option value="January">January</option> + <option value="February">February</option> + <option value="March">March</option> + <option value="April">April</option> + <option value="May">May</option> + <option selected value="June">June</option> + <option value="July">July</option> + <option value="August">August</option> + <option value="September">September</option> + <option value="October">October</option> + <option value="November">November</option> + <option value="December">December</option> + </select> + <button class="btn cal-btn" type="button"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> + </button> + </div> + <div class="cal-weekdays text-body-secondary"> + <div class="cal-weekday">Sun</div> + <div class="cal-weekday">Mon</div> + <div class="cal-weekday">Tue</div> + <div class="cal-weekday">Wed</div> + <div class="cal-weekday">Thu</div> + <div class="cal-weekday">Fri</div> + <div class="cal-weekday">Sat</div> + </div> + <div class="cal-days"> + <button class="btn cal-btn" disabled type="button">30</button> + <button class="btn cal-btn" disabled type="button">31</button> - <button class="btn cal-btn" type="button">8</button> - <button class="btn cal-btn" type="button">9</button> - <button class="btn cal-btn" type="button">10</button> - <button class="btn cal-btn" type="button">11</button> - <button class="btn cal-btn" type="button">12</button> - <button class="btn cal-btn" type="button">13</button> - <button class="btn cal-btn" type="button">14</button> + <button class="btn cal-btn" type="button">1</button> + <button class="btn cal-btn" type="button">2</button> + <button class="btn cal-btn" type="button">3</button> + <button class="btn cal-btn" type="button">4</button> + <button class="btn cal-btn" type="button">5</button> + <button class="btn cal-btn" type="button">6</button> + <button class="btn cal-btn" type="button">7</button> - <button class="btn cal-btn" type="button">15</button> - <button class="btn cal-btn" type="button">16</button> - <button class="btn cal-btn" type="button">17</button> - <button class="btn cal-btn" type="button">18</button> - <button class="btn cal-btn" type="button">19</button> - <button class="btn cal-btn" type="button">20</button> - <button class="btn cal-btn" type="button">21</button> + <button class="btn cal-btn" type="button">8</button> + <button class="btn cal-btn" type="button">9</button> + <button class="btn cal-btn" type="button">10</button> + <button class="btn cal-btn" type="button">11</button> + <button class="btn cal-btn" type="button">12</button> + <button class="btn cal-btn" type="button">13</button> + <button class="btn cal-btn" type="button">14</button> - <button class="btn cal-btn" type="button">22</button> - <button class="btn cal-btn" type="button">23</button> - <button class="btn cal-btn" type="button">24</button> - <button class="btn cal-btn" type="button">25</button> - <button class="btn cal-btn" type="button">26</button> - <button class="btn cal-btn" type="button">27</button> - <button class="btn cal-btn" type="button">28</button> + <button class="btn cal-btn" type="button">15</button> + <button class="btn cal-btn" type="button">16</button> + <button class="btn cal-btn" type="button">17</button> + <button class="btn cal-btn" type="button">18</button> + <button class="btn cal-btn" type="button">19</button> + <button class="btn cal-btn" type="button">20</button> + <button class="btn cal-btn" type="button">21</button> - <button class="btn cal-btn" type="button">29</button> - <button class="btn cal-btn" type="button">30</button> - <button class="btn cal-btn" type="button">31</button> + <button class="btn cal-btn" type="button">22</button> + <button class="btn cal-btn" type="button">23</button> + <button class="btn cal-btn" type="button">24</button> + <button class="btn cal-btn" type="button">25</button> + <button class="btn cal-btn" type="button">26</button> + <button class="btn cal-btn" type="button">27</button> + <button class="btn cal-btn" type="button">28</button> + + <button class="btn cal-btn" type="button">29</button> + <button class="btn cal-btn" type="button">30</button> + <button class="btn cal-btn" type="button">31</button> + </div> </div> </div> </div> @@ -315,24 +365,98 @@ body_class: "" <div class="b-example-divider"></div> -<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px"> - <nav class="d-grid gap-2 col-8"> - <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start"> - <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg> - <div> - <strong class="d-block">Features</strong> - <small>Take a tour through the product</small> - </div> - </a> - <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start"> - <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg> - <div> - <strong class="d-block">Support</strong> - <small>Get help from our support crew</small> - </div> - </a> - </nav> - <div class="col-4"> - ... +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="light"> + <nav class="col-lg-8"> + <ul class="list-unstyled d-flex flex-column gap-2"> + <li> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> + <div> + <strong class="d-block">Main product</strong> + <small>Take a tour through the product</small> + </div> + </a> + </li> + <li> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> + <div> + <strong class="d-block">Another product</strong> + <small>Explore this other product we offer</small> + </div> + </a> + </li> + <li> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> + <div> + <strong class="d-block">Support</strong> + <small>Get help from our support crew</small> + </div> + </a> + </li> + </ul> + </nav> + <div class="d-none d-lg-block vr mx-4 opacity-10"> </div> + <hr class="d-lg-none"> + <div class="col-lg-auto pe-3"> + <nav> + <ul class="d-flex flex-column gap-2 list-unstyled small"> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li> + </ul> + </nav> + </div> + </div> + + <div class="dropdown-menu position-static d-flex flex-column flex-lg-row align-items-stretch justify-content-start p-3 rounded-3 shadow-lg" data-bs-theme="dark"> + <nav class="col-lg-8"> + <ul class="list-unstyled d-flex flex-column gap-2"> + <li> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> + <div> + <strong class="d-block">Main product</strong> + <small>Take a tour through the product</small> + </div> + </a> + </li> + <li> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> + <div> + <strong class="d-block">Another product</strong> + <small>Explore this other product we offer</small> + </div> + </a> + </li> + <li> + <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> + <svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> + <div> + <strong class="d-block">Support</strong> + <small>Get help from our support crew</small> + </div> + </a> + </li> + </ul> + </nav> + <div class="d-none d-lg-block vr mx-4 opacity-10"> </div> + <hr class="d-lg-none"> + <div class="col-lg-auto pe-3"> + <nav> + <ul class="d-flex flex-column gap-2 list-unstyled small"> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Documentation</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Use cases</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">API status</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Partners</a></li> + <li><a href="#" class="link-offset-2 link-underline link-underline-opacity-25 link-underline-opacity-75-hover">Resources</a></li> + </ul> + </nav> + </div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/features.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/features.css index b5d658f6b..debc26364 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/features.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/features.css @@ -4,16 +4,6 @@ border-radius: .75rem; } -.icon-link > .bi { - margin-top: .125rem; - margin-left: .125rem; - fill: currentcolor; - transition: transform .25s ease-in-out; -} -.icon-link:hover > .bi { - transform: translate(.25rem); -} - .icon-square { width: 3rem; height: 3rem; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/index.html index 35a4ef5da..8754ceced 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/features/index.html @@ -25,9 +25,6 @@ body_class: "" <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/> <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/> </symbol> - <symbol id="grid" viewBox="0 0 16 16"> - <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> - </symbol> <symbol id="collection" viewBox="0 0 16 16"> <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> </symbol> @@ -35,9 +32,6 @@ body_class: "" <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> </symbol> - <symbol id="chat-quote-fill" viewBox="0 0 16 16"> - <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> - </symbol> <symbol id="cpu-fill" viewBox="0 0 16 16"> <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> @@ -76,9 +70,9 @@ body_class: "" </div> <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="icon-link d-inline-flex align-items-center"> + <a href="#" class="icon-link"> Call to action - <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + <svg class="bi"><use xlink:href="#chevron-right"/></svg> </a> </div> <div class="feature col"> @@ -87,9 +81,9 @@ body_class: "" </div> <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="icon-link d-inline-flex align-items-center"> + <a href="#" class="icon-link"> Call to action - <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + <svg class="bi"><use xlink:href="#chevron-right"/></svg> </a> </div> <div class="feature col"> @@ -98,9 +92,9 @@ body_class: "" </div> <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> - <a href="#" class="icon-link d-inline-flex align-items-center"> + <a href="#" class="icon-link"> Call to action - <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg> + <svg class="bi"><use xlink:href="#chevron-right"/></svg> </a> </div> </div> @@ -112,7 +106,7 @@ body_class: "" <h2 class="pb-2 border-bottom">Hanging icons</h2> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="col d-flex align-items-start"> - <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> + <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> <div> @@ -124,7 +118,7 @@ body_class: "" </div> </div> <div class="col d-flex align-items-start"> - <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> + <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> </div> <div> @@ -136,7 +130,7 @@ body_class: "" </div> </div> <div class="col d-flex align-items-start"> - <div class="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> + <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> </div> <div> @@ -228,56 +222,56 @@ body_class: "" <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> - <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> + <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <div> <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> @@ -294,7 +288,7 @@ body_class: "" <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5"> <div class="col d-flex flex-column align-items-start gap-2"> <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3> - <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="btn btn-primary btn-lg">Primary button</a> </div> @@ -307,7 +301,7 @@ body_class: "" </svg> </div> <h4 class="fw-semibold mb-0">Featured title</h4> - <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> <div class="col d-flex flex-column gap-2"> @@ -317,7 +311,7 @@ body_class: "" </svg> </div> <h4 class="fw-semibold mb-0">Featured title</h4> - <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> <div class="col d-flex flex-column gap-2"> @@ -327,7 +321,7 @@ body_class: "" </svg> </div> <h4 class="fw-semibold mb-0">Featured title</h4> - <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> <div class="col d-flex flex-column gap-2"> @@ -337,7 +331,7 @@ body_class: "" </svg> </div> <h4 class="fw-semibold mb-0">Featured title</h4> - <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/footers/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/footers/index.html index 827c2426a..83c24094d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/footers/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/footers/index.html @@ -22,18 +22,18 @@ body_class: "" <div class="container"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> - <p class="col-md-4 mb-0 text-muted">© {{< year >}} Company, Inc</p> + <p class="col-md-4 mb-0 text-body-secondary">© {{< year >}} Company, Inc</p> - <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> <ul class="nav col-md-4 justify-content-end"> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li> </ul> </footer> </div> @@ -43,16 +43,16 @@ body_class: "" <div class="container"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <div class="col-md-4 d-flex align-items-center"> - <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1"> + <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1"> <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> </a> - <span class="mb-3 mb-md-0 text-muted">© {{< year >}} Company, Inc</span> + <span class="mb-3 mb-md-0 text-body-secondary">© {{< year >}} Company, Inc</span> </div> <ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> - <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> - <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> - <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> + <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> + <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> + <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> </ul> </footer> </div> @@ -62,13 +62,13 @@ body_class: "" <div class="container"> <footer class="py-3 my-4"> <ul class="nav justify-content-center border-bottom pb-3 mb-3"> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> - <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li> </ul> - <p class="text-center text-muted">© {{< year >}} Company, Inc</p> + <p class="text-center text-body-secondary">© {{< year >}} Company, Inc</p> </footer> </div> @@ -77,10 +77,10 @@ body_class: "" <div class="container"> <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top"> <div class="col mb-3"> - <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none"> + <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> - <p class="text-muted">© {{< year >}}</p> + <p class="text-body-secondary">© {{< year >}}</p> </div> <div class="col mb-3"> @@ -90,33 +90,33 @@ body_class: "" <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> <div class="col mb-3"> <h5>Section</h5> <ul class="nav flex-column"> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> </footer> @@ -131,33 +131,33 @@ body_class: "" <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> <div class="col-6 col-md-2 mb-3"> <h5>Section</h5> <ul class="nav flex-column"> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> - <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li> + <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li> </ul> </div> @@ -177,9 +177,9 @@ body_class: "" <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top"> <p>© {{< year >}} Company, Inc. All rights reserved.</p> <ul class="list-unstyled d-flex"> - <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> - <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> - <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> + <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> + <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> + <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> </ul> </div> </footer> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/grid.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/grid.css index 18e3568b1..cbc7c311f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/grid.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/grid.css @@ -1,13 +1,13 @@ .themed-grid-col { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(86, 61, 124, .15); - border: 1px solid rgba(86, 61, 124, .2); + background-color: rgba(112.520718, 44.062154, 249.437846, .15); + border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3); } .themed-container { padding: .75rem; margin-bottom: 1.5rem; - background-color: rgba(0, 123, 255, .15); - border: 1px solid rgba(0, 123, 255, .2); + background-color: rgba(112.520718, 44.062154, 249.437846, .15); + border: 1px solid rgba(112.520718, 44.062154, 249.437846, .3); } diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/headers.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/headers.css index 8230c9a5f..f887573fe 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/headers.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/headers.css @@ -10,6 +10,6 @@ font-size: 85%; } -.dropdown-toggle { +.dropdown-toggle:not(:focus) { outline: 0; } diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/index.html index b8fc8b27b..a0c87f67e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/headers/index.html @@ -35,7 +35,7 @@ body_class: "" <div class="container"> <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> - <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <span class="fs-4">Simple header</span> </a> @@ -68,16 +68,18 @@ body_class: "" <div class="container"> <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom"> - <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"> - <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> - </a> + <div class="col-md-3 mb-2 mb-md-0"> + <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none"> + <svg class="bi" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> + </a> + </div> <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0"> <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Features</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li> - <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li> - <li><a href="#" class="nav-link px-2 link-dark">About</a></li> + <li><a href="#" class="nav-link px-2">Features</a></li> + <li><a href="#" class="nav-link px-2">Pricing</a></li> + <li><a href="#" class="nav-link px-2">FAQs</a></li> + <li><a href="#" class="nav-link px-2">About</a></li> </ul> <div class="col-md-3 text-end"> @@ -121,15 +123,15 @@ body_class: "" <header class="p-3 mb-3 border-bottom"> <div class="container"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> - <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none"> + <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg> </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li> - <li><a href="#" class="nav-link px-2 link-dark">Products</a></li> + <li><a href="#" class="nav-link px-2 link-body-emphasis">Inventory</a></li> + <li><a href="#" class="nav-link px-2 link-body-emphasis">Customers</a></li> + <li><a href="#" class="nav-link px-2 link-body-emphasis">Products</a></li> </ul> <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search"> @@ -157,7 +159,7 @@ body_class: "" <header class="py-3 mb-3 border-bottom"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <div class="dropdown"> - <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> </a> <ul class="dropdown-menu text-small shadow"> @@ -194,10 +196,10 @@ body_class: "" <div class="container-fluid pb-3"> <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;"> - <div class="bg-light border rounded-3"> + <div class="bg-body-tertiary border rounded-3"> <br><br><br><br><br><br><br><br><br><br> </div> - <div class="bg-light border rounded-3"> + <div class="bg-body-tertiary border rounded-3"> <br><br><br><br><br><br><br><br><br><br> </div> </div> @@ -205,7 +207,7 @@ body_class: "" <div class="b-example-divider"></div> - <nav class="py-2 bg-light border-bottom"> + <nav class="py-2 bg-body-tertiary border-bottom"> <div class="container d-flex flex-wrap"> <ul class="nav me-auto"> <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li> @@ -222,7 +224,7 @@ body_class: "" </nav> <header class="py-3 mb-4 border-bottom"> <div class="container d-flex flex-wrap justify-content-center"> - <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none"> + <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <span class="fs-4">Double header</span> </a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/index.html index ef621fd50..7f5daa9b9 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/heroes/index.html @@ -11,7 +11,7 @@ body_class: "" <div class="px-4 py-5 my-5 text-center"> <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57"> - <h1 class="display-5 fw-bold">Centered hero</h1> + <h1 class="display-5 fw-bold text-body-emphasis">Centered hero</h1> <div class="col-lg-6 mx-auto"> <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> @@ -24,7 +24,7 @@ body_class: "" <div class="b-example-divider"></div> <div class="px-4 pt-5 my-5 text-center border-bottom"> - <h1 class="display-4 fw-bold">Centered screenshot</h1> + <h1 class="display-4 fw-bold text-body-emphasis">Centered screenshot</h1> <div class="col-lg-6 mx-auto"> <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5"> @@ -47,7 +47,7 @@ body_class: "" <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy"> </div> <div class="col-lg-6"> - <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1> + <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Responsive left-aligned hero with image</h1> <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-md-flex justify-content-md-start"> <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button> @@ -62,11 +62,11 @@ body_class: "" <div class="container col-xl-10 col-xxl-8 px-4 py-5"> <div class="row align-items-center g-lg-5 py-5"> <div class="col-lg-7 text-center text-lg-start"> - <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1> + <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Vertically centered hero sign-up form</h1> <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p> </div> <div class="col-md-10 mx-auto col-lg-5"> - <form class="p-4 p-md-5 border rounded-3 bg-light"> + <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> @@ -82,7 +82,7 @@ body_class: "" </div> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> <hr class="my-4"> - <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small> </form> </div> </div> @@ -93,7 +93,7 @@ body_class: "" <div class="container my-5"> <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> <div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> - <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1> + <h1 class="display-4 fw-bold lh-1 text-body-emphasis">Border hero with cropped image and shadows</h1> <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3"> <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button> @@ -110,7 +110,7 @@ body_class: "" <div class="bg-dark text-secondary px-4 py-5 text-center"> <div class="py-5"> - <h1 class="display-5 fw-bold text-white">Dark mode hero</h1> + <h1 class="display-5 fw-bold text-white">Dark color hero</h1> <div class="col-lg-6 mx-auto"> <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p> <div class="d-grid gap-2 d-sm-flex justify-content-sm-center"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotron/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotron/index.html index 8131d1903..df219512a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotron/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/jumbotron/index.html @@ -13,7 +13,7 @@ include_js: false </a> </header> - <div class="p-5 mb-4 bg-light rounded-3"> + <div class="p-5 mb-4 bg-body-tertiary rounded-3"> <div class="container-fluid py-5"> <h1 class="display-5 fw-bold">Custom jumbotron</h1> <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p> @@ -30,7 +30,7 @@ include_js: false </div> </div> <div class="col-md-6"> - <div class="h-100 p-5 bg-light border rounded-3"> + <div class="h-100 p-5 bg-body-tertiary border rounded-3"> <h2>Add borders</h2> <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p> <button class="btn btn-outline-secondary" type="button">Example button</button> @@ -38,7 +38,7 @@ include_js: false </div> </div> - <footer class="pt-3 mt-4 text-muted border-top"> + <footer class="pt-3 mt-4 text-body-secondary border-top"> © {{< year >}} </footer> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/index.html index 9599913c0..1a6e5e8d2 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/index.html @@ -7,11 +7,6 @@ body_class: "" --- <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - <symbol id="bootstrap" viewBox="0 0 118 94"> - <title>Bootstrap</title> - <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> - </symbol> - <symbol id="calendar-event" viewBox="0 0 16 16"> <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/> <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/> @@ -27,86 +22,88 @@ body_class: "" </symbol> </svg> -<div class="list-group w-auto"> - <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> - <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> - <div class="d-flex gap-2 w-100 justify-content-between"> - <div> - <h6 class="mb-0">List group item heading</h6> - <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="list-group"> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">List group item heading</h6> + <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p> + </div> + <small class="opacity-50 text-nowrap">now</small> </div> - <small class="opacity-50 text-nowrap">now</small> - </div> - </a> - <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> - <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> - <div class="d-flex gap-2 w-100 justify-content-between"> - <div> - <h6 class="mb-0">Another title here</h6> - <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p> + </a> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">Another title here</h6> + <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p> + </div> + <small class="opacity-50 text-nowrap">3d</small> </div> - <small class="opacity-50 text-nowrap">3d</small> - </div> - </a> - <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> - <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> - <div class="d-flex gap-2 w-100 justify-content-between"> - <div> - <h6 class="mb-0">Third heading</h6> - <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p> + </a> + <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> + <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> + <div class="d-flex gap-2 w-100 justify-content-between"> + <div> + <h6 class="mb-0">Third heading</h6> + <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p> + </div> + <small class="opacity-50 text-nowrap">1w</small> </div> - <small class="opacity-50 text-nowrap">1w</small> - </div> - </a> + </a> + </div> </div> <div class="b-example-divider"></div> -<div class="d-flex gap-5 justify-content-center"> - <div class="list-group mx-0 w-auto"> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="list-group"> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked> <span> First checkbox - <small class="d-block text-muted">With support text underneath to add more detail</small> + <small class="d-block text-body-secondary">With support text underneath to add more detail</small> </span> </label> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" type="checkbox" value=""> <span> Second checkbox - <small class="d-block text-muted">Some other text goes here</small> + <small class="d-block text-body-secondary">Some other text goes here</small> </span> </label> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" type="checkbox" value=""> <span> Third checkbox - <small class="d-block text-muted">And we end with another snippet of text</small> + <small class="d-block text-body-secondary">And we end with another snippet of text</small> </span> </label> </div> - <div class="list-group mx-0 w-auto"> + <div class="list-group"> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked> <span> First radio - <small class="d-block text-muted">With support text underneath to add more detail</small> + <small class="d-block text-body-secondary">With support text underneath to add more detail</small> </span> </label> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value=""> <span> Second radio - <small class="d-block text-muted">Some other text goes here</small> + <small class="d-block text-body-secondary">Some other text goes here</small> </span> </label> <label class="list-group-item d-flex gap-2"> <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value=""> <span> Third radio - <small class="d-block text-muted">And we end with another snippet of text</small> + <small class="d-block text-body-secondary">And we end with another snippet of text</small> </span> </label> </div> @@ -114,109 +111,115 @@ body_class: "" <div class="b-example-divider"></div> -<div class="list-group w-auto"> - <label class="list-group-item d-flex gap-3"> - <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;"> - <span class="pt-1 form-checked-content"> - <strong>Finish sales report</strong> - <small class="d-block text-muted"> - <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> - 1:00–2:00pm - </small> - </span> - </label> - <label class="list-group-item d-flex gap-3"> - <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> - <span class="pt-1 form-checked-content"> - <strong>Weekly All Hands</strong> - <small class="d-block text-muted"> - <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> - 2:00–2:30pm - </small> - </span> - </label> - <label class="list-group-item d-flex gap-3"> - <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> - <span class="pt-1 form-checked-content"> - <strong>Out of office</strong> - <small class="d-block text-muted"> - <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> - Tomorrow - </small> - </span> - </label> - <label class="list-group-item d-flex gap-3 bg-light"> - <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;"> - <span class="pt-1 form-checked-content"> - <span contenteditable="true" class="w-100">Add new task...</span> - <small class="d-block text-muted"> - <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> - Choose list... - </small> - </span> - </label> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="list-group"> + <label class="list-group-item d-flex gap-3"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <strong>Finish sales report</strong> + <small class="d-block text-body-secondary"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> + 1:00–2:00pm + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <strong>Weekly All Hands</strong> + <small class="d-block text-body-secondary"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> + 2:00–2:30pm + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3"> + <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <strong>Out of office</strong> + <small class="d-block text-body-secondary"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> + Tomorrow + </small> + </span> + </label> + <label class="list-group-item d-flex gap-3 bg-body-tertiary"> + <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;"> + <span class="pt-1 form-checked-content"> + <span contenteditable="true" class="w-100">Add new task...</span> + <small class="d-block text-body-secondary"> + <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> + Choose list... + </small> + </span> + </label> + </div> </div> <div class="b-example-divider"></div> -<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto"> - <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked> - <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1"> - First radio - <span class="d-block small opacity-50">With support text underneath to add more detail</span> - </label> - - <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value=""> - <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2"> - Second radio - <span class="d-block small opacity-50">Some other text goes here</span> - </label> - - <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value=""> - <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3"> - Third radio - <span class="d-block small opacity-50">And we end with another snippet of text</span> - </label> - - <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled> - <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4"> - Fourth disabled radio - <span class="d-block small opacity-50">This option is disabled</span> - </label> -</div> - -<div class="b-example-divider"></div> +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="list-group list-group-checkable d-grid gap-2 border-0"> + <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios1"> + First radio + <span class="d-block small opacity-50">With support text underneath to add more detail</span> + </label> -<div class="list-group list-group-radio d-grid gap-2 border-0 w-auto"> - <div class="position-relative"> - <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked> - <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1"> - <strong class="fw-semibold">First radio</strong> - <span class="d-block small opacity-75">With support text underneath to add more detail</span> + <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value=""> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios2"> + Second radio + <span class="d-block small opacity-50">Some other text goes here</span> </label> - </div> - <div class="position-relative"> - <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value=""> - <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2"> - <strong class="fw-semibold">Second radio</strong> - <span class="d-block small opacity-75">Some other text goes here</span> + <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value=""> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios3"> + Third radio + <span class="d-block small opacity-50">And we end with another snippet of text</span> </label> - </div> - <div class="position-relative"> - <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value=""> - <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3"> - <strong class="fw-semibold">Third radio</strong> - <span class="d-block small opacity-75">And we end with another snippet of text</span> + <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled> + <label class="list-group-item rounded-3 py-3" for="listGroupCheckableRadios4"> + Fourth disabled radio + <span class="d-block small opacity-50">This option is disabled</span> </label> </div> +</div> - <div class="position-relative"> - <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled> - <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4"> - <strong class="fw-semibold">Fourth disabled radio</strong> - <span class="d-block small opacity-75">This option is disabled</span> - </label> +<div class="b-example-divider"></div> + +<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> + <div class="list-group list-group-radio d-grid gap-2 border-0"> + <div class="position-relative"> + <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid1" value="" checked> + <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid1"> + <strong class="fw-semibold">First radio</strong> + <span class="d-block small opacity-75">With support text underneath to add more detail</span> + </label> + </div> + + <div class="position-relative"> + <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid2" value=""> + <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid2"> + <strong class="fw-semibold">Second radio</strong> + <span class="d-block small opacity-75">Some other text goes here</span> + </label> + </div> + + <div class="position-relative"> + <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid3" value=""> + <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid3"> + <strong class="fw-semibold">Third radio</strong> + <span class="d-block small opacity-75">And we end with another snippet of text</span> + </label> + </div> + + <div class="position-relative"> + <input class="form-check-input position-absolute top-50 end-0 me-3 fs-5" type="radio" name="listGroupRadioGrid" id="listGroupRadioGrid4" value="" disabled> + <label class="list-group-item py-3 pe-5" for="listGroupRadioGrid4"> + <strong class="fw-semibold">Fourth disabled radio</strong> + <span class="d-block small opacity-75">This option is disabled</span> + </label> + </div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/list-groups.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/list-groups.css index 218508412..b90cfa065 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/list-groups.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/list-groups/list-groups.css @@ -1,6 +1,7 @@ .list-group { + width: 100%; max-width: 460px; - margin: 4rem auto; + margin-inline: 1.5rem; } .form-check-input:checked + .form-checked-content { @@ -22,11 +23,12 @@ clip: rect(0, 0, 0, 0); } .list-group-item-check:hover + .list-group-item { - background-color: var(--bs-light); + background-color: var(--bs-secondary-bg); } .list-group-item-check:checked + .list-group-item { color: #fff; - background-color: var(--bs-blue); + background-color: var(--bs-primary); + border-color: var(--bs-primary); } .list-group-item-check[disabled] + .list-group-item, .list-group-item-check:disabled + .list-group-item { @@ -45,13 +47,13 @@ } .list-group-radio .list-group-item:hover, .list-group-radio .list-group-item:focus { - background-color: var(--bs-light); + background-color: var(--bs-secondary-bg); } .list-group-radio .form-check-input:checked + .list-group-item { background-color: var(--bs-body); - border-color: var(--bs-blue); - box-shadow: 0 0 0 2px var(--bs-blue); + border-color: var(--bs-primary); + box-shadow: 0 0 0 2px var(--bs-primary); } .list-group-radio .form-check-input[disabled] + .list-group-item, .list-group-radio .form-check-input:disabled + .list-group-item { diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/masonry/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/masonry/index.html index b4aecaa17..c554deb48 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/masonry/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/masonry/index.html @@ -37,7 +37,7 @@ extra_js: <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> - <figcaption class="blockquote-footer mb-0 text-muted"> + <figcaption class="blockquote-footer mb-0 text-body-secondary"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure> @@ -49,7 +49,7 @@ extra_js: <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -70,7 +70,7 @@ extra_js: <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has a regular title and short paragraph of text below it.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> @@ -85,7 +85,7 @@ extra_js: <blockquote class="blockquote"> <p>A well-known quote, contained in a blockquote element.</p> </blockquote> - <figcaption class="blockquote-footer mb-0 text-muted"> + <figcaption class="blockquote-footer mb-0 text-body-secondary"> Someone famous in <cite title="Source Title">Source Title</cite> </figcaption> </figure> @@ -96,7 +96,7 @@ extra_js: <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p> - <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> + <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p> </div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/index.html index a68bd419e..5fcc2d28d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/index.html @@ -7,24 +7,6 @@ body_class: "" --- <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - <symbol id="bootstrap" viewBox="0 0 118 94"> - <title>Bootstrap</title> - <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> - </symbol> - - <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16"> - <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> - </symbol> - - <symbol id="check2" viewBox="0 0 16 16"> - <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> - </symbol> - - <symbol id="check2-circle" viewBox="0 0 16 16"> - <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/> - <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/> - </symbol> - <symbol id="bookmark-star" viewBox="0 0 16 16"> <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/> <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/> @@ -34,10 +16,6 @@ body_class: "" <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/> </symbol> - <symbol id="stars" viewBox="0 0 16 16"> - <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/> - </symbol> - <symbol id="film" viewBox="0 0 16 16"> <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/> </symbol> @@ -55,7 +33,7 @@ body_class: "" </symbol> </svg> -<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet"> +<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet"> <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header border-bottom-0"> @@ -65,9 +43,9 @@ body_class: "" <div class="modal-body py-0"> <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p> </div> - <div class="modal-footer flex-column border-top-0"> - <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button> - <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button> + <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0"> + <button type="button" class="btn btn-lg btn-primary">Save changes</button> + <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> @@ -75,7 +53,7 @@ body_class: "" <div class="b-example-divider"></div> -<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice"> +<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice"> <div class="modal-dialog" role="document"> <div class="modal-content rounded-3 shadow"> <div class="modal-body p-4 text-center"> @@ -83,8 +61,8 @@ body_class: "" <p class="mb-0">You can always change your mind in your account settings.</p> </div> <div class="modal-footer flex-nowrap p-0"> - <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button> - <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button> + <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0 border-end"><strong>Yes, enable</strong></button> + <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 py-3 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button> </div> </div> </div> @@ -92,15 +70,15 @@ body_class: "" <div class="b-example-divider"></div> -<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour"> +<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour"> <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-body p-5"> <h2 class="fw-bold mb-0">What's new</h2> - <ul class="d-grid gap-4 my-5 list-unstyled"> + <ul class="d-grid gap-4 my-5 list-unstyled small"> <li class="d-flex gap-4"> - <svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> + <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> <div> <h5 class="mb-0">Grid view</h5> Not into lists? Try the new grid view. @@ -129,11 +107,10 @@ body_class: "" <div class="b-example-divider"></div> -<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin"> +<div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin"> <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header p-5 pb-4 border-bottom-0"> - <!-- <h1 class="modal-title fs-5" >Modal title</h1> --> <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> @@ -149,10 +126,10 @@ body_class: "" <label for="floatingPassword">Password</label> </div> <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button> - <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> + <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small> <hr class="my-4"> <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> - <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-3" type="submit"> + <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> Sign up with Twitter </button> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/modals.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/modals.css index 51ad2c4fb..924952ae3 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/modals.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/modals/modals.css @@ -6,10 +6,3 @@ padding-bottom: 2rem; } -.modal-alert .modal-dialog { - width: 380px; -} - -.modal-tour .modal-dialog { - width: 380px; -} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-bottom/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-bottom/index.html index c0e859ad0..92eed643a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-bottom/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-bottom/index.html @@ -4,7 +4,7 @@ title: Bottom navbar example --- <main class="container"> - <div class="bg-light p-5 rounded mt-3"> + <div class="bg-body-tertiary p-5 rounded mt-3"> <h1>Bottom Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p> <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-fixed/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-fixed/index.html index 3e2cc1085..a2a1c751e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-fixed/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-fixed/index.html @@ -32,7 +32,7 @@ extra_css: </nav> <main class="container"> - <div class="bg-light p-5 rounded"> + <div class="bg-body-tertiary p-5 rounded"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p> <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-static/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-static/index.html index 040657678..2b1b308a0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-static/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbar-static/index.html @@ -32,7 +32,7 @@ extra_css: </nav> <main class="container"> - <div class="bg-light p-5 rounded"> + <div class="bg-body-tertiary p-5 rounded"> <h1>Navbar example</h1> <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p> <a class="btn btn-lg btn-primary" href="{{< docsref "/components/navbar" >}}" role="button">View navbar docs »</a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars-offcanvas/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars-offcanvas/index.html index cbbaf8673..858998fb6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars-offcanvas/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars-offcanvas/index.html @@ -9,7 +9,7 @@ extra_css: <nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar"> <div class="container-fluid"> <a class="navbar-brand" href="#">Dark offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel"> @@ -48,10 +48,10 @@ extra_css: </div> </nav> - <nav class="navbar bg-light" aria-label="Light offcanvas navbar"> + <nav class="navbar bg-body-tertiary" aria-label="Light offcanvas navbar"> <div class="container-fluid"> <a class="navbar-brand" href="#">Light offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight" aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight" aria-labelledby="offcanvasNavbarLightLabel"> @@ -93,7 +93,7 @@ extra_css: <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large"> <div class="container-fluid"> <a class="navbar-brand" href="#">Responsive offcanvas navbar</a> - <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2"> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label"> @@ -133,7 +133,7 @@ extra_css: </nav> <div class="container my-5"> - <div class="bg-light p-5 rounded"> + <div class="bg-body-tertiary p-5 rounded"> <div class="col-sm-8 py-5 mx-auto"> <h1 class="display-5 fw-normal">Navbar with offcanvas examples</h1> <p class="fs-5">This example shows how responsive offcanvas menus work within the navbar. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars/index.html index c4d0d89e4..4c903bbb9 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/navbars/index.html @@ -336,7 +336,7 @@ extra_css: </nav> <div class="container"> - <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Eleventh navbar example"> + <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Eleventh navbar example"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> @@ -370,7 +370,7 @@ extra_css: </div> </nav> - <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Twelfth navbar example"> + <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Twelfth navbar example"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -400,7 +400,7 @@ extra_css: </div> </nav> - <nav class="navbar navbar-expand-lg bg-light rounded" aria-label="Thirteenth navbar example"> + <nav class="navbar navbar-expand-lg bg-body-tertiary rounded" aria-label="Thirteenth navbar example"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -435,7 +435,7 @@ extra_css: </nav> <div> - <div class="bg-light p-5 rounded"> + <div class="bg-body-tertiaryp-5 rounded"> <div class="col-sm-8 mx-auto"> <h1>Navbar examples</h1> <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="{{< docsref "/examples/navbar-static" >}}">top</a> and <a href="{{< docsref "/examples/navbar-fixed" >}}">fixed top</a> examples.</p> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/offcanvas-navbar/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/offcanvas-navbar/index.html index 07b18d681..f72583f9b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/offcanvas-navbar/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/offcanvas-navbar/index.html @@ -5,7 +5,7 @@ extra_css: - "offcanvas-navbar.css" extra_js: - src: "offcanvas-navbar.js" -body_class: "bg-light" +body_class: "bg-body-tertiary" aliases: "/docs/5.3/examples/offcanvas/" --- @@ -75,21 +75,21 @@ aliases: "/docs/5.3/examples/offcanvas/" <div class="my-3 p-3 bg-body rounded shadow-sm"> <h6 class="border-bottom pb-2 mb-0">Recent updates</h6> - <div class="d-flex text-muted pt-3"> + <div class="d-flex text-body-secondary pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? </p> </div> - <div class="d-flex text-muted pt-3"> + <div class="d-flex text-body-secondary pt-3"> {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> Some more representative placeholder content, related to this other user. Another status update, perhaps. </p> </div> - <div class="d-flex text-muted pt-3"> + <div class="d-flex text-body-secondary pt-3"> {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} <p class="pb-3 mb-0 small lh-sm border-bottom"> <strong class="d-block text-gray-dark">@username</strong> @@ -103,7 +103,7 @@ aliases: "/docs/5.3/examples/offcanvas/" <div class="my-3 p-3 bg-body rounded shadow-sm"> <h6 class="border-bottom pb-2 mb-0">Suggestions</h6> - <div class="d-flex text-muted pt-3"> + <div class="d-flex text-body-secondary pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> <div class="d-flex justify-content-between"> @@ -113,7 +113,7 @@ aliases: "/docs/5.3/examples/offcanvas/" <span class="d-block">@username</span> </div> </div> - <div class="d-flex text-muted pt-3"> + <div class="d-flex text-body-secondary pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> <div class="d-flex justify-content-between"> @@ -123,7 +123,7 @@ aliases: "/docs/5.3/examples/offcanvas/" <span class="d-block">@username</span> </div> </div> - <div class="d-flex text-muted pt-3"> + <div class="d-flex text-body-secondary pt-3"> {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> <div class="d-flex justify-content-between"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/index.html index 64b856a64..6c9c82cb4 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/index.html @@ -16,22 +16,22 @@ include_js: false <div class="container py-3"> <header> <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom"> - <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> + <a href="/" class="d-flex align-items-center link-body-emphasis text-decoration-none"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> <span class="fs-4">Pricing example</span> </a> <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto"> - <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a> - <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a> - <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a> - <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a> + <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Features</a> + <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Enterprise</a> + <a class="me-3 py-2 link-body-emphasis text-decoration-none" href="#">Support</a> + <a class="py-2 link-body-emphasis text-decoration-none" href="#">Pricing</a> </nav> </div> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <h1 class="display-4 fw-normal">Pricing</h1> - <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> + <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> </div> </header> @@ -43,7 +43,7 @@ include_js: false <h4 class="my-0 fw-normal">Free</h4> </div> <div class="card-body"> - <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1> + <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>10 users included</li> <li>2 GB of storage</li> @@ -60,7 +60,7 @@ include_js: false <h4 class="my-0 fw-normal">Pro</h4> </div> <div class="card-body"> - <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1> + <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>20 users included</li> <li>10 GB of storage</li> @@ -77,7 +77,7 @@ include_js: false <h4 class="my-0 fw-normal">Enterprise</h4> </div> <div class="card-body"> - <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1> + <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1> <ul class="list-unstyled mt-3 mb-4"> <li>30 users included</li> <li>15 GB of storage</li> @@ -151,7 +151,7 @@ include_js: false <div class="row"> <div class="col-12 col-md"> <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19"> - <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> + <small class="d-block mb-3 text-body-secondary">© 2017–{{< year >}}</small> </div> <div class="col-6 col-md"> <h5>Features</h5> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/pricing.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/pricing.css index c7304d10b..eb03cead5 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/pricing.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/pricing/pricing.css @@ -1,5 +1,5 @@ body { - background-image: linear-gradient(180deg, #eee, #fff 100px, #fff); + background-image: linear-gradient(180deg, var(--bs-body-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); } .container { diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html index c2eb0eb2a..c54084e3d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/index.html @@ -21,7 +21,7 @@ extra_css: </header> <main> - <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"> + <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary"> <div class="col-md-5 p-lg-5 mx-auto my-5"> <h1 class="display-4 fw-normal">Punny headline</h1> <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p> @@ -37,9 +37,9 @@ extra_css: <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> - <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 p-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> @@ -49,7 +49,7 @@ extra_css: </div> <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3"> - <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 p-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> @@ -61,19 +61,19 @@ extra_css: <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> - <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> + <div class="bg-body-tertiary shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> </div> <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3"> - <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 p-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> - <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> @@ -83,14 +83,14 @@ extra_css: </div> <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3"> - <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 p-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> </div> <div class="bg-body shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div> </div> - <div class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> + <div class="bg-body-tertiary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden"> <div class="my-3 py-3"> <h2 class="display-5">Another headline</h2> <p class="lead">And an even wittier subheading.</p> @@ -104,7 +104,7 @@ extra_css: <div class="row"> <div class="col-12 col-md"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> - <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small> + <small class="d-block mb-3 text-body-secondary">© 2017–{{< year >}}</small> </div> <div class="col-6 col-md"> <h5>Features</h5> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/index.html index 48889facc..ee1edc169 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/index.html @@ -30,41 +30,6 @@ body_class: "" <symbol id="grid" viewBox="0 0 16 16"> <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> </symbol> - <symbol id="collection" viewBox="0 0 16 16"> - <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/> - </symbol> - <symbol id="calendar3" viewBox="0 0 16 16"> - <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/> - <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/> - </symbol> - <symbol id="chat-quote-fill" viewBox="0 0 16 16"> - <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/> - </symbol> - <symbol id="cpu-fill" viewBox="0 0 16 16"> - <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/> - <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/> - </symbol> - <symbol id="gear-fill" viewBox="0 0 16 16"> - <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/> - </symbol> - <symbol id="speedometer" viewBox="0 0 16 16"> - <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/> - <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/> - </symbol> - <symbol id="toggles2" viewBox="0 0 16 16"> - <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/> - <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/> - <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/> - </symbol> - <symbol id="tools" viewBox="0 0 16 16"> - <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/> - </symbol> - <symbol id="chevron-right" viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/> - </symbol> - <symbol id="geo-fill" viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/> - </symbol> </svg> <main class="d-flex flex-nowrap"> @@ -126,8 +91,8 @@ body_class: "" <div class="b-example-divider b-example-vr"></div> - <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;"> - <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> + <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;"> + <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <span class="fs-4">Sidebar</span> </a> @@ -140,25 +105,25 @@ body_class: "" </a> </li> <li> - <a href="#" class="nav-link link-dark"> + <a href="#" class="nav-link link-body-emphasis"> <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> Dashboard </a> </li> <li> - <a href="#" class="nav-link link-dark"> + <a href="#" class="nav-link link-body-emphasis"> <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> Orders </a> </li> <li> - <a href="#" class="nav-link link-dark"> + <a href="#" class="nav-link link-body-emphasis"> <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> Products </a> </li> <li> - <a href="#" class="nav-link link-dark"> + <a href="#" class="nav-link link-body-emphasis"> <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> Customers </a> @@ -166,7 +131,7 @@ body_class: "" </ul> <hr> <div class="dropdown"> - <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <a href="#" class="d-flex align-items-center link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2"> <strong>mdo</strong> </a> @@ -182,8 +147,8 @@ body_class: "" <div class="b-example-divider b-example-vr"></div> - <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;"> - <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> + <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;"> + <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <span class="visually-hidden">Icon-only</span> </a> @@ -215,7 +180,7 @@ body_class: "" </li> </ul> <div class="dropdown border-top"> - <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <a href="#" class="d-flex align-items-center justify-content-center p-3 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle"> </a> <ul class="dropdown-menu text-small shadow"> @@ -230,8 +195,8 @@ body_class: "" <div class="b-example-divider b-example-vr"></div> - <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;"> - <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom"> + <div class="flex-shrink-0 p-3" style="width: 280px;"> + <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"> <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <span class="fs-5 fw-semibold">Collapsible</span> </a> @@ -242,9 +207,9 @@ body_class: "" </button> <div class="collapse show" id="home-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Reports</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Updates</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Reports</a></li> </ul> </div> </li> @@ -254,10 +219,10 @@ body_class: "" </button> <div class="collapse" id="dashboard-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Overview</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Annually</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Overview</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Weekly</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Monthly</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Annually</a></li> </ul> </div> </li> @@ -267,10 +232,10 @@ body_class: "" </button> <div class="collapse" id="orders-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li> - <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Returned</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Processed</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Shipped</a></li> + <li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Returned</a></li> </ul> </div> </li> @@ -293,8 +258,8 @@ body_class: "" <div class="b-example-divider b-example-vr"></div> - <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;"> - <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom"> + <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;"> + <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom"> <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <span class="fs-5 fw-semibold">List group</span> </a> @@ -309,14 +274,14 @@ body_class: "" <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> + <small class="text-body-secondary">Tues</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> + <small class="text-body-secondary">Mon</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> @@ -324,63 +289,63 @@ body_class: "" <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Wed</small> + <small class="text-body-secondary">Wed</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> + <small class="text-body-secondary">Tues</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> + <small class="text-body-secondary">Mon</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Wed</small> + <small class="text-body-secondary">Wed</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> + <small class="text-body-secondary">Tues</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> + <small class="text-body-secondary">Mon</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Wed</small> + <small class="text-body-secondary">Wed</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Tues</small> + <small class="text-body-secondary">Tues</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <div class="d-flex w-100 align-items-center justify-content-between"> <strong class="mb-1">List group item heading</strong> - <small class="text-muted">Mon</small> + <small class="text-body-secondary">Mon</small> </div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> </a> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/sidebars.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/sidebars.css index 5dc9fbaeb..f6a8f1c53 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/sidebars.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sidebars/sidebars.css @@ -20,13 +20,13 @@ main { .btn-toggle { padding: .25rem .5rem; font-weight: 600; - color: rgba(0, 0, 0, .65); + color: var(--bs-emphasis-color); background-color: transparent; } .btn-toggle:hover, .btn-toggle:focus { - color: rgba(0, 0, 0, .85); - background-color: #d2f4ea; + color: rgba(var(--bs-emphasis-color-rgb), .85); + background-color: var(--bs-tertiary-bg); } .btn-toggle::before { @@ -37,8 +37,12 @@ main { transform-origin: .5em 50%; } +[data-bs-theme="dark"] .btn-toggle::before { + content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e"); +} + .btn-toggle[aria-expanded="true"] { - color: rgba(0, 0, 0, .85); + color: rgba(var(--bs-emphasis-color-rgb), .85); } .btn-toggle[aria-expanded="true"]::before { transform: rotate(90deg); @@ -51,7 +55,7 @@ main { } .btn-toggle-nav a:hover, .btn-toggle-nav a:focus { - background-color: #d2f4ea; + background-color: var(--bs-tertiary-bg); } .scrollarea { diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/index.html index cdcf16994..0f084ed7b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/index.html @@ -27,6 +27,6 @@ include_js: false </label> </div> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> - <p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p> + <p class="mt-5 mb-3 text-body-secondary">© 2017–{{< year >}}</p> </form> </main> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/index.html index 5a898a44d..0a24a1e94 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/index.html @@ -1,20 +1,28 @@ --- layout: examples title: Starter Template -extra_css: - - "starter-template.css" --- +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="arrow-right-circle" viewBox="0 0 16 16"> + <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/> + </symbol> + <symbol id="bootstrap" viewBox="0 0 118 94"> + <title>Bootstrap</title> + <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path> + </symbol> +</svg> + <div class="col-lg-8 mx-auto p-4 py-md-5"> <header class="d-flex align-items-center pb-3 mb-5 border-bottom"> - <a href="/" class="d-flex align-items-center text-dark text-decoration-none"> - <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg> + <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none"> + <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <span class="fs-4">Starter template</span> </a> </header> <main> - <h1>Get started with Bootstrap</h1> + <h1 class="text-body-emphasis">Get started with Bootstrap</h1> <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p> <div class="mb-5"> @@ -25,28 +33,75 @@ extra_css: <div class="row g-5"> <div class="col-md-6"> - <h2>Starter projects</h2> + <h2 class="text-body-emphasis">Starter projects</h2> <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p> - <ul class="icon-list ps-0"> - <li class="d-flex align-items-start mb-1"><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li> - <li class="text-muted d-flex align-items-start mb-1">Bootstrap Parcel starter (coming soon!)</li> + <ul class="list-unstyled ps-0"> + <li> + <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap npm starter + </a> + </li> + <li> + <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/parcel" rel="noopener" target="_blank"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap Parcel starter + </a> + </li> + <li> + <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/vite" rel="noopener" target="_blank"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap Vite starter + </a> + </li> + <li> + <a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/webpack" rel="noopener" target="_blank"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap Webpack starter + </a> + </li> </ul> </div> <div class="col-md-6"> - <h2>Guides</h2> + <h2 class="text-body-emphasis">Guides</h2> <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p> - <ul class="icon-list ps-0"> - <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li> - <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li> - <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li> - <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/vite" >}}">Bootstrap Vite guide</a></li> - <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li> + <ul class="list-unstyled ps-0"> + <li> + <a class="icon-link mb-1" href="{{< docsref "/getting-started/introduction" >}}"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap quick start guide + </a> + </li> + <li> + <a class="icon-link mb-1" href="{{< docsref "/getting-started/webpack" >}}"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap Webpack guide + </a> + </li> + <li> + <a class="icon-link mb-1" href="{{< docsref "/getting-started/parcel" >}}"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap Parcel guide + </a> + </li> + <li> + <a class="icon-link mb-1" href="{{< docsref "/getting-started/vite" >}}"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Bootstrap Vite guide + </a> + </li> + <li> + <a class="icon-link mb-1" href="{{< docsref "/getting-started/contribute" >}}"> + <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-circle"/></svg> + Contributing to Bootstrap + </a> + </li> </ul> </div> </div> </main> - <footer class="pt-5 my-5 text-muted border-top"> + <footer class="pt-5 my-5 text-body-secondary border-top"> Created by the Bootstrap team · © {{< year >}} </footer> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/starter-template.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/starter-template.css deleted file mode 100644 index 582dcbe4f..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/starter-template/starter-template.css +++ /dev/null @@ -1,9 +0,0 @@ -.icon-list li::before { - display: block; - flex-shrink: 0; - width: 1.5em; - height: 1.5em; - margin-right: .5rem; - content: ""; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto; -} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer-navbar/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer-navbar/index.html index 1f807a6dc..75b99cdcc 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer-navbar/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer-navbar/index.html @@ -45,8 +45,8 @@ body_class: "d-flex flex-column h-100" </div> </main> -<footer class="footer mt-auto py-3 bg-light"> +<footer class="footer mt-auto py-3 bg-body-tertiary"> <div class="container"> - <span class="text-muted">Place sticky footer content here.</span> + <span class="text-body-secondary">Place sticky footer content here.</span> </div> </footer> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer/index.html index 7a6e127cd..4d5a33cd6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sticky-footer/index.html @@ -17,8 +17,8 @@ include_js: false </div> </main> -<footer class="footer mt-auto py-3 bg-light"> +<footer class="footer mt-auto py-3 bg-body-tertiary"> <div class="container"> - <span class="text-muted">Place sticky footer content here.</span> + <span class="text-body-secondary">Place sticky footer content here.</span> </div> </footer> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md index 99e42d92e..13a5091ad 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/checks-radios.md @@ -300,9 +300,9 @@ Different variants of `.btn`, such at the various outlined styles, are supported <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables Variables for checks: diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md index 6b33fb67b..a65a85797 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/floating-labels.md @@ -173,8 +173,8 @@ When working with the Bootstrap grid system, be sure to place form elements with </div> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-floating-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md index 4df1caa2b..0c6b5997e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/form-control.md @@ -31,6 +31,42 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`. <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example"> {{< /example >}} +## Form text + +Block-level or inline-level form text can be created using `.form-text`. + +{{< callout warning >}} +Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. +{{< /callout >}} + +Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. + +{{< example >}} +<label for="inputPassword5" class="form-label">Password</label> +<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock"> +<div id="passwordHelpBlock" class="form-text"> + Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. +</div> +{{< /example >}} + +Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class. + +{{< example >}} +<div class="row g-3 align-items-center"> + <div class="col-auto"> + <label for="inputPassword6" class="col-form-label">Password</label> + </div> + <div class="col-auto"> + <input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline"> + </div> + <div class="col-auto"> + <span id="passwordHelpInline" class="form-text"> + Must be 8-20 characters long. + </span> + </div> +</div> +{{< /example >}} + ## Disabled Add the `disabled` boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing. @@ -137,12 +173,6 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist). ## CSS -### Variables - -Form controls make use of a small amount of CSS variables to support custom styling across color modes. - -{{< scss-docs name="form-control-vars" file="scss/_root.scss" >}} - ### Sass variables `$input-*` are shared across most of our form controls (and not buttons). diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md index 01be5cffe..d984a485b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/input-group.md @@ -25,9 +25,9 @@ Place one add-on or button on either side of an input. You may also place one on <label for="basic-url" class="form-label">Your vanity URL</label> <div class="input-group"> <span class="input-group-text" id="basic-addon3">https://example.com/users/</span> - <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> + <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4"> </div> - <div class="form-text">Example help text goes outside the input group.</div> + <div class="form-text" id="basic-addon4">Example help text goes outside the input group.</div> </div> <div class="input-group mb-3"> @@ -312,8 +312,8 @@ Input groups include support for custom selects and custom file inputs. Browser </div> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="input-group-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md index 9e54a08bd..f4d2f63db 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/overview.md @@ -51,44 +51,6 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for </form> {{< /example >}} -## Form text - -Block-level or inline-level form text can be created using `.form-text`. - -{{< callout warning >}} -##### Associating form text with form controls - -Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control. -{{< /callout >}} - -Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above. - -{{< example >}} -<label for="inputPassword5" class="form-label">Password</label> -<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"> -<div id="passwordHelpBlock" class="form-text"> - Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. -</div> -{{< /example >}} - -Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`, or something else) with nothing more than the `.form-text` class. - -{{< example >}} -<div class="row g-3 align-items-center"> - <div class="col-auto"> - <label for="inputPassword6" class="col-form-label">Password</label> - </div> - <div class="col-auto"> - <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"> - </div> - <div class="col-auto"> - <span id="passwordHelpInline" class="form-text"> - Must be 8-20 characters long. - </span> - </div> -</div> -{{< /example >}} - ## Disabled forms Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter. @@ -143,11 +105,11 @@ If none of these are present, assistive technologies may resort to using the `pl While using visually hidden content (`.visually-hidden`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability. -## Sass +## CSS Many form variables are set at a general level to be re-used and extended by individual form components. You'll see these most often as `$input-btn-*` and `$input-*` variables. -### Variables +### Sass variables `$input-btn-*` variables are shared global variables between our [buttons]({{< docsref "/components/buttons" >}}) and our form components. You'll find these frequently reassigned as values to other component-specific variables. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md index 5c4f02612..31edb0a8d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/range.md @@ -42,8 +42,8 @@ By default, range inputs "snap" to integer values. To change this, you can speci <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3"> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-range-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md index 7f0c255ef..07ee8c8b1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/select.md @@ -74,8 +74,8 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara </select> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="form-select-variables" file="scss/_variables.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md index b119cd07d..5eb18f025 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/forms/validation.md @@ -127,7 +127,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t <label for="validationDefaultUsername" class="form-label">Username</label> <div class="input-group"> <span class="input-group-text" id="inputGroupPrepend2">@</span> - <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> + <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required> </div> </div> <div class="col-md-6"> @@ -349,19 +349,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas </form> {{< /example >}} -## Sass +## CSS ### Variables +{{< added-in "5.3.0" >}} + +As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}} + +These variables are also color mode adaptive, meaning they change color while in dark mode. + +### Sass variables + {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}} -### Mixins +{{< scss-docs name="form-validation-colors" file="scss/_variables.scss" >}} + +{{< scss-docs name="form-validation-colors-dark" file="scss/_variables-dark.scss" >}} + +### Sass mixins -Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles. +Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Map +### Sass map This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -369,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles. -### Loop +### Sass loop Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md index dc550ecb9..f75fed85c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/browsers-devices.md @@ -29,8 +29,8 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor {{< bs-table "table" >}} | | Chrome | Firefox | Safari | Android Browser & WebView | | --- | --- | --- | --- | --- | -| **Android** | Supported | Supported | <span class="text-muted">—</span> | v6.0+ | -| **iOS** | Supported | Supported | Supported | <span class="text-muted">—</span> | +| **Android** | Supported | Supported | <span class="text-body-secondary">—</span> | v6.0+ | +| **iOS** | Supported | Supported | Supported | <span class="text-body-secondary">—</span> | {{< /bs-table >}} ### Desktop browsers @@ -41,7 +41,7 @@ Similarly, the latest versions of most desktop browsers are supported. | | Chrome | Firefox | Microsoft Edge | Opera | Safari | | --- | --- | --- | --- | --- | --- | | **Mac** | Supported | Supported | Supported | Supported | Supported | -| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">—</span> | +| **Windows** | Supported | Supported | Supported | Supported | <span class="text-body-secondary">—</span> | {{< /bs-table >}} For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md index a4192fb65..d296d18ff 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/introduction.md @@ -119,7 +119,7 @@ Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some fun </html> ``` -### Responsive meta tag +### Viewport meta Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md index 80eed9ce1..ef3c3ba64 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/javascript.md @@ -30,6 +30,7 @@ A better alternative for those using this type of frameworks is to use a framewo We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in the browser, if your [targeted browsers support it](https://caniuse.com/es6-module). +<!-- eslint-skip --> ```html <script type="module"> import { Toast } from 'bootstrap.esm.min.js' @@ -54,6 +55,7 @@ Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relativ To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper: +<!-- eslint-skip --> ```html <!doctype html> <html lang="en"> @@ -65,13 +67,13 @@ To fix this, you can use an `importmap` to resolve the arbitrary module names to </head> <body> <h1>Hello, modularity!</h1> - <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button> + <button id="popoverButton" type="button" class="btn btn-primary btn-lg" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button> <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script> <script type="importmap"> { "imports": { - "@popperjs/core": "{{< param "cdn.popper" >}}", + "@popperjs/core": "{{< param "cdn.popper_esm" >}}", "bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@{{< param "current_version" >}}/dist/js/bootstrap.esm.min.js" } } @@ -231,42 +233,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep The default `allowList` value is the following: -```js -const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i -const DefaultAllowlist = { - // Global attributes allowed on any supplied element below. - '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], - a: ['target', 'href', 'title', 'rel'], - area: [], - b: [], - br: [], - col: [], - code: [], - div: [], - em: [], - hr: [], - h1: [], - h2: [], - h3: [], - h4: [], - h5: [], - h6: [], - i: [], - img: ['src', 'srcset', 'alt', 'title', 'width', 'height'], - li: [], - ol: [], - p: [], - pre: [], - s: [], - small: [], - span: [], - sub: [], - sup: [], - strong: [], - u: [], - ul: [] -} -``` +{{< js-docs name="allow-list" file="js/src/util/sanitizer.js" >}} If you want to add new values to this default `allowList` you can do the following: diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md index 833b07713..36619e7b2 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/parcel.md @@ -1,6 +1,6 @@ --- layout: docs -title: "Bootstrap & Parcel" +title: Bootstrap and Parcel description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel. group: getting-started toc: true @@ -123,7 +123,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss` ```scss // Import all of Bootstrap's CSS - @import "~bootstrap/scss/bootstrap"; + @import "bootstrap/scss/bootstrap"; ``` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md index f4abf050b..156f20563 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/rtl.md @@ -13,9 +13,7 @@ We recommend getting familiar with Bootstrap first by reading through our [Getti You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it powers our approach to RTL. {{< callout warning >}} -### Experimental feature - -The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights. +**Bootstrap's RTL feature is still experimental** and will evolve based on user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights. {{< /callout >}} ## Required HTML @@ -163,9 +161,7 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r After running Sass then RTLCSS, each selector in your CSS files will be prepended by `.ltr`, and `.rtl` for RTL files. Now you're able to use both files on the same page, and simply use `.ltr` or `.rtl` on your components wrappers to use one or the other direction. {{< callout warning >}} -#### Edge cases and known limitations - -While this approach is understandable, please pay attention to the following: +**Edge cases and known limitations** to consider when working with a combined LTR and RTL implementation: 1. When switching `.ltr` and `.rtl`, make sure you add `dir` and `lang` attributes accordingly. 2. Loading both files can be a real performance bottleneck: consider some [optimization]({{< docsref "/customize/optimize" >}}), and maybe try to [load one of those files asynchronously](https://www.filamentgroup.com/lab/load-css-simpler/). diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md index 4086316d3..b62e6190d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md @@ -1,6 +1,6 @@ --- layout: docs -title: "Bootstrap & Vite" +title: Bootstrap and Vite description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite. group: getting-started toc: true @@ -82,6 +82,9 @@ With dependencies installed and our project folder ready for us to start coding, export default { root: path.resolve(__dirname, 'src'), + build: { + outDir: '../dist' + }, server: { port: 8080, hot: true @@ -98,13 +101,13 @@ With dependencies installed and our project folder ready for us to start coding, <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Vite</title> + <script type="module" src="./js/main.js"></script> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Vite!</h1> <button class="btn btn-primary">Primary button</button> </div> - <script type="module" src="./js/main.js"></script> </body> </html> ``` @@ -136,36 +139,16 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s ## Import Bootstrap -1. **Set up Bootstrap's Sass import in `vite.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `resolve` section—we use this to add an alias to our source files inside `node_modules` to keep imports as simple as possible. - - <!-- eslint-skip --> - ```js - const path = require('path') - - export default { - root: path.resolve(__dirname, 'src'), - resolve: { - alias: { - '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), - } - }, - server: { - port: 8080, - hot: true - } - } - ``` - -2. **Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass. +1. **Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass. ```scss // Import all of Bootstrap's CSS - @import "~bootstrap/scss/bootstrap"; + @import "bootstrap/scss/bootstrap"; ``` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* -3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. +2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap. <!-- eslint-skip --> ```js @@ -188,7 +171,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.* -4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. +3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this. <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md index 870e070e3..bd539b891 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/webpack.md @@ -1,6 +1,6 @@ --- layout: docs -title: "Bootstrap & Webpack" +title: Bootstrap and Webpack description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack. group: getting-started toc: true @@ -24,10 +24,10 @@ We're building a Webpack project with Bootstrap from scratch, so there are some npm init -y ``` -2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. We use `--save-dev` to signal that these dependencies are only for development use and not for production. +2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we'll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production. ```sh - npm i --save-dev webpack webpack-cli webpack-dev-server + npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin ``` 3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here. @@ -49,21 +49,20 @@ Now that we have all the necessary dependencies installed, we can get to work cr We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below. ```sh -mkdir {dist,src,src/js,src/scss} -touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js +mkdir {src,src/js,src/scss} +touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js ``` When you're done, your complete project should look like this: ```text my-project/ -├── dist/ -│ └── index.html ├── src/ │ ├── js/ │ │ └── main.js -│ └── scss/ -│ └── styles.scss +│ ├── scss/ +│ │ └── styles.scss +│ └── index.html ├── package-lock.json ├── package.json └── webpack.config.js @@ -78,9 +77,13 @@ With dependencies installed and our project folder ready for us to start coding, 1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload). ```js + 'use strict' + const path = require('path') + const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { + mode: 'development', entry: './src/js/main.js', output: { filename: 'main.js', @@ -90,11 +93,14 @@ With dependencies installed and our project folder ready for us to start coding, static: path.resolve(__dirname, 'dist'), port: 8080, hot: true - } + }, + plugins: [ + new HtmlWebpackPlugin({ template: './src/index.html' }) + ] } ``` -2. **Next we fill in our `dist/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step. +2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step. ```html <!doctype html> @@ -109,20 +115,20 @@ With dependencies installed and our project folder ready for us to start coding, <h1>Hello, Bootstrap and Webpack!</h1> <button class="btn btn-primary">Primary button</button> </div> - <script src="./main.js"></script> </body> </html> ``` We're including a little bit of Bootstrap styling here with the `div class="container"` and `<button>` so that we see when Bootstrap's CSS is loaded by Webpack. -3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. +3. **Now we need an npm script to run Webpack.** Open `package.json` and add the `start` script shown below (you should already have the test script). We'll use this script to start our local Webpack dev server. You can also add a `build` script shown below to build your project. ```json { // ... "scripts": { - "start": "webpack serve --mode development", + "start": "webpack serve", + "build": "webpack build --mode=production", "test": "echo \"Error: no test specified\" && exit 1" }, // ... @@ -146,9 +152,14 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first 1. **Set up the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `module` section. ```js + 'use strict' + const path = require('path') + const autoprefixer = require('autoprefixer') + const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { + mode: 'development', entry: './src/js/main.js', output: { filename: 'main.js', @@ -159,28 +170,35 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first port: 8080, hot: true }, + plugins: [ + new HtmlWebpackPlugin({ template: './src/index.html' }) + ], module: { rules: [ { test: /\.(scss)$/, use: [ { + // Adds CSS to the DOM by injecting a `<style>` tag loader: 'style-loader' }, { + // Interprets `@import` and `url()` like `import/require()` and will resolve them loader: 'css-loader' }, { + // Loader for webpack to process CSS with PostCSS loader: 'postcss-loader', options: { postcssOptions: { plugins: () => [ - require('autoprefixer') + autoprefixer ] } } }, { + // Loads a SASS/SCSS file and compiles it to CSS loader: 'sass-loader' } ] @@ -196,7 +214,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first ```scss // Import all of Bootstrap's CSS - @import "~bootstrap/scss/bootstrap"; + @import "bootstrap/scss/bootstrap"; ``` *You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.* @@ -249,20 +267,27 @@ npm install --save-dev mini-css-extract-plugin Then instantiate and use the plugin in the Webpack configuration: ```diff ---- a/webpack/webpack.config.js -+++ b/webpack/webpack.config.js -@@ -1,8 +1,10 @@ -+const miniCssExtractPlugin = require('mini-css-extract-plugin') +--- a/webpack.config.js ++++ b/webpack.config.js +@@ -3,6 +3,7 @@ const path = require('path') - + const autoprefixer = require('autoprefixer') + const HtmlWebpackPlugin = require('html-webpack-plugin') ++const miniCssExtractPlugin = require('mini-css-extract-plugin') + module.exports = { mode: 'development', - entry: './src/js/main.js', -+ plugins: [new miniCssExtractPlugin()], - output: { - filename: "main.js", - path: path.resolve(__dirname, "dist"), -@@ -18,8 +20,8 @@ module.exports = { +@@ -17,7 +18,8 @@ module.exports = { + hot: true + }, + plugins: [ +- new HtmlWebpackPlugin({ template: './src/index.html' }) ++ new HtmlWebpackPlugin({ template: './src/index.html' }), ++ new miniCssExtractPlugin() + ], + module: { + rules: [ +@@ -25,8 +27,8 @@ module.exports = { test: /\.(scss)$/, use: [ { @@ -277,8 +302,8 @@ Then instantiate and use the plugin in the Webpack configuration: After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this: ```diff ---- a/webpack/dist/index.html -+++ b/webpack/dist/index.html +--- a/dist/index.html ++++ b/dist/index.html @@ -3,6 +3,7 @@ <head> <meta charset="utf-8"> @@ -296,9 +321,9 @@ Bootstrap's CSS includes multiple references to SVG files via inline `data:` URI Configure Webpack to extract inline SVG files like this: ```diff ---- a/webpack/webpack.config.js -+++ b/webpack/webpack.config.js -@@ -16,6 +16,14 @@ module.exports = { +--- a/webpack.config.js ++++ b/webpack.config.js +@@ -23,6 +23,14 @@ module.exports = { }, module: { rules: [ diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md index aee048e0f..d64ca4339 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/color-background.md @@ -23,6 +23,10 @@ Color and background helpers combine the power of our [`.text-*` utilities]({{< {{< /text-bg.inline >}} {{< /example >}} +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## With components Use them in place of combined `.text-*` and `.bg-*` classes, like on [badges]({{< docsref "/components/badge#background-colors" >}}): diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md index e940196ff..6a3dbe4b7 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/colored-links.md @@ -3,19 +3,41 @@ layout: docs title: Colored links description: Colored links with hover states group: helpers -toc: false +toc: true --- -You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. +## Link colors + +You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. + +{{< callout info >}} +**Heads up!** `.link-body-emphasis` is currently the only colored link that adapts to color modes. It's treated as a special case until v6 arrives and we can more thoroughly rebuild our theme colors for color modes. Until then, it's a unique, high-contrast link color with custom `:hover` and `:focus` styles. However, it still responds to the new link utilities. +{{< /callout >}} {{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }} -<a href="#" class="link-{{ .name }}">{{ .name | title }} link</a> +<p><a href="#" class="link-{{ .name }}">{{ .name | title }} link</a></p> {{- end -}} {{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis">Emphasis link</a></p> {{< /example >}} {{< callout info >}} -Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. +{{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} + +## Link utilities + +{{< added-in "5.3.0" >}} + +Colored links can also be modified by our [link utilities]({{< docsref "/utilities/link/" >}}). + +{{< example >}} +{{< colored-links.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +<p><a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a></p> +{{- end -}} +{{< /colored-links.inline >}} +<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p> +{{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md index 802ab4db6..2be6b30b4 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stacks.md @@ -17,11 +17,11 @@ Heads up! Support for gap utilities with flexbox was recently added to Safari, s Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items. -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="vstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border">Second item</div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} @@ -29,32 +29,32 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items. -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border">Second item</div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} Using horizontal margin utilities like `.ms-auto` as spacers: -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}): -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> + <div class="p-2">First item</div> + <div class="p-2">Second item</div> <div class="vr"></div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} @@ -80,6 +80,6 @@ Create an inline form with `.hstack`: </div> {{< /example >}} -## Sass +## CSS {{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md index 8a13ff41c..21a11c030 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/stretched-link.md @@ -66,7 +66,7 @@ If the stretched link doesn't seem to work, the [containing block](https://devel <p class="card-text"> <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a> </p> - <p class="card-text bg-light" style="transform: rotate(0);"> + <p class="card-text bg-body-tertiary" style="transform: rotate(0);"> This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it. </p> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md index f10a16d08..334eb3e0a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/vertical-rule.md @@ -35,11 +35,11 @@ Vertical rules scale their height in flex layouts: They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}): -{{< example >}} +{{< example class="bd-example-flex" >}} <div class="hstack gap-3"> - <div class="bg-body-tertiary border">First item</div> - <div class="bg-body-tertiary border ms-auto">Second item</div> + <div class="p-2">First item</div> + <div class="p-2 ms-auto">Second item</div> <div class="vr"></div> - <div class="bg-body-tertiary border">Third item</div> + <div class="p-2">Third item</div> </div> {{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/columns.md b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/columns.md index 1ed14844f..e6f525563 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/columns.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/columns.md @@ -94,6 +94,8 @@ Or, change the alignment of each column individually with any of the responsive ### Horizontal alignment +Change the horizontal alignment with any of the responsive `justify-content-*` classes. + {{< example class="bd-example-row" >}} <div class="container text-center"> <div class="row justify-content-start"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/containers.md b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/containers.md index 6801aca6b..7d38b72e5 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/containers.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/containers.md @@ -23,13 +23,13 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples {{< bs-table "table" >}} | | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥992px</div> | X-Large<div class="fw-normal">≥1200px</div> | XX-Large<div class="fw-normal">≥1400px</div> | | --- | --- | --- | --- | --- | --- | --- | -| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px | -| `.container-sm` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px | -| `.container-md` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 720px | 960px | 1140px | 1320px | -| `.container-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 960px | 1140px | 1320px | -| `.container-xl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1140px | 1320px | -| `.container-xxl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1320px | -| `.container-fluid` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | +| `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px | +| `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px | +| `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px | +| `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px | +| `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px | +| `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px | +| `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | {{< /bs-table >}} ## Default container diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/grid.md b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/grid.md index a9d00376f..8e4d10a3c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/grid.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/grid.md @@ -409,11 +409,11 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm </div> {{< /example >}} -## Sass +## CSS When using Bootstrap's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts. -### Variables +### Sass variables Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below. @@ -427,7 +427,7 @@ $grid-row-columns: 6; {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}} -### Mixins +### Sass mixins Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/gutters.md b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/gutters.md index 1eabc9211..a5b0772c8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/gutters.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/gutters.md @@ -71,7 +71,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo ## Horizontal & vertical gutters -`.g-*` classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class. +Use `.g-*` classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn't a need for the `.overflow-hidden` wrapper class. {{< example class="bd-example-cols" >}} <div class="container text-center"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md index 0b71ec3bc..11ca89a4a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md @@ -9,6 +9,92 @@ toc: true ## v5.3.0 +If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section. + +### Utilities + +- Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}). + +## v5.3.0-alpha2 + +If you're migrating from our previous alpha release of v5.3.0, please review the changes listed below. + +### CSS variables + +- Removed several duplicate and unused root CSS variables. + +### Color modes + +- Dark mode colors are now derived from our theme colors (e.g., `$primary`) in Sass, rather than color specific tints or shades (e.g., `$blue-300`). This allows for a more automated dark mode when customizing the default theme colors. + +- Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border. + +- [Snippet examples]({{< docsref "/examples#snippets" >}}) are now ready for dark mode with updated markup and reduced custom styles. + +- Added `color-scheme: dark` to dark mode CSS to change OS level controls like scrollbars + +- Form validation `border-color` and text `color` states now respond to dark mode, thanks to new Sass and CSS variables. + +- Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn't update properly. + +- Our `box-shadow`s will once again always stay dark instead of inverting to white when in dark mode. + +- Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes. + +- Improved docs code syntax colors and more across light and dark modes. + +### Typography + +- We no longer set a color for `$headings-color-dark` or `--bs-heading-color` for dark mode. To avoid several problems of headings within components appearing the wrong color, we've set the Sass variable to `null` and added a `null` check like we use on the default light mode. + +### Components + +- Cards now have a `color` set on them to improve rendering across color modes. + +- Added new `.nav-underline` variant for our navigation with a simpler bottom border under the active nav link. [See the docs for an example.]({{< docsref "/components/navs-tabs#underline" >}}) + +- Navs now have new `:focus-visible` styles that better match our custom button focus styles. + +### Helpers + +- Added new `.icon-link` helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too. + +- Added new focus ring helper for removing the default `outline` and setting a custom `box-shadow` focus ring. + +### Utilities + +- Renamed Sass and CSS variables `${color}-text` to `${color}-text-emphasis` to match their associated utilities. + +- Added new `.link-body-emphasis` helper alongside our [colored links]({{< docsref "/helpers/colored-links" >}}). This creates a colored link using our color mode responsive emphasis color. + +- Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. [Explore the new links utilities.]({{< docsref "/utilities/link" >}}) + +- CSS variable based `border-width` utilities have been reverted to set their property directly (as was done prior to v5.2.0). This avoids inheritance issues across nested elements, including tables. + +- Added new `.border-black` utility to match our `.text-black` and `.bg-black` utilities. + +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Deprecated the `.text-muted` utility and `$text-muted` Sass variable. It's been replaced by `.text-body-secondary` and `$body-secondary-color`. + +### Docs + +- Examples are now displayed with the appropriate light or dark color mode as dictated by the setting in our docs. Each example has an individual color mode picker. + +- Improved included JavaScript for live Toast demo. + +- Added `twbs/examples` repo contents to the top of the Examples page. + +### Tooling + +- Added SCSS testing via True to help test our utilities API and other customizations. + +- Replaced instances of our bootstrap-npm-starter project with the newer and more complete [twbs/examples repo](https://github.com/twbs/examples). + +<hr class="mb-4"> + +For a complete list of changes, [see the v5.3.0-alpha2 project on GitHub](https://github.com/orgs/twbs/projects/13). + +## v5.3.0-alpha1 + <hr class="mb-4"> ### Color modes! @@ -17,9 +103,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - **Global support for light (default) and dark color modes.** Set color mode globally on the `:root` element, on groups of elements and components with a wrapper class, or directly on components, with `data-bs-theme="light|dark"`. Also included is a new `color-mode()` mixin that can output a ruleset with the `data-bs-theme` selector or a media query, depending on your preference. - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated. + <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> Color modes replace dark variants for components, so `.btn-close-white`, `.carousel-dark`, `.dropdown-menu-dark`, and `.navbar-dark` are deprecated. -- **New extended color system.** We've added new theme colors (but not in `$theme-colors)`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities. +- **New extended color system.** We've added new theme colors (but not in `$theme-colors`) for a more nuanced, system-wide color palette with new secondary, tertiary, and emphasis colors for `color` and `background-color`. These new colors are available as Sass variables, CSS variables, and utilities. - We've also expanded our theme color Sass variables, CSS variables, and utilities to include text emphasis, subtle background colors, and subtle border colors. These are available as Sass variables, CSS variables, and utilities. @@ -44,7 +130,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Restores CSS variables for breakpoints, though we don't use them in our media queries as they're not supported. However, these can be useful in JS-specific contexts. -- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark. +- Per the color modes update, we've added new utilities for new Sass CSS variables `secondary` and `tertiary` text and background colors, plus `{color}-bg-subtle`, `{color}-border-subtle`, and `{color}-text-emphasis` for our theme colors. These new colors are available through Sass and CSS variables (but not our color maps) with the express goal of making it easier to customize across multiple colors modes like light and dark. - Adds additional variables for alerts, `.btn-close`, and `.offcanvas`. @@ -70,6 +156,10 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant. +#### Dropdowns + +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.dropdown-menu-dark` class has been deprecated and replaced with `data-bs-theme="dark"` on the dropdown or any parent element. [See the docs for an example.]({{< docsref "/components/dropdowns#dark-dropdowns" >}}) + #### Close button - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.btn-close-white` class has been deprecated and replaced with `data-bs-theme="dark"` on the close button or any parent element. [See the docs for an example.]({{< docsref "/components/close-button#dark-variant" >}}) @@ -132,9 +222,9 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu ### Utilities -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be be replaced by `.text-body-secondary` in v6. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be replaced by `.text-body-secondary` in v6. - With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. + With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. - Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._ @@ -576,7 +666,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`. - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`. - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`. - - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`. + - Renamed `.text-*-left` and `.text-*-right` to `.text-*-start` and `.text-*-end`. - <span class="badge bg-danger">Breaking</span> Disabled negative margins by default. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md index a4da94224..aa7d6b88b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/api.md @@ -389,6 +389,7 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -415,6 +416,7 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -444,6 +446,7 @@ You can enable responsive classes for an existing set of utilities that are not ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -499,6 +502,7 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -522,6 +526,7 @@ Remove any of the default utilities with the [`map-remove()` Sass function](http ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -537,6 +542,7 @@ You can also use the [`map-merge()` Sass function](https://sass-lang.com/documen ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; @@ -558,6 +564,7 @@ You can add, remove, and modify many utilities all at once with the [`map-merge( ```scss @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; +@import "bootstrap/scss/variables-dark"; @import "bootstrap/scss/maps"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/utilities"; diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md index dad71ec37..eea553291 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/background.md @@ -6,10 +6,18 @@ group: utilities toc: true --- +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Background color Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` [color utilities]({{< docsref "/utilities/colors" >}}). +{{< callout info >}} +Background utilities like `.bg-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.bg-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -79,11 +87,11 @@ Or, choose from any of the `.bg-opacity` utilities: <div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div> {{< /example >}} -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Variables +### Sass variables Most `background-color` utilities are generated by our theme colors, reassigned from our generic color palette variables. @@ -97,7 +105,13 @@ Grayscale colors are also available, but only a subset are used to generate any {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} -### Map +Variables for setting `background-color` in `.bg-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-bg-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-bg-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. @@ -111,11 +125,17 @@ RGB colors are generated from a separate Sass map: {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} -And background color opacities build on that with their own map that's consumed by the utilities API: +Background color opacities build on that with their own map that's consumed by the utilities API: {{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}} -### Mixins +Color mode background colors are also available as a Sass map: + +{{< scss-docs name="theme-bg-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-bg-subtle-dark-map" file="scss/_maps.scss" >}} + +### Sass mixins **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients. @@ -123,7 +143,7 @@ And background color opacities build on that with their own map that's consumed {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}} -### Utilities API +## Utilities API Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md index 50df793f2..fe33cac48 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/borders.md @@ -36,6 +36,10 @@ Or remove borders: ## Color +{{< callout info >}} +Border utilities like `.border-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.border-*-subtle` utility will. This will be resolved in v6. +{{< /callout >}} + Change the border color using utilities built on our theme colors. {{< example class="bd-example-border-utils" >}} @@ -45,6 +49,7 @@ Change the border color using utilities built on our theme colors. <span class="border border-{{ .name }}-subtle"></span> {{- end -}} {{< /border.inline >}} +<span class="border border-black"></span> <span class="border border-white"></span> {{< /example >}} @@ -162,6 +167,20 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< scss-docs name="border-radius-variables" file="scss/_variables.scss" >}} +Variables for setting `border-color` in `.border-*-subtle` utilities in light and dark mode: + +{{< scss-docs name="theme-border-subtle-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps + +Color mode adaptive border colors are also available as a Sass map: + +{{< scss-docs name="theme-border-subtle-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-border-subtle-dark-map" file="scss/_maps.scss" >}} + ### Sass mixins {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md index 4b1647242..e132a2f11 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md @@ -6,10 +6,18 @@ group: utilities toc: true --- +{{< callout info >}} +{{< partial "callouts/warning-color-assistive-technologies.md" >}} +{{< /callout >}} + ## Colors Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states. +{{< callout info >}} +Color utilities like `.text-*` that generated from our original `$theme-colors` Sass map don't yet respond to color modes, however, any `.text-*-emphasis` utility will. This will be resolved in v6. +{{< /callout >}} + {{< example >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -17,9 +25,8 @@ Colorize text with color utilities. If you want to colorize links, you can use t <p class="text-{{ .name }}-emphasis">.text-{{ .name }}-emphasis</p> {{- end -}} {{< /colors.inline >}} -<p class="text-body">.text-body</p> -<p class="text-muted">.text-muted</p> +<p class="text-body">.text-body</p> <p class="text-body-emphasis">.text-body-emphasis</p> <p class="text-body-secondary">.text-body-secondary</p> <p class="text-body-tertiary">.text-body-tertiary</p> @@ -35,11 +42,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t {{< /callout >}} {{< callout warning >}} -**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. -{{< /callout >}} - -{{< callout info >}} -{{< partial "callouts/warning-color-assistive-technologies.md" >}} +**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. {{< /callout >}} ## Opacity @@ -83,11 +86,11 @@ Or, choose from any of the `.text-opacity` utilities: Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class. -## Sass +## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. -### Variables +### Sass variables Most `color` utilities are generated by our theme colors, reassigned from our generic color palette variables. @@ -99,7 +102,15 @@ Grayscale colors are also available, but only a subset are used to generate any {{< scss-docs name="gray-color-variables" file="scss/_variables.scss" >}} -### Map +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +Variables for setting colors in `.text-*-emphasis` utilities in light and dark mode: + +{{< scss-docs name="theme-text-variables" file="scss/_variables.scss" >}} + +{{< scss-docs name="theme-text-dark-variables" file="scss/_variables-dark.scss" >}} + +### Sass maps Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component modifiers, and more. @@ -113,10 +124,16 @@ RGB colors are generated from a separate Sass map: {{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}} -And color opacities build on that with their own map that's consumed by the utilities API: +Color opacities build on that with their own map that's consumed by the utilities API: {{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}} +Color mode adaptive text colors are also available as a Sass map: + +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}} + ### Utilities API Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md index 1962f4bd2..dc5a497bf 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/display.md @@ -26,6 +26,7 @@ Where *value* is one of: - `inline-block` - `block` - `grid` +- `inline-grid` - `table` - `table-cell` - `table-row` @@ -89,6 +90,7 @@ Change the `display` value of elements when printing with our print display util - `.d-print-inline-block` - `.d-print-block` - `.d-print-grid` +- `.d-print-inline-grid` - `.d-print-table` - `.d-print-table-row` - `.d-print-table-cell` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md index e29503434..564c39f86 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md @@ -82,34 +82,34 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="bd-example bd-example-flex"> <div class="d-flex justify-content-start mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Start</div> </div> <div class="d-flex justify-content-end mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">End</div> </div> <div class="d-flex justify-content-center mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Center</div> </div> <div class="d-flex justify-content-between mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Between</div> </div> <div class="d-flex justify-content-around mb-3"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Around</div> </div> <div class="d-flex justify-content-evenly"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Evenly</div> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md index 4d6c476eb..debd495e8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md @@ -23,11 +23,11 @@ Classes for the value of `object-fit` are named using the format `.object-fit-{v Add the `object-fit-{value}` class to the [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element): {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" >}} -{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" >}} +{{< placeholder width="140" height="120" class="object-fit-contain border rounded" text="Object fit contain" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-cover border rounded" text="Object fit cover" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-fill border rounded" text="Object fit fill" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-scale border rounded" text="Object fit scale down" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="120" class="object-fit-none border rounded" text="Object fit none" markup="img" color="#868e96" background="#dee2e6" >}} {{< /example >}} ## Responsive @@ -35,11 +35,11 @@ Add the `object-fit-{value}` class to the [replaced element](https://developer.m Responsive variations also exist for each `object-fit` value using the format `.object-fit-{breakpoint}-{value}`, for the following breakpoint abbreviations: `sm`, `md`, `lg`, `xl`, and `xxl`. Classes can be combined for various effects as you need. {{< example class="d-flex overflow-auto" >}} -{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" >}} -{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" >}} +{{< placeholder width="140" height="80" class="object-fit-sm-contain border rounded" text="Contain on sm" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-md-contain border rounded" text="Contain on md" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-lg-contain border rounded" text="Contain on lg" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-xl-contain border rounded" text="Contain on xl" markup="img" color="#868e96" background="#dee2e6" >}} +{{< placeholder width="140" height="80" class="object-fit-xxl-contain border rounded" text="Contain on xxl" markup="img" color="#868e96" background="#dee2e6" >}} {{< /example >}} ## Video diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md index b8b58ddfd..3d0f8e81c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md @@ -18,25 +18,27 @@ Width and height utilities are generated from the utility API in `_utilities.scs <div class="w-auto p-3">Width auto</div> {{< /example >}} -{{< example >}} -<div style="height: 100px; background-color: rgba(255,0,0,0.1);"> - <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div> - <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div> - <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div> - <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div> - <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div> +{{< example class="bd-example-flex" >}} +<div style="height: 100px;"> + <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div> + <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div> + <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div> + <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div> + <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div> </div> {{< /example >}} You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. -{{< example >}} -{{< placeholder width="100%" height="100" class="mw-100" text="Max-width 100%" >}} +{{< example class="bd-example-flex" >}} +<div style="width: 50%; height: 100px;"> + <div class="mw-100" style="width: 200%;">Max-width 100%</div> +</div> {{< /example >}} -{{< example >}} -<div style="height: 100px; background-color: rgba(255,0,0,.1);"> - <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Max-height 100%</div> +{{< example class="bd-example-flex" >}} +<div style="height: 100px;"> + <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div> </div> {{< /example >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md index 3d17e081d..c7a216c31 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md @@ -75,13 +75,13 @@ Here are some representative examples of these classes: Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`. <div class="bd-example"> - <div class="mx-auto" style="width: 200px; background-color: rgba(86,61,124,.15);"> + <div class="mx-auto p-2" style="width: 200px; background-color: rgba(var(--bd-violet-rgb),.15); border: rgba(var(--bd-violet-rgb),.3) solid 1px;"> Centered element </div> </div> ```html -<div class="mx-auto" style="width: 200px;"> +<div class="mx-auto p-2" style="width: 200px;"> Centered element </div> ``` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md index 5b3cd028b..f7c030da6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md @@ -90,6 +90,7 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. ` <p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-semibold">Semibold weight text.</p> +<p class="fw-medium">Medium weight text.</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> @@ -121,7 +122,7 @@ Change a selection to our monospace font stack with `.font-monospace`. Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent. {{< example >}} -<p class="text-muted"> +<p class="text-body-secondary"> Muted text with a <a href="#" class="text-reset">reset link</a>. </p> {{< /example >}} @@ -136,19 +137,23 @@ Decorate text in components with text decoration classes. <a href="#" class="text-decoration-none">This link has its text decoration removed</a> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables + +Default type and font related Sass variables: {{< scss-docs name="font-variables" file="scss/_variables.scss" >}} -### Maps +### Sass maps Font-size utilities are generated from this map, in combination with our utilities API. {{< scss-docs name="font-sizes" file="scss/_variables.scss" >}} -### Utilities API +{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} + +## Utilities API Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md index 5e4fe05b0..ca7d8e35a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/z-index.md @@ -16,11 +16,11 @@ We call these "low-level" `z-index` utilities because of their default values of {{< /callout >}} {{< example class="bd-example-zindex-levels position-relative" >}} -<div class="z-3 position-absolute p-5 rounded-3"></div> -<div class="z-2 position-absolute p-5 rounded-3"></div> -<div class="z-1 position-absolute p-5 rounded-3"></div> -<div class="z-0 position-absolute p-5 rounded-3"></div> -<div class="z-n1 position-absolute p-5 rounded-3"></div> +<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div> +<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div> +<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div> +<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div> +<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div> {{< /example >}} ## Overlays @@ -42,3 +42,9 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale Customize this Sass map to change the available values and generated utilities. {{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}} + +### Utilities API + +Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-zindex" file="scss/_utilities.scss" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/versions.md b/vendor/twbs/bootstrap/site/content/docs/versions.md index 2f1e3356b..312decc93 100644 --- a/vendor/twbs/bootstrap/site/content/docs/versions.md +++ b/vendor/twbs/bootstrap/site/content/docs/versions.md @@ -9,13 +9,13 @@ description: An appendix of hosted documentation for nearly every release of Boo <div class="col-md-6 col-lg-4 col-xl mb-4"> <h2>{{ $release.group }}</h2> <p>{{ $release.description }}</p> - {{- $versions := sort $release.versions "v" "desc" -}} + {{- $versions := sort $release.versions "" "desc" -}} {{- range $i, $version := $versions }} {{- $len := len $versions -}} {{ if (eq $i 0) }}<div class="list-group">{{ end }} - <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version.v $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version.v }}/"> - {{ $version.v }} - {{ if (eq $version.v $.Site.Params.docs_version) -}} + <a class="list-group-item list-group-item-action py-2 text-primary{{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ $release.baseurl }}/{{ $version }}/"> + {{ $version }} + {{ if (eq $version $.Site.Params.docs_version) -}} <span class="badge bg-primary">Latest</span> {{- end }} </a> diff --git a/vendor/twbs/bootstrap/site/data/docs-versions.yml b/vendor/twbs/bootstrap/site/data/docs-versions.yml index 8fdf2b055..5f932313c 100644 --- a/vendor/twbs/bootstrap/site/data/docs-versions.yml +++ b/vendor/twbs/bootstrap/site/data/docs-versions.yml @@ -2,55 +2,55 @@ baseurl: "https://getbootstrap.com" description: "Every minor and patch release from v1 is listed below." versions: - - v: "1.0.0" - - v: "1.1.0" - - v: "1.1.1" - - v: "1.2.0" - - v: "1.3.0" - - v: "1.4.0" + - "1.0.0" + - "1.1.0" + - "1.1.1" + - "1.2.0" + - "1.3.0" + - "1.4.0" - group: v2.x baseurl: "https://getbootstrap.com" description: "Every minor and patch release from v2 is listed below." versions: - - v: "2.0.0" - - v: "2.0.1" - - v: "2.0.2" - - v: "2.0.3" - - v: "2.0.4" - - v: "2.1.0" - - v: "2.1.1" - - v: "2.2.0" - - v: "2.2.1" - - v: "2.2.2" - - v: "2.3.0" - - v: "2.3.1" - - v: "2.3.2" + - "2.0.0" + - "2.0.1" + - "2.0.2" + - "2.0.3" + - "2.0.4" + - "2.1.0" + - "2.1.1" + - "2.2.0" + - "2.2.1" + - "2.2.2" + - "2.3.0" + - "2.3.1" + - "2.3.2" - group: v3.x baseurl: "https://getbootstrap.com/docs" description: "Every minor and patch release from v3 is listed below. Last update was v3.4.1." versions: - - v: "3.3" - - v: "3.4" + - "3.3" + - "3.4" - group: v4.x baseurl: "https://getbootstrap.com/docs" description: "Our previous major release with its minor releases. Last update was v4.6.0." versions: - - v: "4.0" - - v: "4.1" - - v: "4.2" - - v: "4.3" - - v: "4.4" - - v: "4.5" - - v: "4.6" + - "4.0" + - "4.1" + - "4.2" + - "4.3" + - "4.4" + - "4.5" + - "4.6" - group: v5.x baseurl: "https://getbootstrap.com/docs" - description: "Current major release. Last update was v5.3.0-alpha1." + description: "Current major release. Last update was v5.3.0-alpha3." versions: - - v: "5.0" - - v: "5.1" - - v: "5.2" - - v: "5.3" + - "5.0" + - "5.1" + - "5.2" + - "5.3" diff --git a/vendor/twbs/bootstrap/site/data/examples.yml b/vendor/twbs/bootstrap/site/data/examples.yml index 97d4bfb93..4b85c57b1 100644 --- a/vendor/twbs/bootstrap/site/data/examples.yml +++ b/vendor/twbs/bootstrap/site/data/examples.yml @@ -1,3 +1,32 @@ +- category: Starters + external: true + description: "Functional examples of using Bootstrap in common JS frameworks like Webpack, Parcel, Vite, and more you can edit in StackBlitz." + examples: + - name: CDN starter + description: "Instantly include Bootstrap's compiled CSS and JavaScript via the jsDelivr CDN." + url: /examples/tree/main/starter + - name: Sass & JS + description: "Use npm to import and compile Bootstrap's Sass with Autoprefixer and Stylelint, plus our bundled JavaScript." + url: /examples/tree/main/sass-js + - name: Sass & ESM JS + description: "Import and compile Bootstrap's Sass with Autoprefixer and Stylelint, and compile our source JavaScript with an ESM shim." + url: /examples/tree/main/sass-js-esm + - name: Webpack + description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." + url: /examples/tree/main/webpack + htmlIndexLocation: src + - name: Parcel + description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." + url: /examples/tree/main/parcel + htmlIndexLocation: src + - name: Vite + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vite." + url: /examples/tree/main/vite + htmlIndexLocation: src + - name: Bootstrap Icons + description: "Import and compile Bootstrap's Sass with Stylelint, PurgeCSS, and the Bootstrap Icons web font." + url: /examples/tree/main/icons-font + - category: Snippets description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more." examples: @@ -17,6 +46,14 @@ description: "Extend list groups with utilities and custom styles for any content." - name: Modals description: "Transform modals to serve any purpose, from feature tours to dialogs." + - name: Badges + description: "Make badges work with custom inner HTML and new looks." + - name: Breadcrumbs + description: "Integrate custom icons and create stepper components." + - name: Buttons + description: "Create custom buttons for just about any use case with utilities." + - name: Jumbotrons + description: "Create modernized versions of the classic Bootstrap component." - category: Custom Components description: "Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." diff --git a/vendor/twbs/bootstrap/site/data/sidebar.yml b/vendor/twbs/bootstrap/site/data/sidebar.yml index 4199fa535..dea26b401 100644 --- a/vendor/twbs/bootstrap/site/data/sidebar.yml +++ b/vendor/twbs/bootstrap/site/data/sidebar.yml @@ -104,6 +104,8 @@ - title: Clearfix - title: Color & background - title: Colored links + - title: Focus ring + - title: Icon link - title: Position - title: Ratio - title: Stacks @@ -124,6 +126,7 @@ - title: Flex - title: Float - title: Interactions + - title: Link - title: Object fit - title: Opacity - title: Overflow diff --git a/vendor/twbs/bootstrap/site/layouts/_default/docs.html b/vendor/twbs/bootstrap/site/layouts/_default/docs.html index 2ad46376f..cbf06a554 100644 --- a/vendor/twbs/bootstrap/site/layouts/_default/docs.html +++ b/vendor/twbs/bootstrap/site/layouts/_default/docs.html @@ -1,3 +1,4 @@ +{{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }} {{ define "main" }} <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout"> <aside class="bd-sidebar"> @@ -16,9 +17,9 @@ <main class="bd-main order-1"> <div class="bd-intro pt-2 ps-lg-2"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> - <div class="mb-3 mb-md-0 d-flex"> + <div class="mb-3 mb-md-0 d-flex text-nowrap"> {{- if .Page.Params.added -}} - <small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2 me-2">Added in v{{ .Page.Params.added }}</small> + <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v{{ .Page.Params.added }}</small> {{- end -}} <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener"> View on GitHub @@ -31,13 +32,13 @@ </div> {{ if (eq .Page.Params.toc true) }} - <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-body-secondary"> + <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary"> <button class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents"> On this page <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg> </button> - <strong class="d-none d-md-block h6 my-2">On this page</strong> - <hr class="d-none d-md-block my-2"> + <strong class="d-none d-md-block h6 my-2 ms-3">On this page</strong> + <hr class="d-none d-md-block my-2 ms-3"> <div class="collapse bd-toc-collapse" id="tocContents"> {{ .TableOfContents }} </div> @@ -67,5 +68,5 @@ {{ range .Page.Params.extra_js -}} <script{{ with .async }} async{{ end }} src="{{ .src }}"></script> {{- end -}} - <div class="position-fixed"><input type="text" tabindex="-1"></div> + <div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div> {{ end }} diff --git a/vendor/twbs/bootstrap/site/layouts/_default/examples.html b/vendor/twbs/bootstrap/site/layouts/_default/examples.html index f70f859a6..cb689c0ce 100644 --- a/vendor/twbs/bootstrap/site/layouts/_default/examples.html +++ b/vendor/twbs/bootstrap/site/layouts/_default/examples.html @@ -1,6 +1,9 @@ <!doctype html> -<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }}> +<html {{ if eq .Page.Params.direction "rtl" }}lang="ar" dir="rtl"{{ else }}lang="en"{{ end }}{{ with .Page.Params.html_class }} class="{{ . }}"{{ end }} data-bs-theme="auto"> <head> + {{- $colorModeJS := printf "/docs/%s/assets/js/color-modes.js" $.Site.Params.docs_version -}} + <script src="{{ $colorModeJS | relURL }}"></script> + <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> @@ -33,6 +36,7 @@ } .b-example-divider { + width: 100%; height: 3rem; background-color: rgba(0, 0, 0, .1); border: solid rgba(0, 0, 0, .15); @@ -68,6 +72,26 @@ white-space: nowrap; -webkit-overflow-scrolling: touch; } + + .btn-bd-primary { + --bd-violet-bg: #712cf9; + --bd-violet-rgb: 112.520718, 44.062154, 249.437846; + + --bs-btn-font-weight: 600; + --bs-btn-color: var(--bs-white); + --bs-btn-bg: var(--bd-violet-bg); + --bs-btn-border-color: var(--bd-violet-bg); + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #6528e0; + --bs-btn-hover-border-color: #6528e0; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #5a23c8; + --bs-btn-active-border-color: #5a23c8; + } + .bd-mode-toggle { + z-index: 1500; + } </style> {{ range .Page.Params.extra_css }} @@ -76,6 +100,57 @@ {{- end }} </head> <body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}> + <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="check2" viewBox="0 0 16 16"> + <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/> + </symbol> + <symbol id="circle-half" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/> + </symbol> + <symbol id="moon-stars-fill" viewBox="0 0 16 16"> + <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/> + <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/> + </symbol> + <symbol id="sun-fill" viewBox="0 0 16 16"> + <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/> + </symbol> + </svg> + + <div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle"> + <button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" + id="bd-theme" + type="button" + aria-expanded="false" + data-bs-toggle="dropdown" + aria-label="Toggle theme (auto)"> + <svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg> + <span class="visually-hidden" id="bd-theme-text">Toggle theme</span> + </button> + <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text"> + <li> + <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> + <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg> + Light + <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> + </button> + </li> + <li> + <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> + <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg> + Dark + <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> + </button> + </li> + <li> + <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> + <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg> + Auto + <svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg> + </button> + </li> + </ul> + </div> + {{ .Content }} {{ if ne .Page.Params.include_js false -}} diff --git a/vendor/twbs/bootstrap/site/layouts/partials/callouts/danger-async-methods.md b/vendor/twbs/bootstrap/site/layouts/partials/callouts/danger-async-methods.md index c8afdc2df..f067502d3 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/callouts/danger-async-methods.md +++ b/vendor/twbs/bootstrap/site/layouts/partials/callouts/danger-async-methods.md @@ -1,5 +1 @@ -#### Asynchronous methods and transitions - -All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. - -[See our JavaScript documentation for more information](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions). +**All API methods are asynchronous and start a transition.** They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. [Learn more in our JavaScript docs.](/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#asynchronous-functions-and-transitions) diff --git a/vendor/twbs/bootstrap/site/layouts/partials/callouts/info-npm-starter.md b/vendor/twbs/bootstrap/site/layouts/partials/callouts/info-npm-starter.md index bbd3897b5..cc4a50e68 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/callouts/info-npm-starter.md +++ b/vendor/twbs/bootstrap/site/layouts/partials/callouts/info-npm-starter.md @@ -1 +1 @@ -**Get started with Bootstrap via npm with our starter project!** Head to the [twbs/bootstrap-npm-starter](https://github.com/twbs/bootstrap-npm-starter) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons. +**Get started with Bootstrap via npm with our starter project!** Head to the [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) template repository to see how to build and customize Bootstrap in your own npm project. Includes Sass compiler, Autoprefixer, Stylelint, PurgeCSS, and Bootstrap Icons. diff --git a/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-color-assistive-technologies.md b/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-color-assistive-technologies.md index 35683281d..aaa6f64c8 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-color-assistive-technologies.md +++ b/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-color-assistive-technologies.md @@ -1,3 +1 @@ -##### Conveying meaning to assistive technologies - -Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.visually-hidden` class. +**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
\ No newline at end of file diff --git a/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-input-support.md b/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-input-support.md index 7b0c8b412..f9d9c0abd 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-input-support.md +++ b/vendor/twbs/bootstrap/site/layouts/partials/callouts/warning-input-support.md @@ -1,3 +1 @@ -##### Date & color input support - -Keep in mind date inputs are [not fully supported](https://caniuse.com/input-datetime) by all browsers, namely Safari. +Some date inputs types are [not fully supported](https://caniuse.com/input-datetime) by the latest versions of Safari and Firefox. diff --git a/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html b/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html index 4b942a65e..2c1403c0c 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html @@ -90,27 +90,28 @@ type="button" aria-expanded="false" data-bs-toggle="dropdown" - data-bs-display="static"> + data-bs-display="static" + aria-label="Toggle theme (auto)"> <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> - <span class="d-lg-none ms-2">Toggle theme</span> + <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span> </button> - <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;"> + <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text"> <li> - <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"> + <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg> Light <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> </button> </li> <li> - <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"> + <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg> Dark <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> </button> </li> <li> - <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"> + <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg> Auto <svg class="bi ms-auto d-none"><use href="#check2"></use></svg> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/footer.html b/vendor/twbs/bootstrap/site/layouts/partials/footer.html index eda117479..819c6256d 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/footer.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/footer.html @@ -2,7 +2,7 @@ <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary"> <div class="row"> <div class="col-lg-3 mb-3"> - <a class="d-inline-flex align-items-center mb-2 text-body-secondary text-decoration-none" href="/" aria-label="Bootstrap"> + <a class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none" href="/" aria-label="Bootstrap"> {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block me-2" "width" "40" "height" "32") }} <span class="fs-5">Bootstrap</span> </a> @@ -41,7 +41,7 @@ <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev">Bootstrap 4</a></li> <li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons">Icons</a></li> <li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs">RFS</a></li> - <li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap-npm-starter">npm starter</a></li> + <li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/">Examples repo</a></li> </ul> </div> <div class="col-6 col-lg-2 mb-3"> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/components-utilities.html b/vendor/twbs/bootstrap/site/layouts/partials/home/components-utilities.html index 6806a24b7..f945a0386 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/components-utilities.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/components-utilities.html @@ -3,7 +3,7 @@ <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);"> <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg> </div> - <svg class="bi me-2 fs-2 text-muted"><use xlink:href="#plus"></use></svg> + <svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg> <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);"> <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg> </div> @@ -53,9 +53,9 @@ </ul> `) "html" "" }} <p class="d-flex justify-content-start mb-md-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link fw-semibold"> + <a href="/docs/{{ .Site.Params.docs_version }}/examples#snippets" class="icon-link icon-link-hover fw-semibold"> Explore customized components - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> @@ -78,9 +78,9 @@ $utilities: map-merge( `) "scss" "" }} <p class="d-flex justify-content-start mb-md-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link fw-semibold mb-3"> + <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3"> Explore the utility API - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/css-variables.html b/vendor/twbs/bootstrap/site/layouts/partials/home/css-variables.html index 300694749..96a48287b 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/css-variables.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/css-variables.html @@ -8,9 +8,9 @@ Bootstrap 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified. </p> <p class="d-flex align-items-start flex-column lead fw-normal mb-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link fw-semibold mb-3"> + <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3"> Learn more about CSS variables - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/customize.html b/vendor/twbs/bootstrap/site/layouts/partials/home/customize.html index 365b524c4..a6d04fed4 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/customize.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/customize.html @@ -7,9 +7,9 @@ Bootstrap utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins. </p> <p class="d-flex justify-content-start lead fw-normal"> - <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link fw-semibold"> + <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold"> Learn more about customizing - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </section> @@ -41,6 +41,7 @@ $prefix: "mo-"; // Required Bootstrap imports @import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/variables-dark"; @import "../node_modules/bootstrap/scss/maps"; @import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/root"; diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/get-started.html b/vendor/twbs/bootstrap/site/layouts/partials/home/get-started.html index 2c3270450..ac377a700 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/get-started.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/get-started.html @@ -7,19 +7,19 @@ Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code. </p> <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal"> - <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link fw-semibold justify-content-center ps-md-4"> + <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4"> Read installation docs - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> <section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center"> <div class="col-lg-6 py-lg-4 pe-lg-5"> - <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#box-seam"></use></svg> + <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg> <h3 class="fw-semibold">Install via package manager</h3> <p class="pe-lg-5"> - Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm. + Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects. </p> {{ highlight (printf ("npm install bootstrap@%s") .Site.Params.current_version) "sh" "" }} {{ highlight (printf ("gem install bootstrap -v %s") .Site.Params.current_ruby_version) "sh" "" }} @@ -28,7 +28,7 @@ </p> </div> <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start"> - <svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#globe2"></use></svg> + <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg> <h3 class="fw-semibold">Include via CDN</h3> <p class="pe-lg-5"> When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>. @@ -43,15 +43,15 @@ <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4"> <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack"> <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy"> - <span class="text-muted">Webpack</span> + <span class="text-body-secondary">Webpack</span> </a> <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel"> <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy"> - <span class="text-muted">Parcel</span> + <span class="text-body-secondary">Parcel</span> </a> <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite"> <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy"> - <span class="text-muted">Vite</span> + <span class="text-body-secondary">Vite</span> </a> </div> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/icons.html b/vendor/twbs/bootstrap/site/layouts/partials/home/icons.html index c6219b072..5cc7f1417 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/icons.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/icons.html @@ -8,9 +8,9 @@ <a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS. </p> <p class="d-flex justify-content-start lead fw-normal mb-md-0"> - <a href="{{ .Site.Params.icons }}" class="icon-link fw-semibold"> + <a href="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold"> Get Bootstrap Icons - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/masthead.html b/vendor/twbs/bootstrap/site/layouts/partials/home/masthead.html index 4ad471e1e..76cd01005 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/masthead.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/masthead.html @@ -3,9 +3,9 @@ <div class="col-md-8 mx-auto text-center"> <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/"> <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong> - <span class="text-muted">Color mode support, expanded color palette, and more!</span> + <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span> </a> - <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-block mx-auto mb-3"> + <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3"> <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with Bootstrap</h1> <p class="lead mb-4"> Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins. @@ -19,7 +19,7 @@ Read the docs </a> </div> - <p class="text-muted mb-0"> + <p class="text-body-secondary mb-0"> Currently <strong>v{{ .Site.Params.current_version }}</strong> <span class="px-1">·</span> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/plugins.html b/vendor/twbs/bootstrap/site/layouts/partials/home/plugins.html index b76fe6539..ab48d9bc6 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/plugins.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/plugins.html @@ -8,9 +8,9 @@ Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically. </p> <p class="d-flex justify-content-start lead fw-normal mb-md-0"> - <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link fw-semibold"> + <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold"> Learn more about Bootstrap JavaScript - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> @@ -32,14 +32,14 @@ </div> {{ highlight (printf `<div class="dropdown"> -<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> - Dropdown -</button> -<ul class="dropdown-menu"> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> - <li><button class="dropdown-item" type="button">Dropdown item</button></li> -</ul> + <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown + </button> + <ul class="dropdown-menu"> + <li><button class="dropdown-item" type="button">Dropdown item</button></li> + <li><button class="dropdown-item" type="button">Dropdown item</button></li> + <li><button class="dropdown-item" type="button">Dropdown item</button></li> + </ul> </div> `) "html" "" }} <p>Learn more about <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#using-bootstrap-as-a-module">our JavaScript as modules</a> and <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/#programmatic-api">using the programmatic API</a>.</p> @@ -54,7 +54,7 @@ <div class="col-sm-6 mb-2"> <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}"> <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4> - <small class="text-muted">{{ $plugin.description }}</small> + <small class="text-body-secondary">{{ $plugin.description }}</small> </a> </div> {{- end }} diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/themes.html b/vendor/twbs/bootstrap/site/layouts/partials/home/themes.html index e832f2c63..3e286f267 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/themes.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/themes.html @@ -8,9 +8,9 @@ Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools. </p> <p class="d-flex justify-content-start lead fw-normal mb-md-0"> - <a href="{{ .Site.Params.themes }}" class="icon-link fw-semibold"> + <a href="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold"> Browse Bootstrap Themes - <svg class="bi"><use xlink:href="#arrow-right-short"></use></svg> + <svg class="bi"><use xlink:href="#arrow-right"></use></svg> </a> </p> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons.html b/vendor/twbs/bootstrap/site/layouts/partials/icons.html index 9d078f9e7..e181d8b25 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/icons.html @@ -1,6 +1,6 @@ <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> - <symbol id="arrow-right-short" viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/> + <symbol id="arrow-right" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/> </symbol> <symbol id="book-half" viewBox="0 0 16 16"> <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/bootstrap-logo-solid.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/bootstrap-logo-solid.svg deleted file mode 100644 index 59bed369b..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/bootstrap-logo-solid.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 64 64" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><path fill="currentColor" fill-rule="evenodd" d="M16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48V16C0 7.163 7.163 0 16 0zm18.14 49c7.22 0 11.555-3.633 11.555-9.586 0-4.406-3.047-7.664-7.617-8.133v-.398c3.328-.563 5.93-3.727 5.93-7.266 0-5.203-3.82-8.437-10.172-8.437H20.242V49h13.899zm-8.648-29.367h7.125c3.89 0 6.164 1.828 6.164 4.945 0 3.211-2.414 4.922-7.054 4.922h-6.235v-9.867zm0 24.914V33.648h7.29c4.945 0 7.546 1.852 7.546 5.391 0 3.586-2.508 5.508-7.242 5.508h-7.594z"/></svg> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/bootstrap.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/bootstrap.svg deleted file mode 100644 index 1b57d335e..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/bootstrap.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 612 612" role="img"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
\ No newline at end of file diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/cloud-fill.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/cloud-fill.svg deleted file mode 100644 index 4ca9276eb..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/cloud-fill.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M3.5 13a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.5 2.5 0 0113.5 13h-10z" clip-rule="evenodd"/> -</svg> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/code.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/code.svg deleted file mode 100644 index 73156851a..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/code.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" focusable="false" viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/> -</svg> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/collapse.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/collapse.svg deleted file mode 100644 index ede702d68..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/collapse.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16"> - <title>{{ with .title }}{{ . }}{{ else }}Collapse{{ end }}</title> - <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"/> -</svg> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/expand.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/expand.svg deleted file mode 100644 index d14315175..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/expand.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16"> - <title>{{ with .title }}{{ . }}{{ else }}Expand{{ end }}</title> - <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"/> -</svg> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/homepage-hero.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/homepage-hero.svg deleted file mode 100644 index 538045ad9..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/homepage-hero.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} role="img" viewBox="0 0 900 800"><title>{{ with .title }}{{ . }}{{ else }}Bootstrap{{ end }}</title><defs><filter id="filter0_d" width="704" height="623.928" x="98" y="96" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8"/><feGaussianBlur stdDeviation="16"/><feColorMatrix values="0 0 0 0 0.423529 0 0 0 0 0.0666667 0 0 0 0 0.956863 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter1_d" width="704" height="623.928" x="98" y="96" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="8"/><feGaussianBlur stdDeviation="16"/><feColorMatrix values="0 0 0 0 0.423529 0 0 0 0 0.0666667 0 0 0 0 0.956863 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter2_d" width="260.144" height="302.767" x="327.804" y="252.368" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><filter id="filter3_d" width="261.369" height="303.992" x="327.192" y="251.755" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="8"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter><linearGradient id="paint1_linear" x1="211.405" x2="769.059" y1="251.5" y2="494.972" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9013fe"/><stop offset=".995" stop-color="#6610f2"/></linearGradient><linearGradient id="paint2_linear" x1="363.642" x2="515.493" y1="319.901" y2="465.49" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#f1e5fc"/></linearGradient><radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientTransform="rotate(90 25 425) scale(400)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ced4da"/><stop offset="1" stop-color="#ced4da" stop-opacity="0"/></radialGradient><clipPath id="clip0"><path fill="#fff" d="M0 0h900v800H0z"/></clipPath></defs><g clip-path="url(#clip0)"><circle cx="450" cy="400" r="400" fill="url(#paint0_radial)"/><path fill="#ffc107" fill-rule="evenodd" d="M138 539h98v46h-98v-46zm100-2v50H136v-50h102z" clip-rule="evenodd"/><path fill="#ffc107" fill-rule="evenodd" d="M238 539h89a7 7 0 017 7v32a7 7 0 01-7 7h-89v-46zm89-2a9 9 0 019 9v32a9 9 0 01-9 9h-91v-50h91zm-281.816 0c-5.072 0-9.184 4.029-9.184 9v32c0 4.971 4.112 9 9.184 9H136v-50H45.184zM60 558a4 4 0 000 8h52a4 4 0 000-8H60z" clip-rule="evenodd"/><path fill="#007bff" fill-rule="evenodd" d="M115 400a8 8 0 100-16 8 8 0 000 16zm0 2c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm-30 0c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm0-5a5 5 0 100-10 5 5 0 000 10zm53-15a4 4 0 00-4 4v12a4 4 0 004 4h12a4 4 0 004-4v-12a4 4 0 00-4-4h-12zm11.676 5.324a1.103 1.103 0 00-1.591.033l-5.115 6.517-3.084-3.084a1.105 1.105 0 00-1.562 1.563l3.898 3.898a1.103 1.103 0 001.589-.03l5.881-7.351a1.103 1.103 0 00-.016-1.546zM180 384h-12a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-12a2 2 0 00-2-2zm-12-2a4 4 0 00-4 4v12a4 4 0 004 4h12a4 4 0 004-4v-12a4 4 0 00-4-4h-12z" clip-rule="evenodd"/><path fill="#adb5bd" fill-rule="evenodd" d="M473 554c0-5.523 4.477-10 10-10h260c5.523 0 10 4.477 10 10v130.125c0 5.523-4.477 10-10 10H626.646a7.994 7.994 0 00-5.64 2.327l-6.596 6.556c-.78.776-2.04.776-2.82 0l-6.596-6.556a7.994 7.994 0 00-5.64-2.327H483c-5.523 0-10-4.477-10-10V554zm10-8a8 8 0 00-8 8v29h276v-29a8 8 0 00-8-8H483zm268 39H475v99.125a8 8 0 008 8h116.354a10 10 0 017.05 2.908L613 701.59l6.596-6.557a10 10 0 017.05-2.908H743a8 8 0 008-8V585z" clip-rule="evenodd"/><path fill="#007bff" fill-rule="evenodd" d="M503 74c0-5.523 4.477-10 10-10h260c5.523 0 10 4.477 10 10v160c0 5.523-4.477 10-10 10H513c-5.523 0-10-4.477-10-10V74zm10-8a8 8 0 00-8 8v29h276V74a8 8 0 00-8-8H513zm268 39H505v97h276v-97zm0 99H644v38h129a8 8 0 008-8v-30zm-139 38v-38H505v30a8 8 0 008 8h129z" clip-rule="evenodd"/><path fill="#007bff" fill-rule="evenodd" d="M756.293 79.293a1 1 0 011.414 0L762 83.586l4.293-4.293a1 1 0 111.414 1.414L763.414 85l4.293 4.293a1 1 0 11-1.414 1.414L762 86.414l-4.293 4.293a1 1 0 11-1.414-1.414L760.586 85l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/><path fill="#007bff" d="M673 223a4 4 0 014-4h72a4 4 0 010 8h-72a4 4 0 01-4-4zm-140 0a4 4 0 014-4h72a4 4 0 010 8h-72a4 4 0 01-4-4z"/><path fill="#e83e8c" fill-rule="evenodd" d="M757 432H475a7 7 0 00-7 7v32a7 7 0 007 7h282a7 7 0 007-7v-32a7 7 0 00-7-7zm-282-2a9 9 0 00-9 9v32a9 9 0 009 9h282a9 9 0 009-9v-32a9 9 0 00-9-9H475zm310 0a9 9 0 00-9 9v32a9 9 0 009 9h72a9 9 0 009-9v-32a9 9 0 00-9-9h-72zm10 21a4 4 0 000 8h52a4 4 0 000-8h-52z" clip-rule="evenodd"/><path fill="#dc3545" fill-rule="evenodd" d="M825 336H541a6 6 0 100 12h284a6 6 0 100-12zm-284-2a8 8 0 000 16h284a8 8 0 000-16H541z" clip-rule="evenodd"/><path fill="#dc3545" d="M533 342a8 8 0 018-8h242v16H541a8 8 0 01-8-8z"/><path fill="#adb5bd" fill-rule="evenodd" d="M57 271a6 6 0 00-6 6v28a6 6 0 006 6h81.515a6 6 0 014.242 1.757l7.536 7.536a1 1 0 001.414 0l7.536-7.536a6 6 0 014.242-1.757H245a6 6 0 006-6v-28a6 6 0 00-6-6H57zm33 16a4 4 0 000 8h122a4 4 0 000-8H90z" clip-rule="evenodd"/><path fill="#20c997" fill-rule="evenodd" d="M253 157c0-5.523-4.477-10-10-10H141c-5.523 0-10 4.477-10 10v39a1 1 0 002 0v-39a8 8 0 018-8h102a8 8 0 018 8v39a1 1 0 001 1h198a1 1 0 000-2H253v-38z" clip-rule="evenodd"/><path fill="#20c997" d="M151 174a4 4 0 014-4h72a4 4 0 010 8h-72a4 4 0 01-4-4z"/><path fill="url(#paint1_linear)" fill-rule="evenodd" d="M202.606 300.603c-8.615-28.187 6.531-60.366 36.506-68.398l309.643-82.969c29.975-8.031 59.181 12.264 65.814 40.982 6.371 27.588 17.095 62.662 33.744 89.141 16.7 26.562 36.732 40.854 62.058 36.589l7.125 26.591c-24.065 8.969-34.268 31.362-35.45 62.716-1.178 31.256 7.072 66.993 15.348 94.07 8.615 28.187-6.531 60.366-36.506 68.398l-309.643 82.969c-29.975 8.031-59.181-12.264-65.814-40.982-6.371-27.587-17.095-62.661-33.744-89.141-16.7-26.562-36.732-40.854-62.058-36.588l-7.125-26.592c24.065-8.969 34.268-31.362 35.45-62.715 1.178-31.257-7.072-66.994-15.348-94.071z" clip-rule="evenodd" filter="url(#filter0_d)"/><path fill-opacity=".15" fill-rule="evenodd" d="M239.37 233.171c-29.369 7.87-44.275 39.435-35.808 67.14 8.286 27.109 16.576 62.974 15.391 94.4-1.175 31.158-11.239 53.906-35.25 63.291l6.659 24.848c25.486-3.877 45.576 10.791 62.172 37.187 16.739 26.623 27.493 61.828 33.872 89.448 6.519 28.227 35.21 48.11 64.58 40.241l309.644-82.969c29.369-7.87 44.275-39.435 35.807-67.139-8.285-27.11-16.575-62.975-15.39-94.401 1.175-31.158 11.239-53.906 35.25-63.29l-6.659-24.849c-25.486 3.877-45.576-10.791-62.172-37.186-16.739-26.624-27.493-61.829-33.872-89.449-6.519-28.227-35.21-48.11-64.58-40.241L239.37 233.171zm471.001 82.777c-25.326 4.265-45.358-10.027-62.058-36.589-16.649-26.479-27.373-61.553-33.744-89.141-6.633-28.718-35.839-49.013-65.814-40.982l-309.643 82.969c-29.975 8.032-45.121 40.211-36.506 68.398 8.276 27.077 16.526 62.814 15.348 94.071-1.182 31.353-11.385 53.746-35.45 62.715l7.125 26.592c25.326-4.266 45.358 10.026 62.058 36.588 16.649 26.479 27.373 61.554 33.744 89.141 6.633 28.718 35.839 49.013 65.814 40.982l309.643-82.969c29.975-8.032 45.121-40.211 36.506-68.398-8.276-27.077-16.526-62.814-15.348-94.07 1.182-31.354 11.385-53.747 35.45-62.716l-7.125-26.591z" clip-rule="evenodd" filter="url(#filter1_d)"/><path fill="url(#paint2_linear)" d="M494.943 510.853c48.05-12.875 70.547-44.737 59.895-84.492-8.052-30.051-34.542-46.271-66.141-41.494l-.336-1.252c21.532-9.796 33.472-35.977 27.056-59.924-9.143-34.12-41.392-49.3-81.46-38.564l-88.221 23.639a2 2 0 00-1.414 2.449l59.481 221.988a2 2 0 002.45 1.414l88.69-23.764zM386.538 328.532l46.642-12.498c25.355-6.794 42.858.93 48.478 21.903 5.997 22.382-7.395 39.39-37.759 47.526l-39.286 10.527-18.075-67.458zm45.167 168.567l-19.92-74.345 46.328-12.414c33.181-8.891 53.753-.983 60.296 23.434 6.542 24.416-6.724 41.894-38.34 50.366l-48.364 12.959z" filter="url(#filter2_d)"/><path fill="#fff" fill-rule="evenodd" d="M343.839 311.345a2.5 2.5 0 011.767-3.062l88.221-23.639c20.12-5.391 38.326-4.288 52.67 2.492 14.355 6.784 24.796 19.232 29.403 36.426 6.438 24.026-5.424 50.293-26.947 60.331l.111.414c31.637-4.594 58.171 11.749 66.257 41.925 5.36 20.004 2.385 38.065-8.009 52.744-10.386 14.667-28.139 25.902-52.24 32.36l-88.69 23.764a2.5 2.5 0 01-3.062-1.768l-59.481-221.987zm2.026-2.096a1.5 1.5 0 00-1.06 1.837l59.481 221.988a1.5 1.5 0 001.837 1.06l88.691-23.764c23.949-6.418 41.47-17.551 51.682-31.972 10.203-14.409 13.151-32.157 7.859-51.908-7.981-29.786-34.216-45.87-65.584-41.129l-.442.067-.561-2.093.386-.175c21.297-9.689 33.137-35.616 26.78-59.34-4.536-16.926-14.791-29.128-28.864-35.78-14.083-6.656-32.036-7.775-51.984-2.43l-88.221 23.639zm40.061 18.929l47.124-12.627c12.743-3.414 23.585-3.201 31.974.566 8.408 3.775 14.275 11.085 17.117 21.691 3.034 11.325 1.167 21.34-5.336 29.545-6.485 8.183-17.539 14.51-32.777 18.593l-39.768 10.656-18.334-68.424zm1.224.707l17.817 66.492 38.802-10.397c15.126-4.053 25.951-10.297 32.253-18.248 6.284-7.929 8.115-17.61 5.153-28.666-2.778-10.367-8.473-17.405-16.56-21.037-8.106-3.64-18.693-3.891-31.306-.512l-46.159 12.368zm24.022 93.515l46.812-12.543c16.638-4.458 30.197-4.729 40.447-.757 10.282 3.985 17.155 12.209 20.461 24.544 3.303 12.329 1.615 22.969-4.946 31.595-6.545 8.603-17.885 15.133-33.748 19.384l-48.846 13.088-20.18-75.311zm1.225.707l19.662 73.379 47.88-12.829c15.753-4.221 26.854-10.666 33.211-19.024 6.341-8.335 8.014-18.643 4.776-30.73-3.238-12.081-9.921-20.019-19.856-23.87-9.967-3.863-23.284-3.643-39.827.79l-45.846 12.284z" clip-rule="evenodd" filter="url(#filter3_d)"/></g></svg>
\ No newline at end of file diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/list.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/list.svg deleted file mode 100644 index a801c2262..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/list.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 16 16"> - <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> -</svg>
\ No newline at end of file diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/menu.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/menu.svg deleted file mode 100644 index 70eaccec7..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/menu.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 30 30" role="img"><title>{{ with .title }}{{ . }}{{ else }}Menu{{ end }}</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>
\ No newline at end of file diff --git a/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md b/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md index e99ff7112..3b3696ed8 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md +++ b/vendor/twbs/bootstrap/site/layouts/partials/js-data-attributes.md @@ -1,3 +1,5 @@ As options can be passed via data attributes or JavaScript, you can append an option name to `data-bs-`, as in `data-bs-animation="{value}"`. Make sure to change the case type of the option name from "_camelCase_" to "_kebab-case_" when passing the options via data attributes. For example, use `data-bs-custom-class="beautifier"` instead of `data-bs-customClass="beautifier"`. As of Bootstrap 5.2.0, all components support an **experimental** reserved data attribute `data-bs-config` that can house simple component configuration as a JSON string. When an element has `data-bs-config='{"delay":0, "title":123}'` and `data-bs-title="456"` attributes, the final `title` value will be `456` and the separate data attributes will override values given on `data-bs-config`. In addition, existing data attributes are able to house JSON values like `data-bs-delay='{"show":0,"hide":150}'`. + +The final configuration object is the merged result of `data-bs-config`, `data-bs-`, and `js object` where the latest given key-value overrides the others. diff --git a/vendor/twbs/bootstrap/site/layouts/partials/social.html b/vendor/twbs/bootstrap/site/layouts/partials/social.html index 2226c386c..f4f556e5a 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/social.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/social.html @@ -1,15 +1,27 @@ +{{- $pageTitle := .Title | markdownify -}} +{{- $pageDescription := .Page.Params.description | default .Site.Params.description | markdownify -}} +{{- $socialImagePath := printf "/docs/%s/assets" .Site.Params.docs_version -}} + +{{- if .Page.Params.thumbnail -}} + {{- $socialImagePath = path.Join $socialImagePath "img/" .Page.Params.thumbnail -}} +{{- else -}} + {{- $socialImagePath = path.Join $socialImagePath "brand/bootstrap-social.png" -}} +{{- end -}} + <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@{{ .Site.Params.twitter }}"> <meta name="twitter:creator" content="@{{ .Site.Params.twitter }}"> -<meta name="twitter:title" content="{{ .Title | markdownify }}"> -<meta name="twitter:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}"> -<meta name="twitter:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}"> +<meta name="twitter:title" content="{{ $pageTitle }}"> +<meta name="twitter:description" content="{{ $pageDescription }}"> +<meta name="twitter:image" content="{{ $socialImagePath | absURL }}"> <meta property="og:url" content="{{ .Permalink }}"> -<meta property="og:title" content="{{ .Title | markdownify }}"> -<meta property="og:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}"> +<meta property="og:title" content="{{ $pageTitle }}"> +<meta property="og:description" content="{{ $pageDescription }}"> <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}"> +<meta property="og:image" content="{{ $socialImagePath | absURL }}"> <meta property="og:image:type" content="image/png"> -<meta property="og:image:width" content="1000"> -<meta property="og:image:height" content="500"> -<meta property="og:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}"> +{{ with (imageConfig (path.Join "site/static" $socialImagePath)) -}} +<meta property="og:image:width" content="{{ .Width }}"> +<meta property="og:image:height" content="{{ .Height }}"> +{{- end }} diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html index 8a9cdff0c..ab183e0a3 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html @@ -28,8 +28,8 @@ {{- if eq $show_markup true -}} {{- if eq $show_preview true -}} - <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1"> - <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small> + <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> + <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small> <div class="d-flex ms-auto"> <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz"> <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg> diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/js-dismiss.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/js-dismiss.html index 45d72d0eb..3d0c27883 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/js-dismiss.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/js-dismiss.html @@ -2,13 +2,13 @@ {{- $name := .Get 0 -}} -Dismissal can be achieved with the `data` attribute on a button **within the {{ $name }}** as demonstrated below: +Dismissal can be achieved with the `data-bs-dismiss` attribute on a button **within the {{ $name }}** as demonstrated below: ```html <button type="button" class="btn-close" data-bs-dismiss="{{ $name }}" aria-label="Close"></button> ``` -or on a button **outside the {{ $name }}** using the `data-bs-target` as demonstrated below: +or on a button **outside the {{ $name }}** using the additional `data-bs-target` as demonstrated below: ```html <button type="button" class="btn-close" data-bs-dismiss="{{ $name }}" data-bs-target="#my-{{ $name }}" aria-label="Close"></button> diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/placeholder.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/placeholder.html index 7c65bf00b..6a6a02033 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/placeholder.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/placeholder.html @@ -32,8 +32,8 @@ {{- if eq $markup "img" -}} <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}} - %3Crect%20width='100%25'%20height='100%25'%20fill='%23dee2e6'%3E%3C/rect%3E - {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='%23868e96'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}} + %3Crect%20width='100%25'%20height='100%25'%20fill='{{ replace $background "#" "%23" }}'%3E%3C/rect%3E + {{- if $show_text }}%3Ctext%20x='50%25'%20y='50%25'%20fill='{{ replace $color "#" "%23" }}'%20dy='.3em'%3E{{ $text }}%3C/text%3E{{ end -}} %3C/svg%3E"> {{- else -}} <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false"> diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html index 3d1cd09a5..d28b29c92 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html @@ -39,5 +39,38 @@ {{- $match = replace $match " !default" "" -}} {{- end -}} - {{- highlight $match "scss" "" -}} + <div class="bd-example-snippet bd-code-snippet bd-scss-docs"> + <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom"> + <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}"> + {{- $file -}} + </a> + <div class="d-flex ms-auto"> + <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard"> + <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg> + </button> + </div> + </div> + {{- $unindent := 0 -}} + {{- $found := false -}} + {{- $first_line:= index (split $match "\n") 0 -}} + {{- range $char := split $first_line "" -}} + {{- if and (eq $char " ") (not $found) -}} + {{- $unindent = add $unindent 1 -}} + {{- else -}} + {{- $found = true -}} + {{- end -}} + {{- end -}} + {{- $output := "" -}} + {{- if (gt $unindent 0) -}} + {{- $prefix := (strings.Repeat $unindent " ") -}} + {{- range $line := split $match "\n" -}} + {{- $line = strings.TrimPrefix $prefix $line -}} + {{ $output = printf "%s%s\n" $output $line }} + {{- end -}} + {{- $output = chomp $output -}} + {{- else -}} + {{- $output = $match -}} + {{- end -}} + {{- highlight $output "scss" "" -}} + </div> {{- end -}} diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/brand/bootstrap-social-logo.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/brand/bootstrap-social-logo.png Binary files differdeleted file mode 100644 index 9dbb732a4..000000000 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/brand/bootstrap-social-logo.png +++ /dev/null diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid.png Binary files differindex 2c18784c2..15ccfd416 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid@2x.png Binary files differindex e95c36365..78ade65f5 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/grid@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png Binary files differindex a7aa65be0..59538797c 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server.png Binary files differindex 1833fb8a0..db36ee594 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/parcel-dev-server.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png Binary files differindex 0c3741bd6..a3ae0953f 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server.png Binary files differindex e29729c23..30a98b805 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/vite-dev-server.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png Binary files differindex fc37d92d3..0bf8304e9 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server.png Binary files differindex ecba18967..2d612d378 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/guides/webpack-dev-server.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js index 41b6b893e..4528ba36b 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/js/color-modes.js @@ -1,6 +1,6 @@ /*! * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2023 The Bootstrap Authors * Licensed under the Creative Commons Attribution 3.0 Unported License. */ @@ -27,17 +27,32 @@ setTheme(getPreferredTheme()) - const showActiveTheme = theme => { + const showActiveTheme = (theme, focus = false) => { + const themeSwitcher = document.querySelector('#bd-theme') + + if (!themeSwitcher) { + return + } + + const themeSwitcherText = document.querySelector('#bd-theme-text') const activeThemeIcon = document.querySelector('.theme-icon-active use') const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') document.querySelectorAll('[data-bs-theme-value]').forEach(element => { element.classList.remove('active') + element.setAttribute('aria-pressed', 'false') }) btnToActive.classList.add('active') + btnToActive.setAttribute('aria-pressed', 'true') activeThemeIcon.setAttribute('href', svgOfActiveBtn) + const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})` + themeSwitcher.setAttribute('aria-label', themeSwitcherLabel) + + if (focus) { + themeSwitcher.focus() + } } window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { @@ -55,7 +70,7 @@ const theme = toggle.getAttribute('data-bs-theme-value') localStorage.setItem('theme', theme) setTheme(theme) - showActiveTheme(theme) + showActiveTheme(theme, true) }) }) }) |
