mediawiki-extensions-Echo/modules/styles/mw.echo.ui.MenuItemWidget.less
Moriel Schottlender 480ce92bd8 Add dynamic secondary actions to notification items
Allow extensions to add dynamic actions that perform some
API request and display a confirmation message.

Bug: T132975
Change-Id: Ib16d57c3f1a11a9749564c6e2112bf1ca32c55e8
2016-08-22 16:04:48 -07:00

92 lines
1.9 KiB
Plaintext

@import '../echo.variables';
@import '../echo.mixins';
.mw-echo-ui-menuItemWidget {
&-icon {
display: inline-block;
// We have to override oojs-ui's width/height, which uses
// a very specific selector
width: 1.5em !important;
height: 1.5em !important;
min-width: 1.5em !important;
min-height: 1.5em !important;
position: absolute;
top: 0;
}
&-content {
display: inline-block;
margin-left: 1.5em + 0.5em; // Icon width + 0.5em spacing
// We have to override oojs-ui's color, which uses
// a very specific selector
font-weight: normal !important;
color: #333333 !important;
// Set max-width so buttons are truncated
max-width: 15em;
&-description {
color: #666666 !important;
}
}
&-prioritized {
.mw-echo-ui-mixin-hover-opacity();
display: inline-block;
padding: 0;
}
&-dynamic-action {
padding: 1.5em;
&:hover {
background: white;
}
.mw-echo-ui-menuItemWidget-content span.oo-ui-labelElement-label {
white-space: normal;
overflow: visible;
}
.mw-echo-ui-menuItemWidget-content {
&-description {
padding-top: 1em;
}
}
}
// Correct for when inside the popup menu
.mw-echo-ui-actionMenuPopupWidget-menu & {
display: block;
padding: 0.7em;
&:hover {
background: #eeeeee;
}
&-icon {
// The icon should be 15px, which is 1.1em. However,
// ooui icons are surrounded by whitespace. In this case,
// the whitespace is about 6px out of the original 24px
// so the non-whitespace dimensions are 3/4 of the total.
// So to compensate, the new size should be 1.1em*4/3 = 1.4em
width: 1.4em !important;
height: 1.4em !important;
// Take into account the padding and subtract half of
// the whitespace adjustment of the icon
top: 0.7em - 0.3em / 2;
}
&-content {
margin-left: 1.4em + 0.7em; // Icon width + 0.7em spacing
font-weight: bold !important;
span.oo-ui-labelElement-label {
line-height: 1em;
}
}
}
}