From fc005c9c917f04c6436456ff04422164d6a00e8b Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 28 Feb 2019 16:17:02 -0800 Subject: [PATCH] RCFilters: Make SaveFiltersPopup header's label and icon wrap Wrapping SaveFiltersPopup header's label and icon in languages like Catalan and German. Also re-positioning close button from absolute top and remove duplicated, inherited properties. Change-Id: I3fd35b237f82ab95b66e6e710cba36cf1887618f --- ...cfilters.ui.SaveFiltersPopupButtonWidget.less | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less index 9f9378a4a0..557bb3c391 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less @@ -15,23 +15,25 @@ padding-right: 1.875em + 0.5em; > .oo-ui-buttonWidget { - top: 50%; - .transform( translateY( -50% ) ); + top: 0.5em; } > .oo-ui-iconWidget { - float: none; - display: inline-block; - margin: 0; + vertical-align: top; } > .oo-ui-labelElement-label { float: none; display: inline-block; + // Label doesn't wrap without `max-width`. First setting a pretty arbitrary percentage value. + max-width: 80%; + // Overwrite it with `calc` reduced by icon width and left margin combined. + max-width: calc( ~'100% - 1.42857143em - 0.25em' ); + margin: 0 0 0 0.25em; font-size: 1.2em; - margin: 0; font-weight: bold; - vertical-align: middle; + line-height: 1.25; + vertical-align: top; } } } -- 2.20.1