mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-28 09:40:41 +00:00
33655c75e7
Replacing colors with ones from the overhauled WCAG 2.0 level AA compliant color palette https://phabricator.wikimedia.org/M82 Applying Less variables where possible for better flexibility in future design maintenance. Also introducing some variables from WikimediaUI Base. Bug: T147365 Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699 Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
91 lines
1.9 KiB
Plaintext
91 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: @color-base !important;
|
|
// Set max-width so buttons are truncated
|
|
max-width: 15em;
|
|
|
|
&-description {
|
|
color: #666 !important;
|
|
}
|
|
}
|
|
|
|
&-prioritized {
|
|
.mw-echo-ui-mixin-hover-opacity();
|
|
display: inline-block;
|
|
padding: 0;
|
|
}
|
|
|
|
&-dynamic-action {
|
|
padding: 1.5em;
|
|
|
|
&:hover {
|
|
background-color: @background-color-base;
|
|
}
|
|
|
|
.mw-echo-ui-menuItemWidget-content {
|
|
&-description {
|
|
padding-top: 1em;
|
|
}
|
|
|
|
span.oo-ui-labelElement-label {
|
|
white-space: normal;
|
|
overflow: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Correct for when inside the popup menu
|
|
.mw-echo-ui-actionMenuPopupWidget-menu & {
|
|
display: block;
|
|
padding: 0.7em;
|
|
|
|
&:hover {
|
|
background-color: #eaecf0;
|
|
}
|
|
|
|
&-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;
|
|
}
|
|
}
|
|
}
|
|
}
|