Варианты интерфейса промо-калькуляторов с выбором тиража, дат, оснастки и параметров заказа
.btn
.cd__arrow
.cd__badge
.fdc__badge
.cd__tbl-total
.cd
.cd--table
.cd--tbl2 / .cd--v12
.dates-card
.dates-grid
[data-cd]
Dropdown закрывается при клике вне него или при выборе опции.
Выбранная опция подсвечивается фоном primary-50 (#f0f7ff). Одновременно открыт может быть только один dropdown на странице.
Значение в триггере обновляется сразу после выбора — без задержки и анимации.
Карточки дат перестраиваются при смене тиража: цены пересчитываются по матрице data-date-prices.
Три уровня срочности: срочно / завтра / несрочно. Несрочная дата отображает скидку в виде зачёркнутой цены и бейджа процента.
Знак рубля (₽) в ценах дат отображается меньшим кеглем (11px), чтобы визуально не перевешивать цифры.
Минимальное значение — 1. Кнопка «–» недоступна при значении 1 (не уводит в ноль).
Прямое редактирование поля не предусмотрено в текущей версии прототипа.
Модальное окно адаптируется под высоту браузера (100dvh). На мобильных список городов прокручивается внутри окна — сам overlay не скроллится.
Закрывается кликом на overlay или кнопкой «✕».
Попап фиксированной ширины (172px) появляется при hover на иконку «ℹ». Стрелка попапа позиционируется динамически через CSS-переменную --arrow-x, чтобы всегда указывать на иконку даже если попап смещается у края экрана.
Цена за 1 шт рассчитывается от базовой цены (p1 — срочно), а не от цены со скидкой за несрочность. Зачёркнутая цена в таблице показывает стоимость без скидки за тираж.
| Breakpoint | Changes |
|---|---|
| ≤ 440px | Все варианты форм имеют дефолтную ширину 440px, на меньших экранах занимают 100% ширины |
| Mobile | Модальное окно города: список прокручивается внутри окна (flex + overflow-y: auto), overlay не скроллится |
| Mobile | «Доп. комплект» и «Заменить одежду» остаются в одну строку (white-space: nowrap или flex row) |