浏览代码

Migrated UI components from SASS to PostCSS. Added theme support.

Aleksander Nowodzinski 8 年之前
父节点
当前提交
f9723a2043

+ 1 - 1
packages/ckeditor5-upload/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.

+ 29 - 0
packages/ckeditor5-upload/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;
+	}
+}

+ 0 - 65
packages/ckeditor5-upload/theme/imageuploadprogress.scss

@@ -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%;
-	}
-}