mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/drawers.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

49 lines
1.1 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
.drawer {
background-color: @background-color-interactive-subtle;
// needed for Android 4.x
position: absolute;
}
// Basic toast notification
//
// Toast must have visible class to be shown
//
// Markup:
// <div class="toast visible">
// Notification for user.
// </div>
// <div class="mw-notification-area">
// <div class="mw-notification">Notification 1 for user.</div>
// <div class="mw-notification">Notification 2 for user.</div>
// </div>
.mw-notification-area,
.toast,
.drawer {
box-sizing: border-box;
position: fixed;
bottom: 0;
left: 0;
right: 0;
// don't allow notifications to cover the entire screen
max-height: 50%;
// needs to be higher than for overlays to show on top of overlays
z-index: @z-index-over-overlay;
}
.mw-notification,
.toast,
.drawer {
box-sizing: border-box;
box-shadow: @box-shadow-drop-xx-large;
word-wrap: break-word;
// don't use visibility: hidden in old browsers that don't support animations
display: none;
&.visible,
&.mw-notification-visible {
display: block;
}
}