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

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
index 920fec3..e90ce96 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
@@ -9,65 +9,68 @@
                        list-style: none;
                }
        }
+
+       & > div {
+               margin-right: @margin-circle-result;
+       }
 }
 
 // Make more specific for the overrides
 div.mw-rcfilters-ui-highlights {
        body.mw-rcfilters-ui-initialized & {
                display: inline-block;
+               .mw-rcfilters-circle( @size-circle-result, @size-circle-result, 0 );
        }
 
        &-color {
                &-none {
                        display: inline-block;
+
                        .mw-changeslist-watchedseen & {
                                .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
-                                       .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
+                                       .mw-rcfilters-circle-color( @highlight-none, true, @highlight-grey, true );
                                }
 
                                .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
-                                       .mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
+                                       .mw-rcfilters-circle-color( @highlight-none, true, @highlight-bluedot, true );
                                }
                        }
 
                        .mw-changeslist-watchedunseen & {
                                .mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
-                                       .mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
+                                       .mw-rcfilters-circle-color( @highlight-grey, true, @highlight-grey );
                                }
 
                                .mw-rcfilters-ui-changesListWrapperWidget:not( .mw-rcfilters-ui-changesListWrapperWidget-highlighted ) & {
-                                       .mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
+                                       .mw-rcfilters-circle-color( @highlight-bluedot, true, @highlight-bluedot );
                                }
                        }
 
                }
 
-               // Watchlist unseen highlighted fixes
-               // Seen (empty circle)
-               // There's no need to correct 'unseen' because that would be
-               // a filled colorful circle, which is the regular rendering
-               .mw-changeslist-watchedseen &-c1 {
-                       .mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
-               }
+       }
 
-               .mw-changeslist-watchedseen &-c2 {
-                       .mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
-               }
+       // Watchlist unseen highlighted fixes
+       // Seen (empty circle)
+       // There's no need to correct 'unseen' because that would be
+       // a filled colorful circle, which is the regular rendering
+       .mw-changeslist-watchedseen &-c1 {
+               .mw-rcfilters-circle-color( @highlight-c1, true, @highlight-c1, true );
+       }
 
-               .mw-changeslist-watchedseen &-c3 {
-                       .mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
-               }
+       .mw-changeslist-watchedseen &-c2 {
+               .mw-rcfilters-circle-color( @highlight-c2, true, @highlight-c2, true );
+       }
 
-               .mw-changeslist-watchedseen &-c4 {
-                       .mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
-               }
+       .mw-changeslist-watchedseen &-c3 {
+               .mw-rcfilters-circle-color( @highlight-c3, true, @highlight-c3, true );
+       }
 
-               .mw-changeslist-watchedseen &-c5 {
-                       .mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
-               }
+       .mw-changeslist-watchedseen &-c4 {
+               .mw-rcfilters-circle-color( @highlight-c4, true, @highlight-c4, true );
        }
 
-       .mw-rcfilters-ui-changesListWrapperWidget & > div {
-               margin-right: @result-circle-margin;
+       .mw-changeslist-watchedseen &-c5 {
+               .mw-rcfilters-circle-color( @highlight-c5, true, @highlight-c5, true );
        }
 }