mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-16 18:58:45 +00:00
c22eab914e
Per T234570, browser support for animations is solid now so we no longer need to check for browser support. However, due to some browsers firing css transitions on page load (see https://bugs.chromium.org/p/chromium/issues/detail?id=332189), we still need JS to add this wrapping class after CSS transitions are loaded to prevent the transitions firing on page load for some components (DropDownList and MainMenu). See MainMenu.less or DropDownList.less for an example of how this is used. MobileFrontend adds an animations class too rn, but that will be removed in in I58f754740f7146f09c38220a7614285e57684924. Bug: T234570 Change-Id: If0cf7113b40f7217a22b66a8669138466af2cf5d
82 lines
2.5 KiB
Plaintext
82 lines
2.5 KiB
Plaintext
@import '../../minerva.less/minerva.variables.less';
|
|
@import '../../minerva.less/minerva.mixins.less';
|
|
|
|
.mw-notification,
|
|
.toast {
|
|
font-size: @font-size-minerva-small;
|
|
padding: 0.9em 1em;
|
|
background-color: @toastNotificationColor;
|
|
color: #fff;
|
|
margin: 0 10% 20px;
|
|
width: 80%;
|
|
text-align: center;
|
|
border-radius: @borderRadius;
|
|
|
|
// Toast notification error state
|
|
//
|
|
// When the toast message needs to convey that an error has occurred add the error class
|
|
//
|
|
// Markup:
|
|
// <div class="toast visible error">
|
|
// An error occurred.
|
|
// </div>
|
|
//
|
|
// Styleguide 3.2.
|
|
&.mw-notification-type-error {
|
|
// FIXME: Use `mobile.startup.images` to serve this file.
|
|
// Styling icon with the class mw-notification-type-error
|
|
// allows extensions ot use mw.notify( msg, 'error' ) and have those styled as errors.
|
|
// see https://github.com/search?l=JavaScript&q=org%3Awikimedia+mw.notify&type=Code
|
|
.background-image( 'images/error.svg' );
|
|
background-size: 24px;
|
|
background-position: 16px 50%;
|
|
background-repeat: no-repeat;
|
|
padding-left: 5%;
|
|
width: 75%;
|
|
border: 0; // FIXME: this is needed because a global .error adds border
|
|
}
|
|
|
|
a {
|
|
color: @skinContentBgColor;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.mw-notification-area {
|
|
z-index: @z-indexOverOverlay;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.mw-notification,
|
|
.drawer {
|
|
display: block;
|
|
visibility: hidden;
|
|
/* we can't determine the actual size of the drawer in CSS, so this is
|
|
* an estimate; it doesn't have to be exact because it's used only for
|
|
* the sliding animation, not for hiding the drawer */
|
|
.transform( translate( 0, 100px ) );
|
|
// counter translate with bottom to avoid empty blank space at the bottom
|
|
// especially on browsers that don't support position: fixed
|
|
bottom: 100px;
|
|
opacity: 0;
|
|
|
|
// Only apply the transition when an animation is needed (when drawer/toast hidden/shown)
|
|
&.animated, &.mw-notification-tag-toast {
|
|
// delay visibility transition to make other transitions visible
|
|
// http://fvsch.com/code/transition-fade/test5.html
|
|
// Use semi-colon if multiple arguments are needed.
|
|
// See https://stackoverflow.com/questions/11419741/less-css-mixins-with-variable-number-of-arguments
|
|
.transition-transform( @transition-duration-medium, opacity @transition-duration-medium, visibility 0s @transition-duration-medium, bottom 0s @transition-duration-medium; );
|
|
}
|
|
|
|
&.visible, &.mw-notification-visible {
|
|
bottom: 0;
|
|
.transition-transform( @transition-duration-medium, opacity @transition-duration-medium; );
|
|
visibility: visible;
|
|
opacity: 1;
|
|
.transform( translate( 0, 0 ) );
|
|
}
|
|
}
|