Шухляда кошика
У кольоровому шарі це не шухляда, що відкривається: закритого стану в файлі немає зовсім - ні .cart-drawer.open, ні display: none, - і панель просто намальована поверх сторінки-привида .cart-behind. Заміряно: .cart-drawer рендериться на 3 кольорових екранах (cart, cart-empty, cart-oos), по одному примірнику, і на кожному з них вона відкрита. Два власні класи файлу кольору не бачили жодного разу - .cd-group і .cd-note, - бо вони лежать тільки на сірому wireframes/cart-coach.html: це кошик ТРЕНЕРА, тобто первинної аудиторії продукту.
Таблиця нижче порожня, і це не про шухляду: зонд складу читав корінь .cart-ov - власну підкладку панелі, - а в ній один дочірній елемент. Сама панель це .cart-drawer, і в знятій розмітці в ній 128 елементів, майже всі чужі: рядок кошика з cart-row.css (.ci-row .ci-mid .ci-nm .ci-brand .ci-var .ci-per .ci-links .ci-lnk .ci-oldline), степер (.ci-qty, .qn), ціна (.uiv-cur), знижка (.ci-cut), шість фінішів кнопки й 13 знаків .uiv-ic. Неоднозначних імен усередині сім: .ci називають три файли, .ci-ph два, .ci-old .ci-price .ci-sum ділять cart-row і price, .btn--accent і .btn--outline названі тут, у button.css і у field.css. А btn і dark на кнопках цієї розмітки не оголошує жоден файл шару: крок 7.9 забрав у них усі правила, розмітку ще не підмели.
Усередині кореня жодного класу іншого компонента, і дітей у нього 1. Це не «організм ні з чого не складений» - це корінь, який нічого не містить: затемнення або підкладка, а те, що вона затемнює, лежить не в ній.
Розмітка тут - не переписана від руки. Її знято з design/cart.html у цій же сесії, обробники зняті, посилання підняті на рівень. Корінь тут fixed або sticky і в продукті видимий, тож open йому не додавали. Сцена потрібна тільки щоб він лишався всередині свого демо.
Показано в рамці шириною 390, і ширина названа не для краси: це ширина, на якій цей організм у продукті стоїть. Медіа-умова читає в'юпорт, а не контейнер, тож жодне правило самого стенда цього не вирішує - тільки справжній в'юпорт, а він є лише в рамки.
.cart-ov - fixed, inset від --shell-top, z-index 60, фарба --scrim-overlay. Один з восьми незалежних затемнювачів шару: ще .wf-ov і .ceov в overlay.css, .fsheet-ov, .auth-ov, .wfh-scrim, .hrail-scrim, .menu-scrim. Спільного файлу в них немає.cart-drawer - fixed справа, max-width: 420px, z-index 61, колонка flex, --elevation-drawer. Верхній край читає --shell-top: до кроку 7.26 тут стояло top: 40px у медіа-умові на 899 - два числа стенда, вписані в компонент продукту.cd-head - назва, лічильник .cd-cnt моно 12 і .cd-x. Розмір ✕ це --fs-20, і цей самий рядок написаний ще в чотирьох файлах: city-dialog, cookie-banner, filter-sheet, review-modal. У закриття немає атома.cd-body - flex: 1 і власний скрол, а :has(.cd-empty) центрує порожній стан по вертикалі. Єдиний селектор файлу, який читає стан з вмісту, а не з класу.cd-foot - --elevation-bar-top і сітка на дві колонки: ліворуч слово «Разом» і під ним підказка .cd-hint, праворуч сума .cd-total b моно 24 з tabular-nums на обидва рядки, нижче дії на всю ширину - .cd-cta та .cd-cont.cart-behind - .ph-grid у 2 колонки, від 620 у чотири, картки .ph-card висотою 150 з трьома візуалами по :nth-of-type(3n). Єдина медіа-умова файлу не торкається шухляди взагаліПідвал шухляди: 7.86 зробив це неправильно, 7.88 виправив
Замір, з якого все почалось, лишається:.cd-foot був 256px, і 128 із них - дві кнопки L одна під одною. 7.86 поставив їх поруч і відзвітував, що переповнення немає. Він питав кожну КНОПКУ, чи вміщається її власний текст, і обидві казали так. Ряд не питав ніхто. На 390 шухляда 420 завширшки, підвал усередині полів 388, а двом кнопкам треба 222 + 8 + 209 = 439. Вони не вміщались і не могли вміститись. Відкочено.Скорочує підвал не розкладка, а ієрархія. «Продовжити покупки» повторює вихід, який у шухляди вже є двічі - хрестик і підкладка. Принцип 2 каже: рівно одна головна дія, - тож друга дія перестає бути другою кнопкою й стає тим, чим є: посиланням. Три числа роблять решту: друга дія 64 -> 38 (--size-38 - щабель, який у шкали вже є; 36 було б числом, вигаданим тут), нижній відступ підказки 16 -> 12, поля підвалу 16 -> 12.
І останнє забрав власник, бо це рішення файл за нього взяти не міг: головна кнопка L -> M, 64 -> 52. Це правка розмітки на двох екранах, що малюють підвал, а не компонент, який лізе перерозмірювати атом: розмір контрола обирає той, хто його ставить, - це контракт, який button.css проголошує вголос. «Обрати ціль» у порожній шухляді лишається L: вона в .cd-body, по центру, і ні з чим не змагається.
7.93, і цього разу правило змінило чотири файли одразу. Власник сказав, куди дивитись: підказка «Знижка й бонуси» стояла окремим рядком, а окремий рядок коштує власної висоти плюс власного відступу. Її місце - під словом «Разом», у тій самій колонці, із сумою збоку від обох. Це один рядок замість двох.
Написано на .cd-foot, а не на .cd-total, і розмітка не зрушила: .cd-total стає display: contents, і його двоє дітей розставляє сітка підвалу - слово в колонку 1 рядок 1, сума в колонку 2 через обидва рядки й по центру, підказка в колонку 1 рядок 2. Між словом і підказкою відступу немає: вони одна пара, а повітря під парою належить дії, як воно вже належало .cd-cont і .cd-blocked. Змінна -> значення -> чому: кегль суми --fs-30 -> --fs-24 - щабель, який у шкалі вже є нижче 30, а не число, обране тут.
Разом за чотири кроки: 256 -> 219 -> 207 -> 181px, тобто -29% і 22,6% замість 32% висоти телефона. Стан «немає в наявності» - 227. На 320 підвал 200: підказка там переходить у два рядки. Переповнення 0 на 320, 360, 390, 430 і 1280. І рамка стенда показала 181 одразу - бо цього разу змінилось правило, а не розмітка.
І те, чого 7.90 не зробив. Правку внесли у два продуктові екрани, а копій цієї розмітки чотири: ще стенд і його рамка, зняті з design/cart.html на 7.86. Тож цей абзац казав «64 -> 52», а кнопка на кілька рядків вище малювалась 64 - сторінка суперечила сама собі, і неправою була картинка. Виправлено на 7.91 одним проходом по всіх чотирьох файлах, і заведено перевірку, яка питає, чи носить кожна кнопка стенда той самий розмір і ту саму обробку, що в продукті: разом із шухлядою вона знайшла ще три розбіжності - на toolbar, на restock-note і в прикладі коду на button. Тим же кроком з другої дії знято btn--l: з чотирьох її оголошень підвал перебивав три, приземлявся лише кегль, і на десктопі посилання читалось 18 проти 16 у головної кнопки над ним. --fs-18 -> --fs-16.
Разом: 256 -> 219 -> 207px. І цього разу питали ряд: на 320, 360, 390, 430 і 1280 scrollWidth - clientWidth підвалу 0, шухляди 0, сторінка вбік не їде, жоден нащадок не стоїть за межами коробки підвалу.
Ширину сказано двічі
.cd-cta, .cd-cont, .cd-fix{ width: 100% } і .cd-blocked{ width: 100% }. У кольоровій розмітці ці класи стоять на чотирьох елементах, і кожен з чотирьох уже несе btn--full, а .btn--full це рівно width: 100%. Вирішувач такого не бачить: обидва оголошення кажуть одне й те саме, тож жодне ніде не програє. Це той самий вид, який крок 7.9 упіймав одним правилом нижче - у .cd-empty ширину зняли саме з цією формулою («обидві дії вже несуть btn--full»), а два правила над нею лишились.Сторінка під шухлядою належить цьому ж файлу, і перший знімок її не взяв - з тієї самої причини, з якої не взяв підкладку шита фільтрів: .cart-behind, .cart-ov, .ph-grid і .ph-card - сусіди шухляди, а не її діти. Уся суть .cart-behind у тому, що кошик - це шухляда поверх сторінки, а не сторінка сама по собі, і з відрізаною сторінкою цього не видно. Рамка вгорі тепер її несе.
Решта шести класів живе на трьох інших екранах, і кожен з них - окрема відповідь, а не варіант оформлення.
.cd-empty з cart-empty.html. .cd-body:has(.cd-empty) перемикає тіло на flex і центрує - тобто порожній стан міняє розкладку тіла, а не тільки його вміст. Ведмедя ставить uivCart(), замінюючи 🛒.cd-oosnote в тілі, .cd-blocked і .cd-fix у підвалі - єдиний екран, де кошик не можна оформити: головна дія стає «Видалити недоступний товар», а оформлення падає рангом нижче.cd-group і .cd-note з cart-coach.html: рядки згруповані по клієнтах. Роздільник тут - .cd-group + .cd-group, і саме на ньому 7.97 витратив замір: :last-child не збігався з жодною групою, тож обидві малювали грань, а примітка під другою малювала свою| Стан | Що робить | Чому так |
|---|---|---|
| спокій | панель намальована завжди: класу .open на ній немає в жодному з десяти файлів обох шарів, і жоден скрипт його не додає | три екрани кошика і є її відкритим станом |
| порожній | .cd-empty: знак .ei 118px у колі, заголовок .et, рядок .es і дві дії | один примірник, на cart-empty |
| товару немає | .cd-oosnote на --bg-warning з рамкою --line-notice, а замість «Оформити» - .cd-fix і .cd-blocked | один примірник, на cart-oos |
| кошик тренера | .cd-group дає рамку між клієнтами, .cd-note пояснює одну доставку на тренера | тільки сірий cart-coach.html: кольорового двійника у цього екрана немає |
| наведення й фокус | у файлі жодного псевдокласу стану: ні :hover, ні :focus-visible | локальну редакцію наведення для outline зняли на 6.3 - фініш має свою |
| фокус і Escape | пастка 7.85 вибирає панель за формою: .open + position: fixed + ненульова висота + фокусоване всередині | ця панель не має .open, тож форма її не вибирає; у вимірі 7.85 клас додав сам скрипт заміру, бо в продукті її нічим відкрити |
У файлі 1 медіа-умова, і кожна з них - межа, якої стандартні ширини перепису (360 / 390 / 720 / 1280) не бачать зсередини смуги. Заміряти їх треба власними ширинами, по одній з кожного боку.
@media (min-width: 620px)
Сторінка звіряє себе з файлом: 20 власних класів і 0 станів.
ПОВЕДІНКА НА ШИРИНІ - етап 10, крок 4
Від якого порогу:--bp-grid-2col, уже реєстрове. Раунд організмів нічого не складав.Прочитані з cart-drawer.css: 15 семантичних ролей і 25 примітиви.
| Семантичні ролі (15) | Примітиви (25) |
|---|---|
--bg-page --bg-surface --bg-warning --elevation-1 --elevation-bar-top --elevation-drawer --line-hair --line-notice --line-strong --scrim-overlay --text-action --text-body --text-muted --text-secondary --text-warning | --container-page --container-text --font-display --font-mono --fs-12 --fs-14 --fs-16 --fs-20 --fs-24 --fw-bold --fw-medium --fw-semibold --lh-airy --lh-flat --ls-lead --radius-12 --radius-circle --size-38 --space-12 --space-16 --space-2 --space-24 --space-4 --space-40 --space-8 |
Вирішувач по всьому файлу: 5 оголошень збігаються з елементами й ніколи не виграють, і всі п'ять пояснюються. Чотири - це чотири сторони border-color у .cd-oosnote зі структурного блоку, і б'є їх той самий .cd-oosnote з блоку кольору (border-color: var(--line-notice)): це і є оголошений розкол «структура перша, колір другий», де колір виграє навмисне. П'яте - .cart-behind .ph-card і його background-image: збіг з 24 елементами, і всі 24 забирають три правила :nth-of-type(3n+1 / 3n+2 / 3n), які й ставлять фото.
48 оголошень не мають елемента, і всі 48 - тренерові
Вони лежать у чотирьох правилах:.cd-group, .cd-group:last-child і двох редакціях .cd-note. Це групування кошика по клієнтах і рядок про одну доставку на тренера. Це не мертвий код - розмітка існує, на cart-coach.html, з групами «Андрій» і «Марія». Вона просто ніколи не була пофарбована: з 142 екранів кольорових 40, і 42 тренерські серед них - жодного. Заголовок групи .cg-head свій файл (client-row.css) уже має; сама група - тут.Чого бракує
- Закритого стану немає - рішення власника, і воно про слово: або шухляда отримує
.openі те, що її ховає, або це не шухляда, а частина екрана кошика, і тоді пастка фокуса 7.85 має ловити її іншим ключем - Кошик тренера без кольору -
.cd-groupі.cd-noteчекають на кольоровийcart-coach, а це первинна аудиторія - У ✕ немає атома -
--fs-20для закриття написано в п'яти файлах окремо btnіdarkу розмітці - крок 7.9 забрав у цих імен усі правила, підмітання розмітки лишилось на крок 6- Фото товару обирає позиція -
:nth-of-type(3n)дає картинку за місцем у списку, а не за товаром: це тимчасові візуали, і в системі про це немає жодного правила
Не домальовано наперед і не замовчано: етап 09 стартує з цього списку, зведеного в design/kit/docs/architecture.md.