wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-13 16:38:44 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/layouts/toc/pinned.less

50 lines
2 KiB
Plaintext
Raw Normal View History

Remove common CSS module Bug: T345766 Change-Id: I57e388be4b620a437274524e20653ef9ba7289ed
2023-10-02 19:57:23 +00:00
@import '../../variables.less';
@import '../../mixins.less';
Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization Bug: T324877 Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2022-12-20 18:09:01 +00:00
.mw-table-of-contents-container {
// Needed for Grid-based layout
align-self: start;
height: 100%;
}
styles: Replace legacy Vector breakpoint tokens where applicable Replacing the legacy Vector breakpoint tokens with the Codex standard ones. All names have been unified, only some legacy values remain for backwards compatibility. Also - replacing a wrongly applied min-width with the correct max-width token, - replacing a width with an equal value min-width one and - removing the now equal value mobile min-width one. Note that we can't do some reference magic here alike `@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as this would take the Codex value from skin variables and not the legacy value. Also note, that we could move all those Vector legacy definitions into Vector's 'mediawiki.skin.variables.less' file(s), but that would mean that extensions don't rely on the Codex default values, but on Vector's and we want latter to move to the standard, also in foresight of further standardization to build for all feature teams like a shared Grid. Bug: T331403 Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
2023-10-19 07:10:22 +00:00
@media ( min-width: @min-width-breakpoint-desktop ) {
Clean up FIXMES now the cache has cleared Follow up to Iad8523037ed364f09962b2d6ca0a3d50d7bd2266 Bug: T346401 Change-Id: Ifa4ab87e43cf28143dc7d753e264d4f0957dcbfa
2023-09-14 19:56:06 +00:00
&.vector-feature-toc-pinned-clientpref-1 #mw-panel-toc {
[Refactor] Prepare existing styles for zebra module This refactor seeks to make it easier to separate feature flagged styles by wrapping the imports in a top-level feature-flag selector, e.g: .vector-feature-zebra-design-disabled { @import './layouts/preZebra.less'; } This change does the following: - Moves all file @imports to skin.less - Removes unnecessary @import from MainMenu.less - Moves .mixin-page-container() to mixins.less - Moves @min-width-supported variable to variables.less - Scopes existing Zebra styles at the skin.less file @import level - Removes selectors ending with ampersands The last changes makes it easer to reason about changes specifically when wrapping entire file imports in a selector since the ampersand ends up inheriting its value from the skin.less file. No visual differences are expected with this change. Bug: T332600 Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-18 21:57:55 +00:00
// Support: Chrome
// Work around sticky-positioned layers disabling subpixel text rendering (T327460).
// NOTE: This property has an effect similar to 'overflow: hidden', and will prevent elements
// inside of the panel from being rendered outside of its bounding box, even when they would
// be positioned there using absolute positioning, negative margin, transforms, etc.
// That's why the negative margins have to be applied here, instead of on #vector-toc.
contain: paint;
// Align the left edge of the TOC text with the page container
margin-left: -@spacing-subsection-toggle;
Work around sticky-positioned layers disabling subpixel rendering Adding 'contain: paint' to the TOC container works around the issue. This property is intended to prevent element's rendering from affecting other elements, so it makes sense that this works. https://developer.mozilla.org/en-US/docs/Web/CSS/contain Because this property also clips the rendering of the element to its bounding box (similar to 'overflow: hidden'), we need to move some negative margins to this element from its children, otherwise the TOC expand/collapse arrows would be cut off. Bug: T327460 Change-Id: I34f414a99608450882e83c0ff22e64c05dff8807
2023-01-20 03:21:13 +00:00
}
#vector-toc-pinned-container {
position: sticky;
Make space between top of TOC/Page tools and top of viewport/bottom of sticky header 30px Per T318169#8601576, the space between the top of the TOC and Page tools to the top of the viewport or bottom of the sticky header should be 30px. * Revises the page tools columnEnd grid to begin at the top of the titlebar to enable 30px of top padding on the page tools * Consolidates some styles in TableOfContentsPinned.less VISUAL CHANGE: table of contents moves down page. Bug: T318169 Bug: T319315 Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
2023-02-09 22:50:25 +00:00
top: 0;
[Refactor] Prepare existing styles for zebra module This refactor seeks to make it easier to separate feature flagged styles by wrapping the imports in a top-level feature-flag selector, e.g: .vector-feature-zebra-design-disabled { @import './layouts/preZebra.less'; } This change does the following: - Moves all file @imports to skin.less - Removes unnecessary @import from MainMenu.less - Moves .mixin-page-container() to mixins.less - Moves @min-width-supported variable to variables.less - Scopes existing Zebra styles at the skin.less file @import level - Removes selectors ending with ampersands The last changes makes it easer to reason about changes specifically when wrapping entire file imports in a selector since the ampersand ends up inheriting its value from the skin.less file. No visual differences are expected with this change. Bug: T332600 Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-18 21:57:55 +00:00
}
Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization Bug: T324877 Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2022-12-20 18:09:01 +00:00
Clean up FIXMES now the cache has cleared Follow up to Iad8523037ed364f09962b2d6ca0a3d50d7bd2266 Bug: T346401 Change-Id: Ifa4ab87e43cf28143dc7d753e264d4f0957dcbfa
2023-09-14 19:56:06 +00:00
&.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container {
[Refactor] Prepare existing styles for zebra module This refactor seeks to make it easier to separate feature flagged styles by wrapping the imports in a top-level feature-flag selector, e.g: .vector-feature-zebra-design-disabled { @import './layouts/preZebra.less'; } This change does the following: - Moves all file @imports to skin.less - Removes unnecessary @import from MainMenu.less - Moves .mixin-page-container() to mixins.less - Moves @min-width-supported variable to variables.less - Scopes existing Zebra styles at the skin.less file @import level - Removes selectors ending with ampersands The last changes makes it easer to reason about changes specifically when wrapping entire file imports in a selector since the ampersand ends up inheriting its value from the skin.less file. No visual differences are expected with this change. Bug: T332600 Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-18 21:57:55 +00:00
// Default spacing separating the sidebar TOC from the main menu.
margin-top: 1.5em;
}
Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization Bug: T324877 Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2022-12-20 18:09:01 +00:00
[anon prefs] TOC pinned / unpinned - Status should persist across page views for anonymous users - Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php. - Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1 Bug: T316060 Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
2023-09-14 15:27:58 +00:00
// FIXME: Remove vector-feature-toc-pinned-(enabled|disabled) when cache allows.
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-clientpref-1 #vector-toc-pinned-container,
Scope styles related to zebra feature flag This change scopes the styles related to the Zebra update by wrapping the imports in a top-level feature flag selector, i.e .vector-feature-zebra-design-enabled { @import "./screen.less" } To account for this extra selector, ampersands are added wherever the html element is targeted in the affected files. This applies to both zebra enabled and disabled files. getDefaultModules() is used in SkinVector22.php to conditionally load the new skins.vector.zebra.styles module when the feature is enabled. Bug: T332600 Change-Id: I5e673df383ff31f296010f982e4188c82f095590
2023-04-19 20:57:36 +00:00
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled #vector-toc-pinned-container {
[Refactor] Prepare existing styles for zebra module This refactor seeks to make it easier to separate feature flagged styles by wrapping the imports in a top-level feature-flag selector, e.g: .vector-feature-zebra-design-disabled { @import './layouts/preZebra.less'; } This change does the following: - Moves all file @imports to skin.less - Removes unnecessary @import from MainMenu.less - Moves .mixin-page-container() to mixins.less - Moves @min-width-supported variable to variables.less - Scopes existing Zebra styles at the skin.less file @import level - Removes selectors ending with ampersands The last changes makes it easer to reason about changes specifically when wrapping entire file imports in a selector since the ampersand ends up inheriting its value from the skin.less file. No visual differences are expected with this change. Bug: T332600 Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-18 21:57:55 +00:00
// Align TOC with bottom of title when main menu is not pinned but the TOC is
margin-top: @margin-top-pinned-toc;
}
Update TOC spacing to match spec Bug: T324877 Change-Id: Ifb51dd8b37c8489cd1e9e74ec50e6d2e84411845
2022-12-22 23:10:29 +00:00
[Refactor] Prepare existing styles for zebra module This refactor seeks to make it easier to separate feature flagged styles by wrapping the imports in a top-level feature-flag selector, e.g: .vector-feature-zebra-design-disabled { @import './layouts/preZebra.less'; } This change does the following: - Moves all file @imports to skin.less - Removes unnecessary @import from MainMenu.less - Moves .mixin-page-container() to mixins.less - Moves @min-width-supported variable to variables.less - Scopes existing Zebra styles at the skin.less file @import level - Removes selectors ending with ampersands The last changes makes it easer to reason about changes specifically when wrapping entire file imports in a selector since the ampersand ends up inheriting its value from the skin.less file. No visual differences are expected with this change. Bug: T332600 Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
2023-04-18 21:57:55 +00:00
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
#vector-toc-pinned-container .vector-toc {
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
padding-top: @padding-top-pinned-element;
padding-left: @spacing-subsection-toggle;
padding-right: @padding-horizontal-dropdown-menu-item;
.mixin-vector-scroll-indicator();
Factor out TableOfContentsPinned.less and rename TableOfContentsCollapsed for better CSS organization Bug: T324877 Change-Id: I93182573a2ae718589ec7d448dd97a160ecd81a2
2022-12-20 18:09:01 +00:00
}
}
Reference in a new issue Copy permalink