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