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

   1 @import 'mediawiki.ui/variables';
   2 @import 'mw.rcfilters.mixins';
   3
   4 .mw-rcfilters-ui-highlightColorPickerWidget {
   5         &-label {
   6                 display: block;
   7                 font-weight: bold;
   8                 font-size: 1.2em;
   9         }
  10
  11         &-buttonSelect {
  12                 &-color {
  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 {
  19                                 margin-top: 0.5em;
  20                         }
  21
  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
  28                                 width: 1.5em;
  29                                 height: 1.5em;
  30                                 // By eye, this is centered horizontally for the color circle
  31                                 margin-left: -0.1em;
  32                         }
  33
  34                         &-none {
  35                                 .oo-ui-iconElement-icon.oo-ui-icon-check {
  36                                         // By eye, this is centered horizontally for the white circle
  37                                         margin-left: -0.2em;
  38                                 }
  39
  40                                 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
  41                                 // Override border to dashed
  42                                 border: 1px dashed @colorGray5;
  43
  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;
  48                                 }
  49                         }
  50                         &-c1 {
  51                                 .mw-rcfilters-mixin-circle( @highlight-c1 );
  52
  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;
  57                                 }
  58                         }
  59                         &-c2 {
  60                                 .mw-rcfilters-mixin-circle( @highlight-c2 );
  61
  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;
  66                                 }
  67                         }
  68                         &-c3 {
  69                                 .mw-rcfilters-mixin-circle( @highlight-c3 );
  70
  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;
  75                                 }
  76                         }
  77                         &-c4 {
  78                                 .mw-rcfilters-mixin-circle( @highlight-c4 );
  79
  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;
  84                                 }
  85                         }
  86                         &-c5 {
  87                                 .mw-rcfilters-mixin-circle( @highlight-c5 );
  88
  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;
  93                                 }
  94                         }
  95                 }
  96         }
  97 }