mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 02:39:20 +00:00
Restyle Vector tabs in modern Vector
Removes gradients from tabs (i.e. article toolbar) in new Vector, moving the existing MenuTabs.less component into the skins.vector.styles.legacy module and creating a new MenuTabs.less component for modern Vector. Bug: T309398 Change-Id: I5d807f09bfbbceaded756daa78dbb023efcc91dc
This commit is contained in:
parent
2adf046c9a
commit
c5cfd4dce8
|
@ -15,7 +15,6 @@
|
|||
@import './components/Indicators.less';
|
||||
@import './components/SiteNotice.less';
|
||||
@import './components/Menu.less';
|
||||
@import './components/MenuTabs.less';
|
||||
@import './components/TabWatchstarLink.less';
|
||||
@import './components/MenuDropdown.less';
|
||||
@import './components/MenuPortal.less';
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
|
@ -113,22 +114,6 @@
|
|||
padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em );
|
||||
}
|
||||
|
||||
// Tab Separators
|
||||
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
|
||||
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
|
||||
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
// #mw-head rule is legacy Vector only.
|
||||
.vector-menu-tabs,
|
||||
.vector-menu-tabs a,
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Support: IE 9, which doesn't understand `linear-gradient`.
|
||||
background-image: url( images/tab-separator.png );
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
background-repeat: no-repeat;
|
||||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||||
background-size: @border-width-base 100%;
|
||||
}
|
||||
|
||||
// Invisible checkbox covering the dropdown menu handle
|
||||
.vector-menu-checkbox {
|
||||
cursor: pointer;
|
||||
|
|
|
@ -37,6 +37,10 @@ pre,
|
|||
font-family: @font-family-sans;
|
||||
}
|
||||
|
||||
.mw-first-heading {
|
||||
border-color: @border-color-pagetitle;
|
||||
}
|
||||
|
||||
/* Main content area, including siteNotice, indicators, categories, firstHeading and `.vector-body`. */
|
||||
.mw-body {
|
||||
// h1's can exist outside of `.mw-body-content` so some heading styles
|
||||
|
|
|
@ -61,12 +61,14 @@
|
|||
// Due to darker background gradient, border needs to be darkened for aligned visual perception.
|
||||
@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
|
||||
@border-color-portal-heading: #c8ccd1;
|
||||
@border-color-pagetitle: #eaecf0;
|
||||
// Use `rgba()` notation for better Safari support, see T254489.
|
||||
@border-color-portal-heading-transparent: rgba( red( @border-color-portal-heading ), green( @border-color-portal-heading ), blue( @border-color-portal-heading ), 0 );
|
||||
@border-start-blockquote: 4px @border-style-base #eaecf0;
|
||||
@padding-top-content: 1.25em;
|
||||
@padding-top-content: 0.5em;
|
||||
@padding-horizontal-content: 0.5em;
|
||||
@padding-blockquote: 8px 32px;
|
||||
@border-tabs: 1px @border-style-base #eaecf0;
|
||||
|
||||
// Navigation
|
||||
@background-color-secondary: #f6f6f6;
|
||||
|
|
|
@ -24,3 +24,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-dropdown .vector-menu-heading {
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
background-repeat: no-repeat;
|
||||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||||
background-size: @border-width-base 100%;
|
||||
background-position: right bottom;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import '../variables.less';
|
||||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/**
|
||||
|
@ -82,3 +82,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tab Separators
|
||||
// `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
|
||||
// `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
|
||||
// `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
|
||||
// #mw-head rule is legacy Vector only.
|
||||
.vector-menu-tabs,
|
||||
.vector-menu-tabs a,
|
||||
#mw-head .vector-menu-dropdown .vector-menu-heading {
|
||||
// Support: IE 9, which doesn't understand `linear-gradient`.
|
||||
background-image: url( images/tab-separator.png );
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
background-repeat: no-repeat;
|
||||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||||
background-size: @border-width-base 100%;
|
||||
}
|
Before Width: | Height: | Size: 116 B After Width: | Height: | Size: 116 B |
Before Width: | Height: | Size: 124 B After Width: | Height: | Size: 124 B |
|
@ -9,6 +9,7 @@
|
|||
|
||||
// Legacy specific components
|
||||
@import './components/MenuDropdown.less';
|
||||
@import './components/MenuTabs.less';
|
||||
@import './components/SearchBox.less';
|
||||
@import './components/Sidebar.less';
|
||||
@import './components/UserLinks.less';
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
@import '../../common/variables.less';
|
||||
|
||||
.mw-article-toolbar-container {
|
||||
border-bottom: @border-tabs;
|
||||
|
||||
.mw-portlet-views {
|
||||
display: none;
|
||||
|
||||
|
@ -27,12 +29,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// T303549: When page title is above tabs, `.mw-article-toolbar-container` is
|
||||
// moved inside `.mw-body` and requires margin between itself and the tagline.
|
||||
.mw-body .mw-article-toolbar-container {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
@ -42,25 +38,10 @@
|
|||
padding-right: @padding-horizontal-tabs - 1px;
|
||||
}
|
||||
|
||||
.vector-menu-tabs {
|
||||
// Account for background-image gradient.
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.vector-menu-dropdown .vector-menu-heading {
|
||||
background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
|
||||
background-repeat: no-repeat;
|
||||
// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
|
||||
background-size: @border-width-base 100%;
|
||||
background-position: right bottom;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#right-navigation {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: end;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-content;
|
||||
// Layout correction - as it was before introduce of flex box.
|
||||
margin-right: -1px;
|
||||
|
||||
|
@ -71,21 +52,12 @@
|
|||
|
||||
#left-navigation {
|
||||
display: flex;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-content;
|
||||
|
||||
// Layout correction - as it was before introduce of flex box.
|
||||
@media ( min-width: @width-breakpoint-desktop-wide ) {
|
||||
margin-left: @border-base-ems * 3;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-tabs li {
|
||||
margin-top: 1px;
|
||||
|
||||
&.selected {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Currently when right navigation is empty and sidebar is open no
|
||||
|
|
89
resources/skins.vector.styles/components/MenuTabs.less
Normal file
89
resources/skins.vector.styles/components/MenuTabs.less
Normal file
|
@ -0,0 +1,89 @@
|
|||
@import '../../common/variables.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
/**
|
||||
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
||||
*/
|
||||
|
||||
/* 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;
|
||||
|
||||
/* Navigation Labels */
|
||||
.vector-menu-heading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: left;
|
||||
height: 100%;
|
||||
list-style: none none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
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 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new {
|
||||
a,
|
||||
a:visited {
|
||||
color: @color-link-new;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
a {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: @color-link-selected;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
a {
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -90,9 +90,14 @@ body {
|
|||
.firstHeading {
|
||||
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
|
||||
overflow: visible;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-body-subheader {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.mw-header {
|
||||
// allow z-index to apply so search results overlay article
|
||||
position: relative;
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
@import './components/LanguageButton.less';
|
||||
@import './components/UserLinks.less';
|
||||
@import './components/Header.less';
|
||||
@import './components/MenuTabs.less';
|
||||
@import './components/StickyHeader.less';
|
||||
@import './components/TableOfContents.less';
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import mustache from 'mustache';
|
||||
import { menuTemplate as vectorTabsTemplate } from './Menu.stories.data';
|
||||
import { namespaceTabsData, pageActionsData } from './MenuTabs.stories.data';
|
||||
import '../resources/skins.vector.styles/MenuTabs.less';
|
||||
import '../resources/skins.vector.styles/components/MenuTabs.less';
|
||||
import '../resources/skins.vector.styles/TabWatchstarLink.less';
|
||||
|
||||
export default {
|
||||
|
|
Loading…
Reference in a new issue