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                                 // Override border to dashed
  20                                 border: 1px dashed #565656;
  21
  22                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  23                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  24                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  25                                         background-color: @highlight-none;
  26                                 }
  27                         }
  28                         &-c1 {
  29                                 .mw-rcfilters-mixin-circle( @highlight-c1 );
  30
  31                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  32                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  33                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  34                                         background-color: @highlight-c1;
  35                                 }
  36                         }
  37                         &-c2 {
  38                                 .mw-rcfilters-mixin-circle( @highlight-c2 );
  39
  40                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  41                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  42                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  43                                         background-color: @highlight-c2;
  44                                 }
  45                         }
  46                         &-c3 {
  47                                 .mw-rcfilters-mixin-circle( @highlight-c3 );
  48
  49                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  50                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  51                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  52                                         background-color: @highlight-c3;
  53                                 }
  54                         }
  55                         &-c4 {
  56                                 .mw-rcfilters-mixin-circle( @highlight-c4 );
  57
  58                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  59                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  60                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  61                                         background-color: @highlight-c4;
  62                                 }
  63                         }
  64                         &-c5 {
  65                                 .mw-rcfilters-mixin-circle( @highlight-c5 );
  66
  67                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  68                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  69                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  70                                         background-color: @highlight-c5;
  71                                 }
  72                         }
  73                 }
  74         }
  75 }