mediawiki-skins-Citizen/resources/skins.citizen.styles/components/OverflowElements.less
2024-05-27 17:53:55 -04:00

43 lines
1.1 KiB
Plaintext

@overflow-affordnance-size: 2rem;
.mask-gradient(@direction, @color1, @color2, @color3: null , @color4: null) {
-webkit-mask-image: linear-gradient( @direction, @color1, @color2 );
mask-image: linear-gradient( @direction, @color1, @color2 );
& when not(@color3 = null), not(@color4 = null) {
-webkit-mask-image: linear-gradient( @direction, @color1, @color2, @color3, @color4 );
mask-image: linear-gradient( @direction, @color1, @color2, @color3, @color4 );
}
}
// TODO: Revisit on MW 1.43 since Minerva table styles are merged upstream
table {
display: block;
max-width: max-content; // Needed for the border
overflow-x: auto;
}
// Elements enhanced by overflowElements.js
.citizen-overflow {
&-wrapper {
overflow-x: auto;
table {
display: table;
overflow: initial;
}
}
&--left {
.mask-gradient(90deg, transparent, #000 @overflow-affordnance-size);
}
&--right {
.mask-gradient(270deg, transparent, #000 @overflow-affordnance-size);
}
&--left&--right {
.mask-gradient(90deg, transparent, #000 @overflow-affordnance-size, #000 ~'calc( 100% - @{overflow-affordnance-size} )', transparent);
}
}