mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-24 07:43:47 +00:00
Remove CSS selectors for Page Tools feature flag
This removes CSS selectors associated with the Page tools feature flag, i.e. `vector-feature-page-tools-disabled` as well as `vector-feature-page-tools-enabled` by removing the 'disabled' styles and integrating the 'enabled' styles into the default page tools code. Bug: T332090 Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
This commit is contained in:
Jan Drewniak
bwang
parent
1c650d4f25
commit
3aaf8666cd
|
|
@ -32,12 +32,6 @@
|
|||
margin-left: -1px;
|
||||
}
|
||||
|
||||
// Remove this mixin after VectorPageTools is enabled everywhere
|
||||
.mixin-vector-dropdown-menu-item-deprecated() {
|
||||
min-height: @height-dropdown-menu-item;
|
||||
padding: @padding-dropdown-menu-item;
|
||||
}
|
||||
|
||||
.mixin-vector-dropdown-menu-item() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -99,10 +99,6 @@
|
|||
@font-size-nav-main-body: unit( 12 / @font-size-browser, em );
|
||||
@margin-start-nav-main-body: 0.5em;
|
||||
|
||||
// Navigation: Portal
|
||||
// Font size of the Portal links.
|
||||
@font-size-portal-list-item: @font-size-nav-main-body;
|
||||
|
||||
// Margin space from the start of the Portal (left edge in LTR
|
||||
// languages).
|
||||
@margin-start-portal: 0.7em;
|
||||
|
|
@ -130,16 +126,10 @@
|
|||
|
||||
// Dropdowns
|
||||
@height-dropdown-menu-item: unit( 32 / @font-size-browser, rem );
|
||||
// Remove this variable after VectorPageTools is enabled everywhere
|
||||
@padding-dropdown-menu-item: 0 12px;
|
||||
@padding-vertical-dropdown-menu-item: 6px;
|
||||
@padding-horizontal-dropdown-menu-item: 14px;
|
||||
@font-size-dropdown: unit( @font-size-base, rem ); // Equals `0.875rem`.
|
||||
|
||||
// Main menu
|
||||
@selector-main-menu-open: ~'#mw-sidebar-checkbox:checked';
|
||||
@selector-main-menu-closed: ~'#mw-sidebar-checkbox:not( :checked )';
|
||||
|
||||
// Scroll Indicator
|
||||
@height-scroll-indicator: 30px;
|
||||
// The amount of space that should be between the bottom of the viewport and the
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
li {
|
||||
margin: 0;
|
||||
padding: 0.25em 0;
|
||||
font-size: @font-size-portal-list-item;
|
||||
font-size: @font-size-nav-main-body;
|
||||
line-height: @line-height-nav;
|
||||
word-wrap: break-word;
|
||||
|
||||
|
|
|
|||
|
|
@ -27,22 +27,14 @@
|
|||
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
transition-property: opacity;
|
||||
transition-duration: @transition-duration-base;
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
// The menu content should not be narrower than the menu button.
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled & {
|
||||
padding: 4px 0;
|
||||
// TODO Add consistent min/max values for dropdowns in T316055
|
||||
width: max-content;
|
||||
max-width: 200px;
|
||||
}
|
||||
padding: 4px 0;
|
||||
// TODO Add consistent min/max values for dropdowns in T316055
|
||||
width: max-content;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled .vector-pinnable-element,
|
||||
.vector-pinnable-element,
|
||||
.vector-dropdown-content {
|
||||
.vector-menu-heading {
|
||||
.mixin-vector-dropdown-menu-item();
|
||||
|
|
@ -72,9 +64,5 @@
|
|||
&:not( .mw-selflink ) {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
.mixin-vector-dropdown-menu-item-deprecated();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,13 +31,7 @@
|
|||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
// Ensure search box is aligned with content when search thumbnails or JS is off
|
||||
.vector-feature-page-tools-disabled & .vector-search-box:not( .vector-search-box-auto-expand-width ),
|
||||
.vector-feature-page-tools-disabled:not( .client-js ) & .vector-search-box {
|
||||
padding-left: @size-search-expand;
|
||||
}
|
||||
|
||||
.client-js.vector-feature-page-tools-enabled & .vector-search-box.vector-search-box-auto-expand-width {
|
||||
.client-js & .vector-search-box.vector-search-box-auto-expand-width {
|
||||
// Ensure search box is aligned with content when it autoexpands (i.e. search thumbnails)
|
||||
margin-left: -@size-search-expand;
|
||||
}
|
||||
|
|
@ -73,10 +67,6 @@
|
|||
> div {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
margin-left: @padding-horizontal-tabs;
|
||||
}
|
||||
}
|
||||
|
||||
// Make the menu below the search input wider, to match the width of the input+button
|
||||
|
|
|
|||
|
|
@ -13,12 +13,7 @@
|
|||
// 226px @ 16 provides correct spacing between the right edge of logo container + left edge of searchbox input.
|
||||
min-width: 13.875em; // 222px @ 16
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
// The logo is 24px from the main menu button icon
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled & {
|
||||
.vector-feature-main-menu-pinned-disabled & {
|
||||
// The logo is 40px from the page container.
|
||||
// Main menu button width (20px) + 20px = 40px
|
||||
margin-left: 20px;
|
||||
|
|
|
|||
|
|
@ -5,11 +5,9 @@
|
|||
@import './checkboxHack.less';
|
||||
|
||||
// Ensure there is only 1 main menu landmark at anytime
|
||||
.vector-main-menu-landmark {
|
||||
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-enabled .vector-header-start &,
|
||||
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled .vector-main-menu-container & {
|
||||
display: none;
|
||||
}
|
||||
.vector-feature-main-menu-pinned-enabled .vector-header-start .vector-main-menu-landmark,
|
||||
.vector-feature-main-menu-pinned-disabled .vector-main-menu-container .vector-main-menu-landmark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vector-main-menu {
|
||||
|
|
@ -19,9 +17,7 @@
|
|||
#p-navigation .vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled .vector-main-menu {
|
||||
// Match styles of .mw-list-item a in PinnableElement.less
|
||||
.vector-main-menu-action-opt-out a,
|
||||
.vector-main-menu-action-lang-alert .vector-main-menu-action-content {
|
||||
|
|
@ -44,7 +40,7 @@
|
|||
}
|
||||
|
||||
// Main menu when pinned in the sidebar
|
||||
.vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
|
||||
#vector-main-menu-pinned-container .vector-main-menu {
|
||||
// Align the left edge of the text with the page container
|
||||
margin-left: -@padding-horizontal-dropdown-menu-item;
|
||||
// Align border under pinnable header with border under page title
|
||||
|
|
@ -66,76 +62,3 @@
|
|||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled {
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
.vector-main-menu {
|
||||
// Makes the sidebar full screen at lower resolutions.
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// Hide sidebar entirely when the checkbox is disabled
|
||||
@{selector-main-menu-closed} ~ .vector-main-menu-container .vector-main-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled .vector-main-menu {
|
||||
// Temporary magic number, will be calculated after TOC specs are finalized
|
||||
padding: 12px 19px 12px 9px;
|
||||
background-color: @background-color-secondary--modern;
|
||||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
// Magic number from the edge of the main menu to the start of the main menu text.
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled .vector-main-menu-action {
|
||||
// Styles for MainMenuAction template.
|
||||
.vector-main-menu-action-item {
|
||||
// Align with the portal heading/links
|
||||
// `.portal` + `.portal .body`
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.vector-main-menu-action-heading {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.vector-main-menu-action-content {
|
||||
> * {
|
||||
font-size: @font-size-portal-list-item;
|
||||
}
|
||||
|
||||
> a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// T295555 style overrides for temporary language switch alert (can be removed later ).
|
||||
.vector-language-sidebar-alert {
|
||||
padding: 0.75em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mw-sidebar-button {
|
||||
&::before {
|
||||
/* @embed */
|
||||
.vector-feature-page-tools-disabled & {
|
||||
background-image: url( images/chevronHorizontal-ltr.svg );
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled @{selector-main-menu-closed} ~ .mw-header & {
|
||||
/* @embed */
|
||||
background-image: url( images/menu.svg );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
.vector-feature-page-tools-disabled .vector-main-menu-group,
|
||||
.vector-feature-page-tools-disabled .vector-main-menu-action-item {
|
||||
margin: 0 @margin-end-portal 0 @margin-start-portal;
|
||||
padding: 0.25em 0;
|
||||
direction: ltr;
|
||||
|
||||
.vector-menu-heading {
|
||||
.mixin-vector-menu-heading();
|
||||
font-size: @font-size-nav-main-heading;
|
||||
margin: 0.5em 0 0 ( @margin-start-nav-main-body / @font-size-nav-main-heading );
|
||||
padding: 0.25em 0;
|
||||
border-bottom-style: @border-style-base;
|
||||
}
|
||||
|
||||
.vector-menu-content {
|
||||
margin-left: @margin-start-portal-body;
|
||||
padding-top: 0;
|
||||
|
||||
ul {
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0.25em 0;
|
||||
font-size: @font-size-portal-list-item;
|
||||
line-height: @line-height-nav;
|
||||
word-wrap: break-word;
|
||||
|
||||
a {
|
||||
color: @color-link;
|
||||
|
||||
&:visited {
|
||||
color: @color-link--visited;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,11 +2,9 @@
|
|||
@import '../../common/mixins.less';
|
||||
|
||||
// Ensure there is only 1 page tools landmark at anytime
|
||||
.vector-page-tools-landmark {
|
||||
.vector-feature-page-tools-pinned-enabled .vector-page-toolbar-container &,
|
||||
.vector-feature-page-tools-pinned-disabled .vector-column-end & {
|
||||
display: none;
|
||||
}
|
||||
.vector-feature-page-tools-pinned-enabled .vector-page-toolbar-container .vector-page-tools-landmark,
|
||||
.vector-feature-page-tools-pinned-disabled .vector-column-end .vector-page-tools-landmark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vector-column-end {
|
||||
|
|
@ -33,11 +31,7 @@
|
|||
// Add fade indicator.
|
||||
.mixin-vector-scroll-indicator();
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: Remove the following selector when page tools feature is on by default, needed for LegacyMoreDropdown
|
||||
.vector-feature-page-tools-disabled .vector-page-tools-landmark,
|
||||
.vector-page-tools {
|
||||
// Ensure collapsible items are visible on lower resolutions
|
||||
.vector-more-collapsible-item {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
.vector-pinnable-header {
|
||||
.vector-feature-page-tools-enabled & {
|
||||
.mixin-vector-dropdown-menu-item();
|
||||
// Override display: flex applied by .mixin-vector-dropdown-menu-item()
|
||||
display: block;
|
||||
}
|
||||
.mixin-vector-dropdown-menu-item();
|
||||
// Override display: flex applied by .mixin-vector-dropdown-menu-item()
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vector-pinnable-header[ hidden ] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vector-page-tools,
|
||||
.vector-toc {
|
||||
.vector-feature-page-tools-enabled .vector-pinned-container & .vector-pinnable-header {
|
||||
// Match styles with tabs in page toolbar to ensure TOC and Page Tools pinnable headers
|
||||
// align with page toolbar border
|
||||
padding: @padding-vertical-tabs;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
.vector-pinned-container .vector-page-tools .vector-pinnable-header,
|
||||
.vector-pinned-container .vector-toc .vector-pinnable-header {
|
||||
// Match styles with tabs in page toolbar to ensure TOC and Page Tools pinnable headers
|
||||
// align with page toolbar border
|
||||
padding: @padding-vertical-tabs;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.vector-pinnable-header-label {
|
||||
|
|
|
|||
|
|
@ -7,17 +7,6 @@
|
|||
overflow-x: hidden;
|
||||
background-color: @background-color-page-container;
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
padding: @padding-top-tabs 12px 20px 27px;
|
||||
|
||||
.vector-toc-pinnable-header {
|
||||
// Override default pinnable header styles
|
||||
padding: 0 0 12px 0;
|
||||
border: 0;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-pinnable-header-label {
|
||||
// Override heading element styles in elements.less
|
||||
overflow: unset;
|
||||
|
|
@ -39,11 +28,8 @@
|
|||
transition: @transition-duration-base;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.vector-feature-page-tools-enabled & {
|
||||
// Vertically center the icon with the text
|
||||
margin-top: 2px;
|
||||
}
|
||||
// Vertically center the icon with the text
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.vector-toc-link {
|
||||
|
|
@ -76,24 +62,14 @@
|
|||
}
|
||||
|
||||
.vector-toc-text {
|
||||
.vector-feature-page-tools-disabled & {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled & {
|
||||
// Match .mixin-vector-dropdown-menu-item() vertical padding
|
||||
padding: @padding-vertical-dropdown-menu-item 0;
|
||||
}
|
||||
// Match .mixin-vector-dropdown-menu-item() vertical padding
|
||||
padding: @padding-vertical-dropdown-menu-item 0;
|
||||
}
|
||||
|
||||
.vector-toc-contents,
|
||||
.vector-toc-list {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-toc-list-item {
|
||||
|
|
@ -101,10 +77,7 @@
|
|||
position: relative;
|
||||
list-style-type: none;
|
||||
padding-left: 8px;
|
||||
|
||||
.vector-feature-page-tools-enabled & {
|
||||
margin: 0;
|
||||
}
|
||||
margin: 0;
|
||||
|
||||
&.vector-toc-level-1 {
|
||||
padding-left: 0;
|
||||
|
|
|
|||
|
|
@ -38,10 +38,6 @@
|
|||
.vector-menu-content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
.vector-feature-page-tools-disabled & {
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
// Used to hide collapsible items inside the dropdown menu
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<title>
|
||||
menu
|
||||
</title>
|
||||
<path d="M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 207 B |
|
|
@ -2,22 +2,6 @@
|
|||
// Grid layout
|
||||
//
|
||||
|
||||
// Match styles between TOC and fade element to ensure the fade covers the correct area
|
||||
// This is expressed in pixels to support different font sizes since our layout is currently
|
||||
// expressed in pixels. See T313817.
|
||||
.vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc::after,
|
||||
.vector-feature-page-tools-disabled #vector-toc-pinned-container .vector-toc,
|
||||
.vector-feature-page-tools-disabled .vector-main-menu {
|
||||
// T305069 Layout adjustments of sidebar elements
|
||||
// Align the left edge of main menu with the main menu button.
|
||||
width: 220px;
|
||||
|
||||
// Align the left edge of main menu with the main menu button icon.
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
width: 244px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Use of minmax is important to restrict the maximum grid column width more information: T314756 */
|
||||
@grid-template-column-desktop: ~'@{width-column-start-desktop} minmax(0, 1fr)';
|
||||
@grid-template-column-desktop-wide: ~'@{width-column-start-desktop-wide} minmax(0, 1fr)';
|
||||
|
|
@ -34,10 +18,6 @@
|
|||
'footer footer';
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled .mw-page-container-inner {
|
||||
column-gap: @grid-column-gap + 8px; // 8px + 12px (.mw-body padding-left) = 20px total spacing
|
||||
}
|
||||
|
||||
.vector-sitenotice-container {
|
||||
grid-area: siteNotice;
|
||||
}
|
||||
|
|
@ -70,7 +50,7 @@
|
|||
grid-template-columns: @grid-template-column-desktop-wide;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled .mw-header {
|
||||
.mw-header {
|
||||
display: grid;
|
||||
column-gap: @grid-column-gap;
|
||||
grid-template: ~'auto / @{grid-template-column-desktop-wide}';
|
||||
|
|
@ -88,10 +68,6 @@
|
|||
|
||||
.mw-content-container,
|
||||
.mw-table-of-contents-container {
|
||||
.vector-feature-page-tools-disabled & {
|
||||
max-width: @max-width-content-container;
|
||||
}
|
||||
|
||||
.vector-feature-limited-width-disabled &,
|
||||
.vector-feature-limited-width-content-disabled & {
|
||||
// Allow the max-width of content on history/special pages to be wider than
|
||||
|
|
@ -109,31 +85,15 @@
|
|||
}
|
||||
|
||||
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
|
||||
.vector-feature-page-tools-disabled {
|
||||
|
||||
@{selector-sidebar-no-toc-sidebar-closed},
|
||||
&.vector-feature-toc-pinned-disabled @{selector-main-menu-closed} {
|
||||
& ~ .mw-content-container {
|
||||
grid-column: mainMenu / pageContent;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontally center content when column start is empty (i.e. no pinned ToC or pinned main menu)
|
||||
.vector-feature-page-tools-enabled {
|
||||
&.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
|
||||
&.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-disabled .mw-content-container {
|
||||
grid-column: mainMenu / pageContent;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.vector-feature-main-menu-pinned-disabled .vector-sidebar-container-no-toc ~ .mw-content-container,
|
||||
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-disabled .mw-content-container {
|
||||
grid-column: mainMenu / pageContent;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media ( min-width: @min-width-desktop ) {
|
||||
.vector-feature-page-tools-enabled .mw-body {
|
||||
.mw-body {
|
||||
display: grid;
|
||||
grid-template: ~'min-content min-content min-content 1fr / minmax(0, @{max-width-content-container}) min-content';
|
||||
/**
|
||||
|
|
@ -146,15 +106,6 @@
|
|||
'toolbar columnEnd'
|
||||
'content columnEnd';
|
||||
|
||||
.vector-feature-page-tools-pinned-enabled& {
|
||||
column-gap: @grid-column-gap;
|
||||
}
|
||||
|
||||
.vector-feature-limited-width-disabled&,
|
||||
.vector-feature-limited-width-content-disabled& {
|
||||
grid-template-columns: ~'minmax(0, 1fr) min-content';
|
||||
}
|
||||
|
||||
.vector-page-titlebar {
|
||||
grid-area: titlebar;
|
||||
}
|
||||
|
|
@ -169,7 +120,16 @@
|
|||
|
||||
.vector-column-end {
|
||||
grid-area: columnEnd;
|
||||
overflow-anchor: none; // T330108
|
||||
overflow-anchor: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-pinned-enabled .mw-body {
|
||||
column-gap: @grid-column-gap;
|
||||
}
|
||||
|
||||
.vector-feature-limited-width-disabled .mw-body,
|
||||
.vector-feature-limited-width-content-disabled .mw-body {
|
||||
grid-template-columns: ~'minmax(0, 1fr) min-content';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@selector-sidebar-no-toc-sidebar-closed: ~'@{selector-main-menu-closed} ~ .vector-sidebar-container-no-toc';
|
||||
|
||||
// Content container
|
||||
|
||||
// Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@
|
|||
// 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;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled.vector-feature-toc-pinned-enabled & {
|
||||
// Align the left edge of the TOC text with the main menu button icon.
|
||||
margin-left: -27px;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled.vector-feature-toc-pinned-enabled & {
|
||||
// Align the left edge of the TOC text with the page container
|
||||
margin-left: -@spacing-subsection-toggle;
|
||||
}
|
||||
|
|
@ -40,12 +32,7 @@
|
|||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled.vector-feature-toc-pinned-enabled @{selector-main-menu-closed} ~ .mw-table-of-contents-container & {
|
||||
// Needed to align TOC with bottom of title.
|
||||
margin-top: @margin-top-pinned-toc;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled & {
|
||||
.vector-feature-main-menu-pinned-disabled.vector-feature-toc-pinned-enabled & {
|
||||
// Align TOC with bottom of title when main menu is not pinned but the TOC is
|
||||
margin-top: @margin-top-pinned-toc;
|
||||
}
|
||||
|
|
@ -54,18 +41,10 @@
|
|||
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
|
||||
.vector-toc {
|
||||
max-height: ~'calc( 100vh - @{max-height-bottom-spacing-scroll-indicator} )';
|
||||
|
||||
.mixin-vector-scroll-indicator();
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled & .vector-toc {
|
||||
padding-top: ~'calc( @{padding-top-pinned-element} + @{padding-top-tabs} )';
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-enabled & .vector-toc {
|
||||
padding-top: @padding-top-pinned-element;
|
||||
padding-left: @spacing-subsection-toggle;
|
||||
padding-right: @padding-horizontal-dropdown-menu-item;
|
||||
.mixin-vector-scroll-indicator();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,6 @@
|
|||
|
||||
@selector-nojs-collapsed-toc-open: ~'#vector-toc-collapsed-checkbox:checked';
|
||||
|
||||
// FIXME: Move into .mixin-toc-unpinned() when PageTools feature is enabled everywhere
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
// TOC dropdown styles
|
||||
#vector-toc-collapsed-button,
|
||||
.vector-sticky-header-toc,
|
||||
|
|
@ -49,6 +36,16 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
|
|||
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 )
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,10 +58,6 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
|
|||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
.vector-feature-page-tools-disabled .vector-unpinned-container .vector-toc {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.client-js {
|
||||
@media ( max-width: @max-width-tablet ) {
|
||||
//
|
||||
|
|
@ -154,10 +147,7 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
|
|||
|
||||
.vector-pinnable-header,
|
||||
.vector-toc-contents {
|
||||
// FIXME: Remove !important after PageTools is enabled everywhere currently needed
|
||||
// to deal with selector specificity, overrides padding applied in PinnableHeader.less
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
padding-left: @padding-horizontal-dropdown-menu-item !important;
|
||||
padding-left: @padding-horizontal-dropdown-menu-item;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
@import './components/Dropdown.less';
|
||||
@import './components/MenuTabs.less';
|
||||
@import './components/MainMenu.less';
|
||||
@import './components/MainMenuGroup.less';
|
||||
@import './components/PageTitlebar.less';
|
||||
@import './components/PageToolbar.less';
|
||||
@import './components/PageTools.less';
|
||||
|
|
@ -32,10 +31,6 @@
|
|||
@import './components/TabWatchstarLink.less';
|
||||
@import './components/TableOfContents.less';
|
||||
@import './components/Icon.less';
|
||||
|
||||
.vector-feature-page-tools-disabled {
|
||||
@import './components/checkboxHack.less';
|
||||
}
|
||||
}
|
||||
|
||||
@media all {
|
||||
|
|
|
|||
Loading…
Reference in a new issue