You are here

Home » API reference » Drupal 10

header-search-narrow.css in Drupal 10

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

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

  27.   margin-left: calc(-1 * var(--sp));

  28.   margin-right: calc(-1 * var(--sp));

  29.   margin-bottom: var(--sp2);

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

  31. }

  32. 

  33. .block-search-narrow .search-block-form {

  34.     display: flex;

  35.   }

  36. 

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

  38.     flex-grow: 1;

  39.     margin: 0;

  40.   }

  41. 

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

  43.     margin: 0;

  44.   }

  45. 

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

  47.     padding-left: var(--sp)

  48. }

  49. 

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

  51.     padding-right: var(--sp)

  52. }

  53. 

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

  55.     padding-right: var(--sp)

  56. }

  57. 

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

  59.     padding-left: var(--sp)

  60. }

  61. 

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

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

  64.     height: calc(3 * var(--sp));

  65.     padding-top: 0;

  66.     padding-bottom: 0;

  67.     transition: background-size 0.4s;

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

  69.     border: solid 1px transparent;

  70.     background-color: transparent;

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

  72.     background-repeat: no-repeat;

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

  74.     background-size: 0% 0.3125rem;

  75.     box-shadow: none;

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

  77.     font-size: 1rem;

  78.     -webkit-appearance: none

  79.   }

  80. 

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

  82.       width: 2.5rem;

  83.       opacity: 0.5;

  84.     }

  85. 

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

  87.       outline: solid 4px transparent;

  88.       outline-offset: -4px;

  89.       background-size: 100% 0.3125rem

  90. 

  91.       /*

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

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

  94.       */

  95.     }

  96. 

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

  98. 

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

  100.         border-bottom-width: 5px

  101.     }

  102.       }

  103. 

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

  105. 

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

  107.       padding-left: var(--sp2)

  108.   }

  109. 

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

  111.       padding-right: var(--sp2)

  112.   }

  113. 

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

  115.       padding-right: var(--sp2)

  116.   }

  117. 

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

  119.       padding-left: var(--sp2)

  120.   }

  121. 

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

  123.       height: calc(4 * var(--sp))

  124.   }

  125.     }

  126. 

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

  128.     margin-left: 0

  129. }

  130. 

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

  132.     margin-right: 0

  133. }

  134. 

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

  136.     margin-right: 0

  137. }

  138. 

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

  140.     margin-left: 0

  141. }

  142. 

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

  144.     padding-left: 0

  145. }

  146. 

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

  148.     padding-right: 0

  149. }

  150. 

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

  152.     padding-right: 0

  153. }

  154. 

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

  156.     padding-left: 0

  157. }

  158. 

  159. .block-search-narrow .search-form__submit {

  160.     position: relative;

  161.     overflow: hidden;

  162.     align-self: stretch;

  163.     width: var(--sp3);

  164.     height: auto;

  165.     margin-top: 0;

  166.     margin-bottom: 0;

  167.     padding-top: 0;

  168.     padding-bottom: 0;

  169.     cursor: pointer;

  170.     border-color: transparent;

  171.     background-color: transparent

  172. 

  173.     /*

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

  175.       images or SVGs that are nested directly within a 
  176.     */

  177.   }

  178. 

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

  180.       left: 0

  181. }

  182. 

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

  184.       right: 0

  185. }

  186. 

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

  188.       position: absolute;

  189.       top: 0;

  190.       display: block;

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

  192.       height: 100%;

  193.       pointer-events: none;

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

  195.       background-repeat: no-repeat;

  196.       background-position: center;

  197.       background-size: auto

  198.     }

  199. 

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

  201.         left: 0

  202. }

  203. 

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

  205.         right: 0

  206. }

  207. 

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

  209.         position: absolute;

  210.         bottom: 0;

  211.         width: 100%;

  212.         height: 0;

  213.         content: "";

  214.         transition: transform 0.2s;

  215.         transform: scaleX(0);

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

  217.         border-top: solid 5px var(--color--primary-50);

  218.       }

  219. 

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

  221. 

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

  223.         background: buttontext;

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

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

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

  227.         mask-repeat: no-repeat;

  228.         -webkit-mask-position: center;

  229.         mask-position: center

  230.     }

  231.       }

  232. 

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

  234.       outline: solid 4px transparent;

  235.       outline-offset: -4px;

  236.       box-shadow: none

  237.     }

  238. 

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

  240.         transform: scaleX(1);

  241.       }

  242. 

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

  244. 

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

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

  247.     }

  248. 

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

  250.           content: none;

  251.         }

  252.       }

  253. 

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

  255. 

  256. .block-search-narrow .search-form__submit {

  257.       width: 5rem

  258.   }

  259.     }

  260. 

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

  262. 

  263. .block-search-narrow .search-form__submit {

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

  265.   }

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

  267.         position: static;

  268.         overflow: visible;

  269.         clip: auto;

  270.         width: auto;

  271.         height: auto;

  272.         text-align: center;

  273.       }

  274. 

  275. .block-search-narrow .search-form__submit {

  276. 

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

  278.   }

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

  280.         display: none;

  281.       }

  282.     }

  283. 

  284. .block-search-narrow {

  285. 

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

  287. }

  288. 

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

  290. 

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

  292.     margin-left: 0

  293.   }

  294. 

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

  296.     margin-right: 0

  297.   }

  298. 

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

  300.     margin-right: 0

  301.   }

  302. 

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

  304.     margin-left: 0

  305.   }

  306.   }

  307. 

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

  309. 

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

  311.     display: none

  312. }

  313.   }

  314. 

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

  316.     background-position: bottom right;

  317.   }

  318. 

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

  320.     transform-origin: right;

  321.   }