Merge "Hide TOC with CSS instead of JavaScript"

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
index 1fb2fca..e9c982a 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less
@@ -1,15 +1,17 @@
+@import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-tagItemWidget {
        // Background and color of the capsule widget need a bit
-       // more specificity to override ooui internals
+       // more specificity to override OOUI internals
        &.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
                // Muted state
-               background-color: #eaecf0;
-               border-color: #c8ccd1;
+               background-color: @colorGray14;
+               border-color: @colorGray12;
 
                .oo-ui-labelElement-label {
-                       color: #72777d;
+                       color: @colorGray7;
                }
                .oo-ui-buttonWidget {
                        opacity: @muted-opacity;
@@ -18,7 +20,7 @@
 
        &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled {
                .oo-ui-labelElement-label {
-                       color: #b32424;
+                       color: @colorDestructiveActive;
                }
        }
 
@@ -26,14 +28,14 @@
        // the white background
        // The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/
        // and will be available in the next OOUI release.
-       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
-               background-color: #eaf3ff;
-               border-color: #36c;
+       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+               background-color: @background-color-primary;
+               border-color: @colorProgressive;
        }
 
        &-popup-content {
                padding: 0.5em;
-               color: #54595d;
+               color: @colorGray5;
        }
 
        &.oo-ui-labelElement .oo-ui-labelElement-label {
@@ -56,23 +58,23 @@
                        top: 50%;
                }
 
-               &[data-color='c1']:before {
+               &[ data-color='c1' ]:before {
                        .mw-rcfilters-mixin-circle( @highlight-c1, 10px, ~'-5px 0.5em 0 0' );
                }
 
-               &[data-color='c2']:before {
+               &[ data-color='c2' ]:before {
                        .mw-rcfilters-mixin-circle( @highlight-c2, 10px, ~'-5px 0.5em 0 0' );
                }
 
-               &[data-color='c3']:before {
+               &[ data-color='c3' ]:before {
                        .mw-rcfilters-mixin-circle( @highlight-c3, 10px, ~'-5px 0.5em 0 0' );
                }
 
-               &[data-color='c4']:before {
+               &[ data-color='c4' ]:before {
                        .mw-rcfilters-mixin-circle( @highlight-c4, 10px, ~'-5px 0.5em 0 0' );
                }
 
-               &[data-color='c5']:before {
+               &[ data-color='c5' ]:before {
                        .mw-rcfilters-mixin-circle( @highlight-c5, 10px, ~'-5px 0.5em 0 0' );
                }
        }