diff options
author | Mario <mario@mariovavti.com> | 2023-06-02 16:36:57 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2023-06-02 16:36:57 +0000 |
commit | bd84ff483887c55c6ede4ba94e1a9175e34090b8 (patch) | |
tree | 799929705f903f4ba4111ca37d5028180371b621 /vendor/twbs/bootstrap/site | |
parent | 87689df062f09adf104ff996b7bc942ba508a2b4 (diff) | |
download | volse-hubzilla-bd84ff483887c55c6ede4ba94e1a9175e34090b8.tar.gz volse-hubzilla-bd84ff483887c55c6ede4ba94e1a9175e34090b8.tar.bz2 volse-hubzilla-bd84ff483887c55c6ede4ba94e1a9175e34090b8.zip |
update bootstrap to version 5.3
Diffstat (limited to 'vendor/twbs/bootstrap/site')
98 files changed, 932 insertions, 658 deletions
diff --git a/vendor/twbs/bootstrap/site/assets/js/application.js b/vendor/twbs/bootstrap/site/assets/js/application.js index 6bb71f0c2..712b31a23 100644 --- a/vendor/twbs/bootstrap/site/assets/js/application.js +++ b/vendor/twbs/bootstrap/site/assets/js/application.js @@ -14,9 +14,10 @@ // Scroll the active sidebar link into view const sidenav = document.querySelector('.bd-sidebar') - if (sidenav) { + const sidenavActiveLink = document.querySelector('.bd-links-nav .active') + + if (sidenav && sidenavActiveLink) { const sidenavHeight = sidenav.clientHeight - const sidenavActiveLink = document.querySelector('.bd-links-nav .active') const sidenavActiveLinkTop = sidenavActiveLink.offsetTop const sidenavActiveLinkHeight = sidenavActiveLink.clientHeight const viewportTop = sidenavActiveLinkTop diff --git a/vendor/twbs/bootstrap/site/assets/scss/_colors.scss b/vendor/twbs/bootstrap/site/assets/scss/_colors.scss index a71a8973b..da4bbace1 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_colors.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_colors.scss @@ -41,7 +41,6 @@ } // stylelint-disable declaration-block-single-line-max-declarations - .bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; } .bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; } .bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss index 14adbe94d..0f1018b06 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss @@ -2,12 +2,16 @@ // Docs examples // -.bd-example-snippet { +.bd-code-snippet { + margin: 0 ($bd-gutter-x * -.5) 1rem; border: solid var(--bs-border-color); border-width: 1px 0; @include media-breakpoint-up(md) { + margin-right: 0; + margin-left: 0; border-width: 1px; + @include border-radius(var(--bs-border-radius)); } } @@ -16,7 +20,7 @@ position: relative; padding: var(--bd-example-padding); - margin: 0 ($bd-gutter-x * -.5); + margin: 0 ($bd-gutter-x * -.5) 1rem; border: solid var(--bs-border-color); border-width: 1px 0; @include clearfix(); @@ -27,13 +31,7 @@ margin-right: 0; margin-left: 0; border-width: 1px; - @include border-top-radius(var(--bs-border-radius)); - } - - + .bd-code-snippet { - @include border-top-radius(0); - border: solid var(--bs-border-color); - border-width: 0 1px 1px; + @include border-radius(var(--bs-border-radius)); } + p { @@ -350,18 +348,22 @@ .highlight { position: relative; padding: .75rem ($bd-gutter-x * .5); - margin-bottom: 1rem; background-color: var(--bd-pre-bg); @include media-breakpoint-up(md) { padding: .75rem 1.25rem; - @include border-radius(var(--bs-border-radius)); + @include border-radius(calc(var(--bs-border-radius) - 1px)); + } + + @include media-breakpoint-up(lg) { + pre { + margin-right: 1.875rem; + } } pre { padding: .25rem 0 .875rem; margin-top: .8125rem; - margin-right: 1.875rem; margin-bottom: 0; overflow: overlay; white-space: pre; @@ -376,32 +378,22 @@ } } -.bd-code-snippet { - margin: 0 ($bd-gutter-x * -.5) $spacer; +.highlight-toolbar { + background-color: var(--bd-pre-bg); - .highlight { - margin-bottom: 0; + + .highlight { @include border-top-radius(0); } - - .bd-example { - margin: 0; - border: 0; - } - - @include media-breakpoint-up(md) { - margin-right: 0; - margin-left: 0; - @include border-radius($border-radius); - } } -.highlight-toolbar { - background-color: var(--bd-pre-bg); -} - -.bd-scss-docs { +.bd-file-ref { .highlight-toolbar { - @include border-top-radius(calc(var(--bs-border-radius) + 1px)); + @include media-breakpoint-up(md) { + @include border-top-radius(calc(var(--bs-border-radius) - 1px)); + } } } + +.bd-content .bd-code-snippet { + margin-bottom: 1rem; +} diff --git a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss index 33015d681..d74d1ec24 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss @@ -22,6 +22,8 @@ .bd-code-snippet { margin: 0; + border-color: var(--bs-border-color-translucent); + border-width: 1px; @include border-radius(.5rem); } @@ -32,7 +34,7 @@ text-overflow: ellipsis; white-space: nowrap; background-color: rgba(var(--bs-body-color-rgb), .075); - @include border-radius(.5rem); + @include border-radius(calc(.5rem - 1px)); @include media-breakpoint-up(lg) { padding-right: 4rem; @@ -40,9 +42,7 @@ pre { padding: 0; - margin-top: .625rem; - margin-right: 1.875rem; - margin-bottom: .625rem; + margin: .625rem 0; overflow: hidden; } } @@ -75,10 +75,6 @@ @include font-size(1rem); } - .highlight { - @include border-radius(.5rem); - } - @include media-breakpoint-up(md) { .lead { @include font-size(1.25rem); diff --git a/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss b/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss index 0cc26d76b..38ac11fb8 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_syntax.scss @@ -35,6 +35,13 @@ --base0D: #{$blue-300}; // #61afef --base0E: #{$indigo-200}; // #c678dd --base0F: #{$red-300}; // #be5046 + + .language-diff .gd { + color: $red-400; + } + .language-diff .gi { + color: $green-400; + } } .hl { background-color: var(--base02); } @@ -53,7 +60,7 @@ .ge { font-style: italic; } .gh { font-weight: 600; - color: #fff; + color: var(--base0A); } .gi { color: var(--bs-success); } .gp { 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 b6e78ea42..d634ce2d1 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 @@ -11,7 +11,7 @@ toc: true Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). {{< callout info >}} -**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop). +**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops). {{< /callout >}} {{< example >}} @@ -158,7 +158,7 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS {{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} -### Sass mixin +### Sass mixins {{< deprecated-in "5.3.0" >}} @@ -166,7 +166,7 @@ Used in combination with `$theme-colors` to create contextual modifier classes f {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} -### Sass loop +### Sass loops Loop that generates the modifier classes with the `alert-variant()` mixin. 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 2a0d22f86..6c22809f9 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 @@ -157,7 +157,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti ## Variants {{< callout info >}} -**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop). +**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [a Sass loop](#sass-loops). {{< /callout >}} Use contextual classes to style list items with a stateful background and color. @@ -325,7 +325,7 @@ Used in combination with `$theme-colors` to generate the [contextual variant cla {{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}} -### Sass loop +### Sass loops Loop that generates the modifier classes with an overriding of CSS variables. 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 55272b33f..ba2a51a6e 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 @@ -202,7 +202,7 @@ When modals become too long for the user's viewport or device, they scroll indep <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="min-height: 1500px"> - <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p> + <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> @@ -769,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" >}} -### Sass loop +### Sass loops [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 a150f8653..9b9f86a4d 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,10 +328,10 @@ 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 `data-bs-theme="dark"` to the `.navbar` parent 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-*` and additional utilities. <div class="bd-example"> - <nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark"> + <nav class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" data-bs-theme="dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> @@ -420,7 +420,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and </div> ```html -<nav class="navbar bg-dark" data-bs-theme="dark"> +<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark"> <!-- Navbar content --> </nav> @@ -655,9 +655,9 @@ With a toggler on the left and brand name on the right: Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-bs-target` matching, that's easily done! {{< example >}} -<div class="collapse" id="navbarToggleExternalContent"> +<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark"> <div class="bg-dark p-4"> - <h5 class="text-white h4">Collapsed content</h5> + <h5 class="text-body-emphasis h4">Collapsed content</h5> <span class="text-body-secondary">Toggleable via the navbar brand.</span> </div> </div> @@ -810,7 +810,7 @@ Variables for the [dark navbar](#color-schemes): {{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}} -### Sass loop +### Sass loops [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. 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 3e393fda1..b75b233e1 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 @@ -227,8 +227,8 @@ Highlight a table row or cell by adding a `.table-active` class. For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows), and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. -- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. -- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. +- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow. +- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg-type` or `--bs-table-bg-state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`. - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-primary` is darker while `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default. @@ -427,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab </div> ```html -<table class="table table-striped"> +<table class="table table-striped table-bordered"> <thead> ... </thead> @@ -829,7 +829,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< scss-docs name="table-variables" file="scss/_variables.scss" >}} -### Sass loop +### Sass loops {{< scss-docs name="table-loop" file="scss/_variables.scss" >}} 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 c6f9bef20..945d5ec33 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 @@ -7,6 +7,10 @@ toc: true added: "5.3" --- +{{< callout >}} +**Try it yourself!** Download the source code and working demo for using Bootstrap with Stylelint, and the color modes from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/color-modes). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/color-modes?file=index.html). +{{< /callout >}} + ## Dark mode **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. @@ -177,7 +181,7 @@ For example, you can create a "blue theme" with the selector `data-bs-theme="blu To allow visitors or users to toggle color modes, you'll need to create a toggle element to control the `data-bs-theme` attribute on the root element, `<html>`. We've built a toggler in our documentation that initially defers to a user's current system color mode, but provides an option to override that and pick a specific color mode. -Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control. +Here's a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it's implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control. {{< example lang="js" show_preview="false" >}} {{< js.inline >}} @@ -185,6 +189,54 @@ Here's a look at the JavaScript that powers it. Feel free to inspect our own doc {{< /js.inline >}} {{< /example >}} +## Adding theme colors + +Adding a new color in `$theme-colors` is not enough for some of our components like [alerts]({{< docsref "/components/alerts" >}}) and [list groups]({{< docsref "/components/list-group" >}}). New colors must also be defined in `$theme-colors-text`, `$theme-colors-bg-subtle`, and `$theme-colors-border-subtle` for light theme; but also in `$theme-colors-text-dark`, `$theme-colors-bg-subtle-dark`, and `$theme-colors-border-subtle-dark` for dark theme. + +This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we'll revisit this setup to reduce the duplication. + +```scss +// Required +@import "functions"; +@import "variables"; +@import "variables-dark"; + +// Add a custom color to $theme-colors +$custom-colors: ( + "custom-color": #712cf9 +); +$theme-colors: map-merge($theme-colors, $custom-colors); + +@import "maps"; +@import "mixins"; +@import "utilities"; + +// Add a custom color to new theme maps + +// Light mode +$custom-colors-text: ("custom-color": #712cf9); +$custom-colors-bg-subtle: ("custom-color": #e1d2fe); +$custom-colors-border-subtle: ("custom-color": #bfa1fc); + +$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text); +$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle); +$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle); + +// Dark mode +$custom-colors-text-dark: ("custom-color": #e1d2f2); +$custom-colors-bg-subtle-dark: ("custom-color": #8951fa); +$custom-colors-border-subtle-dark: ("custom-color": #e1d2f2); + +$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark); +$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark); +$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark); + +// Remainder of Bootstrap imports +@import "root"; +@import "reboot"; +// etc +``` + ## CSS ### Variables @@ -199,7 +251,7 @@ CSS variables for our dark color mode are partially generated from dark mode spe {{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}} -### Sass mixin +### Sass mixins 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. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/components.md b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/components.md index b512a9036..262c8d8c6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/customize/components.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/customize/components.md @@ -34,7 +34,7 @@ Should you modify your `$grid-breakpoints`, your changes will apply to all the l {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} -For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}). +For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). ## Creating your own diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/docsref.md b/vendor/twbs/bootstrap/site/content/docs/5.3/docsref.md new file mode 100644 index 000000000..d0fc42f3d --- /dev/null +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/docsref.md @@ -0,0 +1,49 @@ +--- +layout: docs +title: Docs reference +description: Examples of Bootstrap's documentation-specific components and styles. +aliases: "/docsref/" +toc: true +robots: noindex,follow +sitemap_exclude: true +--- + +## Buttons + +<button class="btn btn-bd-primary">Primary button</button> +<button class="btn btn-bd-accent">Accent button</button> +<button class="btn btn-bd-light">Light button</button> + +## Callouts + +{{< callout >}} + Default callout +{{< /callout >}} + +{{< callout warning >}} + Warning callout +{{< /callout >}} + +{{< callout danger >}} + Danger callout +{{< /callout >}} + +## Code example + +```scss +.test { + --color: blue; +} +``` + +<div class="bd-example"> + The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element. +</div> + +{{< example >}} +<div class="test">This is a test.</div> +{{< /example >}} + +{{< scss-docs name="variable-gradient" file="scss/_variables.scss" >}} + +{{< js-docs name="live-toast" file="site/assets/js/snippets.js" >}} 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 2fa9a4528..c3c242312 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 @@ -32,11 +32,11 @@ aliases: "/examples/" </h3> <p class="text-body-secondary">{{ $example.description }}</p> <p> - {{- $htmlIndexLocation := "index.html" -}} - {{- if $example.htmlIndexLocation -}} - {{- $htmlIndexLocation = printf "%s/index.html" $example.htmlIndexLocation -}} + {{- $indexPath := "index.html" -}} + {{- if $example.indexPath -}} + {{- $indexPath = $example.indexPath -}} {{- 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"> + <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file={{ $indexPath | urlquery }}" target="_blank" rel="noopener"> <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg> Edit in StackBlitz </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 c3c6c6293..274ea0eb8 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 @@ -5,17 +5,29 @@ direction: rtl extra_css: - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap" - "../blog/blog.rtl.css" -include_js: false --- +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"> + <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"/> + </symbol> + <symbol id="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </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> +</svg> + <div class="container"> - <header class="blog-header lh-1 py-3"> + <header class="border-bottom lh-1 py-3"> <div class="row flex-nowrap justify-content-between align-items-center"> <div class="col-4 pt-1"> <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a> </div> <div class="col-4 text-center"> - <a class="blog-header-logo text-dark" href="#">كبير</a> + <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">كبير</a> </div> <div class="col-4 d-flex justify-content-end align-items-center"> <a class="link-secondary" href="#" aria-label="بحث"> @@ -26,30 +38,30 @@ include_js: false </div> </header> - <div class="nav-scroller py-1 mb-2"> - <nav class="nav d-flex justify-content-between"> - <a class="p-2 link-secondary" href="#">العالم</a> - <a class="p-2 link-secondary" href="#">الولايات المتحدة</a> - <a class="p-2 link-secondary" href="#">التقنية</a> - <a class="p-2 link-secondary" href="#">التصميم</a> - <a class="p-2 link-secondary" href="#">الحضارة</a> - <a class="p-2 link-secondary" href="#">المال والأعمال</a> - <a class="p-2 link-secondary" href="#">السياسة</a> - <a class="p-2 link-secondary" href="#">الرأي العام</a> - <a class="p-2 link-secondary" href="#">العلوم</a> - <a class="p-2 link-secondary" href="#">الصحة</a> - <a class="p-2 link-secondary" href="#">الموضة</a> - <a class="p-2 link-secondary" href="#">السفر</a> + <div class="nav-scroller py-1 mb-3 border-bottom"> + <nav class="nav nav-underline justify-content-between"> + <a class="nav-item nav-link link-body-emphasis active" href="#">العالم</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الولايات المتحدة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">التقنية</a> + <a class="nav-item nav-link link-body-emphasis" href="#">التصميم</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الحضارة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">المال والأعمال</a> + <a class="nav-item nav-link link-body-emphasis" href="#">السياسة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الرأي العام</a> + <a class="nav-item nav-link link-body-emphasis" href="#">العلوم</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الصحة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">الموضة</a> + <a class="nav-item nav-link link-body-emphasis" href="#">السفر</a> </nav> </div> </div> <main class="container"> - <div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> - <div class="col-md-6 px-0"> + <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary"> + <div class="col-lg-6 px-0"> <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1> <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p> - <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p> + <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">أكمل القراءة...</a></p> </div> </div> @@ -57,11 +69,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-primary">العالم</strong> + <strong class="d-inline-block mb-2 text-primary-emphasis">العالم</strong> <h3 class="mb-0">مشاركة مميزة</h3> <div class="mb-1 text-body-secondary">نوفمبر 12</div> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> - <a href="#" class="stretched-link">أكمل القراءة</a> + <a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> + أكمل القراءة + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> </div> <div class="col-auto d-none d-lg-block"> {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} @@ -71,11 +86,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-success">التصميم</strong> + <strong class="d-inline-block mb-2 text-success-emphasis">التصميم</strong> <h3 class="mb-0">عنوان الوظيفة</h3> <div class="mb-1 text-body-secondary">نوفمبر 11</div> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> - <a href="#" class="stretched-link">أكمل القراءة</a> + <a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> + أكمل القراءة + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> </div> <div class="col-auto d-none d-lg-block"> {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}} @@ -84,20 +102,20 @@ include_js: false </div> </div> - <div class="row"> + <div class="row g-5"> <div class="col-md-8"> <h3 class="pb-4 mb-4 fst-italic border-bottom"> من Firehose </h3> <article class="blog-post"> - <h2 class="blog-post-title mb-1">مثال على تدوينة</h2> + <h2 class="display-5 link-body-emphasis mb-1">مثال على تدوينة</h2> <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p> <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p> <hr> <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p> - <blockquote> + <blockquote class="blockquote"> <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p> </blockquote> <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p> @@ -126,7 +144,7 @@ include_js: false </article> <article class="blog-post"> - <h2 class="blog-post-title mb-1">تدوينة أخرى</h2> + <h2 class="display-5 link-body-emphasis mb-1">تدوينة أخرى</h2> <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p> <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p> @@ -138,7 +156,7 @@ include_js: false </article> <article class="blog-post"> - <h2 class="blog-post-title mb-1">ميزة جديدة</h2> + <h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2> <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p> <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p> @@ -166,6 +184,39 @@ include_js: false <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p> </div> + <div> + <h4 class="fst-italic">المشاركات الاخيرة</h4> + <ul class="list-unstyled"> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">مثال على عنوان منشور المدونة</h6> + <small class="text-body-secondary">15 يناير 2023</small> + </div> + </a> + </li> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">هذا عنوان آخر للمدونة</h6> + <small class="text-body-secondary">14 يناير 2023</small> + </div> + </a> + </li> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">أطول عنوان منشور للمدونة: يحتوي هذا الخط على عدة أسطر!</h6> + <small class="text-body-secondary">13 يناير 2023</small> + </div> + </a> + </li> + </ul> + </div> + <div class="p-4"> <h4 class="fst-italic">الأرشيف</h4> <ol class="list-unstyled mb-0"> @@ -198,9 +249,9 @@ include_js: false </main> -<footer class="blog-footer"> +<footer class="py-5 text-center text-body-secondary bg-body-tertiary"> <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p> - <p> + <p class="mb-0"> <a href="#">عد إلى الأعلى</a> </p> </footer> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css index cc5fc7473..ddbca5a8f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.css @@ -1,8 +1,4 @@ -/* stylelint-disable selector-list-comma-newline-after */ - -.blog-header { - border-bottom: 1px solid #e5e5e5; -} +/* stylelint-disable stylistic/selector-list-comma-newline-after */ .blog-header-logo { font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; @@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/; } -.display-4 { - font-size: 2.5rem; -} -@media (min-width: 768px) { - .display-4 { - font-size: 3rem; - } -} - .flex-auto { flex: 0 0 auto; } @@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 { .blog-post { margin-bottom: 4rem; } -.blog-post-title { - font-size: 2.5rem; -} .blog-post-meta { margin-bottom: 1.25rem; color: #727272; } - -/* - * Footer - */ -.blog-footer { - padding: 2.5rem 0; - color: #727272; - text-align: center; - background-color: #f9f9f9; - border-top: .05rem solid #e5e5e5; -} -.blog-footer p:last-child { - margin-bottom: 0; -} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css index fc03c35a3..043d4e617 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/blog/blog.rtl.css @@ -1,8 +1,4 @@ -/* stylelint-disable selector-list-comma-newline-after */ - -.blog-header { - border-bottom: 1px solid #e5e5e5; -} +/* stylelint-disable stylistic/selector-list-comma-newline-after */ .blog-header-logo { font-family: Amiri, Georgia, "Times New Roman", serif; @@ -17,15 +13,6 @@ h1, h2, h3, h4, h5, h6 { font-family: Amiri, Georgia, "Times New Roman", serif; } -.display-4 { - font-size: 2.5rem; -} -@media (min-width: 768px) { - .display-4 { - font-size: 3rem; - } -} - .flex-auto { flex: 0 0 auto; } @@ -46,24 +33,7 @@ h1, h2, h3, h4, h5, h6 { .blog-post { margin-bottom: 4rem; } -.blog-post-title { - font-size: 2.5rem; -} .blog-post-meta { margin-bottom: 1.25rem; color: #727272; } - -/* - * Footer - */ -.blog-footer { - padding: 2.5rem 0; - color: #727272; - text-align: center; - background-color: #f9f9f9; - border-top: .05rem solid #e5e5e5; -} -.blog-footer p:last-child { - margin-bottom: 0; -} 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 9f11a21f9..d0d6f086a 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 @@ -4,17 +4,29 @@ title: Blog Template extra_css: - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap" - "blog.css" -include_js: false --- +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"> + <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"/> + </symbol> + <symbol id="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </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> +</svg> + <div class="container"> - <header class="blog-header lh-1 py-3"> + <header class="border-bottom lh-1 py-3"> <div class="row flex-nowrap justify-content-between align-items-center"> <div class="col-4 pt-1"> <a class="link-secondary" href="#">Subscribe</a> </div> <div class="col-4 text-center"> - <a class="blog-header-logo text-body-emphasis" href="#">Large</a> + <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">Large</a> </div> <div class="col-4 d-flex justify-content-end align-items-center"> <a class="link-secondary" href="#" aria-label="Search"> @@ -25,30 +37,30 @@ include_js: false </div> </header> - <div class="nav-scroller py-1 mb-2"> - <nav class="nav d-flex justify-content-between"> - <a class="p-2 link-secondary" href="#">World</a> - <a class="p-2 link-secondary" href="#">U.S.</a> - <a class="p-2 link-secondary" href="#">Technology</a> - <a class="p-2 link-secondary" href="#">Design</a> - <a class="p-2 link-secondary" href="#">Culture</a> - <a class="p-2 link-secondary" href="#">Business</a> - <a class="p-2 link-secondary" href="#">Politics</a> - <a class="p-2 link-secondary" href="#">Opinion</a> - <a class="p-2 link-secondary" href="#">Science</a> - <a class="p-2 link-secondary" href="#">Health</a> - <a class="p-2 link-secondary" href="#">Style</a> - <a class="p-2 link-secondary" href="#">Travel</a> + <div class="nav-scroller py-1 mb-3 border-bottom"> + <nav class="nav nav-underline justify-content-between"> + <a class="nav-item nav-link link-body-emphasis active" href="#">World</a> + <a class="nav-item nav-link link-body-emphasis" href="#">U.S.</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Technology</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Design</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Culture</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Business</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Politics</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Opinion</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Science</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Health</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Style</a> + <a class="nav-item nav-link link-body-emphasis" href="#">Travel</a> </nav> </div> </div> <main class="container"> - <div class="p-4 p-md-5 mb-4 rounded text-bg-dark"> - <div class="col-md-6 px-0"> + <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary"> + <div class="col-lg-6 px-0"> <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1> <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p> - <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p> + <p class="lead mb-0"><a href="#" class="text-body-emphasis fw-bold">Continue reading...</a></p> </div> </div> @@ -56,11 +68,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-primary">World</strong> + <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong> <h3 class="mb-0">Featured post</h3> <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> + <a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> + Continue reading + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> </div> <div class="col-auto d-none d-lg-block"> {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} @@ -70,11 +85,14 @@ include_js: false <div class="col-md-6"> <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"> <div class="col p-4 d-flex flex-column position-static"> - <strong class="d-inline-block mb-2 text-success">Design</strong> + <strong class="d-inline-block mb-2 text-success-emphasis">Design</strong> <h3 class="mb-0">Post title</h3> <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> + <a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> + Continue reading + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> </div> <div class="col-auto d-none d-lg-block"> {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}} @@ -90,7 +108,7 @@ include_js: false </h3> <article class="blog-post"> - <h2 class="blog-post-title mb-1">Sample blog post</h2> + <h2 class="display-5 link-body-emphasis mb-1">Sample blog post</h2> <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p> <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p> @@ -144,7 +162,7 @@ include_js: false </article> <article class="blog-post"> - <h2 class="blog-post-title mb-1">Another blog post</h2> + <h2 class="display-5 link-body-emphasis mb-1">Another blog post</h2> <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p> <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p> @@ -192,7 +210,7 @@ include_js: false </article> <article class="blog-post"> - <h2 class="blog-post-title mb-1">New feature</h2> + <h2 class="display-5 link-body-emphasis mb-1">New feature</h2> <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p> <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p> @@ -218,6 +236,39 @@ include_js: false <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> + <div> + <h4 class="fst-italic">Recent posts</h4> + <ul class="list-unstyled"> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">Example blog post title</h6> + <small class="text-body-secondary">January 15, 2023</small> + </div> + </a> + </li> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">This is another blog post title</h6> + <small class="text-body-secondary">January 14, 2023</small> + </div> + </a> + </li> + <li> + <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" href="#"> + {{< placeholder width="100%" height="96" background="#777" color="#777" text="false" title="false" >}} + <div class="col-lg-8"> + <h6 class="mb-0">Longer blog post title: This one has multiple lines!</h6> + <small class="text-body-secondary">January 13, 2023</small> + </div> + </a> + </li> + </ul> + </div> + <div class="p-4"> <h4 class="fst-italic">Archives</h4> <ol class="list-unstyled mb-0"> @@ -250,9 +301,9 @@ include_js: false </main> -<footer class="blog-footer"> +<footer class="py-5 text-center text-body-secondary bg-body-tertiary"> <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> - <p> + <p class="mb-0"> <a href="#">Back to top</a> </p> </footer> 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 aa42eb50d..db184d71b 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 @@ -36,7 +36,7 @@ extra_css: <main> - <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> + <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light"> <div class="carousel-indicators"> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> @@ -48,7 +48,7 @@ extra_css: <div class="container"> <div class="carousel-caption text-start"> <h1>عنوان المثال.</h1> - <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p> + <p class="opacity-75">تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p> <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p> </div> </div> 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 fec439b4e..e03f4d764 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 @@ -35,7 +35,7 @@ extra_css: <main> - <div id="myCarousel" class="carousel slide" data-bs-ride="carousel"> + <div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light"> <div class="carousel-indicators"> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button> @@ -47,7 +47,7 @@ extra_css: <div class="container"> <div class="carousel-caption text-start"> <h1>Example headline.</h1> - <p>Some representative placeholder content for the first slide of the carousel.</p> + <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p> <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cover/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cover/index.html index 80a73300d..002a5c310 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cover/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/cover/index.html @@ -5,7 +5,6 @@ extra_css: - "cover.css" html_class: "h-100" body_class: "d-flex h-100 text-center text-bg-dark" -include_js: false --- <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column"> 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 d278c628b..bdb3029d3 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 @@ -1,10 +1,8 @@ -/* globals Chart:false, feather:false */ +/* globals Chart:false */ (() => { 'use strict' - feather.replace({ 'aria-hidden': 'true' }) - // Graphs const ctx = document.getElementById('myChart') // eslint-disable-next-line no-unused-vars 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 9b2eb8caf..252b7755e 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 @@ -3,105 +3,185 @@ layout: examples title: قالب لوحة القيادة direction: rtl extra_css: + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" - "../dashboard/dashboard.rtl.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@4.2.1/dist/chart.umd.min.js" integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" - src: "dashboard.js" --- -<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> - <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">اسم الشركة</a> - <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل"> - <span class="navbar-toggler-icon"></span> - </button> - <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث"> - <div class="navbar-nav"> - <div class="nav-item text-nowrap"> - <a class="nav-link px-3" href="#">تسجيل الخروج</a> - </div> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <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="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </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="door-closed" viewBox="0 0 16 16"> + <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/> + <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/> + </symbol> + <symbol id="file-earmark" viewBox="0 0 16 16"> + <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/> + </symbol> + <symbol id="file-earmark-text" viewBox="0 0 16 16"> + <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/> + <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/> + </symbol> + <symbol id="gear-wide-connected" viewBox="0 0 16 16"> + <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/> + </symbol> + <symbol id="graph-up" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/> + </symbol> + <symbol id="house-fill" viewBox="0 0 16 16"> + <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/> + <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/> + </symbol> + <symbol id="list" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> + </symbol> + <symbol id="people" viewBox="0 0 16 16"> + <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/> + </symbol> + <symbol id="plus-circle" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> + <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> + </symbol> + <symbol id="puzzle" viewBox="0 0 16 16"> + <path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/> + </symbol> + <symbol id="search" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </symbol> +</svg> + +<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark"> + <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">اسم الشركة</a> + + <ul class="navbar-nav flex-row d-md-none"> + <li class="nav-item text-nowrap"> + <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث"> + <svg class="bi"><use xlink:href="#search"/></svg> + </button> + </li> + <li class="nav-item text-nowrap"> + <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> + <svg class="bi"><use xlink:href="#list"/></svg> + </button> + </li> + </ul> + + <div id="navbarSearch" class="navbar-search w-100 collapse"> + <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث"> </div> </header> <div class="container-fluid"> <div class="row"> - <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"> - <a class="nav-link active" aria-current="page" href="#"> - <span data-feather="home" class="align-text-bottom"></span> - لوحة القيادة - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file" class="align-text-bottom"></span> - الطلبات - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="shopping-cart" class="align-text-bottom"></span> - المنتجات - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="users" class="align-text-bottom"></span> - الزبائن - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="bar-chart-2" class="align-text-bottom"></span> - التقارير - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="layers" class="align-text-bottom"></span> - التكاملات - </a> - </li> - </ul> + <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary"> + <div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5> + <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="يغلق"></button> + </div> + <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> + <svg class="bi"><use xlink:href="#house-fill"/></svg> + لوحة القيادة + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark"/></svg> + الطلبات + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#cart"/></svg> + المنتجات + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#people"/></svg> + الزبائن + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#graph-up"/></svg> + التقارير + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#puzzle"/></svg> + التكاملات + </a> + </li> + </ul> - <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> - </a> - </h6> - <ul class="nav flex-column mb-2"> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - الشهر الحالي - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - الربع الأخير - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - التفاعل الإجتماعي - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - مبيعات نهاية العام + <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="إضافة تقرير جديد"> + <svg class="bi"><use xlink:href="#plus-circle"/></svg> </a> - </li> - </ul> + </h6> + <ul class="nav flex-column mb-auto"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + الشهر الحالي + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + الربع الأخير + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + التفاعل الإجتماعي + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + مبيعات نهاية العام + </a> + </li> + </ul> + + <hr class="my-3"> + + <ul class="nav flex-column mb-auto"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> + إعدادات + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#door-closed"/></svg> + خروج + </a> + </li> + </ul> + </div> </div> - </nav> + </div> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> @@ -111,8 +191,8 @@ extra_js: <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button> <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button> </div> - <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> - <span data-feather="calendar" class="align-text-bottom"></span> + <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> + <svg class="bi"><use xlink:href="#calendar3"/></svg> هذا الأسبوع </button> </div> @@ -121,7 +201,7 @@ extra_js: <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> <h2>عنوان القسم</h2> - <div class="table-responsive"> + <div class="table-responsive small"> <table class="table table-striped table-sm"> <thead> <tr> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css index ad12048e7..154940c90 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.css @@ -1,61 +1,33 @@ -body { - font-size: .875rem; -} - -.feather { - width: 16px; - height: 16px; +.bi { + display: inline-block; + width: 1rem; + height: 1rem; } /* * Sidebar */ -.sidebar { - position: fixed; - top: 0; - /* rtl:raw: - right: 0; - */ - bottom: 0; - /* rtl:remove */ - left: 0; - z-index: 100; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ - box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); -} - -@media (max-width: 767.98px) { - .sidebar { - top: 5rem; +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; } -} - -.sidebar-sticky { - height: calc(100vh - 48px); - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } .sidebar .nav-link { + font-size: .875rem; font-weight: 500; - color: #333; -} - -.sidebar .nav-link .feather { - margin-right: 4px; - color: #727272; } .sidebar .nav-link.active { color: #2470dc; } -.sidebar .nav-link:hover .feather, -.sidebar .nav-link.active .feather { - color: inherit; -} - .sidebar-heading { font-size: .75rem; } @@ -71,22 +43,6 @@ body { box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); } -.navbar .navbar-toggler { - top: .25rem; - right: 1rem; -} - .navbar .form-control { padding: .75rem 1rem; } - -.form-control-dark { - color: #fff; - background-color: rgba(255, 255, 255, .1); - border-color: rgba(255, 255, 255, .1); -} - -.form-control-dark:focus { - border-color: transparent; - box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); -} 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 d190d7961..a60b39356 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 @@ -1,10 +1,8 @@ -/* globals Chart:false, feather:false */ +/* globals Chart:false */ (() => { 'use strict' - feather.replace({ 'aria-hidden': 'true' }) - // Graphs const ctx = document.getElementById('myChart') // eslint-disable-next-line no-unused-vars diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css index 31ea3cc64..5c8a7e257 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/dashboard/dashboard.rtl.css @@ -1,57 +1,33 @@ -body { - font-size: .875rem; -} - -.feather { - width: 16px; - height: 16px; +.bi { + display: inline-block; + width: 1rem; + height: 1rem; } /* * Sidebar */ -.sidebar { - position: fixed; - top: 0; - right: 0; - bottom: 0; - z-index: 100; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ - box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); -} - -@media (max-width: 767.98px) { - .sidebar { - top: 5rem; +@media (min-width: 768px) { + .sidebar .offcanvas-lg { + position: -webkit-sticky; + position: sticky; + top: 48px; + } + .navbar-search { + display: block; } -} - -.sidebar-sticky { - height: calc(100vh - 48px); - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } .sidebar .nav-link { + font-size: .875rem; font-weight: 500; - color: #333; -} - -.sidebar .nav-link .feather { - margin-left: 4px; - color: #727272; } .sidebar .nav-link.active { color: #2470dc; } -.sidebar .nav-link:hover .feather, -.sidebar .nav-link.active .feather { - color: inherit; -} - .sidebar-heading { font-size: .75rem; } @@ -67,22 +43,6 @@ body { box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25); } -.navbar .navbar-toggler { - top: .25rem; - left: 1rem; -} - .navbar .form-control { padding: .75rem 1rem; } - -.form-control-dark { - color: #fff; - background-color: rgba(255, 255, 255, .1); - border-color: rgba(255, 255, 255, .1); -} - -.form-control-dark:focus { - border-color: transparent; - box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); -} 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 88ac303ab..4ae3f6f2f 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 @@ -2,105 +2,185 @@ layout: examples title: Dashboard Template extra_css: + - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" - "dashboard.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@4.2.1/dist/chart.umd.min.js" integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG" - src: "dashboard.js" --- -<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"> - <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a> - <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search"> - <div class="navbar-nav"> - <div class="nav-item text-nowrap"> - <a class="nav-link px-3" href="#">Sign out</a> - </div> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <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="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </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="door-closed" viewBox="0 0 16 16"> + <path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/> + <path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/> + </symbol> + <symbol id="file-earmark" viewBox="0 0 16 16"> + <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/> + </symbol> + <symbol id="file-earmark-text" viewBox="0 0 16 16"> + <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/> + <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5L9.5 0zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/> + </symbol> + <symbol id="gear-wide-connected" viewBox="0 0 16 16"> + <path d="M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 12.973 8.5zm0-1a4.998 4.998 0 0 0-7.557-3.779l2.834 3.78h4.723zM5.048 3.967c-.03.021-.058.043-.087.065l.087-.065zm-.431.355A4.984 4.984 0 0 0 3.002 8c0 1.455.622 2.765 1.615 3.678L7.375 8 4.617 4.322zm.344 7.646.087.065-.087-.065z"/> + </symbol> + <symbol id="graph-up" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/> + </symbol> + <symbol id="house-fill" viewBox="0 0 16 16"> + <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/> + <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/> + </symbol> + <symbol id="list" viewBox="0 0 16 16"> + <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> + </symbol> + <symbol id="people" viewBox="0 0 16 16"> + <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/> + </symbol> + <symbol id="plus-circle" viewBox="0 0 16 16"> + <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> + <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/> + </symbol> + <symbol id="puzzle" viewBox="0 0 16 16"> + <path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.459.459 0 0 0-.115.118.113.113 0 0 0-.012.025L6.5 4.5v.003l.003.01c.004.01.014.028.036.053a.86.86 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 .912-.1 1.19-.24a.86.86 0 0 0 .271-.194.213.213 0 0 0 .039-.063v-.009a.112.112 0 0 0-.012-.025.459.459 0 0 0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 .947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.459.459 0 0 0 .115-.118.113.113 0 0 0 .012-.025L9.5 11.5v-.003a.214.214 0 0 0-.039-.064.859.859 0 0 0-.27-.193C8.91 11.1 8.49 11 8 11c-.491 0-.912.1-1.19.24a.859.859 0 0 0-.271.194.214.214 0 0 0-.039.063v.003l.001.006a.113.113 0 0 0 .012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238l-.244-2.855zM4.605 3a.5.5 0 0 0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.459.459 0 0 0-.118-.115.112.112 0 0 0-.025-.012L1.5 6.5h-.003a.213.213 0 0 0-.064.039.86.86 0 0 0-.193.27C1.1 7.09 1 7.51 1 8c0 .491.1.912.24 1.19.07.14.14.225.194.271a.213.213 0 0 0 .063.039H1.5l.006-.001a.112.112 0 0 0 .025-.012.459.459 0 0 0 .118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 .497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 .498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 1.469.872.05.065.091.099.118.115.013.008.021.01.025.012a.02.02 0 0 0 .006.001h.003a.214.214 0 0 0 .064-.039.86.86 0 0 0 .193-.27c.14-.28.24-.7.24-1.191 0-.492-.1-.912-.24-1.19a.86.86 0 0 0-.194-.271.215.215 0 0 0-.063-.039H14.5l-.006.001a.113.113 0 0 0-.025.012.459.459 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 .568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557H4.605z"/> + </symbol> + <symbol id="search" viewBox="0 0 16 16"> + <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> + </symbol> +</svg> + +<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark"> + <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">Company name</a> + + <ul class="navbar-nav flex-row d-md-none"> + <li class="nav-item text-nowrap"> + <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search"> + <svg class="bi"><use xlink:href="#search"/></svg> + </button> + </li> + <li class="nav-item text-nowrap"> + <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> + <svg class="bi"><use xlink:href="#list"/></svg> + </button> + </li> + </ul> + + <div id="navbarSearch" class="navbar-search w-100 collapse"> + <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search"> </div> </header> <div class="container-fluid"> <div class="row"> - <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"> - <a class="nav-link active" aria-current="page" href="#"> - <span data-feather="home" class="align-text-bottom"></span> - Dashboard - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file" class="align-text-bottom"></span> - Orders - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="shopping-cart" class="align-text-bottom"></span> - Products - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="users" class="align-text-bottom"></span> - Customers - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="bar-chart-2" class="align-text-bottom"></span> - Reports - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="layers" class="align-text-bottom"></span> - Integrations - </a> - </li> - </ul> + <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary"> + <div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5> + <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button> + </div> + <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto"> + <ul class="nav flex-column"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> + <svg class="bi"><use xlink:href="#house-fill"/></svg> + Dashboard + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark"/></svg> + Orders + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#cart"/></svg> + Products + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#people"/></svg> + Customers + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#graph-up"/></svg> + Reports + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#puzzle"/></svg> + Integrations + </a> + </li> + </ul> - <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> - </a> - </h6> - <ul class="nav flex-column mb-2"> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Current month - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Last quarter - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Social engagement - </a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#"> - <span data-feather="file-text" class="align-text-bottom"></span> - Year-end sale + <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"> + <svg class="bi"><use xlink:href="#plus-circle"/></svg> </a> - </li> - </ul> + </h6> + <ul class="nav flex-column mb-auto"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Current month + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Last quarter + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Social engagement + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#file-earmark-text"/></svg> + Year-end sale + </a> + </li> + </ul> + + <hr class="my-3"> + + <ul class="nav flex-column mb-auto"> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> + Settings + </a> + </li> + <li class="nav-item"> + <a class="nav-link d-flex align-items-center gap-2" href="#"> + <svg class="bi"><use xlink:href="#door-closed"/></svg> + Sign out + </a> + </li> + </ul> + </div> </div> - </nav> + </div> <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> @@ -110,8 +190,8 @@ extra_js: <button type="button" class="btn btn-sm btn-outline-secondary">Share</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button> </div> - <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle"> - <span data-feather="calendar" class="align-text-bottom"></span> + <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> + <svg class="bi"><use xlink:href="#calendar3"/></svg> This week </button> </div> @@ -120,7 +200,7 @@ extra_js: <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> <h2>Section title</h2> - <div class="table-responsive"> + <div class="table-responsive small"> <table class="table table-striped table-sm"> <thead> <tr> 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 8754ceced..02fad75fc 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 @@ -68,7 +68,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> </div> - <h3 class="fs-2">Featured title</h3> + <h3 class="fs-2 text-body-emphasis">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"> Call to action @@ -79,7 +79,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> </div> - <h3 class="fs-2">Featured title</h3> + <h3 class="fs-2 text-body-emphasis">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"> Call to action @@ -90,7 +90,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> - <h3 class="fs-2">Featured title</h3> + <h3 class="fs-2 text-body-emphasis">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"> Call to action @@ -110,7 +110,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> <div> - <h3 class="fs-2">Featured title</h3> + <h3 class="fs-2 text-body-emphasis">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="btn btn-primary"> Primary button @@ -122,7 +122,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> </div> <div> - <h3 class="fs-2">Featured title</h3> + <h3 class="fs-2 text-body-emphasis">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="btn btn-primary"> Primary button @@ -134,7 +134,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> </div> <div> - <h3 class="fs-2">Featured title</h3> + <h3 class="fs-2 text-body-emphasis">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="btn btn-primary"> Primary button @@ -224,56 +224,56 @@ body_class: "" <div class="col d-flex align-items-start"> <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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">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-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> + <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> @@ -287,7 +287,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> + <h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2> <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> @@ -300,7 +300,7 @@ body_class: "" <use xlink:href="#collection" /> </svg> </div> - <h4 class="fw-semibold mb-0">Featured title</h4> + <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> @@ -310,7 +310,7 @@ body_class: "" <use xlink:href="#gear-fill" /> </svg> </div> - <h4 class="fw-semibold mb-0">Featured title</h4> + <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> @@ -320,7 +320,7 @@ body_class: "" <use xlink:href="#speedometer" /> </svg> </div> - <h4 class="fw-semibold mb-0">Featured title</h4> + <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> @@ -330,7 +330,7 @@ body_class: "" <use xlink:href="#table" /> </svg> </div> - <h4 class="fw-semibold mb-0">Featured title</h4> + <h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/index.html b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/index.html index 7c4f1d322..8a6158202 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/grid/index.html @@ -4,7 +4,6 @@ title: Grid Template extra_css: - "grid.css" body_class: "py-4" -include_js: false --- <main> 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 a0c87f67e..d47597f16 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 @@ -139,7 +139,7 @@ body_class: "" </form> <div class="dropdown text-end"> - <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <a href="#" class="d-block 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="32" height="32" class="rounded-circle"> </a> <ul class="dropdown-menu text-small"> @@ -179,7 +179,7 @@ body_class: "" </form> <div class="flex-shrink-0 dropdown"> - <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> + <a href="#" class="d-block 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="32" height="32" class="rounded-circle"> </a> <ul class="dropdown-menu text-small shadow"> @@ -210,15 +210,15 @@ body_class: "" <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> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2 active" aria-current="page">Home</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Features</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Pricing</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">FAQs</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">About</a></li> </ul> <ul class="nav"> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li> - <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Login</a></li> + <li class="nav-item"><a href="#" class="nav-link link-body-emphasis px-2">Sign up</a></li> </ul> </div> </nav> @@ -237,7 +237,7 @@ body_class: "" <div class="b-example-divider"></div> <header> - <div class="px-3 py-2 text-bg-dark"> + <div class="px-3 py-2 text-bg-dark 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 my-2 my-lg-0 me-lg-auto text-white text-decoration-none"> 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 df219512a..049684df6 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 @@ -1,13 +1,12 @@ --- layout: examples title: Jumbotron example -include_js: false --- <main> <div class="container py-4"> <header class="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 text-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">Jumbotron example</span> </a> 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 6c9c82cb4..e4e7b8a9a 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 @@ -3,7 +3,6 @@ layout: examples title: Pricing example extra_css: - "pricing.css" -include_js: false --- <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> @@ -30,7 +29,7 @@ include_js: false </div> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> - <h1 class="display-4 fw-normal">Pricing</h1> + <h1 class="display-4 fw-normal text-body-emphasis">Pricing</h1> <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> 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 eb03cead5..c65d0208f 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, var(--bs-body-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg)); + background-image: linear-gradient(180deg, var(--bs-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 c54084e3d..a0ae98eb8 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 @@ -5,27 +5,68 @@ extra_css: - "product.css" --- -<header class="site-header sticky-top py-1"> - <nav class="container d-flex flex-column flex-md-row justify-content-between"> - <a class="py-2" href="#" aria-label="Product"> - <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 mx-auto" 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> +<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> + <symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"> + <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"/> + </symbol> + <symbol id="cart" viewBox="0 0 16 16"> + <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .49.598l-1 5a.5.5 0 0 1-.465.401l-9.397.472L4.415 11H13a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l.84 4.479 9.144-.459L13.89 4H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> + </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> +</svg> + +<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark"> + <div class="container"> + <a class="navbar-brand d-md-none" href="#"> + <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> + Aperture </a> - <a class="py-2 d-none d-md-inline-block" href="#">Tour</a> - <a class="py-2 d-none d-md-inline-block" href="#">Product</a> - <a class="py-2 d-none d-md-inline-block" href="#">Features</a> - <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a> - <a class="py-2 d-none d-md-inline-block" href="#">Support</a> - <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a> - <a class="py-2 d-none d-md-inline-block" href="#">Cart</a> - </nav> -</header> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5> + <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <ul class="navbar-nav flex-grow-1 justify-content-between"> + <li class="nav-item"><a class="nav-link" href="#"> + <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> + </a></li> + <li class="nav-item"><a class="nav-link" href="#">Tour</a></li> + <li class="nav-item"><a class="nav-link" href="#">Product</a></li> + <li class="nav-item"><a class="nav-link" href="#">Features</a></li> + <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li> + <li class="nav-item"><a class="nav-link" href="#">Support</a></li> + <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li> + <li class="nav-item"><a class="nav-link" href="#"> + <svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg> + </a></li> + </ul> + </div> + </div> + </div> +</nav> <main> <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> - <a class="btn btn-outline-secondary" href="#">Coming soon</a> + <div class="col-md-6 p-lg-5 mx-auto my-5"> + <h1 class="display-3 fw-bold">Designed for engineers</h1> + <h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3> + <div class="d-flex gap-3 justify-content-center lead fw-normal"> + <a class="icon-link" href="#"> + Learn more + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> + <a class="icon-link" href="#"> + Buy + <svg class="bi"><use xlink:href="#chevron-right"/></svg> + </a> + </div> </div> <div class="product-device shadow-sm d-none d-md-block"></div> <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div> @@ -109,39 +150,39 @@ extra_css: <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Cool stuff</a></li> - <li><a class="link-secondary" href="#">Random feature</a></li> - <li><a class="link-secondary" href="#">Team feature</a></li> - <li><a class="link-secondary" href="#">Stuff for developers</a></li> - <li><a class="link-secondary" href="#">Another one</a></li> - <li><a class="link-secondary" href="#">Last time</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Random feature</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Team feature</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Another one</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Last time</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Resource name</a></li> - <li><a class="link-secondary" href="#">Resource</a></li> - <li><a class="link-secondary" href="#">Another resource</a></li> - <li><a class="link-secondary" href="#">Final resource</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Resource name</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Resource</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Another resource</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Final resource</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Resources</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Business</a></li> - <li><a class="link-secondary" href="#">Education</a></li> - <li><a class="link-secondary" href="#">Government</a></li> - <li><a class="link-secondary" href="#">Gaming</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Business</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Education</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Government</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Gaming</a></li> </ul> </div> <div class="col-6 col-md"> <h5>About</h5> <ul class="list-unstyled text-small"> - <li><a class="link-secondary" href="#">Team</a></li> - <li><a class="link-secondary" href="#">Locations</a></li> - <li><a class="link-secondary" href="#">Privacy</a></li> - <li><a class="link-secondary" href="#">Terms</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Team</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Locations</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Privacy</a></li> + <li><a class="link-secondary text-decoration-none" href="#">Terms</a></li> </ul> </div> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/product.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/product.css index 5fcb582b4..6c90ae51e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/product.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/product/product.css @@ -2,6 +2,11 @@ max-width: 960px; } +.icon-link > .bi { + width: .75em; + height: .75em; +} + /* * Custom translucent site header */ 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 0f084ed7b..8420c4527 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 @@ -3,8 +3,7 @@ layout: examples title: Signin Template extra_css: - "sign-in.css" -body_class: "text-center" -include_js: false +body_class: "d-flex align-items-center py-4 bg-body-tertiary" --- <main class="form-signin w-100 m-auto"> @@ -21,12 +20,13 @@ include_js: false <label for="floatingPassword">Password</label> </div> - <div class="checkbox mb-3"> - <label> - <input type="checkbox" value="remember-me"> Remember me + <div class="form-check text-start my-3"> + <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault"> + <label class="form-check-label" for="flexCheckDefault"> + Remember me </label> </div> - <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> + <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button> <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/sign-in/sign-in.css b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/sign-in.css index 89deea44c..641f6d906 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/sign-in.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/examples/sign-in/sign-in.css @@ -3,17 +3,9 @@ body { height: 100%; } -body { - display: flex; - align-items: center; - padding-top: 40px; - padding-bottom: 40px; - background-color: #f5f5f5; -} - .form-signin { max-width: 330px; - padding: 15px; + padding: 1rem; } .form-signin .form-floating:focus-within { 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 4d5a33cd6..631addabe 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 @@ -5,7 +5,6 @@ extra_css: - "sticky-footer.css" html_class: "h-100" body_class: "d-flex flex-column h-100" -include_js: false --- <!-- Begin page content --> 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 5eb18f025..c66bbaf87 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 @@ -371,11 +371,11 @@ These variables are also color mode adaptive, meaning they change color while in ### Sass mixins -Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles. +Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles. {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}} -### Sass map +### Sass maps This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states. @@ -383,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. -### Sass loop +### Sass loops 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/download.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/download.md index f3965807a..a1b8bfd9a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/download.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/download.md @@ -96,7 +96,7 @@ Alternatively, if you're not using Bundler, you can install the gem by running t gem install bootstrap -v {{< param current_ruby_version >}} ``` -[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details. +[See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/main/README.md) for further details. ### Composer 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 ef3c3ba64..8efb2fb00 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 @@ -19,6 +19,9 @@ While the Bootstrap CSS can be used with any framework, **the Bootstrap JavaScri A better alternative for those using this type of frameworks is to use a framework-specific package **instead of** the Bootstrap JavaScript. Here are some of the most popular options: - React: [React Bootstrap](https://react-bootstrap.github.io/) + {{< callout >}} + **Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx). + {{< /callout >}} - Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) 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 b62e6190d..9c2be9f11 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 @@ -86,8 +86,7 @@ With dependencies installed and our project folder ready for us to start coding, outDir: '../dist' }, server: { - port: 8080, - hot: true + port: 8080 } } ``` diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md index 5f6e77073..fa36bf8ce 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/focus-ring.md @@ -45,13 +45,13 @@ By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus </a> {{< /example >}} -### Sass +### Sass variables Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. {{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} -### Utilities +### Sass utilities API In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md index 9a0bffcd2..ec63c5b8c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/icon-link.md @@ -70,13 +70,13 @@ Customize the color by overriding the `--bs-link-*` CSS variable: </a> {{< /example >}} -### Sass +### Sass variables Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project. {{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}} -### Utilities +### Sass utilities API Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/ratio.md b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/ratio.md index 771bc07cb..04b6eefea 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/ratio.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/helpers/ratio.md @@ -74,7 +74,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T {{< /example >}} -## Sass map +## Sass maps Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/breakpoints.md b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/breakpoints.md index 8e3df157e..1667fd9d1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/layout/breakpoints.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/layout/breakpoints.md @@ -37,7 +37,7 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} -For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}). +For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). ## Media queries 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 7d38b72e5..e0e8d9aad 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 @@ -64,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of </div> ``` -## Sass +## CSS + +### Sass variables As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them: {{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}} +For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}). + +### Sass mixins + In addition to customizing the Sass, you can also create your own containers with our Sass mixin. ```scss @@ -87,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit @include make-container(); } ``` - -For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}). 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 8e4d10a3c..1783410f9 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 @@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together: - **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters. -- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. +- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you. Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9). 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 11ca89a4a..99575b561 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/migration.md @@ -11,6 +11,10 @@ toc: true If you're migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section. +### Helpers + +- [Colored links]({{< docsref "/helpers/colored-links" >}}) once again have `!important` so they work better with our newly added link utilities. + ### Utilities - Added new `.d-inline-grid` [display utility]({{< docsref "/utilities/display" >}}). @@ -148,13 +152,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Alert variants are now styled via CSS variables. -- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### List group - List group item variants are now styled via CSS variables. -- <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. +- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. #### Dropdowns 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 eea553291..c17ed8470 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 @@ -143,7 +143,7 @@ Color mode background colors are also available as a Sass map: {{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}} -## Utilities API +### Sass 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 fe33cac48..b4fa2f413 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 @@ -185,7 +185,7 @@ Color mode adaptive border colors are also available as a Sass map: {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}} -### Utilities API +### Sass utilities API Border 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/colors.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/colors.md index e132a2f11..775457d9a 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 @@ -134,7 +134,7 @@ Color mode adaptive text colors are also available as a Sass map: {{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}} -### Utilities API +### Sass 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 dc5a497bf..41541b96f 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 @@ -105,9 +105,9 @@ The print and display classes can be combined. <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div> {{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Display 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/flex.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/flex.md index 564c39f86..d0a92e5b5 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 @@ -655,9 +655,9 @@ And say you want to vertically center the content next to the image: </div> {{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Flexbox 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/float.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/float.md index a18c21471..a8d3efba8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/float.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/float.md @@ -39,9 +39,9 @@ Here are all the support classes: {{< /float.inline >}} {{< /markdown >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Float 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/interactions.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/interactions.md index 0e8ea001f..d602850d1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/interactions.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/interactions.md @@ -33,9 +33,9 @@ If possible, the simpler solution is: - For form controls, add the `disabled` HTML attribute. - For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link. -## Sass +## CSS -### Utilities API +### Sass utilities API Interaction 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/link.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md index 1b8eaa1ef..668af8c23 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md @@ -94,11 +94,11 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} -## 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. -### Utilities API +### Sass utilities API Link 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/object-fit.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/object-fit.md index debd495e8..babc70a69 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 @@ -54,7 +54,9 @@ The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` util <video src="..." class="object-fit-none" autoplay></video> ``` -## Utilities API +## CSS + +### Sass utilities API Object fit 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/opacity.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/opacity.md index 5cc4c225f..5d253a77c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/opacity.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/opacity.md @@ -24,7 +24,9 @@ Set the `opacity` of an element using `.opacity-{value}` utilities. <div class="opacity-25">...</div> ``` -### Utilities API +## CSS + +### Sass utilities API Opacity 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/overflow.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/overflow.md index c4cb0092c..9c8573c33 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/overflow.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/overflow.md @@ -90,9 +90,9 @@ Adjust the `overflow-y` property to affect the overflow of content vertically. Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. -## Sass +## CSS -### Utilities API +### Sass utilities API Overflow 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/position.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md index 0ba0dd769..a2ef4ecc7 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/position.md @@ -93,8 +93,8 @@ Here are some real life examples of these classes: Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span> </button> -<div class="position-relative py-2 px-4 text-bg-dark border border-dark rounded-pill"> - Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-dark)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> +<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill"> + Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> </div> <button type="button" class="btn btn-primary position-relative"> @@ -115,15 +115,15 @@ You can use these classes with existing components to create new ones. Remember </div> {{< /example >}} -## Sass +## CSS -### Maps +### Sass maps Default position utility values are declared in a Sass map, then used to generate our utilities. {{< scss-docs name="position-map" file="scss/_variables.scss" >}} -### Utilities API +### Sass 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" >}}) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/shadows.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/shadows.md index 9872d4519..94868a119 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/shadows.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/shadows.md @@ -17,13 +17,13 @@ While shadows on components are disabled by default in Bootstrap and can be enab <div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div> {{< /example >}} -## Sass +## CSS -### Variables +### Sass variables {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}} -### Utilities API +### Sass utilities API Shadow 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/sizing.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/sizing.md index 3d0f8e81c..f5881729e 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 @@ -53,9 +53,9 @@ You can also use utilities to set the width and height relative to the viewport. <div class="vh-100">Height 100vh</div> ``` -## Sass +## CSS -### Utilities API +### Sass utilities API Sizing 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/spacing.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/spacing.md index c7a216c31..2562b8d43 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 @@ -139,15 +139,15 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as </div> {{< /example >}} -## Sass +## CSS -### Maps +### Sass maps Spacing utilities are declared via Sass map and then generated with our utilities API. {{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}} -### Utilities API +### Sass utilities API Spacing 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/text.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/text.md index f7c030da6..5787f95eb 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 @@ -153,7 +153,7 @@ Font-size utilities are generated from this map, in combination with our utiliti {{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}} -## Utilities API +### Sass 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/vertical-align.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/vertical-align.md index 9fe0eeb93..c24e6616f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/vertical-align.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/vertical-align.md @@ -39,9 +39,9 @@ With table cells: </table> {{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Vertical align 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/visibility.md b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/visibility.md index 61eb30241..e2c6bb6b8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/visibility.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/visibility.md @@ -28,9 +28,9 @@ Apply `.visible` or `.invisible` as needed. } ``` -## Sass +## CSS -### Utilities API +### Sass utilities API Visibility 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 ca7d8e35a..64ed84bce 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 @@ -37,13 +37,13 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale ## CSS -### Sass map +### Sass maps Customize this Sass map to change the available values and generated utilities. {{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}} -### Utilities API +### Sass 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" >}}) diff --git a/vendor/twbs/bootstrap/site/data/docs-versions.yml b/vendor/twbs/bootstrap/site/data/docs-versions.yml index 5f932313c..722fe746e 100644 --- a/vendor/twbs/bootstrap/site/data/docs-versions.yml +++ b/vendor/twbs/bootstrap/site/data/docs-versions.yml @@ -48,7 +48,7 @@ - group: v5.x baseurl: "https://getbootstrap.com/docs" - description: "Current major release. Last update was v5.3.0-alpha3." + description: "Current major release. Last update was v5.3.0." versions: - "5.0" - "5.1" diff --git a/vendor/twbs/bootstrap/site/data/examples.yml b/vendor/twbs/bootstrap/site/data/examples.yml index 4b85c57b1..99d34752b 100644 --- a/vendor/twbs/bootstrap/site/data/examples.yml +++ b/vendor/twbs/bootstrap/site/data/examples.yml @@ -11,21 +11,31 @@ - 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: Bootstrap color modes + description: "Import and compile Bootstrap's Sass with Stylelint, and the Bootstrap color modes." + url: /examples/tree/main/color-modes + - 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 - name: Parcel description: "Import and bundle Bootstrap's source Sass and JavaScript via Parcel." url: /examples/tree/main/parcel - htmlIndexLocation: src + indexPath: src/index.html + indexPath: src/index.html + - name: React + description: "Import and bundle Bootstrap's source Sass and JavaScript with React, Next.js, and React Bootstrap." + url: /examples/tree/main/react-nextjs + indexPath: src/pages/index.tsx - 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 + - name: Vue + description: "Import and bundle Bootstrap's source Sass and JavaScript with Vue and Vite." + url: /examples/tree/main/vue + - name: Webpack + description: "Import and bundle Bootstrap's source Sass and JavaScript with Webpack." + url: /examples/tree/main/webpack + indexPath: src/index.html - category: Snippets description: "Common patterns for building sites and apps that build on existing components and utilities with custom CSS and more." diff --git a/vendor/twbs/bootstrap/site/layouts/_default/examples.html b/vendor/twbs/bootstrap/site/layouts/_default/examples.html index cb689c0ce..5ec926323 100644 --- a/vendor/twbs/bootstrap/site/layouts/_default/examples.html +++ b/vendor/twbs/bootstrap/site/layouts/_default/examples.html @@ -153,16 +153,14 @@ {{ .Content }} - {{ if ne .Page.Params.include_js false -}} - {{- if eq hugo.Environment "production" -}} - <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script> - {{- else -}} - <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script> - {{- end }} - - {{ range .Page.Params.extra_js -}} - <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script> - {{- end -}} + {{- if eq hugo.Environment "production" -}} + <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }} crossorigin="anonymous"></script> + {{- else -}} + <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script> {{- end }} + + {{ range .Page.Params.extra_js -}} + <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script> + {{- end -}} </body> </html> diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html index ab183e0a3..a162db521 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/example.html @@ -21,7 +21,7 @@ <div class="bd-example-snippet bd-code-snippet"> {{- if eq $show_preview true -}} - <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example{{ with $class }} {{ . }}{{ end }}"> + <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example m-0 border-0{{ with $class }} {{ . }}{{ end }}"> {{- $input -}} </div> {{- end -}} diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html index fad4f034f..4739e0a17 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/js-docs.html @@ -26,12 +26,18 @@ {{- $match = replace $match $capture_start "" -}} {{- $match = replace $match $capture_end "" -}} - <div class="bd-example-snippet bd-code-snippet"> - <div class="bd-clipboard"> - <button type="button" class="btn-clipboard" title="Copy to clipboard"> - <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg> - </button> + <div class="bd-example-snippet bd-code-snippet bd-file-ref"> + <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 -}} diff --git a/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html b/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html index d28b29c92..4edc414fd 100644 --- a/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html +++ b/vendor/twbs/bootstrap/site/layouts/shortcodes/scss-docs.html @@ -39,7 +39,7 @@ {{- $match = replace $match " !default" "" -}} {{- end -}} - <div class="bd-example-snippet bd-code-snippet bd-scss-docs"> + <div class="bd-example-snippet bd-code-snippet bd-file-ref"> <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 -}} diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/bootstrap-themes-collage.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/bootstrap-themes-collage.png Binary files differindex 0a3bf5d69..476da355c 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/bootstrap-themes-collage.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/bootstrap-themes-collage.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl.png Binary files differindex 8bec58f1c..54e80b768 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl@2x.png Binary files differindex 47b5b9a4a..7f4a654f9 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album-rtl@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album.png Binary files differindex 9f628babf..f0a2a6b9d 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/album.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png Binary files differindex ee8466573..a4f75986c 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/breadcrumbs@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png Binary files differindex 2beeca096..e44cde62b 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel-rtl@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel.png Binary files differindex b8ea3ce1c..4485d659c 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel@2x.png Binary files differindex 39df35930..3d8b3fd67 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/carousel@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/footers.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/footers.png Binary files differindex ac20b7f5d..8ab0cd0a3 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/footers.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/footers.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/headers.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/headers.png Binary files differindex 8ad7f6cd2..fbb7fd2a4 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/headers.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/headers.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/masonry@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/masonry@2x.png Binary files differindex 8d9a5cf97..809fd1253 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/masonry@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/masonry@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-bottom.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-bottom.png Binary files differindex af47666f1..5e0b999fe 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-bottom.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-bottom.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed.png Binary files differindex 97df67e96..eba24d37b 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png Binary files differindex 3e0f98b95..6e4b50f1a 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-fixed@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-static.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-static.png Binary files differindex 8d54f182c..c894ae8ef 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-static.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbar-static.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png Binary files differindex be2d1487c..0347bee53 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png Binary files differindex d2b947176..7775a3087 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars-offcanvas@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars.png Binary files differindex 0d7b44afb..3a9b8737e 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/navbars.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png Binary files differindex cc88cfb2d..a9778d952 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png Binary files differindex 9478901f6..1662b364d 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer-navbar@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer.png Binary files differindex 4b5246d38..c2776fd3d 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/examples/sticky-footer.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png Binary files differindex ca0593a21..7c7f277a1 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/parcel.png b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/parcel.png Binary files differindex ff5cc3ae7..21afaa600 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/parcel.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.3/assets/img/parcel.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 4528ba36b..9f22daa1b 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 @@ -7,9 +7,11 @@ (() => { 'use strict' - const storedTheme = localStorage.getItem('theme') + const getStoredTheme = () => localStorage.getItem('theme') + const setStoredTheme = theme => localStorage.setItem('theme', theme) const getPreferredTheme = () => { + const storedTheme = getStoredTheme() if (storedTheme) { return storedTheme } @@ -17,7 +19,7 @@ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' } - const setTheme = function (theme) { + const setTheme = theme => { if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.setAttribute('data-bs-theme', 'dark') } else { @@ -56,7 +58,8 @@ } window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { - if (storedTheme !== 'light' || storedTheme !== 'dark') { + const storedTheme = getStoredTheme() + if (storedTheme !== 'light' && storedTheme !== 'dark') { setTheme(getPreferredTheme()) } }) @@ -68,7 +71,7 @@ .forEach(toggle => { toggle.addEventListener('click', () => { const theme = toggle.getAttribute('data-bs-theme-value') - localStorage.setItem('theme', theme) + setStoredTheme(theme) setTheme(theme) showActiveTheme(theme, true) }) |