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 @@ - +