Parcourir la source

Widget type around buttons should show up/hide in sync with the outline of the widget.

Aleksander Nowodzinski il y a 5 ans
Parent
commit
58583556c8

+ 13 - 3
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css

@@ -5,6 +5,7 @@
 
 :root {
 	--ck-widget-type-around-button-size: 20px;
+	--ck-widget-type-around-button-fade-in-animation: ck-widget-type-around-button-fade-in var(--ck-widget-handler-animation-curve) var(--ck-widget-handler-animation-duration) 1 normal forwards;
 	--ck-color-widget-type-around-button-active: var(--ck-color-focus-border);
 	--ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border);
 	--ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border);
@@ -22,8 +23,7 @@
 		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;
+		animation: var(--ck-widget-type-around-button-fade-in-animation);
 
 		& svg {
 			width: 10px;
@@ -52,7 +52,7 @@
 			/*
 			 * Display the "sonar" around the button when hovered.
 			 */
-			animation: ck-widget-type-around-button-sonar 1s ease infinite;
+			animation: var(--ck-widget-type-around-button-fade-in-animation), ck-widget-type-around-button-sonar 1s ease infinite;
 
 			/*
 			 * Animate active button's icon.
@@ -143,3 +143,13 @@
 		box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha));
 	}
 }
+
+@keyframes ck-widget-type-around-button-fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}