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 .oo-ui-labelElement-label {
  14                 vertical-align: middle;
  15                 cursor: pointer;
  16         }
  17
  18         &-muted {
  19                 // Muted state
  20                 // We want everything muted except the circle
  21                 background-color: rgba( 255, 255, 255, @muted-opacity );
  22
  23                 .oo-ui-labelElement-label,
  24                 .oo-ui-buttonWidget {
  25                         opacity: @muted-opacity;
  26                 }
  27         }
  28
  29         &-highlight {
  30                 display: none;
  31                 padding-right: 0.5em;
  32
  33                 &-highlighted {
  34                         display: inline-block;
  35
  36                 }
  37
  38                 &[data-color="c1"] {
  39                         .mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~"0 0.5em 0 0" );
  40                 }
  41                 &[data-color="c2"] {
  42                         .mw-rcfilters-mixin-circle( @highlight-c2, 0.7em, ~"0 0.5em 0 0" );
  43                 }
  44                 &[data-color="c3"] {
  45                         .mw-rcfilters-mixin-circle( @highlight-c3, 0.7em, ~"0 0.5em 0 0" );
  46                 }
  47                 &[data-color="c4"] {
  48                         .mw-rcfilters-mixin-circle( @highlight-c4, 0.7em, ~"0 0.5em 0 0" );
  49                 }
  50                 &[data-color="c5"] {
  51                         .mw-rcfilters-mixin-circle( @highlight-c5, 0.7em, ~"0 0.5em 0 0" );
  52                 }
  53         }
  54 }