Page MenuHomeWickedGov Phorge
Files F5970857

PinnableElement.less
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

PinnableElement.less
View Options

/**
* PinnableElement
* Pinned containers are typically dropdown menus that have been
* placed in a sidebar column, e.g. page tools menu, main menu.
*/
.vector-pinnable-element {
font-size: @font-size-dropdown;
}
.vector-pinned-container {
.mixin-vector-content-box();
padding: 0 @padding-horizontal-dropdown-menu;
margin-bottom: 2rem;
display: none;
// If there is no display grid support we remove pinnable elements
@supports ( display: grid ) {
display: block;
}
}
.vector-column-start,
.vector-column-end {
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460, T373066).
// This must be applied to the possible parent elements of .vector-sticky-pinned-container.
contain: paint;
}
.vector-sticky-pinned-container {
.mixin-vector-scrollable-with-fade();
// Applies styles for making a pinned element sticky
position: sticky;
top: @grid-row-gap;
// Border-box changes the height calculation.
box-sizing: border-box;
// Height is viewport height - row gap above and below the container.
max-height: ~'calc( 100vh - (@{grid-row-gap} * 2) )';
}
@media ( max-width: @max-width-breakpoint-tablet ) {
/**
* At lower resolutions, we want to hide the pinned containers when JS is enabled since these
* elements collapse (become unpinned) at this resolution via PinnableElement.js.
* Although this is handled in JS, this rule prevents the pinned menu from
* appearing on pageload, at low resolutions, before the JS kicks in.
*/
.client-js .vector-pinned-container {
display: none;
}
/**
* T357022 Sticky pinned containers have an ::after psuedo-element used to indicate the
* container is scrollable. On lower resolutions sticky pinned containers will always
* be empty. We need to set the container to display: none to prevent the psuedo-element
* height from affecting the layout
*/
.client-js .vector-sticky-pinned-container {
display: none;
}
}

File Metadata

Mime Type
text/plain
Expires
Sat, Oct 3, 14:47 (18 h, 17 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
aa/ee/5df16bb5190b3840bf80d1d79fdf
Default Alt Text
PinnableElement.less (1 KB)

Event Timeline