| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- /*
- * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
- :root {
- --ck-image-style-spacing: 1.5em;
- }
- .ck-content {
- & .image-style-side,
- & .image-style-align-left,
- & .image-style-align-center,
- & .image-style-align-right {
- &:not(.image_resized) {
- max-width: 50%;
- }
- }
- & .image.image_resized {
- max-width: 100%;
- /*
- The figure element for resized images must not use `display:table` as browsers doesn't support `max-width` for it well.
- See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
- Fortunately, since we control width, there's no risk that the image will look bad.
- */
- display: block;
- box-sizing: border-box;
- & img {
- /* For resized images it's the figure that determines the image's width. */
- width: 100%;
- }
- & > figcaption {
- /* Figure uses display block, so figcaption also has to. */
- display: block;
- }
- }
- & .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);
- }
- }
|