Thijs/wiki.techinc.nl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge "Reduce FOUC/reflows when using .mw-collapsible-toggle-placeholder"

Browse source
This commit is contained in:
jenkins-bot 2024-04-26 00:30:22 +00:00 committed by Gerrit Code Review
commit a240214347
1 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
resources/src/jquery/jquery.makeCollapsible.styles.less
View file

@ -44,6 +44,7 @@
}
// table.: Where the tbody or thead is the first child of the collapsible table
.mw-collapsible:not( @{exclude} ) .mw-collapsible-toggle-placeholder:before,
ol.mw-collapsible:not( @{exclude} ):before,
ul.mw-collapsible:not( @{exclude} ):before,
table.mw-collapsible:not( @{exclude} ) :first-child tr:first-child th:last-child:before,
@ -52,6 +53,7 @@
content: '[@{msg-collapsible-collapse}]';
}
.mw-collapsed:not( @{exclude} ) .mw-collapsible-toggle-placeholder:before,
td.mw-collapsed:not( @{exclude} ):before,
table.mw-collapsed:not( @{exclude} ) :first-child tr:first-child th:last-child:before,
table.mw-collapsed:not( @{exclude} ) > caption:first-child:after,
@ -65,6 +67,13 @@
content: none !important; // stylelint-disable-line declaration-no-important
}
// Any element with a placeholder toggle will have special treatment
// (this is a separate rule, because :has() is not supported by all browsers yet)
.mw-collapsible:not( @{exclude} ):has( .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder ) th::before,
.mw-collapsible:not( @{exclude} ):has( .mw-collapsible-toggle, .mw-collapsible-toggle-placeholder )::before {
content: none !important; // stylelint-disable-line declaration-no-important
}
// Special case for table where first child is caption element
table.mw-collapsible:not( @{exclude} ) > caption:first-child:after {
float: none;
@ -89,6 +98,7 @@
* .mw-content-rtl. Align them based on the user language. */
.mw-collapsible:not( @{exclude} ) th:before,
.mw-collapsible:not( @{exclude} ):before,
.mw-collapsible-toggle-placeholder,
.mw-collapsible-toggle {
float: right;
}
@ -99,6 +109,7 @@
.mw-content-rtl .mw-content-ltr {
.mw-collapsible:not( @{exclude} ) th:before,
.mw-collapsible:not( @{exclude} ):before,
.mw-collapsible-toggle-placeholder,
.mw-collapsible-toggle {
float: right;
}
@ -109,6 +120,7 @@
.mw-content-ltr .mw-content-rtl {
.mw-collapsible:not( @{exclude} ) th:before,
.mw-collapsible:not( @{exclude} ):before,
.mw-collapsible-toggle-placeholder,
.mw-collapsible-toggle {
float: left;
}
@ -120,6 +132,7 @@ li,
.mw-content-rtl li,
.mw-content-ltr .mw-content-rtl li,
.mw-content-rtl .mw-content-ltr li {
.mw-collapsible-toggle-placeholder,
.mw-collapsible-toggle {
float: none;
}