UNPKG

3.82 kBSCSSView Raw
1.wp-block-gallery {
2 display: flex;
3 flex-wrap: wrap;
4 list-style-type: none;
5 padding: 0;
6
7 .blocks-gallery-image,
8 .blocks-gallery-item {
9 // Add space between thumbnails, and unset right most thumbnails later.
10 margin: 0 $grid-size-large $grid-size-large 0;
11 display: flex;
12 flex-grow: 1;
13 flex-direction: column;
14 justify-content: center;
15 position: relative;
16
17 figure {
18 margin: 0;
19 height: 100%;
20
21 // IE doesn't support flex so omit that.
22 @supports (position: sticky) {
23 display: flex;
24 align-items: flex-end;
25 justify-content: flex-start;
26 }
27 }
28
29 img {
30 display: block;
31 max-width: 100%;
32 height: auto;
33 }
34
35 // IE doesn't handle cropping, so we need an explicit width here.
36 img {
37 width: 100%;
38
39 // IE11 doesn't read rules inside this query. They are applied only to modern browsers.
40 @supports (position: sticky) {
41 width: auto;
42 }
43 }
44
45 figcaption {
46 position: absolute;
47 bottom: 0;
48 width: 100%;
49 max-height: 100%;
50 overflow: auto;
51 padding: 40px 10px 9px;
52 color: $white;
53 text-align: center;
54 font-size: $default-font-size;
55 background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
56
57 img {
58 display: inline;
59 }
60 }
61 }
62
63 // Cropped
64 &.is-cropped .blocks-gallery-image,
65 &.is-cropped .blocks-gallery-item {
66 a,
67 img {
68 // IE11 doesn't support object-fit, so just make sure images aren't skewed.
69 // The following rules are for all browsers.
70 width: 100%;
71
72 // IE11 doesn't read rules inside this query. They are applied only to modern browsers.
73 @supports (position: sticky) {
74 height: 100%;
75 flex: 1;
76 object-fit: cover;
77 }
78 }
79 }
80
81 // On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
82 & .blocks-gallery-image,
83 & .blocks-gallery-item {
84 width: calc((100% - #{ $grid-size-large }) / 2);
85
86 &:nth-of-type(even) {
87 margin-right: 0;
88 }
89 }
90
91 &.columns-1 .blocks-gallery-image,
92 &.columns-1 .blocks-gallery-item {
93 width: 100%;
94 margin-right: 0;
95 }
96
97 // Beyond mobile viewports, we allow up to 8 columns.
98 @include break-small {
99 @for $i from 3 through 8 {
100 &.columns-#{ $i } .blocks-gallery-image,
101 &.columns-#{ $i } .blocks-gallery-item {
102 width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i });
103 margin-right: 16px;
104
105 // Rules inside this query are only run by Microsoft Edge.
106 // Edge miscalculates `calc`, so we have to add some buffer.
107 // See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15637241/
108 @supports (-ms-ime-align:auto) {
109 width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i } - 1px);
110 }
111 }
112 }
113
114 // Unset the right margin on every rightmost gallery item to ensure center balance.
115 @for $column-count from 1 through 8 {
116 &.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
117 &.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
118 margin-right: 0;
119 }
120 }
121 }
122
123 // Last item always needs margins reset.
124 .blocks-gallery-image:last-child,
125 .blocks-gallery-item:last-child {
126 margin-right: 0;
127 }
128
129 // Make the "Add new Gallery item" button full-width (so it always appears
130 // below other items).
131 .blocks-gallery-item {
132 &.has-add-item-button {
133 width: 100%;
134 }
135 }
136
137 // Apply max-width to floated items that have no intrinsic width.
138 &.alignleft,
139 &.alignright {
140 max-width: $content-width / 2;
141 width: 100%;
142 }
143
144 // Keep the display property consistent when alignments are applied
145 // to preserve columns
146 &.alignleft,
147 &.aligncenter,
148 &.alignright {
149 display: flex;
150 }
151
152 // If the gallery is centered, center the content inside as well.
153 &.aligncenter {
154 .blocks-gallery-item figure {
155 justify-content: center;
156 }
157 }
158}