wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2025-01-05 19:34:14 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/resources/skins.vector.styles/layouts/toc/pinned.less

30 lines
1.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
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 ) {
Fix nonzebra sticky container scrolling behavior and scrollable indicator - Remove unnecessary CSS from old grid styles - Consolidate scrollable indicator styles, delete old styles Bug: T352464 Change-Id: Id33e6d99dba2c680f02b246bbccf26a2aa7e77d9
2023-12-01 16:46:56 +00:00
.vector-column-start .vector-sticky-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 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
}
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 {
padding-top: @padding-top-pinned-element;
padding-left: @spacing-subsection-toggle;
padding-right: @padding-horizontal-dropdown-menu-item;
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