HoverCard.module.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /* Block, not inline-flex: consumers wrap full-width list rows and an
  2. * inline wrapper would shrink them; the card still measures this rect. */
  3. .root {
  4. position: relative;
  5. display: block;
  6. }
  7. /* Preview card (figma session hover card): 244 wide, r12, pad 12/16, the
  8. * menu card's elevation. Surface is #2C2C2E in both themes (figma value,
  9. * light/dark identical), so a component-level variable, not a theme token.
  10. * Hit-testable on purpose: resting the pointer on the card holds it open
  11. * (HoverCard's grace close), which a `pointer-events: none` card cannot do. */
  12. .card {
  13. --dsw-hovercard-bg: #2C2C2E;
  14. position: fixed;
  15. z-index: 100;
  16. box-sizing: border-box;
  17. width: 244px;
  18. padding: 12px 16px;
  19. border-radius: 12px;
  20. background: var(--dsw-hovercard-bg);
  21. box-shadow: var(--dsw-shadow-lv3);
  22. }
  23. .copyable {
  24. cursor: pointer;
  25. }
  26. .copyable:focus-visible {
  27. outline: 2px solid var(--dsw-alias-state-business-primary);
  28. outline-offset: 2px;
  29. }
  30. .feedback {
  31. display: flex;
  32. align-items: center;
  33. justify-content: center;
  34. }
  35. .copied {
  36. color: #FFFFFF;
  37. font-size: 14px;
  38. line-height: 20px;
  39. text-align: center;
  40. }
  41. .status {
  42. position: absolute;
  43. width: 1px;
  44. height: 1px;
  45. overflow: hidden;
  46. clip: rect(0 0 0 0);
  47. white-space: nowrap;
  48. }