Commit | Line | Data |
---|---|---|
b9e122ff AE |
1 | .contentItemList { |
2 | display: flex; | |
3 | flex-wrap: wrap; | |
ecb2173f | 4 | margin: 0 0 -20px -20px; |
b9e122ff AE |
5 | } |
6 | ||
7 | .contentItem { | |
8 | background-color: $wcfContentBackground; | |
9 | border-radius: 3px; | |
8a52619a | 10 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); |
b9e122ff | 11 | display: flex; |
b9e122ff | 12 | flex-direction: column; |
ecb2173f | 13 | margin: 0 0 20px 20px; |
ebd7b480 | 14 | position: relative; |
b9e122ff AE |
15 | overflow: hidden; |
16 | } | |
17 | ||
b70900a1 | 18 | .contentItemSingleColumn { |
212264b7 AE |
19 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
20 | flex-grow: 0; | |
21 | flex-shrink: 0; | |
22 | flex-basis: calc(100% - 20px); | |
b70900a1 AE |
23 | } |
24 | ||
25 | .contentItemMultiColumn { | |
212264b7 AE |
26 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
27 | flex-grow: 0; | |
28 | flex-shrink: 0; | |
29 | flex-basis: calc(50% - 20px); | |
b70900a1 AE |
30 | } |
31 | ||
b9e122ff AE |
32 | .contentItemLink { |
33 | flex: 1 auto; | |
27a18c8b AE |
34 | } |
35 | ||
55508d81 MW |
36 | .contentItemTitleLink { |
37 | color: inherit; | |
38 | ||
39 | &::before { | |
40 | bottom: 0; | |
41 | content: ""; | |
42 | left: 0; | |
43 | position: absolute; | |
44 | right: 0; | |
45 | top: 0; | |
46 | } | |
47 | ||
48 | &:hover, | |
49 | &:focus { | |
50 | color: inherit; | |
51 | } | |
52 | } | |
53 | ||
54 | /* Deprecated: use contentItemTitleLink instead. */ | |
27a18c8b AE |
55 | .contentItemLinkShadow { |
56 | bottom: 0; | |
57 | left: 0; | |
58 | position: absolute; | |
59 | right: 0; | |
60 | top: 0; | |
b9e122ff AE |
61 | } |
62 | ||
63 | .contentItemContent { | |
b70900a1 AE |
64 | padding: 10px; |
65 | } | |
66 | ||
67 | .contentItemContentTruncate { | |
b9e122ff AE |
68 | max-height: 150px; |
69 | overflow: hidden; | |
b9e122ff | 70 | position: relative; |
8a52619a | 71 | |
b9e122ff AE |
72 | &::after { |
73 | background-image: linear-gradient(to top, $wcfContentBackground, transparent); | |
74 | bottom: 0; | |
75 | content: ""; | |
76 | height: 30px; | |
77 | left: 0; | |
78 | pointer-events: none; | |
79 | position: absolute; | |
80 | right: 0; | |
81 | /* The `top` value is important, because it prevents the last line from being affected | |
82 | when the content isn't too long. */ | |
83 | top: 120px; | |
84 | } | |
85 | } | |
86 | ||
87 | .contentItemImage { | |
88 | background-position: center; | |
89 | background-repeat: no-repeat; | |
90 | background-size: cover; | |
886f7f29 | 91 | padding: 10px; |
b9e122ff AE |
92 | position: relative; |
93 | } | |
94 | ||
b70900a1 | 95 | .contentItemImageSmall { |
886f7f29 | 96 | min-height: 75px; |
b70900a1 AE |
97 | } |
98 | ||
99 | .contentItemImageLarge { | |
886f7f29 | 100 | min-height: 150px; |
b70900a1 AE |
101 | } |
102 | ||
ebd7b480 AE |
103 | .contentItemBadges, |
104 | .contentItemOptions { | |
b9e122ff AE |
105 | align-items: flex-start; |
106 | display: flex; | |
107 | flex-direction: column; | |
ebd7b480 AE |
108 | } |
109 | ||
110 | .contentItemOptions { | |
886f7f29 | 111 | position: absolute; |
ebd7b480 | 112 | right: 10px; |
886f7f29 | 113 | top: 10px; |
ebd7b480 AE |
114 | z-index: 1; |
115 | } | |
116 | ||
117 | .contentItemBadge, | |
118 | .contentItemOption { | |
b9e122ff | 119 | flex: 0 auto; |
8a52619a | 120 | |
b9e122ff AE |
121 | &:not(:first-child) { |
122 | margin-top: 5px; | |
123 | } | |
124 | } | |
125 | ||
ebd7b480 AE |
126 | .contentItemBadge { |
127 | border: 1px solid currentColor; | |
128 | } | |
129 | ||
b70900a1 AE |
130 | .contentItemOption.button { |
131 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
132 | } | |
133 | ||
b9e122ff AE |
134 | .contentItemLabels { |
135 | margin-bottom: 5px; | |
136 | } | |
137 | ||
b70900a1 AE |
138 | .contentItemCategory { |
139 | color: $wcfContentDimmedText; | |
140 | text-transform: uppercase; | |
8a52619a | 141 | |
b70900a1 AE |
142 | @include wcfFontSmall; |
143 | } | |
144 | ||
b9e122ff AE |
145 | .contentItemTitle { |
146 | color: $wcfContentHeadlineLink; | |
8a52619a | 147 | |
b9e122ff AE |
148 | @include wcfFontHeadline; |
149 | @include wcfFontBold; | |
8a52619a | 150 | |
b9e122ff AE |
151 | &:hover { |
152 | color: $wcfContentHeadlineLinkActive; | |
153 | } | |
154 | } | |
155 | ||
156 | .contentItemDescription { | |
157 | color: $wcfContentText; | |
158 | margin-top: 10px; | |
8a52619a | 159 | |
4ec53064 MW |
160 | img { |
161 | height: auto !important; | |
162 | max-width: 100%; | |
163 | } | |
b9e122ff AE |
164 | } |
165 | ||
ebd7b480 AE |
166 | .contentItemContentLinks { |
167 | padding: 0 10px 10px 10px; | |
168 | } | |
169 | ||
b9e122ff AE |
170 | .contentItemMeta { |
171 | align-items: center; | |
172 | border-top: 1px solid $wcfContentBorderInner; | |
173 | color: $wcfContentDimmedText; | |
174 | display: flex; | |
175 | flex: 0 auto; | |
176 | padding: 10px; | |
8a52619a | 177 | |
b9e122ff AE |
178 | .icon { |
179 | color: inherit; | |
180 | } | |
181 | } | |
182 | ||
183 | .contentItemMetaImage { | |
184 | flex: 0 auto; | |
185 | margin-right: 10px; | |
186 | } | |
187 | ||
188 | .contentItemMetaContent { | |
189 | flex: 1 auto; | |
190 | font-size: 12px; | |
191 | } | |
192 | ||
193 | .contentItemMetaAuthor { | |
194 | color: $wcfContentText; | |
8a52619a | 195 | |
b9e122ff AE |
196 | a, |
197 | a:hover { | |
198 | color: inherit; | |
199 | } | |
200 | } | |
201 | ||
202 | .contentItemMetaIcons { | |
203 | display: flex; | |
204 | flex: 0 auto; | |
205 | margin-left: 10px; | |
206 | } | |
207 | ||
208 | .contentItemMetaIcon { | |
209 | flex: 0 auto; | |
8a52619a | 210 | |
b9e122ff AE |
211 | &:not(:first-child) { |
212 | margin-left: 10px; | |
213 | } | |
214 | } | |
215 | ||
702589e4 AE |
216 | .contentItemImagePreview { |
217 | border-radius: 3px; | |
8a52619a | 218 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); |
702589e4 AE |
219 | margin-bottom: 10px; |
220 | max-width: 100%; | |
221 | } | |
222 | ||
223 | .contentItemImagePreviewButtons { | |
224 | display: flex; | |
225 | flex-wrap: wrap; | |
226 | margin-left: -10px; | |
8a52619a | 227 | |
702589e4 AE |
228 | > .button { |
229 | flex: 0 auto; | |
230 | margin-left: 10px; | |
231 | } | |
8a52619a | 232 | |
702589e4 AE |
233 | > .innerError { |
234 | flex: 0 0 100%; | |
235 | margin-left: 10px; | |
236 | } | |
237 | } | |
238 | ||
b9e122ff AE |
239 | @include screen-lg { |
240 | /* There are no sidebars, use a three column layout. */ | |
68f87d16 MW |
241 | .content:first-child:last-child, |
242 | .boxesTop, | |
243 | .boxesBottom { | |
ecb2173f | 244 | .contentItemMultiColumn { |
212264b7 AE |
245 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
246 | flex-grow: 0; | |
247 | flex-shrink: 0; | |
248 | flex-basis: calc(100% / 3 - 20px); | |
b9e122ff AE |
249 | } |
250 | } | |
251 | } | |
252 | ||
253 | @include screen-md { | |
254 | /* The sidebar, if any, is not adjacent to the content, use a three column layout. */ | |
ecb2173f | 255 | .contentItemMultiColumn { |
212264b7 AE |
256 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
257 | flex-grow: 0; | |
258 | flex-shrink: 0; | |
259 | flex-basis: calc(100% / 3 - 20px); | |
b9e122ff AE |
260 | } |
261 | } | |
262 | ||
263 | @include screen-xs { | |
264 | /* There is not enough space to fit two columns. */ | |
265 | .contentItemList { | |
266 | display: block; | |
267 | } | |
8a52619a | 268 | |
ecb2173f | 269 | .contentItemMultiColumn { |
b9e122ff AE |
270 | max-width: none; |
271 | } | |
272 | } |