Mooeypoo has uploaded a new change for review. ( https://gerrit.wikimedia.org/r/370136 )
Change subject: [WIP-like-seriously] Make a scoped mixin for highlight colors ...................................................................... [WIP-like-seriously] Make a scoped mixin for highlight colors Change-Id: I64796fd350b4c9914fea07c5e175ea5c6ade2fcd --- M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less 2 files changed, 41 insertions(+), 40 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core refs/changes/36/370136/1 diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less index 526f035..587f756 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less @@ -36,16 +36,16 @@ // so it is before the rest of the rule; we need the li& to be in // between the wrapper scope and the color-cX class, which doesn't // work if the rules are inside the above widget LESS scope -.highlight-changesListWrapperWidget( @bgcolor ) { - .mw-rcfilters-ui-changesListWrapperWidget li&, - .mw-rcfilters-ui-changesListWrapperWidget & tr:first-child, - .mw-rcfilters-ui-changesListWrapperWidget & td:not( :nth-child( -n+3 ) ) { - background-color: @bgcolor; +.highlight-changesListWrapperWidget( @scope, @bgcolor ) { + .@{scope} li&, + .@{scope} & tr:first-child, + .@{scope} & td:not( :nth-child( -n+3 ) ) { + background-color: @{bgcolor}; } } // This mixin produces color mixes for two, three and four colors -.highlight-color-mix( @color1, @color2, @color3: false, @color4: false ) { +.highlight-color-mix( @scope, @color1, @color2, @color3: false, @color4: false ) { @highlight-color-class-var: ~'.mw-rcfilters-highlight-color-@{color1}.mw-rcfilters-highlight-color-@{color2}'; // The nature of these variables and them being inside @@ -58,18 +58,18 @@ // Two colors @{highlight-color-class-var} when ( @color3 = false ) and ( @color4 = false ) and not ( @color1 = false ), ( @color2 = false ) { - .highlight-changesListWrapperWidget( tint( average( @@c1var, @@c2var ), 50% ) ); + .highlight-changesListWrapperWidget( @scope, tint( average( @@c1var, @@c2var ), 50% ) ); } // Three colors @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3} when ( @color4 = false ) and not ( @color3 = false ) { @c3var: ~'highlight-@{color3}'; - .highlight-changesListWrapperWidget( tint( mix( @@c1var, average( @@c2var, @@c3var ), 33% ), 30% ) ); + .highlight-changesListWrapperWidget( @scope, tint( mix( @@c1var, average( @@c2var, @@c3var ), 33% ), 30% ) ); } // Four colors @{highlight-color-class-var}.mw-rcfilters-highlight-color-@{color3}.mw-rcfilters-highlight-color-@{color4} when not ( @color4 = false ) { @c3var: ~'highlight-@{color3}'; @c4var: ~'highlight-@{color4}'; - .highlight-changesListWrapperWidget( tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) ); + .highlight-changesListWrapperWidget( @scope, tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) ); } } 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 4d0b0f1..3aa1434 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -114,64 +114,65 @@ } } +@changesListWrapperWidgetScope: ~"mw-rcfilters-ui-changesListWrapperWidget"; // One color .mw-rcfilters-highlight-color-c1 { - .highlight-changesListWrapperWidget( tint( @highlight-c1, 70% ); ); + .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope, tint( @highlight-c1, 70% ); ); } .mw-rcfilters-highlight-color-c2 { - .highlight-changesListWrapperWidget( tint( @highlight-c2, 70% ); ); + .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope, tint( @highlight-c2, 70% ); ); } .mw-rcfilters-highlight-color-c3 { - .highlight-changesListWrapperWidget( tint( @highlight-c3, 70% ); ); + .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope, tint( @highlight-c3, 70% ); ); } .mw-rcfilters-highlight-color-c4 { - .highlight-changesListWrapperWidget( tint( @highlight-c4, 70% ); ); + .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope, tint( @highlight-c4, 70% ); ); } .mw-rcfilters-highlight-color-c5 { - .highlight-changesListWrapperWidget( tint( @highlight-c5, 70% ); ); + .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope, tint( @highlight-c5, 70% ); ); } // Two colors -.highlight-color-mix( c1, c2 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2 ); // Overriding .highlight-color-mix( c1, c3 ); to produce // 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( #ccdecc ); + .highlight-changesListWrapperWidget( @changesListWrapperWidgetScope, #ccdecc ); } -.highlight-color-mix( c1, c4 ); -.highlight-color-mix( c1, c5 ); -.highlight-color-mix( c2, c3 ); -.highlight-color-mix( c2, c4 ); -.highlight-color-mix( c2, c5 ); -.highlight-color-mix( c3, c4 ); -.highlight-color-mix( c3, c5 ); -.highlight-color-mix( c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c3, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c3, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c4, c5 ); // Three colors -.highlight-color-mix( c1, c2, c3 ); -.highlight-color-mix( c1, c2, c5 ); -.highlight-color-mix( c1, c2, c4 ); -.highlight-color-mix( c1, c3, c4 ); -.highlight-color-mix( c1, c3, c5 ); -.highlight-color-mix( c1, c4, c5 ); -.highlight-color-mix( c2, c3, c4 ); -.highlight-color-mix( c2, c3, c5 ); -.highlight-color-mix( c2, c4, c5 ); -.highlight-color-mix( c3, c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c3 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c3, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c3, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c3, c4, c5 ); // Four colors -.highlight-color-mix( c1, c2, c3, c4 ); -.highlight-color-mix( c1, c2, c3, c5 ); -.highlight-color-mix( c1, c2, c4, c5 ); -.highlight-color-mix( c1, c3, c4, c5 ); -.highlight-color-mix( c2, c3, c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c3, c4 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c3, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c2, c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c1, c3, c4, c5 ); +.highlight-color-mix( @changesListWrapperWidgetScope, c2, c3, c4, c5 ); // 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-changesListWrapperWidget( @changesListWrapperWidgetScope, tint( mix( @highlight-c1, mix( @highlight-c2, mix( @highlight-c3, average( @highlight-c4, @highlight-c5 ), 20% ), 20% ), 20% ), 15% ) ); } -- To view, visit https://gerrit.wikimedia.org/r/370136 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I64796fd350b4c9914fea07c5e175ea5c6ade2fcd Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/core Gerrit-Branch: master Gerrit-Owner: Mooeypoo <mor...@gmail.com> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits