resources/src/jquery/jquery.makeCollapsible.styles.less

   1 /**
   2  * These rules prevent re-flows relating to collapsible on-wiki elements (T42812).
   3  * This is done by temporarily creating a pseudo element in the place that JavaScript will insert
   4  * a toggle control. The same CSS rules that control the positioning of the toggle control will apply
   5  * to the pseudo element. When the JavaScript has executed
   6  * (See corresponding non-render blocking CSS in jquery.makeCollapsible)
   7  * all pseudo elements will be removed.
   8  *
   9  * Currently we support all the examples on [[mw:Manual:Collapsible_elements/Demo/Simple]]
  10  * All examples on [[mw:Manual:Collapsible_elements/Demo/Advanced]] are supported with the following
  11  * exceptions
  12  * - Custom collapsible 4 (table-row)
  13  * -- CSS selector would be too complicated
  14  * - Collapsible div nested in collapsed div
  15  * -- Given it's not easy to identify the collapsed content via CSS, text will be shown until
  16  *    JavaScript has loaded
  17  * - "Combination example"
  18  * -- At a later time, we may want to support the use of of `attr`, but given the code
  19  *    complexity we will not for the time being (see https://davidwalsh.name/css-content-attr)
  20  */
  21
  22 // This selector is used frequently in the code to indicate that the JavaScript has successfully completed
  23 // it's execution and pseudo elements can be disabled. For readability and maintainability it is separated
  24 // as a LESS variable.
  25 @exclude: ~'.mw-made-collapsible';
  26
  27 .client-js {
  28         ol.mw-collapsible:before,
  29         ul.mw-collapsible:before,
  30         .mw-collapsible-toggle-li {
  31                 /*
  32                 Rather than inherit any margins from the general li selector - make sure this is explicit
  33                 to avoid reflows
  34                 */
  35                 display: list-item;
  36                 list-style: none;
  37                 margin-bottom: 0.1em;
  38         }
  39
  40         // Reset when mw-collapsible-toggle-li is rendered
  41         ol.mw-made-collapsible:before,
  42         ul.mw-made-collapsible:before {
  43                 display: none;
  44         }
  45
  46         ol.mw-collapsible:not( @{exclude} ):before,
  47         ul.mw-collapsible:not( @{exclude} ):before,
  48         // Where the tbody or thead is the first child of the collapsible table
  49         table.mw-collapsible:not( @{exclude} ) :first-child tr:first-child th:last-child:before,
  50         table.mw-collapsible:not( @{exclude} ) > caption:first-child:after,
  51         div.mw-collapsible:not( @{exclude} ):before {
  52                 content: '[@{msg-collapsible-collapse}]';
  53         }
  54
  55         td.mw-collapsed:not( @{exclude} ):before,
  56         table.mw-collapsed:not( @{exclude} ) :first-child tr:first-child th:last-child:before,
  57         table.mw-collapsed:not( @{exclude} ) > caption:first-child:after,
  58         div.mw-collapsed:not( @{exclude} ):before {
  59                 content: '[@{msg-collapsible-expand}]';
  60         }
  61
  62         // Any element with id beginning `mw-customcollapsible` will have special treatment
  63         .mw-collapsible[ id^='mw-customcollapsible' ] th:before,
  64         .mw-collapsible[ id^='mw-customcollapsible' ]:before {
  65                 content: none !important; // stylelint-disable-line declaration-no-important
  66         }
  67
  68         // Special case for table where first child is caption element
  69         table.mw-collapsible:not( @{exclude} ) > caption:first-child:after {
  70                 float: none;
  71                 display: block;
  72         }
  73
  74         // Use the exclude selector to ensure animations do not break
  75         .mw-collapsed:not( @{exclude} ) {
  76                 // Avoid FOUC/reflows on collapsed elements by making sure they are opened by default (T42812)
  77                 > p,
  78                 > table,
  79                 > thead + tbody, // 'https://www.mediawiki.org/wiki/Manual:Collapsible_elements/Demo/Simple#Collapsed_by_default'
  80                 tr:not( :first-child ),
  81                 .mw-collapsible-content {
  82                         display: none;
  83                 }
  84         }
  85 }
  86
  87 /* Collapsible elements in the UI (outside of the content area) are not in either .mw-content-ltr or
  88  * .mw-content-rtl. Align them based on the user language. */
  89 .mw-collapsible:not( @{exclude} ) th:before,
  90 .mw-collapsible:not( @{exclude} ):before,
  91 .mw-collapsible-toggle {
  92         float: right;
  93 }
  94
  95 /* For collapsible elements in the content area, override the alginment based on the content language.  */
  96 /* @noflip */
  97 .mw-content-ltr,
  98 .mw-content-rtl .mw-content-ltr {
  99         .mw-collapsible:not( @{exclude} ) th:before,
 100         .mw-collapsible:not( @{exclude} ):before,
 101         .mw-collapsible-toggle {
 102                 float: right;
 103         }
 104 }
 105
 106 /* @noflip */
 107 .mw-content-rtl,
 108 .mw-content-ltr .mw-content-rtl {
 109         .mw-collapsible:not( @{exclude} ) th:before,
 110         .mw-collapsible:not( @{exclude} ):before,
 111         .mw-collapsible-toggle {
 112                 float: left;
 113         }
 114 }
 115
 116 /* list-items go as wide as their parent element, don't float them inside list items */
 117 li,
 118 .mw-content-ltr li,
 119 .mw-content-rtl li,
 120 .mw-content-ltr .mw-content-rtl li,
 121 .mw-content-rtl .mw-content-ltr li {
 122         .mw-collapsible-toggle {
 123                 float: none;
 124         }
 125 }
 126
 127 fieldset.mw-collapsible .mw-collapsible-toggle {
 128         position: absolute;
 129         right: 0;
 130         z-index: 1;
 131 }
 132
 133 // special treatment for list items to match above
 134 // !important necessary to override overly-specific float left and right above.
 135 ol.mw-collapsible:not( @{exclude} ):before,
 136 ul.mw-collapsible:not( @{exclude} ):before {
 137         float: none !important; // stylelint-disable-line declaration-no-important
 138 }