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

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mw.rcfilters.variables.less';
   3 @import 'mediawiki.mixins.less';
   4
   5 .mw-rcfilters-ui-filterMenuOptionWidget {
   6         .mw-rcfilters-ui-filterMenuSectionOptionWidget ~ & {
   7                 padding-left: (12 / @font-size-system-ui / @font-size-vector);
   8                 padding-right: (12 / @font-size-system-ui / @font-size-vector);
   9         }
  10
  11         &.oo-ui-flaggedElement-muted {
  12                 &:not( .oo-ui-optionWidget-selected ) {
  13                         // Namespaces are muted 'the other way around' when they
  14                         // are also inverted, so if they are also selected, we
  15                         // should make sure the selected background is shown rather
  16                         // than the muted one
  17                         background-color: @background-color-interactive-subtle;
  18                 }
  19
  20                 .mw-rcfilters-ui-itemMenuOptionWidget-label-title,
  21                 .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
  22                         color: @color-subtle;
  23                 }
  24
  25                 &.oo-ui-optionWidget-highlighted {
  26                         // Copying over styles from OOUI, since it must
  27                         // override our 'muted' state
  28                         background-color: @background-color-interactive;
  29                         color: @color-emphasized;
  30                 }
  31         }
  32
  33         // Override OOUI's pretty specific
  34         // `.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header`
  35         // selector
  36         .mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
  37                 padding-top: 0;
  38                 padding-bottom: 0;
  39                 padding-left: (12 / @font-size-system-ui / @font-size-vector);
  40         }
  41 }