From f972b10dd5e671bd30fa0179f0d54de6ec169ea1 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 5 Apr 2018 11:42:11 -0700 Subject: [PATCH] RCFilters: Adjust unbalanced scan line in filter menu Bug: T191434 Bug: T191557 Change-Id: I0fb5c6f219600e697d4e712a21639d667ad2ed69 --- ...w.rcfilters.ui.FilterMenuHeaderWidget.less | 11 +++++-- ...w.rcfilters.ui.FilterMenuOptionWidget.less | 13 ++++++++ ...ters.ui.FilterMenuSectionOptionWidget.less | 30 ++++++++----------- .../mw.rcfilters.ui.ItemMenuOptionWidget.less | 9 ++++-- .../mw.rcfilters.ui.MenuSelectWidget.less | 5 ++-- .../styles/mw.rcfilters.variables.less | 5 ++++ 6 files changed, 49 insertions(+), 24 deletions(-) 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 a9c2096e67..928b4831c7 100644 --- 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 0f858e6cd4..07e43c000a 100644 --- 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 3e32c83175..50073ff9b3 100644 --- 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 21a169ced6..72b40feaa8 100644 --- 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 0906d6811b..198c8209e9 100644 --- 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 5f97e1e3f6..987f525518 100644 --- 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; -- 2.20.1