@prolibu-suite/cobalt-core 0.6.0 → 0.8.0

package/dist/collection/components/co-date-time-picker/co-date-time-picker.css

@@ -0,0 +1,325 @@
+/* ============================================================
+   co-date-time-picker — the field box mirrors co-date-field /
+   co-input (same Text Field anatomy) so a datetime field is
+   visually identical to every other form control. The panel is
+   the co-calendar grid + a Google-style scrollable hour list.
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-date-time-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+/* ---- Label (mirrors co-date-field/co-input) ---- */
+.co-date-time-picker__label {
+  padding: 0 var(--co-spacing-xs);
+  color: var(--co-semantic-text-secondary);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/*
+ * co-popover's :host defaults to inline-block (sized to content) — right for
+ * button triggers, wrong for a full-width field. This descendant selector
+ * (0,1,1) outranks co-popover's own :host rule (0,1,0). We do NOT use
+ * match-width (that would stretch the panel to the field width).
+ */
+.co-date-time-picker co-popover {
+  display: block;
+  width: 100%;
+}
+
+.co-date-time-picker__trigger {
+  display: block;
+  width: 100%;
+}
+
+/* ---- Field box ---- */
+.co-date-time-picker__field {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  background: var(--co-semantic-surface-page);
+  border: 1px solid var(--co-semantic-border-field);
+  border-radius: var(--co-border-radius-xs);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  min-height: 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* Size variants (mirror co-input/co-date-field: s 28 / sm 32 / md 40 / lg 48) */
+.co-date-time-picker__field--s { min-height: 28px; padding: var(--co-spacing-xxs) var(--co-spacing-sm); }
+.co-date-time-picker__field--sm { min-height: 32px; padding: var(--co-spacing-xs) var(--co-spacing-sm); }
+.co-date-time-picker__field--lg { min-height: 48px; padding: var(--co-spacing-sm) var(--co-spacing-lg); }
+
+/* ── Variant: flat (no border/background — reads as content) ──
+   Declared BEFORE the state rules below: same specificity (0,2,0), so the
+   focused/invalid/disabled treatments still win on source order. */
+:host([variant='flat']) .co-date-time-picker__field {
+  background: transparent;
+  border-color: transparent;
+}
+
+.co-date-time-picker__icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+/* The value itself is the trigger: a real button (keyboard-operable), styled
+   as plain text inside the field box. */
+.co-date-time-picker__display {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 400;
+  letter-spacing: inherit;
+  line-height: 1;
+  color: var(--co-semantic-text-default);
+  text-align: left;
+  cursor: pointer;
+  /* The focus ring is drawn on the field box (:focus-within), like co-input. */
+  outline: none;
+}
+
+/* Truncation: the formatted instant can outgrow a narrow column. */
+.co-date-time-picker__text,
+.co-date-time-picker__placeholder {
+  display: block;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.co-date-time-picker__placeholder {
+  color: var(--co-semantic-text-muted);
+}
+
+/* ---- Clear button ---- */
+.co-date-time-picker__clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  transition: color 0.15s ease;
+}
+
+.co-date-time-picker__clear--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.co-date-time-picker__clear:hover {
+  color: var(--co-semantic-text-default);
+}
+
+/* ---- States ---- */
+.co-date-time-picker__field:focus-within {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-date-time-picker__field--disabled {
+  background: var(--co-semantic-surface-disabled);
+  border-color: transparent;
+  cursor: not-allowed;
+  /* Clicks must not reach co-popover's trigger box. */
+  pointer-events: none;
+}
+
+.co-date-time-picker__field--disabled .co-date-time-picker__display,
+.co-date-time-picker__field--disabled .co-date-time-picker__placeholder,
+.co-date-time-picker__field--disabled .co-date-time-picker__icon {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+}
+
+.co-date-time-picker__field--readonly .co-date-time-picker__display {
+  cursor: default;
+}
+
+.co-date-time-picker__field--invalid {
+  border-color: var(--co-semantic-status-error);
+}
+
+.co-date-time-picker__field--invalid:focus-within {
+  border-color: var(--co-semantic-status-error);
+  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+}
+
+/* ---- Helper text ---- */
+.co-date-time-picker__helper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  padding: 0 var(--co-spacing-xs);
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-date-time-picker__helper--error {
+  color: var(--co-semantic-status-error);
+}
+
+/* ============================================================
+   Panel: calendar | hour list
+   ============================================================ */
+.co-date-time-picker__panel {
+  display: flex;
+  align-items: stretch;
+  gap: var(--co-spacing-md);
+  padding: var(--co-spacing-md);
+}
+
+.co-date-time-picker__calendar {
+  flex: 0 0 auto;
+}
+
+.co-date-time-picker__times {
+  position: relative; /* offsetTop anchor for the open-scroll */
+  flex: 0 0 auto;
+  width: 7.5rem;
+  max-height: 17.5rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-left: var(--co-spacing-sm2);
+  border-left: 1px solid var(--co-semantic-border-default);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.co-date-time-picker__times:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus);
+  outline-offset: 1px;
+  border-radius: var(--co-border-radius-xxs);
+}
+
+.co-date-time-picker__time {
+  padding: var(--co-spacing-sm) var(--co-spacing-sm2);
+  border-radius: var(--co-border-radius-xxs);
+  color: var(--co-semantic-text-default);
+  font-size: var(--co-font-size-14);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+}
+
+.co-date-time-picker__time:hover:not(.co-date-time-picker__time--selected) {
+  background: var(--co-semantic-surface-hover);
+}
+
+/* Keyboard cursor — distinct from the committed selection. */
+.co-date-time-picker__time--active:not(.co-date-time-picker__time--selected) {
+  box-shadow: inset 0 0 0 1px var(--co-semantic-border-focus);
+}
+
+/* SELECTED — solid fill + inverse text, same treatment as co-calendar's day. */
+.co-date-time-picker__time--selected {
+  background: var(--co-semantic-surface-primary);
+  color: var(--co-semantic-on-primary);
+  font-weight: 600;
+}
+
+/* ---- Mobile bottom sheet: calendar on top, hours below ---- */
+.co-date-time-picker__sheet {
+  display: flex;
+  justify-content: center;
+  padding: var(--co-spacing-sm) 0 var(--co-spacing-lg);
+}
+
+.co-date-time-picker__panel--touch {
+  flex-direction: column;
+  align-items: center;
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__times {
+  width: 100%;
+  max-width: 20rem;
+  max-height: 12rem;
+  padding-left: 0;
+  padding-top: var(--co-spacing-sm2);
+  border-left: none;
+  border-top: 1px solid var(--co-semantic-border-default);
+}
+
+.co-date-time-picker__panel--touch .co-date-time-picker__time {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-date-time-picker {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-date-time-picker__label {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: var(--co-spacing-sm2);
+  min-width: 0;
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-date-time-picker > :not(.co-date-time-picker__label) {
+  grid-column: 2;
+  min-width: 0;
+}
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}