diff options
Diffstat (limited to 'site')
21 files changed, 86 insertions, 57 deletions
diff --git a/site/.eslintrc.json b/site/.eslintrc.json index 1158ba36a7..0a16f82f9a 100644 --- a/site/.eslintrc.json +++ b/site/.eslintrc.json @@ -1,15 +1,28 @@ { + "extends": "../.eslintrc.json", "env": { "browser": true, "node": false }, + "parserOptions": { + "sourceType": "script" + }, "plugins": [ "markdown" ], + "rules": { + "no-new": "off", + "strict": "error", + "unicorn/no-array-for-each": "off", + "unicorn/numeric-separators-style": "off", + "unicorn/prefer-node-protocol": "off" + }, "overrides": [ { // 2. Enable the Markdown processor for all .md files. - "files": ["./**/*.md"], + "files": [ + "./**/*.md" + ], "processor": "markdown/markdown" }, { @@ -28,27 +41,15 @@ }, "rules": { "no-array-for-each": "off", + "no-labels": "off", + "no-redeclare": "off", "no-undef": "off", - "no-unused-vars": "off", - "unicorn/no-array-for-each": "off", - "unicorn/numeric-separators-style": "off", "no-unused-expressions": "off", "no-unused-labels": "off", - "no-labels": "off", - "no-redeclare": "off" + "no-unused-vars": "off", + "unicorn/no-array-for-each": "off", + "unicorn/numeric-separators-style": "off" } } - ], - "parserOptions": { - "sourceType": "script" - }, - "extends": "../.eslintrc.json", - "rules": { - "no-new": "off", - "prefer-template": "error", - "strict": "error", - "unicorn/no-array-for-each": "off", - "unicorn/numeric-separators-style": "off", - "unicorn/prefer-node-protocol": "off" - } + ] } diff --git a/site/content/docs/5.2/components/collapse.md b/site/content/docs/5.2/components/collapse.md index e53fb5458f..95abc536c4 100644 --- a/site/content/docs/5.2/components/collapse.md +++ b/site/content/docs/5.2/components/collapse.md @@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes: - `.collapsing` is applied during transitions - `.collapse.show` shows content -Generally, we recommend using a button with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. +Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required. {{< example >}} <p> @@ -42,7 +42,7 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil ## Horizontal -The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). +The collapse plugin supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}). {{< callout info >}} Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.** @@ -63,10 +63,10 @@ Please note that while the example below has a `min-height` set to avoid excessi </div> {{< /example >}} -## Multiple targets +## Multiple toggles and targets -A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute. -Multiple `<button>` or `<a>` can show and hide an element if they each reference it with their `href` or `data-bs-target` attribute +A `<button>` or `<a>` element can show and hide multiple elements by referencing them with a selector in its `data-bs-target` or `href` attribute. +Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute. {{< example >}} <p> diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index 70087aa8de..cd243a792f 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -22,11 +22,11 @@ However, Bootstrap does add built-in support for most standard keyboard menu int ## Examples -Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `<a>` or `<button>` elements to better fit your potential needs. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported. +Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Ideally, you should use a `<button>` element as the dropdown trigger, but the plugin will work with `<a>` elements as well. The examples shown here use semantic `<ul>` elements where appropriate, but custom markup is supported. ### Single button -Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements: +Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with `<button>` elements: {{< example >}} <div class="dropdown"> @@ -41,7 +41,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes. </div> {{< /example >}} -And with `<a>` elements: +While `<button>` is the recommended control for a dropdown toggle, there might be situations where you have to use an `<a>` element. If you do, we recommend adding a `role="button"` attribute to appropriately convey control's purpose to assistive technologies such as screen readers. {{< example >}} <div class="dropdown"> @@ -378,9 +378,9 @@ And putting it to use in a navbar: <div class="collapse navbar-collapse" id="navbarNavDarkDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown - </a> + </button> <ul class="dropdown-menu dropdown-menu-dark"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md index c16a3e2298..4251dc294e 100644 --- a/site/content/docs/5.2/components/modal.md +++ b/site/content/docs/5.2/components/modal.md @@ -329,7 +329,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. </div> <div class="modal-body"> <h2 class="fs-5">Popover in a modal</h2> - <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p> + <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</button> triggers a popover on click.</p> <hr> <h2 class="fs-5">Tooltips in a modal</h2> <p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p> @@ -351,7 +351,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ```html <div class="modal-body"> <h2 class="fs-5">Popover in a modal</h2> - <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p> + <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p> <hr> <h2 class="fs-5">Tooltips in a modal</h2> <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p> @@ -537,7 +537,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target </div> </div> </div> -<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a> +<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button> {{< /example >}} ### Change animation @@ -858,8 +858,8 @@ const myModal = new bootstrap.Modal('#myModal', { | Method | Description | | --- | --- | | `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) | -| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. | -| `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. | +| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. | +| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). | | `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). | | `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. | diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index 0221db2d87..7f5ef7b26b 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.2/components/offcanvas.md @@ -11,7 +11,7 @@ toc: true Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins. -- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables. +- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables. - When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. - Similar to modals, only one offcanvas can be shown at a time. diff --git a/site/content/docs/5.2/components/placeholders.md b/site/content/docs/5.2/components/placeholders.md index 4de405756f..5ebaab3aaa 100644 --- a/site/content/docs/5.2/components/placeholders.md +++ b/site/content/docs/5.2/components/placeholders.md @@ -126,7 +126,7 @@ The size of `.placeholder`s are based on the typographic style of the parent ele ### Animation -Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being _actively_ loaded. +Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being *actively* loaded. {{< example >}} <p class="placeholder-glow"> diff --git a/site/content/docs/5.2/components/popovers.md b/site/content/docs/5.2/components/popovers.md index 56fbb77a02..f86404382b 100644 --- a/site/content/docs/5.2/components/popovers.md +++ b/site/content/docs/5.2/components/popovers.md @@ -238,7 +238,7 @@ const popover = new bootstrap.Popover(element, { | `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. | | `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** | | `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. | -| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. | +| `getOrCreateInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. | | `setContent` | Gives a way to change the popover's content after its initialization. | | `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. | diff --git a/site/content/docs/5.2/components/spinners.md b/site/content/docs/5.2/components/spinners.md index 3ad478096d..f2635c63ec 100644 --- a/site/content/docs/5.2/components/spinners.md +++ b/site/content/docs/5.2/components/spinners.md @@ -205,9 +205,7 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne [color]: {{< docsref "/utilities/colors" >}} -[display]: {{< docsref "/utilities/display" >}} [flex]: {{< docsref "/utilities/flex" >}} [float]: {{< docsref "/utilities/float" >}} [margin]: {{< docsref "/utilities/spacing" >}} -[sizing]: {{< docsref "/utilities/sizing" >}} [text]: {{< docsref "/utilities/text" >}} diff --git a/site/content/docs/5.2/extend/approach.md b/site/content/docs/5.2/extend/approach.md index 4a4cc72e31..a912a2eb24 100644 --- a/site/content/docs/5.2/extend/approach.md +++ b/site/content/docs/5.2/extend/approach.md @@ -65,7 +65,7 @@ This principle is our first-class JavaScript API using `data` attributes. You do Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a `.btn` class on nearly any element, but most elements don't provide any semantic value or browser functionality. So instead, we use `<button>`s and `<a>`s. -The same goes for more complex components. While we *could* write our own form validation plugin to add classes to a parent element based on an input's state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us. +The same goes for more complex components. While we _could_ write our own form validation plugin to add classes to a parent element based on an input's state, thereby allowing us to style the text say red, we prefer using the `:valid`/`:invalid` pseudo-elements every browser provides us. ## Utilities diff --git a/site/content/docs/5.2/forms/floating-labels.md b/site/content/docs/5.2/forms/floating-labels.md index 9ec4fcd2fa..6b33fb67ba 100644 --- a/site/content/docs/5.2/forms/floating-labels.md +++ b/site/content/docs/5.2/forms/floating-labels.md @@ -75,6 +75,34 @@ Other than `.form-control`, floating labels are only available on `.form-select` </div> {{< /example >}} +## Disabled + +Add the `disabled` boolean attribute on an input, a textarea or a select to give it a grayed out appearance, remove pointer events, and prevent focusing. + +{{< example >}} +<div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled> + <label for="floatingInputDisabled">Email address</label> +</div> +<div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea> + <label for="floatingTextareaDisabled">Comments</label> +</div> +<div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea> + <label for="floatingTextarea2Disabled">Comments</label> +</div> +<div class="form-floating"> + <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelectDisabled">Works with selects</label> +</div> +{{< /example >}} + ## Readonly plaintext Floating labels also support `.form-control-plaintext`, which can be helpful for toggling from an editable `<input>` to a plaintext value without affecting the page layout. diff --git a/site/content/docs/5.2/getting-started/contribute.md b/site/content/docs/5.2/getting-started/contribute.md index c42ad3c496..b6e1faa547 100644 --- a/site/content/docs/5.2/getting-started/contribute.md +++ b/site/content/docs/5.2/getting-started/contribute.md @@ -14,7 +14,7 @@ Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock: 1. [Download and install Node.js](https://nodejs.org/en/download/), which we use to manage our dependencies. -2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork [Bootstrap's repository]({{< param repo >}}). +2. Either [download Bootstrap's sources]({{< param "download.source" >}}) or fork and clone [Bootstrap's repository]({{< param repo >}}). 3. Navigate to the root `/bootstrap` directory and run `npm install` to install our local dependencies listed in [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json). When completed, you'll be able to run the various commands provided from the command line. diff --git a/site/content/docs/5.2/getting-started/vite.md b/site/content/docs/5.2/getting-started/vite.md index b203eef8a9..4086316d30 100644 --- a/site/content/docs/5.2/getting-started/vite.md +++ b/site/content/docs/5.2/getting-started/vite.md @@ -35,6 +35,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre ```sh npm i --save bootstrap @popperjs/core ``` + 4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap's CSS. ```sh diff --git a/site/content/docs/5.2/helpers/color-background.md b/site/content/docs/5.2/helpers/color-background.md index c4174845c6..aee048e0ff 100644 --- a/site/content/docs/5.2/helpers/color-background.md +++ b/site/content/docs/5.2/helpers/color-background.md @@ -1,6 +1,6 @@ --- layout: docs -title: Color & background +title: Color and background description: Set a background color with contrasting foreground color. group: helpers toc: true @@ -9,8 +9,6 @@ added: "5.2" ## Overview -{{< added-in "5.2.0" >}} - Color and background helpers combine the power of our [`.text-*` utilities]({{< docsref "/utilities/colors" >}}) and [`.bg-*` utilities]({{< docsref "/utilities/background" >}}) in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`. {{< callout warning >}} diff --git a/site/content/docs/5.2/layout/breakpoints.md b/site/content/docs/5.2/layout/breakpoints.md index ebc5d26b37..605a9d6681 100644 --- a/site/content/docs/5.2/layout/breakpoints.md +++ b/site/content/docs/5.2/layout/breakpoints.md @@ -94,7 +94,7 @@ These Sass mixins translate in our compiled CSS using the values declared in our ### Max-width -We occasionally use media queries that go in the other direction (the given screen size *or smaller*): +We occasionally use media queries that go in the other direction (the given screen size _or smaller_): ```scss // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }` diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index bf0ad56e9e..a991fb6839 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -457,7 +457,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co - <span class="badge bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency. -- <span class="badge bg-danger">Breaking</span> Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency. +- <span class="badge bg-danger">Breaking</span> Renamed `.font-italic` utility to `.fst-italic` for brevity and consistency with new `.fst-normal` utility. - Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts. diff --git a/site/content/docs/5.2/utilities/borders.md b/site/content/docs/5.2/utilities/borders.md index 60be796d9a..631df172ae 100644 --- a/site/content/docs/5.2/utilities/borders.md +++ b/site/content/docs/5.2/utilities/borders.md @@ -140,7 +140,6 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from {{< /example >}} {{< example class="bd-example-rounded-utils" >}} - {{< placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" >}} {{< placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" >}} {{< placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" >}} diff --git a/site/content/docs/5.2/utilities/flex.md b/site/content/docs/5.2/utilities/flex.md index 014e4ddd78..e295034345 100644 --- a/site/content/docs/5.2/utilities/flex.md +++ b/site/content/docs/5.2/utilities/flex.md @@ -462,7 +462,7 @@ Additionally there are also responsive `.order-first` and `.order-last` classes ## Align content -Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. +Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. **Heads up!** This property has no effect on single rows of flex items. diff --git a/site/content/docs/5.2/utilities/interactions.md b/site/content/docs/5.2/utilities/interactions.md index 35ea2b9959..0e8ea001fd 100644 --- a/site/content/docs/5.2/utilities/interactions.md +++ b/site/content/docs/5.2/utilities/interactions.md @@ -31,7 +31,7 @@ The `.pe-none` class (and the `pointer-events` CSS property it sets) only preven 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. +- For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link. ## Sass diff --git a/site/content/docs/5.2/utilities/z-index.md b/site/content/docs/5.2/utilities/z-index.md index afd667474f..7cfd22faa8 100644 --- a/site/content/docs/5.2/utilities/z-index.md +++ b/site/content/docs/5.2/utilities/z-index.md @@ -17,11 +17,11 @@ We call these "low-level" `z-index` utilities because of their default values of {{< /callout >}} {{< example class="bd-example-zindex-levels position-relative" >}} -<div class="z-n1 position-absolute p-5 rounded-3"></div> -<div class="z-0 position-absolute p-5 rounded-3"></div> -<div class="z-1 position-absolute p-5 rounded-3"></div> -<div class="z-2 position-absolute p-5 rounded-3"></div> <div class="z-3 position-absolute p-5 rounded-3"></div> +<div class="z-2 position-absolute p-5 rounded-3"></div> +<div class="z-1 position-absolute p-5 rounded-3"></div> +<div class="z-0 position-absolute p-5 rounded-3"></div> +<div class="z-n1 position-absolute p-5 rounded-3"></div> {{< /example >}} ## Overlays diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 1a3f9c1a16..d534f2c045 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -16,9 +16,14 @@ <main class="bd-main order-1"> <div class="bd-intro pt-2 ps-lg-2"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> - <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener"> - View on GitHub - </a> + <div class="mb-3 mb-md-0 d-flex"> + {{- if .Page.Params.added -}} + <small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 border border-success border-opacity-10 rounded-2 me-2">Added in v{{ .Page.Params.added }}</small> + {{- end -}} + <a class="btn btn-sm btn-bd-light rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener"> + View on GitHub + </a> + </div> <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1> </div> <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p> diff --git a/site/layouts/shortcodes/placeholder.html b/site/layouts/shortcodes/placeholder.html index 9c915bcd6f..7c65bf00bf 100644 --- a/site/layouts/shortcodes/placeholder.html +++ b/site/layouts/shortcodes/placeholder.html @@ -29,7 +29,6 @@ {{- $markup := .Get "markup" | default "svg" -}} - {{- if eq $markup "img" -}} <img class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" alt="{{ $title }} : {{ $text }}" width="{{ $width }}" height="{{ $height }}" src="data:image/svg+xml,%3Csvg%20style='font-size:%201.125rem;%20font-family:system-ui,-apple-system,%22Segoe%20UI%22,Roboto,%22Helvetica%20Neue%22,%22Noto%20Sans%22,%22Liberation%20Sans%22,Arial,sans-serif,%22Apple%20Color%20Emoji%22,%22Segoe%20UI%20Emoji%22,%22Segoe%20UI%20Symbol%22,%22Noto%20Color%20Emoji%22;%20-webkit-user-select:%20none;%20-moz-user-select:%20none;%20user-select:%20none;%20text-anchor:%20middle;'%20width='200'%20height='200'%20xmlns='http://www.w3.org/2000/svg'%3E {{- if $show_title }}%3Ctitle%3E{{ $title }}%3C/title%3E{{ end -}} |