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

   1 @import 'mw.rcfilters.mixins';
   2
   3 .mw-rcfilters-ui-tagItemWidget {
   4         // Background and color of the capsule widget need a bit
   5         // more specificity to override OOUI internals
   6         &.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
   7                 // Muted state
   8                 background-color: #eaecf0;
   9                 border-color: #c8ccd1;
  10
  11                 .oo-ui-labelElement-label {
  12                         color: #72777d;
  13                 }
  14                 .oo-ui-buttonWidget {
  15                         opacity: @muted-opacity;
  16                 }
  17         }
  18
  19         &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
  20                 .oo-ui-labelElement-label {
  21                         color: #b32424;
  22                 }
  23         }
  24
  25         // OOUI classes require super-specificity in order to override
  26         // the white background
  27         // The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/
  28         // and will be available in the next OOUI release.
  29         .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
  30                 background-color: #eaf3ff;
  31                 border-color: #36c;
  32         }
  33
  34         &-popup-content {
  35                 padding: 0.5em;
  36                 color: #54595d;
  37         }
  38
  39         &.oo-ui-labelElement .oo-ui-labelElement-label {
  40                 cursor: pointer;
  41         }
  42
  43         &-highlight {
  44                 display: none;
  45                 margin-right: 0.5em;
  46                 width: 10px;
  47
  48                 &-highlighted {
  49                         display: inline-block;
  50                 }
  51
  52                 &:before {
  53                         content: '';
  54                         position: absolute;
  55                         display: block;
  56                         top: 50%;
  57                 }
  58
  59                 &[data-color='c1']:before {
  60                         .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
  61                 }
  62
  63                 &[data-color='c2']:before {
  64                         .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
  65                 }
  66
  67                 &[data-color='c3']:before {
  68                         .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
  69                 }
  70
  71                 &[data-color='c4']:before {
  72                         .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
  73                 }
  74
  75                 &[data-color='c5']:before {
  76                         .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
  77                 }
  78         }
  79 }