mediawiki-extensions-Echo/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
Ed Sanders cfa130cc13 Use position:sticky for toolbar floating
Avoids any scroll-based DOM changes which slow down scroll events.
Removes floating in browsers without sticky support (mostly IE).

Change-Id: If75e2a90d76644296fe3db5ef8bd9b26de4e7b0c
2017-10-17 15:22:26 +01:00

92 lines
1.5 KiB
Plaintext

@import '../echo.variables';
.mw-echo-ui-notificationsInboxWidget {
display: table;
width: 100%;
max-width: @specialpage-width;
position: relative;
&-row {
display: table-row;
width: 100%;
}
&-toolbarWrapper {
height: 3.5em;
position: sticky;
padding-top: 0.5em;
margin-top: -0.5em;
top: 0;
z-index: 2;
background: #fff;
box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
}
&-cell {
display: table-cell;
vertical-align: middle;
&-placeholder {
display: table-cell;
width: 100%;
}
}
&-sidebar {
width: @specialpage-sidebar-width;
padding-right: 1em;
vertical-align: top;
@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
// Hide the sidebar for small screens
display: none;
}
}
&-main {
vertical-align: top;
&-toolbar {
&-top {
display: table;
width: 100%;
}
&-settings {
padding-left: 1em;
}
}
}
@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
// Override table-layout for the top toolbar so we get
// filters and pagination under one another
&-main {
&-toolbar {
&-top {
display: block;
margin-bottom: 1em;
.mw-echo-ui-notificationsInboxWidget-row {
display: block;
text-align: center;
}
}
&-readState {
display: inline-block;
}
&-settings,
&-pagination {
display: inline-block;
margin-top: 1em;
}
&-settings {
.oo-ui-popupWidget-popup {
text-align: left;
}
}
}
}
&-toolbarWrapper {
height: 7em;
}
}
}