Merge "resourceloader: Reduce severity of unknown page module warning"

[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 f356fa2..22dc924 100644 (file)
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -6,13 +6,36 @@
 @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-small: 8 / @ooui-font-size-browser / @ooui-font-size-base; // equals `0.57142857em`≈`8px`
 @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`
 @ooui-padding-horizontal: 12 / @ooui-font-size-browser / @ooui-font-size-base;
 @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;
+
+       .client-js & .oo-ui-fieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
+               // Push legend up when JS is on, to increase clickable area.
+               margin-top: -@ooui-spacing-small;
+               margin-bottom: @ooui-spacing-small;
+               // Add `padding-top` to make up for negative `margin` above.
+               padding: @ooui-spacing-small;
+               // Make space for toggle icon defined below.
+               padding-left: 24 / @ooui-font-size-browser / @ooui-font-size-base;
+
+               .oo-ui-labelElement-label {
+                       margin-bottom: 0;
+               }
+       }
+
+       // Trigger only when collapsible & JS is available via `.mw-collapsed`.
+       .client-js & .oo-ui-fieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
+               min-height: 30px;
+               // Negative margin to match the reduced distance on the top caused by the previous rule.
+               margin-bottom: -@ooui-spacing-medium;
+       }
 }
 
 .mw-htmlform-ooui {
@@ -102,3 +125,35 @@
 .mw-htmlform-ooui .mw-htmlform-submit-buttons {
        margin-top: @ooui-spacing-medium;
 }
+
+.oo-ui-fieldsetLayout.mw-collapsible {
+       .oo-ui-fieldsetLayout-header {
+               max-width: none;
+       }
+
+       .mw-collapsible-toggle .oo-ui-iconElement-icon {
+               position: absolute;
+               top: 0;
+               left: 0;
+               // Special case: Reduce to `16px` icon size here.
+               min-width: 16px;
+               width: 16 / @ooui-font-size-browser / @ooui-font-size-base;
+               margin-right: 0.5em;
+       }
+
+       // When expanded: only 'collapse' icon visible
+       .mw-collapsible-toggle .oo-ui-icon-expand {
+               display: none;
+       }
+
+       // When collapsed: only 'expand' icon visible
+       &.mw-collapsed {
+               .mw-collapsible-toggle .oo-ui-icon-expand {
+                       display: inline-block;
+               }
+
+               .mw-collapsible-toggle .oo-ui-icon-collapse {
+                       display: none;
+               }
+       }
+}