X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.htmlform.ooui.styles.less;h=22dc924b22b7a331118b5ba7fd7a308366006629;hb=5ca68877a9a2dc89f9525a6528bf3a40a4920469;hp=18fb4a223833f44a3543fd5bcd6f89e02d5553b3;hpb=8c9de54eef541b4e5997f0d40f1619ae84b0b3a4;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less
index 18fb4a2238..22dc924b22 100644
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -1,16 +1,41 @@
 @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`
 
+@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 {
@@ -80,11 +105,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
@@ -93,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;
+		}
+	}
+}