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

   1 @import 'mw.rcfilters.mixins';
   2
   3 .mw-rcfilters-ui-capsuleItemWidget {
   4         background-color: #fff;
   5         border-color: #979797;
   6         color: #222;
   7
   8         &-muted {
   9                 // Muted state
  10                 background-color: #eaecf0;
  11                 border-color: #c8ccd1;
  12                 .oo-ui-labelElement-label {
  13                         color: #72777d;
  14                 }
  15
  16                 .oo-ui-buttonWidget {
  17                         opacity: @muted-opacity;
  18                 }
  19         }
  20
  21         &-selected {
  22                 background-color: #eaf3ff;
  23                 border-color: #36c;
  24         }
  25
  26         &-popup-content {
  27                 padding: 0.5em;
  28                 color: #54595d;
  29         }
  30
  31         &.oo-ui-labelElement .oo-ui-labelElement-label {
  32                 vertical-align: middle;
  33                 cursor: pointer;
  34         }
  35
  36         &-highlight {
  37                 display: none;
  38                 padding-right: 0.5em;
  39
  40                 &-highlighted {
  41                         display: inline-block;
  42
  43                 }
  44
  45                 &[data-color='c1'] {
  46                         .mw-rcfilters-mixin-circle( @highlight-c1, 0.7em, ~'0 0.5em 0 0' );
  47                 }
  48                 &[data-color='c2'] {
  49                         .mw-rcfilters-mixin-circle( @highlight-c2, 0.7em, ~'0 0.5em 0 0' );
  50                 }
  51                 &[data-color='c3'] {
  52                         .mw-rcfilters-mixin-circle( @highlight-c3, 0.7em, ~'0 0.5em 0 0' );
  53                 }
  54                 &[data-color='c4'] {
  55                         .mw-rcfilters-mixin-circle( @highlight-c4, 0.7em, ~'0 0.5em 0 0' );
  56                 }
  57                 &[data-color='c5'] {
  58                         .mw-rcfilters-mixin-circle( @highlight-c5, 0.7em, ~'0 0.5em 0 0' );
  59                 }
  60         }
  61 }