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

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