8
0

imagestyle.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /*
  2. * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. :root {
  6. --ck-image-style-spacing: 1.5em;
  7. }
  8. .ck-content {
  9. & .image-style-side,
  10. & .image-style-align-left,
  11. & .image-style-align-center,
  12. & .image-style-align-right {
  13. &:not(.image_resized) {
  14. max-width: 50%;
  15. }
  16. }
  17. & .image.image_resized {
  18. max-width: 100%;
  19. /*
  20. The figure element for resized images must not use `display:table` as browsers doesn't support `max-width` for it well.
  21. See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
  22. Fortunately, since we control width, there's no risk that the image will look bad.
  23. */
  24. display: block;
  25. box-sizing: border-box;
  26. & img {
  27. /* For resized images it's the figure that determines the image's width. */
  28. width: 100%;
  29. }
  30. & > figcaption {
  31. /* Figure uses display block, so figcaption also has to. */
  32. display: block;
  33. }
  34. }
  35. & .image-style-side {
  36. float: right;
  37. margin-left: var(--ck-image-style-spacing);
  38. }
  39. & .image-style-align-left {
  40. float: left;
  41. margin-right: var(--ck-image-style-spacing);
  42. }
  43. & .image-style-align-center {
  44. margin-left: auto;
  45. margin-right: auto;
  46. }
  47. & .image-style-align-right {
  48. float: right;
  49. margin-left: var(--ck-image-style-spacing);
  50. }
  51. }