Картка тарифу
Free або Pro, поруч, у два стовпці від 640. Три екрани малювали її під двома наборами імен, і обидва набори власноруч переписали грань, радіус, тло, тінь і падінг картки, яку система вже має - .acard. Приватний коментар навіть назвав той атом, а тоді набрав його п'ять значень заново.
Розмітка звідси - та сама, що на coach-verify-tier.html, де тренер обирає тариф. Картка носить class="acard tier": обличчя - атома, стовпчик - компонента.
- Гуртові ціни, кращі за роздрібні
- Мультиклієнтські замовлення - до 3 клієнтів у сесії
- Збережені клієнти та історія по кожному
- Без максимальної гуртової знижки
- Максимальна гуртова ціна
- Безлімітні клієнти в мультиклієнтській сесії
- Збережені клієнти, історія, швидке повторне замовлення
.tier ul{ flex: 1 } - ось навіщо картці стовпчик: список забирає люфт, і дві кнопки стають на одну лінію, навіть коли в одній картці на пункт більше. Приватна редакція мала flex: 1 і align-items: start на сітці, тобто сама ж і скасовувала його: картці за висотою власного вмісту нема куди тиснути кнопку. Зміряно до правки на 1280 - обидві по 381.98, бо на тій ширині в них випадково однакова кількість рядків.
coach-tariff.html і coach-tariff-cancel.html: тут тариф не обирають, а читають той, що вже діє. Ні підзаголовка, ні кнопки, ні підпису - і саме тому картці не потрібен стовпчик.
- Гуртова ціна, краще за роздріб
- До 3 клієнтів у сесії
- Активація миттєва, без оплати
- Максимальна гуртова ціна
- Без обмежень на клієнтів
- Пріоритетна підтримка
Ціна тарифу має третє ім'я і воно не на картці: .tf-price2 у панелі Pro на coach-tariff-free.html. Панель ціну показує, а не володіє нею, тож правило одне на всі три:
Компонент бере обидва набори імен, як upsell.css на кроці 8.28. Перейменувати розмітку трьох екранів означало б дорогою зачепити список моно в price.css і список форми в badge.css - і жодного пікселя за це.
| Повна форма | Коротка | Що це |
|---|---|---|
.tier | .tf-col | картка |
.tier.pro | .tf-col.on | позначена картка - і це не один стан |
.tier-top | .tf-col-h | рядок шапки |
.tier-name | .tf-col-h | назва тарифу (.tf-col-h це обидва) |
.tier-flag | .tf-mini | бейдж поруч із назвою |
.tier-price | .tf-col-p | цифра |
.tier-sub | – | лише повна форма |
.tier li | .tf-col li | що тариф дає |
.tier-cta · .tier-note | – | лише повна форма |
Зміряно на живих сторінках на 390 - не в джерелі, бо саме тому копія пережила два проходи:
| Властивість | .tier | .acard |
|---|---|---|
| грань | 1px solid rgb(233,231,226) | 1px solid rgb(233,231,226) |
| радіус | 12px | 12px |
| тло | rgb(255,255,255) | rgb(255,255,255) |
| тінь | rgba(20,20,15,.05) 0 1px 2px · rgba(20,20,15,.05) 0 10px 30px | |
| падінг | 16px | 16px |
Байт у байт по всіх п'яти. Це перевиведення з посиланням на джерело, і його найважче побачити: кожне значення правильне, кожен токен правильний, і наступна зміна картки продукту дійде рівно до однієї з двох. .tf-col - та сама картка без двох оголошень і з 18px замість 16.
Ім'я .acard при цьому не те, що потрібно: це картка, яка живе у файлі оболонки акаунта, тобто молекула в організмі. Записано як борг, не полагоджено тут - badge.css:158 уже тримає такий самий борг і називає причину: прохід закриває форму, словник закриває крок перейменування, а половина словника гірша за цілий неправильний.
.tier.pro - акцент
«Ось цей ми радимо». Акцентна грань, і це третій файл, що каже те саме, а не четверта відповідь: chip.css 7.23 і radio.css 7.29 обидва «ACCENT IS WHAT CHOSEN LOOKS LIKE». Грань це лінія, а CTA всередині - заливка: дві поверхні, тож картка вказує на себе, не змагаючись із власною дією..tf-col.on - чорнило
«Ось на цьому ви зараз». Чорнильна грань на --bg-surface, і акцент тут відхилено вголос: DESIGN-artifacts.md:61 віддає помаранчевий запрошенню, а твердження про ваш акаунт - не запрошення. Звести їх в один стан означало б узяти сенс одного екрана й покласти на інший.| Що | Було | Стало | Чому |
|---|---|---|---|
| ціна на екрані вибору | Inter 22/800 | моно --fs-20 | четверта цифра тарифу в продукті, і друга з чотирьох, що йшла не тим шрифтом; 22 не на драбині |
.tf-price2 (панель Pro) | Inter 20 | моно | мій власний недогляд кроку 8.28: перенесли ранг і повітря, не пішли за родиною, яка живе в price.css |
.tier-flag | 72.5 × 22 | 72.5 × 19 | п'ята редакція пілюлі badge.css:163. Різнило їх те, чого копія не написала: без line-height пілюля успадковує --lh-airy |
| галочка в списку | <span class="m">✓</span> | ::before | набраний символ читається вголос, не має власного розміру і не відрізняється від слова |
.tf-col li | secondary · «·» | body · «✓» | два списки на ОДНОМУ екрані малювали те саме двома способами; «·» не каже нічого, «✓» каже «входить» |
.tf-col | 18px, без тла й тіні | 16px, acard | видима половина зводу; 18 було позначене [?] |
.tier-name | 18/800 | --fs-16 | у 16 є записане походження, у 18 - ні, а 800 не малюється як 800 від 7.65 |
.tiers | 720px · align-items:start | 640px | 640 це межа набору; align-items:start суперечило flex:1 у тому ж блоці |
.tier-cta | display:block | видалено | .btn--full оголошує display:flex; приватне правило вантажилось після атома й вигравало порядком. Після видалення: 324 × 64 і 372 × 64, без руху |
Одне з них власник може захотіти назад: назва тарифу на екрані, чия єдина робота - «Оберіть тариф», стала на 2px тихішою. Це одне оголошення, якщо відповідь «ні».
Станів не має, не інтерактивна. Картка це блок, а не контрол: наводять і натискають кнопку всередині неї, і вона відповідає своїм фінішем із button.css. .pro і .on - не стани взаємодії, а твердження про тариф: одне радить, друге доповідає.
Сторінка звіряє себе з файлом: 18 власних класів оголошено в plan-card.css.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col. Що саме міняється: два тарифи стають поруч. Було 640, поза реєстром - «одна колонка стає двома» це буквально те, на що названо точку.Прочитані з plan-card.css: 7 семантичних ролей і 11 примітивів. Обличчя картки не рахується тут - воно в .acard, і саме тому цей файл такий короткий.
| Семантичні ролі (7) | Примітиви (11) |
|---|---|
--bg-surface --line-action --line-inverse --text-body --text-muted --text-primary --text-secondary | --fs-12 --fs-14 --fs-16 --fs-20 --fw-black --fw-semibold --space-4 --space-8 --space-12 --space-16 --space-24 |
Повз шкалу тут одне число, позначене [?] у файлі: 6px верхній маргін цифри і вертикальний падінг рядка списку. Обидва успадковані - перше від .tf-col-p, друге від .tf-incl.
Чого бракує
.tf-cur- третя форма цієї ж картки. Тариф, що діє, з назвою, ціною і списком, наcoach-tariff.html. Її сюди не взято: обличчя - чорнильна грань на радіусі 14 з падінгом 20/22, тобто твердження про запис, а не картка продукту, іcoach-tariff.cssце аргументує вголос. Чи є картка-твердження варіантом цього компонента - одне питання етапу 09, а не відкриття, яке доведеться зробити ще раз.- Три інлайнові
style="color:var(--text-muted)"на мітках[?]вcoach-verify-tier. Система цю мітку називає -.coach .tf-price .qm- але селектор вимагає предка.tf-price, тож узагальнення це правка скоупу того файла, не цього компонента. Пораховано, не зачеплено. - Ім'я
.acard. Молекула у файлі організму; борг записано разом із боргомbadge.cssна крок перейменування.