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 {
49 display: inline-block;
59 &[data-color='c1']:before {
60 .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
63 &[data-color='c2']:before {
64 .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
67 &[data-color='c3']:before {
68 .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
71 &[data-color='c4']:before {
72 .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
75 &[data-color='c5']:before {
76 .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );