8
0
فهرست منبع

Merge pull request #7252 from ckeditor/i/7251

Internal (theme-lark): Widget type around buttons should show/hide in sync with the outline of the widget. Closes #7251.
Kuba Niegowski 5 سال پیش
والد
کامیت
c8ef6f073e

+ 15 - 2
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -22,8 +22,10 @@
 		height: var(--ck-widget-type-around-button-size);
 		background: var(--ck-color-widget-type-around-button);
 		border-radius: 100px;
-		animation: fadein linear 300ms 1 normal forwards;
-		transition: opacity 100ms linear;
+
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve), background var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
 
 		& svg {
 			width: 10px;
@@ -69,6 +71,17 @@
 		}
 	}
 
+	/*
+	 * Show type around buttons when the widget gets selected or being hovered.
+	 */
+	&.ck-widget_selected,
+	&:hover {
+		& > .ck-widget__type-around > .ck-widget__type-around__button {
+			pointer-events: auto;
+			opacity: 1;
+		}
+	}
+
 	/*
 	 * Styles for the buttons when the widget is NOT selected (but the buttons are visible
 	 * and still can be hovered).

+ 1 - 11
packages/ckeditor5-widget/theme/widgettypearound.css

@@ -8,7 +8,7 @@
 	 * Styles of the type around buttons
 	 */
 	& .ck-widget__type-around__button {
-		display: none;
+		display: block;
 		position: absolute;
 		overflow: hidden;
 		z-index: var(--ck-z-default);
@@ -37,16 +37,6 @@
 		}
 	}
 
-	/*
-	 * Show type around buttons when the widget gets selected or being hovered.
-	 */
-	&.ck-widget_selected,
-	&:hover {
-		& > .ck-widget__type-around > .ck-widget__type-around__button {
-			display: block;
-		}
-	}
-
 	/*
 	 * Hide the type around buttons depending on which directions the widget supports.
 	 */