resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3
   4 .mw-rcfilters-ui-filterMenuHeaderWidget {
   5         &-title {
   6                 display: inline-block;
   7                 font-size: 1.2em;
   8                 padding: 0.75em 0 0.75em 0.5em;
   9                 color: @colorGray5;
  10         }
  11
  12         &-helpIcon {
  13                 position: absolute;
  14                 top: 50%;
  15                 .transform( translateY( -50% ) );
  16
  17                 // HACK: Following overrides help icon size and centers it
  18                 &.oo-ui-widget.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  19                         box-sizing: content-box;
  20                         padding: 0;
  21
  22                         .oo-ui-icon-help {
  23                                 min-width: initial;
  24                                 min-height: initial;
  25                                 width: 1.4em;
  26                                 height: 1.4em;
  27                                 margin-top: 0.2375em;
  28                         }
  29                 }
  30         }
  31
  32         &-header {
  33                 border-bottom: 1px solid @colorGray12;
  34                 background-color: @colorGray15;
  35
  36                 &-invert,
  37                 &-highlight {
  38                         width: 1em;
  39                         vertical-align: middle;
  40                         // Using the same padding that the filter item
  41                         // uses, so the button is aligned with the highlight
  42                         // buttons for the filters
  43                         padding-right: 0.5em;
  44                 }
  45
  46                 &-back {
  47                         width: 1em;
  48                         vertical-align: middle;
  49                         padding-left: 0.5em;
  50                 }
  51
  52                 &-title {
  53                         position: relative;
  54                         width: 100%;
  55                         vertical-align: middle;
  56                 }
  57         }
  58 }