4 transition: background-color 0.2s;
6 @include screen-md-down {
15 border-bottom: 1px solid var(--wcfContentBorderInner);
19 border-top: 1px solid var(--wcfContentBorder);
23 border-bottom: 1px solid var(--wcfContentBorder);
27 background-color: var(--wcfTabularBoxBackgroundActive);
34 background-color: transparent;
41 > .containerContentType {
42 color: var(--wcfContentDimmedText);
53 &.containerListButtonGroup {
57 background-color: transparent;
69 @include screen-md-down {
70 .hasMobileNavigation > .containerHeadline > h3 {
74 .buttonGroupNavigation {
82 // dropdown is contained within this element, required to have it stand
83 // above any succeeding siblings
93 left: calc(100% - 24px);
98 @include dropdownMenu;
100 position: static !important;
114 .buttonGroupNavigation {
119 transition: opacity 0.12s;
126 background-color: var(--wcfContentBackground);
127 border-radius: var(--wcfBorderRadius);
128 box-shadow: var(--wcfBoxShadowCard);
134 border-right: 1px solid var(--wcfContentContainerBorder);
139 display: inline-block;
154 color: var(--wcfContentText);
163 &:hover .buttonGroupNavigation {
169 @include screen-sm-down {
178 @include screen-md-up {
185 // this will cause the mobile drop-down menu to be cut-off
189 .containerBoxContent {
194 text-overflow: ellipsis;
208 border-top: 1px solid var(--wcfContentBorder);
209 border-bottom: 1px solid var(--wcfContentBorder);
212 &.doubleColumned > li {
216 &:nth-child(2n + 1):nth-last-child(-n + 2) {
221 &.tripleColumned > li {
222 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
225 flex-basis: calc(100% / 3);
227 &:nth-child(3n + 1):nth-last-child(-n + 3),
228 &:nth-child(3n + 1):nth-last-child(-n + 3) ~ li {
236 html[data-color-scheme="dark"] .containerList > li .buttonGroupNavigation > ul {
237 border: 1px solid var(--wcfContentContainerBorder);
242 @include screen-sm-down {
251 @include screen-md-up {
256 margin-bottom: -15px;
263 .containerBoxContent {
268 text-overflow: ellipsis;
275 &.doubleColumned > li {
280 &.tripleColumned > li {
281 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
284 flex-basis: calc(100% / 3);
289 .flexibleCategoryList {
304 font-size: var(--wcfFontSizeSmall);
310 .containerListDisplayOptions {
312 border-bottom: 2px solid currentColor;
313 color: var(--wcfTabularBoxHeadline);
317 .containerListSortOptions,
318 .containerListActiveFilters,
319 .containerListFilterOptions {
323 @include screen-sm-down {
324 .containerListActiveFilters {
329 .containerListSortOptions {
337 color: var(--wcfTabularBoxHeadline);
341 .containerListActiveFilters,
342 .containerListFilterOptions {
346 @include screen-md-up {
347 .flexibleCategoryList:not(.flexibleCategoryListDisabled) {
349 -webkit-column-count: 2;
352 -moz-column-count: 2;
354 /* CSS 3 / Internet Explorer */
359 -webkit-column-break-inside: avoid;
361 /* CSS 3 / Internet Explorer */
368 display: inline-block;
369 @include wcfFontSmall;
376 @-moz-document url-prefix() {
377 .flexibleCategoryList:not(.flexibleCategoryListDisabled) > li {
384 .styleListPreviewImage {
388 @include screen-md-down {