balloonpanel.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. @import "../../../mixins/_rounded.css";
  6. @import "../../../mixins/_shadow.css";
  7. :root {
  8. --ck-balloon-arrow-offset: 2px;
  9. --ck-balloon-arrow-height: 10px;
  10. --ck-balloon-arrow-half-width: 8px;
  11. --ck-balloon-arrow-drop-shadow: 0 2px 2px var(--ck-color-shadow-drop);
  12. }
  13. .ck.ck-balloon-panel {
  14. @mixin ck-rounded-corners;
  15. @mixin ck-drop-shadow;
  16. min-height: 15px;
  17. background: var(--ck-color-panel-background);
  18. border: 1px solid var(--ck-color-panel-border);
  19. &.ck-balloon-panel_with-arrow {
  20. &::before,
  21. &::after {
  22. width: 0;
  23. height: 0;
  24. border-style: solid;
  25. }
  26. }
  27. &[class*="arrow_n"] {
  28. &::before,
  29. &::after {
  30. border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
  31. }
  32. &::before {
  33. border-color: transparent transparent var(--ck-color-panel-border) transparent;
  34. }
  35. &::after {
  36. border-color: transparent transparent var(--ck-color-panel-background) transparent;
  37. margin-top: var(--ck-balloon-arrow-offset);
  38. }
  39. }
  40. &[class*="arrow_s"] {
  41. &::before,
  42. &::after {
  43. border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
  44. }
  45. &::before {
  46. border-color: var(--ck-color-panel-border) transparent transparent;
  47. filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow));
  48. }
  49. &::after {
  50. border-color: var(--ck-color-panel-background) transparent transparent transparent;
  51. margin-bottom: var(--ck-balloon-arrow-offset);
  52. }
  53. }
  54. &.ck-balloon-panel_arrow_n {
  55. &::before,
  56. &::after {
  57. left: 50%;
  58. margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
  59. top: calc(-1 * var(--ck-balloon-arrow-height));
  60. }
  61. }
  62. &.ck-balloon-panel_arrow_nw {
  63. &::before,
  64. &::after {
  65. left: calc(2 * var(--ck-balloon-arrow-half-width));
  66. top: calc(-1 * var(--ck-balloon-arrow-height));
  67. }
  68. }
  69. &.ck-balloon-panel_arrow_ne {
  70. &::before,
  71. &::after {
  72. right: calc(2 * var(--ck-balloon-arrow-half-width));
  73. top: calc(-1 * var(--ck-balloon-arrow-height));
  74. }
  75. }
  76. &.ck-balloon-panel_arrow_s {
  77. &::before,
  78. &::after {
  79. left: 50%;
  80. margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
  81. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  82. }
  83. }
  84. &.ck-balloon-panel_arrow_sw {
  85. &::before,
  86. &::after {
  87. left: calc(2 * var(--ck-balloon-arrow-half-width));
  88. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  89. }
  90. }
  91. &.ck-balloon-panel_arrow_se {
  92. &::before,
  93. &::after {
  94. right: calc(2 * var(--ck-balloon-arrow-half-width));
  95. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  96. }
  97. }
  98. &.ck-balloon-panel_arrow_sme {
  99. &::before,
  100. &::after {
  101. right: 25%;
  102. margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
  103. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  104. }
  105. }
  106. &.ck-balloon-panel_arrow_smw {
  107. &::before,
  108. &::after {
  109. left: 25%;
  110. margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
  111. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  112. }
  113. }
  114. &.ck-balloon-panel_arrow_nme {
  115. &::before,
  116. &::after {
  117. right: 25%;
  118. margin-right: calc(2 * var(--ck-balloon-arrow-half-width));
  119. top: calc(-1 * var(--ck-balloon-arrow-height));
  120. }
  121. }
  122. &.ck-balloon-panel_arrow_nmw {
  123. &::before,
  124. &::after {
  125. left: 25%;
  126. margin-left: calc(2 * var(--ck-balloon-arrow-half-width));
  127. top: calc(-1 * var(--ck-balloon-arrow-height));
  128. }
  129. }
  130. }