Browse Source

Moved content styles from ckeditor5-theme-lark (see ckeditor/ckeditor5-theme-lark#119).

Aleksander Nowodzinski 7 years ago
parent
commit
9c77ed83aa

+ 13 - 8
packages/ckeditor5-image/theme/image.css

@@ -3,13 +3,18 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-editor__editable {
-	& .image {
-		clear: both;
-
-		& > img {
-			/* Prevent unnecessary margins caused by line-height (see #44). */
-			display: block;
-		}
+.ck-content .image {
+	clear: both;
+	text-align: center;
+
+	& > 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 (ckeditor/ckeditor5-ui#67). */
+		max-width: 100%;
 	}
 }

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

@@ -2,3 +2,11 @@
  * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
+
+.ck-content .image > figcaption {
+	color: hsl(0, 0%, 20%);
+	background-color: hsl(0, 0%, 97%);
+	padding: .6em;
+	font-size: .75em;
+	outline-offset: -1px;
+}

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

@@ -2,3 +2,36 @@
  * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md.
  */
+
+:root {
+	--ck-image-style-spacing: 1.5em;
+}
+
+.ck-content {
+	& .image-style-side,
+	& .image-style-align-left,
+	& .image-style-align-center,
+	& .image-style-align-right {
+		max-width: 50%;
+	}
+
+	& .image-style-side {
+		float: right;
+		margin-left: var(--ck-image-style-spacing);
+	}
+
+	& .image-style-align-left {
+		float: left;
+		margin-right: var(--ck-image-style-spacing);
+	}
+
+	& .image-style-align-center {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	& .image-style-align-right {
+		float: right;
+		margin-left: var(--ck-image-style-spacing);
+	}
+}