diff options
Diffstat (limited to 'garden/src/styles/datepicker.css')
| -rw-r--r-- | garden/src/styles/datepicker.css | 271 |
1 files changed, 271 insertions, 0 deletions
diff --git a/garden/src/styles/datepicker.css b/garden/src/styles/datepicker.css new file mode 100644 index 0000000..657591a --- /dev/null +++ b/garden/src/styles/datepicker.css @@ -0,0 +1,271 @@ +.datepicker { + position: relative; + display: inline-block; +} + +.datepicker-trigger { + background: var(--color-bg); + border: 1px solid var(--color-border); + padding: 4px 8px; + font-family: var(--font-body); + font-size: 12px; + color: var(--color-text); + cursor: pointer; + min-width: 140px; + text-align: left; +} + +.datepicker-trigger:hover { + border-color: var(--color-purple); +} + +.datepicker-dropdown { + position: absolute; + top: 100%; + left: 0; + z-index: 50; + background: var(--color-panel); + border: 1px solid var(--color-border); + padding: 8px; + margin-top: 2px; + width: 224px; +} + +.datepicker-dropdown-fixed { + position: fixed; + top: auto; + left: auto; + z-index: 200; + margin-top: 0; +} + +.datepicker-nav { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 6px; +} + +.datepicker-nav-btn { + background: none; + border: none; + color: var(--color-text-muted); + cursor: pointer; + font-size: 16px; + padding: 2px 6px; + line-height: 1; +} + +.datepicker-nav-btn:hover { + color: var(--color-text-bright); +} + +.datepicker-nav-title { + font-family: var(--font-display); + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + color: var(--color-text-bright); +} + +.datepicker-weekdays { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; + margin-bottom: 2px; +} + +.datepicker-weekday { + font-size: 10px; + font-weight: 600; + color: var(--color-text-muted); + text-align: center; + padding: 2px 0; +} + +.datepicker-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; +} + +.datepicker-blank { + padding: 4px; +} + +.datepicker-day { + background: none; + border: 1px solid transparent; + color: var(--color-text); + font-family: var(--font-body); + font-size: 11px; + padding: 4px; + cursor: pointer; + text-align: center; +} + +.datepicker-day:hover { + background: var(--color-surface-hover); + border-color: var(--color-border); +} + +.datepicker-day-selected { + background: var(--color-purple); + color: var(--color-white); +} + +.datepicker-day-selected:hover { + background: var(--color-purple-hover); + border-color: transparent; +} + +.datepicker-footer { + display: flex; + justify-content: flex-end; + margin-top: 6px; + padding-top: 6px; + border-top: 1px solid var(--color-border); +} + +.datepicker-clear { + background: none; + border: none; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: 11px; + cursor: pointer; + padding: 2px 4px; +} + +.datepicker-clear:hover { + color: var(--color-red); +} + +.mdp { + position: relative; + display: inline-block; +} + +.mdp-trigger { + background: var(--color-bg); + border: 1px solid var(--color-border); + padding: 4px 8px; + font-family: var(--font-body); + font-size: 12px; + color: var(--color-text); + cursor: pointer; + min-width: 80px; + text-align: left; +} + +.mdp-trigger:hover { + border-color: var(--color-pink); +} + +.mdp-popup { + position: absolute; + top: 100%; + left: 0; + z-index: 50; + background: var(--color-panel); + border: 1px solid var(--color-border); + margin-top: 2px; +} + +.mdp-body { + display: flex; +} + +.mdp-month-col { + width: 64px; + max-height: 220px; + overflow-y: auto; + border-right: 1px solid var(--color-border); + padding: 2px 0; +} + +.mdp-wheel-item { + display: block; + width: 100%; + background: none; + border: none; + padding: 5px 8px; + font-family: var(--font-body); + font-size: 11px; + color: var(--color-text); + cursor: pointer; + text-align: left; + white-space: nowrap; +} + +.mdp-wheel-item:hover { + background: var(--color-surface-hover); +} + +.mdp-wheel-item-selected { + background: var(--color-pink); + color: var(--color-white); +} + +.mdp-wheel-item-selected:hover { + background: var(--color-pink); +} + +.mdp-day-col { + padding: 4px; +} + +.mdp-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; +} + +.mdp-day { + background: none; + border: 1px solid transparent; + color: var(--color-text); + font-family: var(--font-body); + font-size: 11px; + padding: 3px; + cursor: pointer; + text-align: center; + min-width: 24px; +} + +.mdp-day:hover { + background: var(--color-surface-hover); + border-color: var(--color-border); +} + +.mdp-day-selected { + background: var(--color-pink); + color: var(--color-white); +} + +.mdp-day-selected:hover { + background: var(--color-pink); + border-color: transparent; +} + +.mdp-footer { + border-top: 1px solid var(--color-border); + padding: 4px 8px; + display: flex; + justify-content: flex-end; +} + +.mdp-clear { + background: none; + border: none; + color: var(--color-text-muted); + font-family: var(--font-body); + font-size: 11px; + cursor: pointer; + padding: 2px 4px; +} + +.mdp-clear:hover { + color: var(--color-red); +}
\ No newline at end of file |