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 { | |
26 | border-top-width: 0; | |
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 { |
f216765b | 84 | @include screen-sm-down { |
41b3c285 AE |
85 | overflow: auto; |
86 | } | |
87 | } | |
88 | ||
f2b50825 AE |
89 | .tabularBoxTitle { |
90 | > header { | |
91 | border-bottom: 1px solid currentColor; | |
92 | color: $wcfTabularBoxHeadline; | |
93 | padding: 10px 0; | |
94 | ||
95 | > h1, | |
96 | > h2, | |
97 | > h3 { | |
5908f54f | 98 | @include wcfFontHeadline; |
eb5de306 MW |
99 | |
100 | + small { | |
101 | display: block; | |
102 | } | |
95961bdf MW |
103 | |
104 | .badge { | |
105 | top: -2px; | |
106 | } | |
f2b50825 AE |
107 | } |
108 | ||
109 | a, | |
110 | .icon { | |
111 | color: $wcfTabularBoxHeadline; | |
112 | ||
113 | &:hover { | |
114 | color: $wcfTabularBoxHeadlineActive; | |
115 | } | |
116 | } | |
117 | ||
118 | .collapsibleButton { | |
119 | cursor: pointer; | |
5bcef578 | 120 | transition: transform .12s linear; |
f2b50825 AE |
121 | } |
122 | } | |
123 | } | |
124 | ||
f2b50825 | 125 | /* table */ |
ccf5f5f2 | 126 | .htmlContent table, |
f2b50825 | 127 | .table { |
ed0e809d | 128 | border-bottom: 1px solid $wcfContentBorder; |
f2b50825 AE |
129 | border-spacing: 0; |
130 | width: 100%; | |
131 | ||
132 | td, | |
133 | th { | |
134 | padding: 10px; | |
f2b50825 | 135 | vertical-align: middle; |
15667de3 MS |
136 | |
137 | &:not(.text-center):not(.text-right):not(.text-justify) { | |
138 | text-align: left; | |
139 | } | |
140 | ||
f2b50825 AE |
141 | > label { |
142 | cursor: pointer; | |
143 | display: block; | |
144 | } | |
145 | } | |
146 | ||
147 | th { | |
148 | border-bottom: 2px solid currentColor; | |
95961bdf | 149 | color: $wcfTabularBoxHeadline; |
f2b50825 AE |
150 | text-align: left; |
151 | white-space: nowrap; | |
152 | ||
5908f54f | 153 | @include wcfFontHeadline; |
f2b50825 AE |
154 | |
155 | > a { | |
156 | color: $wcfTabularBoxHeadline; | |
157 | display: block; | |
158 | } | |
159 | ||
160 | &.active > a, | |
161 | > a:hover { | |
162 | color: $wcfTabularBoxHeadlineActive; | |
163 | } | |
164 | ||
165 | &.ASC, | |
166 | &.DESC { | |
167 | > a::after { | |
168 | display: inline-block; | |
169 | font-family: FontAwesome; | |
170 | margin-left: 5px; | |
171 | } | |
172 | } | |
173 | ||
174 | &.ASC > a::after { | |
175 | content: $fa-var-caret-up; | |
176 | } | |
177 | ||
178 | &.DESC > a::after { | |
179 | content: $fa-var-caret-down; | |
180 | } | |
181 | ||
182 | /* alignment only */ | |
183 | &.columnMark, | |
184 | &.columnStatus { | |
185 | text-align: center; | |
186 | } | |
187 | ||
188 | &.columnDate, | |
189 | &.columnDigits, | |
190 | &.columnID { | |
191 | text-align: right; | |
192 | } | |
193 | } | |
194 | ||
195 | td { | |
196 | &.columnMark, | |
197 | &.columnStatus { | |
198 | text-align: center; | |
199 | width: 1px; | |
200 | white-space: nowrap; | |
201 | word-wrap: normal; | |
202 | } | |
203 | ||
204 | &.columnDigits, | |
205 | &.columnID { | |
206 | text-align: right; | |
207 | width: 1px; | |
208 | white-space: nowrap; | |
209 | word-wrap: normal; | |
210 | } | |
211 | ||
212 | &.columnIcon { | |
213 | text-align: left; | |
214 | width: 1px; | |
215 | white-space: nowrap; | |
216 | word-wrap: normal; | |
217 | } | |
218 | ||
219 | &.columnTitle { | |
220 | font-weight: bold; | |
221 | text-align: left; | |
222 | } | |
223 | ||
224 | &.columnText { | |
225 | font-weight: normal; | |
226 | text-align: left; | |
227 | max-width: 20%; | |
228 | } | |
229 | ||
230 | &.columnDate { | |
f2b50825 AE |
231 | text-align: right; |
232 | width: 1px; | |
233 | white-space: nowrap; | |
234 | word-wrap: normal; | |
945f563e | 235 | |
5908f54f | 236 | @include wcfFontSmall; |
f2b50825 AE |
237 | } |
238 | ||
239 | &.columnURL, &.columnSmallText { | |
f2b50825 | 240 | text-align: left; |
945f563e | 241 | |
5908f54f | 242 | @include wcfFontSmall; |
945f563e | 243 | |
f2b50825 AE |
244 | } |
245 | } | |
246 | ||
247 | tr { | |
248 | &:hover > td { | |
249 | background-color: rgb(242, 242, 242); | |
250 | } | |
251 | ||
252 | &:not(:last-child) > td { | |
ed8c9052 | 253 | border-bottom: 1px solid $wcfContentBorderInner; |
f2b50825 AE |
254 | } |
255 | } | |
256 | ||
257 | .statusDisplay { | |
258 | float: right; | |
259 | ||
260 | .statusIcons { | |
261 | float: right; | |
262 | margin-left: 5px; | |
263 | ||
264 | li { | |
265 | display: inline-block; | |
266 | } | |
267 | } | |
268 | } | |
76695482 MW |
269 | |
270 | // table without header | |
271 | tbody:first-child > tr:first-child > td { | |
272 | border-top: 1px solid $wcfContentBorder; | |
273 | } | |
f2b50825 | 274 | } |