Merge pull request #8802 from ckeditor/i/6744-resize-theme

Internal (widget): The visual styles of widget-resize should be placed in the theme-lark package. Closes #6744.
ckeditor · Jan 12, 2021 · 343a715 · 343a715
2 parents 270a6c3 + 3a65937
commit 343a715
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 40 deletions.
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgetresize.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgetresize.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+:root {
+	--ck-resizer-size: 10px;
+
+	/* Set the resizer with a 50% offset. */
+	--ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
+	--ck-resizer-border-width: 1px;
+}
+
+.ck .ck-widget__resizer {
+	outline: 1px solid var(--ck-color-resizer);
+}
+
+.ck .ck-widget__resizer__handle {
+	width: var(--ck-resizer-size);
+	height: var(--ck-resizer-size);
+	background: var(--ck-color-focus-border);
+	border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%);
+	border-radius: var(--ck-resizer-border-radius);
+
+	&.ck-widget__resizer__handle-top-left {
+		top: var(--ck-resizer-offset);
+		left: var(--ck-resizer-offset);
+	}
+
+	&.ck-widget__resizer__handle-top-right {
+		top: var(--ck-resizer-offset);
+		right: var(--ck-resizer-offset);
+	}
+
+	&.ck-widget__resizer__handle-bottom-right {
+		bottom: var(--ck-resizer-offset);
+		right: var(--ck-resizer-offset);
+	}
+
+	&.ck-widget__resizer__handle-bottom-left {
+		bottom: var(--ck-resizer-offset);
+		left: var(--ck-resizer-offset);
+	}
+}
diff --git a/packages/ckeditor5-widget/theme/widget.css b/packages/ckeditor5-widget/theme/widget.css
@@ -5,16 +5,11 @@
 
 :root {
 	--ck-color-resizer: var(--ck-color-focus-border);
-	--ck-resizer-size: 10px;
-	--ck-resizer-border-width: 1px;
-	--ck-resizer-border-radius: 2px;
-
-	/* Set the resizer with a 50% offset. */
-	--ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
-
-	--ck-resizer-tooltip-offset: 10px;
 	--ck-color-resizer-tooltip-background: hsl(0, 0%, 15%);
 	--ck-color-resizer-tooltip-text: hsl(0, 0%, 95%);
+
+	--ck-resizer-border-radius: var(--ck-border-radius);
+	--ck-resizer-tooltip-offset: 10px;
 }
 
 .ck .ck-widget {
@@ -66,22 +61,22 @@
 	}
 
 	&.ck-orientation-top-left {
-		top: var( --ck-resizer-tooltip-offset );
-		left: var( --ck-resizer-tooltip-offset );
+		top: var(--ck-resizer-tooltip-offset);
+		left: var(--ck-resizer-tooltip-offset);
 	}
 
 	&.ck-orientation-top-right {
-		top: var( --ck-resizer-tooltip-offset );
-		right: var( --ck-resizer-tooltip-offset );
+		top: var(--ck-resizer-tooltip-offset);
+		right: var(--ck-resizer-tooltip-offset);
 	}
 
 	&.ck-orientation-bottom-right {
-		bottom: var( --ck-resizer-tooltip-offset );
-		right: var( --ck-resizer-tooltip-offset );
+		bottom: var(--ck-resizer-tooltip-offset);
+		right: var(--ck-resizer-tooltip-offset);
 	}
 
 	&.ck-orientation-bottom-left {
-		bottom: var( --ck-resizer-tooltip-offset );
-		left: var( --ck-resizer-tooltip-offset );
+		bottom: var(--ck-resizer-tooltip-offset);
+		left: var(--ck-resizer-tooltip-offset);
 	}
 }
diff --git a/packages/ckeditor5-widget/theme/widgetresize.css b/packages/ckeditor5-widget/theme/widgetresize.css
@@ -17,8 +17,6 @@
 
 	left: 0;
 	top: 0;
-
-	outline: 1px solid var(--ck-color-resizer);
 }
 
 .ck-focused .ck-widget_with-resizer.ck-widget_selected {
@@ -33,33 +31,13 @@
 	/* Resizers are the only UI elements that should interfere with a pointer device. */
 	pointer-events: all;
 
-	width: var(--ck-resizer-size);
-	height: var(--ck-resizer-size);
-	background: var(--ck-color-focus-border);
-	border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%);
-	border-radius: var(--ck-resizer-border-radius);
-
-	&.ck-widget__resizer__handle-top-left {
-		top: var( --ck-resizer-offset );
-		left: var( --ck-resizer-offset );
-		cursor: nwse-resize;
-	}
-
-	&.ck-widget__resizer__handle-top-right {
-		top: var( --ck-resizer-offset );
-		right: var( --ck-resizer-offset );
-		cursor: nesw-resize;
-	}
-
+	&.ck-widget__resizer__handle-top-left,
 	&.ck-widget__resizer__handle-bottom-right {
-		bottom: var( --ck-resizer-offset );
-		right: var( --ck-resizer-offset );
 		cursor: nwse-resize;
 	}
 
+	&.ck-widget__resizer__handle-top-right,
 	&.ck-widget__resizer__handle-bottom-left {
-		bottom: var( --ck-resizer-offset );
-		left: var( --ck-resizer-offset );
 		cursor: nesw-resize;
 	}
 }