diff --git a/resources/mixins.less b/resources/mixins.less index 65d756df..c8111348 100644 --- a/resources/mixins.less +++ b/resources/mixins.less @@ -155,3 +155,31 @@ box-shadow: 0 19px 38px rgba( 0, 0, 0, 0.075 ), 0 15px 12px rgba( 0, 0, 0, 0.055 ); // Dialogs } } + +// Borrowed from Mediawiki core 1.35 +// “Clearfix Reloaded” Mixin +// The mixin is used on a container with floating children. +// Margin collapsing is a feature, not a bug, hence relying on `display: block` as default. +// With `.mixin-clearfix( @collapse: false; );` you call it to let `margin`s not collapse. +// See https://www.cssmojo.com/the-very-latest-clearfix-reloaded/ +// In future we might replace the `&:after` pseudo-element with +// `display: flow-root;` altogether. +// Support: Firefox 3.5+, Safari 4+, Chrome, Opera 15+, IE 8+ +.mixin-clearfix( @collapse: true ) { + &:after { + clear: both; + // Margin collapsing as feature. Apply it. + & when ( @collapse ) { + content: ''; + display: block; + } + } + // Margin collapsing as bug. Prevent it. + & when not ( @collapse ) { + &:before, + &:after { + content: ''; + display: table; + } + } +} diff --git a/resources/skins.citizen.styles/common/content.less b/resources/skins.citizen.styles/common/content.less index 603ea63a..339ade65 100644 --- a/resources/skins.citizen.styles/common/content.less +++ b/resources/skins.citizen.styles/common/content.less @@ -144,6 +144,7 @@ position: relative; .content-center; z-index: 0; + .mixin-clearfix(); p { overflow-wrap: break-word;