wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-28 01:20:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Align language button

Browse source 
- Add margin-right to language button
- Remove @margin-start-sidebar-content CSS variable as it's name isnt accurate anymore, and its value is derived from @icon-padding-md

Bug: T315615
Change-Id: I75dd87536f70da55c9fa7e0e29ed6b4040d2ddf4
This commit is contained in:
bwang 2022-09-02 15:21:29 -05:00
parent d949621eb2
commit cdae8b1937
4 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
resources/common/variables.less
View file

@ -64,8 +64,8 @@
@size-icon: unit( 20 / @font-size-browser, em );
@size-indicator: unit( 12 / @font-size-browser, em );
// Copied from mediawiki.ui.icons
@icon-padding-md: unit( 12 / @font-size-browser, em );
// Copied from mediawiki.ui.icons, but converted to px to match `mw-ui-button`
@icon-padding-md: 12px;
@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 );
@ -138,9 +138,6 @@
// Sidebar
@width-sidebar-px: 220px;
@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
@sidebar-toc-selector: ~'.mw-table-of-contents-container .sidebar-toc';

1
resources/skins.vector.styles/components/LanguageButton.less
View file

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

20
resources/skins.vector.styles/components/Sidebar.less
View file

@ -3,26 +3,32 @@
@import '../layouts/screen.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,
.sidebar-toc,
.sidebar-toc:after {
// 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 {
// T305069 Layout adjustments of sidebar elements
// Align the left edge of main menu with the main menu button.
width: @width-sidebar-px;
margin-left: 0;
// Align the left edge of main menu with the main menu button icon.
@media ( min-width: @min-width-desktop-wide ) {
width: @width-sidebar-px-wide;
margin-left: @margin-start-sidebar-content;
margin-left: @icon-padding-md;
}
}
.sidebar-toc,
.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 ) {
// Align the TOC subsection toggle button icon with the main menu button icon.
margin-left: 0;
}
}

2
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -6,7 +6,7 @@
// Sidebar TOC uses increased left padding and a negative left margin to achieve
// a 15px spacing without clipping the chevron icon
// 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;
.mw-table-of-contents-container {