tooltip.css 1.8 KB

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