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