2
0

tooltip.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. [data-component="tooltip-trigger"] {
  2. display: flex;
  3. }
  4. [data-component="tooltip"] {
  5. z-index: 1000;
  6. max-width: 320px;
  7. border-radius: var(--radius-md);
  8. background-color: var(--surface-float-base);
  9. color: rgba(253, 252, 252, 0.94);
  10. padding: 2px 8px;
  11. border: 0.5px solid rgba(253, 252, 252, 0.2);
  12. box-shadow: var(--shadow-md);
  13. pointer-events: none !important;
  14. /* transition: all 150ms ease-out; */
  15. /* transform: translate3d(0, 0, 0); */
  16. /* transform-origin: var(--kb-tooltip-content-transform-origin); */
  17. /* text-12-medium */
  18. font-family: var(--font-family-sans);
  19. font-size: var(--font-size-small);
  20. font-style: normal;
  21. font-weight: var(--font-weight-medium);
  22. line-height: var(--line-height-large); /* 166.667% */
  23. letter-spacing: var(--letter-spacing-normal);
  24. &[data-expanded] {
  25. opacity: 1;
  26. /* transform: translate3d(0, 0, 0); */
  27. }
  28. &[data-closed] {
  29. opacity: 0;
  30. }
  31. /* &[data-placement="top"] { */
  32. /* &[data-closed] { */
  33. /* transform: translate3d(0, 4px, 0); */
  34. /* } */
  35. /* } */
  36. /**/
  37. /* &[data-placement="bottom"] { */
  38. /* &[data-closed] { */
  39. /* transform: translate3d(0, -4px, 0); */
  40. /* } */
  41. /* } */
  42. /**/
  43. /* &[data-placement="left"] { */
  44. /* &[data-closed] { */
  45. /* transform: translate3d(4px, 0, 0); */
  46. /* } */
  47. /* } */
  48. /**/
  49. /* &[data-placement="right"] { */
  50. /* &[data-closed] { */
  51. /* transform: translate3d(-4px, 0, 0); */
  52. /* } */
  53. /* } */
  54. }