tooltip.scss 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. [data-ck-tooltip] {
  5. @include ck-tooltip__elements {
  6. left: 50%;
  7. // For the transition to work, the tooltip must be controlled
  8. // using visibility+opacity. A delay prevents a "tooltip avalanche"
  9. // i.e. when scanning the toolbar with mouse cursor.
  10. transition: opacity .2s ease-in-out .2s;
  11. }
  12. @include ck-tooltip__main {
  13. border-radius: $ck-border-radius;
  14. color: ck-color( 'background' );
  15. font-size: ck-font-size( -2 );
  16. background: ck-color( 'text' );
  17. padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
  18. }
  19. @include ck-tooltip__arrow {
  20. border-style: solid;
  21. }
  22. }
  23. /**
  24. * A class once applied displays the tooltip south of the element.
  25. *
  26. * [element]
  27. * ^
  28. * +-----------+
  29. * | Tooltip |
  30. * +-----------+
  31. */
  32. .ck-tooltip_s {
  33. @include ck-tooltip__main {
  34. bottom: -$ck-tooltip-arrow-size + 1;
  35. transform: translate( -50%, 100% );
  36. }
  37. @include ck-tooltip__arrow {
  38. bottom: 0;
  39. transform: translate( -50%, 100% );
  40. border-color: transparent transparent ck-color( 'text' ) transparent;
  41. border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
  42. }
  43. }
  44. /**
  45. * A class once applied displays the tooltip north of the element.
  46. *
  47. * +-----------+
  48. * | Tooltip |
  49. * +-----------+
  50. * V
  51. * [element]
  52. */
  53. .ck-tooltip_n {
  54. @include ck-tooltip__main {
  55. top: -$ck-tooltip-arrow-size + 1;
  56. transform: translate( -50%, -100% );
  57. }
  58. @include ck-tooltip__arrow {
  59. top: 0;
  60. transform: translate( -50%, -100% );
  61. border-color: ck-color( 'text' ) transparent transparent transparent;
  62. border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
  63. }
  64. }