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                                 // Override OOUI rule on frameless icons
  33                                 opacity: 1;
  34                         }
  35
  36                         &-none {
  37                                 .oo-ui-iconElement-icon.oo-ui-icon-check {
  38                                         // By eye, this is centered horizontally for the white circle
  39                                         margin-left: -0.2em;
  40                                 }
  41
  42                                 .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true );
  43                                 // Override `border-style` to `dashed`
  44                                 border-style: dashed;
  45
  46                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  47                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  48                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  49                                         background-color: @highlight-none;
  50                                 }
  51                         }
  52                         &-c1 {
  53                                 .mw-rcfilters-mixin-circle( @highlight-c1 );
  54
  55                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  56                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  57                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  58                                         background-color: @highlight-c1;
  59                                 }
  60                         }
  61                         &-c2 {
  62                                 .mw-rcfilters-mixin-circle( @highlight-c2 );
  63
  64                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  65                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  66                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  67                                         background-color: @highlight-c2;
  68                                 }
  69                         }
  70                         &-c3 {
  71                                 .mw-rcfilters-mixin-circle( @highlight-c3 );
  72
  73                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  74                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  75                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  76                                         background-color: @highlight-c3;
  77                                 }
  78                         }
  79                         &-c4 {
  80                                 .mw-rcfilters-mixin-circle( @highlight-c4 );
  81
  82                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  83                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  84                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  85                                         background-color: @highlight-c4;
  86                                 }
  87                         }
  88                         &-c5 {
  89                                 .mw-rcfilters-mixin-circle( @highlight-c5 );
  90
  91                                 &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active,
  92                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
  93                                 &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
  94                                         background-color: @highlight-c5;
  95                                 }
  96                         }
  97                 }
  98         }
  99 }