imageuploadicon.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. :root {
  6. --ck-upload-icon-size: 1.5em;
  7. --ck-upload-icon-width: 2px;
  8. --ck-color-upload-icon: hsl(0, 0%, 100%);
  9. --ck-color-upload-icon-background: hsl(120, 100%, 27%);
  10. }
  11. .ck-image-upload-finish {
  12. display: block;
  13. position: absolute;
  14. top: 10px;
  15. right: 10px;
  16. width: var(--ck-upload-icon-size);
  17. height: var(--ck-upload-icon-size);
  18. border-radius: 50%;
  19. background: var(--ck-color-upload-icon-background);
  20. animation-name: ck-fade-in, ck-fade-out;
  21. animation-duration: 500ms, 500ms;
  22. /* Hide completed upload icon after 3 seconds. */
  23. animation-delay: 0, 3000ms;
  24. /* This is check icon element made from border-width mixed with animations. */
  25. &::after {
  26. content: '';
  27. position: absolute;
  28. top: 50%;
  29. /* Because of border transformation we need to "hard code" left position. */
  30. left: calc( var(--ck-upload-icon-size) / 3.5 );
  31. transform: scaleX(-1) rotate(135deg);
  32. transform-origin: left top;
  33. border-top: var(--ck-upload-icon-width) solid var(--ck-color-upload-icon);
  34. border-right: var(--ck-upload-icon-width) solid var(--ck-color-upload-icon);
  35. animation-name: ck-check-icon;
  36. animation-duration: 500ms;
  37. animation-delay: 500ms;
  38. animation-fill-mode: forwards;
  39. }
  40. }
  41. @keyframes ck-check-icon {
  42. 0% {
  43. opacity: 1;
  44. height: 0;
  45. width: 0;
  46. }
  47. 33.3333% {
  48. width: calc( var(--ck-upload-icon-size) / 5 );
  49. height: 0;
  50. }
  51. 100% {
  52. opacity: 1;
  53. height: calc( var(--ck-upload-icon-size) / 3 );
  54. width: calc( var(--ck-upload-icon-size) / 5 );
  55. }
  56. }
  57. @keyframes ck-fade-in {
  58. from {
  59. opacity: 0;
  60. }
  61. to {
  62. opacity: 1;
  63. }
  64. }
  65. @keyframes ck-fade-out {
  66. from {
  67. opacity: 1;
  68. }
  69. to {
  70. opacity: 0;
  71. }
  72. }