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:
parent
170d7c07a2
commit
d0360d0b04
|
@ -2,11 +2,6 @@
|
||||||
* Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
|
* 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 */
|
/* Namespaces and Views */
|
||||||
.vectorTabs {
|
.vectorTabs {
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -16,6 +11,11 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
padding-left: 1px;
|
padding-left: 1px;
|
||||||
|
|
||||||
|
/* Navigation Labels */
|
||||||
|
h3 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
float: left;
|
float: left;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -25,6 +25,7 @@
|
||||||
.background-image('images/tab-break.png');
|
.background-image('images/tab-break.png');
|
||||||
background-position: right bottom;
|
background-position: right bottom;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
float: left;
|
float: left;
|
||||||
|
@ -37,10 +38,7 @@
|
||||||
background-position: bottom left;
|
background-position: bottom left;
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
&.new {
|
&.new {
|
||||||
a,
|
a,
|
||||||
a:visited {
|
a:visited {
|
||||||
|
@ -67,11 +65,11 @@
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
height: 1.9em;
|
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;
|
padding-right: 0.615em;
|
||||||
color: @menu-link-color;
|
color: @menu-link-color;
|
||||||
cursor: pointer;
|
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;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: 1.125em;
|
line-height: 1.125em;
|
||||||
}
|
|
||||||
|
|
||||||
#mw-head .vectorMenu h3 {
|
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 {
|
|
||||||
span {
|
span {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -149,19 +131,9 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vectorMenu .vectorMenuCheckbox:checked + h3 span:after {
|
.menu {
|
||||||
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 {
|
|
||||||
list-style: none none;
|
list-style: none none;
|
||||||
background-color: @body-background-color;
|
background-color: @body-background-color;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
@ -179,45 +151,62 @@
|
||||||
display: none;
|
display: none;
|
||||||
// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
|
// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vectorMenu:hover .menu {
|
&:hover .menu {
|
||||||
display: block;
|
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
|
// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
|
||||||
.vectorMenu ul {
|
// Support: IE8
|
||||||
|
.vectorMenuCheckbox:checked ~ .menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: `.vectorMenu ul` can be removed with purged HTML cache
|
||||||
|
ul {
|
||||||
list-style: none none;
|
list-style: none none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vectorMenu li {
|
li {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 1em;
|
line-height: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
.vectorMenu li a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.625em;
|
padding: 0.625em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: @menu-link-color;
|
color: @menu-link-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 0.8125em;
|
font-size: 0.8125em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vectorMenu li.selected a,
|
&.selected a,
|
||||||
.vectorMenu li.selected a:visited {
|
&.selected a:visited {
|
||||||
color: #222;
|
color: #222;
|
||||||
text-decoration: none;
|
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
|
// Invisible checkbox covering the dropdown menu handle
|
||||||
|
@ -234,11 +223,21 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
// Hide the checkbox completely in browsers that don't support :checked
|
// Hide the checkbox completely in browsers that don't support :checked
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
:not( :checked ) > .vectorMenuCheckbox {
|
:not( :checked ) > & {
|
||||||
// When the browser supports :checked, display it
|
// When the browser supports :checked, display it
|
||||||
display: block;
|
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';
|
@import 'watchstar.less';
|
||||||
|
|
Loading…
Reference in New Issue