wcfsetup/install/files/style/layout/content.scss

   1 /* style for content area */
   2 /* content header */
   3 .contentHeader,
   4 .boxHeadline { // deprecated
   5         color: $wcfContentHeadlineText;
   6
   7         .contentTitle,
   8         > h1 { // deprecated
   9                 @include wcfFontTitle;
  10
  11                 .badge {
  12                         top: -2px;
  13
  14                         @include wcfLineHeight;
  15                 }
  16
  17                 a {
  18                         color: $wcfContentHeadlineLink;
  19
  20                         &:hover {
  21                                 color: $wcfContentHeadlineLinkActive;
  22                         }
  23                 }
  24         }
  25 }
  26
  27 .contentHeader {
  28         .contentHeaderDescription {
  29                 color: $wcfContentDimmedText;
  30                 margin-top: 5px;
  31         }
  32
  33         .contentHeaderMetaData {
  34                 color: $wcfContentDimmedText;
  35                 margin-top: 5px;
  36
  37                 &.inlineList {
  38                         > li:not(:last-child) {
  39                                 margin-right: 10px;
  40                         }
  41                 }
  42
  43                 > li {
  44                         a,
  45                         a:hover,
  46                         .icon {
  47                                 color: $wcfContentDimmedText;
  48                         }
  49                 }
  50         }
  51
  52         .contentTitle + .inlineDataList {
  53                 margin-top: 5px;
  54         }
  55
  56         .inlineDataList {
  57                 color: $wcfContentDimmedText;
  58         }
  59
  60         @include screen-sm-down {
  61                 .contentHeaderIcon {
  62                         display: none;
  63                 }
  64         }
  65
  66         @include screen-sm {
  67                 .contentHeaderNavigation > ul {
  68                         @include inlineList;
  69
  70                         justify-content: flex-end;
  71                         margin-top: 20px;
  72                 }
  73         }
  74
  75         @include screen-md-up {
  76                 display: flex;
  77                 align-items: flex-start;
  78
  79                 .contentHeaderIcon {
  80                         flex: 0 0 64px;
  81                         margin-right: 15px
  82                 }
  83
  84                 .contentHeaderTitle {
  85                         flex: 1 1 0%;
  86                 }
  87
  88                 .contentHeaderNavigation {
  89                         flex: 0 0 auto;
  90                         margin-left: 15px;
  91                         max-width: 50%;
  92
  93                         > ul {
  94                                 @include inlineList;
  95
  96                                 flex-wrap: wrap;
  97                                 justify-content: flex-end;
  98                                 margin-top: -5px;
  99
 100                                 > li {
 101                                         margin-top: 5px;
 102
 103                                         &:not(:last-child) {
 104                                                 margin-right: 0;
 105                                         }
 106
 107                                         &:not(:first-child) {
 108                                                 margin-left: 5px;
 109                                         }
 110                                 }
 111                         }
 112                 }
 113         }
 114 }
 115
 116 /* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
 117 .boxHeadline.boxSubHeadline {
 118         margin-top: 40px;
 119         margin-bottom: 20px;
 120
 121         > h2 {
 122                 color: $wcfContentHeadlineText;
 123
 124                 @include wcfFontSection;
 125
 126                 a {
 127                         color: $wcfContentHeadlineLink;
 128
 129                         &:hover {
 130                                 color: $wcfContentHeadlineLinkActive;
 131                         }
 132                 }
 133
 134                 .badge {
 135                         top: -2px;
 136                 }
 137         }
 138 }
 139
 140 /* content sections */
 141 .section {
 142         margin-top: 40px;
 143
 144         > :first-child {
 145                 margin-top: 0;
 146         }
 147
 148         .sectionTitle {
 149                 color: $wcfContentHeadlineText;
 150
 151                 @include wcfFontSection;
 152
 153                 a {
 154                         color: $wcfContentHeadlineLink;
 155
 156                         &:hover {
 157                                 color: $wcfContentHeadlineLinkActive;
 158                         }
 159                 }
 160
 161                 .badge {
 162                         top: -2px;
 163                 }
 164         }
 165
 166         .sectionDescription {
 167                 color: $wcfContentDimmedText;
 168         }
 169
 170         > .sectionHeader,
 171         > .sectionTitle {
 172                 margin-bottom: 20px;
 173
 174                 + .section {
 175                         margin-top: 20px;
 176                 }
 177         }
 178
 179         &:not(.sectionContainerList) {
 180                 > .sectionHeader,
 181                 > .sectionTitle {
 182                         border-bottom: 1px solid $wcfContentBorderInner;
 183                         padding-bottom: 10px;
 184                 }
 185         }
 186
 187         &.sectionContainerList {
 188                 > .sectionHeader,
 189                 > .sectionTitle {
 190                         margin-bottom: 10px;
 191                 }
 192         }
 193
 194         &.tabularBox {
 195                 > .sectionHeader,
 196                 > .sectionTitle {
 197                         border-color: $wcfContentBorder;
 198                         margin-bottom: 0;
 199                 }
 200         }
 201
 202         .section {
 203                 margin-top: 30px;
 204
 205                 &:first-child {
 206                         margin-top: 20px;
 207                 }
 208
 209                 .sectionTitle {
 210                         @include wcfFontHeadline;
 211                 }
 212
 213                 > .sectionHeader,
 214                 > .sectionTitle {
 215                         margin-bottom: 15px;
 216                 }
 217         }
 218 }
 219
 220 /* fieldset styling (old sections / deprecated) */
 221 fieldset {
 222         margin-top: 40px;
 223
 224         > legend {
 225                 border-bottom: 1px solid $wcfContentBorderInner;
 226                 color: $wcfContentHeadlineText;
 227                 float: left;
 228                 margin-bottom: 20px;
 229                 padding-bottom: 10px;
 230                 width: 100%;
 231
 232                 @include wcfFontSection;
 233
 234                 a {
 235                         color: $wcfContentHeadlineLink;
 236
 237                         &:hover {
 238                                 color: $wcfContentHeadlineLinkActive;
 239                         }
 240                 }
 241
 242                 .badge {
 243                         top: -2px;
 244                 }
 245
 246                 &+ * {
 247                         clear: left;
 248                 }
 249
 250                 + small {
 251                         color: $wcfContentDimmedText;
 252                         position: relative;
 253                         top: -12px;
 254                 }
 255         }
 256 }
 257 .section {
 258         fieldset {
 259                 margin-top: 20px;
 260
 261                 > legend {
 262                         margin-bottom: 15px;
 263
 264                         @include wcfFontHeadline;
 265                 }
 266         }
 267 }
 268
 269 /* styling for container headlines */
 270 .containerHeadline {
 271         > h3 {
 272                 @include wcfFontHeadline;
 273
 274                 > .badge {
 275                         top: -2px;
 276                 }
 277         }
 278
 279         ~ .containerContent {
 280                 margin-top: 10px;
 281         }
 282 }
 283
 284 /* DEPRECATED: styling for content navigation area (containing pagination / page buttons) */
 285 .contentNavigation {
 286         & + .section {
 287                 margin-top: 30px;
 288         }
 289
 290         @include screen-sm-down {
 291                 ul {
 292                         margin-top: 30px;
 293
 294                         > li {
 295                                 > .button {
 296                                         display: block;
 297                                         padding: 7px 10px;
 298                                         text-align: center;
 299                                 }
 300                         }
 301                 }
 302
 303                 > nav:not(.pagination) > ul > li + li {
 304                         margin-top: 10px;
 305                 }
 306         }
 307
 308         @include screen-md-up {
 309                 align-items: center;
 310                 display: flex;
 311
 312                 // align <nav> to the right side
 313                 justify-content: flex-end;
 314
 315                 > nav {
 316                         flex: 0 0 auto;
 317                         margin-top: 30px;
 318                         order: 3;
 319
 320                         &.pagination {
 321                                 order: 1;
 322
 323                                 // use up maximum space, causing it to stick to the left while all other
 324                                 // <nav> elements will still be aligned to the right side
 325                                 flex: 1 1 auto;
 326                         }
 327
 328                         &.jsClipboardEditor {
 329                                 margin-right: 5px;
 330                                 order: 2;
 331                         }
 332
 333                         & + nav {
 334                                 flex: 0 0 auto;
 335                         }
 336
 337                         &:not(.pagination) {
 338                                 text-align: right;
 339                         }
 340                 }
 341
 342                 ul {
 343                         display: inline-flex;
 344
 345                         > li {
 346                                 flex: 0 0 auto;
 347
 348                                 &:not(:last-child) {
 349                                         margin-right: 5px;
 350                                 }
 351                         }
 352                 }
 353         }
 354 }
 355
 356 .paginationTop {
 357         margin-top: 40px;
 358
 359         & + .section {
 360                 margin-top: 20px;
 361         }
 362 }
 363
 364 .paginationBottom {
 365         margin-top: 20px;
 366 }
 367
 368 .contentFooter {
 369         @include screen-xs {
 370                 > .contentFooterNavigation {
 371                         margin-top: 20px;
 372
 373                         > ul > li {
 374                                 &:not(:first-child) {
 375                                         margin-top: 10px;
 376                                 }
 377                         }
 378
 379                         .button {
 380                                 display: block;
 381                                 padding: 7px 10px;
 382                                 text-align: center;
 383
 384                                 &:not(:first-child) {
 385                                         margin-top: 10px;
 386                                 }
 387                         }
 388                 }
 389         }
 390
 391         @include screen-sm-up {
 392                 display: flex;
 393
 394                 > .paginationBottom {
 395                         flex: 0 0 auto;
 396                 }
 397
 398                 > .contentFooterNavigation {
 399                         flex: 1 1 auto;
 400                         margin: 20px 0 0 20px;
 401                         text-align: right;
 402
 403                         > ul {
 404                                 @include inlineList;
 405
 406                                 display: inline-flex;
 407                                 flex-wrap: nowrap;
 408                         }
 409                 }
 410         }
 411 }
 412
 413 /* content navigation buttons */
 414 @include screen-xs {
 415         .contentHeader > .contentHeaderNavigation > ul {
 416                 margin-top: 30px;
 417
 418                 > li {
 419                         &:not(:first-child) {
 420                                 margin-top: 10px;
 421                         }
 422
 423                         > .button {
 424                                 display: block;
 425                                 padding: 7px 10px;
 426                                 text-align: center;
 427
 428                                 > .invisible {
 429                                         display: inline;
 430                                 }
 431                         }
 432                 }
 433         }
 434 }
 435
 436 @include screen-sm-down {
 437         body:not(.mobileShowPaginationTop) {
 438                 .paginationTop {
 439                         display: none;
 440
 441                         & + .section {
 442                                 margin-top: 30px;
 443                         }
 444                 }
 445         }
 446
 447         /* DEPRECATED */
 448         .contentNavigation > .pagination {
 449                 display: none;
 450         }
 451
 452         /* DEPRECATED */
 453         .section ~ .contentNavigation > .pagination {
 454                 display: block;
 455
 456                 & + nav {
 457                         // gap between pagination and navigation buttons
 458                         margin-top: 10px;
 459                 }
 460         }
 461 }
 462
 463 /* sidebar galore */
 464 @include screen-lg {
 465         .sidebar + .content:not(:last-child) {
 466                 .contentHeaderNavigation {
 467                         flex: 1 1 0%;
 468
 469                         > ul {
 470                                 flex-wrap: wrap !important;
 471                                 justify-content: flex-end;
 472                         }
 473                 }
 474         }
 475 }