8
0

balloonpanel.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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-balloon-panel {
  7. @include ck-unselectable();
  8. @include ck-rounded-corners();
  9. @include ck-drop-shadow();
  10. min-width: 50px;
  11. min-height: 15px;
  12. display: none;
  13. position: absolute;
  14. background: ck-color( 'background' );
  15. border: 1px solid ck-border-color( 'foreground' );
  16. z-index: ck-z( 'modal' );
  17. &:before,
  18. &:after {
  19. content: "";
  20. position: absolute;
  21. width: 0;
  22. height: 0;
  23. border-style: solid;
  24. }
  25. &:before {
  26. z-index: ck-z();
  27. }
  28. &:after {
  29. z-index: ck-z( 'default', 1 );
  30. }
  31. &_arrow_s,
  32. &_arrow_se,
  33. &_arrow_sw {
  34. &:before,
  35. &:after {
  36. border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
  37. }
  38. &:before {
  39. z-index: ck-z( 'default' );
  40. border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
  41. }
  42. &:after {
  43. z-index: ck-z( 'default', 1 );
  44. border-color: transparent transparent ck-color( 'background' ) transparent;
  45. margin-top: $ck-balloon-arrow-offset;
  46. }
  47. }
  48. &_arrow_n,
  49. &_arrow_ne,
  50. &_arrow_nw {
  51. &:before,
  52. &:after {
  53. border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
  54. }
  55. &:before {
  56. z-index: ck-z( 'default' );
  57. border-color: ck-border-color( 'foreground' ) transparent transparent;
  58. }
  59. &:after {
  60. z-index: ck-z( 'default', 1 );
  61. border-color: ck-color( 'background' ) transparent transparent transparent;
  62. margin-bottom: $ck-balloon-arrow-offset;
  63. }
  64. }
  65. &_arrow_s {
  66. &:before,
  67. &:after {
  68. left: 50%;
  69. margin-left: -$ck-balloon-arrow-half-width;
  70. top: -$ck-balloon-arrow-height;
  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_n {
  88. &:before,
  89. &:after {
  90. left: 50%;
  91. margin-left: -$ck-balloon-arrow-half-width;
  92. bottom: -$ck-balloon-arrow-height;
  93. }
  94. }
  95. &_arrow_ne {
  96. &:before,
  97. &:after {
  98. left: 2 * $ck-balloon-arrow-half-width;
  99. bottom: -$ck-balloon-arrow-height;
  100. }
  101. }
  102. &_arrow_nw {
  103. &:before,
  104. &:after {
  105. right: 2 * $ck-balloon-arrow-half-width;
  106. bottom: -$ck-balloon-arrow-height;
  107. }
  108. }
  109. &_visible {
  110. display: block;
  111. }
  112. }