Компоненты
Анимация
Появление, карточка с подсветкой, счётчик, анимация окна и уведомления, нажатие.
Появление (Blur Fade)
При открытии страницы карточки по очереди поднимаются снизу из лёгкого размытия: 0,48 с, каждая на 50 мс позже.
Правила
- ui-rise-row — дочерние блоки по порядку (с 8-го — вместе); ui-rise + --i — один блок.
- Тело страницы — ui-page-rise: только проявление, без сдвига (липкие и фиксированные части остаются на месте).
- Не ставится на строки таблиц и элементы списков: плотный рабочий экран должен появляться сразу.
Карточка с подсветкой (Spotlight Card)
С мышью: карточка приподнимается на 2 px, за курсором идёт мягкий зелёный свет и светлая кромка. На телефоне и планшете — обычная карточка.
Правила
- Ставится на карточку, по которой нажимают (показатель, фирма, тур); на карточку с текстом — нет.
- Не сочетается с data-tip: оба используют ::after.
Счётчик (Number Ticker)
Показатель считает от 0, когда появляется на экране, и от старого значения к новому, когда оно меняется — 0,9 с.
Правила
- Страница рисует настоящее значение: экранный диктор и копирование получают верное число.
- У родителя tnum: цифры одной ширины, число не прыгает.
Окно, меню и уведомление
Окно открывается снизу и из меньшего размера, фон затемняется; меню раскрывается сверху; уведомление поднимается, его время уходит по полоске, и оно гаснет.
Правила
- Открытие 0,26 с, меню 0,16 с, уведомление 0,38 с; закрытие быстрее.
- Боковое меню и нижняя шторка сохраняют своё выезжание.
Нажатие, блик, линия вкладки, отметка
Нажатая кнопка чуть уменьшается (на телефоне это чувствует палец); по главной кнопке один раз пробегает блик; линия вкладки растёт из середины; отметка и переключатель — с пружинкой.
Кнопки
Вкладки
Отметка и переключатель
Правила
- Всё — в самом классе: новая разметка не нужна.
- Если в системе включено «уменьшение движения» — ничего не двигается.