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