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 {
601 /* collapsible sidebar for mobile devices */
602 @include screen-md-down {
603 .main > .layoutBoundary {
612 > .boxesSidebarLeft {
616 > .boxesSidebarRight {
624 pointer-events: none;
639 background-color: $wcfSidebarBackground;
640 color: $wcfSidebarLink;
641 content: attr(data-show-sidebar);
649 content: attr(data-hide-sidebar);
654 .boxesSidebarLeft.boxesSidebarLeftHasMenu {
656 content: attr(data-show-navigation);
660 content: attr(data-hide-navigation);
664 .boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
665 border-left: 1px solid $wcfContentBackground;
670 .content:first-child + .boxesSidebarRight {
676 /* styling for boxes in <contentTop>/<contentBottom> position */
678 .boxesContentBottom {
680 &:not(:first-child) {
686 color: $wcfContentHeadlineText;
688 @include wcfFontSection;
691 color: $wcfContentHeadlineLink;
694 color: $wcfContentHeadlineLinkActive;
700 background-color: $wcfStatusInfoBackground;
701 color: $wcfStatusInfoText;
706 color: $wcfStatusInfoLink;
708 @include wcfFontBold;
711 color: $wcfStatusInfoLinkActive;
712 text-decoration: underline;
725 justify-content: center;
732 @include screen-sm-up {
743 @include screen-sm-md {
745 margin: 0 10px 10px 0;
751 margin: 0 20px 20px 0;
756 .boxesContentTop:not(:first-child) {
760 .boxesContentBottom {
764 /* styling for boxes in <footerBoxes> position */
766 background-color: $wcfFooterBoxBackground;
767 color: $wcfFooterBoxText;
770 color: $wcfFooterBoxLink;
773 color: $wcfFooterBoxLinkActive;
778 color: $wcfFooterBoxText;
782 @include screen-sm-down {
786 @include screen-md-down {
791 @include screen-md-up {
794 margin-bottom: -60px;
809 @include screen-sm-down {
815 @include screen-md-up {
828 color: $wcfFooterBoxHeadlineText;
831 color: $wcfFooterBoxHeadlineLink;
834 color: $wcfFooterBoxHeadlineLinkActive;
842 justify-content: center;
849 /* styling for boxes in <footer> position */
851 background-color: $wcfFooterBackground;
852 color: $wcfFooterText;
856 color: $wcfFooterText;
860 color: $wcfFooterLink;
863 color: $wcfFooterLinkActive;
864 text-decoration: underline;
869 &:not(:first-child) {
875 color: $wcfFooterHeadlineText;
878 color: $wcfFooterHeadlineLink;
881 color: $wcfFooterHeadlineLinkActive;
890 justify-content: center;
897 @include screen-sm-up {
908 @include screen-sm-md {
910 margin: 0 10px 10px 0;
916 margin: 0 20px 20px 0;
925 // use text color instead
926 color: $wcfFooterText;
934 @include screen-sm-down {
938 @include screen-md-up {
949 display: inline-flex;
962 &:not(:first-child) {
969 margin-bottom: -20px;
972 display: inline-block;
976 @include screen-md-up {
981 @include screen-sm-down {
988 @include wcfFontHeadline;
1007 transition: opacity .12s ease-in-out;
1020 html:not(.touch) .boxWithEditButton:hover .boxEditButton {
1024 .boxMenuResetFilter {