RCFilters: Adjust unbalanced scan line in filter menu

Bug: T191434
Bug: T191557
Change-Id: I0fb5c6f219600e697d4e712a21639d667ad2ed69

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
index a9c2096..928b483 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
@@ -1,5 +1,6 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-filterMenuHeaderWidget {
        &-title {
@@ -21,18 +22,22 @@
 
                &-invert,
                &-highlight {
-                       width: 1em;
+                       min-width: 1em;
                        vertical-align: middle;
                        // Using the same padding that the filter item
                        // uses, so the button is aligned with the highlight
                        // buttons for the filters
-                       padding-right: 0.5em;
+                       padding-right: 12 / @font-size-system-ui / @font-size-vector;
                }
 
                &-back {
                        width: 1em;
                        vertical-align: middle;
-                       padding-left: 0.5em;
+
+                       .mw-rcfilters-ui-filterMenuHeaderWidget-backButton:first-child {
+                               // Overwrite `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
+                               margin-left: 0;
+                       }
                }
 
                &-title {

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less
index 0f858e6..07e43c0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less
@@ -1,7 +1,12 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-filterMenuOptionWidget {
+       .mw-rcfilters-ui-filterMenuSectionOptionWidget ~ & {
+               padding-left: 12 / @font-size-system-ui / @font-size-vector;
+       }
+
        &.oo-ui-flaggedElement-muted {
                &:not( .oo-ui-optionWidget-selected ) {
                        // Namespaces are muted 'the other way around' when they
@@ -24,4 +29,12 @@
                }
        }
 
+       // Override OOUI's pretty specific
+       // `.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header`
+       // selector
+       .mw-rcfilters-ui-itemMenuOptionWidget-itemCheckbox > .oo-ui-fieldLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+               padding-top: 0;
+               padding-bottom: 0;
+               padding-left: 12 / @font-size-system-ui / @font-size-vector;
+       }
 }

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less
index 3e32c83..50073ff 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less
@@ -1,27 +1,25 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-filterMenuSectionOptionWidget {
-       background: @colorGray14;
-       padding-bottom: 0.7em;
-
-       &-header {
-               padding: 0 0.75em;
-               // Use a high specificity to override OOUI
-               .oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label {
-                       color: @colorGray5;
-                       .box-sizing( border-box );
-                       display: inline-block;
-               }
+       background-color: @colorGray14;
+       padding-bottom: 8 / @font-size-system-ui / @font-size-vector;
+       padding-left: 12 / @font-size-system-ui / @font-size-vector;
+       padding-right: 12 / @font-size-system-ui / @font-size-vector;
+
+       &-header-title.oo-ui-labelElement-label {
+               color: @colorGray5;
+               display: inline-block;
        }
 
        &-whatsThisButton {
                margin-left: 1.5em;
 
                &.oo-ui-buttonElement > .oo-ui-buttonElement-button {
-                       font-weight: normal;
                        border: 0; // Override OOUI `border` needed for frameless keyboard focus
                        padding: 0;
+                       font-weight: normal;
 
                        &:focus {
                                .box-shadow( none );
@@ -33,8 +31,8 @@
                        padding: 1em;
 
                        &-header {
-                               font-weight: bold;
                                margin-bottom: 1em;
+                               font-weight: bold;
                        }
 
                        &-link {
@@ -47,9 +45,7 @@
                }
        }
 
-       &-active {
-               .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title {
-                       font-weight: bold;
-               }
+       &-active .mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title {
+               font-weight: bold;
        }
 }

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less
index 21a169c..72b40fe 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less
@@ -12,7 +12,7 @@
        }
 
        &-view-namespaces {
-               border-top: 5px solid @colorGray12;
+               border-top: 4px solid @colorGray12;
 
                &:first-child,
                &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk {
@@ -25,7 +25,8 @@
        }
 
        .mw-rcfilters-ui-table {
-               padding-top: 0.5em;
+               padding-top: 6 / @font-size-system-ui / @font-size-vector;
+               padding-bottom: 6 / @font-size-system-ui / @font-size-vector;
        }
 
        &.oo-ui-optionWidget-selected {
@@ -45,6 +46,10 @@
        }
 
        &-itemCheckbox {
+               .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+                       padding-left: 12 / @font-size-system-ui / @font-size-vector;
+               }
+
                .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
                        // Override margin-top and -bottom rules from FieldLayout
                        margin: 0 !important; /* stylelint-disable-line declaration-no-important */

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
index 0906d68..198c820 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less
@@ -1,5 +1,6 @@
 @import 'mediawiki.mixins';
 @import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.variables';
 
 .mw-rcfilters-ui-menuSelectWidget {
        z-index: auto;
@@ -10,8 +11,8 @@
        }
 
        &-noresults {
-               padding: 0.5em;
                color: @colorGray5;
+               padding: 12 / @font-size-system-ui / @font-size-vector;
        }
 
        &-body {
@@ -19,9 +20,9 @@
        }
 
        &-footer {
-               padding: 0.5em;
                background-color: @colorGray15;
                border-top: 1px solid @colorGray12;
+               padding: 12 / @font-size-system-ui / @font-size-vector;
 
                & + & {
                        border-top: 0;

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
index 5f97e1e..987f525 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
@@ -1,3 +1,8 @@
+// “External” variables
+@font-size-system-ui: 16; // Assumed browser default of `16px`
+@font-size-vector: 0.875em; // equals `14px` at browser default of `16px`
+
+// RCFilters variables
 @background-color-base: #fff;
 @background-color-primary: #eaf3ff;
 @color-base--inverted: #fff;