.list-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;} .list-header-sort { display: flex; align-items: center; padding-left: 1rem; padding-right: 1rem;} .list-header-search { display: flex; flex: 1; align-items: center; flex-wrap: wrap; justify-content: center; min-width: 200px; /* to enable flexbox wrapping on mobile */} .list-header-search .input { flex: 1;} .small-menu-items { min-height: 35.4px !important; /* match .small.button in height */ background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */} .small-menu-items .item { background: var(--color-menu) !important; padding-top: 6px !important; padding-bottom: 6px !important;} .small-menu-items .item:hover { background: var(--color-hover) !important;} .small-menu-items .item.active { background: var(--color-active) !important;} @media (max-width: 767.98px) { .list-header-search { order: 0; } .list-header-toggle { order: 1; } .list-header-sort { order: 2; margin-left: auto; }}
.list-header {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
}
.list-header-sort {
display: flex;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
}
.list-header-search {
display: flex;
flex: 1;
align-items: center;
flex-wrap: wrap;
justify-content: center;
min-width: 200px; /* to enable flexbox wrapping on mobile */
}
.list-header-search .input {
flex: 1;
}
.small-menu-items {
min-height: 35.4px !important; /* match .small.button in height */
background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
}
.small-menu-items .item {
background: var(--color-menu) !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.small-menu-items .item:hover {
background: var(--color-hover) !important;
}
.small-menu-items .item.active {
background: var(--color-active) !important;
}
@media (max-width: 767.98px) {
.list-header-search {
order: 0;
}
.list-header-toggle {
order: 1;
}
.list-header-sort {
order: 2;
margin-left: auto;
}
}