8
0

tooltip.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. $ck-tooltip-arrow-size: 5px;
  4. /**
  5. * Applies styles to the main part of the tooltip.
  6. */
  7. @mixin ck-tooltip__main {
  8. &::after {
  9. @content;
  10. }
  11. }
  12. /**
  13. * Applies styles to the arrow part of the tooltip.
  14. */
  15. @mixin ck-tooltip__arrow {
  16. &::before {
  17. @content;
  18. }
  19. }
  20. /**
  21. * Applies styles to both arrow and main part of the tooltip.
  22. */
  23. @mixin ck-tooltip__elements {
  24. @include ck-tooltip__main {
  25. @content;
  26. }
  27. @include ck-tooltip__arrow {
  28. @content;
  29. }
  30. }
  31. /**
  32. * Enables the tooltip, which is the tooltip is in DOM but
  33. * not yet displayed.
  34. */
  35. @mixin ck-tooltip_enabled {
  36. @include ck-tooltip__elements {
  37. display: block;
  38. }
  39. }
  40. /**
  41. * Disables the tooltip making it disappear from DOM.
  42. */
  43. @mixin ck-tooltip_disabled {
  44. @include ck-tooltip__elements {
  45. display: none;
  46. }
  47. }
  48. /**
  49. * Shows the tooltip, which is already in DOM.
  50. * Requires `ck-tooltip_enabled` first.
  51. */
  52. @mixin ck-tooltip_visible {
  53. @include ck-tooltip__elements {
  54. visibility: visible;
  55. opacity: 1;
  56. }
  57. }
  58. [data-ck-tooltip] {
  59. @include ck-tooltip__elements {
  60. // Tooltip is hidden by default.
  61. visibility: hidden;
  62. opacity: 0;
  63. display: none;
  64. position: absolute;
  65. left: 50%;
  66. z-index: ck-z( 'modal' );
  67. // Without this, hovering the tooltip could keep it visible.
  68. pointer-events: none;
  69. // For the transition to work, the tooltip must be controlled
  70. // using visibility+opacity. A delay prevents a "tooltip avalanche"
  71. // i.e. when scanning the toolbar with mouse cursor.
  72. transition: opacity .2s ease-in-out .2s;
  73. // This is to get rid of flickering when transitioning opacity in Chrome.
  74. // It's weird but it works.
  75. -webkit-backface-visibility: hidden;
  76. }
  77. @include ck-tooltip__main {
  78. content: attr(data-ck-tooltip);
  79. border-radius: $ck-border-radius;
  80. color: ck-color( 'background' );
  81. font-size: ck-font-size( -2 );
  82. background: ck-color( 'text' );
  83. padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
  84. }
  85. @include ck-tooltip__arrow {
  86. content: "";
  87. width: 0;
  88. height: 0;
  89. border-style: solid;
  90. }
  91. }
  92. /**
  93. * A class once applied displays the tooltip south of the element.
  94. *
  95. * [element]
  96. * ^
  97. * +-----------+
  98. * | Tooltip |
  99. * +-----------+
  100. */
  101. .ck-tooltip_s {
  102. @include ck-tooltip__main {
  103. bottom: -$ck-tooltip-arrow-size + 1;
  104. transform: translate( -50%, 100% );
  105. }
  106. @include ck-tooltip__arrow {
  107. bottom: 0;
  108. transform: translate( -50%, 100% );
  109. border-color: transparent transparent ck-color( 'text' ) transparent;
  110. border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
  111. }
  112. }
  113. /**
  114. * A class once applied displays the tooltip north of the element.
  115. *
  116. * +-----------+
  117. * | Tooltip |
  118. * +-----------+
  119. * V
  120. * [element]
  121. */
  122. .ck-tooltip_n {
  123. @include ck-tooltip__main {
  124. top: -$ck-tooltip-arrow-size + 1;
  125. transform: translate( -50%, -100% );
  126. }
  127. @include ck-tooltip__arrow {
  128. top: 0;
  129. transform: translate( -50%, -100% );
  130. border-color: ck-color( 'text' ) transparent transparent transparent;
  131. border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
  132. }
  133. }