12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 |
- .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;
- }
- }
|