ngxsmk-datepicker/styles/ionic-integration.css

Lightweight, accessible date and range picker for Angular 17+. Standalone component, Signals, SSR and zoneless-ready, Luxon-based i18n and timezones.

/**
 * Ionic Framework Integration Styles
 * 
 * This file contains CSS fixes and overrides to ensure ngxsmk-datepicker
 * works correctly with Ionic Angular applications.
 * 
 * Import this file in your global styles or Ionic app stylesheet:
 * @import 'ngxsmk-datepicker/styles/ionic-integration.css';
 */

/* ============================================
   1. Z-INDEX CONFLICTS FIX
   ============================================ */

/* Default z-index for Ionic compatibility */
ion-app ngxsmk-datepicker {
  --datepicker-z-index-base: 10001;
  /* Below ion-alert (20001), above ion-popover (10000) */
  --datepicker-z-index-backdrop: 10000;
}

/* When inside ion-modal, use higher z-index */
ion-modal ngxsmk-datepicker {
  --datepicker-z-index-base: 20001;
  /* Above modal backdrop (20000) */
  --datepicker-z-index-backdrop: 20000;
}

/* When inside ion-popover, use appropriate z-index */
ion-popover ngxsmk-datepicker {
  --datepicker-z-index-base: 10001;
  /* Above popover (10000) */
  --datepicker-z-index-backdrop: 10000;
}

/* ============================================
   2. BODY SCROLL LOCK DISABLE
   ============================================ */

/* Disable body scroll lock in Ionic apps */
ion-app body:has(.ngxsmk-datepicker-wrapper.ngxsmk-calendar-open:not(.ngxsmk-inline-mode)),
ion-app html:has(.ngxsmk-datepicker-wrapper.ngxsmk-calendar-open:not(.ngxsmk-inline-mode)) {
  overflow: auto !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}

/* Use Ionic's scroll lock instead */
ion-content:has(.ngxsmk-datepicker-wrapper.ngxsmk-calendar-open:not(.ngxsmk-inline-mode)) {
  --overflow: hidden;
}

/* ============================================
   3. POSITIONING IN ION-CONTENT
   ============================================ */

/* Fix positioning when inside ion-content */
ion-content .ngxsmk-popover-container.ngxsmk-popover-open:not(.ngxsmk-inline-container) {
  /* Use absolute positioning relative to ion-content */
  position: absolute !important;
  /* Position will be calculated by JavaScript or use inline mode */
}

/* Alternative: Use inline mode in ion-content (recommended) */

/* ============================================
   4. SAFE AREA INSETS (iOS)
   ============================================ */

/* Bottom sheet with safe area insets */
.ngxsmk-popover-container.ngxsmk-popover-open.ngxsmk-bottom-sheet:not(.ngxsmk-inline-container) {
  padding-bottom: env(safe-area-inset-bottom) !important;
  max-height: calc(90vh - env(safe-area-inset-bottom)) !important;
  max-height: calc(90dvh - env(safe-area-inset-bottom)) !important;
}

