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

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