balloonpanel.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. // Copyright (c) 2003-2017, 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-rounded-corners();
  8. @include ck-drop-shadow();
  9. min-width: 50px;
  10. min-height: 15px;
  11. background: ck-color( 'background' );
  12. border: 1px solid ck-border-color( 'foreground' );
  13. &.ck-balloon-panel_with-arrow {
  14. &:before,
  15. &:after {
  16. width: 0;
  17. height: 0;
  18. border-style: solid;
  19. }
  20. }
  21. &.ck-balloon-panel_arrow {
  22. &_n,
  23. &_ne,
  24. &_nw {
  25. &:before,
  26. &:after {
  27. border-width: 0 $ck-balloon-arrow-half-width $ck-balloon-arrow-height $ck-balloon-arrow-half-width;
  28. }
  29. &:before {
  30. border-color: transparent transparent ck-border-color( 'foreground' ) transparent;
  31. }
  32. &:after {
  33. border-color: transparent transparent ck-color( 'background' ) transparent;
  34. margin-top: $ck-balloon-arrow-offset;
  35. }
  36. }
  37. &_s,
  38. &_se,
  39. &_sw {
  40. &:before,
  41. &:after {
  42. border-width: $ck-balloon-arrow-height $ck-balloon-arrow-half-width 0 $ck-balloon-arrow-half-width;
  43. }
  44. &:before {
  45. border-color: ck-border-color( 'foreground' ) transparent transparent;
  46. }
  47. &:after {
  48. border-color: ck-color( 'background' ) transparent transparent transparent;
  49. margin-bottom: $ck-balloon-arrow-offset;
  50. }
  51. }
  52. &_n {
  53. &:before,
  54. &:after {
  55. left: 50%;
  56. margin-left: -$ck-balloon-arrow-half-width;
  57. top: -$ck-balloon-arrow-height;
  58. }
  59. }
  60. &_ne {
  61. &:before,
  62. &:after {
  63. left: 2 * $ck-balloon-arrow-half-width;
  64. top: -$ck-balloon-arrow-height;
  65. }
  66. }
  67. &_nw {
  68. &:before,
  69. &:after {
  70. right: 2 * $ck-balloon-arrow-half-width;
  71. top: -$ck-balloon-arrow-height;
  72. }
  73. }
  74. &_s {
  75. &:before,
  76. &:after {
  77. left: 50%;
  78. margin-left: -$ck-balloon-arrow-half-width;
  79. bottom: -$ck-balloon-arrow-height;
  80. }
  81. }
  82. &_se {
  83. &:before,
  84. &:after {
  85. left: 2 * $ck-balloon-arrow-half-width;
  86. bottom: -$ck-balloon-arrow-height;
  87. }
  88. }
  89. &_sw {
  90. &:before,
  91. &:after {
  92. right: 2 * $ck-balloon-arrow-half-width;
  93. bottom: -$ck-balloon-arrow-height;
  94. }
  95. }
  96. }
  97. &.ck-toolbar__container {
  98. &_arrow_n,
  99. &_arrow_ne,
  100. &_arrow_nw {
  101. &:after {
  102. border-bottom-color: ck-color( 'foreground' );
  103. }
  104. }
  105. &_arrow_s,
  106. &_arrow_se,
  107. &_arrow_sw {
  108. &:after {
  109. border-top-color: ck-color( 'foreground' );
  110. }
  111. }
  112. }
  113. }