rcfilters: Style fixes and cleanup

* Set border-box on FilterGroupWidget and FilterItemWidget to prevent
  horizontal scrolling in the filter popup
* Remove unused styles for -invalid-notice and -invalid-filter
* Move styles for FilterCapsuleMultiselectWidget to the right file
* Suppress both bottom and top margin for FieldLayouts in FilterItemWidget
  (the only reason a top margin wasn't applied was because the FieldLayout
  was a first child, which is somewhat fragile)

Change-Id: I7f08ca6aa13fe6429c7fbe45b3d698c20b8c1275

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 2ff731c..c409d58 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -1,4 +1,14 @@
 .mw-rcfilters-ui-filterCapsuleMultiselectWidget {
+       max-width: none;
+
+       &.oo-ui-widget-enabled .oo-ui-capsuleMultiselectWidget-handle {
+               background-color: #f8f9fa;
+               border: 1px solid #a2a9b1;
+               min-height: 5.5em;
+               padding: 0.75em;
+
+       }
+
        &-content-title {
                font-weight: bold;
                color: #54595d;

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
index 3723916..615ac31 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less
@@ -1,3 +1,5 @@
+@import "mediawiki.mixins";
+
 .mw-rcfilters-ui-filterGroupWidget {
        padding-bottom: 0.5em;
 
@@ -6,6 +8,7 @@
                background: #eaecf0;
                padding: 0.5em 0.75em;
                color: #555a5d;
+               .box-sizing( border-box );
        }
 
        &-active {
@@ -13,14 +16,4 @@
                        font-weight: bold;
                }
        }
-
-       &-invalid-notice {
-               padding: 0.5em;
-               font-style: italic;
-               display: none;
-
-               .mw-rcfilters-ui-filterGroupWidget-invalid & {
-                       display: block;
-               }
-       }
 }

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
index 912e75c..9f9e6fc 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
@@ -1,5 +1,8 @@
+@import "mediawiki.mixins";
+
 .mw-rcfilters-ui-filterItemWidget {
        padding-left: 0.5em;
+       .box-sizing( border-box );
 
        &-label {
                &-title {
@@ -13,7 +16,8 @@
        }
 
        .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
-               margin-bottom: 0 !important;
+               // Override margin-top and -bottom rules from FieldLayout
+               margin: 0 !important;
        }
 
        &-inactive {

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
index b58dfdf..2928102 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less
@@ -1,19 +1,6 @@
 .mw-rcfilters-ui-filterWrapperWidget {
        width: 100%;
 
-       .oo-ui-capsuleMultiselectWidget {
-               max-width: none;
-
-               &.oo-ui-widget-enabled .oo-ui-capsuleMultiselectWidget-handle {
-                       // TODO: Unify colors with official design palette
-                       background-color: #f8f9fa;
-                       border: 1px solid #a2a9b1;
-                       min-height: 5.5em;
-                       padding: 0.75em;
-
-               }
-       }
-
        &-popup {
                // We have to override OOUI's definition, which is set
                // on the inline style of the popup
@@ -30,9 +17,4 @@
                        direction: ltr;
                }
        }
-
-       &-capsule-invalid-filter {
-               // TODO: Unify colors with official design palette
-               background: red;
-       }
 }