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 @include screen-xs {
 602         .main > .layoutBoundary {
 603                 display: flex;
 604                 flex-wrap: wrap;
 605
 606                 > .content {
 607                         flex: 0 0 100%;
 608                         order: 3;
 609                 }
 610
 611                 > .boxesSidebarLeft {
 612                         order: 1;
 613                 }
 614
 615                 > .boxesSidebarRight {
 616                         order: 2;
 617                 }
 618         }
 619
 620         .boxesSidebarLeft,
 621         .boxesSidebarRight {
 622                 flex: 1 0 100%;
 623                 pointer-events: none;
 624
 625                 > .boxContainer {
 626                         pointer-events: all;
 627                 }
 628
 629                 &:not(.open) {
 630                         flex: 1 50%;
 631
 632                         > .boxContainer {
 633                                 display: none;
 634                         }
 635                 }
 636
 637                 &::before {
 638                         background-color: $wcfSidebarBackground;
 639                         color: $wcfSidebarLink;
 640                         content: attr(data-show-sidebar);
 641                         display: block;
 642                         padding: 10px 0;
 643                         pointer-events: all;
 644                         text-align: center;
 645                 }
 646
 647                 &.open::before {
 648                         content: attr(data-hide-sidebar);
 649                         margin-bottom: 20px;
 650                 }
 651         }
 652
 653         .boxesSidebarLeft.boxesSidebarLeftHasMenu {
 654                 &::before {
 655                         content: attr(data-show-navigation);
 656                 }
 657
 658                 &.open::before {
 659                         content: attr(data-hide-navigation);
 660                 }
 661         }
 662
 663         .boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
 664                 border-left: 1px solid $wcfContentBackground;
 665                 margin-left: 10px;
 666                 margin-top: 0;
 667         }
 668
 669         .content:first-child + .boxesSidebarRight {
 670                 margin-bottom: 20px;
 671                 margin-top: 0;
 672         }
 673 }
 674
 675 /* styling for boxes in <contentTop>/<contentBottom> position */
 676 .boxesContentTop,
 677 .boxesContentBottom {
 678         .box {
 679                 &:not(:first-child) {
 680                         margin-top: 40px;
 681                 }
 682         }
 683
 684         .boxTitle {
 685                 color: $wcfContentHeadlineText;
 686
 687                 @include wcfFontSection;
 688
 689                 a {
 690                         color: $wcfContentHeadlineLink;
 691
 692                         &:hover {
 693                                 color: $wcfContentHeadlineLinkActive;
 694                         }
 695                 }
 696         }
 697
 698         .boxInfo {
 699                 background-color: $wcfStatusInfoBackground;
 700                 color: $wcfStatusInfoText;
 701                 padding: 20px;
 702                 text-align: center;
 703
 704                 a:not(.button) {
 705                         color: $wcfStatusInfoLink;
 706
 707                         @include wcfFontBold;
 708
 709                         &:hover {
 710                                 color: $wcfStatusInfoLinkActive;
 711                                 text-decoration: underline;
 712                         }
 713                 }
 714
 715                 .formSubmit {
 716                         margin-top: 20px;
 717                 }
 718         }
 719
 720         @include screen-xs {
 721                 .boxImage {
 722                         align-items: center;
 723                         display: flex;
 724                         justify-content: center;
 725                         margin-bottom: 20px;
 726                         max-height: 100px;
 727                         overflow: hidden;
 728                 }
 729         }
 730
 731         @include screen-sm-up {
 732                 .boxWithImage {
 733                         @include clearfix;
 734                 }
 735
 736                 .boxImage {
 737                         float: left;
 738                         width: 30%;
 739                 }
 740         }
 741
 742         @include screen-sm-md {
 743                 .boxImage {
 744                         margin: 0 10px 10px 0;
 745                 }
 746         }
 747
 748         @include screen-lg {
 749                 .boxImage {
 750                         margin: 0 20px 20px 0;
 751                 }
 752         }
 753 }
 754
 755 .boxesContentTop:not(:first-child) {
 756         margin-top: 40px;
 757 }
 758
 759 .boxesContentBottom {
 760         margin-top: 40px;
 761 }
 762
 763 /* styling for boxes in <footerBoxes> position */
 764 .boxesFooterBoxes {
 765         background-color: $wcfFooterBoxBackground;
 766         color: $wcfFooterBoxText;
 767
 768         a {
 769                 color: $wcfFooterBoxLink;
 770
 771                 &:hover {
 772                         color: $wcfFooterBoxLinkActive;
 773                 }
 774         }
 775
 776         .icon {
 777                 color: $wcfFooterBoxText;
 778         }
 779
 780         .boxContainer {
 781                 @include screen-sm-down {
 782                         padding: 40px 0;
 783                 }
 784
 785                 @include screen-md-down {
 786                         margin-left: -10px;
 787                         margin-right: -10px;
 788                 }
 789
 790                 @include screen-md-up {
 791                         display: flex;
 792                         flex-wrap: wrap;
 793                         margin-bottom: -60px;
 794                         padding: 60px 0;
 795                 }
 796
 797                 @include screen-lg {
 798                         margin-left: -15px;
 799                         margin-right: -15px;
 800                 }
 801         }
 802
 803         .box {
 804                 overflow: hidden;
 805                 padding-left: 15px;
 806                 padding-right: 15px;
 807
 808                 @include screen-sm-down {
 809                         &:not(:last-child) {
 810                                 margin-bottom: 40px;
 811                         }
 812                 }
 813
 814                 @include screen-md-up {
 815                         flex: 0 0 50%;
 816                         margin-bottom: 60px;
 817                         max-width: 50%;
 818
 819                         &.boxFullWidth {
 820                                 flex-basis: 100%;
 821                                 max-width: 100%;
 822                         }
 823                 }
 824         }
 825
 826         .boxTitle {
 827                 color: $wcfFooterBoxHeadlineText;
 828
 829                 a {
 830                         color: $wcfFooterBoxHeadlineLink;
 831
 832                         &:hover {
 833                                 color: $wcfFooterBoxHeadlineLinkActive;
 834                         }
 835                 }
 836         }
 837
 838         .boxImage {
 839                 align-items: center;
 840                 display: flex;
 841                 justify-content: center;
 842                 margin-bottom: 20px;
 843                 max-height: 100px;
 844                 overflow: hidden;
 845         }
 846 }
 847
 848 /* styling for boxes in <footer> position */
 849 .boxesFooter {
 850         background-color: $wcfFooterBackground;
 851         color: $wcfFooterText;
 852         padding: 20px 0;
 853
 854         .icon {
 855                 color: $wcfFooterText;
 856         }
 857
 858         a {
 859                 color: $wcfFooterLink;
 860
 861                 &:hover {
 862                         color: $wcfFooterLinkActive;
 863                         text-decoration: underline;
 864                 }
 865         }
 866
 867         .box {
 868                 &:not(:first-child) {
 869                         margin-top: 20px;
 870                 }
 871         }
 872
 873         .boxTitle {
 874                 color: $wcfFooterHeadlineText;
 875
 876                 a {
 877                         color: $wcfFooterHeadlineLink;
 878
 879                         &:hover {
 880                                 color: $wcfFooterHeadlineLinkActive;
 881                         }
 882                 }
 883         }
 884
 885         @include screen-xs {
 886                 .boxImage {
 887                         align-items: center;
 888                         display: flex;
 889                         justify-content: center;
 890                         margin-bottom: 20px;
 891                         max-height: 100px;
 892                         overflow: hidden;
 893                 }
 894         }
 895
 896         @include screen-sm-up {
 897                 .boxWithImage {
 898                         @include clearfix;
 899                 }
 900
 901                 .boxImage {
 902                         float: left;
 903                         width: 30%;
 904                 }
 905         }
 906
 907         @include screen-sm-md {
 908                 .boxImage {
 909                         margin: 0 10px 10px 0;
 910                 }
 911         }
 912
 913         @include screen-lg {
 914                 .boxImage {
 915                         margin: 0 20px 20px 0;
 916                 }
 917         }
 918
 919         .boxMenuLinkGroup {
 920                 .boxMenu {
 921                         > li {
 922                                 > ol {
 923                                         a {
 924                                                 // use text color instead
 925                                                 color: $wcfFooterText;
 926                                         }
 927                                 }
 928                         }
 929                 }
 930         }
 931
 932         .styleChanger {
 933                 @include screen-sm-down {
 934                         display: none;
 935                 }
 936
 937                 @include screen-md-up {
 938                         float: right;
 939                         padding-left: 20px;
 940                 }
 941         }
 942 }
 943
 944 .boxesTop,
 945 .boxesBottom,
 946 .boxesFooter {
 947         .boxMenu {
 948                 display: inline-flex;
 949                 flex-wrap: wrap;
 950                 margin-left: -10px;
 951                 margin-right: -10px;
 952
 953                 > li {
 954                         flex: 0 0 auto;
 955                         padding-left: 10px;
 956                         padding-right: 10px;
 957                 }
 958         }
 959
 960         .boxMenuLinkGroup {
 961                 &:not(:first-child) {
 962                         margin-top: 40px;
 963                 }
 964
 965                 .boxMenu {
 966                         display: flex;
 967                         flex-wrap: wrap;
 968                         margin-bottom: -20px;
 969
 970                         .boxMenuLink {
 971                                 display: inline-block;
 972                         }
 973
 974                         > li {
 975                                 @include screen-md-up {
 976                                         flex: 0 0 25%;
 977                                         max-width: 25%;
 978                                 }
 979
 980                                 @include screen-sm-down {
 981                                         flex: 1 1 100%;
 982                                 }
 983
 984                                 margin-bottom: 20px;
 985
 986                                 > .boxMenuLink {
 987                                         @include wcfFontHeadline;
 988
 989                                         margin-bottom: 10px;
 990                                 }
 991                         }
 992                 }
 993         }
 994 }
 995
 996 .boxWithEditButton {
 997         position: relative;
 998
 999         &:hover .boxEditButton {
1000                 opacity: 1;
1001         }
1002
1003         .boxEditButton {
1004                 color: inherit;
1005                 opacity: 0;
1006                 position: absolute;
1007                 top: 4px;
1008                 transition: opacity .12s ease-in-out;
1009                 right: 4px;
1010
1011                 &:hover {
1012                         color: inherit;
1013                 }
1014
1015                 > .icon {
1016                         color: inherit;
1017                 }
1018         }
1019 }
1020
1021 .boxMenuResetFilter {
1022         margin-top: 10px;
1023 }