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

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