/* * shop-filters.css — SERTARUL DE FILTRE DE PE MOBIL * ============================================================================ * * Se încarcă DOAR pe pagina de categorie, împins cu `@push('head')` din * `resources/views/shop/catalog/category.blade.php`, deci după * `shop-responsive.css` (layout-ul emite `@stack('head')` imediat sub el). * Ordinea contează: câteva reguli de aici bat reguli de acolo cu aceeași * specificitate. * * ── CE PORTEAZĂ, ȘI DE UNDE ──────────────────────────────────────────────── * Producția servește pe mobil o TEMĂ SEPARATĂ (`Themed/Mobile/**` + * `public_html/mobile/css/**`), construită pe Bootstrap 5. Sertarul de filtre * e `#product_filter_off`, un `.offcanvas.offcanvas-start` deschis din butonul * „Filtrează" din rândul de sortare. * * PORTUL NU ÎNCARCĂ ARBORELE ĂLA CSS. Verificat cu grep pe `public/css/legacy/**` * și pe `public/js/**`: ZERO apariții de `bootstrap`, `offcanvas`, `btn-close`, * `form-check`, `fs-8`, `collapse`. Deci numele de clasă ale producției ar fi * pur decorative aici — de aceea markup-ul folosește clase PROPRII * (`shop-filters-*`), iar fișierul ăsta le dă VALORILE citite din producție. * * ── VALORILE, MĂSURATE ÎN BROWSER PE PRODUCȚIE ───────────────────────────── * Chrome headless, 375×812, UA de iPhone, `/category/lenjerie-erotica/ * lenjerie-pentru-ea/body`, sertarul DESCHIS prin click pe „Filtrează". * `getComputedStyle` pe fiecare parte (nu valori „ochite" din foaie): * * #product_filter_off fixed 0,0 · 375×812 · max-width 100% · #fff * z-index 1045 · flex/column * border-right 1px rgba(0,0,0,.175) * transition transform .3s ease-in-out * ÎNCHIS: transform matrix(1,0,0,1,-375,0) · visibility hidden * .offcanvas-backdrop fixed · 100% · #000 · opacity .5 · z-index 1040 * transition opacity .15s linear * .offcanvas-header flex · align-items center · padding 16px · h 62 * .offcanvas-title 20px/30px · weight 500 · #212529 * .btn-close 30×30 (14px + padding 8px) · radius 6px · opacity .5 * .offcanvas-body padding 16px · overflow-y auto · h 704 * .collapse-indicator w 100% · padding 6px 0 · margin-top 16px · 18px * .form-check (rândul) flex · align-items center · gap 8px · h 24 * padding-left 21px, checkbox margin-left −21px * .form-check-input 14×14 · #fff · 1px solid #cbd0dd · radius 3.5px * .form-check-label 14px/17.5px · #212529 * .offcanvas-footer padding 0 16px 16px · h 46 * #clear-filters-mobile 30px înalt · #f5f7fa · #000 · 1px solid #d30009 * #apply-filters-mobile radius 4px · padding 4px 8px · 18px/20px * butonul „Filtrează" la fel, dar padding 4px 24px · inline-block * rândul sortare+buton flex · space-between · align-items center · margin 10px 0 * cât e sertarul deschis: overflow „visible" (`data-bs-scroll="true"`) * * `#d30009` e roșul temei mobile a producției; foaia desktop a portului * folosește `#da0000` pentru alte componente. S-a păstrat valoarea MĂSURATĂ, * fiindcă asta e componenta portată. * * ── BOOTSTRAP: NU EXISTĂ ÎN PORT ─────────────────────────────────────────── * `data-bs-toggle="offcanvas"` / `bootstrap.Offcanvas` NU pot fi folosite: * storefront-ul încarcă jQuery 3.6.4 + 6 fișiere vanilla, niciun Bootstrap * (singura apariție în tot proiectul e `public/js/admin.js`, panoul de admin). * Deschiderea/închiderea sunt scrise în `public/js/shop-filters.js`, pe clasa * de stare `.is-open`. * * ── DESKTOPUL NU SE ATINGE ───────────────────────────────────────────────── * Tot ce e „sertar" trăiește într-un singur `@media (max-width: 767px)`. * În afara lui există DOAR reguli `display: none` pe cele patru noduri NOI * (`.shop-filters-toggle`, `.shop-filters-head`, `.shop-filters-foot`, * `.shop-filters-backdrop`), care pe desktop nu existau deloc. Breakpoint-ul e * 767, ca restul proiectului (`shop-responsive.css`), NU 768. */ /* ========================================================================== 0. Pe DESKTOP nodurile noi nu există vizual ========================================================================== */ .shop-filters-toggle, .shop-filters-head, .shop-filters-foot, .shop-filters-backdrop { display: none; } /* ========================================================================== 1. MOBIL (≤767px) ========================================================================== */ @media (max-width: 767px) { /* ── 1.1 Declanșatorul, în rândul de sortare ─────────────────────────── Producția: `inline-block`, 30px înalt, bg #f5f7fa, text #000, bordură 1px #d30009, radius 4px, padding 4px 24px, 18px/20px. */ .shop-filters-toggle { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 4px 24px; background: #f5f7fa; color: #000; border: 1px solid #d30009; border-radius: 4px; font-size: 18px; line-height: 20px; font-weight: 400; text-align: center; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; } /* Pâlnia din `