header-search-narrow.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/header-search-narrow.css
  2. 11.x 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-right: -1.125rem;

  15.   margin-bottom: 2.25rem;

  16.   margin-left: -1.125rem;

  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: Lora, georgia, 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.     height: 4.5rem;

  111.   }

  112. }

  113. 

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

  115.   margin-left: 0;

  116. }

  117. 

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

  119.   margin-right: 0;

  120. }

  121. 

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

  123.   margin-right: 0;

  124. }

  125. 

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

  127.   margin-left: 0;

  128. }

  129. 

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

  131.   padding-left: 0;

  132. }

  133. 

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

  135.   padding-right: 0;

  136. }

  137. 

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

  139.   padding-right: 0;

  140. }

  141. 

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

  143.   padding-left: 0;

  144. }

  145. 

  146. .block-search-narrow .search-form__submit {

  147.   position: relative;

  148.   overflow: hidden;

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

  150.   align-self: stretch;

  151.   width: 3.375rem;

  152.   height: auto;

  153.   margin-top: 0;

  154.   margin-bottom: 0;

  155.   padding-top: 0;

  156.   padding-bottom: 0;

  157.   cursor: pointer;

  158.   border-color: transparent;

  159.   background-color: transparent;

  160. 

  161.   /*

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

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

  164.     */

  165. }

  166. 

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

  168.   left: 0;

  169. }

  170. 

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

  172.   right: 0;

  173. }

  174. 

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

  176.   position: absolute;

  177.   top: 0;

  178.   display: block;

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

  180.   height: 100%;

  181.   pointer-events: none;

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

  183.   background-repeat: no-repeat;

  184.   background-position: center;

  185.   background-size: auto;

  186. }

  187. 

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

  189.   left: 0;

  190. }

  191. 

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

  193.   right: 0;

  194. }

  195. 

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

  197.   position: absolute;

  198.   bottom: 0;

  199.   width: 100%;

  200.   height: 0;

  201.   content: "";

  202.   transition: transform 0.2s;

  203.   transform: scaleX(0);

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

  205.   border-top: solid 0.3125rem #2494db;

  206. }

  207. 

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

  209. 

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

  211.     background: buttontext;

  212.     -webkit-mask-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");

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

  214.     -webkit-mask-repeat: no-repeat;

  215.     mask-repeat: no-repeat;

  216.     -webkit-mask-position: center;

  217.     mask-position: center;

  218.   }

  219. }

  220. 

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

  222.   outline: solid 4px transparent;

  223.   outline-offset: -4px;

  224.   box-shadow: none;

  225. }

  226. 

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

  228.   transform: scaleX(1);

  229. }

  230. 

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

  232. 

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

  234.     border-bottom-width: 9px;

  235.   }

  236. 

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

  238.     content: none;

  239.   }

  240. }

  241. 

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

  243. 

  244.   .block-search-narrow .search-form__submit {

  245.     width: 5rem;

  246.   }

  247. }

  248. 

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

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

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

  252.     position: static;

  253.     overflow: visible;

  254.     clip: auto;

  255.     width: auto;

  256.     height: auto;

  257.     text-align: center;

  258.   }

  259. 

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

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

  262.     display: none;

  263.   }

  264. }

  265. 

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

  267. 

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

  269. 

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

  271.     margin-left: 0;

  272.   }

  273. 

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

  275.     margin-right: 0;

  276.   }

  277. 

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

  279.     margin-right: 0;

  280.   }

  281. 

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

  283.     margin-left: 0;

  284.   }

  285. }

  286. 

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

  288. 

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

  290.     display: none;

  291.   }

  292. }

  293. 

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

  295.   background-position: bottom right;

  296. }

  297. 

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

  299.   transform-origin: right;

  300. }

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