header-search-wide.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/header-search-wide.css
  2. 11.x 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. /**

  9.  * @file

  10.  * Header Search Wide Block.

  11.  */

  12. 

  13. /* Override contextual links so we can position against .site-header. */

  14. 

  15. .block-search-wide.contextual-region {

  16.   position: static;

  17. }

  18. 

  19. [dir="ltr"] .block-search-wide__wrapper {

  20.   left: 0;

  21. }

  22. 

  23. [dir="rtl"] .block-search-wide__wrapper {

  24.   right: 0;

  25. }

  26. 

  27. [dir="ltr"] .block-search-wide__wrapper {

  28.   margin-left: 0;

  29. }

  30. 

  31. [dir="rtl"] .block-search-wide__wrapper {

  32.   margin-right: 0;

  33. }

  34. 

  35. [dir="ltr"] .block-search-wide__wrapper {

  36.   margin-right: 0;

  37. }

  38. 

  39. [dir="rtl"] .block-search-wide__wrapper {

  40.   margin-left: 0;

  41. }

  42. 

  43. [dir="ltr"] .block-search-wide__wrapper {

  44.   padding-left: 0;

  45. }

  46. 

  47. [dir="rtl"] .block-search-wide__wrapper {

  48.   padding-right: 0;

  49. }

  50. 

  51. [dir="ltr"] .block-search-wide__wrapper {

  52.   padding-right: 0;

  53. }

  54. 

  55. [dir="rtl"] .block-search-wide__wrapper {

  56.   padding-left: 0;

  57. }

  58. 

  59. [dir="ltr"] .block-search-wide__wrapper {

  60.   border-left: solid 5.625rem #313637;

  61. }

  62. 

  63. [dir="rtl"] .block-search-wide__wrapper {

  64.   border-right: solid 5.625rem #313637;

  65. }

  66. 

  67. .block-search-wide__wrapper {

  68.   position: absolute;

  69.   z-index: 1; /* Ensure left border shows above social region in IE11. */

  70.   top: 100%;

  71.   display: none;

  72.   visibility: hidden;

  73.   overflow: hidden;

  74.   width: 100vw;

  75.   max-width: 98.125rem;

  76.   height: 9rem;

  77.   max-height: 0;

  78.   margin-top: 0;

  79.   margin-bottom: 0;

  80.   padding-top: 0;

  81.   padding-bottom: 0;

  82.   transition: all 0.2s;

  83.   background: #000;

  84. }

  85. 

  86. .block-search-wide__wrapper.is-active {

  87.   visibility: visible;

  88.   max-height: 9rem;

  89. }

  90. 

  91. .block-search-wide__wrapper form {

  92.   display: flex;

  93.   -ms-grid-column: 1;

  94.   -ms-grid-column-span: 13;

  95.   grid-column: 1 / 14;

  96. }

  97. 

  98. [dir="ltr"] .block-search-wide__wrapper input[type="search"] {

  99.   padding-left: 13.5rem;

  100. }

  101. 

  102. [dir="rtl"] .block-search-wide__wrapper input[type="search"] {

  103.   padding-right: 13.5rem;

  104. }

  105. 

  106. [dir="ltr"] .block-search-wide__wrapper input[type="search"] {

  107.   padding-right: 0;

  108. }

  109. 

  110. [dir="rtl"] .block-search-wide__wrapper input[type="search"] {

  111.   padding-left: 0;

  112. }

  113. 

  114. .block-search-wide__wrapper input[type="search"] {

  115.   width: calc(100% + 2.25rem);

  116.   height: 9rem;

  117.   padding-top: 0;

  118.   padding-bottom: 0;

  119.   transition: background-size 0.4s;

  120.   color: #fff;

  121.   border: solid 1px transparent;

  122.   box-shadow: none;

  123.   font-family: Lora, georgia, serif;

  124.   font-size: 2rem;

  125.   -webkit-appearance: none;

  126. }

  127. 

  128. .block-search-wide__wrapper input[type="search"]::-ms-clear {

  129.   width: 2.5rem;

  130.   opacity: 0.5;

  131. }

  132. 

  133. .block-search-wide__wrapper input[type="search"]:focus {

  134.   outline: solid 4px transparent;

  135.   outline-offset: -4px;

  136. 

  137.   /*

  138.         We normally indicate focus by animating background-image width. This isn't

  139.         available in IE11 when in Windows high contrast mode.

  140.       */

  141. }

  142. 

  143. @media screen and (-ms-high-contrast: active) {

  144. 

  145.   .block-search-wide__wrapper input[type="search"]:focus {

  146.     border-bottom-width: 9px;

  147.   }

  148. }

  149. 

  150. .block-search-wide__wrapper .form-item-keys {

  151.   flex-grow: 1;

  152.   margin: 0;

  153. }

  154. 

  155. .block-search-wide__wrapper .form-actions {

  156.   display: flex;

  157.   margin: 0;

  158. }

  159. 

  160. [dir="ltr"] .block-search-wide__wrapper .search-form__submit {

  161.   margin-left: 0;

  162. }

  163. 

  164. [dir="rtl"] .block-search-wide__wrapper .search-form__submit {

  165.   margin-right: 0;

  166. }

  167. 

  168. [dir="ltr"] .block-search-wide__wrapper .search-form__submit {

  169.   margin-right: 0;

  170. }

  171. 

  172. [dir="rtl"] .block-search-wide__wrapper .search-form__submit {

  173.   margin-left: 0;

  174. }

  175. 

  176. [dir="ltr"] .block-search-wide__wrapper .search-form__submit {

  177.   padding-left: 0;

  178. }

  179. 

  180. [dir="rtl"] .block-search-wide__wrapper .search-form__submit {

  181.   padding-right: 0;

  182. }

  183. 

  184. [dir="ltr"] .block-search-wide__wrapper .search-form__submit {

  185.   padding-right: 0;

  186. }

  187. 

  188. [dir="rtl"] .block-search-wide__wrapper .search-form__submit {

  189.   padding-left: 0;

  190. }

  191. 

  192. .block-search-wide__wrapper .search-form__submit {

  193.   position: relative;

  194.   overflow: hidden;

  195.   -ms-grid-row-align: stretch;

  196.   align-self: stretch;

  197.   width: 6.25rem;

  198.   height: auto;

  199.   margin-top: 0;

  200.   margin-bottom: 0;

  201.   padding-top: 0;

  202.   padding-bottom: 0;

  203.   cursor: pointer;

  204.   border-color: transparent;

  205.   background-color: transparent;

  206. 

  207.   /*

  208.       When in Windows high contrast mode, FF will not output either background

  209.       images or SVGs that are nested directly within a  element, so we add a .

  210.     */

  211. }

  212. 

  213. [dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search {

  214.   right: 0;

  215. }

  216. 

  217. [dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search {

  218.   left: 0;

  219. }

  220. 

  221. .block-search-wide__wrapper .search-form__submit .icon--search {

  222.   position: absolute;

  223.   top: 0;

  224.   display: block;

  225.   width: 1.5rem; /* Width of the SVG background image. */

  226.   height: 100%;

  227.   pointer-events: none;

  228.   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");

  229.   background-repeat: no-repeat;

  230.   background-position: center;

  231.   background-size: contain;

  232. }

  233. 

  234. [dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after {

  235.   left: 0;

  236. }

  237. 

  238. [dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {

  239.   right: 0;

  240. }

  241. 

  242. .block-search-wide__wrapper .search-form__submit .icon--search:after {

  243.   position: absolute;

  244.   bottom: 0;

  245.   width: 100%;

  246.   height: 0;

  247.   content: "";

  248.   transition: transform 0.2s;

  249.   transform: scaleX(0);

  250.   transform-origin: left;

  251.   border-top: solid 0.5625rem #2494db;

  252. }

  253. 

  254. .block-search-wide__wrapper .search-form__submit:focus {

  255.   outline: solid 4px transparent;

  256.   outline-offset: -4px;

  257.   box-shadow: none;

  258. }

  259. 

  260. .block-search-wide__wrapper .search-form__submit:focus span:after {

  261.   transform: scaleX(1);

  262. }

  263. 

  264. @media screen and (-ms-high-contrast: active) {

  265. 

  266.   .block-search-wide__wrapper .search-form__submit:focus {

  267.     border-bottom-width: 9px;

  268.   }

  269. 

  270.   .block-search-wide__wrapper .search-form__submit:focus span:after {

  271.     content: none;

  272.   }

  273. }

  274. 

  275. @media screen and (-ms-high-contrast: active) {

  276.   /* IE11's high contrast show will not show the background image, so we show the text. */

  277.   .block-search-wide__wrapper .search-form__submit .visually-hidden {

  278.     position: static;

  279.     overflow: visible;

  280.     clip: auto;

  281.     width: auto;

  282.     height: auto;

  283.     text-align: center;

  284.   }

  285. 

  286.   /* Edge's high contrast does show the background image, so we hide it. */

  287.   .block-search-wide__wrapper .search-form__submit .icon--search {

  288.     display: none;

  289.   }

  290. }

  291. 

  292. [dir="ltr"] .block-search-wide__container {

  293.   padding-right: 2.25rem;

  294. }

  295. 

  296. [dir="rtl"] .block-search-wide__container {

  297.   padding-left: 2.25rem;

  298. }

  299. 

  300. .block-search-wide__container {

  301.   max-width: 84.375rem;

  302. }

  303. 

  304. .block-search-wide__grid {

  305.   display: -ms-grid;

  306.   display: grid;

  307.   -ms-grid-columns: (1fr)[14];

  308.   grid-template-columns: repeat(14, 1fr);

  309.   grid-column-gap: 2.25rem;

  310. }

  311. 

  312. /* Override specificity from container-inline.module.css */

  313. 

  314. .container-inline .block-search-wide__container {

  315.   display: block;

  316. }

  317. 

  318. .container-inline .block-search-wide__grid {

  319.   display: -ms-grid;

  320.   display: grid;

  321. }

  322. 

  323. .block-search-wide__button {

  324.   position: relative;

  325.   display: none;

  326.   width: 3.375rem;

  327.   height: 6.75rem;

  328.   cursor: pointer;

  329.   color: #0d1214; /* Affects SVG search icon. */

  330.   border: 0;

  331.   background: transparent;

  332.   -webkit-appearance: none;

  333. }

  334. 

  335. .block-search-wide__button:focus {

  336.   position: relative;

  337.   outline: 0;

  338. }

  339. 

  340. .block-search-wide__button:focus:after {

  341.   position: absolute;

  342.   top: 50%;

  343.   left: 50%;

  344.   width: 80%;

  345.   height: 3.375rem;

  346.   content: "";

  347.   transform: translate(-50%, -50%);

  348.   border: solid 2px #2494db;

  349.   border-radius: 0.25rem;

  350. }

  351. 

  352. .block-search-wide__button[aria-expanded="true"] {

  353.   background: #000;

  354. }

  355. 

  356. .block-search-wide__button[aria-expanded="true"]:focus:after {

  357.   border-color: #fff;

  358. }

  359. 

  360. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before,

  361. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:after {

  362.   position: absolute;

  363.   top: 50%;

  364.   left: 50%;

  365.   width: 1.6875rem;

  366.   height: 0;

  367.   content: "";

  368.   border-top: solid 2px #fff;

  369. }

  370. 

  371. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before {

  372.   transform: translate(-50%, -50%) rotate(-45deg);

  373. }

  374. 

  375. .block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:after {

  376.   transform: translate(-50%, -50%) rotate(45deg);

  377. }

  378. 

  379. .block-search-wide__button[aria-expanded="true"] svg {

  380.   display: none;

  381. }

  382. 

  383. [dir="ltr"] .block-search-wide__button svg {

  384.   margin-left: auto;

  385. }

  386. 

  387. [dir="rtl"] .block-search-wide__button svg {

  388.   margin-right: auto;

  389. }

  390. 

  391. [dir="ltr"] .block-search-wide__button svg {

  392.   margin-right: auto;

  393. }

  394. 

  395. [dir="rtl"] .block-search-wide__button svg {

  396.   margin-left: auto;

  397. }

  398. 

  399. @media (forced-colors: active) {

  400. 

  401.   .block-search-wide__button {

  402.     background: ButtonFace;

  403.   }

  404. 

  405.   .block-search-wide__button path {

  406.     fill: ButtonText;

  407.   }

  408. }

  409. 

  410. /* Provide rudimentary access to site search if JS is disabled. */

  411. 

  412. html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {

  413.   visibility: visible;

  414.   max-height: 9rem;

  415. }

  416. 

  417. /* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */

  418. 

  419. [dir] .block-search-wide__wrapper input[type="search"] {

  420.   background-color: transparent;

  421.   background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */

  422.   background-repeat: no-repeat;

  423.   background-position: bottom left; /* LTR */

  424.   background-size: 0% 0.625rem;

  425. }

  426. 

  427. [dir] .block-search-wide__wrapper input[type="search"]:focus {

  428.   background-size: 100% 0.5625rem;

  429. }

  430. 

  431. [dir="rtl"] .block-search-wide__wrapper input[type="search"] {

  432.   background-position: bottom right;

  433. }

  434. 

  435. [dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {

  436.   transform-origin: right;

  437. }

  438. 

  439. @media (min-width: 75rem) {

  440. 

  441.   body:not(.is-always-mobile-nav) .block-search-wide__wrapper,

  442.   body:not(.is-always-mobile-nav) .block-search-wide__button {

  443.     display: block;

  444.   }

  445. }

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