Explorar el Código

Feature: Add CSS styles for the selection handler.

Maciej Gołaszewski hace 7 años
padre
commit
55e0164a81
Se han modificado 1 ficheros con 46 adiciones y 1 borrados
  1. 46 1
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

+ 46 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -10,7 +10,8 @@
 	--ck-widget-outline-thickness: 3px;
 	--ck-color-widget-border-blurred: hsl(0, 0%, 87%);
 	--ck-color-widget-border-hover: hsl(43, 100%, 68%);
-	--ck-color-widget-editable-focused-background: var(--ck-color-base-background),
+	--ck-color-widget-editable-focused-background: var(--ck-color-base-background);
+	--ck-color-widget-drag-handler-icon: hsl(0, 0%, 100%);
 }
 
 .ck .ck-widget {
@@ -44,3 +45,47 @@
 		background-color: var(--ck-color-widget-editable-focused-background);
 	}
 }
+
+:root {
+	--ck-widget-drag-handler-width: 22px;
+}
+
+.ck .ck-widget.ck-widget__selectable {
+	/* Make the widget wrapper a relative positioning container for the drag handler. */
+	position: relative;
+
+	& .ck-selection-handler {
+		display: none;
+
+		border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 var(--ck-border-radius);
+
+		width: var(--ck-widget-drag-handler-width);
+		height: calc(var(--ck-widget-outline-thickness) + var(--ck-widget-drag-handler-width));
+
+		/* Place the drag handler outside the widget wrapper. */
+		position: absolute;
+		top: calc(0px - var(--ck-widget-outline-thickness) - var(--ck-widget-drag-handler-width));
+		left: calc(0px - var(--ck-widget-outline-thickness));
+
+		& .ck-icon {
+			color: var(--ck-color-widget-drag-handler-icon);
+		}
+	}
+
+	/* Show the selection handler when the widget is selected. */
+	&.ck-widget_selected,
+	&.ck-widget_selected:hover {
+		& .ck-selection-handler {
+			display: block;
+			background-color: var(--ck-color-focus-border);
+		}
+	}
+
+	/* Show the selection handler on mouse hover over the widget. */
+	&:hover {
+		& .ck-selection-handler {
+			display: block;
+			background-color: var(--ck-color-widget-border-hover);
+		}
+	}
+}