mediawiki-extensions-Echo/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less
Moriel Schottlender c649c29e7d Generalize the SubGroupListWidget
Allow for the widget to have a mark-as-read button to its individual
groups, as well as change the event listening from 'remove' to 'discard'

The problem with 'remove' event is that it is triggered when an item
is either intentionally removed from the list *and* when an item is
changing its position in the list (move event includes 'remove' and
then 'add' event)

If we listen to 'remove' events we will get both cases, which is
unhelpful. Instead, a new event - 'discard' - was introduced so
we are certain it is used with the clear intention of removing the
item completely.

Change-Id: Ia08720bf4c547fa41edf62331eeb1a45ff4965b7
2016-05-26 18:44:16 +00:00

52 lines
1.3 KiB
Plaintext

@import '../echo.variables';
.mw-echo-ui-crossWikiNotificationItemWidget {
// Remove the padding that ItemWidget puts in
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
> .mw-echo-ui-notificationItemWidget {
// Compensate for the 0.8em of left/right padding and 0.5em of bottom padding that we removed
&-icon {
margin-left: 0.8em;
}
&-content {
margin-bottom: 1em;
padding-right: 0.8em;
padding-left: ~"calc(30px + 1.6em)"; // 30px+0.8em from ItemWidget, plus 0.8em
}
}
&-separator {
display: block;
position: absolute;
bottom: 0.4em;
width: 100%;
border-bottom: 1px #eeeeee solid;
}
&-group {
cursor: default;
padding: @bundle-group-padding;
background-color: #f8f8f8;
-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 0px 0px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 0px 0px rgba(0,0,0,0.05);
box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.05), inset 0px 2px 0px 0px rgba(0,0,0,0.05);
border-bottom: 1px #dddddd solid;
margin-bottom: 0.4em;
}
.mw-echo-ui-subGroupListWidget-header {
margin-bottom: @bundle-group-padding;
&-row-title {
// Override OOUI's line height for labels
line-height: 1em !important;
font-weight: bold;
color: #666666;
}
}
}