Commit | Line | Data |
---|---|---|
b8eab696 | 1 | .containerList > li { |
929f7e47 | 2 | position: relative; |
2c623ed6 | 3 | transition: background-color .2s; |
b8eab696 | 4 | |
f216765b AE |
5 | @include screen-md-down { |
6 | padding: 10px 0; | |
63e2f52f AE |
7 | } |
8 | ||
f216765b AE |
9 | @include screen-lg { |
10 | padding: 20px; | |
63e2f52f AE |
11 | } |
12 | ||
b8eab696 | 13 | &:not(:last-child) { |
e2368a74 MW |
14 | border-bottom: 1px solid $wcfContentBorderInner; |
15 | } | |
16 | ||
17 | &:first-child { | |
18 | border-top: 1px solid $wcfContentBorder; | |
19 | } | |
20 | ||
21 | &:last-child { | |
22 | border-bottom: 1px solid $wcfContentBorder; | |
b8eab696 AE |
23 | } |
24 | ||
929f7e47 MW |
25 | &:hover { |
26 | background-color: $wcfTabularBoxBackgroundActive; | |
27 | } | |
28 | ||
b8eab696 AE |
29 | &.showMore { |
30 | text-align: center; | |
929f7e47 MW |
31 | |
32 | &:hover { | |
33 | background-color: transparent; | |
34 | } | |
b8eab696 AE |
35 | } |
36 | ||
37 | .containerHeadline { | |
38 | position: relative; | |
39 | ||
40 | > .containerContentType { | |
e2368a74 | 41 | color: $wcfContentDimmedText; |
b8eab696 | 42 | position: absolute; |
e2368a74 | 43 | top: 5px; |
b8eab696 | 44 | right: 0; |
c68fa164 MW |
45 | |
46 | @include screen-xs { | |
47 | display: none; | |
48 | } | |
b8eab696 AE |
49 | } |
50 | } | |
929f7e47 | 51 | |
7dfd5afb MW |
52 | &.containerListButtonGroup { |
53 | text-align: right; | |
54 | ||
55 | &:hover { | |
56 | background-color: transparent; | |
57 | } | |
58 | ||
59 | > .buttonGroup { | |
60 | display: inline-flex; | |
61 | ||
62 | &:not(:first-child) { | |
63 | margin-left: 5px; | |
64 | } | |
65 | } | |
fde578c4 AE |
66 | |
67 | > .recentActivityFollowedNoResults { | |
68 | text-align: left; | |
69 | } | |
7dfd5afb MW |
70 | } |
71 | ||
f5ba6d2c AE |
72 | @include screen-md-down { |
73 | .hasMobileNavigation > .containerHeadline > h3 { | |
74 | padding-right: 30px; | |
75 | } | |
929f7e47 | 76 | |
f5ba6d2c AE |
77 | .buttonGroupNavigation { |
78 | position: absolute; | |
79 | right: 0; | |
80 | top: 14px; | |
929f7e47 | 81 | |
f5ba6d2c AE |
82 | &.open { |
83 | left: 0; | |
929f7e47 | 84 | |
0e18a1e4 AE |
85 | // dropdown is contained within this element, required to have it stand |
86 | // above any succeeding siblings | |
87 | z-index: 10; | |
88 | ||
f5ba6d2c AE |
89 | > .buttonList { |
90 | display: block; | |
91 | visibility: visible; | |
929f7e47 | 92 | } |
f5ba6d2c AE |
93 | } |
94 | ||
95 | > .dropdownLabel { | |
96 | left: calc(100% - 24px); | |
97 | position: relative; | |
98 | } | |
99 | ||
100 | > .buttonList { | |
9ae45102 | 101 | @include dropdownMenu; |
929f7e47 | 102 | |
f5ba6d2c AE |
103 | position: static !important; |
104 | top: 0; | |
105 | ||
106 | > li { | |
107 | .invisible { | |
108 | display: inline; | |
109 | padding-left: 5px; | |
929f7e47 MW |
110 | } |
111 | } | |
f5ba6d2c AE |
112 | } |
113 | } | |
114 | } | |
115 | ||
116 | @include screen-lg { | |
117 | .buttonGroupNavigation { | |
118 | opacity: 0; | |
119 | position: absolute; | |
120 | right: 20px; | |
063c5fc0 | 121 | top: 15px; |
f5ba6d2c AE |
122 | transition: opacity .12s; |
123 | ||
3f1e37b5 AE |
124 | > .dropdownLabel { |
125 | display: none; | |
126 | } | |
127 | ||
f5ba6d2c AE |
128 | > ul { |
129 | background-color: $wcfContentBackground; | |
130 | border: 1px solid rgba(0, 0, 0, .15); | |
131 | border-radius: 6px; | |
929f7e47 | 132 | |
f5ba6d2c AE |
133 | > li { |
134 | margin-right: 0; | |
135 | ||
136 | &:not(:last-child) { | |
137 | border-right: 1px solid rgba(0, 0, 0, .15); | |
138 | } | |
139 | ||
929f7e47 | 140 | > a { |
f5ba6d2c AE |
141 | display: inline-block; |
142 | padding: 3px 5px; | |
143 | ||
d8684224 AE |
144 | > .icon, |
145 | > .invisible { | |
f5ba6d2c AE |
146 | color: rgba(0, 0, 0, .5); |
147 | } | |
148 | } | |
149 | ||
150 | &.active, | |
151 | &:hover { | |
152 | > a { | |
d8684224 AE |
153 | > .icon, |
154 | > .invisible { | |
f5ba6d2c AE |
155 | color: $wcfContentText; |
156 | } | |
929f7e47 MW |
157 | } |
158 | } | |
159 | } | |
160 | } | |
161 | } | |
f5ba6d2c AE |
162 | |
163 | &:hover .buttonGroupNavigation { | |
164 | opacity: 1; | |
165 | } | |
929f7e47 | 166 | } |
b8eab696 AE |
167 | } |
168 | ||
169 | .containerBoxList { | |
f216765b AE |
170 | @include screen-sm-down { |
171 | &.doubleColumned, | |
172 | &.tripleColumned { | |
173 | > li + li { | |
174 | margin-top: 10px; | |
175 | } | |
176 | } | |
177 | } | |
178 | ||
179 | @include screen-md-up { | |
63e2f52f AE |
180 | &.doubleColumned, |
181 | &.tripleColumned { | |
182 | display: flex; | |
183 | flex-wrap: wrap; | |
184 | margin-bottom: -15px; | |
95961bdf | 185 | |
63e2f52f | 186 | > li { |
95961bdf | 187 | overflow: hidden; |
63e2f52f AE |
188 | padding-right: 15px; |
189 | margin-bottom: 15px; | |
95961bdf | 190 | |
63e2f52f | 191 | .containerBoxContent { |
95961bdf | 192 | overflow: hidden; |
63e2f52f AE |
193 | |
194 | h3 { | |
195 | overflow: hidden; | |
196 | text-overflow: ellipsis; | |
197 | white-space: nowrap; | |
198 | } | |
95961bdf MW |
199 | } |
200 | } | |
b8eab696 | 201 | } |
63e2f52f AE |
202 | |
203 | &.doubleColumned > li { | |
204 | flex: 0 0 50%; | |
ce280017 | 205 | max-width: 50%; |
63e2f52f AE |
206 | } |
207 | ||
208 | &.tripleColumned > li { | |
209 | flex: 0 0 calc(100% / 3); | |
210 | /* work-around for IE10 */ | |
211 | width: calc(100% / 3); | |
212 | } | |
b8eab696 | 213 | } |
b8eab696 | 214 | } |
5d8f8836 MW |
215 | |
216 | .recentActivityList { | |
217 | .box48 { | |
218 | max-height: 500px; | |
219 | overflow: hidden; | |
220 | } | |
221 | } | |
f32b3ddd G |
222 | |
223 | .flexibleCategoryList { | |
224 | position: relative; | |
225 | ||
226 | > li { | |
227 | margin-bottom: 14px; | |
228 | ||
229 | > ol { | |
230 | margin-left: 21px; | |
231 | } | |
232 | ||
233 | > ol > li > ol { | |
234 | margin-bottom: 7px; | |
235 | margin-left: 21px; | |
236 | ||
237 | > li { | |
238 | font-size: $wcfFontSizeSmall; | |
239 | } | |
240 | } | |
241 | } | |
242 | } | |
243 | ||
244 | @include screen-md-up { | |
245 | .flexibleCategoryList:not(.flexibleCategoryListDisabled) { | |
246 | /* WebKit */ | |
247 | -webkit-column-count: 2; | |
248 | ||
249 | /* Firefox */ | |
250 | -moz-column-count: 2; | |
251 | ||
252 | /* CSS 3 / Internet Explorer */ | |
253 | column-count: 2; | |
254 | ||
255 | > li { | |
256 | /* WebKit */ | |
257 | -webkit-column-break-inside: avoid; | |
258 | ||
259 | /* CSS 3 / Internet Explorer */ | |
260 | break-inside: avoid; | |
261 | ||
262 | > ol > li > ol { | |
263 | font-size: 0; | |
264 | ||
265 | > li { | |
266 | display: inline-block; | |
267 | } | |
268 | } | |
269 | } | |
270 | } | |
271 | ||
272 | /* Firefox */ | |
273 | @-moz-document url-prefix() { | |
274 | .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li { | |
275 | display: block; | |
276 | overflow: hidden; | |
277 | } | |
278 | } | |
279 | } | |
b03aa025 MW |
280 | |
281 | @include screen-md-down { | |
282 | .styleList > li { | |
283 | padding: 10px; | |
284 | } | |
285 | } |