Слои
Шкала слоёв с шагом пятьдесят. Шаг и есть смысл: между соседними слоями остаётся место чужому виджету, баннеру согласия или чату, которому нужно встать между ними, — и ничего не приходится перенумеровывать.
- Шкала живёт на корне документа, а не на поддереве: панели оверлеев уезжают в
bodyи переменных поддерева не видят. Одна шкала на документ — это свойство, а не ограничение.
Слои: шкала z-index
| Токен | Значение | Роль |
|---|---|---|
--gr-z-bottom-nav--gr-z-bottom-nav | 850 | Нижняя навигация приложения. Самый низкий слой шкалы: панель прижата к нижней кромке и обязана уходить под открытую выпадашку, тултип и модалку. |
--gr-z-navbar--gr-z-navbar | 900 | Прилипшая шапка приложения. Ниже якорных панелей: шапка перекрывает контент, но не выпадашки, тултипы и модалки. |
--gr-z-dropdown--gr-z-dropdown | 1000 | Слой якорных floating-панелей: dropdown, select, tree-select. |
--gr-z-tooltip--gr-z-tooltip | 1050 | Слой тултипов — выше floating-панелей, ниже модалок. |
--gr-z-modal--gr-z-modal | 1100 | Слой модальных окон и диалогов. |
--gr-z-loading--gr-z-loading | 1150 | Слой полноэкранного оверлея загрузки: выше модалок, потому что блокирует всё приложение целиком, но ниже тостов. |
--gr-z-toast--gr-z-toast | 1200 | Слой тостов — единственный, обязанный быть виден поверх всего, включая открытые модалки. |
Источник: @feugene/granularity 0.41.0, tokens/*.json