tooltip.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. /*
  2. * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. @import "../../../mixins/_rounded.css";
  6. :root {
  7. --ck-tooltip-arrow-size: 5px;
  8. }
  9. .ck.ck-tooltip {
  10. left: 50%;
  11. /*
  12. * Prevent blurry tooltips in LoDPI environments.
  13. * See https://github.com/ckeditor/ckeditor5/issues/1802.
  14. */
  15. top: 0;
  16. /**
  17. * A class once applied displays the tooltip south of the element.
  18. *
  19. * [element]
  20. * ^
  21. * +-----------+
  22. * | Tooltip |
  23. * +-----------+
  24. */
  25. &.ck-tooltip_s {
  26. bottom: calc(-1 * var(--ck-tooltip-arrow-size));
  27. transform: translateY( 100% );
  28. & .ck-tooltip__text::after {
  29. top: calc(-1 * var(--ck-tooltip-arrow-size));
  30. transform: translateX( -50% );
  31. border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
  32. border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
  33. }
  34. }
  35. /**
  36. * A class once applied displays the tooltip north of the element.
  37. *
  38. * +-----------+
  39. * | Tooltip |
  40. * +-----------+
  41. * V
  42. * [element]
  43. */
  44. &.ck-tooltip_n {
  45. top: calc(-1 * var(--ck-tooltip-arrow-size));
  46. transform: translateY( -100% );
  47. & .ck-tooltip__text::after {
  48. bottom: calc(-1 * var(--ck-tooltip-arrow-size));
  49. transform: translateX( -50% );
  50. border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
  51. border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
  52. }
  53. }
  54. & .ck-tooltip__text {
  55. @mixin ck-rounded-corners;
  56. font-size: .9em;
  57. line-height: 1.5;
  58. color: var(--ck-color-tooltip-text);
  59. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  60. background: var(--ck-color-tooltip-background);
  61. position: relative;
  62. left: -50%;
  63. &::after {
  64. border-style: solid;
  65. left: 50%;
  66. }
  67. }
  68. }
  69. .ck.ck-tooltip,
  70. .ck.ck-tooltip .ck-tooltip__text::after {
  71. /* For the transition to work, the tooltip must be controlled
  72. using visibility+opacity. A delay prevents a "tooltip avalanche"
  73. i.e. when scanning the toolbar with mouse cursor. */
  74. transition: opacity .2s ease-in-out .2s;
  75. }