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

   1 @import "mw.rcfilters.mixins";
   2
   3 .mw-rcfilters-ui-capsuleItemWidget {
   4         &-popup {
   5                 padding: 1em;
   6         }
   7
   8         .oo-ui-popupWidget {
   9                 // Fix the positioning of the popup itself
  10                 margin-top: 1em;
  11         }
  12
  13         .oo-ui-labelElement-label {
  14                 vertical-align: middle;
  15         }
  16
  17         &-muted {
  18                 // Muted state
  19                 // We want everything muted except the circle
  20                 background-color: rgba( 255, 255, 255, @muted-opacity );
  21
  22                 .oo-ui-labelElement-label,
  23                 .oo-ui-buttonWidget {
  24                         opacity: @muted-opacity;
  25                 }
  26         }
  27
  28         &-highlight {
  29                 display: none;
  30                 padding-right: 0.5em;
  31
  32                 &-highlighted {
  33                         display: inline-block;
  34
  35                 }
  36
  37                 &[data-color="c1"] {
  38                         .mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~"0 0.5em 0 0" );
  39                 }
  40                 &[data-color="c2"] {
  41                         .mw-rcfilters-mixin-circle( @highlight-c2, 0.7em, ~"0 0.5em 0 0" );
  42                 }
  43                 &[data-color="c3"] {
  44                         .mw-rcfilters-mixin-circle( @highlight-c3, 0.7em, ~"0 0.5em 0 0" );
  45                 }
  46                 &[data-color="c4"] {
  47                         .mw-rcfilters-mixin-circle( @highlight-c4, 0.7em, ~"0 0.5em 0 0" );
  48                 }
  49                 &[data-color="c5"] {
  50                         .mw-rcfilters-mixin-circle( @highlight-c5, 0.7em, ~"0 0.5em 0 0" );
  51                 }
  52         }
  53 }