header-search.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // 헤더 통합 검색 자동완성 드롭다운 (combobox — HeaderSearch.tsx)
  2. // 인풋/박스 자체 스타일은 layout.module.scss(.searchBox/.searchInput/.searchKbd) 재사용
  3. .header-suggest {
  4. position: absolute;
  5. top: calc(100% + 4px);
  6. left: 16px;
  7. right: 16px;
  8. z-index: 1000;
  9. max-height: 420px;
  10. overflow-y: auto;
  11. padding: var(--sp-2) 0;
  12. background: var(--bg-elevated);
  13. border: 1px solid var(--border-strong);
  14. border-radius: 8px;
  15. box-shadow: 0 8px 24px var(--shadow-color);
  16. &__item {
  17. display: flex;
  18. align-items: center;
  19. gap: var(--sp-3);
  20. min-height: var(--row-h);
  21. padding: 0 var(--sp-4);
  22. font-size: var(--cell-fs);
  23. cursor: pointer;
  24. &--active {
  25. background: var(--bg-subtle-hover);
  26. }
  27. }
  28. &__name {
  29. flex: 1 1 auto;
  30. overflow: hidden;
  31. color: var(--text-primary);
  32. white-space: nowrap;
  33. text-overflow: ellipsis;
  34. }
  35. &__code {
  36. flex: 0 0 auto;
  37. font-size: var(--fs-xs);
  38. color: var(--text-muted);
  39. font-variant-numeric: tabular-nums;
  40. }
  41. &__empty {
  42. padding: var(--sp-4);
  43. font-size: var(--fs-sm);
  44. color: var(--text-muted);
  45. text-align: center;
  46. }
  47. }