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 .oo-ui-tagMultiselectWidget-handle &-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                 height: 100%;
  47                 width: 10px;
  48
  49                 &-highlighted {
  50                         display: inline-block;
  51                 }
  52
  53                 &:before {
  54                         content: '';
  55                         position: absolute;
  56                         display: block;
  57                         top: 50%;
  58                 }
  59
  60                 &[data-color='c1']:before {
  61                         .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
  62                 }
  63
  64                 &[data-color='c2']:before {
  65                         .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
  66                 }
  67
  68                 &[data-color='c3']:before {
  69                         .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
  70                 }
  71
  72                 &[data-color='c4']:before {
  73                         .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
  74                 }
  75
  76                 &[data-color='c5']:before {
  77                         .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
  78                 }
  79         }
  80 }