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

   1 /* default styling for all boxes */
   2 .box {
   3         box-sizing: border-box;
   4 }
   5
   6 .boxImage {
   7         img {
   8                 max-width: 100%;
   9         }
  10 }
  11
  12 .boxTitle {
  13         @include wcfFontHeadline;
  14
  15         & + .boxContent {
  16                 margin-top: 20px;
  17         }
  18
  19         .badge {
  20                 top: -2px;
  21         }
  22 }
  23
  24 .boxContent {
  25         & + .boxContent {
  26                 margin-top: 20px;
  27         }
  28 }
  29
  30 .boxContent {
  31         & + .boxTitle {
  32                 margin-top: 30px;
  33         }
  34 }
  35
  36 .boxContentSeparator {
  37         background: $wcfContentBorderInner;
  38         border: 0;
  39         height: 1px;
  40         margin: 30px auto;
  41         width: 60%;
  42 }
  43
  44 /* styling for boxes in <hero> position */
  45 .boxesHero {
  46         .boxContainer {
  47                 @include screen-md-down {
  48                         padding: 40px 0;
  49                 }
  50
  51                 @include screen-lg {
  52                         padding: 60px 0;
  53                 }
  54         }
  55
  56         .box {
  57                 text-align: center;
  58
  59                 &:not(:last-child) {
  60                         @include screen-md-down {
  61                                 margin-bottom: 40px;
  62                         }
  63
  64                         @include screen-lg {
  65                                 margin-bottom: 60px;
  66                         }
  67                 }
  68         }
  69
  70         .boxTitle {
  71                 @include wcfFontTitle;
  72         }
  73
  74         .boxWithImage {
  75                 display: flex;
  76                 flex-wrap: wrap;
  77
  78                 .boxImage,
  79                 .boxTitle,
  80                 .boxContent {
  81                         flex: 0 0 100%;
  82                 }
  83
  84                 .boxImage {
  85                         align-items: center;
  86                         display: flex;
  87                         justify-content: center;
  88                         max-height: 750px;
  89                         order: 3;
  90                         overflow: hidden;
  91
  92                         @include screen-md-down {
  93                                 margin-top: 20px;
  94                         }
  95
  96                         @include screen-lg {
  97                                 margin-top: 30px;
  98                         }
  99                 }
 100         }
 101 }
 102
 103 /* styling for boxes in <headerBoxes> position */
 104 .boxesHeaderBoxes {
 105         background-color: $wcfFooterBoxBackground;
 106         color: $wcfFooterBoxText;
 107
 108         a {
 109                 color: $wcfFooterBoxLink;
 110
 111                 &:hover {
 112                         color: $wcfFooterBoxLinkActive;
 113                 }
 114         }
 115
 116         .icon {
 117                 color: $wcfFooterBoxText;
 118         }
 119
 120         .boxContainer {
 121                 @include screen-sm-up {
 122                         display: flex;
 123                         flex-wrap: wrap;
 124                 }
 125
 126                 @include screen-md-down {
 127                         padding: 40px 0;
 128                         margin-bottom: -40px;
 129                         margin-left: -10px;
 130                         margin-right: -10px;
 131                 }
 132
 133                 @include screen-lg {
 134                         padding: 60px 0;
 135                         margin-bottom: -60px;
 136                         margin-left: -15px;
 137                         margin-right: -15px;
 138                 }
 139         }
 140
 141         .box {
 142                 overflow: hidden;
 143                 padding-left: 15px;
 144                 padding-right: 15px;
 145
 146                 @include screen-md-down {
 147                         margin-bottom: 40px;
 148                 }
 149
 150                 @include screen-sm-md {
 151                         flex: 0 0 50%;
 152                         max-width: 50%;
 153
 154                         &.boxFullWidth {
 155                                 flex-basis: 100%;
 156                                 max-width: 100%;
 157                         }
 158
 159                         /* one item */
 160                         &:first-child:nth-last-child(1) {
 161                                 flex-basis: 100%;
 162                                 max-width: 100%;
 163                         }
 164                 }
 165
 166                 @include screen-lg {
 167                         flex: 0 0 25%;
 168                         margin-bottom: 60px;
 169                         max-width: 25%;
 170
 171                         &.boxFullWidth {
 172                                 flex-basis: 100%;
 173                                 max-width: 100%;
 174                         }
 175
 176                         /* one item */
 177                         &:first-child:nth-last-child(1) {
 178                                 flex-basis: 100%;
 179                                 max-width: 100%;
 180                         }
 181
 182                         /* two items */
 183                         &:first-child:nth-last-child(2),
 184                         &:first-child:nth-last-child(2) ~ .box {
 185                                 flex-basis: 50%;
 186                                 max-width: 50%;
 187                         }
 188
 189                         /* three items */
 190                         &:first-child:nth-last-child(3),
 191                         &:first-child:nth-last-child(3) ~ .box {
 192                                 flex-basis: 33.3333%;
 193                                 max-width: 33.3333%;
 194                         }
 195                 }
 196         }
 197
 198         .boxImage {
 199                 align-items: center;
 200                 display: flex;
 201                 justify-content: center;
 202                 margin-bottom: 20px;
 203                 max-height: 100px;
 204                 overflow: hidden;
 205         }
 206 }
 207
 208 /* styling for boxes in <top>/<bottom> position */
 209 .boxesTop,
 210 .boxesBottom {
 211         .box {
 212                 @include screen-md-down {
 213                         margin-bottom: 40px;
 214                         margin-top: 40px;
 215                 }
 216
 217                 @include screen-lg {
 218                         margin-bottom: 60px;
 219                         margin-top: 60px;
 220                 }
 221         }
 222
 223         .boxTitle {
 224                 color: $wcfContentHeadlineText;
 225
 226                 @include wcfFontSection;
 227
 228                 a {
 229                         color: $wcfContentHeadlineLink;
 230
 231                         &:hover {
 232                                 color: $wcfContentHeadlineLinkActive;
 233                         }
 234                 }
 235         }
 236
 237         @include screen-xs {
 238                 .boxImage {
 239                         align-items: center;
 240                         display: flex;
 241                         justify-content: center;
 242                         margin-bottom: 20px;
 243                         max-height: 100px;
 244                         overflow: hidden;
 245                 }
 246         }
 247
 248         @include screen-sm-up {
 249                 .boxImage {
 250                         width: 30%;
 251                 }
 252
 253                 .boxWithImage {
 254                         @include clearfix;
 255
 256                         &:nth-child(odd) {
 257                                 .boxImage {
 258                                         float: left;
 259                                 }
 260                         }
 261
 262                         &:nth-child(even) {
 263                                 .boxImage {
 264                                         float: right;
 265                                 }
 266                         }
 267                 }
 268         }
 269
 270         @include screen-sm-md {
 271                 .boxWithImage {
 272                         &:nth-child(odd) {
 273                                 .boxImage {
 274                                         margin: 0 10px 10px 0;
 275                                 }
 276                         }
 277
 278                         &:nth-child(even) {
 279                                 .boxImage {
 280                                         margin: 0 0 10px 10px;
 281                                 }
 282                         }
 283                 }
 284         }
 285
 286         @include screen-lg {
 287                 .boxWithImage {
 288                         &:nth-child(odd) {
 289                                 .boxImage {
 290                                         margin: 0 20px 20px 0;
 291                                 }
 292                         }
 293
 294                         &:nth-child(even) {
 295                                 .boxImage {
 296                                         margin: 0 0 20px 20px;
 297                                 }
 298                         }
 299                 }
 300         }
 301 }
 302
 303 .boxesTop {
 304         border-bottom: 1px solid $wcfContentBorderInner;
 305 }
 306
 307 .boxesBottom {
 308         border-top: 1px solid $wcfContentBorderInner;
 309 }
 310
 311 /* styling for boxes in <sidebarLeft>/<sidebarRight> position */
 312 .boxesSidebarLeft,
 313 .boxesSidebarRight {
 314         color: $wcfSidebarText;
 315
 316         a {
 317                 color: $wcfSidebarLink;
 318
 319                 &:hover {
 320                         color: $wcfSidebarLinkActive;
 321
 322                 }
 323         }
 324
 325         > .boxContainer {
 326                 @include screen-sm {
 327                         -webkit-columns: 2;
 328                         -moz-columns: 2;
 329                         columns: 2;
 330                 }
 331
 332                 @include screen-md {
 333                         -webkit-columns: 3;
 334                         -moz-columns: 3;
 335                         columns: 3;
 336                 }
 337
 338                 @include screen-sm-md {
 339                         margin-bottom: -30px;
 340
 341                         -webkit-column-gap: 30px;
 342                         -moz-column-gap: 30px;
 343                         column-gap: 30px;
 344
 345                         > .box {
 346                                 /* Sections should never be split, but Firefox, IE and Edge don't seem
 347                                    to care about this despite advertising the support for it. We can work
 348                                    around this by using `overflow: hidden` which magically does the job,
 349                                    but doesn't affect Chrome which properly breaks anyway. */
 350                                 overflow: hidden; /* Fix for Firefox, IE and Edge */
 351
 352                                 // WebKit fix
 353                                 background-clip: padding-box;
 354                                 border-bottom: 30px solid transparent;
 355                                 display: block;
 356                                 margin: 0 !important;
 357                                 width: 100%;
 358
 359                                 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
 360                                 page-break-inside: avoid; /* Firefox */
 361                                 break-inside: avoid; /* IE 10+ */
 362                         }
 363                 }
 364         }
 365
 366         .icon {
 367                 color: $wcfSidebarText;
 368         }
 369
 370         small,
 371         .dimmed {
 372                 color: $wcfSidebarDimmedText;
 373
 374                 a {
 375                         color: $wcfSidebarDimmedLink;
 376
 377                         &:hover {
 378                                 color: $wcfSidebarDimmedLinkActive;
 379                         }
 380                 }
 381         }
 382
 383         .boxTitle {
 384                 color: $wcfSidebarHeadlineText;
 385
 386                 a {
 387                         color: $wcfSidebarHeadlineLink;
 388
 389                         &:hover {
 390                                 color: $wcfSidebarHeadlineLinkActive;
 391
 392                         }
 393                 }
 394         }
 395
 396         .box {
 397                 &:not(.boxBorderless) {
 398                         background-color: $wcfSidebarBackground;
 399
 400                         @include screen-md-down {
 401                                 padding: 20px 10px;
 402
 403                                 .boxMenu {
 404                                         margin-left: -10px;
 405                                         margin-right: -10px;
 406                                 }
 407                         }
 408
 409                         @include screen-lg {
 410                                 padding: 20px;
 411
 412                                 .boxMenu {
 413                                         margin-left: -20px;
 414                                         margin-right: -20px;
 415                                 }
 416                         }
 417                 }
 418
 419                 &:not(:first-child) {
 420                         margin-top: 30px;
 421                 }
 422
 423                 &.boxError,
 424                 &.boxInfo,
 425                 &.boxSuccess,
 426                 &.boxWarning {
 427                         a:not(.button) {
 428                                 @include wcfFontBold;
 429
 430                                 &:hover {
 431                                         text-decoration: underline;
 432                                 }
 433                         }
 434                 }
 435
 436                 &.boxError {
 437                         background-color: $wcfStatusErrorBackground;
 438                         color: $wcfStatusErrorText;
 439
 440                         a:not(.button) {
 441                                 color: $wcfStatusErrorLink;
 442
 443                                 &:hover {
 444                                         color: $wcfStatusErrorLinkActive;
 445                                 }
 446                         }
 447                 }
 448
 449                 &.boxInfo {
 450                         background-color: $wcfStatusInfoBackground;
 451                         color: $wcfStatusInfoText;
 452
 453                         a:not(.button) {
 454                                 color: $wcfStatusInfoLink;
 455
 456                                 &:hover {
 457                                         color: $wcfStatusInfoLinkActive;
 458                                 }
 459                         }
 460                 }
 461
 462                 &.boxSuccess {
 463                         background-color: $wcfStatusSuccessBackground;
 464                         color: $wcfStatusSuccessText;
 465
 466                         a:not(.button) {
 467                                 color: $wcfStatusSuccessLink;
 468
 469                                 &:hover {
 470                                         color: $wcfStatusSuccessLinkActive;
 471                                 }
 472                         }
 473                 }
 474
 475                 &.boxWarning {
 476                         background-color: $wcfStatusWarningBackground;
 477                         color: $wcfStatusWarningText;
 478
 479                         a:not(.button) {
 480                                 color: $wcfStatusWarningLink;
 481
 482                                 &:hover {
 483                                         color: $wcfStatusWarningLinkActive;
 484                                 }
 485                         }
 486                 }
 487
 488                 .boxMenu {
 489                         .boxMenuLink {
 490                                 align-items: flex-start;
 491                                 display: flex;
 492                                 padding: 5px 20px;
 493
 494                                 .boxMenuLinkTitle {
 495                                         flex: 1 1 auto;
 496                                 }
 497
 498                                 .badge {
 499                                         flex: 0 0 auto;
 500                                 }
 501                         }
 502
 503                         li.active > .boxMenuLink {
 504                                 background-color: $wcfContentBackground;
 505                                 color: $wcfContentLink;
 506
 507                                 &:hover {
 508                                         color: $wcfContentLinkActive;
 509                                 }
 510                         }
 511
 512                         .boxMenuDepth1 .boxMenuLink {
 513                                 padding-left: 40px;
 514                         }
 515
 516                         .boxMenuDepth2 .boxMenuLink {
 517                                 padding-left: 60px;
 518                         }
 519
 520                         .boxMenuItem .boxMenuLink {
 521                                 padding-left: 100px;
 522                         }
 523
 524                         .boxMenuItemDepth1 .boxMenuLink {
 525                                 padding-left: 20px;
 526                         }
 527
 528                         .boxMenuItemDepth2 .boxMenuLink {
 529                                 padding-left: 40px;
 530                         }
 531
 532                         .boxMenuItemDepth3 .boxMenuLink {
 533                                 padding-left: 60px;
 534                         }
 535
 536                         .boxMenuItemDepth4 .boxMenuLink {
 537                                 padding-left: 80px;
 538                         }
 539                 }
 540         }
 541
 542         @include screen-xs {
 543                 .boxImage {
 544                         align-items: center;
 545                         display: flex;
 546                         justify-content: center;
 547                         margin-bottom: 20px;
 548                         max-height: 100px;
 549                         overflow: hidden;
 550                 }
 551         }
 552
 553         @include screen-sm-md {
 554                 .boxWithImage {
 555                         @include clearfix;
 556
 557                         .boxTitle,
 558                         .boxContent {
 559                                 margin-left: calc(30% + 15px);
 560                         }
 561                 }
 562
 563                 .boxImage {
 564                         float: left;
 565                         width: 30%;
 566                 }
 567         }
 568
 569         @include screen-lg {
 570                 .boxImage {
 571                         align-items: center;
 572                         display: flex;
 573                         justify-content: center;
 574                         margin-bottom: 20px;
 575                         max-height: 100px;
 576                         overflow: hidden;
 577                 }
 578         }
 579 }
 580
 581 .boxesSidebarLeft .box .boxMenu {
 582         li.active > .boxMenuLink {
 583                 margin-left: 10px;
 584                 padding-left: 10px;
 585         }
 586
 587         .boxMenuDepth1 li.active > .boxMenuLink {
 588                 padding-left: 30px;
 589         }
 590
 591         .boxMenuDepth2 li.active > .boxMenuLink {
 592                 padding-left: 50px;
 593         }
 594 }
 595
 596 .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
 597         margin-right: 10px;
 598         padding-right: 10px;
 599 }
 600
 601 /* collapsible sidebar for mobile devices */
 602 @include screen-md-down {
 603         .main > .layoutBoundary {
 604                 display: flex;
 605                 flex-wrap: wrap;
 606
 607                 > .content {
 608                         flex: 0 0 100%;
 609                         order: 3;
 610                 }
 611
 612                 > .boxesSidebarLeft {
 613                         order: 1;
 614                 }
 615
 616                 > .boxesSidebarRight {
 617                         order: 2;
 618                 }
 619         }
 620
 621         .boxesSidebarLeft,
 622         .boxesSidebarRight {
 623                 flex: 1 0 100%;
 624                 pointer-events: none;
 625
 626                 > .boxContainer {
 627                         pointer-events: all;
 628                 }
 629
 630                 &:not(.open) {
 631                         flex: 1 50%;
 632
 633                         > .boxContainer {
 634                                 display: none;
 635                         }
 636                 }
 637
 638                 &::before {
 639                         background-color: $wcfSidebarBackground;
 640                         color: $wcfSidebarLink;
 641                         content: attr(data-show-sidebar);
 642                         display: block;
 643                         padding: 10px 0;
 644                         pointer-events: all;
 645                         text-align: center;
 646                 }
 647
 648                 &.open::before {
 649                         content: attr(data-hide-sidebar);
 650                         margin-bottom: 20px;
 651                 }
 652         }
 653
 654         .boxesSidebarLeft.boxesSidebarLeftHasMenu {
 655                 &::before {
 656                         content: attr(data-show-navigation);
 657                 }
 658
 659                 &.open::before {
 660                         content: attr(data-hide-navigation);
 661                 }
 662         }
 663
 664         .boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
 665                 border-left: 1px solid $wcfContentBackground;
 666                 margin-left: 10px;
 667                 margin-top: 0;
 668         }
 669
 670         .content:first-child + .boxesSidebarRight {
 671                 margin-bottom: 20px;
 672                 margin-top: 0;
 673         }
 674 }
 675
 676 /* styling for boxes in <contentTop>/<contentBottom> position */
 677 .boxesContentTop,
 678 .boxesContentBottom {
 679         .box {
 680                 &:not(:first-child) {
 681                         margin-top: 40px;
 682                 }
 683         }
 684
 685         .boxTitle {
 686                 color: $wcfContentHeadlineText;
 687
 688                 @include wcfFontSection;
 689
 690                 a {
 691                         color: $wcfContentHeadlineLink;
 692
 693                         &:hover {
 694                                 color: $wcfContentHeadlineLinkActive;
 695                         }
 696                 }
 697         }
 698
 699         .boxInfo {
 700                 background-color: $wcfStatusInfoBackground;
 701                 color: $wcfStatusInfoText;
 702                 padding: 20px;
 703                 text-align: center;
 704
 705                 a:not(.button) {
 706                         color: $wcfStatusInfoLink;
 707
 708                         @include wcfFontBold;
 709
 710                         &:hover {
 711                                 color: $wcfStatusInfoLinkActive;
 712                                 text-decoration: underline;
 713                         }
 714                 }
 715
 716                 .formSubmit {
 717                         margin-top: 20px;
 718                 }
 719         }
 720
 721         @include screen-xs {
 722                 .boxImage {
 723                         align-items: center;
 724                         display: flex;
 725                         justify-content: center;
 726                         margin-bottom: 20px;
 727                         max-height: 100px;
 728                         overflow: hidden;
 729                 }
 730         }
 731
 732         @include screen-sm-up {
 733                 .boxWithImage {
 734                         @include clearfix;
 735                 }
 736
 737                 .boxImage {
 738                         float: left;
 739                         width: 30%;
 740                 }
 741         }
 742
 743         @include screen-sm-md {
 744                 .boxImage {
 745                         margin: 0 10px 10px 0;
 746                 }
 747         }
 748
 749         @include screen-lg {
 750                 .boxImage {
 751                         margin: 0 20px 20px 0;
 752                 }
 753         }
 754 }
 755
 756 .boxesContentTop:not(:first-child) {
 757         margin-top: 40px;
 758 }
 759
 760 .boxesContentBottom {
 761         margin-top: 40px;
 762 }
 763
 764 /* styling for boxes in <footerBoxes> position */
 765 .boxesFooterBoxes {
 766         background-color: $wcfFooterBoxBackground;
 767         color: $wcfFooterBoxText;
 768
 769         a {
 770                 color: $wcfFooterBoxLink;
 771
 772                 &:hover {
 773                         color: $wcfFooterBoxLinkActive;
 774                 }
 775         }
 776
 777         .icon {
 778                 color: $wcfFooterBoxText;
 779         }
 780
 781         .boxContainer {
 782                 @include screen-sm-down {
 783                         padding: 40px 0;
 784                 }
 785
 786                 @include screen-md-down {
 787                         margin-left: -10px;
 788                         margin-right: -10px;
 789                 }
 790
 791                 @include screen-md-up {
 792                         display: flex;
 793                         flex-wrap: wrap;
 794                         margin-bottom: -60px;
 795                         padding: 60px 0;
 796                 }
 797
 798                 @include screen-lg {
 799                         margin-left: -15px;
 800                         margin-right: -15px;
 801                 }
 802         }
 803
 804         .box {
 805                 overflow: hidden;
 806                 padding-left: 15px;
 807                 padding-right: 15px;
 808
 809                 @include screen-sm-down {
 810                         &:not(:last-child) {
 811                                 margin-bottom: 40px;
 812                         }
 813                 }
 814
 815                 @include screen-md-up {
 816                         flex: 0 0 50%;
 817                         margin-bottom: 60px;
 818                         max-width: 50%;
 819
 820                         &.boxFullWidth {
 821                                 flex-basis: 100%;
 822                                 max-width: 100%;
 823                         }
 824                 }
 825         }
 826
 827         .boxTitle {
 828                 color: $wcfFooterBoxHeadlineText;
 829
 830                 a {
 831                         color: $wcfFooterBoxHeadlineLink;
 832
 833                         &:hover {
 834                                 color: $wcfFooterBoxHeadlineLinkActive;
 835                         }
 836                 }
 837         }
 838
 839         .boxImage {
 840                 align-items: center;
 841                 display: flex;
 842                 justify-content: center;
 843                 margin-bottom: 20px;
 844                 max-height: 100px;
 845                 overflow: hidden;
 846         }
 847 }
 848
 849 /* styling for boxes in <footer> position */
 850 .boxesFooter {
 851         background-color: $wcfFooterBackground;
 852         color: $wcfFooterText;
 853         padding: 20px 0;
 854
 855         .icon {
 856                 color: $wcfFooterText;
 857         }
 858
 859         a {
 860                 color: $wcfFooterLink;
 861
 862                 &:hover {
 863                         color: $wcfFooterLinkActive;
 864                         text-decoration: underline;
 865                 }
 866         }
 867
 868         .box {
 869                 &:not(:first-child) {
 870                         margin-top: 20px;
 871                 }
 872         }
 873
 874         .boxTitle {
 875                 color: $wcfFooterHeadlineText;
 876
 877                 a {
 878                         color: $wcfFooterHeadlineLink;
 879
 880                         &:hover {
 881                                 color: $wcfFooterHeadlineLinkActive;
 882                         }
 883                 }
 884         }
 885
 886         @include screen-xs {
 887                 .boxImage {
 888                         align-items: center;
 889                         display: flex;
 890                         justify-content: center;
 891                         margin-bottom: 20px;
 892                         max-height: 100px;
 893                         overflow: hidden;
 894                 }
 895         }
 896
 897         @include screen-sm-up {
 898                 .boxWithImage {
 899                         @include clearfix;
 900                 }
 901
 902                 .boxImage {
 903                         float: left;
 904                         width: 30%;
 905                 }
 906         }
 907
 908         @include screen-sm-md {
 909                 .boxImage {
 910                         margin: 0 10px 10px 0;
 911                 }
 912         }
 913
 914         @include screen-lg {
 915                 .boxImage {
 916                         margin: 0 20px 20px 0;
 917                 }
 918         }
 919
 920         .boxMenuLinkGroup {
 921                 .boxMenu {
 922                         > li {
 923                                 > ol {
 924                                         a {
 925                                                 // use text color instead
 926                                                 color: $wcfFooterText;
 927                                         }
 928                                 }
 929                         }
 930                 }
 931         }
 932
 933         .styleChanger {
 934                 @include screen-sm-down {
 935                         display: none;
 936                 }
 937
 938                 @include screen-md-up {
 939                         float: right;
 940                         padding-left: 20px;
 941                 }
 942         }
 943 }
 944
 945 .boxesTop,
 946 .boxesBottom,
 947 .boxesFooter {
 948         .boxMenu {
 949                 display: inline-flex;
 950                 flex-wrap: wrap;
 951                 margin-left: -10px;
 952                 margin-right: -10px;
 953
 954                 > li {
 955                         flex: 0 0 auto;
 956                         padding-left: 10px;
 957                         padding-right: 10px;
 958                 }
 959         }
 960
 961         .boxMenuLinkGroup {
 962                 &:not(:first-child) {
 963                         margin-top: 40px;
 964                 }
 965
 966                 .boxMenu {
 967                         display: flex;
 968                         flex-wrap: wrap;
 969                         margin-bottom: -20px;
 970
 971                         .boxMenuLink {
 972                                 display: inline-block;
 973                         }
 974
 975                         > li {
 976                                 @include screen-md-up {
 977                                         flex: 0 0 25%;
 978                                         max-width: 25%;
 979                                 }
 980
 981                                 @include screen-sm-down {
 982                                         flex: 1 1 100%;
 983                                 }
 984
 985                                 margin-bottom: 20px;
 986
 987                                 > .boxMenuLink {
 988                                         @include wcfFontHeadline;
 989
 990                                         margin-bottom: 10px;
 991                                 }
 992                         }
 993                 }
 994         }
 995 }
 996
 997 .boxWithEditButton {
 998         position: relative;
 999
1000
1001
1002         .boxEditButton {
1003                 color: inherit;
1004                 opacity: 0;
1005                 position: absolute;
1006                 top: 4px;
1007                 transition: opacity .12s ease-in-out;
1008                 right: 4px;
1009
1010                 &:hover {
1011                         color: inherit;
1012                 }
1013
1014                 > .icon {
1015                         color: inherit;
1016                 }
1017         }
1018 }
1019
1020 html:not(.touch) .boxWithEditButton:hover .boxEditButton {
1021         opacity: 1;
1022 }
1023
1024 .boxMenuResetFilter {
1025         margin-top: 10px;
1026 }