feat(Drawer): add veil, drawer item z-index to CSS API (#299)

gravity-ui · Aug 30, 2024 · 41c6e37 · 41c6e37
1 parent 0613e66
commit 41c6e37
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/src/components/Drawer/Drawer.scss b/src/components/Drawer/Drawer.scss
@@ -29,6 +29,7 @@ $block: '.#{variables.$ns}drawer';
         background-color: var(--g-color-base-background);
         pointer-events: initial;
         box-shadow: var(--_--item-shadow, none);
+        z-index: var(--gn-drawer-item-z-index);
 
         &_direction_right {
             left: auto;
@@ -85,6 +86,7 @@ $block: '.#{variables.$ns}drawer';
         pointer-events: initial;
         inset: 0;
         background-color: var(--gn-drawer-veil-background-color, var(--_--veil-background-color));
+        z-index: var(--gn-drawer-veil-z-index);
 
         &_hidden {
             display: none;

diff --git a/src/components/Drawer/README.md b/src/components/Drawer/README.md
@@ -105,3 +105,5 @@ The Drawer module consists of two primary components: `Drawer` and `DrawerItem`.
 | `--gn-drawer-item-resizer-handle-color`       | The color of the resizer handle                             |        `--g-color-line-generic`         |
 | `--gn-drawer-item-resizer-handle-color-hover` | The color of the resizer handle when the resizer is hovered |     `--g-color-line-generic-hover`      |
 | `--gn-drawer-item-resizer-z-index`            | z-index of the resizer element                              |                   100                   |
+| `--gn-drawer-veil-z-index`                    | z-index of the veil                                         |                `"auto"`                 |
+| `--gn-drawer-item-z-index`                    | z-index of the drawer item                                  |                `"auto"`                 |