tooltip.styl 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. arrowWidth = 6px
  2. .ql-bubble
  3. .ql-tooltip
  4. background-color: backgroundColor
  5. border-radius: 25px
  6. color: textColor
  7. .ql-tooltip-arrow
  8. border-left: arrowWidth solid transparent
  9. border-right: arrowWidth solid transparent
  10. content: " "
  11. display: block
  12. left: 50%
  13. margin-left: -1 * arrowWidth
  14. position: absolute
  15. .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow
  16. border-bottom: arrowWidth solid backgroundColor
  17. top: -1 * arrowWidth
  18. .ql-tooltip.ql-flip .ql-tooltip-arrow
  19. border-top: arrowWidth solid backgroundColor
  20. bottom: -1 * arrowWidth
  21. .ql-tooltip.ql-editing
  22. .ql-tooltip-editor
  23. display: block
  24. .ql-formats
  25. visibility: hidden
  26. .ql-tooltip-editor
  27. display: none
  28. input[type=text]
  29. background: transparent
  30. border: none
  31. color: textColor
  32. font-size: 13px
  33. height: 100%
  34. outline: none
  35. padding: 10px 20px
  36. position: absolute
  37. width: 100%
  38. a
  39. &:before
  40. color: inactiveColor
  41. content: "\00D7"
  42. font-size: 16px
  43. font-weight: bold
  44. top: 10px
  45. position: absolute
  46. right: 20px