Issue #3173012 by mherchel, kiran.kadam911, andy-blum, Gauravmahlawat,... (25de8095) · Commits · project / drupal

core/themes/olivero/css/components/header-search-narrow.css

+49 −49

Original line number	Diff line number	Diff line
		@@ -10,43 +10,43 @@
		* Header Search Narrow Block.
		*/

		.search-narrow__wrapper {
		.block-search-narrow {
		margin-left: -1.125rem;
		margin-right: -1.125rem;
		margin-bottom: 2.25rem;
		background: #000
		}

		.search-narrow__wrapper form {
		.block-search-narrow .search-block-form {
		display: flex;
		}

		.search-narrow__wrapper .form-item {
		.block-search-narrow .form-item {
		flex-grow: 1;
		margin: 0;
		}

		.search-narrow__wrapper .form-actions {
		.block-search-narrow .form-actions {
		margin: 0;
		}

		[dir="ltr"] .search-narrow__wrapper input[type="search"] {
		[dir="ltr"] .block-search-narrow input[type="search"] {
		padding-left: 1.125rem
		}

		[dir="rtl"] .search-narrow__wrapper input[type="search"] {
		[dir="rtl"] .block-search-narrow input[type="search"] {
		padding-right: 1.125rem
		}

		[dir="ltr"] .search-narrow__wrapper input[type="search"] {
		[dir="ltr"] .block-search-narrow input[type="search"] {
		padding-right: 1.125rem
		}

		[dir="rtl"] .search-narrow__wrapper input[type="search"] {
		[dir="rtl"] .block-search-narrow input[type="search"] {
		padding-left: 1.125rem
		}

		.search-narrow__wrapper input[type="search"] {
		.block-search-narrow input[type="search"] {
		width: calc(100% + 2.25rem);
		height: 3.375rem;
		padding-top: 0;
		@@ -65,12 +65,12 @@
		-webkit-appearance: none
		}

		.search-narrow__wrapper input[type="search"]::-ms-clear {
		.block-search-narrow input[type="search"]::-ms-clear {
		width: 2.5rem;
		opacity: 0.5;
		}

		.search-narrow__wrapper input[type="search"]:focus {
		.block-search-narrow input[type="search"]:focus {
		outline: solid 4px transparent;
		outline-offset: -4px;
		background-size: 100% 0.3125rem
		@@ -83,68 +83,68 @@

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

		.search-narrow__wrapper input[type="search"]:focus {
		.block-search-narrow input[type="search"]:focus {
		border-bottom-width: 5px
		}
		}

		@media (min-width: 43.75rem) {

		[dir="ltr"] .search-narrow__wrapper input[type="search"] {
		[dir="ltr"] .block-search-narrow input[type="search"] {
		padding-left: 2.25rem
		}

		[dir="rtl"] .search-narrow__wrapper input[type="search"] {
		[dir="rtl"] .block-search-narrow input[type="search"] {
		padding-right: 2.25rem
		}

		[dir="ltr"] .search-narrow__wrapper input[type="search"] {
		[dir="ltr"] .block-search-narrow input[type="search"] {
		padding-right: 2.25rem
		}

		[dir="rtl"] .search-narrow__wrapper input[type="search"] {
		[dir="rtl"] .block-search-narrow input[type="search"] {
		padding-left: 2.25rem
		}

		.search-narrow__wrapper input[type="search"] {
		.block-search-narrow input[type="search"] {
		padding-top: 2.25rem;
		padding-bottom: 2.25rem
		}
		}

		[dir="ltr"] .search-narrow__wrapper .search-form__submit {
		[dir="ltr"] .block-search-narrow .search-form__submit {
		margin-left: 0
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit {
		[dir="rtl"] .block-search-narrow .search-form__submit {
		margin-right: 0
		}

		[dir="ltr"] .search-narrow__wrapper .search-form__submit {
		[dir="ltr"] .block-search-narrow .search-form__submit {
		margin-right: 0
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit {
		[dir="rtl"] .block-search-narrow .search-form__submit {
		margin-left: 0
		}

		[dir="ltr"] .search-narrow__wrapper .search-form__submit {
		[dir="ltr"] .block-search-narrow .search-form__submit {
		padding-left: 0
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit {
		[dir="rtl"] .block-search-narrow .search-form__submit {
		padding-right: 0
		}

		[dir="ltr"] .search-narrow__wrapper .search-form__submit {
		[dir="ltr"] .block-search-narrow .search-form__submit {
		padding-right: 0
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit {
		[dir="rtl"] .block-search-narrow .search-form__submit {
		padding-left: 0
		}

		.search-narrow__wrapper .search-form__submit {
		.block-search-narrow .search-form__submit {
		position: relative;
		overflow: hidden;
		-ms-grid-row-align: stretch;
		@@ -165,15 +165,15 @@
		*/
		}

		[dir="ltr"] .search-narrow__wrapper .search-form__submit .icon--search {
		[dir="ltr"] .block-search-narrow .search-form__submit .icon--search {
		left: 0
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit .icon--search {
		[dir="rtl"] .block-search-narrow .search-form__submit .icon--search {
		right: 0
		}

		.search-narrow__wrapper .search-form__submit .icon--search {
		.block-search-narrow .search-form__submit .icon--search {
		position: absolute;
		top: 0;
		display: block;
		@@ -186,15 +186,15 @@
		background-size: auto
		}

		[dir="ltr"] .search-narrow__wrapper .search-form__submit .icon--search:after {
		[dir="ltr"] .block-search-narrow .search-form__submit .icon--search:after {
		left: 0
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit .icon--search:after {
		[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
		right: 0
		}

		.search-narrow__wrapper .search-form__submit .icon--search:after {
		.block-search-narrow .search-form__submit .icon--search:after {
		position: absolute;
		bottom: 0;
		width: 100%;
		@@ -206,40 +206,40 @@
		border-top: solid 5px #2494db;
		}

		.search-narrow__wrapper .search-form__submit:focus {
		.block-search-narrow .search-form__submit:focus {
		outline: solid 4px transparent;
		outline-offset: -4px;
		box-shadow: none
		}

		.search-narrow__wrapper .search-form__submit:focus span:after {
		.block-search-narrow .search-form__submit:focus span:after {
		transform: scaleX(1);
		}

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

		.search-narrow__wrapper .search-form__submit:focus {
		.block-search-narrow .search-form__submit:focus {
		border-bottom-width: 9px
		}

		.search-narrow__wrapper .search-form__submit:focus span:after {
		.block-search-narrow .search-form__submit:focus span:after {
		content: none;
		}
		}

		@media (min-width: 43.75rem) {

		.search-narrow__wrapper .search-form__submit {
		.block-search-narrow .search-form__submit {
		width: 5rem
		}
		}

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

		.search-narrow__wrapper .search-form__submit {
		.block-search-narrow .search-form__submit {
		/* IE11's high contrast show will not show the background image, so we show the text. */
		}
		.search-narrow__wrapper .search-form__submit .visually-hidden {
		.block-search-narrow .search-form__submit .visually-hidden {
		position: static;
		overflow: visible;
		clip: auto;
		@@ -248,50 +248,50 @@
		text-align: center;
		}

		.search-narrow__wrapper .search-form__submit {
		.block-search-narrow .search-form__submit {

		/* Edge's high contrast does show the background image, so we hide it. */
		}
		.search-narrow__wrapper .search-form__submit .icon--search {
		.block-search-narrow .search-form__submit .icon--search {
		display: none;
		}
		}

		.search-narrow__wrapper {
		.block-search-narrow {

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

		@media (min-width: 31.25rem) {

		[dir="ltr"] .search-narrow__wrapper {
		[dir="ltr"] .block-search-narrow {
		margin-left: 0
		}

		[dir="rtl"] .search-narrow__wrapper {
		[dir="rtl"] .block-search-narrow {
		margin-right: 0
		}

		[dir="ltr"] .search-narrow__wrapper {
		[dir="ltr"] .block-search-narrow {
		margin-right: 0
		}

		[dir="rtl"] .search-narrow__wrapper {
		[dir="rtl"] .block-search-narrow {
		margin-left: 0
		}
		}

		@media (min-width: 75rem) {

		body:not(.is-always-mobile-nav) .search-narrow__wrapper {
		body:not(.is-always-mobile-nav) .block-search-narrow {
		display: none
		}
		}

		[dir="rtl"] .search-narrow__wrapper input[type="search"] {
		[dir="rtl"] .block-search-narrow input[type="search"] {
		background-position: bottom right;
		}

		[dir="rtl"] .search-narrow__wrapper .search-form__submit .icon--search:after {
		[dir="rtl"] .block-search-narrow .search-form__submit .icon--search:after {
		transform-origin: right;
		}

core/themes/olivero/css/components/header-search-narrow.pcss.css

+4 −4

Original line number	Diff line number	Diff line
		@@ -5,12 +5,12 @@

		@import "../base/variables.pcss.css";

		.search-narrow__wrapper {
		.block-search-narrow {
		margin-inline: calc(-1 * var(--sp));
		margin-block-end: var(--sp2);
		background: var(--color--black);

		& form {
		& .search-block-form {
		display: flex;
		}

		@@ -162,13 +162,13 @@
		}
		}

		body:not(.is-always-mobile-nav) .search-narrow__wrapper {
		body:not(.is-always-mobile-nav) .block-search-narrow {
		@media (--nav) {
		display: none;
		}
		}

		[dir="rtl"] .search-narrow__wrapper {
		[dir="rtl"] .block-search-narrow {
		& input[type="search"] {
		background-position: bottom right;
		}

core/themes/olivero/css/components/header-search-wide.css

+76 −78

Original line number	Diff line number	Diff line
		@@ -12,59 +12,59 @@

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

		.search-block-form.contextual-region {
		.block-search-wide.contextual-region {
		position: static;
		}

		[dir="ltr"] .search-wide__wrapper {
		[dir="ltr"] .block-search-wide__wrapper {
		left: 0;
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		right: 0;
		}

		[dir="ltr"] .search-wide__wrapper {
		[dir="ltr"] .block-search-wide__wrapper {
		margin-left: 0;
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		margin-right: 0;
		}

		[dir="ltr"] .search-wide__wrapper {
		[dir="ltr"] .block-search-wide__wrapper {
		margin-right: 0;
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		margin-left: 0;
		}

		[dir="ltr"] .search-wide__wrapper {
		[dir="ltr"] .block-search-wide__wrapper {
		padding-left: 0;
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		padding-right: 0;
		}

		[dir="ltr"] .search-wide__wrapper {
		[dir="ltr"] .block-search-wide__wrapper {
		padding-right: 0;
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		padding-left: 0;
		}

		[dir="ltr"] .search-wide__wrapper {
		[dir="ltr"] .block-search-wide__wrapper {
		border-left: solid 90px #313637;
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		border-right: solid 90px #313637;
		}

		.search-wide__wrapper {
		.block-search-wide__wrapper {
		position: absolute;
		z-index: 1; /* Ensure left border shows above social region in IE11. */
		top: 100%;
		@@ -83,35 +83,35 @@
		background: #000
		}

		.search-wide__wrapper.is-active {
		.block-search-wide__wrapper.is-active {
		visibility: visible;
		max-height: 9rem;
		}

		.search-wide__wrapper form {
		.block-search-wide__wrapper form {
		display: flex;
		-ms-grid-column: 1;
		-ms-grid-column-span: 13;
		grid-column: 1 / 14;
		}

		[dir="ltr"] .search-wide__wrapper input[type="search"] {
		[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
		padding-left: 13.5rem;
		}

		[dir="rtl"] .search-wide__wrapper input[type="search"] {
		[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
		padding-right: 13.5rem;
		}

		[dir="ltr"] .search-wide__wrapper input[type="search"] {
		[dir="ltr"] .block-search-wide__wrapper input[type="search"] {
		padding-right: 0;
		}

		[dir="rtl"] .search-wide__wrapper input[type="search"] {
		[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
		padding-left: 0;
		}

		.search-wide__wrapper input[type="search"] {
		.block-search-wide__wrapper input[type="search"] {
		width: calc(100% + 2.25rem);
		height: 9rem;
		padding-top: 0;
		@@ -125,12 +125,12 @@
		-webkit-appearance: none
		}

		.search-wide__wrapper input[type="search"]::-ms-clear {
		.block-search-wide__wrapper input[type="search"]::-ms-clear {
		width: 2.5rem;
		opacity: 0.5;
		}

		.search-wide__wrapper input[type="search"]:focus {
		.block-search-wide__wrapper input[type="search"]:focus {
		outline: solid 4px transparent;
		outline-offset: -4px

		@@ -142,54 +142,54 @@

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

		.search-wide__wrapper input[type="search"]:focus {
		.block-search-wide__wrapper input[type="search"]:focus {
		border-bottom-width: 9px
		}
		}

		.search-wide__wrapper .form-item-keys {
		.block-search-wide__wrapper .form-item-keys {
		flex-grow: 1;
		margin: 0;
		}

		.search-wide__wrapper .form-actions {
		.block-search-wide__wrapper .form-actions {
		display: flex;
		margin: 0;
		}

		[dir="ltr"] .search-wide__wrapper .search-form__submit {
		[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
		margin-left: 0;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
		margin-right: 0;
		}

		[dir="ltr"] .search-wide__wrapper .search-form__submit {
		[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
		margin-right: 0;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
		margin-left: 0;
		}

		[dir="ltr"] .search-wide__wrapper .search-form__submit {
		[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
		padding-left: 0;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
		padding-right: 0;
		}

		[dir="ltr"] .search-wide__wrapper .search-form__submit {
		[dir="ltr"] .block-search-wide__wrapper .search-form__submit {
		padding-right: 0;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit {
		padding-left: 0;
		}

		.search-wide__wrapper .search-form__submit {
		.block-search-wide__wrapper .search-form__submit {
		position: relative;
		overflow: hidden;
		-ms-grid-row-align: stretch;
		@@ -210,15 +210,15 @@
		*/
		}

		[dir="ltr"] .search-wide__wrapper .search-form__submit .icon--search {
		[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search {
		right: 0;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit .icon--search {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search {
		left: 0;
		}

		.search-wide__wrapper .search-form__submit .icon--search {
		.block-search-wide__wrapper .search-form__submit .icon--search {
		position: absolute;
		top: 0;
		display: block;
		@@ -231,15 +231,15 @@
		background-size: contain
		}

		[dir="ltr"] .search-wide__wrapper .search-form__submit .icon--search:after {
		[dir="ltr"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
		left: 0;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit .icon--search:after {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
		right: 0;
		}

		.search-wide__wrapper .search-form__submit .icon--search:after {
		.block-search-wide__wrapper .search-form__submit .icon--search:after {
		position: absolute;
		bottom: 0;
		width: 100%;
		@@ -251,33 +251,33 @@
		border-top: solid 9px #2494db;
		}

		.search-wide__wrapper .search-form__submit:focus {
		.block-search-wide__wrapper .search-form__submit:focus {
		outline: solid 4px transparent;
		outline-offset: -4px;
		box-shadow: none
		}

		.search-wide__wrapper .search-form__submit:focus span:after {
		.block-search-wide__wrapper .search-form__submit:focus span:after {
		transform: scaleX(1);
		}

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

		.search-wide__wrapper .search-form__submit:focus {
		.block-search-wide__wrapper .search-form__submit:focus {
		border-bottom-width: 9px
		}

		.search-wide__wrapper .search-form__submit:focus span:after {
		.block-search-wide__wrapper .search-form__submit:focus span:after {
		content: none;
		}
		}

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

		.search-wide__wrapper .search-form__submit {
		.block-search-wide__wrapper .search-form__submit {
		/* IE11's high contrast show will not show the background image, so we show the text. */
		}
		.search-wide__wrapper .search-form__submit .visually-hidden {
		.block-search-wide__wrapper .search-form__submit .visually-hidden {
		position: static;
		overflow: visible;
		clip: auto;
		@@ -286,28 +286,28 @@
		text-align: center;
		}

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

		/* Edge's high contrast does show the background image, so we hide it. */
		}
		.search-wide__wrapper .search-form__submit .icon--search {
		.block-search-wide__wrapper .search-form__submit .icon--search {
		display: none;
		}
		}

		[dir="ltr"] .search-wide__container {
		[dir="ltr"] .block-search-wide__container {
		padding-right: 2.25rem;
		}

		[dir="rtl"] .search-wide__container {
		[dir="rtl"] .block-search-wide__container {
		padding-left: 2.25rem;
		}

		.search-wide__container {
		.block-search-wide__container {
		max-width: 84.375rem;
		}

		.search-wide__grid {
		.block-search-wide__grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: (1fr)[14];
		@@ -317,16 +317,16 @@

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

		.container-inline .search-wide__container {
		.container-inline .block-search-wide__container {
		display: block;
		}

		.container-inline .search-wide__grid {
		.container-inline .block-search-wide__grid {
		display: -ms-grid;
		display: grid;
		}

		.header-nav__search-button {
		.block-search-wide__button {
		position: relative;
		display: none;
		width: 3.375rem;
		@@ -338,12 +338,12 @@
		-webkit-appearance: none
		}

		.header-nav__search-button:focus {
		.block-search-wide__button:focus {
		position: relative;
		outline: 0
		}

		.header-nav__search-button:focus:after {
		.block-search-wide__button:focus:after {
		position: absolute;
		top: 50%;
		left: 50%;
		@@ -355,65 +355,63 @@
		border-radius: 0.25rem;
		}

		.header-nav__search-button[aria-expanded="true"] {
		.block-search-wide__button[aria-expanded="true"] {
		background: #000
		}

		.header-nav__search-button[aria-expanded="true"]:focus:after {
		.block-search-wide__button[aria-expanded="true"]:focus:after {
		border-color: #fff;
		}

		.header-nav__search-button[aria-expanded="true"] .header-nav__search-button__close:before,
		.header-nav__search-button[aria-expanded="true"] .header-nav__search-button__close:after {
		.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before,
		.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:after {
		position: absolute;
		/* stylelint-disable csstools/use-logical */
		top: 50%;
		left: 50%;
		/* stylelint-enable csstools/use-logical */
		width: 1.6875rem;
		height: 0;
		content: "";
		border-top: solid 2px #fff;
		}

		.header-nav__search-button[aria-expanded="true"] .header-nav__search-button__close:before {
		.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:before {
		transform: translate(-50%, -50%) rotate(-45deg);
		}

		.header-nav__search-button[aria-expanded="true"] .header-nav__search-button__close:after {
		.block-search-wide__button[aria-expanded="true"] .block-search-wide__button-close:after {
		transform: translate(-50%, -50%) rotate(45deg);
		}

		.header-nav__search-button[aria-expanded="true"] svg {
		.block-search-wide__button[aria-expanded="true"] svg {
		display: none;
		}

		[dir="ltr"] .header-nav__search-button svg {
		[dir="ltr"] .block-search-wide__button svg {
		margin-left: auto;
		}

		[dir="rtl"] .header-nav__search-button svg {
		[dir="rtl"] .block-search-wide__button svg {
		margin-right: auto;
		}

		[dir="ltr"] .header-nav__search-button svg {
		[dir="ltr"] .block-search-wide__button svg {
		margin-right: auto;
		}

		[dir="rtl"] .header-nav__search-button svg {
		[dir="rtl"] .block-search-wide__button svg {
		margin-left: auto;
		}

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

		html:not(.js) .search-block-form:focus-within .search-wide__wrapper {
		html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
		visibility: visible;
		max-height: 9rem;
		}

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

		[dir] .search-wide__wrapper input[type="search"] {
		[dir] .block-search-wide__wrapper input[type="search"] {
		background-color: transparent;
		background-image: linear-gradient(#2494db, #2494db); /* Two values are needed for IE11 support. */
		background-repeat: no-repeat;
		@@ -421,22 +419,22 @@ html:not(.js) .search-block-form:focus-within .search-wide__wrapper {
		background-size: 0% 0.625rem
		}

		[dir] .search-wide__wrapper input[type="search"]:focus {
		[dir] .block-search-wide__wrapper input[type="search"]:focus {
		background-size: 100% 0.5625rem;
		}

		[dir="rtl"] .search-wide__wrapper input[type="search"] {
		[dir="rtl"] .block-search-wide__wrapper input[type="search"] {
		background-position: bottom right;
		}

		[dir="rtl"] .search-wide__wrapper .search-form__submit .icon--search:after {
		[dir="rtl"] .block-search-wide__wrapper .search-form__submit .icon--search:after {
		transform-origin: right;
		}

		@media (min-width: 75rem) {

		body:not(.is-always-mobile-nav) .search-wide__wrapper,
		body:not(.is-always-mobile-nav) .header-nav__search-button {
		body:not(.is-always-mobile-nav) .block-search-wide__wrapper,
		body:not(.is-always-mobile-nav) .block-search-wide__button {
		display: block
		}
		}

core/themes/olivero/css/components/header-search-wide.pcss.css

+13 −15

Original line number	Diff line number	Diff line
		@@ -6,11 +6,11 @@
		@import "../base/variables.pcss.css";

		/* Override contextual links so we can position against .site-header. */
		.search-block-form.contextual-region {
		.block-search-wide.contextual-region {
		position: static;
		}

		.search-wide__wrapper {
		.block-search-wide__wrapper {
		position: absolute;
		z-index: 1; /* Ensure left border shows above social region in IE11. */
		inset-block-start: 100%;
		@@ -169,12 +169,12 @@
		}
		}

		.search-wide__container {
		.block-search-wide__container {
		max-width: var(--max-width);
		padding-inline-end: var(--sp2);
		}

		.search-wide__grid {
		.block-search-wide__grid {
		display: grid;
		grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
		grid-column-gap: var(--grid-gap--md);
		@@ -182,16 +182,16 @@

		/* Override specificity from container-inline.module.css */
		.container-inline {
		& .search-wide__container {
		& .block-search-wide__container {
		display: block;
		}

		& .search-wide__grid {
		& .block-search-wide__grid {
		display: grid;
		}
		}

		.header-nav__search-button {
		.block-search-wide__button {
		position: relative;
		display: none;
		width: var(--sp3);
		@@ -226,14 +226,12 @@
		border-color: var(--color--white);
		}

		& .header-nav__search-button__close {
		& .block-search-wide__button-close {
		&:before,
		&:after {
		position: absolute;
		/* stylelint-disable csstools/use-logical */
		top: 50%;
		left: 50%;
		/* stylelint-enable csstools/use-logical */
		width: var(--sp1-5);
		height: 0;
		content: "";
		@@ -261,13 +259,13 @@
		}

		/* Provide rudimentary access to site search if JS is disabled. */
		html:not(.js) .search-block-form:focus-within .search-wide__wrapper {
		html:not(.js) .search-block-form:focus-within .block-search-wide__wrapper {
		visibility: visible;
		max-height: var(--sp8);
		}

		/* Necessary to override specificity of transpiled PostCSS properties from default input focus styling. */
		[dir] .search-wide__wrapper input[type="search"] {
		[dir] .block-search-wide__wrapper input[type="search"] {
		background-color: transparent;
		background-image: linear-gradient(var(--color--blue-50), var(--color--blue-50)); /* Two values are needed for IE11 support. */
		background-repeat: no-repeat;
		@@ -279,7 +277,7 @@ html:not(.js) .search-block-form:focus-within .search-wide__wrapper {
		}
		}

		[dir="rtl"] .search-wide__wrapper {
		[dir="rtl"] .block-search-wide__wrapper {
		& input[type="search"] {
		background-position: bottom right;
		}
		@@ -290,8 +288,8 @@ html:not(.js) .search-block-form:focus-within .search-wide__wrapper {
		}

		body:not(.is-always-mobile-nav) {
		& .search-wide__wrapper,
		& .header-nav__search-button {
		& .block-search-wide__wrapper,
		& .block-search-wide__button {
		@media (--nav) {
		display: block;
		}

core/themes/olivero/js/search.es6.js

+10 −4

Original line number	Diff line number	Diff line
		((Drupal) => {
		const searchWideButton = document.querySelector('.header-nav__search-button');
		const searchWideWrapper = document.querySelector('.search-wide__wrapper');
		const searchWideButton = document.querySelector(
		'[data-drupal-selector="block-search-wide-button"]',
		);
		const searchWideWrapper = document.querySelector(
		'[data-drupal-selector="block-search-wide-wrapper"]',
		);

		function searchIsVisible() {
		return searchWideWrapper.classList.contains('is-active');
		@@ -40,13 +44,15 @@
		document.addEventListener('click', (e) => {
		if (
		e.target.matches(
		'.header-nav__search-button, .header-nav__search-button *',
		'[data-drupal-selector="block-search-wide-button"], [data-drupal-selector="block-search-wide-button"] *',
		)
		) {
		toggleSearchVisibility(!searchIsVisible());
		} else if (
		searchIsVisible() &&
		!e.target.matches('.search-wide__wrapper, .search-wide__wrapper *')
		!e.target.matches(
		'[data-drupal-selector="block-search-wide-wrapper"], [data-drupal-selector="block-search-wide-wrapper"] *',
		)
		) {
		toggleSearchVisibility(false);
		}