@use "mixins/border-radius" as *;
// scss-docs-start alert-variables
+$alert-gap: $spacer * .75 !default;
$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
-$alert-margin-bottom: 1rem !default;
$alert-border-radius: var(--border-radius) !default;
-$alert-link-font-weight: $font-weight-bold !default;
+$alert-link-font-weight: $font-weight-semibold !default;
$alert-border-width: var(--border-width) !default;
-$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
// scss-docs-end alert-variables
@layer components {
.alert {
// scss-docs-start alert-css-vars
- --alert-bg: var(--theme-bg-subtle, transparent);
+ --alert-gap: #{$alert-gap};
+ --alert-bg: var(--theme-bg-subtle, var(--bg-1));
--alert-padding-x: #{$alert-padding-x};
--alert-padding-y: #{$alert-padding-y};
- --alert-margin-bottom: #{$alert-margin-bottom};
--alert-color: var(--theme-text, inherit);
- --alert-border-color: transparent;
- --alert-border: #{$alert-border-width} solid var(--theme-border, var(--alert-border-color));
+ --alert-border-color: var(--theme-border, var(--border-color));
+ --alert-border: #{$alert-border-width} solid var(--alert-border-color);
--alert-border-radius: #{$alert-border-radius};
--alert-link-color: inherit;
+ --hr-border-color: var(--theme-border, var(--border-color));
// scss-docs-end alert-css-vars
- position: relative;
+ display: flex;
+ gap: var(--alert-gap);
+ align-items: start;
padding: var(--alert-padding-y) var(--alert-padding-x);
- // margin-bottom: var(--alert-margin-bottom);
color: var(--alert-color);
background-color: var(--alert-bg);
border: var(--alert-border);
@include border-radius(var(--alert-border-radius));
}
- // Headings for larger alerts
.alert-heading {
// Specified to prevent conflicts of changing $headings-color
color: inherit;
font-weight: $alert-link-font-weight;
color: var(--alert-link-color);
}
-
-
- // Dismissible alerts
- //
- // Expand the right padding and account for the close button's positioning.
-
- .alert-dismissible {
- padding-inline-end: $alert-dismissible-padding-r;
-
- // Adjust close link position
- .btn-close {
- position: absolute;
- inset-block-start: 0;
- inset-inline-end: 0;
- z-index: $stretched-link-z-index + 1;
- padding: $alert-padding-y * 1.25 $alert-padding-x;
- }
- }
}
--heading-color: #{$headings-color};
+ --hr-border-color: var(--border-color);
+
--link-color: light-dark(var(--primary-base), var(--primary-text));
--link-decoration: #{$link-decoration};
--link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000);
$blockquote-footer-font-size: $small-font-size !default;
$hr-margin-y: $spacer !default;
-$hr-color: inherit !default;
-
-$hr-border-color: null !default; // Allows for inherited colors
-$hr-border-width: var(--border-width) !default;
-$hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--border-width) !default;
hr {
margin: calc(var(--content-gap) * 1.5) 0;
border: 0;
- border-block-start: 1px solid var(--border-color);
+ border-block-start: var(--border-width) solid var(--hr-border-color);
}
h1,
h4,
h5,
h6 {
- margin-top: 0;
- margin-bottom: calc(var(--content-gap) / -2);
- font-weight: 500;
- line-height: 1.25;
-
- code {
- font-weight: 600;
- color: inherit;
+ &:not([class]) {
+ margin-top: 0;
+ margin-bottom: calc(var(--content-gap) / -2);
+ font-weight: 500;
+ line-height: 1.25;
+
+ code {
+ font-weight: 600;
+ color: inherit;
+ }
}
}
}
// scss-docs-end reboot-body-rules
-
- // Content grouping
- //
- // 1. Reset Firefox's gray color
-
hr {
margin: $hr-margin-y 0;
- color: $hr-color; // 1
border: 0;
- border-block-start: $hr-border-width solid $hr-border-color;
- opacity: $hr-opacity;
+ border-block-start: var(--border-width) solid var(--hr-border-color);
}
align-self: stretch;
width: $vr-border-width;
min-height: 1em;
- background-color: currentcolor;
- opacity: $hr-opacity;
+ background-color: var(--border-color);
}
}
// Test @use with configuration syntax using a single module instance
@use "../../alert" as * with (
- $alert-margin-bottom: 3rem,
$alert-link-font-weight: 800
);
@use "../../variables" as *;
@include assert() {
@include output() {
.test {
- margin-bottom: $alert-margin-bottom;
font-weight: $alert-link-font-weight;
}
}
@include expect() {
.test {
- margin-bottom: 3rem;
font-weight: 800;
}
}
import { getData } from '@libs/data'
-## Examples
+## Default alert
-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).
+Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be used with theme colors, but have neutral fallback colors for when no theme color is applied. For inline dismissal, use the [alerts JavaScript plugin](#dismiss).
+
+<Example code={`<div class="alert" role="alert">
+ A simple alert—check it out!
+ </div>`} />
+
+## Variants
+
+Use any of our variant theme classes for color mode adaptive, contextual styling.
<Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
A simple ${themeColor.name} alert—check it out!
<Details name="warning-color-assistive-technologies" />
-### Live example
+## Live example
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
<JsDocs name="live-alert" file="site/src/assets/partials/snippets.js" />
-### Link color
+## Link color
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
A simple ${themeColor.name} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>`)} />
-### Additional content
+## Additional content
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
<Example code={`<div class="alert theme-success" role="alert">
- <h4 class="alert-heading">Well done!</h4>
- <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
- <hr>
- <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+ <vstack>
+ <h4 class="alert-heading mb-2">Well done!</h4>
+ <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+ <hr class="my-3">
+ <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+ </vstack>
</div>`} />
-### Icons
+## With icons
Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Bootstrap Icons]([[config:icons]]) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
<Example code={`<div class="alert theme-primary d-flex align-items-center" role="alert">
- <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+ <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0" viewBox="0 0 16 16" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg>
<div>
</div>
</div>`} />
-Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
-
-<Example code={`<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
- <symbol id="check-circle-fill" viewBox="0 0 16 16">
- <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
- </symbol>
- <symbol id="info-fill" viewBox="0 0 16 16">
- <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
- </symbol>
- <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
- <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
- </symbol>
- </svg>
-
- <div class="alert theme-primary d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use href="#info-fill"/></svg>
- <div>
- An example alert with an icon
- </div>
- </div>
- <div class="alert theme-success d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use href="#check-circle-fill"/></svg>
- <div>
- An example success alert with an icon
- </div>
- </div>
- <div class="alert theme-warning d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill"/></svg>
- <div>
- An example warning alert with an icon
- </div>
- </div>
- <div class="alert theme-danger d-flex align-items-center" role="alert">
- <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill"/></svg>
- <div>
- An example danger alert with an icon
- </div>
- </div>`} />
-
-### Dismissing
+## Dismiss
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:
You can see this in action with a live demo:
<Example code={`<div class="alert theme-warning alert-dismissible fade show" role="alert">
- <strong>Holy guacamole!</strong> You should check in on some of those fields below.
- <CloseButton dismiss="alert" />
+ Something’s wrong, check the fields below and try again.
+ <CloseButton dismiss="alert" class="ms-auto" />
</div>`} />
<Callout type="warning">
display: flow-root;
padding: var(--bd-example-padding);
font-size: var(--font-size-base);
- // margin: 0 ($bd-gutter-x * -.5) 1rem;
background-color: var(--bs-bg-body);
@include media-breakpoint-up(md) {
@layer custom {
.bd-details {
- margin-block: 1.25rem;
font-size: var(--bs-font-size-sm);
line-height: var(--bs-line-height-sm);
color: var(--bs-fg-3);
projects / thirdparty / bootstrap.git / commitdiff
