From: Mark Otto Date: Fri, 19 Dec 2025 06:31:46 +0000 (-0800) Subject: Update Alert and tweak some divider styles (#41954) X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=07de62edba9a5b8238b7000cde9e9639b9022e2b;p=thirdparty%2Fbootstrap.git Update Alert and tweak some divider styles (#41954) * Redo some alerts CSS, fix hr and vr components * fix link --- diff --git a/scss/_alert.scss b/scss/_alert.scss index 7af4a8d83f..aa393707dc 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -5,39 +5,39 @@ @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; @@ -48,22 +48,4 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers widt 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; - } - } } diff --git a/scss/_root.scss b/scss/_root.scss index 2a582c5a05..2924962743 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -101,6 +101,8 @@ --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); diff --git a/scss/_variables.scss b/scss/_variables.scss index 16c891d747..5ff0a10a28 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -319,11 +319,6 @@ $blockquote-footer-color: var(--gray-600) !default; $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; diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss index cbb7fa5354..10215f1761 100644 --- a/scss/content/_prose.scss +++ b/scss/content/_prose.scss @@ -43,7 +43,7 @@ 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, @@ -52,14 +52,16 @@ 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; + } } } diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index ac2197eea4..0162321ad3 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -66,17 +66,10 @@ } // 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); } diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss index 0dfef6afeb..6ffa4a0f33 100644 --- a/scss/helpers/_vr.scss +++ b/scss/helpers/_vr.scss @@ -6,7 +6,6 @@ align-self: stretch; width: $vr-border-width; min-height: 1em; - background-color: currentcolor; - opacity: $hr-opacity; + background-color: var(--border-color); } } diff --git a/scss/tests/modules/_configuration.test.scss b/scss/tests/modules/_configuration.test.scss index 8569944ced..b8a4492e2c 100644 --- a/scss/tests/modules/_configuration.test.scss +++ b/scss/tests/modules/_configuration.test.scss @@ -1,6 +1,5 @@ // 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 *; @@ -13,14 +12,12 @@ $true-terminal-output: false; @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; } } diff --git a/site/src/content/docs/components/alert.mdx b/site/src/content/docs/components/alert.mdx index 316a643f99..89b60b4ca3 100644 --- a/site/src/content/docs/components/alert.mdx +++ b/site/src/content/docs/components/alert.mdx @@ -8,9 +8,17 @@ aliases: 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). + + + A simple alert—check it out! + `} /> + +## Variants + +Use any of our variant theme classes for color mode adaptive, contextual styling. ``)} /> -### Additional content +## Additional content Alerts can also contain additional HTML elements like headings, paragraphs and dividers. -

Well done!

-

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.

-
-

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

+ +

Well done!

+

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.

+
+

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

+ `} /> -### 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. - +
@@ -61,46 +71,7 @@ Similarly, you can use [flexbox utilities]([[docsref:/utilities/flex]]) and [Boo
`} /> -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. - - - - - - - - - - - - - - - - - `} /> - -### Dismissing +## Dismiss Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how: @@ -112,8 +83,8 @@ Using the alert JavaScript plugin, it’s possible to dismiss any alert inline. You can see this in action with a live demo: - Holy guacamole! You should check in on some of those fields below. - + Something’s wrong, check the fields below and try again. + `} /> diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index ee76895a11..f5ba91d5fe 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -69,7 +69,6 @@ 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) { diff --git a/site/src/scss/_details.scss b/site/src/scss/_details.scss index b26d7d62c0..d81b299920 100644 --- a/site/src/scss/_details.scss +++ b/site/src/scss/_details.scss @@ -5,7 +5,6 @@ @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);