mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-11-28 01:20:07 +00:00
Revert "Refactor Vector tabs layout for reduced size & complexity"
This reverts commit 0c5e6ed9fe.
Reason for revert: I was so focused on testing the current layout
I forgot to test the more important grid layout, which is being
deployed this week. The "from mediawiki" tagline is overlapping
with the tabs.
Change-Id: I3c53a8d243caf84e5c2766d730ced3d7da345026
This commit is contained in:
Jdlrobson
parent
0c5e6ed9fe
commit
5599cf23af
|
|
@ -7,6 +7,7 @@
|
|||
float: left;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 1.125em;
|
||||
|
||||
.vector-menu-heading {
|
||||
color: @color-base--subtle;
|
||||
|
|
@ -43,7 +44,6 @@
|
|||
.vector-menu-content {
|
||||
background-color: @background-color-base;
|
||||
list-style: none none;
|
||||
line-height: 1.125em;
|
||||
// Match the width of the dropdown "heading" (the tab)
|
||||
min-width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -84,6 +84,10 @@
|
|||
display: block;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
span:not( .mw-ui-icon ) {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -121,6 +125,7 @@
|
|||
padding-top: 1.25em;
|
||||
padding-left: 8px;
|
||||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
font-size: @font-size-tabs;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,13 +17,7 @@
|
|||
}
|
||||
|
||||
.vector-menu-dropdown {
|
||||
line-height: 1.125em;
|
||||
|
||||
li {
|
||||
span:not( .mw-ui-icon ) {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
a {
|
||||
// Historic value.
|
||||
padding: unit( ( 8.125px / @font-size-browser ), em );
|
||||
|
|
@ -44,10 +38,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.vector-menu-dropdown-noicon .vector-menu-heading {
|
||||
font-size: @font-size-tabs;
|
||||
}
|
||||
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Tab separator: Outer end (right in LTR) border of "Actions" menu.
|
||||
background-position: right bottom;
|
||||
|
|
|
|||
|
|
@ -2,18 +2,43 @@
|
|||
|
||||
@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
|
||||
|
||||
.mw-article-toolbar-container {
|
||||
.vector-article-toolbar .mw-article-toolbar-container {
|
||||
display: flex;
|
||||
border-bottom: @border-tabs;
|
||||
|
||||
/* Targets #left-navigation and #right-navigation */
|
||||
& > div {
|
||||
font-size: @font-size-tabs;
|
||||
a {
|
||||
// The hover effect is on `li` elements.
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,61 +5,85 @@
|
|||
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
||||
*/
|
||||
|
||||
/* Tab list items */
|
||||
/* Namespaces and Views */
|
||||
.vector-menu-tabs {
|
||||
// Tab separator: Outer start border (left in LTR) of tab row.
|
||||
float: left;
|
||||
height: 2.5em;
|
||||
padding-left: @border-width-base;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
/* Navigation Labels */
|
||||
.vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: left;
|
||||
height: 100%;
|
||||
list-style: none none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Make first and last elements flush with edge of header.
|
||||
&:first-child {
|
||||
margin-left: -8px;
|
||||
li {
|
||||
// Tab fade background: Fade inside from light grey to white.
|
||||
float: left;
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
line-height: @line-height-nav;
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: -8px;
|
||||
&:last-child a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
// Tab separator: Border between tabs and outer right border.
|
||||
color: @color-link;
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
float: left;
|
||||
height: unit( 40 / @font-size-tabs / @font-size-browser, em );
|
||||
position: relative;
|
||||
padding-top: 1.25em;
|
||||
margin: 0 @padding-horizontal-tabs;
|
||||
font-size: @font-size-tabs;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* focus and hover have outlines. Text underline interferes with bottom border */
|
||||
li a:focus,
|
||||
li a:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
.new {
|
||||
a,
|
||||
a:visited {
|
||||
color: @color-link-new;
|
||||
}
|
||||
}
|
||||
|
||||
.new a,
|
||||
.new a:visited {
|
||||
color: @color-link-new;
|
||||
.selected {
|
||||
a {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: @color-link-selected;
|
||||
}
|
||||
}
|
||||
|
||||
.selected a,
|
||||
.selected a:visited {
|
||||
color: @color-link-selected;
|
||||
border-bottom: 1px solid;
|
||||
.icon {
|
||||
a {
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tab link appearance, applies to
|
||||
* - <a> inside vector-menu-tabs (e.g. read, edit, view, history)
|
||||
* - vector-menu-dropdown headings (e.g. more menu, language variants, gadgets)
|
||||
*/
|
||||
.vector-menu-tabs li a,
|
||||
.vector-article-toolbar .vector-menu-heading {
|
||||
display: block;
|
||||
position: relative;
|
||||
// Top bottom padding to increase clickable area.
|
||||
padding-top: 18px;
|
||||
padding-bottom: 7px;
|
||||
// left & right margin separate bottom border between words,
|
||||
// bottom margin makes link border overlap toolbar border.
|
||||
margin: 0 8px -1px 8px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue