浏览代码

Other: Added a subtle shake animation to the .ck-input-text when it gets an error. Closes #198.

Aleksander Nowodzinski 7 年之前
父节点
当前提交
90d0b021b8
共有 1 个文件被更改,包括 20 次插入0 次删除
  1. 20 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/inputtext/inputtext.css

+ 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: shakeInput .5s ease both;
+		transform: translateX(0);
 
 		&:focus {
 			@mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
 		}
 	}
 }
+
+@keyframes shakeInput {
+	20% {
+		transform: translateX(-2px);
+	}
+
+	40% {
+		transform: translateX(2px);
+	}
+
+	60% {
+		transform: translateX(-1px);
+	}
+
+	80% {
+		transform: translateX(1px);
+	}
+}