header-search-wide.css

Same filename 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. /**

  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. .block-search-wide__wrapper {

  20.   position: absolute;

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

  22.   inset-block-start: 100%;

  23.   inset-inline-start: calc(-1 * var(--content-left));

  24.   display: none;

  25.   visibility: hidden;

  26.   overflow: hidden;

  27.   width: calc(100% + var(--content-left));

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

  29.   height: var(--sp8);

  30.   max-height: 0;

  31.   margin-block: 0;

  32.   margin-inline-start: 0;

  33.   margin-inline-end: 0;

  34.   padding-block: 0;

  35.   padding-inline-start: 0;

  36.   padding-inline-end: 0;

  37.   transition: all 0.2s;

  38.   border-inline-start: solid var(--content-left) var(--color--gray-20);

  39.   background: var(--color--black);

  40. }

  41. 

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

  43.   visibility: visible;

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

  45. }

  46. 

  47. .block-search-wide__wrapper form {

  48.   display: flex;

  49.   grid-column: 1 / 14;

  50. }

  51. 

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

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

  54.   height: var(--sp8);

  55.   padding-block: 0;

  56.   padding-inline-start: var(--sp12);

  57.   padding-inline-end: 0;

  58.   transition: background-size 0.4s;

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

  60.   border: solid 1px transparent;

  61.   box-shadow: none;

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

  63.   font-size: 2rem;

  64.   -webkit-appearance: none;

  65. }

  66. 

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

  68.   outline: solid 4px transparent;

  69.   outline-offset: -4px;

  70. }

  71. 

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

  73.   flex-grow: 1;

  74.   margin: 0;

  75. }

  76. 

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

  78.   display: flex;

  79.   margin: 0;

  80. }

  81. 

  82. .block-search-wide__wrapper .search-form__submit {

  83.   position: relative;

  84.   overflow: hidden;

  85.   align-self: stretch;

  86.   width: 6.25rem;

  87.   height: auto;

  88.   margin-block: 0;

  89.   margin-inline-start: 0;

  90.   margin-inline-end: 0;

  91.   padding-block: 0;

  92.   padding-inline-start: 0;

  93.   padding-inline-end: 0;

  94.   cursor: pointer;

  95.   border-color: transparent;

  96.   background-color: transparent;

  97. 

  98.   /*

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

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

  101.     */

  102. }

  103. 

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

  105.   position: absolute;

  106.   inset-block-start: 0;

  107.   inset-inline-end: 0;

  108.   display: block;

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

  110.   height: 100%;

  111.   pointer-events: none;

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

  113.   background-repeat: no-repeat;

  114.   background-position: center;

  115.   background-size: contain;

  116. }

  117. 

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

  119.   position: absolute;

  120.   inset-block-end: 0;

  121.   inset-inline-start: 0;

  122.   width: 100%;

  123.   height: 0;

  124.   content: "";

  125.   transition: transform 0.2s;

  126.   transform: scaleX(0);

  127.   transform-origin: left;

  128.   border-block-start: solid var(--sp0-5) var(--color--primary-50);

  129. }

  130. 

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

  132.   outline: solid 4px transparent;

  133.   outline-offset: -4px;

  134.   box-shadow: none;

  135. }

  136. 

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

  138.   transform: scaleX(1);

  139. }

  140. 

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

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

  143.     border-bottom-width: var(--sp0-5);

  144.   }

  145. 

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

  147.     content: none;

  148.   }

  149. }

  150. 

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

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

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

  154.     display: none;

  155.   }

  156. }

  157. 

  158. .block-search-wide__container {

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

  160.   padding-inline-end: var(--sp2);

  161. }

  162. 

  163. .block-search-wide__grid {

  164.   display: grid;

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

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

  167. }

  168. 

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

  170. 

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

  172.   display: block;

  173. }

  174. 

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

  176.   display: grid;

  177. }

  178. 

  179. .block-search-wide__button {

  180.   position: relative;

  181.   display: none;

  182.   width: var(--sp3);

  183.   height: var(--sp6);

  184.   cursor: pointer;

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

  186.   border: 0;

  187.   background: transparent;

  188.   -webkit-appearance: none;

  189. }

  190. 

  191. .block-search-wide__button:focus {

  192.   position: relative;

  193.   outline: 0;

  194. }

  195. 

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

  197.   position: absolute;

  198.   top: 50%;

  199.   left: 50%;

  200.   width: 80%;

  201.   height: var(--sp3);

  202.   content: "";

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

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

  205.   border-radius: 0.25rem;

  206. }

  207. 

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

  209.   background: var(--color--black);

  210. }

  211. 

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

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

  214. }

  215. 

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

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

  218.   position: absolute;

  219.   top: 50%;

  220.   left: 50%;

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

  222.   height: 0;

  223.   content: "";

  224.   border-block-start: solid 2px var(--color--white);

  225. }

  226. 

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

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

  229. }

  230. 

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

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

  233. }

  234. 

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

  236.   display: none;

  237. }

  238. 

  239. .block-search-wide__button svg {

  240.   margin-inline-start: auto;

  241.   margin-inline-end: auto;

  242. }

  243. 

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

  245.   .block-search-wide__button {

  246.     background: ButtonFace;

  247.   }

  248. 

  249.   .block-search-wide__button path {

  250.     fill: ButtonText;

  251.   }

  252. }

  253. 

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

  255. 

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

  257.   visibility: visible;

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

  259. }

  260. 

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

  262. 

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

  264.   background-color: transparent;

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

  266.   background-repeat: no-repeat;

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

  268.   background-size: 0% 0.625rem;

  269. }

  270. 

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

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

  273. }

  274. 

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

  276.   background-position: bottom right;

  277. }

  278. 

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

  280.   transform-origin: right;

  281. }

  282. 

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

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

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

  286.     display: block;

  287.   }

  288. }

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