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