Преглед на файлове

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

Aleksander Nowodzinski преди 8 години
родител
ревизия
9d2197be83

+ 1 - 1
packages/ckeditor5-image/src/image.js

@@ -13,7 +13,7 @@ import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import ImageTextAlternative from './imagetextalternative';
 import { isImageWidgetSelected } from './image/utils';
 
-import '../theme/theme.scss';
+import '../theme/image.css';
 
 /**
  * The image plugin.

+ 2 - 1
packages/ckeditor5-image/src/imagecaption.js

@@ -9,7 +9,8 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageCaptionEngine from './imagecaption/imagecaptionengine';
-import '../theme/imagecaption/theme.scss';
+
+import '../theme/imagecaption.css';
 
 /**
  * The image caption plugin.

+ 2 - 0
packages/ckeditor5-image/src/imagestyle.js

@@ -11,6 +11,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageStyleEngine from './imagestyle/imagestyleengine';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
+import '../theme/imagestyle.css';
+
 /**
  * The image style plugin.
  *

+ 1 - 1
packages/ckeditor5-image/src/imagetextalternative.js

@@ -17,7 +17,7 @@ import textAlternativeIcon from '@ckeditor/ckeditor5-core/theme/icons/low-vision
 import { repositionContextualBalloon, getBalloonPositionData } from './image/ui/utils';
 import { isImageWidgetSelected } from './image/utils';
 
-import '../theme/imagetextalternative/theme.scss';
+// import '../theme/imagetextalternative/theme.scss';
 
 /**
  * The image text alternative plugin.

+ 2 - 0
packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js

@@ -19,6 +19,8 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 
+import '../../../theme/textalternativeform.css';
+
 /**
  * The TextAlternativeFormView class.
  *

+ 15 - 0
packages/ckeditor5-image/theme/image.css

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-editor__editable {
+	& .image {
+		clear: both;
+
+		& > img {
+			/*Prevent unnecessary margins caused by line-height (see #44).*/
+			display: block;
+		}
+	}
+}

+ 4 - 0
packages/ckeditor5-image/theme/imagecaption.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */

+ 0 - 21
packages/ckeditor5-image/theme/imagecaption/theme.scss

@@ -1,21 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_colors.scss';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing.scss';
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_fonts.scss';
-
-@include ck-color-add( (
-	'image-caption-background': $ck-color-foreground,
-	'image-caption-text': $ck-color-text
-) );
-
-.ck-editor__editable {
-	.image > figcaption {
-		color: ck-color( 'image-caption-text' );
-		background-color: ck-color( 'image-caption-background' );
-		padding: ck-spacing();
-		font-size: ck-font-size( -1 );
-		outline-offset: -1px;
-	}
-}

+ 4 - 0
packages/ckeditor5-image/theme/imagestyle.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */

+ 0 - 37
packages/ckeditor5-image/theme/imagetextalternative/theme.scss

@@ -1,37 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing';
-
-.cke-text-alternative {
-	&-form {
-		padding: ck-spacing( 'large' );
-		overflow: hidden;
-
-		&:focus {
-			// https://github.com/ckeditor/ckeditor5-image/issues/40
-			outline: none;
-		}
-
-		.ck-label {
-			margin-bottom: ck-spacing( 'small' );
-		}
-
-		&__actions {
-			clear: both;
-			padding-top: ck-spacing( 'large' );
-
-			.ck-button {
-				float: right;
-
-				& + .ck-button {
-					margin-right: ck-spacing( 'medium' );
-
-					& + .ck-button {
-						float: left;
-					}
-				}
-			}
-		}
-	}
-}

+ 20 - 0
packages/ckeditor5-image/theme/textalternativeform.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.cke-text-alternative-form {
+	overflow: hidden;
+}
+
+.cke-text-alternative-form__actions {
+	clear: both;
+
+	& .ck-button {
+		float: right;
+
+		& + .ck-button + .ck-button {
+			float: left;
+		}
+	}
+}

+ 0 - 52
packages/ckeditor5-image/theme/theme.scss

@@ -1,52 +0,0 @@
-// Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
-// For licensing, see LICENSE.md or http://ckeditor.com/license
-
-@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing';
-
-$ck-image-spacing: 5 * ck-spacing( 'small' );
-$ck-image-max-width: 50%;
-
-.ck-editor__editable {
-	.image {
-		text-align: center;
-		clear: both;
-
-		&.image-style-side,
-		&.image-style-align-left,
-		&.image-style-align-center,
-		&.image-style-align-right {
-			max-width: $ck-image-max-width;
-		}
-
-		&.image-style-side {
-			float: right;
-			margin-left: $ck-image-spacing;
-		}
-
-		&.image-style-align-left {
-			float: left;
-			margin-right: $ck-image-spacing;
-		}
-
-		&.image-style-align-center {
-			margin-left: auto;
-			margin-right: auto;
-		}
-
-		&.image-style-align-right {
-			float: right;
-			margin-left: $ck-image-spacing;
-		}
-	}
-
-	.image > img {
-		// Prevent unnecessary margins caused by line-height (see #44).
-		display: block;
-
-		// Center the image if its width is smaller than content's width.
-		margin: 0 auto;
-
-		// Make sure the image never exceeds the size of the parent container (#67).
-		max-width: 100%;
-	}
-}