Module:Flex columns/sandbox/styles.css
/* edit summary for the main module: invert media queries, remove float fallback as flex is well-supported by all MediaWiki-supported browsers, add gap using @supports fallback to padding and large note to go with it, remove unnecessary box-sizing */
/* I wonder why this clears, also seems suspect for a general flex-columns
* module, see below >div selector rules
*/
.flex-columns-container {
clear: both;
}
.flex-columns-container > .flex-columns-column {
display: flex;
flex-direction: column;
}
/* TODO: these two rules seem suspect for a general flex-columns module and
* should be moved to some portal-specific variant probably
* also would need to remove the rule declaring the columns to be display: flex
* and their associated flex-direction
*/
.flex-columns-container > .flex-columns-column > div {
flex: 1 0 auto;
}
.flex-columns-container > .flex-columns-column > div.flex-columns-noflex {
flex: 0;
}
/* the padding in the @supports not case really should just categorically be
* `gap` rules because having more than two columns flexing isn't pretty
* with the padding version. however, flex `gap` was released in 2018 for
* Firefox and 2020 for everyone else, so it's fairly new. honestly kind of
* surprised that css-sanitizer doesn't yell about it. some percent of browsers
* (~1.5% pageviews total) right now for the targeted environment (desktop) of
* these rules will interpret this as `gap` for grid, so they will have no
* padding and no flex `gap`. seems like a reasonable tradeoff
* TODO: remove @supports at-rule sometime in 2023 or 2024 when a more
* significant ratio of viewing browsers support `gap` in flex
*/
@supports (gap: 1em) {
@media screen and (min-width: 720px) {
.flex-columns-container {
gap: 1em;
}
}
}
@supports not (gap: 1em) {
@media screen and (min-width: 720px) {
.flex-columns-container > .flex-columns-column {
padding: 0 0.5em;
}
.flex-columns-container > .flex-columns-column:first-child {
padding-left: 0;
}
.flex-columns-container > .flex-columns-column:last-child {
padding-right: 0;
}
}
}
@media screen and (min-width: 720px) {
.flex-columns-container {
display: flex;
flex-wrap: wrap;
}
.flex-columns-container > .flex-columns-column {
flex: 1;
min-width: 360px;
}
}