@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;
// 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 {
.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;
+ }
+ }
+}