Commit | Line | Data |
---|---|---|
b9e122ff AE |
1 | .contentItemList { |
2 | display: flex; | |
3 | flex-wrap: wrap; | |
4 | margin-bottom: -20px; | |
5 | justify-content: space-between; | |
6 | } | |
7 | ||
8 | .contentItem { | |
9 | background-color: $wcfContentBackground; | |
10 | border-radius: 3px; | |
11 | box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); | |
12 | display: flex; | |
b9e122ff AE |
13 | flex-direction: column; |
14 | margin-bottom: 20px; | |
ebd7b480 | 15 | position: relative; |
b9e122ff AE |
16 | overflow: hidden; |
17 | } | |
18 | ||
b70900a1 AE |
19 | .contentItemSingleColumn { |
20 | flex: 0 0 100%; | |
21 | } | |
22 | ||
23 | .contentItemMultiColumn { | |
24 | flex: 0 0 calc(50% - 10px); | |
25 | max-width: calc(50% - 10px); /* IE 11 */ | |
26 | } | |
27 | ||
b9e122ff AE |
28 | .contentItemLink { |
29 | flex: 1 auto; | |
30 | } | |
31 | ||
32 | .contentItemContent { | |
b70900a1 AE |
33 | padding: 10px; |
34 | } | |
35 | ||
36 | .contentItemContentTruncate { | |
b9e122ff AE |
37 | max-height: 150px; |
38 | overflow: hidden; | |
b9e122ff AE |
39 | position: relative; |
40 | ||
41 | &::after { | |
42 | background-image: linear-gradient(to top, $wcfContentBackground, transparent); | |
43 | bottom: 0; | |
44 | content: ""; | |
45 | height: 30px; | |
46 | left: 0; | |
47 | pointer-events: none; | |
48 | position: absolute; | |
49 | right: 0; | |
50 | /* The `top` value is important, because it prevents the last line from being affected | |
51 | when the content isn't too long. */ | |
52 | top: 120px; | |
53 | } | |
54 | } | |
55 | ||
56 | .contentItemImage { | |
57 | background-position: center; | |
58 | background-repeat: no-repeat; | |
59 | background-size: cover; | |
886f7f29 | 60 | padding: 10px; |
b9e122ff AE |
61 | position: relative; |
62 | } | |
63 | ||
b70900a1 | 64 | .contentItemImageSmall { |
886f7f29 | 65 | min-height: 75px; |
b70900a1 AE |
66 | } |
67 | ||
68 | .contentItemImageLarge { | |
886f7f29 | 69 | min-height: 150px; |
b70900a1 AE |
70 | } |
71 | ||
ebd7b480 AE |
72 | .contentItemBadges, |
73 | .contentItemOptions { | |
b9e122ff AE |
74 | align-items: flex-start; |
75 | display: flex; | |
76 | flex-direction: column; | |
ebd7b480 AE |
77 | } |
78 | ||
79 | .contentItemOptions { | |
886f7f29 | 80 | position: absolute; |
ebd7b480 | 81 | right: 10px; |
886f7f29 | 82 | top: 10px; |
ebd7b480 AE |
83 | z-index: 1; |
84 | } | |
85 | ||
86 | .contentItemBadge, | |
87 | .contentItemOption { | |
b9e122ff AE |
88 | flex: 0 auto; |
89 | ||
90 | &:not(:first-child) { | |
91 | margin-top: 5px; | |
92 | } | |
93 | } | |
94 | ||
ebd7b480 AE |
95 | .contentItemBadge { |
96 | border: 1px solid currentColor; | |
97 | } | |
98 | ||
b70900a1 AE |
99 | .contentItemOption.button { |
100 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); | |
101 | } | |
102 | ||
b9e122ff AE |
103 | .contentItemLabels { |
104 | margin-bottom: 5px; | |
105 | } | |
106 | ||
b70900a1 AE |
107 | .contentItemCategory { |
108 | color: $wcfContentDimmedText; | |
109 | text-transform: uppercase; | |
110 | ||
111 | @include wcfFontSmall; | |
112 | } | |
113 | ||
b9e122ff AE |
114 | .contentItemTitle { |
115 | color: $wcfContentHeadlineLink; | |
116 | ||
117 | @include wcfFontHeadline; | |
118 | @include wcfFontBold; | |
119 | ||
120 | &:hover { | |
121 | color: $wcfContentHeadlineLinkActive; | |
122 | } | |
123 | } | |
124 | ||
125 | .contentItemDescription { | |
126 | color: $wcfContentText; | |
127 | margin-top: 10px; | |
128 | } | |
129 | ||
ebd7b480 AE |
130 | .contentItemContentLinks { |
131 | padding: 0 10px 10px 10px; | |
132 | } | |
133 | ||
b9e122ff AE |
134 | .contentItemMeta { |
135 | align-items: center; | |
136 | border-top: 1px solid $wcfContentBorderInner; | |
137 | color: $wcfContentDimmedText; | |
138 | display: flex; | |
139 | flex: 0 auto; | |
140 | padding: 10px; | |
141 | ||
142 | .icon { | |
143 | color: inherit; | |
144 | } | |
145 | } | |
146 | ||
147 | .contentItemMetaImage { | |
148 | flex: 0 auto; | |
149 | margin-right: 10px; | |
150 | } | |
151 | ||
152 | .contentItemMetaContent { | |
153 | flex: 1 auto; | |
154 | font-size: 12px; | |
155 | } | |
156 | ||
157 | .contentItemMetaAuthor { | |
158 | color: $wcfContentText; | |
159 | ||
160 | a, | |
161 | a:hover { | |
162 | color: inherit; | |
163 | } | |
164 | } | |
165 | ||
166 | .contentItemMetaIcons { | |
167 | display: flex; | |
168 | flex: 0 auto; | |
169 | margin-left: 10px; | |
170 | } | |
171 | ||
172 | .contentItemMetaIcon { | |
173 | flex: 0 auto; | |
174 | ||
175 | &:not(:first-child) { | |
176 | margin-left: 10px; | |
177 | } | |
178 | } | |
179 | ||
180 | @include screen-lg { | |
181 | /* There are no sidebars, use a three column layout. */ | |
182 | .content:first-child:last-child { | |
183 | .contentItem { | |
184 | flex: 0 0 calc(100% / 3 - 15px); | |
185 | max-width: calc(100% / 3 - 15px); /* IE 11 */ | |
186 | } | |
187 | } | |
188 | } | |
189 | ||
190 | @include screen-md { | |
191 | /* The sidebar, if any, is not adjacent to the content, use a three column layout. */ | |
192 | .contentItem { | |
193 | flex: 0 0 calc(100% / 3 - 15px); | |
194 | max-width: calc(100% / 3 - 15px); /* IE 11 */ | |
195 | } | |
196 | } | |
197 | ||
198 | @include screen-xs { | |
199 | /* There is not enough space to fit two columns. */ | |
200 | .contentItemList { | |
201 | display: block; | |
202 | } | |
203 | ||
204 | .contentItem { | |
205 | max-width: none; | |
206 | } | |
207 | } |