diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 8632c5f9d6..e2ea64a1ec 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
},
{
"path": "./dist/css/boosted.css",
- "maxSize": "43.5 kB"
+ "maxSize": "43.75 kB"
},
{
"path": "./dist/css/boosted.min.css",
- "maxSize": "40.5 kB"
+ "maxSize": "40.75 kB"
},
{
"path": "./dist/js/boosted.bundle.js",
diff --git a/scss/_alert.scss b/scss/_alert.scss
index e45042a4ee..16cdb7b690 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -81,7 +81,22 @@
--#{$prefix}alert-color: var(--#{$prefix}body-color); // Boosted mod: instead of `var(--#{$prefix}#{$state}-text-emphasis)`
--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
// Boosted mod: no `--#{$prefix}alert-link-color`
- --#{$prefix}alert-icon-bg-image: #{map-get($alert-icons, $state)}; // Boosted mod
+ // Boosted mod
+ @if type-of(map-get($alert-icons, $state)) == "list" {
+ --#{$prefix}alert-icon-bg-image: #{nth(map-get($alert-icons, $state), 1)};
+
+ .alert-icon::before {
+ background: var(--#{$prefix}alert-icon-bg-image) no-repeat top left / var(--#{$prefix}alert-logo-size);
+
+ /* rtl:raw:
+ background-position: top right;
+ */
+ mask: none;
+ }
+ } @else {
+ --#{$prefix}alert-icon-bg-image: #{map-get($alert-icons, $state)};
+ }
+ // End mod
}
}
// scss-docs-end alert-modifiers
@@ -118,13 +133,14 @@
order: -1;
height: var(--#{$prefix}alert-logo-size);
content: "";
- background-image: var(--#{$prefix}alert-icon-bg-image);
- background-repeat: no-repeat;
+ background-color: var(--#{$prefix}alert-border-color);
+ mask-image: var(--#{$prefix}alert-icon-bg-image);
+ mask-repeat: no-repeat;
/* rtl:raw:
- background-position: top right;
+ mask-position: top right;
*/
- background-size: var(--#{$prefix}alert-logo-size);
+ mask-size: var(--#{$prefix}alert-logo-size);
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index e8959e18d7..19fbe10c2a 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -395,7 +395,7 @@ $burger-icon: url("data:image/svg+xml,") !default;
$success-icon: url("data:image/svg+xml,") !default;
$info-icon: url("data:image/svg+xml,") !default;
-$warning-icon: url("data:image/svg+xml,") !default;
+$warning-icon: url("data:image/svg+xml,") !default;
$danger-icon: url("data:image/svg+xml,") !default;
$add-icon: url("data:image/svg+xml,") !default;
$remove-icon: url("data:image/svg+xml,") !default;
@@ -1954,7 +1954,10 @@ $alert-padding-sm: $spacer * .5 !default;
$alert-icons: (
"success": var(--#{$prefix}success-icon),
"info": escape-svg($info-icon),
- "warning": escape-svg($warning-icon),
+ // Create a list for this warning icon to indicate that the mask needs to be replaced by a background image
+ // Be aware that the background of the icon won't change anymore
+ // Note: `true` parameter is only used to create a list, it could be empty (e.g. `(escape-svg($warning-icon),)`)
+ "warning": (escape-svg($warning-icon), true),
"danger": var(--#{$prefix}error-icon)
) !default;
$alert-logo-size: add($spacer * .5, 1rem) !default;
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index 726d823b6e..01b1363533 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -9,7 +9,7 @@
// Boosted mod
.alert-icon::before {
- background-image: $background-image;
+ mask-image: $background-image;
}
// End mod
diff --git a/site/static/docs/5.3/assets/img/boosted-sprite.svg b/site/static/docs/5.3/assets/img/boosted-sprite.svg
index 078135e076..2a6e5c5221 100644
--- a/site/static/docs/5.3/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.3/assets/img/boosted-sprite.svg
@@ -6,7 +6,7 @@
-
+