Z-index
Z-index-это свойство CSS, которое положение элемента по оси Z.
Элемент с большим значением всегда находится перед элементом с меньшим.
Использование функции z-index - тут.
Z-индекс определяется в системе с помощью публичной функции z(param) файла _layout.scss:
| param | Value |
|---|---|
cds-layer-extra-low | 100 |
cds-layer-low | 200 |
cds-layer-middle | 400 |
cds-layer-high | 600 |
cds-layer-extra-high | 800 |
Shadow
Тени используются для визуального обозначения уровня одного компонента относительно другого по оси Z.
| Переменная | Значение |
|---|---|
--cds-box-shadow-header | 0px 1px 4px rgba(0, 0, 0, 0.2) |
--cds-box-shadow-footer | 0px -1px 4px rgba(0, 0, 0, 0.2) |
--cds-box-shadow-sidebar-left | 1px 0px 4px rgba(0, 0, 0, 0.2) |
--cds-box-shadow-sidebar-right | -1px 0px 4px rgba(0, 0, 0, 0.2) |
--cds-box-shadow-menu | 0px 2px 6px rgba(0, 0, 0, 0.2) |
--cds-box-shadow-modal | 0px 2px 6px rgba(0, 0, 0, 0.2) |
--cds-box-shadow-notification | 0px 2px 6px rgba(0, 0, 0, 0.2) |
Overlay
Оверлей используется для временного, частичного блокирования доступа пользователя к контенту основной страницы, или контенту расположенному ниже компонента, на котором нужно сфокусировать внимание.