/* The dd.mm.yyyy field with its calendar, and the forgiving time field beside it -- see app/helpers/date_picker_helper.rb and app/helpers/time_input_helper.rb. */ .datepicker { position: relative; display: flex; align-items: stretch; gap: var(--space-2); } .datepicker__input { flex: 1; } /* Hidden until app/javascript/date_picker.js has put the class on . Without JavaScript the text field is the whole control, and a button that opens nothing would be a lie. */ .datepicker__toggle { display: none; } .has-date-picker .datepicker__toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .has-date-picker .datepicker__toggle:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue-dark); } /* Above the fields below it, and wide enough for seven columns whatever the field it belongs to measures. Fixed rather than absolute, because a date field may stand in a scrolling container -- a `.table-wrap` -- whose `overflow` would clip the panel and scroll it away. app/javascript/date_picker.js measures the field and sets `top` and `left`, and moves the panel along while anything scrolls. */ .datepicker__panel { position: fixed; z-index: 20; width: max-content; padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .datepicker__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .datepicker__caption { flex: 1; text-align: center; font-weight: 650; color: var(--ink); } .datepicker__nav { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; } .datepicker__nav:hover { background: var(--blue-light); color: var(--blue-dark); } .datepicker__grid { border-collapse: collapse; font-variant-numeric: tabular-nums; } .datepicker__grid th { padding: var(--space-1) 0; color: var(--muted); font-size: 0.75rem; font-weight: 600; text-align: center; } .datepicker__grid td { padding: 1px; } .datepicker__day { display: block; width: 2.25rem; height: 2.1rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer; } .datepicker__day:hover { background: var(--blue-light); } /* Lighter than the month it belongs to, but still a date somebody has to read: --muted alone is 5.75:1 on the panel, the 60% it used to carry 2.52:1. */ .datepicker__day--outside { color: var(--muted); } /* The brand gold reaches 2.2:1 on white -- too little for a marker that carries meaning on its own. --warn is the readable end of the same gold (5.64:1), as in the «upcoming» pill. */ .datepicker__day--today { border-color: var(--warn); font-weight: 700; } .datepicker__day--selected, .datepicker__day--selected:hover { background: var(--blue); color: #fff; font-weight: 650; } .datepicker__hint { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.75rem; text-align: center; } /* A moment is two controls: the day and the time of day. */ .datetime { display: grid; grid-template-columns: minmax(0, 1fr) 8rem; gap: var(--space-2); align-items: start; } @media (max-width: 34rem) { .datetime { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------ Time fields */ /* Five characters plus the padding. In a field grid it still stretches, so the width is a maximum rather than a size. */ .time-input { max-width: 8rem; }