fakepanel.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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/_shadow.css";
  6. :root {
  7. --ck-balloon-fake-panel-offset-horizontal: 6px;
  8. --ck-balloon-fake-panel-offset-vertical: 6px;
  9. }
  10. /* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
  11. .ck .ck-fake-panel div {
  12. @mixin ck-drop-shadow;
  13. min-height: 15px;
  14. background: var(--ck-color-panel-background);
  15. border: 1px solid var(--ck-color-panel-border);
  16. border-radius: var(--ck-border-radius);
  17. width: 100%;
  18. height: 100%;
  19. }
  20. .ck .ck-fake-panel div:nth-child( 1 ) {
  21. margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
  22. margin-top: var(--ck-balloon-fake-panel-offset-vertical);
  23. }
  24. .ck .ck-fake-panel div:nth-child( 2 ) {
  25. margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2);
  26. margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2);
  27. }
  28. .ck .ck-fake-panel div:nth-child( 3 ) {
  29. margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3);
  30. margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3);
  31. }
  32. /* If balloon is positioned above element, we need to move fake panel to the top. */
  33. .ck .ck-balloon-panel_arrow_s + .ck-fake-panel,
  34. .ck .ck-balloon-panel_arrow_se + .ck-fake-panel,
  35. .ck .ck-balloon-panel_arrow_sw + .ck-fake-panel {
  36. --ck-balloon-fake-panel-offset-vertical: -6px;
  37. }