/* Fullscreen with safe area insets */
.ngxsmk-popover-container.ngxsmk-popover-open.ngxsmk-fullscreen:not(.ngxsmk-inline-container) {
  padding-top: env(safe-area-inset-top) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

/* ============================================
   5. CSS VARIABLE MAPPING (Ionic Theming)
   ============================================ */

/* Map Ionic theme variables to datepicker variables */
ion-app ngxsmk-datepicker {
  --datepicker-primary-color: var(--ion-color-primary, #6d28d9);
  --datepicker-primary-contrast: var(--ion-color-primary-contrast, #ffffff);
  --datepicker-background: var(--ion-background-color, #ffffff);
  --datepicker-text-color: var(--ion-text-color, #1f2937);
  --datepicker-subtle-text-color: var(--ion-text-color-step-400, #6b7280);
  --datepicker-border-color: var(--ion-border-color, #e5e7eb);
  --datepicker-hover-background: var(--ion-color-light, #f3f4f6);
  --datepicker-range-background: var(--ion-color-primary-tint, #f5f3ff);
}

/* Dark theme mapping (Supports Ionic 7, 8, and 9+ .ion-palette-dark) */
ion-app.ion-theme-dark ngxsmk-datepicker,
ion-app.ion-palette-dark ngxsmk-datepicker,
html.ion-palette-dark ngxsmk-datepicker,
.ion-palette-dark ngxsmk-datepicker {
  --datepicker-background: var(--ion-background-color, #1f2937);
  --datepicker-text-color: var(--ion-text-color, #f3f4f6);
  --datepicker-subtle-text-color: var(--ion-text-color-step-400, #9ca3af);
  --datepicker-border-color: var(--ion-border-color, #374151);
  --datepicker-hover-background: var(--ion-color-step-100, #374151);
  --datepicker-range-background: rgba(var(--ion-color-primary-rgb, 109, 40, 217), 0.15);
}

/* Ionic High Contrast Palette (Ionic 8/9+) */
ion-app.ion-palette-high-contrast ngxsmk-datepicker,
html.ion-palette-high-contrast ngxsmk-datepicker,
.ion-palette-high-contrast ngxsmk-datepicker {
  --datepicker-border-color: var(--ion-text-color, #000000);
  --datepicker-text-color: var(--ion-text-color, #000000);
  --datepicker-background: var(--ion-background-color, #ffffff);
}

/* System Dark Theme Auto Detection (Ionic 8/9+) */
@media (prefers-color-scheme: dark) {
  ion-app:not(.ion-palette-light) ngxsmk-datepicker {
    --datepicker-background: var(--ion-background-color, #121212);
    --datepicker-text-color: var(--ion-text-color, #ffffff);
    --datepicker-subtle-text-color: var(--ion-text-color-step-400, #a0a0a0);
    --datepicker-border-color: var(--ion-border-color, #2a2a2a);
    --datepicker-hover-background: var(--ion-color-step-100, #222222);
  }
}

/* ============================================
   6. TOUCH GESTURE COMPATIBILITY
   ============================================ */

/* Allow Ionic gestures to work when datepicker is in inline mode */

/* Prevent touch event conflicts in popover mode */
.ngxsmk-popover-container.ngxsmk-popover-open:not(.ngxsmk-inline-container) {
  /* Ionic gestures may be blocked - use inline mode instead */
  touch-action: pan-y;
  /* Allow vertical scrolling */
}

/* ============================================
   7. FOCUS MANAGEMENT
   ============================================ */

/* When inside ion-modal, let Ionic handle focus */

/* ============================================
   8. KEYBOARD BEHAVIOR
   ============================================ */

/* Prevent keyboard from covering datepicker on iOS */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  .ngxsmk-popover-container.ngxsmk-popover-open:not(.ngxsmk-inline-container) {
    /* Adjust position when keyboard is visible */
    max-height: calc(100dvh - env(keyboard-inset-height, 0px)) !important;
  }
}

/* ============================================
   9. SHADOW DOM SUPPORT
   ============================================ */

/* Ensure variables cascade into Shadow DOM */

/* Global variables for Shadow DOM */
:root {
  --datepicker-primary-color: var(--ion-color-primary, #6d28d9);
  --datepicker-background: var(--ion-background-color, #ffffff);
  --datepicker-text-color: var(--ion-text-color, #1f2937);
}

/* ============================================
   10. ION-ITEM INTEGRATION
   ============================================ */

/* Better integration with ion-item */
ion-item ngxsmk-datepicker {
  --padding-start: 0;
  --padding-end: 0;
  --inner-padding-end: 0;
}

ion-item ngxsmk-datepicker .ngxsmk-input-group {
  width: 100%;
  border: none;
  background: transparent;
}

/* ============================================
   11. RESPONSIVE BEHAVIOR
   ============================================ */

/* On mobile, prefer inline mode in Ionic */

/* ============================================
   12. CAPACITOR SPECIFIC
   ============================================ */

/* Capacitor status bar spacing */
@supports (padding-top: env(safe-area-inset-top)) {
  .ngxsmk-popover-container.ngxsmk-popover-open.ngxsmk-fullscreen:not(.ngxsmk-inline-container) {
    padding-top: calc(env(safe-area-inset-top) + var(--ion-safe-area-top, 0px)) !important;
  }
}

/* ============================================
   13. POSITIONING FIXES (Mobile)
   ============================================ */

/* Bottom Sheet Positioning */
.ngxsmk-popover-container.ngxsmk-popover-open.ngxsmk-bottom-sheet:not(.ngxsmk-inline-container) {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 20px 20px 0 0 !important;
  margin: 0 !important;
}

/* Fullscreen Positioning */
.ngxsmk-popover-container.ngxsmk-popover-open.ngxsmk-fullscreen:not(.ngxsmk-inline-container) {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ============================================
   14. MOBILE TOUCH TARGET ENHANCEMENTS
   ============================================ */

ion-app ngxsmk-datepicker .ngxsmk-day-cell,
ion-content ngxsmk-datepicker .ngxsmk-day-cell {
  touch-action: manipulation;
  min-height: 38px;
  min-width: 38px;
}

@media (pointer: coarse) {
  ion-app ngxsmk-datepicker .ngxsmk-nav-btn,
  ion-content ngxsmk-datepicker .ngxsmk-nav-btn,
  ion-app ngxsmk-datepicker .ngxsmk-year-nav-btn,
  ion-content ngxsmk-datepicker .ngxsmk-year-nav-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================
   15. TYPOGRAPHY & SMOOTH RENDERING
   ============================================ */

ion-app ngxsmk-datepicker {
  font-family: var(--ion-font-family, inherit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}