X-Git-Url: https://git.heureux-cyclage.org/?p=lhc%2Fweb%2Fwiklou.git;a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.htmlform.ooui.styles.less;h=22dc924b22b7a331118b5ba7fd7a308366006629;hp=470d8264469232cfc75d082ed8ae98c400cf955c;hb=4f26aee5de1af360777bd516126f3af8d272d133;hpb=835a1c38f00b601fbcc81a2aad8639160ccb1bc1

diff --git a/resources/src/mediawiki.htmlform.ooui.styles.less b/resources/src/mediawiki.htmlform.ooui.styles.less
index 470d826446..22dc924b22 100644
--- a/resources/src/mediawiki.htmlform.ooui.styles.less
+++ b/resources/src/mediawiki.htmlform.ooui.styles.less
@@ -6,6 +6,7 @@
 @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;
@@ -15,15 +16,26 @@
 	// 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 );
+	.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 {
@@ -113,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;
+		}
+	}
+}