hover-card.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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 0.15s ease-out;
  23. }
  24. &[data-expanded] {
  25. animation: hover-card-open 0.15s ease-out;
  26. }
  27. [data-slot="hover-card-body"] {
  28. padding: 4px;
  29. max-height: inherit;
  30. overflow: hidden;
  31. }
  32. }
  33. @keyframes hover-card-open {
  34. from {
  35. opacity: 0;
  36. transform: scale(0.96);
  37. }
  38. to {
  39. opacity: 1;
  40. transform: scale(1);
  41. }
  42. }
  43. @keyframes hover-card-close {
  44. from {
  45. opacity: 1;
  46. transform: scale(1);
  47. }
  48. to {
  49. opacity: 0;
  50. transform: scale(0.96);
  51. }
  52. }