mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/toast.less

69 lines
1.7 KiB
Plaintext
Raw Normal View History

@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: @background-color-toast-notification;
// the text should be white in both modes
color: @color-inverted-fixed;
margin: 0 10% 20px;
width: 80%;
text-align: center;
border-radius: @border-radius-base;
// 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>
&.mw-notification-type-error {
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
}
.oo-ui-iconElement-icon {
// Fix icon placement in post-edit notifications (T336001)
display: block;
}
a {
color: var( --color-inverted );
text-decoration: underline;
}
}
.mw-notification-area {
z-index: @z-index-over-overlay;
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 );
bottom: 0;
opacity: 0;
transition: transform @transition-duration-medium, opacity @transition-duration-medium, visibility @transition-duration-medium;
&.visible, &.mw-notification-visible {
visibility: visible;
opacity: 1;
transform: translate( 0, 0 );
}
}