balloonpanel.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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. }
  12. .ck.ck-balloon-panel {
  13. @mixin ck-rounded-corners;
  14. @mixin ck-drop-shadow;
  15. min-height: 15px;
  16. background: var(--ck-color-panel-background);
  17. border: 1px solid var(--ck-color-panel-border);
  18. &.ck-balloon-panel_with-arrow {
  19. &::before,
  20. &::after {
  21. width: 0;
  22. height: 0;
  23. border-style: solid;
  24. }
  25. }
  26. &[class*="arrow_n"] {
  27. &::before,
  28. &::after {
  29. border-width: 0 var(--ck-balloon-arrow-half-width) var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width);
  30. }
  31. &::before {
  32. border-color: transparent transparent var(--ck-color-panel-border) transparent;
  33. }
  34. &::after {
  35. border-color: transparent transparent var(--ck-color-panel-background) transparent;
  36. margin-top: var(--ck-balloon-arrow-offset);
  37. }
  38. }
  39. &[class*="arrow_s"] {
  40. &::before,
  41. &::after {
  42. border-width: var(--ck-balloon-arrow-height) var(--ck-balloon-arrow-half-width) 0 var(--ck-balloon-arrow-half-width);
  43. }
  44. &::before {
  45. border-color: var(--ck-color-panel-border) transparent transparent;
  46. }
  47. &::after {
  48. border-color: var(--ck-color-panel-background) transparent transparent transparent;
  49. margin-bottom: var(--ck-balloon-arrow-offset);
  50. }
  51. }
  52. &.ck-balloon-panel_arrow_n {
  53. &::before,
  54. &::after {
  55. left: 50%;
  56. margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
  57. top: calc(-1 * var(--ck-balloon-arrow-height));
  58. }
  59. }
  60. &.ck-balloon-panel_arrow_nw {
  61. &::before,
  62. &::after {
  63. left: calc(2 * var(--ck-balloon-arrow-half-width));
  64. top: calc(-1 * var(--ck-balloon-arrow-height));
  65. }
  66. }
  67. &.ck-balloon-panel_arrow_ne {
  68. &::before,
  69. &::after {
  70. right: calc(2 * var(--ck-balloon-arrow-half-width));
  71. top: calc(-1 * var(--ck-balloon-arrow-height));
  72. }
  73. }
  74. &.ck-balloon-panel_arrow_s {
  75. &::before,
  76. &::after {
  77. left: 50%;
  78. margin-left: calc(-1 * var(--ck-balloon-arrow-half-width));
  79. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  80. }
  81. }
  82. &.ck-balloon-panel_arrow_sw {
  83. &::before,
  84. &::after {
  85. left: calc(2 * var(--ck-balloon-arrow-half-width));
  86. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  87. }
  88. }
  89. &.ck-balloon-panel_arrow_se {
  90. &::before,
  91. &::after {
  92. right: calc(2 * var(--ck-balloon-arrow-half-width));
  93. bottom: calc(-1 * var(--ck-balloon-arrow-height));
  94. }
  95. }
  96. }