balloonpanel.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. $ck-balloon-arrow-offset: 2px;
  4. $ck-balloon-arrow-height: 15px;
  5. $ck-balloon-arrow-half-width: 10px;
  6. $ck-def-z: (
  7. 'default': 1,
  8. 'modal': 999
  9. // 'topmost': 9999
  10. );
  11. // TODO: Move it to _zindex.scss.
  12. @function ck-z( $layer: 'default', $index: 0 ) {
  13. @return map-get( $ck-def-z, $layer ) + $index;
  14. }
  15. .ck-balloon-panel {
  16. @include ck-unselectable();
  17. @include ck-rounded-corners();
  18. min-width: 50px;
  19. min-height: 15px;
  20. display: none;
  21. position: absolute;
  22. background: ck-color( 'background' );
  23. border: 1px solid ck-border-color( 'foreground' );
  24. // TODO: Create helper for shadows.
  25. box-shadow: 0 0 5px ck-color( 'foreground', -15 );
  26. z-index: ck-z( 'modal' );
  27. &:before,
  28. &:after {
  29. content: "";
  30. position: absolute;
  31. width: 0;
  32. height: 0;
  33. border-style: solid;
  34. }
  35. &:before {
  36. z-index: ck-z( 'default' );
  37. }
  38. &:after {
  39. z-index: ck-z( 'default', 1 );
  40. }
  41. &_arrow_se,
  42. &_arrow_sw {
  43. &:before,
  44. &:after {
  45. border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
  46. }
  47. &:before {
  48. z-index: ck-z( 'default' );
  49. border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
  50. }
  51. &:after {
  52. z-index: ck-z( 'default', 1 );
  53. border-color: transparent transparent ck-color( 'background' ) transparent;
  54. margin-top: $ck-balloon-arrow-offset;
  55. }
  56. }
  57. &_arrow_ne,
  58. &_arrow_nw {
  59. &:before,
  60. &:after {
  61. border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
  62. }
  63. &:before {
  64. z-index: ck-z( 'default' );
  65. border-color: ck-border-color( 'foreground' ) transparent transparent;
  66. }
  67. &:after {
  68. z-index: ck-z( 'default', 1 );
  69. border-color: ck-color( 'background' ) transparent transparent transparent;
  70. margin-bottom: $ck-balloon-arrow-offset;
  71. }
  72. }
  73. &_arrow_se {
  74. &:before,
  75. &:after {
  76. left: 2 * $ck-balloon-arrow-half-width;
  77. top: -$ck-balloon-arrow-height;
  78. }
  79. }
  80. &_arrow_sw {
  81. &:before,
  82. &:after {
  83. right: 2 * $ck-balloon-arrow-half-width;
  84. top: -$ck-balloon-arrow-height;
  85. }
  86. }
  87. &_arrow_ne {
  88. &:before,
  89. &:after {
  90. left: 2 * $ck-balloon-arrow-half-width;
  91. bottom: -$ck-balloon-arrow-height;
  92. }
  93. }
  94. &_arrow_nw {
  95. &:before,
  96. &:after {
  97. right: 2 * $ck-balloon-arrow-half-width;
  98. bottom: -$ck-balloon-arrow-height;
  99. }
  100. }
  101. &_visible {
  102. display: block;
  103. }
  104. // Box to accommodate buttons.
  105. .ck-box {
  106. margin-top: ck-spacing( 'medium' );
  107. * + * {
  108. margin-left: ck-spacing( 'medium' );
  109. }
  110. }
  111. }