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