Преглед изворни кода

Added missing box-sizing for the upload icon pseudoelement.

dkonopka пре 7 година
родитељ
комит
05ca15e4ae
1 измењених фајлова са 10 додато и 8 уклоњено
  1. 10 8
      packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css

+ 10 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css

@@ -7,7 +7,7 @@
 	--ck-color-image-upload-icon: hsl(0, 0%, 100%);
 	--ck-color-image-upload-icon-background: hsl(120, 100%, 27%);
 
-	--ck-image-upload-icon-size: 1.25em;
+	--ck-image-upload-icon-size: 20px;
 	--ck-image-upload-icon-width: 2px;
 }
 
@@ -20,6 +20,9 @@
 	animation-fill-mode: forwards, forwards;
 	animation-duration: 500ms, 500ms;
 
+	/* To make animation scalable. */
+	font-size: var(--ck-image-upload-icon-size);
+
 	/* Hide completed upload icon after 3 seconds. */
 	animation-delay: 0ms, 3000ms;
 
@@ -42,6 +45,9 @@
 		animation-duration: 500ms;
 		animation-delay: 500ms;
 		animation-fill-mode: forwards;
+
+		/* #1095. While reset is not providing proper box-sizing for pseudoelements, we need to handle it. */
+		box-sizing: border-box;
 	}
 }
 
@@ -74,21 +80,17 @@
 	33% {
 		/*
 		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be: width: calc( var(--ck-image-upload-icon-size) / 5 );
 		 */
-		width: 0.25em;
+		width: 0.3em;
 
 		height: 0;
 	}
 	100% {
 		/*
 		 * We need to use here hardcoded values because Edge is not supporting calc() in @keyframes.
-		 * It should be:
-		 * height: calc( var(--ck-image-upload-icon-size) / 3 );
-		 * width: calc( var(--ck-image-upload-icon-size) / 5 );
 		 */
-		width: 0.25em;
-		height: 0.416em;
+		width: 0.3em;
+		height: 0.45em;
 
 		opacity: 1;
 	}