`, nie sam wiersz — grupa zostawiona widoczna
trzyma swoja wysokosc w tabeli. */
.sleek-cart__head,
.sleek-cart__cell--price,
.sleek-cart__cell--quantity,
.sleek-cart__cell--total {
display: none;
}
/* PROCENTOWE SZEROKOSCI KOLUMN MUSZA ZOSTAC ZDJETE.
Reguly `td:first-child { inline-size: 40% }` obowiazuja dalej po
przelaczeniu komorki na `display: block` — liczyly wtedy 40% z
szerokosci tabeli, czyli 140px zamiast pelnych 345px. Zmierzone:
kolumna tresci miala 44px, tytul lamal sie na dwie linie, a wiersz
rosl do 226px wobec ich 131.5px.
`inline-size: 100%` w tej samej regule co `display: block` tego NIE
naprawia, bo selektor `.sleek-cart__table td:first-child` jest
mocniejszy (0,2,1 wobec 0,1,0). Stad osobna reguła celujaca tak samo. */
.sleek-cart__table th:first-child,
.sleek-cart__table td:first-child,
.sleek-cart__table th:not(:first-child),
.sleek-cart__table td:not(:first-child) {
inline-size: auto;
}
.sleek-cart__table,
.sleek-cart__table tbody,
.sleek-cart__row,
.sleek-cart__cell--product {
display: block;
inline-size: 100%;
}
/* Pierwsza pozycja nie ma gornego paddingu ani kreski — nad nia nie ma
juz naglowka kolumn. Zmierzone u Sleeka: ich pierwszy wiersz ma
131.5px, kolejne 162px, roznica to dokladnie te 30px. */
.sleek-cart__table--dividers .sleek-cart__row:first-child {
border-top: 0;
}
.sleek-cart__row:first-child .sleek-cart__cell--product {
padding-block-start: 0;
}
.sleek-cart__cell {
padding-inline-end: 0;
}
.sleek-cart__media {
flex: 0 0 var(--sleek-cartpage-media-sm);
inline-size: var(--sleek-cartpage-media-sm);
block-size: var(--sleek-cartpage-media-sm);
}
/* Cena wraca do wiersza z tytulem. */
.sleek-cart__price-mobile {
display: block;
}
.sleek-cart__price-mobile .sleek-cart__price {
justify-content: flex-end;
}
/* Rzad „ilosc + Remove": pigulka po lewej, napis po prawej. */
.sleek-cart__action-mobile {
display: flex;
align-items: center;
justify-content: space-between;
inline-size: 100%;
}
.sleek-cart__remove--desktop {
display: none;
}
.cart-page .cart-page__summary.cart-page__summary {
display: block;
}
.cart-page .cart-summary {
max-inline-size: none;
}
.cart-page .cart-totals__total-label,
.cart-page .cart-totals__total-value {
font-size: var(--sleek-cartpage-subtotal-size-sm);
}
}
/* --------------------------------------------------------------------------
8. PUSTA SZUFLADA
ZRODLO: `sleek-theme-demo.myshopify.com`, `assets/cart.css` + `theme.css`
(root 10px, wiec 1rem = 10px). Sleek renderuje pusta szuflade tak:
.drawer__header — „Your cart" + pasek wysylki, ZOSTAJE
.drawer__body — padding-inline 2rem, padding-block-start 1.2rem
.cart-drawer__empty.text-center.grid.gap-10
{padding-block-start:3rem; max-width:35rem; margin:0 auto}
.grid.gap-3 -> + .rte
ul.recommendation-collection.flex-col.gap-4
li.recommendation-collection-item.blocks-radius
{border:1px solid rgb(--color-border); padding:1.4rem}
a.flex.items-center.gap-3
.recommendation-collection-item__image.blocks-radius-sm {flex:0 0 6.6rem}
.flex.items-center.justify-between -> h3.h5.font-body-bolder
+ .btn--icon-circle.btn--secondary
Czego u Sleeka NIE MA, a Horizon renderowal: przycisku „Continue shopping",
zachety do logowania i osobnego tytulu „Your cart is empty" w miejscu
naglowka. Wszystkie trzy schodza w `snippets/cart-products.liquid`
i `snippets/cart-drawer.liquid`.
ODEJSCIE OD SLEEKA: kadr zdjecia kolekcji jest KWADRATOWY
(`aspect-ratio: 1` + `cover`). U nich `![]()
` bierze proporcje z pliku,
bo wszystkie zdjecia demo sa kwadratowe; kolekcja ze zdjeciem 3:4
rozjechalaby wysokosc kafla.
-------------------------------------------------------------------------- */
#cart-drawer .sleek-cart-empty {
/* `cart-drawer-component` zbija interlinie akapitu do 1 dla wierszy
koszyka — tu wraca zwykla interlinia tekstu Sleeka. */
--font-paragraph--line-height: var(--sleek-body-line-height);
display: grid;
gap: var(--sleek-cart-empty-gap);
max-width: var(--sleek-cart-empty-width);
margin-inline: auto;
padding-block-start: var(--sleek-cart-empty-pad-top);
text-align: center;
}
#cart-drawer .sleek-cart-empty__intro {
display: grid;
gap: var(--sleek-cart-empty-intro-gap);
}
#cart-drawer .sleek-cart-empty__title {
margin: 0;
font-size: var(--font-size--h4);
font-weight: var(--font-h4--weight);
line-height: var(--font-h4--line-height);
letter-spacing: var(--font-h4--letter-spacing);
}
#cart-drawer .sleek-cart-empty__lead {
margin: 0;
font-size: var(--font-size--paragraph);
font-weight: var(--font-paragraph--weight);
line-height: var(--font-paragraph--line-height);
}
#cart-drawer .sleek-cart-empty__list {
display: flex;
flex-direction: column;
gap: var(--sleek-cart-empty-list-gap);
margin: 0;
padding: 0;
list-style: none;
}
#cart-drawer .sleek-cart-empty__item {
border: var(--style-border-width) solid var(--sleek-border-color);
border-radius: var(--sleek-radius-block-mobile);
overflow: hidden;
}
#cart-drawer .sleek-cart-empty__link {
display: flex;
align-items: center;
gap: var(--sleek-cart-empty-item-gap);
padding: var(--sleek-cart-empty-item-pad);
color: var(--color-foreground);
text-decoration: none;
}
#cart-drawer .sleek-cart-empty__thumb {
flex: 0 0 var(--sleek-cart-empty-thumb);
width: var(--sleek-cart-empty-thumb);
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--sleek-radius-block-sm);
background-color: var(--sleek-cart-empty-thumb-bg);
}
#cart-drawer .sleek-cart-empty__thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
}
#cart-drawer .sleek-cart-empty__content {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
gap: var(--sleek-cart-empty-item-gap);
min-width: 0;
text-align: start;
}
#cart-drawer .sleek-cart-empty__name {
font-size: var(--font-size--h5);
font-weight: var(--sleek-weight-medium);
line-height: var(--font-h5--line-height);
letter-spacing: var(--font-h5--letter-spacing);
}
/* `.btn--icon-circle.btn--secondary`: kolo --buttons-height (4.8rem) na szarym
tle drugiego przycisku Sleeka, z ikona `.icon--medium` (2rem). */
#cart-drawer .sleek-cart-empty__go {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: var(--sleek-cart-empty-cta-size);
height: var(--sleek-cart-empty-cta-size);
border-radius: var(--sleek-radius-pill);
background-color: var(--sleek-cart-cta-secondary-bg);
color: var(--color-foreground);
}
#cart-drawer .sleek-cart-empty__go-icon {
width: var(--sleek-cart-empty-cta-icon);
height: var(--sleek-cart-empty-cta-icon);
}
/* Sleek zmienia promien kafla na 2rem dopiero od 768px (`.blocks-radius`
kontra `--blocks-radius-mobile`) — ten sam prog co `.sleek-card`. */
@media screen and (min-width: 768px) {
#cart-drawer .sleek-cart-empty__item {
border-radius: var(--sleek-radius-block);
}
}
/* ==========================================================================
9. TRZY POPRAWKI ZGLOSZONE Z PRODUKCJI
========================================================================== */
/* -- 9a. CENA PRZECENIONA JEST CZERWONA --------------------------------
ZMIERZONA STRUKTURA, nie zgadnieta. Wiersz koszyka NIE uzywa komponentu
`product-price` ani klasy `.price` — Horizon renderuje tam gole spany:
Sale price
$134.99 <- cena, BEZ KLASY
Regular price
$239.99
Dlatego celujemy w SPAN BEZ KLASY, ktory ma za soba `.compare-at-price`
w rodzenstwie. Sama obecnosc `` jest jedynym sygnalem przeceny —
Horizon nie dodaje tu zadnej klasy „on sale". */
.cart-items__unit-price-wrapper > div:has(> .compare-at-price) > span:not(.visually-hidden):not(.compare-at-price) {
color: var(--color-price-sale);
font-weight: var(--sleek-weight-bold);
}
/* -- 9b. WARIANT MA BYC WIDOCZNY, NIE UKRYTY --------------------------
Pod tytulem produktu ma stac nazwa wariantu — „White" przy urzadzeniu,
„Natural jade" przy rolce. Wczesniej stal tu filtr ukrywajacy opcje
z jedna wartoscia (mial odciac zrzuty z hurtowni typu „1SET-White,
United States") i przez to wiersz przy urzadzeniu zostawal PUSTY:
dziura miedzy tytulem a cena zamiast informacji.
Naprawione w dwoch miejscach naraz:
`snippets/cart-products.liquid` — filtr zdjety, pokazujemy kazda opcje
poza `Default Title`
dane produktu — opcja „Color" ma sensowna wartosc
Smieciowe nazwy opcji naprawia sie w DANYCH, nie ukrywaniem ich
w motywie: ukryty wiersz i tak zajmuje miejsce w siatce, bo
`.cart-items__details` ma `display: contents`. */
/* ==========================================================================
10. STEROWANIE POZYCJA: HOVERY I ODDECH POD PASKIEM
Sleek NIE MA hoveru ani na przyciskach ilosci, ani na `x` — sprawdzone
w ich `theme.css` (`.quantity__button` ma wylacznie `focus-visible`)
i zmierzone na ich zywym koszyku: zero regul `:hover` dla obu. To jest
swiadome odejscie: pole 36x48 bez zadnej reakcji nie daje znac, ze jest
klikalne, a w szufladzie to jedyne sterowanie, jakie klient ma.
OBIE REGULY RUSZAJA TLO, wiec siedza w zapytaniu o wskaznik. Na dotyku
`:hover` nie jest chwilowy — przegladarka trzyma go na ostatnio dotknietym
elemencie, wiec czerwona plama zostawalaby na `x` po kazdym tapnieciu
w plus lub minus. `transition` stoi POZA media, zeby powrot do stanu
spoczynkowego byl plynny takze wtedy, gdy hover przychodzi z klawiatury.
========================================================================== */
.cart-items .quantity-minus,
.cart-items .quantity-plus,
.cart-items__remove {
transition: background-color var(--duration-hover) var(--ease-sleek),
color var(--duration-hover) var(--ease-sleek);
}
@media (hover: hover) and (pointer: fine) {
.cart-items .quantity-minus:hover,
.cart-items .quantity-plus:hover {
background-color: var(--sleek-cart-ctrl-hover-bg);
}
.cart-items__remove:hover {
background-color: var(--sleek-cart-remove-hover-bg);
color: var(--sleek-cart-remove-hover-color);
}
}
/* ODDECH POD PASKIEM DARMOWEJ WYSYLKI.
Pasek konczyl sie czarna kreska, a zaraz pod nia zaczynalo sie pierwsze
zdjecie produktu — bez zadnej przerwy. Odstep wisi na PASKU, nie na
liscie, bo lista pojawia sie tylko przy niepustym koszyku, a pasek stoi
zawsze (takze w pustym stanie, gdzie tez potrzebuje oddechu). */
.sleek-cart-goal {
margin-block-end: var(--sleek-cart-goal-space-after);
}