Unverified Commit c2e9bd2f authored by alexpott's avatar alexpott

Issue #3177918 by mherchel: Holistically refactor use of Olivero's z-index...

Issue #3177918 by mherchel: Holistically refactor use of Olivero's z-index rules to play nice with Core

(cherry picked from commit bdf6131d)
parent 11da5373
......@@ -36,7 +36,7 @@
.header-nav {
position: fixed;
z-index: 5; /* appear above overlay */
z-index: 105; /* appear above overlay */
top: 0;
visibility: hidden;
overflow: auto;
......
......@@ -7,7 +7,7 @@
.header-nav {
position: fixed;
z-index: 5; /* appear above overlay */
z-index: 105; /* appear above overlay */
inset-block-start: 0;
inset-inline-end: 0;
visibility: hidden;
......
......@@ -27,7 +27,7 @@
.header__left {
position: relative;
z-index: 2;
z-index: 102;
display: flex;
align-items: flex-end;
-ms-grid-row-align: stretch;
......@@ -50,7 +50,7 @@
@media (min-width: 75rem) {
body:not(.is-always-mobile-nav) .site-header__fixable.js-fixed {
position: fixed;
z-index: 2; /* Appear above body content that is position: relative */
z-index: 102; /* Appear above body content that is position: relative */
top: -4.5rem;
max-width: 98.125rem;
}
......
......@@ -18,7 +18,7 @@
.header__left {
position: relative;
z-index: 2;
z-index: 102;
display: flex;
align-items: flex-end;
align-self: stretch;
......@@ -43,7 +43,7 @@
body:not(.is-always-mobile-nav) {
& .site-header__fixable.js-fixed {
position: fixed;
z-index: 2; /* Appear above body content that is position: relative */
z-index: 102; /* Appear above body content that is position: relative */
inset-block-start: calc(-1 * var(--sp4));
max-width: var(--max-bg-color);
}
......
......@@ -36,7 +36,7 @@
.mobile-nav-button {
position: relative;
z-index: 10; /* appear above mobile nav */
z-index: 110; /* Appear above mobile nav. */
display: flex;
align-items: center;
-ms-grid-row-align: center;
......@@ -67,7 +67,7 @@
}
}
/* Text that says "menu" */
/* Text that says "menu". */
.mobile-nav-button__label {
position: absolute;
......
......@@ -7,7 +7,7 @@
.mobile-nav-button {
position: relative;
z-index: 10; /* appear above mobile nav */
z-index: 110; /* Appear above mobile nav. */
display: flex;
align-items: center;
align-self: center;
......@@ -29,7 +29,7 @@
}
}
/* Text that says "menu" */
/* Text that says "menu". */
.mobile-nav-button__label {
position: absolute;
display: block;
......
......@@ -161,7 +161,7 @@
body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
position: absolute;
z-index: 5; /* Appear above search container. */
z-index: 105; /* Appear above search container. */
/* stylelint-disable csstools/use-logical */
top: calc(100% - 0.5625rem);
left: 50%;
......
......@@ -85,7 +85,7 @@ body:not(.is-always-mobile-nav) {
& .primary-nav__menu--level-2 {
position: absolute;
z-index: 5; /* Appear above search container. */
z-index: 105; /* Appear above search container. */
/* stylelint-disable csstools/use-logical */
top: calc(100% - (0.5 * var(--sp)));
left: 50%;
......
......@@ -29,7 +29,6 @@
}
.skip-link {
z-index: 1; /* Appear above header */
display: block;
width: 100%;
max-width: 98.125rem;
......
......@@ -8,7 +8,6 @@
@import "../base/variables.pcss.css";
.skip-link {
z-index: 1; /* Appear above header */
display: block;
width: 100%;
max-width: var(--max-bg-color);
......
......@@ -110,8 +110,6 @@ html:not(.js) .tabs__tab,
}
}
.tabs__link:focus {
position: relative;
z-index: 1;
border-color: #2494db;
outline: none;
}
......
......@@ -80,8 +80,6 @@ html:not(.js) .tabs__tab,
}
.tabs__link:focus {
position: relative;
z-index: 1;
border-color: var(--color--blue-50);
outline: none;
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment