diff --git a/README.md b/README.md index 463747c..22893f5 100644 --- a/README.md +++ b/README.md @@ -89,13 +89,18 @@ Used for themization Navigation's components | `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` | | `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` | | `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px | -| Item | +| Item | | | | `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` | | `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` | | `--gn-aside-header-item-text-color` | | `--g-color-text-primary` | | `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` | -| Current Item | +| Current Item | | | | `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` | | `--gn-aside-header-item-current-icon-color` | | | | `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` | | `--gn-aside-header-item-current-background-color-hover` | | | +| z-indexes | | | +| `--gn-aside-header-z-index` | Aside header z-index | 100 | +| `--gn-aside-header-panel-z-index` | Aside header panel (Drawer component) z-index | 98 | +| `--gn-aside-header-pane-top-z-index` | Top pane z-index | 98 | +| `--gn-aside-header-content-z-index` | Content (right part) z-index | 95 | diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss index b7837c5..90ab84f 100644 --- a/src/components/AsideHeader/AsideHeader.scss +++ b/src/components/AsideHeader/AsideHeader.scss @@ -31,7 +31,7 @@ $block: '.#{variables.$ns}aside-header'; display: flex; flex-direction: column; background-color: var(--gn-aside-header-background-color, var(--_--background-color)); - z-index: 100; + z-index: var(--gn-aside-header-z-index, 100); max-height: calc(100vh - var(--gn-aside-top-panel-height)); margin-top: var(--gn-aside-top-panel-height); @@ -199,7 +199,7 @@ $block: '.#{variables.$ns}aside-header'; } &__panels { - z-index: 98; + z-index: var(--gn-aside-header-panel-z-index, 98); position: fixed; inset: var(--gn-aside-top-panel-height) 0 0; overflow: auto; @@ -229,7 +229,7 @@ $block: '.#{variables.$ns}aside-header'; &__pane-top { position: fixed; - z-index: 98; + z-index: var(--gn-aside-header-pane-top-z-index, 98); top: 0; background: var(--g-color-base-background); width: 100%; @@ -249,7 +249,7 @@ $block: '.#{variables.$ns}aside-header'; &__content { width: calc(100% - var(--gn-aside-header-size)); - z-index: 95; + z-index: var(--gn-aside-header-content-z-index, 95); margin-top: var(--gn-aside-top-panel-height); } } diff --git a/src/components/MobileHeader/MobileHeader.scss b/src/components/MobileHeader/MobileHeader.scss index d067642..a72aa5d 100644 --- a/src/components/MobileHeader/MobileHeader.scss +++ b/src/components/MobileHeader/MobileHeader.scss @@ -19,7 +19,7 @@ $block: '.#{variables.$ns}mobile-header'; display: flex; justify-content: space-between; align-items: center; - z-index: 100; + z-index: var(--gn-mobile-header-z-index, 100); } &__burger { @@ -39,7 +39,7 @@ $block: '.#{variables.$ns}mobile-header'; } &__panels { - z-index: 98; + z-index: var(--gn-mobile-header-panel-z-index, 98); position: fixed; inset: var(--mobile-header-min-heigth) 0 0; overflow: hidden; diff --git a/src/components/MobileHeader/README.md b/src/components/MobileHeader/README.md index 86fa660..a46d8bc 100644 --- a/src/components/MobileHeader/README.md +++ b/src/components/MobileHeader/README.md @@ -54,3 +54,11 @@ Available panelName 1. 'burger' 2. `id` of element [panelItems prop](https://github.com/gravity-ui/navigation/blob/main/src/components/MobileHeader/MobileHeader.tsx#L38C5-L38C15) + +## MobileHeader vars + +| Name | Description | Default | +| :--------------------------------- | :--------------------------------------------- | :-----: | +| z-indexes | | | +| `--gn-mobile-header-z-index` | Mobile header z-index | `100` | +| `--gn-mobile-header-panel-z-index` | Mobile header panel (Drawer component) z-index | `98` |