/* ========================================================= GLS Custom Form Fields — shared .att-select, .att-datepicker Self-contained: declares its own design tokens so it can be loaded on any page without depending on page CSS. ========================================================= */ /* Tokens promoted to :root so portaled menus/panels rendered under still resolve var(--att-*) references correctly. */ :root { --att-cream-soft: #fffff9; --att-cream-warm: #fbf6dc; --att-cream-band: #f7f0d4; --att-border: #e6e2c5; --att-border-2: #cfc8a3; --att-text: #111827; --att-muted: #6b7280; --att-blue: #2563eb; --att-blue-deep: #1d4fcf; } /* ========================================================= Custom Select (att-select) ========================================================= */ .att-select { position: relative; width: 100%; } .att-select__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; } .att-select__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; background: var(--att-cream-soft); border: 1px solid var(--att-border); border-radius: 12px; color: var(--att-text); font-size: .98rem; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .att-select__btn:hover { border-color: var(--att-border-2); background: var(--att-cream-warm); } .att-select.is-open .att-select__btn, .att-select__btn:focus-visible { outline: none; border-color: var(--att-blue); background: #fff; box-shadow: 0 0 0 .18rem rgba(37,99,235,.15); } .att-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-select__value--placeholder { color: var(--att-muted); font-weight: 500; } .att-select__chevron { color: var(--att-text); flex-shrink: 0; transition: transform .2s ease, color .18s ease; } .att-select.is-open .att-select__chevron { transform: rotate(180deg); color: var(--att-blue); } .att-select__menu { position: fixed; margin: 0; padding: .5rem; list-style: none; background: #fff; border: 1px solid var(--att-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(17, 24, 39, .12), 0 2px 6px rgba(17, 24, 39, .06); z-index: 99999; max-height: 320px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; transform-origin: top center; animation: attFieldIn .16s ease-out; } /* Wrap long option text instead of overflowing horizontally */ .att-select__opt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; } @keyframes attFieldIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .att-select__opt { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 10px; color: var(--att-text); font-size: .98rem; font-weight: 500; cursor: pointer; user-select: none; transition: background-color .14s ease, color .14s ease; } .att-select__opt + .att-select__opt { margin-top: 2px; } .att-select__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; flex-shrink: 0; transition: background-color .14s ease, transform .14s ease; } .att-select__opt:hover, .att-select__opt.is-active { background: var(--att-cream-warm); } .att-select__opt[aria-selected="true"] { background: var(--att-cream-band); color: var(--att-blue); font-weight: 700; } .att-select__opt[aria-selected="true"] .att-select__dot { background: var(--att-blue); transform: scale(1.15); } /* Failsafe: if JS disabled enhancement, hide custom UI and show native */ .att-select--no-enhance .att-select__btn, .att-select--no-enhance .att-select__menu { display: none !important; } .att-select--no-enhance .att-select__native { position: static; opacity: 1; pointer-events: auto; z-index: auto; width: 100%; height: auto; padding: .75rem 1rem; border: 1px solid var(--att-border); border-radius: 12px; background: var(--att-cream-soft); color: var(--att-text); font-size: .98rem; } [dir="rtl"] .att-select__btn { text-align: right; } @media (max-width: 480px) { .att-select__menu { padding: .35rem; } .att-select__opt { padding: .65rem .75rem; } } /* ========================================================= Custom Datepicker (att-datepicker) ========================================================= */ .att-datepicker { position: relative; width: 100%; } .att-datepicker__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: -1; } .att-datepicker__btn { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .75rem 1rem; background: var(--att-cream-soft); border: 1px solid var(--att-border); border-radius: 12px; color: var(--att-text); font-size: .98rem; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .att-datepicker__btn:hover { border-color: var(--att-border-2); background: var(--att-cream-warm); } .att-datepicker.is-open .att-datepicker__btn, .att-datepicker__btn:focus-visible { outline: none; border-color: var(--att-blue); background: #fff; box-shadow: 0 0 0 .18rem rgba(37,99,235,.15); } .att-datepicker__icon { color: var(--att-blue); flex-shrink: 0; } .att-datepicker__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .att-datepicker__value--placeholder { color: var(--att-muted); font-weight: 500; } .att-datepicker__chevron { color: var(--att-text); flex-shrink: 0; transition: transform .2s ease, color .18s ease; } .att-datepicker.is-open .att-datepicker__chevron { transform: rotate(180deg); color: var(--att-blue); } .att-datepicker__panel { position: fixed; width: 320px; max-width: calc(100vw - 2rem); padding: .85rem; background: #fff; border: 1px solid var(--att-border); border-radius: 16px; box-shadow: 0 16px 40px rgba(17, 24, 39, .14), 0 4px 10px rgba(17, 24, 39, .06); z-index: 99999; transform-origin: top left; animation: attFieldIn .16s ease-out; } [dir="rtl"] .att-datepicker__panel { left: auto; right: 0; transform-origin: top right; } .att-datepicker__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .65rem; } .att-datepicker__head-labels { display: flex; align-items: center; gap: .35rem; flex: 1 1 auto; justify-content: center; } .att-datepicker__head-month, .att-datepicker__head-year { background: transparent; border: 0; padding: .35rem .55rem; border-radius: 8px; font-size: .98rem; font-weight: 700; color: var(--att-text); cursor: pointer; transition: background-color .14s ease, color .14s ease; } .att-datepicker__head-month:hover, .att-datepicker__head-year:hover { background: var(--att-cream-warm); color: var(--att-blue); } .att-datepicker__nav { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--att-text); cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease; } .att-datepicker__nav:hover { background: var(--att-cream-warm); border-color: var(--att-border); color: var(--att-blue); } .att-datepicker__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: .25rem; } .att-datepicker__weekdays span { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--att-muted); padding: .35rem 0; } .att-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .att-datepicker__day { aspect-ratio: 1 / 1; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 10px; color: var(--att-text); font-size: .9rem; font-weight: 500; cursor: pointer; transition: background-color .14s ease, color .14s ease, transform .14s ease; } .att-datepicker__day:hover { background: var(--att-cream-warm); } .att-datepicker__day.is-other { color: var(--att-muted); opacity: .55; } .att-datepicker__day.is-today { color: var(--att-blue); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(37,99,235,.35); } .att-datepicker__day.is-selected { background: var(--att-blue); color: #fff; font-weight: 700; box-shadow: 0 4px 10px rgba(37,99,235,.25); } .att-datepicker__day.is-selected:hover { background: var(--att-blue); } .att-datepicker__day:disabled { color: var(--att-muted); opacity: .4; cursor: not-allowed; background: transparent; } .att-datepicker__picker { display: grid; gap: .35rem; padding: .25rem 0; } .att-datepicker__picker--months { grid-template-columns: repeat(3, 1fr); } .att-datepicker__picker--years { grid-template-columns: repeat(4, 1fr); max-height: 252px; overflow-y: auto; } .att-datepicker__picker button { background: transparent; border: 0; padding: .55rem .35rem; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--att-text); cursor: pointer; transition: background-color .14s ease, color .14s ease; } .att-datepicker__picker button:hover { background: var(--att-cream-warm); color: var(--att-blue); } .att-datepicker__picker button.is-current { background: var(--att-blue); color: #fff; box-shadow: 0 4px 10px rgba(37,99,235,.22); } .att-datepicker__foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--att-border); } .att-datepicker__action { background: transparent; border: 1px solid var(--att-border); padding: .45rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--att-text); cursor: pointer; transition: background-color .14s ease, border-color .14s ease, color .14s ease; } .att-datepicker__action:hover { background: var(--att-cream-warm); border-color: var(--att-border-2); } .att-datepicker__action--primary { background: var(--att-blue); color: #fff; border-color: var(--att-blue); } .att-datepicker__action--primary:hover { background: var(--att-blue-deep); border-color: var(--att-blue-deep); color: #fff; } /* Failsafe: if JS disabled enhancement, hide custom UI and show native */ .att-datepicker--no-enhance .att-datepicker__btn, .att-datepicker--no-enhance .att-datepicker__panel { display: none !important; } .att-datepicker--no-enhance .att-datepicker__native { position: static; opacity: 1; pointer-events: auto; z-index: auto; width: 100%; height: auto; padding: .75rem 1rem; border: 1px solid var(--att-border); border-radius: 12px; background: var(--att-cream-soft); color: var(--att-text); font-size: .98rem; } @media (max-width: 420px) { .att-datepicker__panel { width: calc(100vw - 2rem); } .att-datepicker__day { font-size: .85rem; } } /* Menus are rendered in a body-level portal while open (see JS), so they escape any ancestor with overflow:hidden and cannot affect form layout. */