mediawiki-skins-Vector/components/tabs.less
Volker E 7a42af066b Remove irritating transition on menu tabs
Removing irritating dropdown arrow position transition
on menu tabs. It is the only place we're using this and it seems obscure
and not helpful to the users from UI Standardization point of view.

Bug: T68698
Change-Id: I8d30108b86b47358349de2ea424c0ba7f67ee7e2
2017-07-20 21:20:59 +00:00

260 lines
5.1 KiB
Plaintext

/**
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
*/
/* Navigation Labels */
div.vectorTabs h3 {
display: none;
}
/* Namespaces and Views */
div.vectorTabs {
/* @noflip */
float: left;
height: 2.5em;
.background-image('images/tab-break.png');
background-position: bottom left;
background-repeat: no-repeat;
padding-left: 1px;
ul {
/* @noflip */
float: left;
height: 100%;
list-style-type: none;
list-style-image: none;
margin: 0;
padding: 0;
.background-image('images/tab-break.png');
background-position: right bottom;
background-repeat: no-repeat;
li {
/* @noflip */
float: left;
line-height: 1.125em;
/* For IE6, overridden later to display:block by modern browsers */
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
background-color: #f3f3f3;
.background-image('images/tab-normal-fade.png');
background-position: bottom left;
background-repeat: repeat-x;
white-space: nowrap;
}
/* IGNORED BY IE6 which doesn't support child selector */
> li {
display: block;
}
}
li {
&.new {
a,
a:visited {
color: #a55858;
}
}
&.selected {
.background-image('images/tab-current-fade.png');
a,
a:visited {
color: #222;
text-decoration: none;
}
}
&.icon {
a {
background-position: bottom right;
background-repeat: no-repeat;
}
}
a {
/* For IE6, overridden later to display:block by modern browsers */
display: inline-block;
height: 1.9em;
padding-left: 0.5em;
padding-right: 0.5em;
color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
/* Ignored by IE6 which doesn't support child selector */
> a {
display: block;
}
}
span {
display: inline-block;
.background-image('images/tab-break.png');
background-position: bottom right;
background-repeat: no-repeat;
height: 100%;
a {
/* For IE6, overridden later to display:block by modern browsers */
display: inline-block;
padding-top: 1.25em;
}
/* Ignored by IE6 which doesn't support child selector */
> a {
/* @noflip */
float: left;
display: block;
}
}
}
/* Variants and Actions */
div.vectorMenu {
/* @noflip */
direction: ltr;
/* @noflip */
float: left;
cursor: pointer;
position: relative;
line-height: 1.125em;
}
body.rtl div.vectorMenu {
/* @noflip */
direction: rtl;
}
div#mw-head div.vectorMenu h3 {
/* @noflip */
float: left;
.background-image('images/tab-break.png');
background-repeat: no-repeat;
background-position: bottom right;
font-size: 1em;
height: 2.5em;
// This effectively moves the "background border" outside of the element to act like a real
// border. It is necessary for the dropdown (div.vectorMenu div.menu) to align well.
padding-right: 1px;
margin-right: -1px;
}
div.vectorMenu h3 span {
display: block;
font-size: 0.8em;
padding-left: 0.7em;
padding-top: 1.25em;
padding-right: 20px;
font-weight: normal;
color: @menu-main-heading-color;
.background-image-svg('images/arrow-down-icon.svg', 'images/arrow-down-icon.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
div.vectorMenuFocus h3 span {
.background-image-svg('images/arrow-down-focus-icon.svg', 'images/arrow-down-focus-icon.png');
}
div.vectorMenu div.menu {
// Match the width of the dropdown "heading" (the tab)
min-width: 100%;
position: absolute;
top: 2.5em;
left: -1px;
background-color: @body-background-color;
border: 1px solid #a2a9b1;
border-top-width: 0;
clear: both;
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
text-align: left;
display: none;
// overlap indicators (which has z-index 1, too)
z-index: 1;
}
/* Enable forcing showing of the menu for accessibility */
div.vectorMenu:hover div.menu,
div.vectorMenu.menuForceShow div.menu {
display: block;
}
div.vectorMenu ul {
list-style-type: none;
list-style-image: none;
padding: 0;
margin: 0;
text-align: left;
}
// stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown
/* Fixes old versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link {
min-width: 5em;
}
/* Returns things back to normal in modern versions of FireFox */
div.vectorMenu ul,
x:-moz-any-link,
x:default {
min-width: 0;
}
// stylelint-enable selector-no-vendor-prefix, selector-type-no-unknown
div.vectorMenu li {
padding: 0;
margin: 0;
text-align: left;
line-height: 1em;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorMenu li a {
display: inline-block;
padding: 0.5em;
white-space: nowrap;
color: @menu-link-color;
cursor: pointer;
font-size: 0.8em;
}
/* IGNORED BY IE6 */
div.vectorMenu li > a {
display: block;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
color: #222;
text-decoration: none;
}
// Expand vectorMenu as basic tabs in IE6
// (IE6 doesn't support :hover on DIV)
* html div.vectorMenu div.menu {
display: block;
position: static;
border: 0;
}
* html div#mw-head div.vectorMenu h3 {
display: none;
}
* html div.vectorMenu li {
float: left;
line-height: 1.125em;
border-right: 1px solid #a7d7f9;
}
* html div.vectorMenu li a {
padding-top: 1.25em;
}
@import 'watchstar.less';