tooltip.css 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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. @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. * For the transition to work, the tooltip must be controlled
  18. * using visibility+opacity. A delay prevents a "tooltip avalanche"
  19. * i.e. when scanning the toolbar with mouse cursor.
  20. */
  21. transition: opacity .2s ease-in-out .2s;
  22. & .ck-tooltip__text {
  23. @mixin ck-rounded-corners;
  24. font-size: .9em;
  25. line-height: 1.5;
  26. color: var(--ck-color-tooltip-text);
  27. padding: var(--ck-spacing-small) var(--ck-spacing-medium);
  28. background: var(--ck-color-tooltip-background);
  29. position: relative;
  30. left: -50%;
  31. &::after {
  32. /*
  33. * For the transition to work, the tooltip must be controlled
  34. * using visibility+opacity. A delay prevents a "tooltip avalanche"
  35. * i.e. when scanning the toolbar with mouse cursor.
  36. */
  37. transition: opacity .2s ease-in-out .2s;
  38. border-style: solid;
  39. left: 50%;
  40. }
  41. }
  42. /**
  43. * A class once applied displays the tooltip south of the element.
  44. *
  45. * [element]
  46. * ^
  47. * +-----------+
  48. * | Tooltip |
  49. * +-----------+
  50. */
  51. &.ck-tooltip_s {
  52. bottom: calc(-1 * var(--ck-tooltip-arrow-size));
  53. transform: translateY( 100% );
  54. & .ck-tooltip__text::after {
  55. top: calc(-1 * var(--ck-tooltip-arrow-size));
  56. transform: translateX( -50% );
  57. border-color: transparent transparent var(--ck-color-tooltip-background) transparent;
  58. border-width: 0 var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size);
  59. }
  60. }
  61. /**
  62. * A class once applied displays the tooltip north of the element.
  63. *
  64. * +-----------+
  65. * | Tooltip |
  66. * +-----------+
  67. * V
  68. * [element]
  69. */
  70. &.ck-tooltip_n {
  71. top: calc(-1 * var(--ck-tooltip-arrow-size));
  72. transform: translateY( -100% );
  73. & .ck-tooltip__text::after {
  74. bottom: calc(-1 * var(--ck-tooltip-arrow-size));
  75. transform: translateX( -50% );
  76. border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
  77. border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
  78. }
  79. }
  80. }