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         > .boxContainer {
 325                 @include screen-sm {
 326                         -webkit-columns: 2;
 327                         -moz-columns: 2;
 328                         columns: 2;
 329                 }
 330
 331                 @include screen-md {
 332                         -webkit-columns: 3;
 333                         -moz-columns: 3;
 334                         columns: 3;
 335                 }
 336
 337                 @include screen-sm-md {
 338                         margin-bottom: -30px;
 339
 340                         -webkit-column-gap: 30px;
 341                         -moz-column-gap: 30px;
 342                         column-gap: 30px;
 343
 344                         > .box {
 345                                 /* Sections should never be split, but Firefox, IE and Edge don't seem
 346                                    to care about this despite advertising the support for it. We can work
 347                                    around this by using `overflow: hidden` which magically does the job,
 348                                    but doesn't affect Chrome which properly breaks anyway. */
 349                                 overflow: hidden; /* Fix for Firefox, IE and Edge */
 350
 351                                 // WebKit fix
 352                                 background-clip: padding-box;
 353                                 border-bottom: 30px solid transparent;
 354                                 display: block;
 355                                 margin: 0 !important;
 356                                 width: 100%;
 357
 358                                 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
 359                                 page-break-inside: avoid; /* Firefox */
 360                                 break-inside: avoid; /* IE 10+ */
 361                         }
 362                 }
 363         }
 364
 365         .icon {
 366                 color: $wcfSidebarText;
 367         }
 368
 369         small,
 370         .dimmed {
 371                 color: $wcfSidebarDimmedText;
 372
 373                 a {
 374                         color: $wcfSidebarDimmedLink;
 375
 376                         &:hover {
 377                                 color: $wcfSidebarDimmedLinkActive;
 378                         }
 379                 }
 380         }
 381
 382         .boxTitle {
 383                 color: $wcfSidebarHeadlineText;
 384
 385                 a {
 386                         color: $wcfSidebarHeadlineLink;
 387
 388                         &:hover {
 389                                 color: $wcfSidebarHeadlineLinkActive;
 390                         }
 391                 }
 392         }
 393
 394         .box {
 395                 &:not(.boxBorderless) {
 396                         background-color: $wcfSidebarBackground;
 397
 398                         @include screen-md-down {
 399                                 padding: 20px 10px;
 400
 401                                 .boxMenu {
 402                                         margin-left: -10px;
 403                                         margin-right: -10px;
 404                                 }
 405                         }
 406
 407                         @include screen-lg {
 408                                 padding: 20px;
 409
 410                                 .boxMenu {
 411                                         margin-left: -20px;
 412                                         margin-right: -20px;
 413                                 }
 414                         }
 415                 }
 416
 417                 &:not(:first-child) {
 418                         margin-top: 30px;
 419                 }
 420
 421                 &.boxError,
 422                 &.boxInfo,
 423                 &.boxSuccess,
 424                 &.boxWarning {
 425                         a:not(.button) {
 426                                 @include wcfFontBold;
 427
 428                                 &:hover {
 429                                         text-decoration: underline;
 430                                 }
 431                         }
 432                 }
 433
 434                 &.boxError {
 435                         background-color: $wcfStatusErrorBackground;
 436                         color: $wcfStatusErrorText;
 437
 438                         a:not(.button) {
 439                                 color: $wcfStatusErrorLink;
 440
 441                                 &:hover {
 442                                         color: $wcfStatusErrorLinkActive;
 443                                 }
 444                         }
 445                 }
 446
 447                 &.boxInfo {
 448                         background-color: $wcfStatusInfoBackground;
 449                         color: $wcfStatusInfoText;
 450
 451                         a:not(.button) {
 452                                 color: $wcfStatusInfoLink;
 453
 454                                 &:hover {
 455                                         color: $wcfStatusInfoLinkActive;
 456                                 }
 457                         }
 458                 }
 459
 460                 &.boxSuccess {
 461                         background-color: $wcfStatusSuccessBackground;
 462                         color: $wcfStatusSuccessText;
 463
 464                         a:not(.button) {
 465                                 color: $wcfStatusSuccessLink;
 466
 467                                 &:hover {
 468                                         color: $wcfStatusSuccessLinkActive;
 469                                 }
 470                         }
 471                 }
 472
 473                 &.boxWarning {
 474                         background-color: $wcfStatusWarningBackground;
 475                         color: $wcfStatusWarningText;
 476
 477                         a:not(.button) {
 478                                 color: $wcfStatusWarningLink;
 479
 480                                 &:hover {
 481                                         color: $wcfStatusWarningLinkActive;
 482                                 }
 483                         }
 484                 }
 485
 486                 .boxMenu {
 487                         .boxMenuLink {
 488                                 align-items: flex-start;
 489                                 display: flex;
 490                                 padding: 5px 20px;
 491
 492                                 .boxMenuLinkTitle {
 493                                         flex: 1 1 auto;
 494                                 }
 495
 496                                 .badge {
 497                                         flex: 0 0 auto;
 498                                 }
 499                         }
 500
 501                         li.active > .boxMenuLink {
 502                                 background-color: $wcfContentBackground;
 503                                 color: $wcfContentLink;
 504
 505                                 &:hover {
 506                                         color: $wcfContentLinkActive;
 507                                 }
 508                         }
 509
 510                         .boxMenuDepth1 .boxMenuLink {
 511                                 padding-left: 40px;
 512                         }
 513
 514                         .boxMenuDepth2 .boxMenuLink {
 515                                 padding-left: 60px;
 516                         }
 517
 518                         .boxMenuItem .boxMenuLink {
 519                                 padding-left: 100px;
 520                         }
 521
 522                         .boxMenuItemDepth1 .boxMenuLink {
 523                                 padding-left: 20px;
 524                         }
 525
 526                         .boxMenuItemDepth2 .boxMenuLink {
 527                                 padding-left: 40px;
 528                         }
 529
 530                         .boxMenuItemDepth3 .boxMenuLink {
 531                                 padding-left: 60px;
 532                         }
 533
 534                         .boxMenuItemDepth4 .boxMenuLink {
 535                                 padding-left: 80px;
 536                         }
 537                 }
 538         }
 539
 540         @include screen-xs {
 541                 .boxImage {
 542                         align-items: center;
 543                         display: flex;
 544                         justify-content: center;
 545                         margin-bottom: 20px;
 546                         max-height: 100px;
 547                         overflow: hidden;
 548                 }
 549         }
 550
 551         @include screen-sm-md {
 552                 .boxWithImage {
 553                         @include clearfix;
 554
 555                         .boxTitle,
 556                         .boxContent {
 557                                 margin-left: calc(30% + 15px);
 558                         }
 559                 }
 560
 561                 .boxImage {
 562                         float: left;
 563                         width: 30%;
 564                 }
 565         }
 566
 567         @include screen-lg {
 568                 .boxImage {
 569                         align-items: center;
 570                         display: flex;
 571                         justify-content: center;
 572                         margin-bottom: 20px;
 573                         max-height: 100px;
 574                         overflow: hidden;
 575                 }
 576         }
 577 }
 578
 579 .boxesSidebarLeft .box .boxMenu {
 580         li.active > .boxMenuLink {
 581                 margin-left: 10px;
 582                 padding-left: 10px;
 583         }
 584
 585         .boxMenuDepth1 li.active > .boxMenuLink {
 586                 padding-left: 30px;
 587         }
 588
 589         .boxMenuDepth2 li.active > .boxMenuLink {
 590                 padding-left: 50px;
 591         }
 592 }
 593
 594 .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
 595         margin-right: 10px;
 596         padding-right: 10px;
 597 }
 598
 599 /* collapsible sidebar for mobile devices */
 600 @include screen-md-down {
 601         .main > .layoutBoundary {
 602                 display: flex;
 603                 flex-wrap: wrap;
 604
 605                 > .content {
 606                         flex: 0 0 100%;
 607                         order: 3;
 608                 }
 609
 610                 > .boxesSidebarLeft {
 611                         order: 1;
 612                 }
 613
 614                 > .boxesSidebarRight {
 615                         order: 2;
 616                 }
 617         }
 618
 619         .boxesSidebarLeft,
 620         .boxesSidebarRight {
 621                 flex: 1 0 100%;
 622                 pointer-events: none;
 623
 624                 > .boxContainer {
 625                         pointer-events: all;
 626                 }
 627
 628                 &:not(.open) {
 629                         flex: 1 50%;
 630
 631                         > .boxContainer {
 632                                 display: none;
 633                         }
 634                 }
 635
 636                 &::before {
 637                         background-color: $wcfSidebarBackground;
 638                         color: $wcfSidebarLink;
 639                         content: attr(data-show-sidebar);
 640                         display: block;
 641                         padding: 10px 0;
 642                         pointer-events: all;
 643                         text-align: center;
 644                 }
 645
 646                 &.open::before {
 647                         content: attr(data-hide-sidebar);
 648                         margin-bottom: 20px;
 649                 }
 650         }
 651
 652         .boxesSidebarLeft.boxesSidebarLeftHasMenu {
 653                 &::before {
 654                         content: attr(data-show-navigation);
 655                 }
 656
 657                 &.open::before {
 658                         content: attr(data-hide-navigation);
 659                 }
 660         }
 661
 662         .boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
 663                 border-left: 1px solid $wcfContentBackground;
 664                 margin-left: 10px;
 665                 margin-top: 0;
 666         }
 667
 668         .content:first-child + .boxesSidebarRight {
 669                 margin-bottom: 20px;
 670                 margin-top: 0;
 671         }
 672 }
 673
 674 /* styling for boxes in <contentTop>/<contentBottom> position */
 675 .boxesContentTop,
 676 .boxesContentBottom {
 677         .box {
 678                 &:not(:first-child) {
 679                         margin-top: 40px;
 680                 }
 681         }
 682
 683         .boxTitle {
 684                 color: $wcfContentHeadlineText;
 685
 686                 @include wcfFontSection;
 687
 688                 a {
 689                         color: $wcfContentHeadlineLink;
 690
 691                         &:hover {
 692                                 color: $wcfContentHeadlineLinkActive;
 693                         }
 694                 }
 695         }
 696
 697         .boxInfo {
 698                 background-color: $wcfStatusInfoBackground;
 699                 color: $wcfStatusInfoText;
 700                 padding: 20px;
 701                 text-align: center;
 702
 703                 a:not(.button) {
 704                         color: $wcfStatusInfoLink;
 705
 706                         @include wcfFontBold;
 707
 708                         &:hover {
 709                                 color: $wcfStatusInfoLinkActive;
 710                                 text-decoration: underline;
 711                         }
 712                 }
 713
 714                 .formSubmit {
 715                         margin-top: 20px;
 716                 }
 717         }
 718
 719         @include screen-xs {
 720                 .boxImage {
 721                         align-items: center;
 722                         display: flex;
 723                         justify-content: center;
 724                         margin-bottom: 20px;
 725                         max-height: 100px;
 726                         overflow: hidden;
 727                 }
 728         }
 729
 730         @include screen-sm-up {
 731                 .boxWithImage {
 732                         @include clearfix;
 733                 }
 734
 735                 .boxImage {
 736                         float: left;
 737                         width: 30%;
 738                 }
 739         }
 740
 741         @include screen-sm-md {
 742                 .boxImage {
 743                         margin: 0 10px 10px 0;
 744                 }
 745         }
 746
 747         @include screen-lg {
 748                 .boxImage {
 749                         margin: 0 20px 20px 0;
 750                 }
 751         }
 752 }
 753
 754 .boxesContentTop:not(:first-child) {
 755         margin-top: 40px;
 756 }
 757
 758 .boxesContentBottom {
 759         margin-top: 40px;
 760 }
 761
 762 /* styling for boxes in <footerBoxes> position */
 763 .boxesFooterBoxes {
 764         background-color: $wcfFooterBoxBackground;
 765         color: $wcfFooterBoxText;
 766
 767         a {
 768                 color: $wcfFooterBoxLink;
 769
 770                 &:hover {
 771                         color: $wcfFooterBoxLinkActive;
 772                 }
 773         }
 774
 775         .icon {
 776                 color: $wcfFooterBoxText;
 777         }
 778
 779         .boxContainer {
 780                 @include screen-sm-down {
 781                         padding: 40px 0;
 782                 }
 783
 784                 @include screen-md-down {
 785                         margin-left: -10px;
 786                         margin-right: -10px;
 787                 }
 788
 789                 @include screen-md-up {
 790                         display: flex;
 791                         flex-wrap: wrap;
 792                         margin-bottom: -60px;
 793                         padding: 60px 0;
 794                 }
 795
 796                 @include screen-lg {
 797                         margin-left: -15px;
 798                         margin-right: -15px;
 799                 }
 800         }
 801
 802         .box {
 803                 overflow: hidden;
 804                 padding-left: 15px;
 805                 padding-right: 15px;
 806
 807                 @include screen-sm-down {
 808                         &:not(:last-child) {
 809                                 margin-bottom: 40px;
 810                         }
 811                 }
 812
 813                 @include screen-md-up {
 814                         flex: 0 0 50%;
 815                         margin-bottom: 60px;
 816                         max-width: 50%;
 817
 818                         &.boxFullWidth {
 819                                 flex-basis: 100%;
 820                                 max-width: 100%;
 821                         }
 822                 }
 823         }
 824
 825         .boxTitle {
 826                 color: $wcfFooterBoxHeadlineText;
 827
 828                 a {
 829                         color: $wcfFooterBoxHeadlineLink;
 830
 831                         &:hover {
 832                                 color: $wcfFooterBoxHeadlineLinkActive;
 833                         }
 834                 }
 835         }
 836
 837         .boxImage {
 838                 align-items: center;
 839                 display: flex;
 840                 justify-content: center;
 841                 margin-bottom: 20px;
 842                 max-height: 100px;
 843                 overflow: hidden;
 844         }
 845 }
 846
 847 /* styling for boxes in <footer> position */
 848 .boxesFooter {
 849         background-color: $wcfFooterBackground;
 850         color: $wcfFooterText;
 851         padding: 20px 0;
 852
 853         .icon {
 854                 color: $wcfFooterText;
 855         }
 856
 857         a {
 858                 color: $wcfFooterLink;
 859
 860                 &:hover {
 861                         color: $wcfFooterLinkActive;
 862                         text-decoration: underline;
 863                 }
 864         }
 865
 866         .box {
 867                 &:not(:first-child) {
 868                         margin-top: 20px;
 869                 }
 870         }
 871
 872         .boxTitle {
 873                 color: $wcfFooterHeadlineText;
 874
 875                 a {
 876                         color: $wcfFooterHeadlineLink;
 877
 878                         &:hover {
 879                                 color: $wcfFooterHeadlineLinkActive;
 880                         }
 881                 }
 882         }
 883
 884         @include screen-xs {
 885                 .boxImage {
 886                         align-items: center;
 887                         display: flex;
 888                         justify-content: center;
 889                         margin-bottom: 20px;
 890                         max-height: 100px;
 891                         overflow: hidden;
 892                 }
 893         }
 894
 895         @include screen-sm-up {
 896                 .boxWithImage {
 897                         @include clearfix;
 898                 }
 899
 900                 .boxImage {
 901                         float: left;
 902                         width: 30%;
 903                 }
 904         }
 905
 906         @include screen-sm-md {
 907                 .boxImage {
 908                         margin: 0 10px 10px 0;
 909                 }
 910         }
 911
 912         @include screen-lg {
 913                 .boxImage {
 914                         margin: 0 20px 20px 0;
 915                 }
 916         }
 917
 918         .boxMenuLinkGroup {
 919                 .boxMenu {
 920                         > li {
 921                                 > ol {
 922                                         a {
 923                                                 // use text color instead
 924                                                 color: $wcfFooterText;
 925                                         }
 926                                 }
 927                         }
 928                 }
 929         }
 930
 931         .styleChanger {
 932                 @include screen-sm-down {
 933                         display: none;
 934                 }
 935
 936                 @include screen-md-up {
 937                         float: right;
 938                         padding-left: 20px;
 939                 }
 940         }
 941 }
 942
 943 .boxesTop,
 944 .boxesBottom,
 945 .boxesFooter {
 946         .boxMenu {
 947                 display: inline-flex;
 948                 flex-wrap: wrap;
 949                 margin-left: -10px;
 950                 margin-right: -10px;
 951
 952                 > li {
 953                         flex: 0 0 auto;
 954                         padding-left: 10px;
 955                         padding-right: 10px;
 956                 }
 957         }
 958
 959         .boxMenuLinkGroup {
 960                 &:not(:first-child) {
 961                         margin-top: 40px;
 962                 }
 963
 964                 .boxMenu {
 965                         display: flex;
 966                         flex-wrap: wrap;
 967                         margin-bottom: -20px;
 968
 969                         .boxMenuLink {
 970                                 display: inline-block;
 971                         }
 972
 973                         > li {
 974                                 @include screen-md-up {
 975                                         flex: 0 0 25%;
 976                                         max-width: 25%;
 977                                 }
 978
 979                                 @include screen-sm-down {
 980                                         flex: 1 1 100%;
 981                                 }
 982
 983                                 margin-bottom: 20px;
 984
 985                                 > .boxMenuLink {
 986                                         @include wcfFontHeadline;
 987
 988                                         margin-bottom: 10px;
 989                                 }
 990                         }
 991                 }
 992         }
 993 }
 994
 995 .boxWithEditButton {
 996         position: relative;
 997
 998         .boxEditButton {
 999                 color: inherit;
1000                 opacity: 0;
1001                 position: absolute;
1002                 top: 4px;
1003                 transition: opacity 0.12s ease-in-out;
1004                 right: 4px;
1005
1006                 &:hover {
1007                         color: inherit;
1008                 }
1009
1010                 > .icon {
1011                         color: inherit;
1012                 }
1013         }
1014 }
1015
1016 html:not(.touch) .boxWithEditButton:hover .boxEditButton {
1017         opacity: 1;
1018 }
1019
1020 .boxMenuResetFilter {
1021         margin-top: 10px;
1022 }