/** * Datepicker Component Styles * * Wiederverwendbare Styles fuer die Datepicker-Komponente mit Custom Calendar. * Basiert auf dem audatis MANAGER Design-System. * * Features: * - Custom Kalender-Dropdown (linksbuendig unter dem Feld) * - "Heute" Button zum schnellen Auswaehlen * - "Leeren" Button zum Zuruecksetzen * - Verknuepfte Datumsbereiche (von-bis mit automatischem Mindestdatum) * * Verwendung: * */ /* ======================================== Datepicker Component Container ======================================== */ .datepicker-component { position: relative; max-width: 200px; } .grid-3 .datepicker-component { max-width: 100%; } .date-input-wrapper { position: relative; display: flex; align-items: center; flex: 1; } /* ======================================== Text Input (visible) - Underline Style ======================================== */ .date-input-wrapper input.date-picker { width: 100%; padding: 10px 36px 10px 0; border: none; border-bottom: 1px solid var(--border-color, #e5e7eb); border-radius: 0; font-family: inherit; font-size: 14px; background-color: transparent; color: var(--text-primary, #1e293b); transition: border-color 0.2s; box-sizing: border-box; margin-top: 2px; } .date-input-wrapper input.date-picker::placeholder { color: var(--text-muted, #6b7280); } .date-input-wrapper input.date-picker:hover { border-bottom-color: var(--grey-400, #9ca3af); } .date-input-wrapper input.date-picker:focus { outline: none; border-bottom: 1px solid var(--primary-color, #007abb); padding-bottom: 9px; } .date-input-wrapper input.date-picker:disabled { background-color: transparent; cursor: not-allowed; opacity: 0.7; } /* ======================================== Native Date Input (hidden) ======================================== */ .date-input-wrapper .date-picker-native { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .form-group .date-picker { min-height: 40px; padding: 8px 0; } /* ======================================== Calendar Icon Button ======================================== */ .date-input-wrapper .date-icon-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: var(--text-muted, #6b7280); display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: color 0.2s; } .date-input-wrapper .date-icon-btn:hover:not(:disabled) { background-color: var(--grey-100, #f3f4f6); color: var(--primary-color, #007abb); } .date-input-wrapper .date-icon-btn:disabled { cursor: not-allowed; opacity: 0.5; } .date-input-wrapper .date-icon-btn svg { pointer-events: none; } /* ======================================== Date Range Layout Helper ======================================== */ .filter-date-range { display: flex; align-items: center; gap: 8px; } .filter-date-range span { color: var(--text-muted, #6b7280); font-size: 13px; } /* ======================================== Custom Calendar Dropdown ======================================== */ .datepicker-calendar { display: none; position: fixed; /* top/left werden per JS gesetzt */ background-color: var(--surface, #ffffff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 10001; min-width: 280px; padding: 12px; /* Calendar wird per JS in umgehaengt — daher hier explizit den App-Font-Stack setzen, sonst greift der UA-Default (Arial). */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Buttons im Calendar (Monat/Jahr-Header, Tageszahlen, Footer) erben den Font-Stack vom Kalender — der UA-Default fuer button waere sonst Arial. */ .datepicker-calendar button { font-family: inherit; } .datepicker-calendar.show { display: block; animation: calendarAppear 0.15s ease-out; } @keyframes calendarAppear { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Calendar Header */ .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .calendar-nav { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; background: none; cursor: pointer; color: var(--text-muted, #6b7280); border-radius: 6px; transition: all 0.15s; } .calendar-nav:hover { background-color: var(--grey-100, #f3f4f6); color: var(--text-primary, #1e293b); } .calendar-month-year { flex: 1; text-align: center; font-weight: 600; font-size: 15px; color: var(--text-primary, #1e293b); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color 0.15s; } .calendar-month-year:hover { background-color: var(--grey-100, #f3f4f6); } /* ======================================== Month/Year Selector (wird oberhalb des Kalenders angezeigt) ======================================== */ .month-year-selector { display: none; padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--border-color, #e5e7eb); } .datepicker-calendar.show-month-year-selector .month-year-selector { display: block; } /* Kalender-Tage bleiben immer sichtbar */ .month-year-selector-row { display: flex; gap: 12px; } /* Searchable Select innerhalb des Datepickers */ .month-year-selector .searchable-select { flex: 1; } .month-year-selector .month-select-wrapper { flex: 1.2; } .month-year-selector .year-select-wrapper { flex: 1; } /* Dropdown schwebt über dem Kalender */ .month-year-selector .searchable-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 20; background-color: var(--surface, #ffffff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* Dropdown nur sichtbar wenn .open Klasse vorhanden */ .month-year-selector .searchable-select.open .searchable-select-dropdown { display: flex; } .month-year-selector .searchable-select-options { max-height: 200px; overflow-y: auto; } /* Weekdays Header */ .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 8px; text-align: center; } .calendar-weekdays span { font-size: 12px; font-weight: 600; color: var(--text-muted, #6b7280); padding: 4px; } /* Calendar Days Grid */ .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .calendar-day { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--text-primary, #1e293b); border-radius: 6px; transition: all 0.1s; } .calendar-day:hover:not(.empty):not(.disabled) { background-color: var(--grey-100, #f3f4f6); } .calendar-day.empty { cursor: default; } .calendar-day.today { font-weight: 700; color: var(--primary-color, #007abb); border: 2px solid var(--primary-color, #007abb); } .calendar-day.selected { background-color: var(--primary-color, #007abb); color: white; font-weight: 600; } .calendar-day.selected.today { border-color: white; } .calendar-day.disabled { color: var(--grey-300, #d1d5db); cursor: not-allowed; } .calendar-day.disabled:hover { background: none; } /* Calendar Footer */ .calendar-footer { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color, #e5e7eb); } .calendar-clear, .calendar-today { padding: 6px 12px; font-size: 13px; font-weight: 500; border: none; border-radius: 4px; cursor: pointer; transition: all 0.15s; } .calendar-clear { background-color: var(--grey-100, #f3f4f6); color: var(--text-muted, #6b7280); } .calendar-clear:hover { background-color: var(--grey-200, #e5e7eb); color: var(--text-primary, #1e293b); } .calendar-today { background-color: var(--primary-color, #007abb); color: white; } .calendar-today:hover { background-color: var(--primary-darken, #005f8a); } /* ======================================== Responsive Adjustments ======================================== */ @media (max-width: 640px) { .filter-date-range { flex-direction: column; align-items: stretch; gap: 8px; } .filter-date-range span { text-align: center; } .datepicker-calendar { min-width: auto; left: 0; right: 0; } .calendar-day { width: 100%; min-width: 32px; height: 32px; } }