/** * xco-bottom-sheet.css * ----------------------------------------------------------------- * هدف: تبدیل مودال‌های استاندارد بوت‌استرپ (که به‌صورت پیش‌فرض وسط * صفحه با پس‌زمینه‌ی تیره باز می‌شوند - یک الگوی کاملاً دسکتاپی/وبی) * به Bottom Sheet در نمای موبایل: باز شدن از پایین صفحه، با یک * دستگیره‌ی کوچک بالای آن و قابلیت کشیدن رو به پایین برای بستن - * دقیقاً همان الگویی که کاربر اندروید هر روز در اپ‌های نیتیو می‌بیند. * * چرا یک فایل جدا (نه داخل style.css)؟ دقیقاً به همان دلیلی که * xco-app-native.css/app-mode.css جدا نگه داشته شده‌اند: این یک * قابلیتِ سطح-پلتفرم/تعاملی مستقل است (نه صرفاً چند رنگ/فاصله)، با * جفتِ جاوااسکریپتِ اختصاصیِ خودش (xco-bottom-sheet.js). جدا نگه‌داشتن * یعنی اگر روزی خواستیم این رفتار را کامل خاموش/تغییر دهیم، فقط همین * دو فایل کافی‌اند و style.css (که همین الان هم ۶۰۰۰+ خط است) شلوغ‌تر * نمی‌شود. * * چطور کار می‌کند: * - JS (xco-bottom-sheet.js) با گوش‌دادن سراسری به رویدادهای بوت‌استرپ * (show.bs.modal) روی ، به هر مودالی که در عرض موبایل باز * می‌شود کلاس «modal-bottom-sheet» را اضافه می‌کند و یک دستگیره‌ی * کوچک (xco-sheet-handle) در بالای modal-content می‌سازد. * - این فایل CSS، فقط زیرِ همان کلاس و فقط زیرِ بریک‌پوینتِ موبایل/تبلت * (همان ۹۹۱.۹۸px که سایدبار پنل‌ها هم به‌عنوان مرز موبایل استفاده * می‌کنند)، موقعیتِ مودال را از «وسطِ صفحه» به «چسبیده به پایین» * تغییر می‌دهد و انیمیشنِ ورود/خروجِ پیش‌فرضِ بوت‌استرپ (فید+جابه‌جاییِ * عمودیِ کوچک) را با اسلاید از پایین جایگزین می‌کند. * - در دسکتاپ (بالای همین بریک‌پوینت) هیچ‌کدام از قواعد این فایل فعال * نمی‌شوند؛ مودال دقیقاً همان رفتار استاندارد وسط‌صفحه‌ی بوت‌استرپ را * دارد - چون در دسکتاپ الگوی مرکزی خودش طبیعی و آشناست. * * نکته‌ی مهمِ opt-out: بعضی مودال‌ها (مثلاً گالری/لایت‌باکسِ تصاویر * پیوستِ سفارش) از نظر ماهیت یک «نمایشگر تمام‌صفحه»اند نه یک برگه‌ی * انتخاب/فرم، و تبدیل‌شان به Bottom Sheet هم با انتظار کاربر (لایت‌باکس * وسط/تمام‌صفحه‌ی تیره) و هم با محتوای‌شان (تصویر بزرگ + دکمه‌های * قبلی/بعدی) ناهماهنگ است. برای این‌ها کلاس «xco-no-sheet» روی خودِ * div.modal گذاشته می‌شود تا JS/CSS این فایل کاملاً نادیده‌شان بگیرد و * رفتار استاندارد بوت‌استرپی‌شان دست‌نخورده بماند. */ @media (max-width: 991.98px) { /* ---------- خودِ overlay مودال ---------- فقط padding-right ی که بوت‌استرپ برای جبران عرض اسکرول‌بار اضافه می‌کند بی‌اثر می‌شود؛ چون در Bottom Sheet، دیالوگ به لبه‌های صفحه چسبیده و هرگونه padding نامتقارن باعث می‌شود از یک طرف فاصله بگیرد و ظاهرش کج به‌نظر برسد. */ .modal.modal-bottom-sheet { padding-right: 0 !important; padding-left: 0 !important; } /* ---------- خودِ کادر دیالوگ: از «وسطِ صفحه» به «چسبیده به پایین» ---------- */ .modal.modal-bottom-sheet .modal-dialog { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: 100%; margin: 0; display: block; /* هر ارتفاعِ اجباریِ min-height ای که modal-dialog-centered ست می‌کند (برای مرکزچینیِ عمودیِ دسکتاپ) در اینجا بی‌معنی است. */ min-height: 0; } /* ---------- انیمیشن: اسلاید از پایین به‌جای فید+جابه‌جاییِ عمودیِ کوچکِ پیش‌فرض بوت‌استرپ ---------- */ .modal.modal-bottom-sheet.fade .modal-dialog { transform: translateY(100%) !important; transition: transform .32s cubic-bezier(.22, 1, .36, 1); } .modal.modal-bottom-sheet.show .modal-dialog { transform: translateY(0) !important; } /* حین کشیدنِ دستی با انگشت (توسط JS)، ترنزیشن خاموش می‌شود تا کادر دقیقاً همراه انگشت حرکت کند، نه با تاخیرِ ایزینگِ CSS. */ .modal.modal-bottom-sheet.xco-sheet-dragging .modal-dialog { transition: none !important; } /* ---------- بدنه‌ی مودال: گوشه‌های بالا گرد، پایین صاف (چسبیده به لبه‌ی صفحه) ---------- */ .modal.modal-bottom-sheet .modal-content { border: none; border-radius: 1.15rem 1.15rem 0 0; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -.75rem 2.5rem rgba(15, 23, 42, .2); /* فاصله‌ی امن پایینِ گوشی‌های دارای Home Indicator/ناوبریِ ژستی - تا دکمه‌های فوتر مودال زیرِ آن گم نشوند. */ padding-bottom: env(safe-area-inset-bottom, 0); } /* هدر/فوتر ثابت می‌مانند، فقط بدنه اسکرول می‌خورد - دقیقاً رفتاری که کاربر از یک Bottom Sheet نیتیو انتظار دارد (مثلاً فهرست بلندِ گزینه‌ها، ولی دکمه‌ی تایید همیشه در دسترس در پایین). */ .modal.modal-bottom-sheet .modal-header, .modal.modal-bottom-sheet .modal-footer { flex: 0 0 auto; } .modal.modal-bottom-sheet .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ---------- دستگیره‌ی کشیدن (توسط JS ساخته و به ابتدای modal-content اضافه می‌شود) ---------- */ .xco-sheet-handle { display: flex; justify-content: center; align-items: center; padding: .6rem 0 .3rem; flex: 0 0 auto; touch-action: none; cursor: grab; /* منطقه‌ی لمسِ راحت (طبق راهنمای دسترسی‌پذیریِ حداقل ۴۴px)، حتی اگرچه خودِ نوارِ بصری فقط ۴px است. */ min-height: 28px; } .xco-sheet-handle:active { cursor: grabbing; } .xco-sheet-handle span { display: block; width: 38px; height: 4px; border-radius: 3px; background: rgba(15, 23, 42, .18); } /* وقتی مودال دستگیره دارد، دیگر لازم نیست padding-top پیش‌فرضِ modal-header را هم داشته باشیم - از فشردگیِ عمودیِ غیرضروریِ بالای Bottom Sheet جلوگیری می‌کند. */ .modal.modal-bottom-sheet .xco-sheet-handle + .modal-header { padding-top: .25rem; } } /* ری‌دیوس‌شدنِ گوشه‌های محتوای اصلیِ لایت‌باکسِ تصاویر (xco-no-sheet) تحتِ تاثیرِ قواعدِ بالا قرار نمی‌گیرد چون آن مودال اصلاً کلاسِ modal-bottom-sheet نمی‌گیرد (نگاه کنید به شرطِ opt-out در xco-bottom-sheet.js). */ @media (prefers-reduced-motion: reduce) { .modal.modal-bottom-sheet.fade .modal-dialog { transition: none !important; } }