resources/src/mediawiki.collapsiblefieldsetlayout.styles.less

   1 @import 'mediawiki.skin.variables.less';
   2 @import 'mediawiki.mixins.less';
   3
   4 .client-js .mw-collapsibleFieldsetLayout.mw-collapsible .oo-ui-fieldsetLayout-header {
   5         // Push legend up when JS is on, to increase clickable area.
   6         margin-top: -@spacing-50;
   7         margin-bottom: @spacing-50;
   8         // Add `padding-top` to make up for negative `margin` above.
   9         padding: @spacing-50;
  10         // Make space for toggle icon defined below.
  11         padding-left: @spacing-150;
  12
  13         .oo-ui-labelElement-label {
  14                 margin-bottom: 0;
  15         }
  16 }
  17
  18 // Trigger only when collapsible & JS is available via `.mw-collapsed`.
  19 .client-js .mw-collapsibleFieldsetLayout.mw-collapsed .oo-ui-fieldsetLayout-header {
  20         min-height: 30px;
  21         // Negative margin to match the reduced distance on the top caused by the previous rule.
  22         margin-bottom: -@spacing-75;
  23 }
  24
  25 .mw-collapsibleFieldsetLayout.mw-collapsible {
  26         .oo-ui-fieldsetLayout-header {
  27                 max-width: none;
  28         }
  29
  30         .mw-collapsible-toggle .oo-ui-iconElement-icon {
  31                 position: absolute;
  32                 top: 0;
  33                 left: 0;
  34                 // Special case: Reduce to `16px` icon size here.
  35                 min-width: @min-size-icon-small;
  36                 width: @size-icon-small;
  37                 margin-right: 0.5em;
  38         }
  39
  40         // When expanded: only 'collapse' icon visible
  41         .mw-collapsible-toggle .oo-ui-icon-expand {
  42                 display: none;
  43         }
  44
  45         // When collapsed: only 'expand' icon visible
  46         &.mw-collapsed {
  47                 .mw-collapsible-toggle .oo-ui-icon-expand {
  48                         display: inline-block;
  49                 }
  50
  51                 .mw-collapsible-toggle .oo-ui-icon-collapse {
  52                         display: none;
  53                 }
  54         }
  55 }