mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 10:21:40 +00:00
[dev] [Less] centralize z-indices
Move all the LESS `z-index` settings to variables.less so it's easy to
conceptualize how UI will be layered. jQuery CSS rules are untouched but
documented.
Also, remove the seemingly redundant re-setting of the `mw-searchButton`
`z-index`:
#mw-searchButton
z-index: 1;
}
This rule was added in 0c77e4f
.
The sidebar work will require `z-index` properties and this refactor
eases the comprehension of those changes, as well as prevents the
accrual of more `z-index` technical debt.
Bug: T246419
Change-Id: Ic112a0ee3f701f87432838797be45c6069fdb522
This commit is contained in:
parent
6dfae96ed2
commit
b80ad85bb1
|
@ -6,8 +6,7 @@
|
|||
position: absolute;
|
||||
top: 0.33em;
|
||||
right: 0.75em;
|
||||
/* Display on top of page tabs - bugs 37158, 48078 */
|
||||
z-index: 100;
|
||||
z-index: @z-index-personal;
|
||||
|
||||
h3 {
|
||||
display: none;
|
||||
|
|
|
@ -104,7 +104,7 @@
|
|||
text-indent: -99999px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
z-index: @z-index-search-button;
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
|
@ -112,7 +112,3 @@
|
|||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#mw-searchButton {
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
@ -62,8 +62,7 @@
|
|||
opacity: 0;
|
||||
visibility: hidden;
|
||||
.transition( opacity 100ms );
|
||||
// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
|
||||
z-index: 2;
|
||||
z-index: @z-index-menu;
|
||||
}
|
||||
|
||||
&:hover .menu {
|
||||
|
@ -134,7 +133,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
z-index: @z-index-menu-checkbox;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
@ -84,9 +84,8 @@ body {
|
|||
float: right;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
/* Ensure that this is displayed on top of .mw-body-content and clickable */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: @z-index-indicators;
|
||||
}
|
||||
|
||||
.mw-indicator {
|
||||
|
@ -101,7 +100,7 @@ body {
|
|||
// `calc` enables to set correct calculation in place again. See T102364.
|
||||
font-size: calc( 1em ~'*' unit( @font-size-base ) );
|
||||
line-height: @line-height-base;
|
||||
z-index: 0;
|
||||
z-index: @z-index-base;
|
||||
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
.oo-ui-defaultOverlay,
|
||||
.skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,
|
||||
.skin-vector .ve-ui-overlay-global {
|
||||
z-index: 101;
|
||||
z-index: @z-index-overlay;
|
||||
}
|
||||
|
||||
body > .oo-ui-windowManager,
|
||||
|
|
|
@ -109,3 +109,25 @@
|
|||
// FIXME: Currently calculates at 11.2px, which is worth nothing and unreadable for a big
|
||||
// part of our audiences. Push up _at least_ to 12px.
|
||||
@font-size-footer: 0.7em;
|
||||
|
||||
// Z-indices
|
||||
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
|
||||
// @z-index-ui-datepicker-cover: -1;
|
||||
@z-index-base: 0;
|
||||
@z-index-menu-checkbox: 1;
|
||||
@z-index-search-button: 1;
|
||||
// Ensure that this is displayed on top of .mw-body-content and clickable.
|
||||
@z-index-indicators: 1;
|
||||
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
||||
// @z-index-ui-slider-range: 1;
|
||||
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
|
||||
@z-index-menu: 2;
|
||||
// See skinStyles/jquery.ui/jquery.ui.slider.css.
|
||||
// @z-index-ui-slider-handle: 2;
|
||||
// Display on top of page tabs (T39158, T50078).
|
||||
@z-index-personal: 100;
|
||||
// See skinStyles/jquery.ui/jquery.ui.selectable.css.
|
||||
// @z-index-ui-selectable-helper: 100;
|
||||
@z-index-overlay: 101;
|
||||
// See skinStyles/jquery.ui/jquery.ui.tooltip.css.
|
||||
// @z-index-ui-tooltip: 9999;
|
||||
|
|
Loading…
Reference in a new issue