RCFilters: Improve circle mixin and change to new standard icon size

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.mixins.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index daa7a91..242d280 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -8,19 +8,23 @@
        animation-delay: @arguments; // Chrome 43+, Firefox 16+, IE 10+, Edge 12+, Safari 9+, Opera 12.10 & 30+, iOS 9+, Android 47+
 }
 
-// This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: @color-base--inverted, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
+// Circle mixin
+.mw-rcfilters-circle( @min-size-diameter: @min-size-circle, @size-diameter: @size-circle, @margin: 0.5em ) {
        .box-sizing( border-box );
-       min-width: @diameter;
-       width: @diameter;
-       min-height: @diameter;
-       height: @diameter;
-       margin: @padding;
+       min-width: @min-size-diameter;
+       width: @size-diameter;
+       min-height: @min-size-diameter;
+       height: @size-diameter;
+       margin: @margin;
        border-radius: 50%;
+}
 
+// Circle color mixin
+.mw-rcfilters-circle-color( @color: @color-base--inverted, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) {
        & when ( @emptyBackground = false ) {
                background-color: @color;
        }
+
        & when ( @emptyBackground = true ) {
                background-color: @highlight-none;
        }
@@ -35,8 +39,8 @@
 // a color class on its parent element
 .result-circle( @colorName: 'none' ) {
        &-@{colorName} {
-               .mw-rcfilters-mixin-circle( ~'@{highlight-@{colorName}}', @result-circle-diameter, 0 );
                display: none;
+               .mw-rcfilters-circle-color( ~'@{highlight-@{colorName}}' );
 
                .mw-rcfilters-highlight-color-@{colorName} & {
                        display: inline-block;
@@ -46,7 +50,7 @@
 
 // A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles.
 .result-circle-margin() {
-       margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+       margin-left: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 + @{margin-circle} )';
 }
 
 // A mixin just for changesListWrapperWidget page, to output the scope of the widget