1 /* default styling for all boxes */
3 box-sizing: border-box;
13 @include wcfFontHeadline;
36 .boxContentSeparator {
37 background: $wcfContentBorderInner;
44 /* styling for boxes in <hero> position */
47 @include screen-md-down {
60 @include screen-md-down {
71 @include wcfFontTitle;
87 justify-content: center;
92 @include screen-md-down {
103 /* styling for boxes in <headerBoxes> position */
105 background-color: $wcfFooterBoxBackground;
106 color: $wcfFooterBoxText;
109 color: $wcfFooterBoxLink;
112 color: $wcfFooterBoxLinkActive;
117 color: $wcfFooterBoxText;
121 @include screen-sm-up {
126 @include screen-md-down {
128 margin-bottom: -40px;
135 margin-bottom: -60px;
146 @include screen-md-down {
150 @include screen-sm-md {
160 &:first-child:nth-last-child(1) {
177 &:first-child:nth-last-child(1) {
183 &:first-child:nth-last-child(2),
184 &:first-child:nth-last-child(2) ~ .box {
190 &:first-child:nth-last-child(3),
191 &:first-child:nth-last-child(3) ~ .box {
192 flex-basis: 33.3333%;
201 justify-content: center;
208 /* styling for boxes in <top>/<bottom> position */
212 @include screen-md-down {
224 color: $wcfContentHeadlineText;
226 @include wcfFontSection;
229 color: $wcfContentHeadlineLink;
232 color: $wcfContentHeadlineLinkActive;
241 justify-content: center;
248 @include screen-sm-up {
270 @include screen-sm-md {
274 margin: 0 10px 10px 0;
280 margin: 0 0 10px 10px;
290 margin: 0 20px 20px 0;
296 margin: 0 0 20px 20px;
304 border-bottom: 1px solid $wcfContentBorderInner;
308 border-top: 1px solid $wcfContentBorderInner;
311 /* styling for boxes in <sidebarLeft>/<sidebarRight> position */
314 color: $wcfSidebarText;
317 color: $wcfSidebarLink;
320 color: $wcfSidebarLinkActive;
338 @include screen-sm-md {
339 margin-bottom: -30px;
341 -webkit-column-gap: 30px;
342 -moz-column-gap: 30px;
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 */
353 background-clip: padding-box;
354 border-bottom: 30px solid transparent;
356 margin: 0 !important;
359 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
360 page-break-inside: avoid; /* Firefox */
361 break-inside: avoid; /* IE 10+ */
367 color: $wcfSidebarText;
372 color: $wcfSidebarDimmedText;
375 color: $wcfSidebarDimmedLink;
378 color: $wcfSidebarDimmedLinkActive;
384 color: $wcfSidebarHeadlineText;
387 color: $wcfSidebarHeadlineLink;
390 color: $wcfSidebarHeadlineLinkActive;
397 &:not(.boxBorderless) {
398 background-color: $wcfSidebarBackground;
400 @include screen-md-down {
419 &:not(:first-child) {
428 @include wcfFontBold;
431 text-decoration: underline;
437 background-color: $wcfStatusErrorBackground;
438 color: $wcfStatusErrorText;
441 color: $wcfStatusErrorLink;
444 color: $wcfStatusErrorLinkActive;
450 background-color: $wcfStatusInfoBackground;
451 color: $wcfStatusInfoText;
454 color: $wcfStatusInfoLink;
457 color: $wcfStatusInfoLinkActive;
463 background-color: $wcfStatusSuccessBackground;
464 color: $wcfStatusSuccessText;
467 color: $wcfStatusSuccessLink;
470 color: $wcfStatusSuccessLinkActive;
476 background-color: $wcfStatusWarningBackground;
477 color: $wcfStatusWarningText;
480 color: $wcfStatusWarningLink;
483 color: $wcfStatusWarningLinkActive;
490 align-items: flex-start;
503 li.active > .boxMenuLink {
504 background-color: $wcfContentBackground;
505 color: $wcfContentLink;
508 color: $wcfContentLinkActive;
512 .boxMenuDepth1 .boxMenuLink {
516 .boxMenuDepth2 .boxMenuLink {
520 .boxMenuItem .boxMenuLink {
524 .boxMenuItemDepth1 .boxMenuLink {
528 .boxMenuItemDepth2 .boxMenuLink {
532 .boxMenuItemDepth3 .boxMenuLink {
536 .boxMenuItemDepth4 .boxMenuLink {
546 justify-content: center;
553 @include screen-sm-md {
559 margin-left: calc(30% + 15px);
573 justify-content: center;
581 .boxesSidebarLeft .box .boxMenu {
582 li.active > .boxMenuLink {
587 .boxMenuDepth1 li.active > .boxMenuLink {
591 .boxMenuDepth2 li.active > .boxMenuLink {
596 .boxesSidebarRight .box .boxMenu li.active > .boxMenuLink {
602 .main > .layoutBoundary {
611 > .boxesSidebarLeft {
615 > .boxesSidebarRight {
623 pointer-events: none;
638 background-color: $wcfSidebarBackground;
639 color: $wcfSidebarLink;
640 content: attr(data-show-sidebar);
648 content: attr(data-hide-sidebar);
653 .boxesSidebarLeft.boxesSidebarLeftHasMenu {
655 content: attr(data-show-navigation);
659 content: attr(data-hide-navigation);
663 .boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
664 border-left: 1px solid $wcfContentBackground;
669 .content:first-child + .boxesSidebarRight {
675 /* styling for boxes in <contentTop>/<contentBottom> position */
677 .boxesContentBottom {
679 &:not(:first-child) {
685 color: $wcfContentHeadlineText;
687 @include wcfFontSection;
690 color: $wcfContentHeadlineLink;
693 color: $wcfContentHeadlineLinkActive;
699 background-color: $wcfStatusInfoBackground;
700 color: $wcfStatusInfoText;
705 color: $wcfStatusInfoLink;
707 @include wcfFontBold;
710 color: $wcfStatusInfoLinkActive;
711 text-decoration: underline;
724 justify-content: center;
731 @include screen-sm-up {
742 @include screen-sm-md {
744 margin: 0 10px 10px 0;
750 margin: 0 20px 20px 0;
755 .boxesContentTop:not(:first-child) {
759 .boxesContentBottom {
763 /* styling for boxes in <footerBoxes> position */
765 background-color: $wcfFooterBoxBackground;
766 color: $wcfFooterBoxText;
769 color: $wcfFooterBoxLink;
772 color: $wcfFooterBoxLinkActive;
777 color: $wcfFooterBoxText;
781 @include screen-sm-down {
785 @include screen-md-down {
790 @include screen-md-up {
793 margin-bottom: -60px;
808 @include screen-sm-down {
814 @include screen-md-up {
827 color: $wcfFooterBoxHeadlineText;
830 color: $wcfFooterBoxHeadlineLink;
833 color: $wcfFooterBoxHeadlineLinkActive;
841 justify-content: center;
848 /* styling for boxes in <footer> position */
850 background-color: $wcfFooterBackground;
851 color: $wcfFooterText;
855 color: $wcfFooterText;
859 color: $wcfFooterLink;
862 color: $wcfFooterLinkActive;
863 text-decoration: underline;
868 &:not(:first-child) {
874 color: $wcfFooterHeadlineText;
877 color: $wcfFooterHeadlineLink;
880 color: $wcfFooterHeadlineLinkActive;
889 justify-content: center;
896 @include screen-sm-up {
907 @include screen-sm-md {
909 margin: 0 10px 10px 0;
915 margin: 0 20px 20px 0;
924 // use text color instead
925 color: $wcfFooterText;
933 @include screen-sm-down {
937 @include screen-md-up {
948 display: inline-flex;
961 &:not(:first-child) {
968 margin-bottom: -20px;
971 display: inline-block;
975 @include screen-md-up {
980 @include screen-sm-down {
987 @include wcfFontHeadline;
1006 transition: opacity .12s ease-in-out;
1019 html:not(.touch) .boxWithEditButton:hover .boxEditButton {
1023 .boxMenuResetFilter {