Align language button
- 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:
parent
d949621eb2
commit
cdae8b1937
|
@ -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';
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue