OOUIHTMLForm styles: Unify spacing aligned to new base font-size

Follow-up to I693d168d2ccf2babbcfe8952af3e1c262aa97773

Bug: T177668
Change-Id: I86077eadbf0986868cbaabd41c33b48e333d7973

diff --git a/resources/src/mediawiki/htmlform/ooui.styles.less b/resources/src/mediawiki/htmlform/ooui.styles.less
index 97a013e..920cd9d 100644 (file)
--- a/resources/src/mediawiki/htmlform/ooui.styles.less
+++ b/resources/src/mediawiki/htmlform/ooui.styles.less
@@ -1,13 +1,19 @@
 // OOUIHTMLForm styles
 // OOUIHTMLForm styles

+@ooui-font-size-browser: 16; // assumed browser default of `16px`
+@ooui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
+
+@ooui-spacing-medium: 12 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.8571429em`≈`12px`
+@ooui-spacing-large: 16 / @ooui-font-size-browser / @ooui-font-size-base; // equals `1.1428571em`≈`16px`
+

 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {

-       padding: 1em 1.25em 1.25em;
+       padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;

 }
 
 .mw-htmlform-ooui {
        line-height: 1.4; // Override MediaWiki's default of `1.6`
 
        .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
 }
 
 .mw-htmlform-ooui {
        line-height: 1.4; // Override MediaWiki's default of `1.6`
 
        .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {

-               line-height: 1.143; // equals `16px`
+               line-height: 16 / @ooui-font-size-browser / @ooui-font-size-base;

        }
 
        .mw-htmlform-field-HTMLCheckMatrix {
        }
 
        .mw-htmlform-field-HTMLCheckMatrix {


@@ -49,10 +55,10 @@
 .mw-htmlform-flatlist .oo-ui-radioOptionWidget,
 .mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
        display: inline-block;
 .mw-htmlform-flatlist .oo-ui-radioOptionWidget,
 .mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
        display: inline-block;

-       margin-right: 1em;
+       margin-right: @ooui-spacing-medium;

 }
 
 .mw-htmlform-ooui .htmlform-tip,
 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
 }
 
 .mw-htmlform-ooui .htmlform-tip,
 .mw-htmlform-ooui .mw-htmlform-submit-buttons {

-       margin-top: 1em;
+       margin-top: @ooui-spacing-medium;

 }
 }