tooltip.css 2.0 KB

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