8
0

imageuploadicon.css 2.1 KB

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