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                         .oo-ui-iconElement-icon {
  13                                 width: 2em;
  14                                 height: 2em;
  15                         }
  16
  17                         &-none {
  18                                 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
  19
  20                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  21                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  22                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  23                                         background-color: @highlight-none;
  24                                 }
  25                         }
  26                         &-c1 {
  27                                 .mw-rcfilters-mixin-circle( @highlight-c1 );
  28
  29                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  30                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  31                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  32                                         background-color: @highlight-c1;
  33                                 }
  34                         }
  35                         &-c2 {
  36                                 .mw-rcfilters-mixin-circle( @highlight-c2 );
  37
  38                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  39                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  40                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  41                                         background-color: @highlight-c2;
  42                                 }
  43                         }
  44                         &-c3 {
  45                                 .mw-rcfilters-mixin-circle( @highlight-c3 );
  46
  47                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  48                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  49                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  50                                         background-color: @highlight-c3;
  51                                 }
  52                         }
  53                         &-c4 {
  54                                 .mw-rcfilters-mixin-circle( @highlight-c4 );
  55
  56                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  57                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  58                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  59                                         background-color: @highlight-c4;
  60                                 }
  61                         }
  62                         &-c5 {
  63                                 .mw-rcfilters-mixin-circle( @highlight-c5 );
  64
  65                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  66                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  67                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  68                                         background-color: @highlight-c5;
  69                                 }
  70                         }
  71                 }
  72         }
  73 }