1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 08:34:08 +02:00

Update Alerts variables and remove deprecation mentions

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

View File

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

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