You are here

Home » API reference » Drupal 10

header-search-wide.css in Drupal 10

Same filename and directory in other branches
  1. 9 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. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

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

  27. 

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

  29.   position: static;

  30. }

  31. 

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

  33.   left: 0;

  34. }

  35. 

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

  37.   right: 0;

  38. }

  39. 

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

  41.   margin-left: 0;

  42. }

  43. 

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

  45.   margin-right: 0;

  46. }

  47. 

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

  49.   margin-right: 0;

  50. }

  51. 

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

  53.   margin-left: 0;

  54. }

  55. 

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

  57.   padding-left: 0;

  58. }

  59. 

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

  61.   padding-right: 0;

  62. }

  63. 

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

  65.   padding-right: 0;

  66. }

  67. 

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

  69.   padding-left: 0;

  70. }

  71. 

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

  73.   border-left: solid var(--content-left) var(--color--gray-20);

  74. }

  75. 

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

  77.   border-right: solid var(--content-left) var(--color--gray-20);

  78. }

  79. 

  80. .block-search-wide__wrapper {

  81.   position: absolute;

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

  83.   top: 100%;

  84.   display: none;

  85.   visibility: hidden;

  86.   overflow: hidden;

  87.   width: 100vw;

  88.   max-width: var(--max-bg-color);

  89.   height: var(--sp8);

  90.   max-height: 0;

  91.   margin-top: 0;

  92.   margin-bottom: 0;

  93.   padding-top: 0;

  94.   padding-bottom: 0;

  95.   transition: all 0.2s;

  96.   background: var(--color--black)

  97. }

  98. 

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

  100.     visibility: visible;

  101.     max-height: var(--sp8);

  102.   }

  103. 

  104. .block-search-wide__wrapper form {

  105.     display: flex;

  106.     grid-column: 1 / 14;

  107.   }

  108. 

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

  110.     padding-left: var(--sp12);

  111. }

  112. 

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

  114.     padding-right: var(--sp12);

  115. }

  116. 

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

  118.     padding-right: 0;

  119. }

  120. 

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

  122.     padding-left: 0;

  123. }

  124. 

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

  126.     width: calc(100% + var(--sp2));

  127.     height: var(--sp8);

  128.     padding-top: 0;

  129.     padding-bottom: 0;

  130.     transition: background-size 0.4s;

  131.     color: var(--color--white);

  132.     border: solid 1px transparent;

  133.     box-shadow: none;

  134.     font-family: var(--font-serif);

  135.     font-size: 2rem;

  136.     -webkit-appearance: none

  137.   }

  138. 

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

  140.       width: 2.5rem;

  141.       opacity: 0.5;

  142.     }

  143. 

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

  145.       outline: solid 4px transparent;

  146.       outline-offset: -4px

  147. 

  148.       /*

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

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

  151.       */

  152.     }

  153. 

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

  155. 

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

  157.         border-bottom-width: var(--sp0-5)

  158.     }

  159.       }

  160. 

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

  162.     flex-grow: 1;

  163.     margin: 0;

  164.   }

  165. 

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

  167.     display: flex;

  168.     margin: 0;

  169.   }

  170. 

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

  172.     margin-left: 0;

  173. }

  174. 

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

  176.     margin-right: 0;

  177. }

  178. 

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

  180.     margin-right: 0;

  181. }

  182. 

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

  184.     margin-left: 0;

  185. }

  186. 

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

  188.     padding-left: 0;

  189. }

  190. 

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

  192.     padding-right: 0;

  193. }

  194. 

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

  196.     padding-right: 0;

  197. }

  198. 

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

  200.     padding-left: 0;

  201. }

  202. 

  203. .block-search-wide__wrapper .search-form__submit {

  204.     position: relative;

  205.     overflow: hidden;

  206.     align-self: stretch;

  207.     width: 6.25rem;

  208.     height: auto;

  209.     margin-top: 0;

  210.     margin-bottom: 0;

  211.     padding-top: 0;

  212.     padding-bottom: 0;

  213.     cursor: pointer;

  214.     border-color: transparent;

  215.     background-color: transparent

  216. 

  217.     /*

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

  219.       images or SVGs that are nested directly within a 
  220.     */

  221.   }

  222. 

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

  224.       right: 0;

  225. }

  226. 

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

  228.       left: 0;

  229. }

  230. 

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

  232.       position: absolute;

  233.       top: 0;

  234.       display: block;

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

  236.       height: 100%;

  237.       pointer-events: none;

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

  239.       background-repeat: no-repeat;

  240.       background-position: center;

  241.       background-size: contain

  242.     }

  243. 

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

  245.         left: 0;

  246. }

  247. 

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

  249.         right: 0;

  250. }

  251. 

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

  253.         position: absolute;

  254.         bottom: 0;

  255.         width: 100%;

  256.         height: 0;

  257.         content: "";

  258.         transition: transform 0.2s;

  259.         transform: scaleX(0);

  260.         transform-origin: left;

  261.         border-top: solid var(--sp0-5) var(--color--primary-50);

  262.       }

  263. 

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

  265.       outline: solid 4px transparent;

  266.       outline-offset: -4px;

  267.       box-shadow: none

  268.     }

  269. 

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

  271.         transform: scaleX(1);

  272.       }

  273. 

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

  275. 

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

  277.         border-bottom-width: var(--sp0-5)

  278.     }

  279. 

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

  281.           content: none;

  282.         }

  283.       }

  284. 

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

  286. 

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

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

  289.   }

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

  291.         position: static;

  292.         overflow: visible;

  293.         clip: auto;

  294.         width: auto;

  295.         height: auto;

  296.         text-align: center;

  297.       }

  298. 

  299. .block-search-wide__wrapper .search-form__submit {

  300. 

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

  302.   }

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

  304.         display: none;

  305.       }

  306.     }

  307. 

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

  309.   padding-right: var(--sp2);

  310. }

  311. 

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

  313.   padding-left: var(--sp2);

  314. }

  315. 

  316. .block-search-wide__container {

  317.   max-width: var(--max-width);

  318. }

  319. 

  320. .block-search-wide__grid {

  321.   display: grid;

  322.   grid-template-columns: repeat(var(--grid-col-count), 1fr);

  323.   grid-column-gap: var(--grid-gap);

  324. }

  325. 

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

  327. 

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

  329.     display: block;

  330.   }

  331. 

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

  333.     display: grid;

  334.   }

  335. 

  336. .block-search-wide__button {

  337.   position: relative;

  338.   display: none;

  339.   width: var(--sp3);

  340.   height: var(--sp6);

  341.   cursor: pointer;

  342.   color: var(--color-text-neutral-loud); /* Affects SVG search icon. */

  343.   border: 0;

  344.   background: transparent;

  345.   -webkit-appearance: none

  346. }

  347. 

  348. .block-search-wide__button:focus {

  349.     position: relative;

  350.     outline: 0

  351.   }

  352. 

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

  354.       position: absolute;

  355.       top: 50%;

  356.       left: 50%;

  357.       width: 80%;

  358.       height: var(--sp3);

  359.       content: "";

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

  361.       border: solid 2px var(--color--primary-50);

  362.       border-radius: 0.25rem;

  363.     }

  364. 

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

  366.     background: var(--color--black)

  367.   }

  368. 

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

  370.       border-color: var(--color--white);

  371.     }

  372. 

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

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

  375.         position: absolute;

  376.         top: 50%;

  377.         left: 50%;

  378.         width: var(--sp1-5);

  379.         height: 0;

  380.         content: "";

  381.         border-top: solid 2px var(--color--white);

  382.       }

  383. 

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

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

  386.       }

  387. 

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

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

  390.       }

  391. 

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

  393.       display: none;

  394.     }

  395. 

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

  397.     margin-left: auto;

  398. }

  399. 

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

  401.     margin-right: auto;

  402. }

  403. 

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

  405.     margin-right: auto;

  406. }

  407. 

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

  409.     margin-left: auto;

  410. }

  411. 

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

  413. 

  414. .block-search-wide__button {

  415.     background: ButtonFace

  416. }

  417. 

  418.     .block-search-wide__button path {

  419.       fill: ButtonText;

  420.     }

  421.   }

  422. 

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

  424. 

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

  426.   visibility: visible;

  427.   max-height: var(--sp8);

  428. }

  429. 

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

  431. 

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

  433.   background-color: transparent;

  434.   background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */

  435.   background-repeat: no-repeat;

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

  437.   background-size: 0% 0.625rem

  438. }

  439. 

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

  441.     background-size: 100% var(--sp0-5);

  442.   }

  443. 

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

  445.     background-position: bottom right;

  446.   }

  447. 

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

  449.     transform-origin: right;

  450.   }

  451. 

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

  453. 

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

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

  456.       display: block

  457.   }

  458.     }