Merge pull request #229 from ckeditor/cf/2808

Other: Introduced styles for ck-fake-panel. Part of ckeditor/ckeditor5-ui#501.

theme/ckeditor5-ui/components/panel/balloonrotator.css

@@ -18,6 +18,16 @@
 	/* Gives counter more breath than buttons. */
 	& .ck-balloon-rotator__counter {
 		margin-right: var(--ck-spacing-standard);
-		margin-left: var(--ck-spacing-standard);
+
+		/* We need to use smaller margin because of previous button's right margin. */
+		margin-left: var(--ck-spacing-small);
+	}
+}
+
+.ck .ck-balloon-rotator__content {
+
+	/* Disable default annotation shadow inside rotator with fake panels. */
+	& .ck.ck-annotation-wrapper {
+		box-shadow: none;
 	}
 }

theme/ckeditor5-ui/components/panel/fakepanel.css

@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@import "../../../mixins/_shadow.css";
+
+:root {
+	--ck-balloon-fake-panel-offset-horizontal: 6px;
+	--ck-balloon-fake-panel-offset-vertical: 6px;
+}
+
+/* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
+.ck .ck-fake-panel div {
+	@mixin ck-drop-shadow;
+
+	min-height: 15px;
+
+	background: var(--ck-color-panel-background);
+	border: 1px solid var(--ck-color-panel-border);
+	border-radius: var(--ck-border-radius);
+
+	width: 100%;
+	height: 100%;
+}
+
+.ck .ck-fake-panel div:nth-child( 1 ) {
+	margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
+	margin-top: var(--ck-balloon-fake-panel-offset-vertical);
+}
+
+.ck .ck-fake-panel div:nth-child( 2 ) {
+	margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 2);
+	margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 2);
+}
+.ck .ck-fake-panel div:nth-child( 3 ) {
+	margin-left: calc(var(--ck-balloon-fake-panel-offset-horizontal) * 3);
+	margin-top: calc(var(--ck-balloon-fake-panel-offset-vertical) * 3);
+}
+
+/* If balloon is positioned above element, we need to move fake panel to the top. */
+.ck .ck-balloon-panel_arrow_s + .ck-fake-panel,
+.ck .ck-balloon-panel_arrow_se + .ck-fake-panel,
+.ck .ck-balloon-panel_arrow_sw + .ck-fake-panel {
+	--ck-balloon-fake-panel-offset-vertical: -6px;
+}