1 @import 'mediawiki.ui/variables';
2 @import 'mw.rcfilters.mixins';
4 .mw-rcfilters-ui-highlightColorPickerWidget {
13 // Override OOUI definition from padded popup; the definition
14 // forces the first-child to be margin-top:0; which overrides
15 // our definitions below where margin is 0.5em.
16 // We set up the margin-top as 0.5em for all circles so we get
17 // a consistent result
18 &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget {
22 // Make the rule much more specific to override OOUI
23 .oo-ui-iconElement-icon.oo-ui-icon-check {
24 // Override OOUI icon dimensions
25 // The parent is 2em with 0.5em margin
26 // (see mw-rcfilters-mixin-circle below)
27 // so here we want 2em - 0.5em = 1.5em
30 // By eye, this is centered horizontally for the color circle
35 .oo-ui-iconElement-icon.oo-ui-icon-check {
36 // By eye, this is centered horizontally for the white circle
40 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
41 // Override border to dashed
42 border: 1px dashed @colorGray5;
44 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
45 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
46 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
47 background-color: @highlight-none;
51 .mw-rcfilters-mixin-circle( @highlight-c1 );
53 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
54 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
55 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
56 background-color: @highlight-c1;
60 .mw-rcfilters-mixin-circle( @highlight-c2 );
62 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
63 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
64 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
65 background-color: @highlight-c2;
69 .mw-rcfilters-mixin-circle( @highlight-c3 );
71 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
72 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
73 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
74 background-color: @highlight-c3;
78 .mw-rcfilters-mixin-circle( @highlight-c4 );
80 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
81 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
82 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
83 background-color: @highlight-c4;
87 .mw-rcfilters-mixin-circle( @highlight-c5 );
89 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
90 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
91 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
92 background-color: @highlight-c5;