diff --git a/src/imageuploadprogress.js b/src/imageuploadprogress.js index 0e2b8fa..b094296 100644 --- a/src/imageuploadprogress.js +++ b/src/imageuploadprogress.js @@ -14,7 +14,7 @@ import uploadingPlaceholder from '../theme/icons/image_placeholder.svg'; import UIElement from '@ckeditor/ckeditor5-engine/src/view/uielement'; import ImageUploadEngine from './imageuploadengine'; -import '../theme/imageuploadprogress.scss'; +import '../theme/imageuploadprogress.css'; /** * Image upload progress plugin. diff --git a/theme/imageuploadprogress.css b/theme/imageuploadprogress.css new file mode 100644 index 0000000..1481a5a --- /dev/null +++ b/theme/imageuploadprogress.css @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md. + */ + +/* Infinite progress bar default width. */ +:root { + --ck-image-upload-progress-line-width: 30px; +} + +figure.image { + position: relative; + overflow: hidden; + + /* Infinite progress bar on top while image is read. */ + &.ck-infinite-progress::before { + content: ""; + position: absolute; + top: 0; + right: 0; + } + + /* Upload progress bar. */ + & .ck-progress-bar { + position: absolute; + top: 0; + left: 0; + } +} diff --git a/theme/imageuploadprogress.scss b/theme/imageuploadprogress.scss deleted file mode 100644 index 1a626ad..0000000 --- a/theme/imageuploadprogress.scss +++ /dev/null @@ -1,65 +0,0 @@ -// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. -// For licensing, see LICENSE.md or http://ckeditor.com/license - -// Infinite progress bar default width. -$lineWidth: 30px; - -figure.image { - position: relative; - overflow: hidden; - - // Showing animation. - &.ck-appear { - animation: fadeIn 700ms; - } - - // Infinite progress bar on top while image is read. - &.ck-infinite-progress::before { - content: ""; - width: $lineWidth; - height: 2px; - position: absolute; - top: 0; - right: 0; - background: rgba(0, 0, 0, 0.1); - animation-name: readingProgressAnimation; - animation-duration: 1500ms; - animation-iteration-count: infinite; - transition-timing-function: linear; - } - - &.ck-image-upload-placeholder > img { - width: 100%; - } - - // Upload progress bar. - .ck-progress-bar { - height: 2px; - width: 0; - position: absolute; - top: 0; - left: 0; - background: #6ab5f9; - transition: width 100ms; - } -} - -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} - -@keyframes readingProgressAnimation { - 0% { - width: $lineWidth; - right: 0; - } - - 50% { - width: $lineWidth * 1.5; - } - - 100% { - right: 100%; - } -}