Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alerts: Change warning icon #2240

Merged
merged 6 commits into from
Sep 19, 2023
Merged

Alerts: Change warning icon #2240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b47a8a
First draft
louismaximepiton Sep 13, 2023
98f8843
Fix CI + second idea handling many cases
louismaximepiton Sep 14, 2023
a1903c4
Migration note
louismaximepiton Sep 14, 2023
e800175
Version with the svg only
louismaximepiton Sep 14, 2023
12224b0
Merge branch 'main' into main-lmp-alert-warning
julien-deramond Sep 19, 2023
7507bee
Fix feedback
julien-deramond Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .bundlewatch.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
26 changes: 21 additions & 5 deletions scss/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
}
}

Expand Down
7 changes: 5 additions & 2 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ $burger-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/20
$burger-icon-small: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='#{$black}'><path d='M2 19h21v-2H2v2Zm0-6h21v-2H2v2Zm0-6h21V5H2v2Z'/></svg>") !default;
$success-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$success}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
$info-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$info}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm0 14.7a11 11 0 1 1 0 22 11 11 0 0 1 0-22zM47.8 44.1h25.7v46.2c0 4.7 1.3 6.5 1.8 7.2.8 1 2.3 1.5 4.8 1.6h.8v3.8H47.8v-3.7h.8c2.3-.1 4-.8 5-2 .4-.4 1-2 1-7V57c0-4.8-.6-6.6-1.2-7.3-.8-1-2.4-1.5-4.9-1.6h-.7V44z'/></svg>") !default;
$warning-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='#{$warning}' d='M15 0a15 15 0 1 0 0 30 15 15 0 0 0 0-30zm.15 5.39h.01c1.12 0 2 .95 1.92 2.06l-.63 10.43c0 .7-.58.97-1.29.97-.72 0-1.28-.27-1.28-.97l-.63-10.46c-.06-1.09.8-2.01 1.9-2.03zm-.3 15.33c.11 0 .21 0 .31.02 2.19.35 2.19 3.5 0 3.84-2.77.44-3.1-3.86-.3-3.86z'/></svg>") !default;
$warning-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='75 125 850 750'><path fill='#{$warning}' d='M828.111 875H170.889A93.71 93.71 0 0 1 89.8 734.017l-.008-.005.772-1.321.036-.062 327.8-561.117h.008a93.94 93.94 0 0 1 162.182 0h.008l328.612 562.5-.009.005A93.709 93.709 0 0 1 828.111 875Z'/><path fill='#000' d='M500.5 775a47.5 47.5 0 1 1 47.507-47.5A47.5 47.5 0 0 1 500.5 775Zm47.368-424.038-15.7 258.121c-.009 17.482-14.185 24.05-31.671 24.05s-31.662-6.568-31.671-24.05l-15.74-258.716c-.057-.949-.094-1.9-.094-2.867a47.507 47.507 0 0 1 95.014 0 47.782 47.782 0 0 1-.138 3.462Z'/></svg>") !default;
$danger-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$danger}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>") !default;
$add-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path fill='currentColor' d='M14 6H8V0H6v6H0v2h6v6h2V8h6V6z'/></svg>") !default;
$remove-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 2'><path fill='currentColor' d='M0 0h14v2H0z'/></svg>") !default;
Expand Down Expand Up @@ -1952,7 +1952,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;
Expand Down
2 changes: 1 addition & 1 deletion scss/mixins/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

// Boosted mod
.alert-icon::before {
background-image: $background-image;
mask-image: $background-image;
}
// End mod

Expand Down
2 changes: 1 addition & 1 deletion site/static/docs/5.3/assets/img/boosted-sprite.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.