tooltip.styl 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. tooltipMargin = 8px
  2. .ql-snow
  3. .ql-tooltip
  4. background-color: #fff
  5. border: 1px solid borderColor
  6. box-shadow: 0px 0px 5px shadowColor
  7. color: textColor
  8. padding: 5px 12px
  9. white-space: nowrap
  10. &::before
  11. content: "Visit URL:"
  12. line-height: 26px
  13. margin-right: tooltipMargin
  14. input[type=text]
  15. display: none
  16. border: 1px solid borderColor
  17. font-size: 13px
  18. height: 26px
  19. margin: 0px
  20. padding: 3px 5px
  21. width: 170px
  22. a.ql-preview
  23. display: inline-block
  24. max-width: 200px
  25. overflow-x: hidden
  26. text-overflow: ellipsis
  27. vertical-align: top
  28. a.ql-action::after
  29. border-right: 1px solid borderColor
  30. content: 'Edit'
  31. margin-left: tooltipMargin*2
  32. padding-right: tooltipMargin
  33. a.ql-remove::before
  34. content: 'Remove'
  35. margin-left: tooltipMargin
  36. a
  37. line-height: 26px
  38. .ql-tooltip.ql-editing
  39. a.ql-preview, a.ql-remove
  40. display: none
  41. input[type=text]
  42. display: inline-block
  43. a.ql-action::after
  44. border-right: 0px
  45. content: 'Save'
  46. padding-right: 0px
  47. .ql-tooltip[data-mode=link]::before
  48. content: "Enter link:"
  49. .ql-tooltip[data-mode=formula]::before
  50. content: "Enter formula:"
  51. .ql-tooltip[data-mode=video]::before
  52. content: "Enter video:"