mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 16:14:04 +02:00
Code Issues Releases Wiki Activity

Update Alerts variables and remove deprecation mentions

Browse Source
This commit is contained in:
Mark Otto
2025-02-26 09:39:17 -08:00
parent d1fe9fedba
commit 4dc3e62ec2
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_alert.scss
View File

@@ -10,13 +10,14 @@
@layer components {
.alert {
// scss-docs-start alert-css-vars
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
--#{$prefix}alert-border-color: var(--#{$prefix}theme-border, transparent);
--#{$prefix}alert-border-width: #{$alert-border-width};
// --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;
// scss-docs-end alert-css-vars
@@ -26,7 +27,7 @@
margin-bottom: var(--#{$prefix}alert-margin-bottom);
color: var(--#{$prefix}alert-color);
background-color: var(--#{$prefix}alert-bg);
border: var(--#{$prefix}alert-border);
border: var(--#{$prefix}alert-border-width) solid var(--#{$prefix}alert-border-color);
@include border-radius(var(--#{$prefix}alert-border-radius));
}

10
site/src/content/docs/components/alerts.mdx
View File

@@ -14,9 +14,9 @@ Alerts are available for any length of text, as well as an optional close button
**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 code={getData('theme-colors').map((themeColor) => `<div class="alert alert-${themeColor.name}" role="alert">
A simple ${themeColor.name} alert—check it out!
</div>`)} />
<Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
A simple ${themeColor.name} alert—check it out!
</div>`)} />
<Callout name="warning-color-assistive-technologies" />
@@ -136,6 +136,7 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
<ScssDocs name="alert-variables" file="scss/_variables.scss" />
<<<<<<< HEAD
### Sass mixins
<DeprecatedIn version="5.3.0" />
@@ -143,6 +144,9 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
<ScssDocs name="alert-variant-mixin" file="scss/mixins/_alert.scss" removeIndentation={false} />
### Sass loops
=======
### Sass loop
>>>>>>> 29c34e4cd (Update Alerts variables and remove deprecation mentions)
Loop that generates the modifier classes with an overriding of CSS variables.