balloonpanel.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  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-dropshadow();
  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_se,
  32. &_arrow_sw {
  33. &:before,
  34. &:after {
  35. border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
  36. }
  37. &:before {
  38. z-index: ck-z( 'default' );
  39. border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
  40. }
  41. &:after {
  42. z-index: ck-z( 'default', 1 );
  43. border-color: transparent transparent ck-color( 'background' ) transparent;
  44. margin-top: $ck-balloon-arrow-offset;
  45. }
  46. }
  47. &_arrow_ne,
  48. &_arrow_nw {
  49. &:before,
  50. &:after {
  51. border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
  52. }
  53. &:before {
  54. z-index: ck-z( 'default' );
  55. border-color: ck-border-color( 'foreground' ) transparent transparent;
  56. }
  57. &:after {
  58. z-index: ck-z( 'default', 1 );
  59. border-color: ck-color( 'background' ) transparent transparent transparent;
  60. margin-bottom: $ck-balloon-arrow-offset;
  61. }
  62. }
  63. &_arrow_se {
  64. &:before,
  65. &:after {
  66. left: 2 * $ck-balloon-arrow-half-width;
  67. top: -$ck-balloon-arrow-height;
  68. }
  69. }
  70. &_arrow_sw {
  71. &:before,
  72. &:after {
  73. right: 2 * $ck-balloon-arrow-half-width;
  74. top: -$ck-balloon-arrow-height;
  75. }
  76. }
  77. &_arrow_ne {
  78. &:before,
  79. &:after {
  80. left: 2 * $ck-balloon-arrow-half-width;
  81. bottom: -$ck-balloon-arrow-height;
  82. }
  83. }
  84. &_arrow_nw {
  85. &:before,
  86. &:after {
  87. right: 2 * $ck-balloon-arrow-half-width;
  88. bottom: -$ck-balloon-arrow-height;
  89. }
  90. }
  91. &_visible {
  92. display: block;
  93. }
  94. }