Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed Image styles CSS that got broken using NIM. #16338

Merged
merged 4 commits into from
May 20, 2024
Merged

Fixed Image styles CSS that got broken using NIM. #16338

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de1bf15
Increased specificity of image-style-align CSS classes.
pszczesniak May 10, 2024
d1ce40e
Increased specificity of almost all image-style-align CSS classes.
pszczesniak May 13, 2024
bd30542
Merge branch 'master' into ck/16317-image-style-css-breaks-in-nim
pszczesniak May 16, 2024
6f13aba
Added image style align left/right between image and image-inline.
pszczesniak May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 47 additions & 34 deletions packages/ckeditor5-image/theme/imagestyle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down