search-results.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/search-results.css
  2. 10 core/themes/olivero/css/components/search-results.css
  3. 10 core/themes/claro/css/classy/components/search-results.css
  4. 10 core/themes/starterkit_theme/css/components/search-results.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
  2. 9 core/profiles/demo_umami/themes/umami/css/classy/components/search-results.css
  3. 9 core/themes/olivero/css/components/search-results.css
  4. 9 core/themes/seven/css/classy/components/search-results.css
  5. 9 core/themes/claro/css/classy/components/search-results.css
  6. 9 core/themes/bartik/css/components/search-results.css
  7. 9 core/themes/bartik/css/classy/components/search-results.css
  8. 9 core/themes/starterkit_theme/css/components/search-results.css
  9. 9 core/themes/classy/css/components/search-results.css
  10. 8.9.x core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
  11. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/search-results.css
  12. 8.9.x core/themes/seven/css/classy/components/search-results.css
  13. 8.9.x core/themes/claro/css/classy/components/search-results.css
  14. 8.9.x core/themes/bartik/css/components/search-results.css
  15. 8.9.x core/themes/bartik/css/classy/components/search-results.css
  16. 8.9.x core/themes/classy/css/components/search-results.css
  17. 11.x core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
  18. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/search-results.css
  19. 11.x core/themes/olivero/css/components/search-results.css
  20. 11.x core/themes/claro/css/classy/components/search-results.css
  21. 11.x core/themes/starterkit_theme/css/components/search-results.css

Stylesheet for results generated by the Search module.

File

core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css

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

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.