Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

list-header.css 1.1KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .list-header {
  2. display: flex;
  3. align-items: center;
  4. flex-wrap: wrap;
  5. gap: .5rem;
  6. }
  7. .list-header-sort {
  8. display: flex;
  9. align-items: center;
  10. padding-left: 1rem;
  11. padding-right: 1rem;
  12. }
  13. .list-header-search {
  14. display: flex;
  15. flex: 1;
  16. align-items: center;
  17. flex-wrap: wrap;
  18. justify-content: center;
  19. min-width: 200px; /* to enable flexbox wrapping on mobile */
  20. }
  21. .list-header-search .input {
  22. flex: 1;
  23. }
  24. .small-menu-items {
  25. min-height: 35.4px !important; /* match .small.button in height */
  26. 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 */
  27. }
  28. .small-menu-items .item {
  29. background: var(--color-menu) !important;
  30. padding-top: 6px !important;
  31. padding-bottom: 6px !important;
  32. }
  33. .small-menu-items .item:hover {
  34. background: var(--color-hover) !important;
  35. }
  36. .small-menu-items .item.active {
  37. background: var(--color-active) !important;
  38. }
  39. @media (max-width: 767.98px) {
  40. .list-header-search {
  41. order: 0;
  42. }
  43. .list-header-toggle {
  44. order: 1;
  45. }
  46. .list-header-sort {
  47. order: 2;
  48. margin-left: auto;
  49. }
  50. }