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