@gravity-ui/navigation 2.4.1 → 2.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/build/cjs/PageLayout.js +1 -1
- package/build/esm/PageLayout.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -88,6 +88,7 @@ Used for themization Navigation's components
|
|
|
88
88
|
| `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` |
|
|
89
89
|
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` |
|
|
90
90
|
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` |
|
|
91
|
+
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px |
|
|
91
92
|
| Item |
|
|
92
93
|
| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` |
|
|
93
94
|
| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` |
|
package/build/cjs/PageLayout.js
CHANGED
|
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
15
15
|
|
|
16
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
17
17
|
|
|
18
|
-
var css_248z = ".gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic)
|
|
18
|
+
var css_248z = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-background-color,var(--_--background-color));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-aside-top-panel-height);max-height:calc(100vh - var(--gn-aside-top-panel-height));position:sticky;top:var(--gn-aside-top-panel-height);width:inherit;z-index:100}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;z-index:-1}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button-wrapper{width:var(--gn-aside-header-min-width)}.gn-aside-header__logo-button[class],.gn-aside-header__logo-button[class] .g-button__icon{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-aside-top-panel-height) 0 0;max-height:calc(100vh - var(--gn-aside-top-panel-height));overflow:auto;position:fixed;z-index:98}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__pane-top-divider{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));height:1px;margin-top:-1px}.gn-aside-header__pane-top{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:98}.gn-aside-header__pane-top-alert_centered{display:flex;justify-content:space-around}.gn-aside-header__pane-top-alert_dense{padding-bottom:var(--g-spacing-2);padding-top:var(--g-spacing-2)}.gn-aside-header__content{margin-top:var(--gn-aside-top-panel-height);width:calc(100% - var(--gn-aside-header-size));z-index:95}.gn-aside-header__collapse-button{--g-button-background-color-hover:transparent;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:border-box;flex:none;height:20px;margin-top:auto;overflow:hidden;width:100%}.gn-aside-header__collapse-button>.g-button__text{align-items:center;display:flex;height:20px;justify-content:center}.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon{transform:rotate(180deg)}.gn-aside-header__collapse-button .gn-aside-header__collapse-icon{color:var(--g-color-text-secondary)}.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon{color:var(--g-color-text-primary)}";
|
|
19
19
|
styleInject_es.styleInject(css_248z);
|
|
20
20
|
|
|
21
21
|
const TopPanel = React__default["default"].lazy(() => Promise.resolve().then(function () { return require('./TopPanel-1b062791.js'); }).then((module) => ({ default: module.TopPanel })));
|
package/build/esm/PageLayout.js
CHANGED
|
@@ -7,7 +7,7 @@ import { s as styleInject } from './style-inject.es-1f59c1d0.js';
|
|
|
7
7
|
import './cn-ffe5e9f5.js';
|
|
8
8
|
import '@bem-react/classname';
|
|
9
9
|
|
|
10
|
-
var css_248z = ".gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic)
|
|
10
|
+
var css_248z = ".g-root{--gn-aside-top-panel-height:0px}.gn-aside-header{--gn-aside-header-min-width:56px;--_--item-icon-background-size:38px;--_--background-color:var(--g-color-base-background);--_--decoration-collapsed-background-color:var(--g-color-base-warning-light);--_--decoration-expanded-background-color:var(--g-color-base-warning-light);--_--vertical-divider-line-color:var(--g-color-line-generic);--_--horizontal-divider-line-color:var(--g-color-line-generic);background-color:var(--g-color-base-background);height:100%;position:relative;width:100%}.gn-aside-header__aside{background-color:var(--gn-aside-header-background-color,var(--_--background-color));box-sizing:border-box;display:flex;flex-direction:column;height:100vh;left:0;margin-top:var(--gn-aside-top-panel-height);max-height:calc(100vh - var(--gn-aside-top-panel-height));position:sticky;top:var(--gn-aside-top-panel-height);width:inherit;z-index:100}.gn-aside-header__aside:after{background-color:var(--gn-aside-header-divider-vertical-color,var(--_--vertical-divider-line-color));content:\"\";height:100%;position:absolute;right:0;top:0;width:1px;z-index:2}.gn-aside-header__aside-popup-anchor{inset:0;position:absolute;z-index:1}.gn-aside-header__aside-content{--gradient-height:334px;display:flex;flex-direction:column;height:inherit;overflow-x:hidden;position:relative;user-select:none;width:inherit;z-index:2}.gn-aside-header__aside-content>.gn-aside-header-logo{margin:8px 0}.gn-aside-header__aside-content_with-decoration{background:linear-gradient(180deg,var(--gn-aside-header-decoration-expanded-background-color,var(--_--decoration-expanded-background-color)) calc(var(--gradient-height)*.33),transparent calc(var(--gradient-height)*.88))}.gn-aside-header__aside-custom-background{bottom:0;display:flex;position:absolute;top:0;z-index:-1}.gn-aside-header_compact .gn-aside-header__aside-content{background:transparent}.gn-aside-header__header{--gn-aside-header-header-divider-height:29px;box-sizing:border-box;flex:none;padding-bottom:22px;padding-top:8px;position:relative;width:100%;z-index:1}.gn-aside-header__header .gn-aside-header__header-divider{bottom:0;color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));display:none;left:0;position:absolute;z-index:-2}.gn-aside-header__header_with-decoration:before{background-color:var(--gn-aside-header-decoration-collapsed-background-color,var(--_--decoration-collapsed-background-color));content:\"\";display:none;height:calc(100% - var(--gn-aside-header-header-divider-height));left:0;position:absolute;top:0;width:100%;z-index:-2}.gn-aside-header__header:after{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));bottom:12px;content:\"\";height:1px;left:0;position:absolute;width:100%;z-index:-2}.gn-aside-header_compact .gn-aside-header__header:before,.gn-aside-header_compact .gn-aside-header__header_with-decoration .gn-aside-header__header-divider{display:block}.gn-aside-header_compact .gn-aside-header__header_with-decoration:after{display:none}.gn-aside-header__logo-button-wrapper{width:var(--gn-aside-header-min-width)}.gn-aside-header__logo-button[class],.gn-aside-header__logo-button[class] .g-button__icon{height:var(--gn-aside-header-item-icon-background-size,var(--_--item-icon-background-size))}.gn-aside-header__menu-items{flex-grow:1}.gn-aside-header__footer{display:flex;flex-direction:column;flex-shrink:0;margin:8px 0;width:100%}.gn-aside-header__panels{inset:var(--gn-aside-top-panel-height) 0 0;max-height:calc(100vh - var(--gn-aside-top-panel-height));overflow:auto;position:fixed;z-index:98}.gn-aside-header__panel{height:100%}.gn-aside-header__pane-container{display:flex;flex-direction:row;outline:none;overflow:visible;user-select:text}.gn-aside-header__pane-top-divider{background-color:var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));height:1px;margin-top:-1px}.gn-aside-header__pane-top{background:var(--g-color-base-background);position:fixed;top:0;width:100%;z-index:98}.gn-aside-header__pane-top-alert_centered{display:flex;justify-content:space-around}.gn-aside-header__pane-top-alert_dense{padding-bottom:var(--g-spacing-2);padding-top:var(--g-spacing-2)}.gn-aside-header__content{margin-top:var(--gn-aside-top-panel-height);width:calc(100% - var(--gn-aside-header-size));z-index:95}.gn-aside-header__collapse-button{--g-button-background-color-hover:transparent;border-top:1px solid var(--gn-aside-header-divider-horizontal-color,var(--_--horizontal-divider-line-color));box-sizing:border-box;flex:none;height:20px;margin-top:auto;overflow:hidden;width:100%}.gn-aside-header__collapse-button>.g-button__text{align-items:center;display:flex;height:20px;justify-content:center}.gn-aside-header__collapse-button:not(.gn-aside-header__collapse-button_compact) .gn-aside-header__collapse-icon{transform:rotate(180deg)}.gn-aside-header__collapse-button .gn-aside-header__collapse-icon{color:var(--g-color-text-secondary)}.gn-aside-header__collapse-button:hover .gn-aside-header__collapse-icon{color:var(--g-color-text-primary)}";
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
13
13
|
const TopPanel = React__default.lazy(() => import('./TopPanel-2760cf72.js').then((module) => ({ default: module.TopPanel })));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/navigation",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.2",
|
|
4
4
|
"description": "Gravity UI Navigation components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@storybook/addon-links": "^7.6.13",
|
|
60
60
|
"@storybook/preset-scss": "^1.0.3",
|
|
61
61
|
"@storybook/react": "^7.6.13",
|
|
62
|
-
"@storybook/react-webpack5": "^7.6.
|
|
62
|
+
"@storybook/react-webpack5": "^7.6.17",
|
|
63
63
|
"@storybook/testing-library": "0.2.0",
|
|
64
64
|
"@svgr/rollup": "^6.4.0",
|
|
65
65
|
"@types/lodash": "^4.14.202",
|