8
0

imageuploadicon.css 1.9 KB

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