@propbinder/mobile-design 0.0.27 → 0.1.0

package/styles/ionic.css

@@ -0,0 +1,711 @@
+/**
+ * Ionic-Specific Styles
+ * 
+ * This file contains all styles that are specific to Ionic Framework and mobile app usage.
+ * These styles are not needed for web-only or design system library builds.
+ */
+
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+
+/* Swiper styles for image carousels */
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+
+/* Mobile common styles */
+/* Note: mobile-common.css is included in @propbinder/design-system/styles/globals.css */
+
+/* Ionic-Specific CSS Variables */
+:root {
+  /* Mobile-specific brand color for headers/backgrounds */
+  --color-brand-secondary: #221a4c;
+  
+  /* Ionic Keyboard Appearance - force light theme */
+  --ion-keyboard-color: #ffffff;
+  --ion-keyboard-background: #ffffff;
+  --ion-keyboard-text-color: #000000;
+  color-scheme: light;
+  
+  /* Layout - Mobile Navigation */
+  --mobile-tab-bar-height: 64px;
+  --mobile-content-spacing: 20px;
+  
+  /* ============================================
+     SAFE AREA / STATUS BAR CONFIGURATION
+     
+     Controls how sheets and modals position relative to the status bar.
+     
+     IMPORTANT: This works with StatusBar.setOverlaysWebView() in app.ts
+     - With overlay: false (default) - system handles status bar, use safe-area-inset-top
+     - With overlay: true - WebView extends under status bar
+     
+     To change behavior, update BOTH:
+     1. app.ts: StatusBar.setOverlaysWebView({ overlay: true/false })
+     2. These CSS variables below
+     ============================================ */
+  
+  /* Sheet/modal top offset - positions content below status bar area */
+  /* Uses max() to ensure at least 32px offset even on devices without notch */
+  /* +12px adds breathing room below the status bar */
+  --app-sheet-top-offset: calc(max(32px, env(safe-area-inset-top, 32px)) + 12px);
+  
+  /* Header top offset - used to fine-tune header position on iOS with overlay: true */
+  /* On web (no safe area), this should be 0px. On iOS, it compensates for status bar overlap */
+  --app-header-top-offset: max(0px, calc(env(safe-area-inset-top, 0px) - 16px));
+}
+
+/* Global Styles for Mobile App */
+html {
+  /* Safe Area Variables - set here according to Ionic documentation */
+  --ion-safe-area-top: env(safe-area-inset-top);
+  --ion-safe-area-bottom: env(safe-area-inset-bottom);
+  --ion-safe-area-left: env(safe-area-inset-left);
+  --ion-safe-area-right: env(safe-area-inset-right);
+}
+
+html,
+body {
+  /* Background color must match theme-color for iOS PWA status bar */
+  background-color: #221a4c;
+  color: var(--text-color-default-primary);
+  font-family: 'Brockmann', system-ui, -apple-system, sans-serif;
+  
+  /* Ensure full height for iOS PWA */
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  
+  /* Don't add padding to html/body - let Ionic components handle safe areas */
+}
+
+/* iOS-specific: Purple background for overshoot areas to match dark header */
+.plt-ios html,
+.plt-ios body {
+  background-color: var(--color-brand-secondary) !important;
+}
+
+.plt-ios ion-app {
+  background-color: var(--color-brand-secondary) !important;
+}
+
+/* When modal opens, ensure purple background is maintained */
+body.backdrop-no-scroll {
+  background-color: var(--color-brand-secondary) !important;
+}
+
+/* Ionic Component Styles - Map to Design System */
+/* These styles apply Ionic's CSS variables to match our design system */
+
+:root {
+  /* Override Ionic's primary color to use our brand color */
+  --ion-color-primary: var(--color-brand-base);
+  --ion-color-primary-rgb: 107, 95, 245;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
+  --ion-color-primary-shade: var(--color-brand-base-hover);
+  --ion-color-primary-tint: var(--color-brand-base);
+  
+  /* Ionic component defaults */
+  --ion-background-color: var(--color-background-neutral-primary);
+  --ion-text-color: var(--text-color-default-primary);
+}
+
+ion-header {
+  box-shadow: none;
+}
+
+ion-toolbar {
+  --background: transparent;
+  --border-width: 0;
+}
+
+ion-content {
+  --background: var(--color-background-neutral-primary);
+}
+
+/* Default: Block browser overscroll on all platforms */
+ion-content::part(scroll) {
+  overscroll-behavior-y: none;
+  -webkit-overflow-scrolling: touch;
+  /* Hide scrollbar while maintaining scroll functionality */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* Hide scrollbar for WebKit browsers (Chrome, Safari, iOS) */
+ion-content::part(scroll)::-webkit-scrollbar {
+  display: none;
+}
+
+.ion-page {
+  overscroll-behavior-y: none;
+}
+
+/* iOS-specific: Enable native scroll overshoot/bounce effect */
+.plt-ios ion-content::part(scroll) {
+  overscroll-behavior-y: contain;
+}
+
+.plt-ios .ion-page {
+  overscroll-behavior-y: contain;
+}
+
+ion-footer {
+  box-shadow: none;
+}
+
+ion-router-outlet {
+  --background: var(--color-background-neutral-primary);
+}
+
+ion-refresher {
+  --background: transparent;
+  --color: white;
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* Force spinner color to brand */
+ion-spinner {
+  --color: var(--color-brand-base) !important;
+  color: var(--color-brand-base) !important;
+}
+
+ion-modal {
+  --background: var(--color-background-neutral-primary);
+  --border-radius: 16px;
+  --box-shadow: var(--box-shadow-lg);
+  /* Prevent modal from resizing when keyboard appears */
+  height: 100% !important;
+  max-height: 100vh !important;
+}
+
+ion-modal .modal-wrapper,
+ion-modal::part(content) {
+  position: fixed !important;
+  height: 100% !important;
+  max-height: 100vh !important;
+}
+
+/* Prevent ion-content inside modals from resizing */
+ion-modal ion-content {
+  --keyboard-offset: 0px !important;
+  height: 100% !important;
+}
+
+ion-action-sheet {
+  --background: var(--color-background-neutral-primary);
+  --color: var(--text-color-default-primary);
+  --button-background: var(--color-background-neutral-secondary);
+  --button-background-hover: var(--color-background-neutral-tertiary);
+  --button-background-selected: var(--color-background-brand);
+  --button-color: var(--text-color-default-primary);
+}
+
+ion-action-sheet::part(group) {
+  border-radius: 16px 16px 0 0;
+}
+
+ion-toast {
+  --background: var(--color-background-neutral-strong);
+  --color: var(--text-color-default-primary-inverse);
+  --border-radius: 8px;
+  --box-shadow: var(--box-shadow-lg);
+}
+
+/* ============================================
+   BOTTOM SHEET MODAL STYLES
+   Based on Ionic 6 bottom sheet presentation
+   ============================================ */
+
+/* Base bottom sheet styling */
+.ds-bottom-sheet {
+  --border-radius: 16px;
+  --box-shadow: 0px -2px 24px rgba(0, 0, 0, 0.12);
+  --backdrop-opacity: 0.4;
+  transition: --backdrop-opacity 0.3s ease;
+  /* Modal at top:0 so backdrop covers full screen including status bar */
+  top: 0;
+  height: 100%;
+}
+
+/* Backdrop styling */
+.ds-bottom-sheet::part(backdrop) {
+  background: rgba(0, 0, 0, var(--backdrop-opacity, 0.6));
+}
+
+/* Handle customization */
+.ds-bottom-sheet::part(handle) {
+  background: var(--border-color-default);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+}
+
+/* Content area styling */
+.ds-bottom-sheet::part(content) {
+  /* Offset content below status bar (backdrop still covers full screen) */
+  margin-top: var(--app-sheet-top-offset);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  background: var(--color-background-neutral-primary, #ffffff);
+  box-shadow: var(--box-shadow);
+  position: absolute !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  height: 100% !important;
+  max-height: 100% !important;
+}
+
+/* Remove border radius when fully expanded */
+@media (min-height: 768px) {
+  .ds-bottom-sheet.modal-sheet-expanded::part(content) {
+    border-radius: 0;
+  }
+}
+
+
+
+/* Ensure content scrolls properly */
+.ds-bottom-sheet ion-content {
+  --background: transparent;
+}
+
+/* Better mobile experience */
+@media (max-width: 768px) {
+  .ds-bottom-sheet::part(content) {
+    max-width: 100%;
+  }
+}
+
+/* Desktop centering */
+@media (min-width: 769px) {
+  .ds-bottom-sheet::part(content) {
+    max-width: 640px;
+    margin: 0 auto;
+  }
+}
+
+/* ============================================
+   Dynamic Height Action Sheets
+   Make action sheets auto-size to their content
+   ============================================ */
+
+/* Auto-height modal - override base bottom sheet styles */
+.ds-bottom-sheet.auto-height {
+  top: 0 !important;
+  height: 100% !important;
+  --height: fit-content;
+  --max-height: 80vh;
+  display: flex;
+  align-items: flex-end;
+}
+
+.ds-bottom-sheet.auto-height .modal-wrapper {
+  position: relative !important;
+  bottom: auto !important;
+  left: auto !important;
+  right: auto !important;
+  height: auto !important;
+  max-height: 80vh !important;
+  top: auto !important;
+  width: 100%;
+}
+
+.ds-bottom-sheet.auto-height::part(content) {
+  position: relative !important;
+  height: auto !important;
+  max-height: 80vh !important;
+  top: auto !important;
+  bottom: auto !important;
+}
+
+/* Ensure action sheet component sizes naturally */
+.ds-bottom-sheet.auto-height ds-mobile-actions-bottom-sheet {
+  display: block;
+  height: auto;
+}
+
+/* Ensure action list scrolls if needed */
+.ds-bottom-sheet.auto-height .actions-list {
+  max-height: calc(80vh - 80px); /* Account for handle, padding, and safe area */
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ============================================
+   Mobile Modal Styles (Generic Modal Service)
+   ============================================ */
+
+/**
+ * Mobile Modal Styles
+ * 
+ * Global styles for modals opened via DsMobileModalService.
+ * These styles are applied to all modals and handle different presentation styles.
+ */
+
+/* Base modal styles */
+.ds-mobile-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --border-radius: 16px;
+  --box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  --max-width: 640px;
+  --width: 100%;
+}
+
+.ds-mobile-modal::part(content) {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* Fullscreen presentation */
+.ds-modal-fullscreen {
+  --width: 100%;
+  --height: 100%;
+  --border-radius: 0;
+}
+
+.ds-modal-fullscreen::part(content) {
+  border-radius: 0;
+}
+
+/* Card presentation (default iOS modal style) */
+.ds-modal-card {
+  --width: 100%;
+  --max-width: 640px;
+  --height: auto;
+  --max-height: 90%;
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-card::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: var(--box-shadow);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+/* Sheet presentation (bottom sheet with breakpoints) */
+.ds-modal-sheet {
+  --width: 100%;
+  --max-width: 640px;
+  --height: auto;
+  --border-radius: 16px 16px 0 0;
+}
+
+.ds-modal-sheet::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: var(--box-shadow);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-modal-sheet::part(handle) {
+  background: var(--border-color-default);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  margin: 8px auto 0;
+}
+
+/* Backdrop styles */
+.ds-mobile-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+/* Animations */
+.ds-mobile-modal.modal-card-enter-active,
+.ds-mobile-modal.modal-sheet-enter-active {
+  animation: slideUpModal 0.3s ease-out;
+}
+
+.ds-mobile-modal.modal-card-leave-active,
+.ds-mobile-modal.modal-sheet-leave-active {
+  animation: slideDownModal 0.3s ease-in;
+}
+
+.ds-mobile-modal.modal-fullscreen-enter-active {
+  animation: fadeInModal 0.2s ease-out;
+}
+
+.ds-mobile-modal.modal-fullscreen-leave-active {
+  animation: fadeOutModal 0.2s ease-in;
+}
+
+@keyframes slideUpModal {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDownModal {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes fadeInModal {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutModal {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Safe area handling for notched devices */
+@supports (padding: env(safe-area-inset-top)) {
+  .ds-modal-fullscreen::part(content) {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Dark mode support (if needed) */
+@media (prefers-color-scheme: dark) {
+  .ds-mobile-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-mobile-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+}
+
+/* Accessibility: Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ds-mobile-modal.modal-card-enter-active,
+  .ds-mobile-modal.modal-card-leave-active,
+  .ds-mobile-modal.modal-sheet-enter-active,
+  .ds-mobile-modal.modal-sheet-leave-active,
+  .ds-mobile-modal.modal-fullscreen-enter-active,
+  .ds-mobile-modal.modal-fullscreen-leave-active {
+    animation: none;
+  }
+}
+
+/* ============================================
+   ION-TAB-BUTTON CUSTOMIZATION
+   ============================================ */
+
+/* Set gap for button-inner to control spacing between icon and label */
+ion-tab-button::part(native) {
+  gap: 2px;
+}
+
+/* ============================================
+   Post Detail Modal Styles
+   ============================================ */
+
+.ds-post-detail-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: calc(100dvh - var(--app-sheet-top-offset)); /* Subtract margin to fit within viewport */
+  --border-radius: 16px 16px 0 0;
+  margin-top: var(--app-sheet-top-offset);
+}
+
+.ds-post-detail-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-post-detail-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-post-detail-modal ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* Control the presenting element (page behind) border radius */
+ion-router-outlet.ion-page-hidden,
+.ion-page.ion-page-hidden {
+  border-radius: 16px 16px 0 0 !important;
+  overflow: hidden;
+}
+
+/* Set background to brand secondary */
+ion-router-outlet {
+  background: var(--color-brand-secondary) !important;
+}
+
+/* Override Ionic's default 10px border-radius */
+body.backdrop-no-scroll ion-router-outlet {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Target the router outlet when modal is active */
+ion-router-outlet:not(.ion-page-hidden) {
+  border-radius: 16px 16px 0 0 !important;
+  transition: border-radius 0.3s ease, transform 0.3s ease;
+}
+
+/* Adjust the presenting element animation */
+.modal-card-enter-active ion-router-outlet,
+.modal-card-enter-active .ion-page {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* When page is scaled behind modal */
+.ion-page-invisible {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Override Ionic's default presenting page styles */
+.modal-shadow .ion-page {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Hide modal shadow when auto-height sheet is active */
+body:has(.ds-bottom-sheet.auto-height) .modal-shadow {
+  display: none !important;
+}
+
+ion-modal.show-modal ~ ion-router-outlet,
+ion-modal.show-modal ~ * ion-router-outlet {
+  border-radius: 16px 16px 0 0 !important;
+  transform: scale(0.915) !important;
+}
+
+/* Most important - override any Ionic defaults */
+ion-router-outlet[style*="border-radius"] {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Target app root with modal */
+ion-app.ion-page-hidden ion-router-outlet,
+ion-app ion-router-outlet.ion-page-hidden {
+  border-radius: 16px 16px 0 0 !important;
+}
+
+/* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ds-post-detail-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-post-detail-modal::part(content) {
+    background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-post-detail-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+  
+  .ds-post-detail-modal ion-content {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+}
+
+/* ============================================
+   Handbook Detail Modal Styles
+   ============================================ */
+
+.ds-handbook-detail-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh; /* Use dynamic viewport height instead of 100% */
+  --border-radius: 16px 16px 0 0;
+  margin-top: var(--app-sheet-top-offset);
+}
+
+.ds-handbook-detail-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-handbook-detail-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-handbook-detail-modal ion-content {
+  --background: var(--color-background-neutral-primary, #ffffff);
+}
+
+/* Safe area handling - NOT needed here since modal positioning (--app-sheet-top-offset) handles it */
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .ds-handbook-detail-modal {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-handbook-detail-modal::part(content) {
+    background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+  
+  .ds-handbook-detail-modal::part(backdrop) {
+    background: rgba(0, 0, 0, 0.6);
+  }
+  
+  .ds-handbook-detail-modal ion-content {
+    --background: var(--color-background-neutral-primary-dark, #1a1a1a);
+  }
+}
+
+/* ============================================
+   Whitelabel Demo Modal Styles
+   ============================================ */
+
+.ds-whitelabel-demo-modal {
+  --background: var(--color-background-neutral-primary, #ffffff);
+  --width: 100%;
+  --max-width: 640px;
+  --height: 100dvh;
+  --border-radius: 16px 16px 0 0;
+  margin-top: var(--app-sheet-top-offset);
+}
+
+.ds-whitelabel-demo-modal::part(content) {
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  background: var(--color-background-neutral-primary, #ffffff);
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.ds-whitelabel-demo-modal::part(backdrop) {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.ds-whitelabel-demo-modal ion-content {
+  --background: #ffffff;
+}
+