From 075cf624ee67a907ba19c56342107a9b02ab8e7d Mon Sep 17 00:00:00 2001 From: Roan Kattouw Date: Fri, 27 Jan 2017 19:04:49 +1100 Subject: [PATCH] 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 --- ...ters.ui.FilterCapsuleMultiselectWidget.less | 10 ++++++++++ .../mw.rcfilters.ui.FilterGroupWidget.less | 13 +++---------- .../mw.rcfilters.ui.FilterItemWidget.less | 6 +++++- .../mw.rcfilters.ui.FilterWrapperWidget.less | 18 ------------------ 4 files changed, 18 insertions(+), 29 deletions(-) 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 2ff731c89d..c409d58857 100644 --- 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 3723916163..615ac3144f 100644 --- 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 912e75cb29..9f9e6fca3a 100644 --- 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 b58dfdf6c9..2928102fef 100644 --- 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; - } } -- 2.20.1