[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;
|
position: absolute;
|
||||||
top: 0.33em;
|
top: 0.33em;
|
||||||
right: 0.75em;
|
right: 0.75em;
|
||||||
/* Display on top of page tabs - bugs 37158, 48078 */
|
z-index: @z-index-personal;
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -104,7 +104,7 @@
|
||||||
text-indent: -99999px;
|
text-indent: -99999px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 1;
|
z-index: @z-index-search-button;
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchButton {
|
#searchButton {
|
||||||
|
@ -112,7 +112,3 @@
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mw-searchButton {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
|
@ -62,8 +62,7 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
.transition( opacity 100ms );
|
.transition( opacity 100ms );
|
||||||
// Menus must overlap indicators (z-index: 1) and VisualEditor toolbar (z-index: 2)
|
z-index: @z-index-menu;
|
||||||
z-index: 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .menu {
|
&:hover .menu {
|
||||||
|
@ -134,7 +133,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: @z-index-menu-checkbox;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -84,9 +84,8 @@ body {
|
||||||
float: right;
|
float: right;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
/* Ensure that this is displayed on top of .mw-body-content and clickable */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: @z-index-indicators;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-indicator {
|
.mw-indicator {
|
||||||
|
@ -101,7 +100,7 @@ body {
|
||||||
// `calc` enables to set correct calculation in place again. See T102364.
|
// `calc` enables to set correct calculation in place again. See T102364.
|
||||||
font-size: calc( 1em ~'*' unit( @font-size-base ) );
|
font-size: calc( 1em ~'*' unit( @font-size-base ) );
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
z-index: 0;
|
z-index: @z-index-base;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0.5em 0;
|
margin: 0.5em 0;
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
.oo-ui-defaultOverlay,
|
.oo-ui-defaultOverlay,
|
||||||
.skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,
|
.skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,
|
||||||
.skin-vector .ve-ui-overlay-global {
|
.skin-vector .ve-ui-overlay-global {
|
||||||
z-index: 101;
|
z-index: @z-index-overlay;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > .oo-ui-windowManager,
|
body > .oo-ui-windowManager,
|
||||||
|
|
|
@ -109,3 +109,25 @@
|
||||||
// FIXME: Currently calculates at 11.2px, which is worth nothing and unreadable for a big
|
// 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.
|
// part of our audiences. Push up _at least_ to 12px.
|
||||||
@font-size-footer: 0.7em;
|
@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 New Issue