/* * 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; } }