mediawiki-skins-MinervaNeue/skinStyles/mobile.startup/drawers.less
Jon Robson ba64c4168d Complete transition to Codex color palettes
* Update mediawiki.skin.variables to point non-Codex tokens to
Codex token equivalents
* Replace box-shadow-color-drawer with @box-shadow-color-base
* Leave FIXME comments for migrating the last two CSS variables
* Replace direct access to CSS variable with @color-link-new
design token instead since the former may no longer exist.

Bug: T360845
Change-Id: Ie531044d320cde50689064f10ff00db5adcaf859
2024-04-29 14:16:36 -07:00

48 lines
1.1 KiB
Plaintext

@import '../../minerva.less/minerva.variables.less';
.drawer {
background-color: var( --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: 0 -1px 8px 0 @box-shadow-color-base;
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;
}
}