1 @import 'mediawiki.ui/variables';
2 @import 'mw.rcfilters.mixins';
3 @import 'mw.rcfilters.variables';
5 @size-circle: 20 / @font-size-system-ui / @font-size-vector;
6 @margin-circle: 5 / @font-size-system-ui / @font-size-vector;
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 {
13 background-color: @colorGray14;
14 border-color: @colorGray12;
16 .oo-ui-labelElement-label {
21 opacity: @muted-opacity;
25 &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
26 .oo-ui-labelElement-label {
27 color: @colorDestructiveActive;
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;
45 &.oo-ui-labelElement:not( .oo-ui-tagItemWidget-fixed ) .oo-ui-labelElement-label {
52 margin-right: @margin-circle;
55 display: inline-block;
63 .mw-rcfilters-circle( 10px, 10px, ~'-5px 0.5em 0 0' );
66 &[ data-color='c1' ]:before {
67 .mw-rcfilters-circle-color( @highlight-c1 );
70 &[ data-color='c2' ]:before {
71 .mw-rcfilters-circle-color( @highlight-c2 );
74 &[ data-color='c3' ]:before {
75 .mw-rcfilters-circle-color( @highlight-c3 );
78 &[ data-color='c4' ]:before {
79 .mw-rcfilters-circle-color( @highlight-c4 );
82 &[ data-color='c5' ]:before {
83 .mw-rcfilters-circle-color( @highlight-c5 );