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