/* * Makes a Tom Select control look like the ActiveAdmin 4 form field it replaced. * * Written after looking at a screenshot rather than from the diff: the vendored * stylesheet is a standalone theme, so an enhanced field sat next to untouched * native selects with no caret, a lighter fill, a smaller font, the selected * item and the typed text on two separate lines, and a dropdown flat enough to * read as part of the form. It worked, and it looked wrong. * * Dark mode matters here too: the admin has a theme toggle that puts `.dark` on * , and the vendored theme is light-only -- an unstyled widget would be a * white box among dark fields. * * Colours mirror the Tailwind slate values ActiveAdmin uses for inputs rather * than being sampled by eye. */ /* The `.full` and `.input-active` selectors are upstream's, and both set a hard #fff background at a higher specificity than a plain `.ts-control` rule -- which is why the field went white while typing, in both themes, until these were matched explicitly. */ .ts-wrapper .ts-control, .ts-wrapper.full .ts-control, .ts-wrapper.single.input-active .ts-control { align-items: center; background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 0.375rem; color: inherit; font-size: 0.875rem; line-height: 1.5rem; min-height: 2.625rem; padding: 0.375rem 2rem 0.375rem 0.75rem; } /* A single select is one value, not a tag list: keep the item and the search input on one line instead of letting them wrap. */ .ts-wrapper.single .ts-control { flex-wrap: nowrap; } .ts-wrapper.single .ts-control > .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Let the search input shrink instead of hiding the current value. Upstream gives it min-width: 7rem, which squeezed a selected "ADA" down to "A..."; the obvious-looking fix of hiding the item while `input-active` is wrong, because Tom Select keeps that class for as long as the control has focus, not only while typing -- so the field read as empty after choosing a value. */ /* A zero flex-basis so the input claims only leftover space. With upstream's `flex: 1 1 auto` its base size joined the layout, the two overflowed the control by a few pixels and both shrank -- enough to ellipsise a selected "ATOM" into "AT...". */ .ts-wrapper.single .ts-control > input { flex: 1 1 0; min-width: 0; } /* Give way to the query while the user is actually searching. Keyed off a class this file's JS maintains, NOT off `input-active`: Tom Select keeps that for as long as the control has focus, so after choosing a value the field read as empty until focus moved away. */ .ts-wrapper.single.has-query .ts-control > .item { display: none; } /* The caret the native select has and the widget otherwise loses. */ .ts-wrapper.single .ts-control::after { border-color: #64748b transparent transparent; border-style: solid; border-width: 0.3rem 0.3rem 0; content: ""; height: 0; pointer-events: none; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-25%); width: 0; } .ts-wrapper.single.dropdown-active .ts-control::after { transform: translateY(-75%) rotate(180deg); } .ts-wrapper.focus .ts-control { border-color: #94a3b8; outline: none; } /* Float clearly above the form rather than blending into it. */ .ts-dropdown { border: 1px solid #cbd5e1; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); font-size: 0.875rem; margin-top: 0.25rem; /* Above the Edit Conditions overlay, which sits at 9998. With dropdownParent: body the dropdown is a sibling of that overlay, so it needs to outrank it explicitly. */ z-index: 10000; } .ts-dropdown .option { padding: 0.5rem 0.75rem; } .dark .ts-wrapper .ts-control, .dark .ts-wrapper.full .ts-control, .dark .ts-wrapper.single.input-active .ts-control, .dark .ts-dropdown { background-color: #1e293b; border-color: #475569; color: #e2e8f0; } .dark .ts-control input, .dark .ts-control input::placeholder { color: #e2e8f0; } .dark .ts-wrapper.single .ts-control::after { border-top-color: #94a3b8; } .dark .ts-dropdown .active { background-color: #334155; color: #f1f5f9; } .dark .ts-dropdown [data-selectable] .highlight { background: rgb(148 163 184 / 0.35); }