mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 15:53:46 +00:00
Ensure TOC in sticky header has correct margin, refactor TOC styles to be more consistent
Results in 16 visual progressions - Simplify/remove mixins in TableOfContentsUnpinned.less Bug: T325554 Change-Id: I8246b6ebbf91deac7896fd46834f090e259d75ca
This commit is contained in:
bwang
parent
7f4f36c71f
commit
8539ab3bd8
|
|
@ -15,4 +15,17 @@
|
|||
flex-grow: 1;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.vector-page-titlebar-toc {
|
||||
&.ve-active {
|
||||
display: none !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
|
||||
.vector-menu-heading {
|
||||
// Override the default button styles so the ToC button is slightly shorter when collapsed into the page title
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
padding: 7px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,111 +3,44 @@
|
|||
|
||||
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
|
||||
|
||||
.vector-feature-page-tools-enabled #vector-page-titlebar-toc-unpinned-container,
|
||||
.vector-feature-page-tools-enabled #vector-sticky-header-toc-unpinned-container {
|
||||
.vector-toc {
|
||||
.vector-pinnable-header {
|
||||
padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
|
||||
}
|
||||
.vector-feature-page-tools-enabled .vector-unpinned-container .vector-toc {
|
||||
// Adjust TOC spacing when unpinned
|
||||
.vector-pinnable-header {
|
||||
padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
|
||||
}
|
||||
|
||||
.vector-toc-contents {
|
||||
padding-right: @padding-horizontal-dropdown-menu-item;
|
||||
padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mixin-toc-dropdown-button() {
|
||||
display: none;
|
||||
margin-right: 4px;
|
||||
z-index: @z-index-menu;
|
||||
// Override background color for when the TOC button overlaps content
|
||||
// as a fixed element when the page is scrolled down.
|
||||
background-color: @background-color-base;
|
||||
}
|
||||
|
||||
#vector-toc-collapsed-button {
|
||||
.mixin-toc-dropdown-button();
|
||||
}
|
||||
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.client-nojs {
|
||||
#vector-toc-collapsed-button {
|
||||
display: block;
|
||||
// Override the default button styles so the ToC button is slightly shorter when collapsed into the page title
|
||||
padding: 7px 12px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: @colorGray15;
|
||||
}
|
||||
}
|
||||
|
||||
#vector-toc-pinned-container {
|
||||
// Override TOC container's sticky positioning
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.sidebar-toc,
|
||||
.vector-toc {
|
||||
.mixin-toc-collapsed();
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 36px; // TOC button height
|
||||
// FIXME: Don't use a magic number. This used to be tied to the private variable in core
|
||||
// @icon-padding-md so perhaps this needs to make use of the flush classes?
|
||||
left: -12px;
|
||||
margin-top: @padding-top-content; // Account for padding-top from .mw-body
|
||||
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc,
|
||||
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
|
||||
// Hide the TOC when the button is not checked
|
||||
display: block;
|
||||
}
|
||||
.vector-toc-contents {
|
||||
padding-right: @padding-horizontal-dropdown-menu-item;
|
||||
padding-left: @padding-horizontal-dropdown-menu-item + @spacing-subsection-toggle;
|
||||
}
|
||||
}
|
||||
|
||||
// TOC dropdown/button styles
|
||||
#vector-toc-collapsed-button,
|
||||
.vector-sticky-header-toc,
|
||||
.vector-page-titlebar-toc {
|
||||
.mixin-toc-dropdown-button();
|
||||
display: none;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&.ve-active {
|
||||
display: none !important; /* stylelint-disable-line declaration-no-important */
|
||||
}
|
||||
// TOC styles when unpinned
|
||||
.mixin-toc-unpinned() {
|
||||
display: block;
|
||||
|
||||
.vector-menu-heading {
|
||||
// Override the default button styles so the ToC button is slightly shorter when collapsed into the page title
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
padding: 7px 12px;
|
||||
}
|
||||
// Shared unpinned TOC styles, applies across all unpinned cases (page titlebar, sticky header, floating)
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.sidebar-toc,
|
||||
.vector-toc {
|
||||
// T316056 Remove TOC menu fixed width and apply min/max-width
|
||||
width: max-content;
|
||||
min-width: 200px;
|
||||
// Collapsed TOC should be smaller than 85% of the content container (51em) and 75vw
|
||||
max-width: ~'min( 0.85 * @{max-width-content-container}, 75vw )'; // min( 51em, 75vw )
|
||||
}
|
||||
}
|
||||
|
||||
// Shared collapsed TOC styles, applies across all cases (page titlebar, sticky header, floating)
|
||||
.mixin-toc-collapsed() {
|
||||
// T316056 Remove TOC menu fixed width and apply min/max-width
|
||||
width: max-content;
|
||||
min-width: 200px;
|
||||
// Collapsed TOC should be smaller than 85% of the content container (51em) and 75vw
|
||||
max-width: ~'min( 0.85 * @{max-width-content-container}, 75vw )'; // min( 51em, 75vw )
|
||||
}
|
||||
|
||||
// TOC styles when in page titlebar
|
||||
.mixin-toc-collapsed-page-titlebar() {
|
||||
.vector-page-titlebar-toc {
|
||||
display: block;
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.sidebar-toc,
|
||||
.vector-toc {
|
||||
.mixin-toc-collapsed();
|
||||
}
|
||||
}
|
||||
.vector-feature-page-tools-disabled .vector-unpinned-container .vector-toc {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.client-js {
|
||||
|
|
@ -130,7 +63,9 @@
|
|||
//
|
||||
// TOC in page titlebar on narrow screens
|
||||
//
|
||||
.mixin-toc-collapsed-page-titlebar();
|
||||
.vector-page-titlebar-toc {
|
||||
.mixin-toc-unpinned();
|
||||
}
|
||||
|
||||
//
|
||||
// TOC floating on narrow screens when below page title
|
||||
|
|
@ -141,6 +76,10 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
// Override background color for when the TOC button overlaps content
|
||||
// as a fixed element when the page is scrolled down.
|
||||
background-color: @background-color-base;
|
||||
z-index: @z-index-menu;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -150,16 +89,64 @@
|
|||
// TOC in page titlebar
|
||||
//
|
||||
.vector-toc-unpinned:not( .vector-sticky-header-visible ) {
|
||||
.mixin-toc-collapsed-page-titlebar();
|
||||
.vector-page-titlebar-toc {
|
||||
.mixin-toc-unpinned();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// TOC in sticky header
|
||||
//
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.vector-toc-unpinned.vector-sticky-header-visible .sidebar-toc,
|
||||
.vector-toc-unpinned.vector-sticky-header-visible .vector-toc {
|
||||
.mixin-toc-collapsed();
|
||||
.vector-toc-unpinned.vector-sticky-header-visible {
|
||||
.vector-sticky-header-toc {
|
||||
.mixin-toc-unpinned();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// No-js TOC
|
||||
//
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.client-nojs {
|
||||
#vector-toc-collapsed-button {
|
||||
display: block;
|
||||
// Override the default button styles so the ToC button is slightly shorter when collapsed into the page title
|
||||
padding: 7px 12px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: @colorGray15;
|
||||
}
|
||||
}
|
||||
|
||||
#vector-toc-pinned-container {
|
||||
// Override TOC container's sticky positioning
|
||||
position: relative;
|
||||
.mixin-toc-unpinned();
|
||||
}
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
.sidebar-toc,
|
||||
.vector-toc {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 36px; // TOC button height
|
||||
// FIXME: Don't use a magic number. This used to be tied to the private variable in core
|
||||
// @icon-padding-md so perhaps this needs to make use of the flush classes?
|
||||
left: -12px;
|
||||
margin-top: @padding-top-content; // Account for padding-top from .mw-body
|
||||
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
// FIXME: Remove all .sidebar-toc selectors after I5b9228380f5c4674ef424d33127a5cb4010822da is in prod for 5 days
|
||||
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .sidebar-toc,
|
||||
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {
|
||||
// Hide the TOC when the button is not checked
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue