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

Jump to bottom

XWIKI-22458: Message boxes variant style does not match initial design #3527

Merged
merged 1 commit into from
Oct 8, 2024
Merged

XWIKI-22458: Message boxes variant style does not match initial design #3527

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 14 additions & 11 deletions ...kin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/messages.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,36 @@ span.successmessage, span.errormessage, span.warningmessage, span.infomessage {
span.box, span.successmessage, span.errormessage, span.warningmessage, span.infomessage {
padding: 0 floor(@font-size-base * 0.2);
box-shadow: none;
& > img {
& > .icon-block > img {
// Style the silk icons
margin: 0 .6rem 0 .2rem;
vertical-align: sub;
}

& > span.fa {
& > .icon-block > span.fa {
// Style the font awesome icons
margin: 0 .6rem 0 .2rem;
}
}

// Used by: message boxes
div.successmessage, div.errormessage, div.warningmessage, div.infomessage {
// In case the structure of the div is not the same as the one from the macro
// we do not add those new style rules, in order to not break the looks of the content inside.
// The selector below relies on the class introduced in the IconProvider at
// the same time as the new style for the message boxes.
// This makes it so that this new style will never apply on an older hardcoded box.
&:has(>.icon-block) {
display: flex;
gap: 2rem;
justify-content: left;
align-items: baseline;
}
padding: 2rem;
border: none;
border-left: 4px solid;
box-shadow: none;

& > .icon-block {
// Ensure to let some space between the icon of the message and the content.
padding-right: 2rem;
// We want the icon to remain on the left. Note that we don't use display: flex for now since it's causing issues
// when the box contains some specific content such as em
float: left;
}


& > img {
// Improve alignment for silk icons
align-self: flex-start;
Expand Down
Loading