tooltip.scss 1.9 KB

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