mediawiki-skins-Vector/skinStyles/ext.echo.styles.alert.less
Jon Robson 68239ae344 Use Codex for button styles, start transitioning icons to use Codex icon mixins
Changes:
- mw-ui-button to cdx-button
- mw-ui-quiet to cdx-button--weight-quiet
- mw-ui-icon-element to cdx-button--icon-only
- mw-ui-icon to vector-icon
- mw-ui-icon-flush-right/left to vector-button-flush-right/left
- Removes $isSmallIcon param in Hooks.php

85 Visual Changes
- ~36 changes from minor pixel changes from the new button classes in the main menu, language button
- 22 from standardizing the padding of the TOC in page title
- ~10 changes from addition of .cdx-button to the TOC toggle buttons

PERFORMANCE:
This will result in an overall increase of 2.7kb of render blocking
CSS, 1kb will be reclaimed when
I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged.

Co-author: Bernard Wang <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00

36 lines
708 B
Plaintext

@import '../resources/common/variables.less';
/** Mixin for collapsing the Echo new messages alert */
.echo-alert-collapse() {
font-size: 12px;
position: absolute;
top: 100%;
right: 0;
}
.vector-user-links {
.vector-menu-content-list {
.mw-echo-alert {
padding: 0.2em 0.5em;
white-space: nowrap;
// Prevent alert message from pushing user links off screen
max-width: 270px;
overflow: hidden;
text-overflow: ellipsis;
}
@media ( max-width: @min-width-desktop-wide ) {
.mw-echo-alert {
.echo-alert-collapse();
}
}
}
}
// If the user link is wide, always collapse
.vector-user-links-wide .vector-menu-content-list {
.mw-echo-alert {
.echo-alert-collapse();
}
}