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

styles: Apply Codex z-index tokens

Browse source 
Applying central Codex design tokens in new architecture.
This should already show the working principle of the new architecture.
Replacing `@z-index-menu` by `z-index-dropdown`.
Note this is also removing obsolete `@z-index-sidebar-button`.

Bug: T285592
Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
This commit is contained in:
Volker E 2023-03-14 01:37:58 -07:00
parent 784fa9a135
commit 6865b7e7f4
10 changed files with 45 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/common/components/MenuDropdownCheckbox.less
View file

@ -22,7 +22,7 @@
overflow: hidden;
margin: 0;
padding: 0;
z-index: @z-index-menu;
z-index: @z-index-dropdown;
}
// Dropdown <ul> element.
@ -55,7 +55,7 @@
position: absolute;
top: 0;
left: 0;
z-index: @z-index-menu-checkbox;
z-index: @z-index-stacking-1;
opacity: 0;
width: 100%;
height: 100%;

28
resources/common/variables.less
View file

@ -148,27 +148,27 @@
@height-header: unit( 50px / @font-size-browser, rem );
// Z-indices
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
@z-index-base: 0;
// Header z-index-header higher than z-index-menu so that search results overlay variants and more menu
@z-index-header: 4;
@z-index-menu-checkbox: 1;
@z-index-search-button: 1;
@z-index-search-loader: 1;
// See Codex tokens https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
// Header z-index-header with 200 in Codex higher than @z-index-dropdown so that search results
// overlay variants and more menu.
@z-index-header: @z-index-fixed;
@z-index-search-button: @z-index-stacking-1;
@z-index-search-loader: @z-index-stacking-1;
// Ensure that this is displayed on top of .vector-body and clickable.
@z-index-indicators: 1;
@z-index-indicators: @z-index-stacking-1;
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
// @z-index-dropdown: 50; in Codex.
// @z-index-overlay is 450 in new Codex tokens; was 101.
// 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: 3;
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
// 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;

4
resources/skins.vector.js/limitedWidthToggle.less
View file

@ -1,3 +1,5 @@
@import '../common/variables.less';
.client-nojs .vector-settings {
display: none;
}
@ -33,7 +35,7 @@
// Custom popup notification that shows on page load
.vector-limited-width-popup {
position: absolute;
z-index: 1;
z-index: @z-index-stacking-1;
filter: drop-shadow( 0 2px 1px rgba( 0, 0, 0, 0.3 ) );
background-color: #fff;
border: 1px solid #a2a9b1;

4
resources/skins.vector.styles.legacy/layouts/screen.less
View file

@ -25,7 +25,9 @@ body {
position: absolute;
top: @top-personal-tools;
right: 0.75em;
z-index: @z-index-personal;
// It doesn't seem needed to have a `z-index` here. Even with menu overlays like Contributions
// and other dynamic menus like legacy search autocomplete, it seems to work fine without it.
z-index: @z-index-fixed;
ul {
padding-left: 10em; /* Keep from overlapping logo */

2
resources/skins.vector.styles/components/VueEnhancedSearchBox.less
View file

@ -90,7 +90,7 @@
// Make the text input's right border appear on top of the button's left border,
// otherwise the hover transition looks weird
.cdx-text-input {
z-index: 1;
z-index: @z-index-stacking-1;
}
// Use straight corners instead of rounded corners for the border between the

5
resources/skins.vector.styles/layouts/screen.less
View file

@ -107,11 +107,12 @@ body {
// Container logic.
.mw-page-container {
// Setting position and z-index is important as it allows overlays appended to the body tag
// Create stacking context.
// Setting position and z-index as it allows overlays appended to the body tag
// to position themselves over the Vector interface. This forms another stacking context for
// elements placed inside this element
position: relative;
z-index: 0;
z-index: @z-index-base;
// Use non-zero padding to disable margin collapse.
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)
padding-top: 0.05px;

4
resources/skins.vector.styles/layouts/toc/unpinned.less
View file

@ -55,7 +55,7 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
top: 12px;
left: 12px;
margin: 0;
z-index: @z-index-menu;
z-index: @z-index-dropdown;
}
&.client-js {
@ -143,7 +143,7 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
margin-top: @padding-top-content; // Account for padding-top from .mw-body
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
border: @border-width-base @border-style-base @border-color-base;
z-index: @z-index-menu;
z-index: @z-index-dropdown;
.vector-pinnable-header,
.vector-toc-contents {

2
resources/skins.vector.zebra.styles/layouts/screen.less
View file

@ -160,7 +160,7 @@ body {
// to position themselves over the Vector interface. This forms another stacking context for
// elements placed inside this element
position: relative;
z-index: 0;
z-index: @z-index-base;
margin: 0 auto;
// Use non-zero padding to disable margin collapse.
// Be careful not to use overflow-y: scroll here (see T270146 and T271868)

4
resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
View file

@ -42,7 +42,7 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
top: 12px;
left: 12px;
margin: 0;
z-index: @z-index-menu;
z-index: @z-index-dropdown;
}
&.client-js {
@ -130,7 +130,7 @@ body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
margin-top: @padding-top-content; // Account for padding-top from .mw-body
// FIXME: Collapsed TOC styles are not consistent with other vector dropdowns
border: @border-width-base @border-style-base @border-color-base;
z-index: @z-index-menu;
z-index: @z-index-dropdown;
}
@{selector-nojs-collapsed-toc-open} ~ .mw-table-of-contents-container .vector-toc {

28
resources/skins.vector.zebra.styles/variables.less
View file

@ -144,27 +144,27 @@
@height-header: unit( 50px / @font-size-browser, rem );
// Z-indices
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
@z-index-base: 0;
// Header z-index-header higher than z-index-menu so that search results overlay variants and more menu
@z-index-header: 4;
@z-index-menu-checkbox: 1;
@z-index-search-button: 1;
@z-index-search-loader: 1;
// See Codex tokens https://doc.wikimedia.org/codex/latest/design-tokens/z-index.html
// Header z-index-header with 200 in Codex higher than @z-index-dropdown so that search results
// overlay variants and more menu
@z-index-header: @z-index-fixed;
@z-index-search-button: @z-index-stacking-1;
@z-index-search-loader: @z-index-stacking-1;
// Ensure that this is displayed on top of .vector-body and clickable.
@z-index-indicators: 1;
@z-index-indicators: @z-index-stacking-1;
// Menus must overlap indicators (@z-index-indicators) and VisualEditor toolbar (z-index: 2).
// @z-index-dropdown: 50; in Codex
// @z-index-overlay is 450 in new Codex tokens; was 101;
// 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: 3;
// See skinStyles/jquery.ui/jquery.ui.datepicker.css.
// @z-index-ui-datepicker-cover: -1;
// 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;