mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/toast.less
libraryupgrader 842a91590a build: Updating npm dependencies
* eslint-config-wikimedia: 0.27.0 → 0.28.2
  The following rules are failing and were disabled:
  * tests/selenium:
    * implicit-arrow-linebreak
    * no-mixed-spaces-and-tabs
* grunt-banana-checker: 0.11.1 → 0.13.0
* stylelint-config-wikimedia: 0.16.1 → 0.17.2
  The following rules no longer exist and were removed:
  * stylistic/selector-list-comma-newline-after
* braces: 3.0.2 → 3.0.3
  * https://github.com/advisories/GHSA-grv7-fg5c-xmjg

Change-Id: Ia94454c1da778f241085714e1601a0233d547570
2024-08-01 15:27:33 +01:00

70 lines
1.7 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: @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: @color-inverted-fixed;
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 );
}
}