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                         // Override OOUI definition from padded popup; the definition
  13                         // forces the first-child to be margin-top:0; which overrides
  14                         // our definitions below where margin is 0.5em.
  15                         // We set up the margin-top as 0.5em for all circles so we get
  16                         // a consistent result
  17                         &.oo-ui-widget-enabled.oo-ui-optionWidget.oo-ui-buttonElement.oo-ui-buttonElement-frameless.oo-ui-buttonOptionWidget {
  18                                 margin-top: 0.5em;
  19                         }
  20
  21                         // Make the rule much more specific to override OOUI
  22                         .oo-ui-iconElement-icon.oo-ui-icon-check {
  23                                 // Override OOUI icon dimensions
  24                                 // The parent is 2em with 0.5em margin
  25                                 // (see mw-rcfilters-mixin-circle below)
  26                                 // so here we want 2em - 0.5em = 1.5em
  27                                 width: 1.5em;
  28                                 height: 1.5em;
  29                                 // By eye, this is centered horizontally for the color circle
  30                                 margin-left: -0.1em;
  31                         }
  32
  33                         &-none {
  34                                 .oo-ui-iconElement-icon.oo-ui-icon-check {
  35                                         // By eye, this is centered horizontally for the white circle
  36                                         margin-left: -0.2em;
  37                                 }
  38
  39                                 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
  40                                 // Override border to dashed
  41                                 border: 1px dashed #54595d;
  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-none;
  47                                 }
  48                         }
  49                         &-c1 {
  50                                 .mw-rcfilters-mixin-circle( @highlight-c1 );
  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-c1;
  56                                 }
  57                         }
  58                         &-c2 {
  59                                 .mw-rcfilters-mixin-circle( @highlight-c2 );
  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-c2;
  65                                 }
  66                         }
  67                         &-c3 {
  68                                 .mw-rcfilters-mixin-circle( @highlight-c3 );
  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-c3;
  74                                 }
  75                         }
  76                         &-c4 {
  77                                 .mw-rcfilters-mixin-circle( @highlight-c4 );
  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-c4;
  83                                 }
  84                         }
  85                         &-c5 {
  86                                 .mw-rcfilters-mixin-circle( @highlight-c5 );
  87
  88                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  89                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  90                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  91                                         background-color: @highlight-c5;
  92                                 }
  93                         }
  94                 }
  95         }
  96 }