|
|
@@ -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;
|
|
|
+ }
|
|
|
+}
|