wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lower CSS selector specificity on Vector tabs and menu

Browse source 
Lowering selector specificity, higher specificity is unneeded here.

Change-Id: I36779db2d526e1496d2ddcb70ce86968e0d8ad39
This commit is contained in:
Volker E 2018-05-23 10:55:15 +02:00
parent 73eb37394d
commit fff89b5352
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/tabs.less
View file

@ -3,12 +3,12 @@
*/
/* Navigation Labels */
div.vectorTabs h3 {
.vectorTabs h3 {
display: none;
}
/* Namespaces and Views */
div.vectorTabs {
.vectorTabs {
float: left;
height: 2.5em;
.background-image('images/tab-break.png');
@ -92,7 +92,7 @@ div.vectorTabs {
}
/* Variants and Actions */
div.vectorMenu {
.vectorMenu {
direction: ltr;
float: left;
cursor: pointer;
@ -100,7 +100,7 @@ div.vectorMenu {
line-height: 1.125em;
}
div#mw-head div.vectorMenu h3 {
#mw-head .vectorMenu h3 {
float: left;
.background-image('images/tab-break.png');
background-repeat: no-repeat;
@ -108,12 +108,12 @@ div#mw-head div.vectorMenu h3 {
font-size: 1em;
height: 2.5em;
// `padding-right` >= `1px` effectively moves the "background border" outside of the element to act like a real
// border. It is necessary for `div.vectorMenu div.menu` dropdown to align well.
padding-right: 0.5em; // equals `8px` at computed `font-size` of `14px` as visually harmonically with `padding-left` in `div.vectorMenu h3 span`
// border. It is necessary for `.vectorMenu .menu` dropdown to align well.
padding-right: 0.5em; // equals `8px` at computed `font-size` of `14px` as visually harmonically with `padding-left` in `.vectorMenu h3 span`
margin-right: -1px;
}
div.vectorMenu h3 {
.vectorMenu h3 {
span {
position: relative;
display: block;
@ -149,17 +149,17 @@ div.vectorMenu h3 {
}
}
div.vectorMenu .vectorMenuCheckbox:checked + h3 span:after {
.vectorMenu .vectorMenuCheckbox:checked + h3 span:after {
transform: scaleY( -1 );
}
div.vectorMenu .vectorMenuCheckbox:focus + h3 {
.vectorMenu .vectorMenuCheckbox:focus + h3 {
// Simulate browser focus ring
outline: dotted 1px; // Firefox style
outline: auto -webkit-focus-ring-color; // Webkit style
}
div.vectorMenu div.menu {
.vectorMenu .menu {
// Match the width of the dropdown "heading" (the tab)
min-width: 100%;
position: absolute;
@ -176,16 +176,16 @@ div.vectorMenu div.menu {
z-index: 2;
}
div.vectorMenu:hover div.menu {
.vectorMenu:hover .menu {
display: block;
}
// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
// Support: IE8
div.vectorMenu .vectorMenuCheckbox:checked ~ div.menu {
.vectorMenu .vectorMenuCheckbox:checked ~ .menu {
display: block;
}
div.vectorMenu ul {
.vectorMenu ul {
list-style-type: none;
list-style-image: none;
padding: 0;
@ -196,13 +196,13 @@ div.vectorMenu ul {
// stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown
/* Fixes old versions of FireFox */
div.vectorMenu ul,
.vectorMenu ul,
x:-moz-any-link {
min-width: 5em;
}
/* Returns things back to normal in modern versions of FireFox */
div.vectorMenu ul,
.vectorMenu ul,
x:-moz-any-link,
x:default {
min-width: 0;
@ -210,14 +210,14 @@ x:default {
// stylelint-enable selector-no-vendor-prefix, selector-type-no-unknown
div.vectorMenu li {
.vectorMenu li {
padding: 0;
margin: 0;
text-align: left;
line-height: 1em;
}
div.vectorMenu li a {
.vectorMenu li a {
display: block;
padding: 0.625em;
white-space: nowrap;
@ -226,8 +226,8 @@ div.vectorMenu li a {
font-size: 0.8em;
}
div.vectorMenu li.selected a,
div.vectorMenu li.selected a:visited {
.vectorMenu li.selected a,
.vectorMenu li.selected a:visited {
color: #222;
text-decoration: none;
}

4
responsive.less
View file

@ -5,7 +5,7 @@
*/
@media screen and ( max-width: @deviceWidthTablet ) {
div#mw-head {
#mw-head {
position: static !important; /* stylelint-disable-line declaration-no-important */
margin-top: 0.5em;
}
@ -98,7 +98,7 @@
width: 80vw;
padding: 0;
}
div.vectorMenu div.menu {
.vectorMenu .menu {
left: inherit;
right: -1px;
}