fix(AsideHeader): return css public read only var --gn-aside-top-pane…

…l-height (#214)
gravity-ui · Mar 27, 2024 · 69e4bf2 · 69e4bf2
1 parent bb1d3b9
commit 69e4bf2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,7 @@ Used for themization Navigation's components
 | `--gn-aside-header-background-color`                      | Navigation background color                                   |  `--g-color-base-background`   |
 | `--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                                                      |
 | `--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`      |

diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -5,6 +5,7 @@ $block: '.#{variables.$ns}aside-header';
 #{$block} {
     $class: &;
     --gn-aside-header-min-width: 56px;
+    --gn-aside-top-panel-height: 0px;
 
     --_--item-icon-background-size: 38px;
     --_--background-color: var(--g-color-base-background);
@@ -13,25 +14,23 @@ $block: '.#{variables.$ns}aside-header';
     --_--vertical-divider-line-color: var(--g-color-line-generic);
     --_--horizontal-divider-line-color: var(--g-color-line-generic);
 
-    --_--top-panel-height: 0px;
-
     height: 100%;
     width: 100%;
     position: relative;
     background-color: var(--g-color-base-background);
 
     &__aside {
         position: sticky;
-        top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
+        top: var(--gn-aside-top-panel-height);
         left: 0;
         height: 100vh;
         width: inherit;
         display: flex;
         flex-direction: column;
         background-color: var(--gn-aside-header-background-color, var(--_--background-color));
         z-index: 100;
-        max-height: calc(100vh - var(--gn-aside-top-panel-height, var(--_--top-panel-height)));
-        margin-top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
+        max-height: calc(100vh - var(--gn-aside-top-panel-height));
+        margin-top: var(--gn-aside-top-panel-height);
 
         box-sizing: border-box;
 
@@ -199,9 +198,9 @@ $block: '.#{variables.$ns}aside-header';
     &__panels {
         z-index: 98;
         position: fixed;
-        inset: var(--gn-aside-top-panel-height, var(--_--top-panel-height)) 0 0;
+        inset: var(--gn-aside-top-panel-height) 0 0;
         overflow: auto;
-        max-height: calc(100vh - var(--gn-aside-top-panel-height, var(--_--top-panel-height)));
+        max-height: calc(100vh - var(--gn-aside-top-panel-height));
     }
 
     &__panel {
@@ -248,7 +247,7 @@ $block: '.#{variables.$ns}aside-header';
     &__content {
         width: calc(100% - var(--gn-aside-header-size));
         z-index: 95;
-        margin-top: var(--gn-aside-top-panel-height, var(--_--top-panel-height));
+        margin-top: var(--gn-aside-top-panel-height);
     }
 
     &__collapse-button {