mediawiki-skins-Vector/resources/skins.vector.styles/MenuTabs.less
jdlrobson 4dfe4a97c9 Class names with hyphens preferred over camel case
The classes were recently changed so provided this is merged before
next branch cut no need to worry about cached HTML.

Bug: T249073
Change-Id: Ib20c7a359bda858df89ebb245e682d321dd5acd0
2020-05-07 14:43:13 -07:00

89 lines
2.1 KiB
Plaintext

@import '../../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 */
// FIXME: For cached HTML
.vectorTabs,
.vector-menu-tabs {
// Tab separator: Outer start border (left in LTR) of tab row.
background-position: left bottom;
float: left;
height: 2.5em;
padding-left: @border-width-base;
/* Navigation Labels */
h3 {
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.
background-image: url( images/tab-normal-fade.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
background-image: linear-gradient( to top, @border-color-content--tabs-inactive 0, #e8f2f8 1px, #fff 100% ); // Support: Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
background-position: left bottom;
background-repeat: repeat-x;
float: left;
display: block;
height: 100%;
margin: 0;
padding: 0;
line-height: @line-height-nav;
white-space: nowrap;
a {
// Tab separator: Border between tabs and outer right border.
background-position: right bottom;
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;
padding-left: 8px;
padding-right: 8px;
font-size: @font-size-tabs;
cursor: pointer;
}
}
.new {
a,
a:visited {
color: @color-link-new;
}
}
.selected {
// Replace tab fade with flat color (matching top of would-be fade).
background-image: url( images/tab-current-fade.png );
// Overwrite above in browsers that support `rgba()`.
background: rgba( 255, 255, 255, 1 ); // stylelint-disable-line declaration-block-no-shorthand-property-overrides
a,
a:visited {
color: @color-link-selected;
text-decoration: none;
}
}
.icon {
a {
background-position: right bottom;
background-repeat: no-repeat;
}
}
}