Commit | Line | Data |
---|---|---|
1223c43c | 1 | .tabularList { |
e2368a74 | 2 | border-bottom: 1px solid $wcfContentBorder; |
1223c43c AE |
3 | display: flex; |
4 | flex-direction: column; | |
5 | } | |
6 | ||
7 | .tabularListRow { | |
8 | flex: 0 0 auto; | |
9 | padding: 5px 0; | |
5bcef578 | 10 | transition: background-color .12s; |
1223c43c AE |
11 | |
12 | &.divider + li:not(.divider) { | |
e2368a74 | 13 | border-top-color: $wcfContentBorder; |
4eb2df9a MW |
14 | } |
15 | ||
16 | &:not(.tabularListRowHead):hover { | |
17 | background-color: $wcfTabularBoxBackgroundActive; | |
1223c43c AE |
18 | } |
19 | } | |
20 | ||
21 | .tabularListRowHead { | |
22 | border-bottom: 2px solid currentColor; | |
23 | color: $wcfTabularBoxHeadline; | |
24 | ||
25 | & + li { | |
a04cf0be | 26 | border-top-width: 0 !important; |
f2b50825 | 27 | } |
1223c43c AE |
28 | } |
29 | ||
30 | .tabularListRow:not(.tabularListRowHead) { | |
31 | border-top: 1px solid $wcfContentBorderInner; | |
32 | } | |
33 | ||
34 | .tabularListColumns { | |
35 | align-items: center; | |
36 | display: flex; | |
f2b50825 | 37 | |
1223c43c AE |
38 | > li { |
39 | flex: 0 0 auto; | |
40 | padding: 5px 10px; | |
41 | } | |
42 | } | |
43 | ||
44 | .tabularListRowHead > .tabularListColumns > li { | |
95961bdf MW |
45 | color: $wcfTabularBoxHeadline; |
46 | ||
5908f54f | 47 | @include wcfFontHeadline; |
95961bdf | 48 | |
1223c43c AE |
49 | > a { |
50 | color: $wcfTabularBoxHeadline; | |
51 | display: block; | |
1223c43c AE |
52 | } |
53 | ||
54 | &.ASC > a, | |
55 | &.DESC > a { | |
e5359fe5 | 56 | padding-right: 18px; |
1223c43c AE |
57 | position: relative; |
58 | ||
59 | &:after { | |
60 | display: inline-block; | |
61 | font-family: FontAwesome; | |
62 | margin-left: 7px; | |
63 | position: absolute; | |
f2b50825 AE |
64 | } |
65 | } | |
1223c43c AE |
66 | |
67 | &.ASC > a:after { | |
68 | content: $fa-var-caret-up; | |
69 | top: 1px; | |
70 | } | |
71 | ||
72 | &.DESC > a:after { | |
73 | content: $fa-var-caret-down; | |
74 | top: 2px; | |
75 | } | |
76 | ||
77 | &.active > a, | |
78 | > a:hover { | |
79 | color: $wcfTabularBoxHeadlineActive; | |
80 | } | |
f2b50825 AE |
81 | } |
82 | ||
41b3c285 | 83 | .tabularBox { |
e4efcaa5 | 84 | overflow: auto; |
41b3c285 AE |
85 | } |
86 | ||
f2b50825 AE |
87 | .tabularBoxTitle { |
88 | > header { | |
89 | border-bottom: 1px solid currentColor; | |
90 | color: $wcfTabularBoxHeadline; | |
91 | padding: 10px 0; | |
92 | ||
93 | > h1, | |
94 | > h2, | |
95 | > h3 { | |
5908f54f | 96 | @include wcfFontHeadline; |
eb5de306 MW |
97 | |
98 | + small { | |
99 | display: block; | |
100 | } | |
95961bdf MW |
101 | |
102 | .badge { | |
103 | top: -2px; | |
104 | } | |
f2b50825 AE |
105 | } |
106 | ||
107 | a, | |
108 | .icon { | |
109 | color: $wcfTabularBoxHeadline; | |
110 | ||
111 | &:hover { | |
112 | color: $wcfTabularBoxHeadlineActive; | |
113 | } | |
114 | } | |
115 | ||
116 | .collapsibleButton { | |
117 | cursor: pointer; | |
5bcef578 | 118 | transition: transform .12s linear; |
f2b50825 AE |
119 | } |
120 | } | |
121 | } | |
122 | ||
f2b50825 | 123 | /* table */ |
ccf5f5f2 | 124 | .htmlContent table, |
f2b50825 | 125 | .table { |
ed0e809d | 126 | border-bottom: 1px solid $wcfContentBorder; |
f2b50825 AE |
127 | border-spacing: 0; |
128 | width: 100%; | |
129 | ||
130 | td, | |
131 | th { | |
132 | padding: 10px; | |
fe8a3e1b | 133 | text-align: left; |
f2b50825 | 134 | vertical-align: middle; |
15667de3 | 135 | |
f2b50825 AE |
136 | > label { |
137 | cursor: pointer; | |
138 | display: block; | |
139 | } | |
140 | } | |
141 | ||
142 | th { | |
143 | border-bottom: 2px solid currentColor; | |
95961bdf | 144 | color: $wcfTabularBoxHeadline; |
f2b50825 AE |
145 | text-align: left; |
146 | white-space: nowrap; | |
147 | ||
5908f54f | 148 | @include wcfFontHeadline; |
f2b50825 AE |
149 | |
150 | > a { | |
151 | color: $wcfTabularBoxHeadline; | |
152 | display: block; | |
153 | } | |
154 | ||
155 | &.active > a, | |
156 | > a:hover { | |
157 | color: $wcfTabularBoxHeadlineActive; | |
158 | } | |
159 | ||
160 | &.ASC, | |
161 | &.DESC { | |
162 | > a::after { | |
163 | display: inline-block; | |
164 | font-family: FontAwesome; | |
165 | margin-left: 5px; | |
166 | } | |
167 | } | |
168 | ||
169 | &.ASC > a::after { | |
170 | content: $fa-var-caret-up; | |
171 | } | |
172 | ||
173 | &.DESC > a::after { | |
174 | content: $fa-var-caret-down; | |
175 | } | |
176 | ||
177 | /* alignment only */ | |
178 | &.columnMark, | |
179 | &.columnStatus { | |
180 | text-align: center; | |
181 | } | |
182 | ||
183 | &.columnDate, | |
184 | &.columnDigits, | |
185 | &.columnID { | |
186 | text-align: right; | |
187 | } | |
188 | } | |
189 | ||
190 | td { | |
191 | &.columnMark, | |
192 | &.columnStatus { | |
193 | text-align: center; | |
194 | width: 1px; | |
195 | white-space: nowrap; | |
196 | word-wrap: normal; | |
197 | } | |
198 | ||
199 | &.columnDigits, | |
200 | &.columnID { | |
201 | text-align: right; | |
202 | width: 1px; | |
203 | white-space: nowrap; | |
204 | word-wrap: normal; | |
205 | } | |
206 | ||
207 | &.columnIcon { | |
208 | text-align: left; | |
209 | width: 1px; | |
210 | white-space: nowrap; | |
211 | word-wrap: normal; | |
212 | } | |
213 | ||
214 | &.columnTitle { | |
215 | font-weight: bold; | |
216 | text-align: left; | |
217 | } | |
218 | ||
219 | &.columnText { | |
220 | font-weight: normal; | |
221 | text-align: left; | |
222 | max-width: 20%; | |
223 | } | |
224 | ||
225 | &.columnDate { | |
f2b50825 AE |
226 | text-align: right; |
227 | width: 1px; | |
228 | white-space: nowrap; | |
229 | word-wrap: normal; | |
945f563e | 230 | |
5908f54f | 231 | @include wcfFontSmall; |
f2b50825 AE |
232 | } |
233 | ||
234 | &.columnURL, &.columnSmallText { | |
f2b50825 | 235 | text-align: left; |
945f563e | 236 | |
5908f54f | 237 | @include wcfFontSmall; |
4c1154f9 MW |
238 | } |
239 | ||
240 | &.columnTitle, | |
241 | &.columnText, | |
242 | &.columnURL, | |
243 | &.columnSmallText { | |
244 | @include screen-sm-down { | |
245 | min-width: 200px; | |
246 | } | |
247 | } | |
248 | ||
249 | &.columnIcon { | |
250 | @include screen-md-down { | |
4efb5f30 | 251 | :not(.button) > .icon16 { |
4c1154f9 MW |
252 | font-size: 18px; |
253 | height: 24px; | |
254 | line-height: 24px; | |
255 | width: 24px; | |
256 | } | |
257 | } | |
f2b50825 AE |
258 | } |
259 | } | |
260 | ||
261 | tr { | |
262 | &:hover > td { | |
263 | background-color: rgb(242, 242, 242); | |
264 | } | |
265 | ||
266 | &:not(:last-child) > td { | |
ed8c9052 | 267 | border-bottom: 1px solid $wcfContentBorderInner; |
f2b50825 AE |
268 | } |
269 | } | |
270 | ||
271 | .statusDisplay { | |
272 | float: right; | |
273 | ||
274 | .statusIcons { | |
275 | float: right; | |
276 | margin-left: 5px; | |
277 | ||
278 | li { | |
279 | display: inline-block; | |
280 | } | |
281 | } | |
282 | } | |
76695482 MW |
283 | |
284 | // table without header | |
285 | tbody:first-child > tr:first-child > td { | |
286 | border-top: 1px solid $wcfContentBorder; | |
287 | } | |
f2b50825 | 288 | } |