Merge "Live Preview: Cope with the edit summary being an OOjs UI widget"

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

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index 5ce7988..076636c 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins';
+
 .mw-rcfilters-ui-filterTagMultiselectWidget {
        max-width: none;
 
@@ -5,6 +7,7 @@
                // Make sure this uses the interface direction, not the content direction
                direction: ltr;
                border-bottom-right-radius: 0;
+               height: 2.5em;
        }
 
        &.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
@@ -13,7 +16,15 @@
                background-color: #f8f9fa;
                border-radius: 2px 2px 0 0;
                padding: 0.6em;
-               margin-top: 1.6em;
+               margin-top: 1em;
+       }
+
+       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
+               .transition( background-color 500ms ease-out );
+       }
+
+       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
+               background-color: #eaf3ff; // Accent90
        }
 
        &-wrapper {
@@ -28,7 +39,8 @@
                        }
 
                        &-savedQueryTitle {
-                               color: #72777d;
+                               color: #222; // Base10
+                               font-weight: bold;
                                margin-left: 1em;
                        }
                }
@@ -43,20 +55,24 @@
                        width: 1em;
 
                        &-widget.oo-ui-widget {
+                               border: 1px solid #a2a9b1;
+                               border-left-width: 0;
+                               border-top-left-radius: 0;
+                               border-top-right-radius: 0;
+                               border-bottom-left-radius: 0;
+
                                display: block;
                                text-align: right;
+                               height: 2.5em;
+                               box-sizing: border-box;
 
-                               // Override OOUI rules
-                               &.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child a.oo-ui-buttonElement-button,
-                               .oo-ui-buttonOptionWidget a.oo-ui-buttonElement-button {
-                                       border-radius: 0;
-                                       border-left: 0;
+                               .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
+                                       margin-left: 0;
                                }
 
-                               &.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child a.oo-ui-buttonElement-button {
-                                       border-bottom-right-radius: 2px;
+                               .oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement:first-child {
+                                       margin-left: 0;
                                }
-
                        }
                }
        }