UNPKG

1.45 kBSCSSView Raw
1.wp-block-image {
2 max-width: 100%;
3
4 // The image block is in a `figure` element, and many themes zero this out.
5 // This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
6 margin-bottom: 1em;
7
8 img {
9 max-width: 100%;
10 }
11
12 &.aligncenter {
13 text-align: center;
14 }
15
16 &.alignfull img,
17 &.alignwide img {
18 width: 100%;
19 }
20
21 // This resets the intrinsic margin on the figure in non-floated, wide, and full-wide alignments.
22 margin-left: 0;
23 margin-right: 0;
24
25 // Floats get an extra wrapping <div> element, so the <figure> becomes a child.
26 .alignleft,
27 .alignright,
28 .aligncenter,
29 &.is-resized {
30 display: table;
31
32 // The figure is born with left and right margin.
33 // We remove this by default, and then customize it for left, right, and center.
34 margin-left: 0;
35 margin-right: 0;
36
37 > figcaption {
38 display: table-caption;
39 caption-side: bottom;
40 }
41 }
42
43 .alignleft {
44 /*rtl:ignore*/
45 float: left;
46 /*rtl:ignore*/
47 margin-right: 1em;
48 }
49
50 .alignright {
51 /*rtl:ignore*/
52 float: right;
53 /*rtl:ignore*/
54 margin-left: 1em;
55 }
56
57 .aligncenter {
58 margin-left: auto;
59 margin-right: auto;
60 }
61
62 // Supply caption styles to images, even if the theme hasn't opted in.
63 // Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
64 // so we supply the styles so as to not appear broken or unstyled in those themes.
65 figcaption {
66 @include caption-style();
67 }
68}