Vector menu: Simplify and cleanup LESS structure
Grouping related things, nest selectors in LESS way for easier readability. Placing `.vectorTabs li` & `.vectorMenuCheckbox` styles mostly in its own nested selector to lower specificity. Change-Id: I8e45af51ffcec618d585a54417e6a7cc3a9b82ad
This commit is contained in:
Volker E
parent
170d7c07a2
commit
d0360d0b04
|
|
@ -2,11 +2,6 @@
|
|||
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
||||
*/
|
||||
|
||||
/* Navigation Labels */
|
||||
.vectorTabs h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Namespaces and Views */
|
||||
.vectorTabs {
|
||||
float: left;
|
||||
|
|
@ -16,6 +11,11 @@
|
|||
background-repeat: no-repeat;
|
||||
padding-left: 1px;
|
||||
|
||||
/* Navigation Labels */
|
||||
h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: left;
|
||||
height: 100%;
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
.background-image('images/tab-break.png');
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
|
@ -37,10 +38,7 @@
|
|||
background-position: bottom left;
|
||||
background-repeat: repeat-x;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.new {
|
||||
a,
|
||||
a:visited {
|
||||
|
|
@ -67,11 +65,11 @@
|
|||
a {
|
||||
display: block;
|
||||
height: 1.9em;
|
||||
padding-left: 0.615em; // equals `8px` at computed `font-size` of `13px` below
|
||||
padding-left: 0.615em; // Equals `8px` at computed `font-size` of `13px` below
|
||||
padding-right: 0.615em;
|
||||
color: @menu-link-color;
|
||||
cursor: pointer;
|
||||
font-size: 0.8125em; // equals `13px` at browser default of `16px`
|
||||
font-size: 0.8125em; // Equals `13px` at browser default of `16px`
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,24 +96,8 @@
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 1.125em;
|
||||
}
|
||||
|
||||
#mw-head .vectorMenu h3 {
|
||||
float: left;
|
||||
.background-image('images/tab-break.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
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 `.vectorMenu .menu` dropdown to align well.
|
||||
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
|
||||
// `padding-left` in `.vectorMenu h3 span`
|
||||
padding: 0 0.5em 0 0;
|
||||
margin: 0 -1px 0 0;
|
||||
}
|
||||
|
||||
.vectorMenu h3 {
|
||||
h3 {
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -149,19 +131,9 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vectorMenu .vectorMenuCheckbox:checked + h3 span:after {
|
||||
transform: scaleY( -1 );
|
||||
}
|
||||
|
||||
.vectorMenu .vectorMenuCheckbox:focus + h3 {
|
||||
// Simulate browser focus ring
|
||||
outline: dotted 1px; // Firefox style
|
||||
outline: auto -webkit-focus-ring-color; // Webkit style
|
||||
}
|
||||
|
||||
.vectorMenu .menu {
|
||||
.menu {
|
||||
list-style: none none;
|
||||
background-color: @body-background-color;
|
||||
clear: both;
|
||||
|
|
@ -179,45 +151,62 @@
|
|||
display: none;
|
||||
// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.vectorMenu:hover .menu {
|
||||
&: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
|
||||
.vectorMenu .vectorMenuCheckbox:checked ~ .menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: `.vectorMenu ul` can be removed with purged HTML cache
|
||||
.vectorMenu ul {
|
||||
// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
|
||||
// Support: IE8
|
||||
.vectorMenuCheckbox:checked ~ .menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// FIXME: `.vectorMenu ul` can be removed with purged HTML cache
|
||||
ul {
|
||||
list-style: none none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.vectorMenu li {
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.vectorMenu li a {
|
||||
a {
|
||||
display: block;
|
||||
padding: 0.625em;
|
||||
white-space: nowrap;
|
||||
color: @menu-link-color;
|
||||
cursor: pointer;
|
||||
font-size: 0.8125em;
|
||||
}
|
||||
}
|
||||
|
||||
.vectorMenu li.selected a,
|
||||
.vectorMenu li.selected a:visited {
|
||||
&.selected a,
|
||||
&.selected a:visited {
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mw-head .vectorMenu h3 {
|
||||
float: left;
|
||||
.background-image('images/tab-break.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom right;
|
||||
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 `.vectorMenu .menu` dropdown to align well.
|
||||
// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
|
||||
// `padding-left` in `.vectorMenu h3 span`
|
||||
padding: 0 0.5em 0 0;
|
||||
margin: 0 -1px 0 0;
|
||||
}
|
||||
|
||||
// Invisible checkbox covering the dropdown menu handle
|
||||
|
|
@ -234,11 +223,21 @@
|
|||
padding: 0;
|
||||
// Hide the checkbox completely in browsers that don't support :checked
|
||||
display: none;
|
||||
}
|
||||
|
||||
:not( :checked ) > .vectorMenuCheckbox {
|
||||
:not( :checked ) > & {
|
||||
// When the browser supports :checked, display it
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked + h3 span:after {
|
||||
transform: scaleY( -1 );
|
||||
}
|
||||
|
||||
&:focus + h3 {
|
||||
// Simulate browser focus ring
|
||||
outline: dotted 1px; // Firefox style
|
||||
outline: auto -webkit-focus-ring-color; // Webkit style
|
||||
}
|
||||
}
|
||||
|
||||
@import 'watchstar.less';
|
||||
|
|
|
|||
Loading…
Reference in a new issue