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

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
index e9e331b..324c900 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -82,15 +82,15 @@
 
        &-highlights {
                display: none;
-               padding: 0 @result-circle-general-margin 0 0;
+               padding: 0 @margin-circle 0 0;
                text-align: right;
                // The width is 5 circles times their diameter + individual margin
                // and then plus the general margin
-               width: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 )';
+               width: ~'calc( ( @{size-circle-result} + @{margin-circle-result} ) * 5 )';
                // And we want to shift the entire block to the left of the li
                position: relative;
                // Negative left margin of width + padding
-               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} )';
 
                .mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
                        display: inline-block;
@@ -99,18 +99,17 @@
                // This needs to be very specific, since these are
                // position rules that should apply to all overrides
                .mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-ui-changesListWrapperWidget-highlights > div&-circle {
-                       .box-sizing( border-box );
-                       margin-right: @result-circle-margin;
                        vertical-align: middle;
+                       .mw-rcfilters-circle( @size-circle-result, @size-circle-result, 0 );
                        // This is to make the dots appear at the center of the
                        // text itself; it's a horrendous hack and blame JamesF for it.
                        margin-top: -2px;
+                       margin-right: @margin-circle-result;
                }
 
                &-color {
-
                        &-none {
-                               .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true );
+                               .mw-rcfilters-circle-color( @highlight-none, true );
                                display: inline-block;
 
                                .mw-rcfilters-highlight-color-c1 &,
@@ -132,23 +131,23 @@
 
 // One color
 .mw-rcfilters-highlight-color-c1 {
-       .highlight-changesListWrapperWidget( tint( @highlight-c1, 70% ); );
+       .highlight-results( tint( @highlight-c1, 70% ); );
 }
 
 .mw-rcfilters-highlight-color-c2 {
-       .highlight-changesListWrapperWidget( tint( @highlight-c2, 70% ); );
+       .highlight-results( tint( @highlight-c2, 70% ); );
 }
 
 .mw-rcfilters-highlight-color-c3 {
-       .highlight-changesListWrapperWidget( tint( @highlight-c3, 70% ); );
+       .highlight-results( tint( @highlight-c3, 70% ); );
 }
 
 .mw-rcfilters-highlight-color-c4 {
-       .highlight-changesListWrapperWidget( tint( @highlight-c4, 70% ); );
+       .highlight-results( tint( @highlight-c4, 70% ); );
 }
 
 .mw-rcfilters-highlight-color-c5 {
-       .highlight-changesListWrapperWidget( tint( @highlight-c5, 70% ); );
+       .highlight-results( tint( @highlight-c5, 70% ); );
 }
 
 // Two colors
@@ -157,7 +156,7 @@
 // a custom color rather than the computed tint
 // see https://phabricator.wikimedia.org/T161267
 .mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 {
-       .highlight-changesListWrapperWidget( @light-green );
+       .highlight-results( @light-green );
 }
 .highlight-color-mix( c1, c4 );
 .highlight-color-mix( c1, c5 );
@@ -187,7 +186,7 @@
 .highlight-color-mix( c1, c3, c4, c5 );
 .highlight-color-mix( c2, c3, c4, c5 );
 
-// Five colors:
+// Five colors
 .mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c2.mw-rcfilters-highlight-color-c3.mw-rcfilters-highlight-color-c4.mw-rcfilters-highlight-color-c5 {
-       .highlight-changesListWrapperWidget( tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) );
+       .highlight-results( tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) );
 }