1 @import 'mw.rcfilters.mixins';
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 {
8 background-color: #eaecf0;
11 .oo-ui-labelElement-label {
15 opacity: @muted-opacity;
19 &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
20 .oo-ui-labelElement-label {
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;
39 &.oo-ui-labelElement .oo-ui-labelElement-label {
50 display: inline-block;
60 &[data-color='c1']:before {
61 .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
64 &[data-color='c2']:before {
65 .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
68 &[data-color='c3']:before {
69 .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
72 &[data-color='c4']:before {
73 .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
76 &[data-color='c5']:before {
77 .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );