jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "Cleanup ArticleToolbar grid styles"

This commit is contained in:
jenkins-bot 2022-06-29 17:34:00 +00:00 committed by Gerrit Code Review
parent 257430ec13 fabd2d6579
commit e952a051c3
3 changed files with 42 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
resources/common/components/MenuDropdown.less
View File

@ -98,21 +98,6 @@
}
}
// FIXME: For cached CSS. can be dropped to legacy stylesheet when
// Ia261ea53931217f32a21b33c2ab3d4ec64efa48a has been in production for a week.
#mw-head .vector-menu-dropdown .vector-menu-heading {
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
background-position: right bottom;
float: left;
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
margin: 0 -@border-width-base 0 0;
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
// `padding-left` in `.vector-menu-dropdown .vector-menu-heading a`
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
}
// Invisible checkbox covering the dropdown menu handle
.vector-menu-checkbox {
cursor: pointer;

13
resources/skins.vector.styles.legacy/components/MenuDropdown.less
View File

@ -37,3 +37,16 @@
border-top-width: 0;
}
}
#mw-head .vector-menu-dropdown .vector-menu-heading {
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
background-position: right bottom;
float: left;
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
margin: 0 -@border-width-base 0 0;
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
// act like a real border. It is necessary for `.vector-menu-dropdown .vector-menu-content-list` dropdown to align well.
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
// `padding-left` in `.vector-menu-dropdown .vector-menu-heading a`
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
}

70
resources/skins.vector.styles/components/ArticleToolbar.less
View File

@ -1,6 +1,9 @@
@import '../../common/variables.less';
.mw-article-toolbar-container {
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
.vector-article-toolbar .mw-article-toolbar-container {
display: flex;
border-bottom: @border-tabs;
a {
@ -11,6 +14,31 @@
}
}
@media ( min-width: @min-width-desktop-wide ) {
padding-right: @padding-horizontal-tabs - 1px;
}
#right-navigation {
display: flex;
flex-grow: 1;
justify-content: end;
// Layout correction - as it was before introduce of flex box.
margin-right: -1px;
@media ( min-width: @min-width-desktop-wide ) {
margin-right: -@border-base-ems * 3;
}
}
#left-navigation {
display: flex;
// Layout correction - as it was before introduce of flex box.
@media ( min-width: @min-width-desktop-wide ) {
margin-left: @border-base-ems * 3;
}
}
.mw-portlet-views {
display: none;
@ -36,43 +64,3 @@
}
}
}
// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
.vector-article-toolbar .mw-article-toolbar-container {
display: flex;
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
@media ( min-width: @min-width-desktop-wide ) {
padding-right: @padding-horizontal-tabs - 1px;
}
#right-navigation {
display: flex;
flex-grow: 1;
justify-content: end;
// Layout correction - as it was before introduce of flex box.
margin-right: -1px;
@media ( min-width: @min-width-desktop-wide ) {
margin-right: -@border-base-ems * 3;
}
}
#left-navigation {
display: flex;
// Layout correction - as it was before introduce of flex box.
@media ( min-width: @min-width-desktop-wide ) {
margin-left: @border-base-ems * 3;
}
}
}
// Currently when right navigation is empty and sidebar is open no
// border is shown. This can intentionally be removed at a later date but
// is preserved to reduce number of UI regressions in current release.
@media ( max-width: @max-width-mobile ) {
#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
border-bottom: 0;
}
}