_tooltip.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * Enables the tooltip, which is the tooltip is in DOM but
  7. * not yet displayed.
  8. */
  9. @define-mixin ck-tooltip_enabled {
  10. & .ck-tooltip {
  11. display: block;
  12. /*
  13. * Don't display tooltips in devices which don't support :hover.
  14. * In fact, it's all about iOS, which forces user to click UI elements twice to execute
  15. * the primary action, when tooltips are enabled.
  16. *
  17. * Q: OK, but why not the following query?
  18. *
  19. * @media (hover) {
  20. * display: block;
  21. * }
  22. *
  23. * A: Because FF does not support it and it would completely disable tooltips
  24. * in that browser.
  25. *
  26. * More in https://github.com/ckeditor/ckeditor5/issues/920.
  27. */
  28. @media (hover:none) {
  29. display: none;
  30. }
  31. }
  32. }
  33. /**
  34. * Disables the tooltip making it disappear from DOM.
  35. */
  36. @define-mixin ck-tooltip_disabled {
  37. & .ck-tooltip {
  38. display: none;
  39. }
  40. }
  41. /**
  42. * Shows the tooltip, which is already in DOM.
  43. * Requires `ck-tooltip_enabled` first.
  44. */
  45. @define-mixin ck-tooltip_visible {
  46. & .ck-tooltip {
  47. visibility: visible;
  48. opacity: 1;
  49. }
  50. }