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.
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
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)
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';
28 ol.mw-collapsible:before,
29 ul.mw-collapsible:before,
30 .mw-collapsible-toggle-li {
32 * Rather than inherit any margins from the general li selector - make sure this is explicit
40 // Reset when mw-collapsible-toggle-li is rendered
41 ol.mw-made-collapsible:before,
42 ul.mw-made-collapsible:before {
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}]';
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}]';
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
68 // Special case for table where first child is caption element
69 table.mw-collapsible:not( @{exclude} ) > caption:first-child:after {
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)
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 {
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 {
95 /* For collapsible elements in the content area, override the alginment based on the content language. */
98 .mw-content-rtl .mw-content-ltr {
99 .mw-collapsible:not( @{exclude} ) th:before,
100 .mw-collapsible:not( @{exclude} ):before,
101 .mw-collapsible-toggle {
108 .mw-content-ltr .mw-content-rtl {
109 .mw-collapsible:not( @{exclude} ) th:before,
110 .mw-collapsible:not( @{exclude} ):before,
111 .mw-collapsible-toggle {
116 /* list-items go as wide as their parent element, don't float them inside list items */
120 .mw-content-ltr .mw-content-rtl li,
121 .mw-content-rtl .mw-content-ltr li {
122 .mw-collapsible-toggle {
127 fieldset.mw-collapsible .mw-collapsible-toggle {
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