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