tooltip.css 2.1 KB

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