Merge "ApiSandbox: Move labels outside progress bars"

[lhc/web/wiklou.git] / resources / src / mediawiki.htmlform.ooui.styles.less

diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less
index 18fb4a2..470d826 100644 (file)
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -1,5 +1,7 @@
 @import 'mediawiki.mixins';
 
+/* stylelint-disable selector-class-pattern */
+
 // 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`
@@ -10,7 +12,18 @@
 @ooui-padding-vertical: 4 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.285714em`≈`4px`
 
 .mw-htmlform-ooui-wrapper.oo-ui-panelLayout-padded {
+       // Reducing `padding-top`, as the heading's `line-height` provides similar distance.
        padding: @ooui-spacing-medium @ooui-spacing-large @ooui-spacing-large;
+
+       // Trigger only when collapsible & JS is available via `.mw-collapsed`.
+       .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
+               // Negative margin to match the reduced distance on the top caused by the previous rule.
+               margin-bottom: -( @ooui-spacing-large - @ooui-spacing-medium );
+
+               .oo-ui-labelElement-label {
+                       margin-bottom: 0;
+               }
+       }
 }
 
 .mw-htmlform-ooui {
@@ -80,11 +93,18 @@
 
 // Flatlist styling for PHP (`.oo-ui-fieldLayout-align-inline`) &
 // JS (`.oo-ui-radioOptionWidget, .oo-ui-checkboxMultioptionWidget`) widgets
-.mw-htmlform-flatlist .oo-ui-fieldLayout-align-inline,
-.mw-htmlform-flatlist .oo-ui-radioOptionWidget,
-.mw-htmlform-flatlist .oo-ui-checkboxMultioptionWidget {
-       display: inline-block;
-       margin-right: @ooui-spacing-medium;
+.mw-htmlform-flatlist {
+       .oo-ui-fieldLayout-align-inline,
+       .oo-ui-radioOptionWidget,
+       .oo-ui-checkboxMultioptionWidget {
+               display: inline-block;
+               margin-right: @ooui-spacing-medium;
+       }
+
+       // Reduce label distance in flatlist
+       &.oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+               padding-bottom: 0;
+       }
 }
 
 // First selector is flatlist specific