wcfsetup/install/files/style/ui/tabularBox.scss

   1 .tabularList {
   2         border-bottom: 1px solid $wcfContentBorder;
   3         display: flex;
   4         flex-direction: column;
   5 }
   6
   7 .tabularListRow {
   8         flex: 0 0 auto;
   9         padding: 5px 0;
  10         transition: background-color .12s;
  11
  12         &.divider + li:not(.divider) {
  13                 border-top-color: $wcfContentBorder;
  14         }
  15
  16         &:not(.tabularListRowHead):hover {
  17                 background-color: $wcfTabularBoxBackgroundActive;
  18         }
  19 }
  20
  21 .tabularListRowHead {
  22         border-bottom: 2px solid currentColor;
  23         color: $wcfTabularBoxHeadline;
  24
  25         & + li {
  26                 border-top-width: 0 !important;
  27         }
  28 }
  29
  30 .tabularListRow:not(.tabularListRowHead) {
  31         border-top: 1px solid $wcfContentBorderInner;
  32 }
  33
  34 .tabularListColumns {
  35         align-items: center;
  36         display: flex;
  37
  38         > li {
  39                 flex: 0 0 auto;
  40                 padding: 5px 10px;
  41         }
  42 }
  43
  44 .tabularListRowHead > .tabularListColumns > li {
  45         color: $wcfTabularBoxHeadline;
  46
  47         @include wcfFontHeadline;
  48
  49         > a {
  50                 color: $wcfTabularBoxHeadline;
  51                 display: block;
  52         }
  53
  54         &.ASC > a,
  55         &.DESC > a {
  56                 padding-right: 18px;
  57                 position: relative;
  58
  59                 &:after {
  60                         display: inline-block;
  61                         font-family: FontAwesome;
  62                         margin-left: 7px;
  63                         position: absolute;
  64                 }
  65         }
  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         }
  81 }
  82
  83 .tabularBox {
  84         overflow: auto;
  85 }
  86
  87 .tabularBoxTitle {
  88         > header {
  89                 border-bottom: 1px solid currentColor;
  90                 color: $wcfTabularBoxHeadline;
  91                 padding: 10px 0;
  92
  93                 > h1,
  94                 > h2,
  95                 > h3 {
  96                         @include wcfFontHeadline;
  97
  98                         + small {
  99                                 display: block;
 100                         }
 101
 102                         .badge {
 103                                 top: -2px;
 104                         }
 105                 }
 106
 107                 a,
 108                 .icon {
 109                         color: $wcfTabularBoxHeadline;
 110
 111                         &:hover {
 112                                 color: $wcfTabularBoxHeadlineActive;
 113                         }
 114                 }
 115
 116                 .collapsibleButton {
 117                         cursor: pointer;
 118                         transition: transform .12s linear;
 119                 }
 120         }
 121 }
 122
 123 /* table */
 124 .htmlContent table,
 125 .table {
 126         border-bottom: 1px solid $wcfContentBorder;
 127         border-spacing: 0;
 128         width: 100%;
 129
 130         td,
 131         th {
 132                 padding: 10px;
 133                 text-align: left;
 134                 vertical-align: middle;
 135
 136                 > label {
 137                         cursor: pointer;
 138                         display: block;
 139                 }
 140         }
 141
 142         th {
 143                 border-bottom: 2px solid currentColor;
 144                 color: $wcfTabularBoxHeadline;
 145                 text-align: left;
 146                 white-space: nowrap;
 147
 148                 @include wcfFontHeadline;
 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: 600;
 216                         text-align: left;
 217                 }
 218
 219                 &.columnText {
 220                         font-weight: normal;
 221                         text-align: left;
 222                         max-width: 20%;
 223                 }
 224
 225                 &.columnDate {
 226                         text-align: right;
 227                         width: 1px;
 228                         white-space: nowrap;
 229                         word-wrap: normal;
 230
 231                         @include wcfFontSmall;
 232                 }
 233
 234                 &.columnURL, &.columnSmallText {
 235                         text-align: left;
 236
 237                         @include wcfFontSmall;
 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 {
 251                                 :not(.button) > .icon16,
 252                                 > .icon16 {
 253                                         font-size: 18px;
 254                                         height: 24px;
 255                                         line-height: 24px;
 256                                         width: 24px;
 257                                 }
 258                         }
 259                 }
 260         }
 261
 262         tr {
 263                 &:hover > td {
 264                         background-color: rgb(242, 242, 242);
 265                 }
 266
 267                 &:not(:last-child) > td:not(.lastRow) {
 268                         border-bottom: 1px solid $wcfContentBorderInner;
 269                 }
 270         }
 271
 272         .statusDisplay {
 273                 float: right;
 274
 275                 .statusIcons {
 276                         float: right;
 277                         margin-left: 5px;
 278
 279                         li {
 280                                 display: inline-block;
 281                         }
 282                 }
 283         }
 284
 285         // table without header
 286         tbody:first-child > tr:first-child > td {
 287                 border-top: 1px solid $wcfContentBorder;
 288         }
 289 }