search-results.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. /**
  2. * @file
  3. * Stylesheet for results generated by the Search module.
  4. */
  5. .path-search .region-content {
  6. margin: 0 1.28rem;
  7. }
  8. .search-form + .item-list > h3 {
  9. margin: 1.28rem;
  10. }
  11. .search-form > .form-wrapper {
  12. margin-bottom: 1.28rem;
  13. padding: 0.889rem;
  14. border: 1px solid #fcece7;
  15. background: #fff;
  16. }
  17. @media screen and (min-width: 48em) {
  18. .search-form > .form-wrapper {
  19. display: flex;
  20. flex-wrap: wrap;
  21. align-items: flex-end;
  22. margin-bottom: 1.28rem;
  23. padding: 1.28rem;
  24. }
  25. }
  26. /* 77em == the max width of .container + 1em either side */
  27. @media screen and (min-width: 77.56em) {
  28. .path-search .region-content {
  29. margin: 0;
  30. }
  31. .search-form > .form-wrapper {
  32. margin: 0 0 1.28rem;
  33. }
  34. }
  35. .search-form .form-type-search {
  36. margin: 0 0 0.889rem 0;
  37. }
  38. @media screen and (min-width: 48em) {
  39. .search-form .form-type-search {
  40. flex-grow: 1;
  41. margin: 0 1.28rem 0 0; /* LTR */
  42. }
  43. [dir="rtl"] .search-form .form-type-search {
  44. margin-right: 0;
  45. margin-left: 1.28rem;
  46. }
  47. }
  48. .search-form .container-inline label,
  49. .search-form .container-inline div {
  50. display: block;
  51. }
  52. .search-form .form-search {
  53. margin: 0;
  54. }
  55. .search-help-link {
  56. display: inline-block;
  57. margin: 1.28rem;
  58. }
  59. /**
  60. * Advanced Search
  61. */
  62. .search-form details > .details-wrapper {
  63. display: flex;
  64. flex-wrap: wrap;
  65. justify-content: space-between;
  66. box-sizing: border-box;
  67. padding: 1.28rem 0 0;
  68. }
  69. .search-form .search-advanced .details-wrapper > fieldset {
  70. width: 100%;
  71. margin: 0 0 1rem;
  72. padding: 1rem;
  73. }
  74. /* 480px */
  75. @media screen and (min-width: 30em) {
  76. .search-form .search-advanced .details-wrapper > fieldset,
  77. .search-form .search-advanced .details-wrapper > .action {
  78. flex-basis: calc(33% - 2%);
  79. flex-grow: 1;
  80. min-width: 15rem;
  81. margin: 1%;
  82. }
  83. .search-form .search-advanced .details-wrapper > .action {
  84. padding-top: 0.7rem;
  85. }
  86. }
  87. .search-form .search-advanced .form-text {
  88. width: 100%;
  89. }
  90. /*
  91. Search results
  92. */
  93. .search-form + h2 {
  94. margin: 0 1.28rem 1.28rem;
  95. }
  96. .search-results {
  97. padding: 0;
  98. list-style: none;
  99. }
  100. /* 77em == the max width of .container + 1em either side */
  101. @media screen and (min-width: 77em) {
  102. .search-results {
  103. margin-right: 0;
  104. margin-left: 0;
  105. }
  106. }
  107. .search-results li {
  108. margin: 0 0 1rem 0; /* LTR */
  109. padding: 1.28rem;
  110. border: 1px solid #fcece7;
  111. background: #fff;
  112. }
  113. /* Without this rule, another RTL rule from item-list.css will break the design */
  114. [dir=rtl] .search-results li {
  115. margin: 0 0 1rem 0;
  116. }
  117. .search-results .search-result__snippet {
  118. margin-bottom: 0;
  119. }
  120. .search-results .search-result__info {
  121. margin-top: 1.28rem;
  122. margin-bottom: 0;
  123. }
  124. .pager__items {
  125. display: flex;
  126. justify-content: center;
  127. }