mediawiki-skins-Vector/resources/skins.vector.styles/components/StickyHeader.less

164 lines
4.7 KiB
Plaintext
Raw Normal View History

@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
@font-size-sticky-header-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
.vector-sticky-header {
width: 100%;
height: @height-sticky-header;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: @z-index-header;
transition: @transition-sticky-header;
display: none;
align-items: center;
margin: 0 auto;
background: @background-color-base;
background-color: #fffffff7;
border-bottom: @border-width-base @border-style-base @colorGray14;
// FIXME: Should this adapt to different thresholds? Ask Alex!
padding: 6px 8px 6px 10px;
justify-content: space-between;
box-sizing: border-box;
@media ( min-width: @min-width-desktop ) {
padding: 6px 25px;
max-width: @max-width-page-container + ( @padding-horizontal-page-container * 2 );
}
@media ( min-width: @min-width-desktop-wide ) {
padding: 6px 25px;
max-width: @max-width-page-container + ( @padding-horizontal-page-container-wide * 2 );
}
// Hide sticky header and it's children until visible class is applied to the body
.client-js.vector-sticky-header-enabled :not( .vector-sticky-header-visible ) & {
transform: translateY( -100% );
> div {
display: none;
}
}
// Hide sticky header for no-js users
.client-nojs & {
display: none;
}
// T298836 Only show sticky header at higher resolutions.
@media ( min-width: @min-width-desktop ) {
display: flex;
}
//
// Layout
//
&-start,
&-end,
&-icons,
&-context-bar {
display: flex;
align-items: center;
}
&-start {
flex-grow: 1;
min-width: 0;
}
//
// Components
//
&-context-bar {
border-left: @border-width-base @border-style-base #c8c8c8;
margin: 0 15px;
padding-left: 30px;
white-space: nowrap;
min-width: 0;
}
&-context-bar-primary {
overflow: hidden;
font-family: @font-family-serif;
// T296320 closest standardized option to 22px (24px)
font-size: @font-size-heading-2;
text-overflow: ellipsis;
// T300134 Prevent text from wrapping in the sticky header.
wbr {
display: none;
}
}
&-icons {
font-size: @font-size-sticky-header-links;
}
.vector-search-box {
// Hide the search box until the user toggles it.
display: none;
}
&.vector-header-search-toggled {
// .vector-sticky-header-search-toggle left border (1px) + left padding (12px)
// - .cdx-text-input__start-icon left offset (9px [1]) = 4px
// [1] see https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/text-input/TextInput.vue#257
@margin-start-search-box: 4px;
// .vector-sticky-header-search-toggle left border (1px) + left padding (12px)
// - .cdx-text-input__start-icon left offset (22px [2]) = -9px
// [2] see https://gerrit.wikimedia.org/r/plugins/gitiles/design/codex/+/refs/tags/v0.1.0-alpha.8/packages/codex/src/components/typeahead-search/TypeaheadSearch.vue#708
@margin-start-search-box-with-thumbnail: -9px;
.vector-sticky-header-search-toggle,
.vector-sticky-header-context-bar {
display: none;
}
.vector-search-box {
display: block;
margin-left: @margin-start-search-box;
}
// T296318 Decrease the start margin of the search box to account for the
// icon's increased start position when the search component has thumbnails.
.vector-search-box-show-thumbnail {
margin-left: @margin-start-search-box-with-thumbnail;
.cdx-text-input__start-icon {
color: @colorGray2;
}
}
}
}
@media ( min-width: @min-width-tablet ) {
.client-js.vector-sticky-header-enabled {
// T290518: When the sticky header is enabled (feature flag is on, js is
// enabled, and viewport is at higher resolutions), add scroll padding to the
// root element. This is needed so that the sticky header does not overlap the
// top of an element when the URI has a hash fragment (e.g. when the user clicks
// a jump link) and when the user tabs through elements in reverse order.
//
// Please note that this class must be independent of the
// .vector-sticky-header-visible class to correctly handle situations where the
// sticky header isn't visible yet but we still need scroll padding applied
// (e.g. when the user navigates to a page with a hash fragment in the URI).
scroll-padding-top: @height-sticky-header;
}
}
.client-js .vector-sticky-header-visible {
// T289817 Override other sticky element offsets to ensure that other
// sticky elements (i.e. table headers) appear below the sticky header.
//
// @stable See the Integration notes for developers section at
// https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Sticky_Header
.mw-sticky-header-element,
.charts-stickyhead th {
/* stylelint-disable-next-line declaration-no-important */
top: @height-sticky-header !important;
}
}