Page MenuHomeWickedGov Phorge
Files F4107196

OverflowElements.less
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

OverflowElements.less
View Options

.mask-gradient(@direction, @color1, @color2, @color3: null, @color4: null) {
& when (@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 );
}
}
.hideOverflowButton() {
visibility: hidden;
pointer-events: none;
}
.showOverflowButton() {
z-index: @z-index-stacking-3;
visibility: visible;
pointer-events: auto;
}
// Elements enhanced by overflowElements.js
.citizen-overflow {
&-wrapper {
position: relative;
display: flex; /* So that it respects float elements (#878) */
max-width: max-content;
&:has( .citizen-overflow-content > .wikitable ) {
margin-block: var( --space-md );
border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-border );
}
&:has( .citizen-overflow-content > .wikitable--fluid ) {
max-width: none;
}
}
&-content {
width: 100%;
overflow: auto hidden;
> .wikitable {
display: table;
max-width: none;
/* Handle margin and box-shadow on outer wrapper */
margin-block: 0;
overflow: initial;
box-shadow: none;
}
.citizen-overflow--left > & {
.mask-gradient(90deg, transparent, #000 var( --overflow-gradient-size ));
}
.citizen-overflow--right > & {
.mask-gradient(270deg, transparent, #000 var( --overflow-gradient-size ));
}
.citizen-overflow--left.citizen-overflow--right > & {
.mask-gradient(90deg, transparent, #000 var( --overflow-gradient-size ), #000 ~'calc( 100% - var( --overflow-gradient-size ) )', transparent);
}
&:has( .citizen-overflow-content-sticky-header ) {
// We need to apply mask-image to hide the fixed position sticky header (#991)
-webkit-mask-image: linear-gradient( 90deg, #000, #000 );
mask-image: linear-gradient( 90deg, #000, #000 );
}
&-sticky-header {
--citizen-overflow-scroll-x: 0; // default value to be overriden
position: fixed;
top: 0;
z-index: @z-index-above-content;
border-bottom: var( --border-width-base ) solid var( --border-color-base );
transform: ~'translate( calc( var( --citizen-overflow-scroll-x ) * -1 ), var( --height-sticky-header ) )';
.mixin-citizen-sticky-header-background;
}
}
&-nav {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
pointer-events: none;
}
&-navButton {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 100%;
padding: 0;
appearance: none;
cursor: pointer;
background: transparent;
border: 0;
border-radius: var( --border-radius-medium );
.hideOverflowButton();
&::before {
width: 1.25rem;
}
&-left {
.citizen-overflow--left & {
.showOverflowButton();
}
&::before {
transform: rotate( -90deg );
}
}
&-right {
.citizen-overflow--right & {
.showOverflowButton();
}
&::before {
transform: rotate( 90deg );
}
}
&:hover {
background-color: var( --background-color-button-quiet--hover );
}
&:active {
background-color: var( --background-color-button-quiet--active );
}
}
}
.citizen-animations-ready .citizen-overflow-content {
scroll-behavior: smooth;
}

File Metadata

Mime Type
text/plain
Expires
Tue, Aug 18, 19:56 (2 w, 3 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
4a/a2/610522c6a9e99460b01a65e10339
Default Alt Text
OverflowElements.less (3 KB)

Event Timeline