UNPKG

3.66 kBCSSView Raw
1/*
2 * Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
3 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4 */
5
6.ck-content {
7 & .image {
8 display: table;
9 clear: both;
10 text-align: center;
11
12 /* Make sure there is some space between the content and the image. Center image by default. */
13 /* The first value should be equal to --ck-spacing-large variable if used in the editor context
14 to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
15 margin: 0.9em auto;
16
17 /* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
18 min-width: 50px;
19
20 & img {
21 /* Prevent unnecessary margins caused by line-height (see #44). */
22 display: block;
23
24 /* Center the image if its width is smaller than the content's width. */
25 margin: 0 auto;
26
27 /* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
28 max-width: 100%;
29
30 /* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */
31 min-width: 100%
32 }
33 }
34
35 & .image-inline {
36 /*
37 * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).
38 * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
39 * This strange behavior does not happen with inline-flex.
40 */
41 display: inline-flex;
42
43 /* While being resized, don't allow the image to exceed the width of the editing root. */
44 max-width: 100%;
45
46 /* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */
47 align-items: flex-start;
48
49 /* When the picture is present it must act as a flex container to let the img resize properly */
50 & picture {
51 display: flex;
52 }
53
54 /* When the picture is present, it must act like a resizable img. */
55 & picture,
56 & img {
57 /* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */
58 flex-grow: 1;
59 flex-shrink: 1;
60
61 /* Prevents overflowing the editing root boundaries when an inline image is very wide. */
62 max-width: 100%;
63 }
64 }
65}
66
67.ck.ck-editor__editable {
68 /*
69 * Inhertit the content styles padding of the <figcaption> in case the integration overrides `text-align: center`
70 * of `.image` (e.g. to the left/right). This ensures the placeholder stays at the padding just like the native
71 * caret does, and not at the edge of <figcaption>.
72 */
73 & .image > figcaption.ck-placeholder::before {
74 padding-left: inherit;
75 padding-right: inherit;
76
77 /*
78 * Make sure the image caption placeholder doesn't overflow the placeholder area.
79 * See https://github.com/ckeditor/ckeditor5/issues/9162.
80 */
81 white-space: nowrap;
82 overflow: hidden;
83 text-overflow: ellipsis;
84 }
85
86
87 /*
88 * Make sure the selected inline image always stays on top of its siblings.
89 * See https://github.com/ckeditor/ckeditor5/issues/9108.
90 */
91 & .image.ck-widget_selected {
92 z-index: 1;
93 }
94
95 & .image-inline.ck-widget_selected {
96 z-index: 1;
97
98 /*
99 * Make sure the native browser selection style is not displayed.
100 * Inline image widgets have their own styles for the selected state and
101 * leaving this up to the browser is asking for a visual collision.
102 */
103 & ::selection {
104 display: none;
105 }
106 }
107
108 /* The inline image nested in the table should have its original size if not resized.
109 See https://github.com/ckeditor/ckeditor5/issues/9117. */
110 & td,
111 & th {
112 & .image-inline img {
113 max-width: none;
114 }
115 }
116}