tooltip.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. /**
  4. * Applies styles to the main part of the tooltip.
  5. */
  6. @mixin ck-tooltip__main {
  7. &::after {
  8. @content;
  9. }
  10. }
  11. /**
  12. * Applies styles to the arrow part of the tooltip.
  13. */
  14. @mixin ck-tooltip__arrow {
  15. &::before {
  16. @content;
  17. }
  18. }
  19. /**
  20. * Applies styles to both arrow and main part of the tooltip.
  21. */
  22. @mixin ck-tooltip__elements {
  23. @include ck-tooltip__main {
  24. @content;
  25. }
  26. @include ck-tooltip__arrow {
  27. @content;
  28. }
  29. }
  30. /**
  31. * Enables the tooltip, which is the tooltip is in DOM but
  32. * not yet displayed.
  33. */
  34. @mixin ck-tooltip_enabled {
  35. @include ck-tooltip__elements {
  36. display: block;
  37. }
  38. }
  39. /**
  40. * Disables the tooltip making it disappear from DOM.
  41. */
  42. @mixin ck-tooltip_disabled {
  43. @include ck-tooltip__elements {
  44. display: none;
  45. }
  46. }
  47. /**
  48. * Shows the tooltip, which is already in DOM.
  49. * Requires `ck-tooltip_enabled` first.
  50. */
  51. @mixin ck-tooltip_visible {
  52. @include ck-tooltip__elements {
  53. visibility: visible;
  54. opacity: 1;
  55. }
  56. }
  57. [data-ck-tooltip] {
  58. @include ck-tooltip__elements {
  59. // Tooltip is hidden by default.
  60. visibility: hidden;
  61. opacity: 0;
  62. display: none;
  63. position: absolute;
  64. z-index: ck-z( 'modal' );
  65. // Without this, hovering the tooltip could keep it visible.
  66. pointer-events: none;
  67. // This is to get rid of flickering when transitioning opacity in Chrome.
  68. // It's weird but it works.
  69. -webkit-backface-visibility: hidden;
  70. }
  71. @include ck-tooltip__main {
  72. content: attr(data-ck-tooltip);
  73. }
  74. @include ck-tooltip__arrow {
  75. content: "";
  76. width: 0;
  77. height: 0;
  78. }
  79. }