diff --git a/theme/ckeditor5-image/imageuploadicon.css b/theme/ckeditor5-image/imageuploadicon.css new file mode 100644 index 0000000..e142de1 --- /dev/null +++ b/theme/ckeditor5-image/imageuploadicon.css @@ -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; + } +}