Merge pull request #14970 from ckeditor/ck/14645-drag-and-drop-improv…

…e-the-drop-target-line Other (theme-lark): Improve the drag and drop target line. Closes #14645.
ckeditor · Sep 11, 2023 · 3ec29eb · 3ec29eb
2 parents 8d8a573 + 392d843
commit 3ec29eb
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/ckeditor5-clipboard/docs/features/drag-drop.md b/packages/ckeditor5-clipboard/docs/features/drag-drop.md
@@ -123,6 +123,16 @@ BalloonEditor.create(document.querySelector( '#editor' ), {
 	.catch( /* ... */ );
 ```
 
+## Styling the drag and drop
+
+The drag and drop target line color is managed by CSS variable (`--ck-clipboard-drop-target-color`). You can use the following snippet to change the color of the line:
+
+```css
+:root {
+	--ck-clipboard-drop-target-color: green;
+}
+```
+
 ## Related features
 
 * CKEditor&nbsp;5 supports dropping images from the file system thanks to the {@link features/image-upload image upload} feature.

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-clipboard/clipboard.css
@@ -3,10 +3,12 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
+
 :root {
 	--ck-clipboard-drop-target-dot-width: 12px;
 	--ck-clipboard-drop-target-dot-height: 8px;
-	--ck-clipboard-drop-target-color: var(--ck-color-focus-border)
+	--ck-clipboard-drop-target-color: var(--ck-color-focus-border);
 }
 
 .ck.ck-editor__editable {
@@ -23,14 +25,14 @@
 
 			/* The triangle above the marker */
 			&::after {
-				content: "";
+				content: '';
 				width: 0;
 				height: 0;
 
 				display: block;
 				position: absolute;
 				left: 50%;
-				top: calc(var(--ck-clipboard-drop-target-dot-height) * -.5);
+				top: calc(-.5 * var(--ck-clipboard-drop-target-dot-height));
 
 				transform: translateX(-50%);
 				border-color: var(--ck-clipboard-drop-target-color) transparent transparent transparent;
@@ -61,4 +63,27 @@
 	border: 1px solid var(--ck-clipboard-drop-target-color);
 	background: var(--ck-clipboard-drop-target-color);
 	margin-top: -1px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: calc(-.5 * var(--ck-clipboard-drop-target-dot-width));
+		width: 0;
+		height: 0;
+		border-style: solid;
+
+		@mixin ck-dir ltr {
+			left: -1px;
+
+			border-width: calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0 calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height);
+			border-color: transparent transparent transparent var(--ck-clipboard-drop-target-color);
+		}
+
+		@mixin ck-dir rtl {
+			right: -1px;
+
+			border-width:calc(.5 * var(--ck-clipboard-drop-target-dot-width)) var(--ck-clipboard-drop-target-dot-height) calc(.5 * var(--ck-clipboard-drop-target-dot-width)) 0;
+			border-color: transparent var(--ck-clipboard-drop-target-color) transparent transparent;
+		}
+	}
 }