|
|
@@ -0,0 +1,95 @@
|
|
|
+/*
|
|
|
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
|
|
|
+ * For licensing, see LICENSE.md.
|
|
|
+ */
|
|
|
+
|
|
|
+:root {
|
|
|
+ --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-width: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.ck-image-upload-complete-icon {
|
|
|
+ width: var(--ck-image-upload-icon-size);
|
|
|
+ height: var(--ck-image-upload-icon-size);
|
|
|
+ opacity: 0;
|
|
|
+ background: var(--ck-color-image-upload-icon-background);
|
|
|
+ animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
|
|
|
+ animation-fill-mode: forwards, forwards;
|
|
|
+ animation-duration: 500ms, 500ms;
|
|
|
+
|
|
|
+ /* Hide completed upload icon after 3 seconds. */
|
|
|
+ animation-delay: 0ms, 3000ms;
|
|
|
+
|
|
|
+ /* This is check icon element made from border-width mixed with animations. */
|
|
|
+ &::after {
|
|
|
+ /* Because of border transformation we need to "hard code" left position. */
|
|
|
+ left: 25%;
|
|
|
+
|
|
|
+ top: 50%;
|
|
|
+ opacity: 0;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+
|
|
|
+ transform: scaleX(-1) rotate(135deg);
|
|
|
+ transform-origin: left top;
|
|
|
+ border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
|
|
|
+ border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
|
|
|
+
|
|
|
+ animation-name: ck-upload-complete-icon-check;
|
|
|
+ animation-duration: 500ms;
|
|
|
+ animation-delay: 500ms;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes ck-upload-complete-icon-show {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes ck-upload-complete-icon-hide {
|
|
|
+ from {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes ck-upload-complete-icon-check {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+
|
|
|
+ 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;
|
|
|
+
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|