Merge "Align language button"

This commit is contained in:
jenkins-bot 2022-09-07 22:21:27 +00:00 committed by Gerrit Code Review
commit e60716e63d
4 changed files with 17 additions and 13 deletions

View File

@ -64,8 +64,8 @@
@size-icon: unit( 20 / @font-size-browser, em ); @size-icon: unit( 20 / @font-size-browser, em );
@size-indicator: unit( 12 / @font-size-browser, em ); @size-indicator: unit( 12 / @font-size-browser, em );
// Copied from mediawiki.ui.icons // Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
@icon-padding-md: unit( 12 / @font-size-browser, em ); @icon-padding-md: 12px;
@background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em ); @background-position-nav-personal-icon: left unit( 4 / @font-size-browser / @font-size-nav-personal, em );
@background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em ); @background-size-nav-personal-icon: unit( 14 / @font-size-browser / @font-size-nav-personal, em );
@ -138,9 +138,6 @@
// Sidebar // Sidebar
@width-sidebar-px: 220px; @width-sidebar-px: 220px;
@width-sidebar-px-wide: 244px; @width-sidebar-px-wide: 244px;
// T305069 Layout adjustments of sidebar elements:
// Vertically align the left edge of sidebar elements with the visible edge of the sidebar toggle hamburger menu.
@margin-start-sidebar-content: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
// TOC // TOC
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc'; @sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';

View File

@ -9,6 +9,7 @@
.mw-body-header .mw-portlet-lang { .mw-body-header .mw-portlet-lang {
// FIXME [review whether margin-top is needed] center vertically in heading. // FIXME [review whether margin-top is needed] center vertically in heading.
margin-top: 2px; margin-top: 2px;
margin-right: -@icon-padding-md;
box-sizing: border-box; box-sizing: border-box;
height: @height-button-lang; height: @height-button-lang;

View File

@ -3,26 +3,32 @@
@import '../layouts/screen.less'; @import '../layouts/screen.less';
@import './checkboxHack.less'; @import './checkboxHack.less';
// 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.
.sidebar-toc:after,
.mw-sidebar, .mw-sidebar,
.sidebar-toc, .sidebar-toc {
.sidebar-toc:after { // T305069 Layout adjustments of sidebar elements
// Match styles between TOC and fade element to ensure the fade covers the correct area // Align the left edge of main menu with the main menu button.
// This is expressed in pixels to support different font sizes since our layout is currently
// expressed in pixels. See T313817.
width: @width-sidebar-px; width: @width-sidebar-px;
margin-left: 0; margin-left: 0;
// Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) { @media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-wide; width: @width-sidebar-px-wide;
margin-left: @margin-start-sidebar-content; margin-left: @icon-padding-md;
} }
} }
.sidebar-toc, .sidebar-toc,
.sidebar-toc:after { .sidebar-toc:after {
margin-left: -@margin-start-sidebar-content; // T312156 Update TOC spacing after removing background color
// Align the left edge of the TOC text with the main menu button icon.
margin-left: -@icon-padding-md;
@media ( min-width: @min-width-desktop-wide ) { @media ( min-width: @min-width-desktop-wide ) {
// Align the TOC subsection toggle button icon with the main menu button icon.
margin-left: 0; margin-left: 0;
} }
} }

View File

@ -6,7 +6,7 @@
// Sidebar TOC uses increased left padding and a negative left margin to achieve // Sidebar TOC uses increased left padding and a negative left margin to achieve
// a 15px spacing without clipping the chevron icon // a 15px spacing without clipping the chevron icon
// https://phabricator.wikimedia.org/T312156#8095894 // https://phabricator.wikimedia.org/T312156#8095894
@sidebar-toc-left-padding: ~'calc( 15px + @{margin-start-sidebar-content} )'; @sidebar-toc-left-padding: 15px + @icon-padding-md;
@toc-subsection-toggle-icon-size: 1.834em; @toc-subsection-toggle-icon-size: 1.834em;
.mw-table-of-contents-container { .mw-table-of-contents-container {