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