Merge pull request #16338 from ckeditor/ck/16317-image-style-css-brea…

…ks-in-nim Fix (image): Increased specificity of `.image-style-block-align-[right/left]`, `.image-style-align-[right/left]`, `.image-style-side` CSS classes by adding `.image` class. Closes #16317. MINOR BREAKING CHANGE (image): Increased specificity of `.image-style-block-align-[right/left]`, `.image-style-align-[right/left]`, `.image-style-side` CSS classes by adding `.image` class. See #16317.
ckeditor · May 20, 2024 · 3f8edce · 3f8edce
2 parents 7ccae0e + 6f13aba
commit 3f8edce
Showing 1 changed file with 47 additions and 34 deletions.
diff --git a/packages/ckeditor5-image/theme/imagestyle.css b/packages/ckeditor5-image/theme/imagestyle.css
@@ -9,56 +9,69 @@
 }
 
 .ck-content {
-	/* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback
-	confirming successful application of the style if image width exceeds the editor's size.
-	See https://github.com/ckeditor/ckeditor5/issues/9342 */
-	& .image-style-block-align-left,
-	& .image-style-block-align-right {
-		max-width: calc(100% - var(--ck-image-style-spacing));
-	}
+	/* See: https://github.com/ckeditor/ckeditor5/issues/16317 */
+	& .image {
+		/* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback
+		confirming successful application of the style if image width exceeds the editor's size.
+		See https://github.com/ckeditor/ckeditor5/issues/9342 */
+		&.image-style-block-align-left,
+		&.image-style-block-align-right {
+			max-width: calc(100% - var(--ck-image-style-spacing));
+		}
 
-	/* Allows displaying multiple floating images in the same line.
-	See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
-	& .image-style-align-left,
-	& .image-style-align-right {
-		clear: none;
-	}
+		/* Allows displaying multiple floating images in the same line.
+		See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
+		&.image-style-align-left,
+		&.image-style-align-right {
+			clear: none;
+		}
 
-	& .image-style-side {
-		float: right;
-		margin-left: var(--ck-image-style-spacing);
-		max-width: 50%;
-	}
+		&.image-style-side {
+			float: right;
+			margin-left: var(--ck-image-style-spacing);
+			max-width: 50%;
+		}
 
-	& .image-style-align-left {
-		float: left;
-		margin-right: var(--ck-image-style-spacing);
+		&.image-style-align-left {
+			float: left;
+			margin-right: var(--ck-image-style-spacing);
+		}
+
+		&.image-style-align-right {
+			float: right;
+			margin-left: var(--ck-image-style-spacing);
+		}
+
+		&.image-style-block-align-right {
+			margin-right: 0;
+			margin-left: auto;
+		}
+
+		&.image-style-block-align-left {
+			margin-left: 0;
+			margin-right: auto;
+		}
 	}
 
 	& .image-style-align-center {
 		margin-left: auto;
 		margin-right: auto;
 	}
 
+	& .image-style-align-left {
+		float: left;
+		margin-right: var(--ck-image-style-spacing);
+	}
+
 	& .image-style-align-right {
 		float: right;
 		margin-left: var(--ck-image-style-spacing);
 	}
 
-	& .image-style-block-align-right {
-		margin-right: 0;
-		margin-left: auto;
-	}
-
-	& .image-style-block-align-left {
-		margin-left: 0;
-		margin-right: auto;
-	}
-
 	/* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */
-	& p + .image-style-align-left,
-	& p + .image-style-align-right,
-	& p + .image-style-side {
+	& p + .image.image-style-align-left,
+	& p + .image.image-style-align-right,
+	& p + .image.image-style-side {
 		margin-top: 0;
 	}