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

   1 @import 'mediawiki.mixins';
   2 @import 'mediawiki.ui/variables';
   3 @import 'mw.rcfilters.variables';
   4
   5 .animation-delay( ... ) {
   6         -webkit-animation-delay: @arguments; // Chrome 4-42, Safari 4-8, Opera 15-29, Android 2.1-4.4.4
   7         -moz-animation-delay: @arguments; // Firefox 5-15
   8         animation-delay: @arguments; // Chrome 43+, Firefox 16+, IE 10+, Edge 12+, Safari 9+, Opera 12.10 & 30+, iOS 9+, Android 47+
   9 }
  10
  11 // Circle mixin
  12 .mw-rcfilters-circle( @min-size-diameter: @min-size-circle, @size-diameter: @size-circle, @margin: 0.5em ) {
  13         .box-sizing( border-box );
  14         min-width: @min-size-diameter;
  15         width: @size-diameter;
  16         min-height: @min-size-diameter;
  17         height: @size-diameter;
  18         margin: @margin;
  19         border-radius: 50%;
  20 }
  21
  22 // Circle color mixin
  23 .mw-rcfilters-circle-color( @color: @color-base--inverted, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
  24         & when ( @emptyBackground = false ) {
  25                 background-color: @color;
  26         }
  27
  28         & when ( @emptyBackground = true ) {
  29                 background-color: @highlight-none;
  30         }
  31
  32         & when ( @border = true ) {
  33                 border: 1px solid @borderColor;
  34         }
  35 }
  36
  37 // This is the circle that appears next to the results
  38 // Its visibility is directly dependent on whether there is
  39 // a color class on its parent element
  40 .result-circle( @colorName: 'none' ) {
  41         &-@{colorName} {
  42                 display: none;
  43                 .mw-rcfilters-circle-color( ~'@{highlight-@{colorName}}' );
  44
  45                 .mw-rcfilters-highlight-color-@{colorName} & {
  46                         display: inline-block;
  47                 }
  48         }
  49 }
  50
  51 // A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles.
  52 .result-circle-margin() {
  53         margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 + @{margin-circle} )';
  54 }
  55
  56 // A mixin just for changesListWrapperWidget page, to output the scope of the widget
  57 // so it is before the rest of the rule; we need the li& to be in
  58 // between the wrapper scope and the color-cX class, which doesn't
  59 // work if the rules are inside the above widget LESS scope
  60 .highlight-results( @bgcolor ) {
  61         .mw-rcfilters-ui-changesListWrapperWidget li&,
  62         .mw-rcfilters-ui-changesListWrapperWidget & tr:first-child,
  63         .mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-highlights-enhanced-toplevel:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+2 ) ),
  64         .mw-rcfilters-ui-changesListWrapperWidget tr&.mw-rcfilters-ui-highlights-enhanced-nested:not( .mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey ) td:not( :nth-child( -n+4 ) ) {
  65                 background-color: @bgcolor;
  66         }
  67 }
  68
  69 // This mixin produces color mixes for two, three and four colors
  70 .highlight-color-mix( @color1, @color2, @color3: false, @color4: false ) {
  71         @highlight-color-class-var: ~'.mw-rcfilters-highlight-color-@{color1}.mw-rcfilters-highlight-color-@{color2}';
  72
  73         // The nature of these variables and them being inside
  74         // a 'tint' and 'average' LESS functions is such where
  75         // the parsing is failing if it is done inside those functions.
  76         // Instead, we first construct their LESS variable names,
  77         // and then we call them inside those functions by calling @@var
  78         @c1var: ~'highlight-@{color1}';
  79         @c2var: ~'highlight-@{color2}';
  80
  81         // Two colors
  82         @{highlight-color-class-var} when ( @color3 = false ) and ( @color4 = false ) and not ( @color1 = false ), ( @color2 = false ) {
  83                 .highlight-results( tint( average( @@c1var, @@c2var ), 50% ) );
  84         }
  85         // Three colors
  86         @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3} when ( @color4 = false ) and not ( @color3 = false ) {
  87                 @c3var: ~'highlight-@{color3}';
  88                 .highlight-results( tint( mix( @@c1var, average( @@c2var, @@c3var ), 33% ), 30% ) );
  89         }
  90
  91         // Four colors
  92         @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}.mw-rcfilters-highlight-color-@{color4} when not ( @color4 = false ) {
  93                 @c3var: ~'highlight-@{color3}';
  94                 @c4var: ~'highlight-@{color4}';
  95                 .highlight-results( tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );
  96         }
  97 }