8
0
Просмотр исходного кода

Fix: The widget'selection handler's icon should smoothly disappear along with the handler.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
0dd282ef59
1 измененных файлов с 8 добавлено и 3 удалено
  1. 8 3
      packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

+ 8 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widget.css

@@ -60,15 +60,18 @@
 		padding: 4px;
 		box-sizing: border-box;
 
-		/* Background color will be animated as the handler shows up or the widget gets selected. */
+		/* Background and opacity will be animated as the handler shows up or the widget gets selected. */
 		background-color: transparent;
+		opacity: 0;
 
 		/* Transition:
 		   * background-color for the .ck-widget_selected state change,
-		   * visibility for hiding the handler. */
+		   * visibility for hiding the handler,
+		   * opacity for the proper look of the icon when the handler disappears. */
 		transition:
 			background-color var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve),
-			visibility var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve);
+			visibility var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve),
+			opacity var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve);
 
 		/* Make only top corners round. */
 		border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
@@ -102,6 +105,7 @@
 	&.ck-widget_selected,
 	&.ck-widget_selected:hover {
 		& .ck-selection-handler {
+			opacity: 1;
 			background-color: var(--ck-color-focus-border);
 
 			/* When the widget is selected, notify the user using the proper look of the icon. */
@@ -113,6 +117,7 @@
 
 	/* Show the selection handler on mouse hover over the widget. */
 	&:hover .ck-selection-handler {
+		opacity: 1;
 		background-color: var(--ck-color-widget-border-hover);
 	}
 }