Parcourir la source

Merge pull request #199 from ckeditor/t/198

Other: Added a subtle shake animation to the .ck-input-text when it gets an error. Closes #198.
Damian Konopka il y a 7 ans
Parent
commit
ad264972c2

+ 20 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

@@ -45,9 +45,29 @@
 
 	&.ck-error {
 		border-color: var(--ck-color-input-error-border);
+		animation: ck-text-input-shake .3s ease both;
+		transform: translateX(0);
 
 		&:focus {
 			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
 		}
 	}
 }
+
+@keyframes ck-text-input-shake {
+	20% {
+		transform: translateX(-2px);
+	}
+
+	40% {
+		transform: translateX(2px);
+	}
+
+	60% {
+		transform: translateX(-1px);
+	}
+
+	80% {
+		transform: translateX(1px);
+	}
+}