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