Merge "Fix tabindex applied twice on RC top section"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.ui.FilterMenuHeaderWidget.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
index d9c42ba..4e04068 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
@@ -1,16 +1,37 @@
 @import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
 
 .mw-rcfilters-ui-filterMenuHeaderWidget {
        &-title {
+               display: inline-block;
                font-size: 1.2em;
-               padding: 0.75em 0.5em;
-               // TODO: Unify colors with official design palette
-               color: #54595d;
+               padding: 0.75em 0 0.75em 0.5em;
+               color: @colorGray5;
+       }
+
+       &-helpIcon {
+               position: absolute;
+               top: 50%;
+               .transform( translateY( -50% ) );
+
+               // HACK: Following overrides help icon size and centers it
+               &.oo-ui-widget.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
+                       box-sizing: content-box;
+                       padding: 0;
+
+                       .oo-ui-icon-help {
+                               min-width: initial;
+                               min-height: initial;
+                               width: 1.4em;
+                               height: 1.4em;
+                               margin-top: 0.2375em;
+                       }
+               }
        }
 
        &-header {
-               border-bottom: 1px solid #c8ccd1;
-               background: #f8f9fa;
+               border-bottom: 1px solid @colorGray12;
+               background-color: @colorGray15;
 
                &-invert,
                &-highlight {
@@ -29,6 +50,7 @@
                }
 
                &-title {
+                       position: relative;
                        width: 100%;
                        vertical-align: middle;
                }