mediawiki.collapsiblefieldsetlayout.styles.less
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

mediawiki.collapsiblefieldsetlayout.styles.less
View Options

	@import 'mediawiki.skin.variables.less';
	@import 'mediawiki.mixins.less';

	.client-js .mw-collapsibleFieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
	// Push legend up when JS is on, to increase clickable area.
	margin-top: -@spacing-50;
	margin-bottom: @spacing-50;
	// Add `padding-top` to make up for negative `margin` above.
	padding: @spacing-50;
	// Make space for toggle icon defined below.
	padding-left: @spacing-150;

	.oo-ui-labelElement-label {
	margin-bottom: 0;
	}
	}

	// Trigger only when collapsible & JS is available via `.mw-collapsed`.
	.client-js .mw-collapsibleFieldsetLayout.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: -@spacing-75;
	}

	.mw-collapsibleFieldsetLayout.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: @min-size-icon-small;
	width: @size-icon-small;
	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;
	}
	}
	}