Слои

Слои определяются комбинацией свойств z-index, переменных shadow и overlay и используются для определения пространственных отношений между контентом и компонентами в интерфейсе.

Z-index

Z-index-это свойство CSS, которое положение элемента по оси Z. Элемент с большим значением всегда находится перед элементом с меньшим. Z-индекс определяется в системе с помощью публичной функции z(param) файла _layout.scss:

paramValueDescription
modal10000Модальные окна
spinner9050Спинер над оверлеем
overlay9000Оверлей
notice8000Нотисы
tips7500Подсказки
dropdown7000Выпадающие эелементы
header6000Слой шапки
footer5000Слой подвала
hidden-1Для сдвига элемента за нулевой слой
totallyHidden-99999Скрыть элемент со страницы

Shadow

Тени используются для визуального обозначения уровня одного компонента относительно другого по оси Z.

Переменная
--cds-box-shadow-drop0 2px 6px 0 rgba(0, 0, 0, .2)

Overlay

Оверлей используется для временного, частичного блокирования доступа пользователя к контенту основной страницы, или контенту расположенному ниже компонента, на котором нужно сфокусировать внимание.

  • 01

    --cds-color-overlay-01

    RGBA(85, 85, 85, 0.65)

  • 02

    --cds-color-overlay-02

    RGBA(245, 245, 245, 0.65)