hover-card.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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. border-radius: 8px;
  11. background-color: var(--surface-raised-stronger-non-alpha);
  12. pointer-events: auto;
  13. border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
  14. background-clip: padding-box;
  15. box-shadow: var(--shadow-md);
  16. transform-origin: var(--kb-hovercard-content-transform-origin);
  17. &:focus-within {
  18. outline: none;
  19. }
  20. &[data-closed] {
  21. animation: hover-card-close 0.15s ease-out;
  22. }
  23. &[data-expanded] {
  24. animation: hover-card-open 0.15s ease-out;
  25. }
  26. [data-slot="hover-card-body"] {
  27. padding: 4px;
  28. }
  29. }
  30. @keyframes hover-card-open {
  31. from {
  32. opacity: 0;
  33. transform: scale(0.96);
  34. }
  35. to {
  36. opacity: 1;
  37. transform: scale(1);
  38. }
  39. }
  40. @keyframes hover-card-close {
  41. from {
  42. opacity: 1;
  43. transform: scale(1);
  44. }
  45. to {
  46. opacity: 0;
  47. transform: scale(0.96);
  48. }
  49. }