resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less

   1 @import 'mediawiki.mixins';
   2 @import 'mw.rcfilters.variables';
   3
   4 // This is a general mixin for a color circle
   5 .mw-rcfilters-mixin-circle( @color: white, @diameter: 2em, @padding: 0.5em, @border: false ) {
   6         border-radius: 50%;
   7         min-width: @diameter;
   8         width: @diameter;
   9         min-height: @diameter;
  10         height: @diameter;
  11         margin: @padding;
  12         .box-sizing( border-box );
  13
  14         background-color: @color;
  15
  16         & when (@border = true) {
  17                 border: 1px solid #565656;
  18         }
  19 }
  20
  21 // This is the circle that appears next to the results
  22 // Its visibility is directly dependent on whether there is
  23 // a color class on its parent element
  24 .result-circle( @colorName: 'none' ) {
  25         &-@{colorName} {
  26                 .mw-rcfilters-mixin-circle( ~'@{highlight-@{colorName}}', @result-circle-diameter, 0 );
  27                 display: none;
  28
  29                 .mw-rcfilters-highlight-color-@{colorName} & {
  30                         display: inline-block;
  31                 }
  32         }
  33 }
  34
  35 // This mixin produces color mixes for two, three and four colors
  36 .highlight-color-mix( @color1, @color2, @color3: false, @color4: false ) {
  37         @highlight-color-class-var: ~'.mw-rcfilters-highlight-color-@{color1}.mw-rcfilters-highlight-color-@{color2}';
  38
  39         // The nature of these variables and them being inside
  40         // a 'tint' and 'average' LESS functions is such where
  41         // the parsing is failing if it is done inside those functions.
  42         // Instead, we first construct their LESS variable names,
  43         // and then we call them inside those functions by calling @@var
  44         @c1var: ~'highlight-@{color1}';
  45         @c2var: ~'highlight-@{color2}';
  46
  47         // Two colors
  48         @{highlight-color-class-var} when ( @color3 = false ) and ( @color4 = false ) and not ( @color1 = false ), ( @color2 = false ) {
  49                 background-color: tint( average( @@c1var, @@c2var ), 50% );
  50         }
  51         // Three colors
  52         @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3} when ( @color4 = false ) and not ( @color3 = false ) {
  53                 @c3var: ~'highlight-@{color3}';
  54                 background-color: tint( mix( @@c1var, average( @@c2var, @@c3var ), 33% ), 30% );
  55         }
  56
  57         // Four colors
  58         @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}.mw-rcfilters-highlight-color-@{color4} when not ( @color4 = false ) {
  59                 @c3var: ~'highlight-@{color3}';
  60                 @c4var: ~'highlight-@{color4}';
  61                 background-color: tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% );
  62         }
  63 }