hover-card.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. [data-slot="hover-card-trigger"] {
  2. display: flex;
  3. width: 100%;
  4. min-width: 0;
  5. }
  6. [data-component="hover-card-content"] {
  7. z-index: 50;
  8. min-width: 200px;
  9. max-width: 320px;
  10. max-height: calc(100vh - 1rem);
  11. border-radius: 8px;
  12. background-color: var(--surface-raised-stronger-non-alpha);
  13. pointer-events: auto;
  14. border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
  15. background-clip: padding-box;
  16. box-shadow: var(--shadow-md);
  17. transform-origin: var(--kb-hovercard-content-transform-origin);
  18. &:focus-within {
  19. outline: none;
  20. }
  21. &[data-closed] {
  22. animation: hover-card-close var(--transition-duration)
  23. var(--transition-easing);
  24. }
  25. &[data-expanded] {
  26. animation: hover-card-open var(--transition-duration)
  27. var(--transition-easing);
  28. }
  29. [data-slot="hover-card-body"] {
  30. padding: 4px;
  31. max-height: inherit;
  32. overflow: hidden;
  33. }
  34. }
  35. @keyframes hover-card-open {
  36. from {
  37. opacity: 0;
  38. transform: scale(0.96);
  39. }
  40. to {
  41. opacity: 1;
  42. transform: scale(1);
  43. }
  44. }
  45. @keyframes hover-card-close {
  46. from {
  47. opacity: 1;
  48. transform: scale(1);
  49. }
  50. to {
  51. opacity: 0;
  52. transform: scale(0.96);
  53. }
  54. }