header-search-wide.css

Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/header-search-wide.css
  2. 10 core/themes/olivero/css/components/header-search-wide.css

Header Search Wide Block.

File

core/themes/olivero/css/components/header-search-wide.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Header Search Wide Block.
  10. */
  11. /* Override contextual links so we can position against .site-header. */
  12. .block-search-wide.contextual-region {
  13. position: static;
  14. }
  15. .block-search-wide__wrapper {
  16. position: absolute;
  17. inset-block-start: 100%;
  18. inset-inline-start: calc(-1 * var(--content-left));
  19. display: none;
  20. visibility: hidden;
  21. overflow: hidden;
  22. width: calc(100% + var(--content-left));
  23. max-width: var(--max-bg-color);
  24. height: var(--sp8);
  25. max-height: 0;
  26. margin-block: 0;
  27. margin-inline-start: 0;
  28. margin-inline-end: 0;
  29. padding-block: 0;
  30. padding-inline-start: 0;
  31. padding-inline-end: 0;
  32. transition: all 0.2s;
  33. border-inline-start: solid var(--content-left) var(--color--gray-20);
  34. background: var(--color--black);
  35. }
  36. .block-search-wide__wrapper.is-active {
  37. visibility: visible;
  38. max-height: var(--sp8);
  39. }
  40. .block-search-wide__wrapper form {
  41. display: flex;
  42. grid-column: 1 / 14;
  43. }
  44. .block-search-wide__wrapper input[type="search"] {
  45. width: calc(100% + var(--sp2));
  46. height: var(--sp8);
  47. padding-block: 0;
  48. padding-inline-start: var(--sp12);
  49. padding-inline-end: 0;
  50. transition: background-size 0.4s;
  51. color: var(--color--white);
  52. border: solid 1px transparent;
  53. box-shadow: none;
  54. font-family: var(--font-serif);
  55. font-size: 2rem;
  56. -webkit-appearance: none;
  57. }
  58. .block-search-wide__wrapper input[type="search"]:focus {
  59. outline: solid 4px transparent;
  60. outline-offset: -4px;
  61. }
  62. .block-search-wide__wrapper .form-item-keys {
  63. flex-grow: 1;
  64. margin: 0;
  65. }
  66. .block-search-wide__wrapper .form-actions {
  67. display: flex;
  68. margin: 0;
  69. }
  70. .block-search-wide__wrapper .search-form__submit {
  71. position: relative;
  72. overflow: hidden;
  73. align-self: stretch;
  74. width: 6.25rem;
  75. height: auto;
  76. margin-block: 0;
  77. margin-inline-start: 0;
  78. margin-inline-end: 0;
  79. padding-block: 0;
  80. padding-inline-start: 0;
  81. padding-inline-end: 0;
  82. cursor: pointer;
  83. border-color: transparent;
  84. background-color: transparent;
  85. /*
  86. When in Windows high contrast mode, FF will not output either background
  87. images or SVGs that are nested directly within a element, so we add a .
  88. */
  89. }
  90. .block-search-wide__wrapper .search-form__submit .icon--search {
  91. position: absolute;
  92. inset-block-start: 0;
  93. inset-inline-end: 0;
  94. display: block;
  95. width: 1.5rem; /* Width of the SVG background image. */
  96. height: 100%;
  97. pointer-events: none;
  98. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27.2' viewBox='0 0 26 27.2'%3e %3cpath fill='%23fff' d='M25.8,25.5l-5.3-5.3c2.1-2.1,3.4-5.1,3.4-8.3C23.9,5.3,18.5,0,11.9,0C5.3,0,0,5.3,0,11.9c0,6.6,5.3,11.9,11.9,11.9c2.6,0,5.1-0.9,7-2.3l5.4,5.4c0.4,0.4,1,0.4,1.4,0C26.1,26.6,26.1,25.9,25.8,25.5z M11.9,21.9c-5.5,0-9.9-4.4-9.9-9.9S6.4,2,11.9,2c5.5,0,9.9,4.4,9.9,9.9S17.4,21.9,11.9,21.9z'/%3e%3c/svg%3e");
  99. background-repeat: no-repeat;
  100. background-position: center;
  101. background-size: contain;
  102. }
  103. .block-search-wide__wrapper .search-form__submit .icon--search::after {
  104. position: absolute;
  105. inset-block-end: 0;
  106. inset-inline-start: 0;
  107. width: 100%;
  108. height: 0;
  109. content: "";
  110. transition: transform 0.2s;
  111. transform: scaleX(0);
  112. transform-origin: left;
  113. border-block-start: solid var(--sp0-5) var(--color--primary-50);
  114. }
  115. .block-search-wide__wrapper .search-form__submit:focus {
  116. outline: solid 4px transparent;
  117. outline-offset: -4px;
  118. box-shadow: none;
  119. }
  120. .block-search-wide__wrapper .search-form__submit:focus span::after {
  121. transform: scaleX(1);
  122. }
  123. .block-search-wide__container {
  124. max-width: var(--max-width);
  125. padding-inline-end: var(--sp2);
  126. }
  127. .block-search-wide__grid {
  128. display: grid;
  129. grid-template-columns: repeat(var(--grid-col-count), 1fr);
  130. grid-column-gap: var(--grid-gap);
  131. }
  132. /* Override specificity from container-inline.module.css */
  133. .container-inline .block-search-wide__container {
  134. display: block;
  135. }
  136. .container-inline .block-search-wide__grid {
  137. display: grid;
  138. }
  139. .block-search-wide__button {
  140. position: relative;
  141. display: none;
  142. width: var(--sp3);
  143. height: var(--sp6);
  144. cursor: pointer;
  145. color: var(--color-text-neutral-loud); /* Affects SVG search icon. */
  146. border: 0;
  147. background: transparent;
  148. -webkit-appearance: none;
  149. }
  150. .block-search-wide__button:focus {
  151. position: relative;
  152. outline: 0;
  153. }
  154. .block-search-wide__button:focus::after {
  155. position: absolute;
  156. top: 50%;
  157. left: 50%;
  158. width: 80%;
  159. height: var(--sp3);
  160. content: "";
  161. transform: translate(-50%, -50%);
  162. border: solid 2px var(--color--primary-50);
  163. border-radius: 0.25rem;
  164. }
  165. .block-search-wide__button[aria-expanded="true"] {
  166. background: var(--color--black);
  167. }
  168. .block-search-wide__button[aria-expanded="true"]:focus::after {
  169. border-color: var(--color--white);
  170. }
  171. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before,
  172. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
  173. position: absolute;
  174. top: 50%;
  175. left: 50%;
  176. width: var(--sp1-5);
  177. height: 0;
  178. content: "";
  179. border-block-start: solid 2px var(--color--white);
  180. }
  181. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::before {
  182. transform: translate(-50%, -50%) rotate(-45deg);
  183. }
  184. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close::after {
  185. transform: translate(-50%, -50%) rotate(45deg);
  186. }
  187. .block-search-wide__button[aria-expanded="true"] svg {
  188. display: none;
  189. }
  190. .block-search-wide__button svg {
  191. margin-inline-start: auto;
  192. margin-inline-end: auto;
  193. }
  194. @media (forced-colors: active) {
  195. .block-search-wide__button {
  196. background: ButtonFace;
  197. }
  198. .block-search-wide__button path {
  199. fill: ButtonText;
  200. }
  201. }
  202. /* Provide rudimentary access to site search if JS is disabled. */
  203. html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
  204. visibility: visible;
  205. max-height: var(--sp8);
  206. }
  207. /* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
  208. [dir] .block-search-wide__wrapper input[type="search"] {
  209. background-color: transparent;
  210. background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
  211. background-repeat: no-repeat;
  212. background-position: bottom left; /* LTR */
  213. background-size: 0% 0.625rem;
  214. }
  215. [dir] .block-search-wide__wrapper input[type="search"]:focus {
  216. background-size: 100% var(--sp0-5);
  217. }
  218. [dir="rtl"] .block-search-wide__wrapper input[type="search"] {
  219. background-position: bottom right;
  220. }
  221. [dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search::after {
  222. transform-origin: right;
  223. }
  224. @media (min-width: 75rem) {
  225. body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
  226. body:not(.is-always-mobile-nav) .block-search-wide__button {
  227. display: block;
  228. }
  229. }

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