Przeglądaj źródła

Support fake panels for balloon positioned above element.

dkonopka 6 lat temu
rodzic
commit
8af0daf07c

+ 14 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/panel/fakepanel.css

@@ -6,10 +6,11 @@
 @import "../../../mixins/_shadow.css";
 
 :root {
-	--ck-balloon-fake-panel-offset: 8px;
+	--ck-balloon-fake-panel-offset-horizontal: 8px;
+	--ck-balloon-fake-panel-offset-vertical: 8px;
 }
 
-/* Let's use `ck-balloon-panel` appearance. See: balloonpanel.css. */
+/* Let's use `.ck-balloon-panel` appearance. See: balloonpanel.css. */
 .ck .ck-fake-panel div {
 	@mixin ck-drop-shadow;
 
@@ -24,17 +25,22 @@
 }
 
 .ck .ck-fake-panel div:nth-child( 1 ) {
-	margin-left: var(--ck-balloon-fake-panel-offset);
+	margin-left: var(--ck-balloon-fake-panel-offset-horizontal);
 
 	/* Because of parent shadow, we need to move panel by fixed value. */
-	margin-top: calc( var(--ck-balloon-fake-panel-offset) + 1px );
+	margin-top: calc( var(--ck-balloon-fake-panel-offset-vertical) + 1px );
 }
 
 .ck .ck-fake-panel div:nth-child( 2 ) {
-	margin-left: calc(var(--ck-balloon-fake-panel-offset) * 2);
-	margin-top: calc(var(--ck-balloon-fake-panel-offset) * 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) * 3);
-	margin-top: calc(var(--ck-balloon-fake-panel-offset) * 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-balloon-fake-panel-offset-vertical: -8px;
 }