You are here

Home » API reference » Drupal 9

header-search-narrow.css in Drupal 9

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

Header Search Narrow Block.

File

core/themes/olivero/css/components/header-search-narrow.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 Narrow Block.

  11.  */

  12. 

  13. .block-search-narrow {

  14.   margin-left: -1.125rem;

  15.   margin-right: -1.125rem;

  16.   margin-bottom: 2.25rem;

  17.   background: #000

  18. }

  19. 

  20. .block-search-narrow .search-block-form {

  21.     display: flex;

  22.   }

  23. 

  24. .block-search-narrow .form-item {

  25.     flex-grow: 1;

  26.     margin: 0;

  27.   }

  28. 

  29. .block-search-narrow .form-actions {

  30.     margin: 0;

  31.   }

  32. 

  33. [dir="ltr"] .block-search-narrow input[type="search"] {

  34.     padding-left: 1.125rem

  35. }

  36. 

  37. [dir="rtl"] .block-search-narrow input[type="search"] {

  38.     padding-right: 1.125rem

  39. }

  40. 

  41. [dir="ltr"] .block-search-narrow input[type="search"] {

  42.     padding-right: 1.125rem

  43. }

  44. 

  45. [dir="rtl"] .block-search-narrow input[type="search"] {

  46.     padding-left: 1.125rem

  47. }

  48. 

  49. .block-search-narrow input[type="search"] {

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

  51.     height: 3.375rem;

  52.     padding-top: 0;

  53.     padding-bottom: 0;

  54.     transition: background-size 0.4s;

  55.     color: #fff;

  56.     border: solid 1px transparent;

  57.     background-color: transparent;

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

  59.     background-repeat: no-repeat;

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

  61.     background-size: 0% 0.3125rem;

  62.     box-shadow: none;

  63.     font-family: serif;

  64.     font-size: 1rem;

  65.     -webkit-appearance: none

  66.   }

  67. 

  68. .block-search-narrow input[type="search"]::-ms-clear {

  69.       width: 2.5rem;

  70.       opacity: 0.5;

  71.     }

  72. 

  73. .block-search-narrow input[type="search"]:focus {

  74.       outline: solid 4px transparent;

  75.       outline-offset: -4px;

  76.       background-size: 100% 0.3125rem

  77. 

  78.       /*

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

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

  81.       */

  82.     }

  83. 

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

  85. 

  86. .block-search-narrow input[type="search"]:focus {

  87.         border-bottom-width: 5px

  88.     }

  89.       }

  90. 

  91. @media (min-width: 43.75rem) {

  92. 

  93. [dir="ltr"] .block-search-narrow input[type="search"] {

  94.       padding-left: 2.25rem

  95.   }

  96. 

  97. [dir="rtl"] .block-search-narrow input[type="search"] {

  98.       padding-right: 2.25rem

  99.   }

  100. 

  101. [dir="ltr"] .block-search-narrow input[type="search"] {

  102.       padding-right: 2.25rem

  103.   }

  104. 

  105. [dir="rtl"] .block-search-narrow input[type="search"] {

  106.       padding-left: 2.25rem

  107.   }

  108. 

  109. .block-search-narrow input[type="search"] {

  110.       padding-top: 2.25rem;

  111.       padding-bottom: 2.25rem

  112.   }

  113.     }

  114. 

  115. [dir="ltr"] .block-search-narrow .search-form__submit {

  116.     margin-left: 0

  117. }

  118. 

  119. [dir="rtl"] .block-search-narrow .search-form__submit {

  120.     margin-right: 0

  121. }

  122. 

  123. [dir="ltr"] .block-search-narrow .search-form__submit {

  124.     margin-right: 0

  125. }

  126. 

  127. [dir="rtl"] .block-search-narrow .search-form__submit {

  128.     margin-left: 0

  129. }

  130. 

  131. [dir="ltr"] .block-search-narrow .search-form__submit {

  132.     padding-left: 0

  133. }

  134. 

  135. [dir="rtl"] .block-search-narrow .search-form__submit {

  136.     padding-right: 0

  137. }

  138. 

  139. [dir="ltr"] .block-search-narrow .search-form__submit {

  140.     padding-right: 0

  141. }

  142. 

  143. [dir="rtl"] .block-search-narrow .search-form__submit {

  144.     padding-left: 0

  145. }

  146. 

  147. .block-search-narrow .search-form__submit {

  148.     position: relative;

  149.     overflow: hidden;

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

  151.     align-self: stretch;

  152.     width: 3.375rem;

  153.     height: auto;

  154.     margin-top: 0;

  155.     margin-bottom: 0;

  156.     padding-top: 0;

  157.     padding-bottom: 0;

  158.     cursor: pointer;

  159.     border-color: transparent;

  160.     background-color: transparent

  161. 

  162.     /*

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

  164.       images or SVGs that are nested directly within a 
  165.     */

  166.   }

  167. 

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

  169.       left: 0

  170. }

  171. 

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

  173.       right: 0

  174. }

  175. 

  176. .block-search-narrow .search-form__submit .icon--search {

  177.       position: absolute;

  178.       top: 0;

  179.       display: block;

  180.       width: 100%; /* Width of the SVG background image. */

  181.       height: 100%;

  182.       pointer-events: none;

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

  184.       background-repeat: no-repeat;

  185.       background-position: center;

  186.       background-size: auto

  187.     }

  188. 

  189. [dir="ltr"] .block-search-narrow .search-form__submit .icon--search:after {

  190.         left: 0

  191. }

  192. 

  193. [dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {

  194.         right: 0

  195. }

  196. 

  197. .block-search-narrow .search-form__submit .icon--search:after {

  198.         position: absolute;

  199.         bottom: 0;

  200.         width: 100%;

  201.         height: 0;

  202.         content: "";

  203.         transition: transform 0.2s;

  204.         transform: scaleX(0);

  205.         transform-origin: left; /* LTR */

  206.         border-top: solid 5px #2494db;

  207.       }

  208. 

  209. .block-search-narrow .search-form__submit:focus {

  210.       outline: solid 4px transparent;

  211.       outline-offset: -4px;

  212.       box-shadow: none

  213.     }

  214. 

  215. .block-search-narrow .search-form__submit:focus span:after {

  216.         transform: scaleX(1);

  217.       }

  218. 

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

  220. 

  221. .block-search-narrow .search-form__submit:focus {

  222.         border-bottom-width: 9px

  223.     }

  224. 

  225.         .block-search-narrow .search-form__submit:focus span:after {

  226.           content: none;

  227.         }

  228.       }

  229. 

  230. @media (min-width: 43.75rem) {

  231. 

  232. .block-search-narrow .search-form__submit {

  233.       width: 5rem

  234.   }

  235.     }

  236. 

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

  238. 

  239. .block-search-narrow .search-form__submit {

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

  241.   }

  242.       .block-search-narrow .search-form__submit .visually-hidden {

  243.         position: static;

  244.         overflow: visible;

  245.         clip: auto;

  246.         width: auto;

  247.         height: auto;

  248.         text-align: center;

  249.       }

  250. 

  251. .block-search-narrow .search-form__submit {

  252. 

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

  254.   }

  255.       .block-search-narrow .search-form__submit .icon--search {

  256.         display: none;

  257.       }

  258.     }

  259. 

  260. .block-search-narrow {

  261. 

  262.   /* 500px is the width of the primary nav at mobile. */

  263. }

  264. 

  265. @media (min-width: 31.25rem) {

  266. 

  267. [dir="ltr"] .block-search-narrow {

  268.     margin-left: 0

  269.   }

  270. 

  271. [dir="rtl"] .block-search-narrow {

  272.     margin-right: 0

  273.   }

  274. 

  275. [dir="ltr"] .block-search-narrow {

  276.     margin-right: 0

  277.   }

  278. 

  279. [dir="rtl"] .block-search-narrow {

  280.     margin-left: 0

  281.   }

  282.   }

  283. 

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

  285. 

  286. body:not(.is-always-mobile-nav) .block-search-narrow {

  287.     display: none

  288. }

  289.   }

  290. 

  291. [dir="rtl"] .block-search-narrow input[type="search"] {

  292.     background-position: bottom right;

  293.   }

  294. 

  295. [dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {

  296.     transform-origin: right;

  297.   }