resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less

   1 @import 'mw.rcfilters.mixins';
   2
   3 .mw-rcfilters-ui-highlightColorPickerWidget {
   4         &-label {
   5                 display: block;
   6                 font-weight: bold;
   7                 font-size: 1.2em;
   8         }
   9
  10         &-buttonSelect {
  11                 &-color {
  12                         // Make the rule much more specific to override OOUI
  13                         .oo-ui-iconElement-icon.oo-ui-icon-check {
  14                                 // Override OOUI icon dimensions
  15                                 // The parent is 2em with 0.5em margin
  16                                 // (see mw-rcfilters-mixin-circle below)
  17                                 // so here we want 2em - 0.5em = 1.5em
  18                                 width: 1.5em;
  19                                 height: 1.5em;
  20                                 // By eye, this is centered horizontally for the color circle
  21                                 margin-left: -0.1em;
  22                         }
  23
  24                         &-none {
  25                                 .oo-ui-iconElement-icon.oo-ui-icon-check {
  26                                         // By eye, this is centered horizontally for the white circle
  27                                         margin-left: -0.2em;
  28                                 }
  29
  30                                 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
  31                                 // Override border to dashed
  32                                 border: 1px dashed #565656;
  33
  34                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  35                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  36                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  37                                         background-color: @highlight-none;
  38                                 }
  39                         }
  40                         &-c1 {
  41                                 .mw-rcfilters-mixin-circle( @highlight-c1 );
  42
  43                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  44                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  45                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  46                                         background-color: @highlight-c1;
  47                                 }
  48                         }
  49                         &-c2 {
  50                                 .mw-rcfilters-mixin-circle( @highlight-c2 );
  51
  52                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  53                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  54                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  55                                         background-color: @highlight-c2;
  56                                 }
  57                         }
  58                         &-c3 {
  59                                 .mw-rcfilters-mixin-circle( @highlight-c3 );
  60
  61                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  62                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  63                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  64                                         background-color: @highlight-c3;
  65                                 }
  66                         }
  67                         &-c4 {
  68                                 .mw-rcfilters-mixin-circle( @highlight-c4 );
  69
  70                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  71                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  72                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  73                                         background-color: @highlight-c4;
  74                                 }
  75                         }
  76                         &-c5 {
  77                                 .mw-rcfilters-mixin-circle( @highlight-c5 );
  78
  79                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  80                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  81                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  82                                         background-color: @highlight-c5;
  83                                 }
  84                         }
  85                 }
  86         }
  87 }