/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ SEARCH \* ˍˍˍˍˍˍˍˍˍ */ .fr-search-bar { display: flex; flex-direction: row; } .fr-search-bar .fr-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; /* added line */ border: 0; display: block; } .fr-search-bar .fr-input { margin: 0; border-radius: 0.25rem 0 0; max-height: 2.5rem; box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france); } .fr-search-bar .fr-input::placeholder { font-style: italic; } .fr-search-bar .fr-input::-webkit-search-cancel-button { -webkit-appearance: none; width: 1rem; height: 1rem; background-repeat: no-repeat; background-size: 1rem 1rem; --data-uri-svg: url('data:image/svg+xml;charset=utf-8,'); background-image: var(--data-uri-svg); } .fr-search-bar .fr-btn { font-size: 1rem; line-height: 1.5rem; min-height: 2.5rem; padding: 0.5rem 1rem; overflow: hidden; white-space: nowrap; max-width: 2.5rem; max-height: 2.5rem; padding-left: 0.5rem; padding-right: 0.5rem; flex: 1 0 auto; border-radius: 0 0.25rem 0 0; } .fr-search-bar .fr-btn::before { --icon-size: 1.5rem; margin-left: 0; margin-right: 0.5rem; flex: 0 0 auto; display: inline-block; vertical-align: calc((0.75em - var(--icon-size)) * 0.5); background-color: currentColor; width: var(--icon-size); height: var(--icon-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../../icons/system/search-line.svg"); mask-image: url("../../icons/system/search-line.svg"); content: ""; } .fr-search-bar .fr-input--valid { box-shadow: inset 0 -2px 0 0 var(--border-plain-success); } .fr-search-bar .fr-input--error { box-shadow: inset 0 -2px 0 0 var(--border-plain-error); } :root[data-fr-theme=dark] .fr-search-bar .fr-input::-webkit-search-cancel-button { --data-uri-svg: url('data:image/svg+xml;charset=utf-8,'); } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ .fr-search-bar--lg .fr-btn { font-size: 1.125rem; line-height: 1.75rem; min-height: 3rem; padding: 0.5rem 1.5rem; overflow: initial; max-width: 100%; max-height: none; } .fr-search-bar--lg .fr-btn::before { --icon-size: 1.5rem; margin-left: -0.1875rem; margin-right: 0.5rem; } .fr-search-bar--lg .fr-input { max-height: 3rem; } } @media (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ }