/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ INPUT \* ˍˍˍˍˍˍˍˍˍ */ .fr-input { display: block; width: 100%; border-radius: 0.25rem 0.25rem 0 0; font-size: 1rem; line-height: 1.5rem; padding: 0.5rem 1rem; color: var(--text-default-grey); background-color: var(--background-contrast-grey); --idle: transparent; --hover: var(--background-contrast-grey-hover); --active: var(--background-contrast-grey-active); box-shadow: inset 0 -2px 0 0 var(--border-plain-grey); } .fr-input:not(textarea) { max-height: 2.5rem; } .fr-input::placeholder { opacity: 1; font-style: italic; color: var(--text-mention-grey); } .fr-input::-webkit-contacts-auto-fill-button { cursor: pointer; background-color: var(--text-label-grey); --idle: transparent; --hover: var(--text-label-grey-hover); --active: var(--text-label-grey-active); } .fr-input[type=date] { min-height: 2.5rem; } @supports selector(::-webkit-calendar-picker-indicator) { .fr-input[type=date] { background-repeat: no-repeat; background-position: calc(100% - 1rem) 50%; background-size: 1rem 1rem; padding-right: 3rem; --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } .fr-input[type=date]::-webkit-calendar-picker-indicator { display: block; padding: 1rem; margin-right: -2.5rem; opacity: 0; } } .fr-input-wrap { position: relative; display: block; } .fr-input-wrap[class^=fr-icon-] .fr-input, .fr-input-wrap[class*=" fr-icon-"] .fr-input, .fr-input-wrap[class^=fr-fi-] .fr-input, .fr-input-wrap[class*=" fr-fi-"] .fr-input { padding-right: 3rem; } .fr-input-wrap[class^=fr-icon-]::before, .fr-input-wrap[class*=" fr-icon-"]::before, .fr-input-wrap[class^=fr-fi-]::before, .fr-input-wrap[class*=" fr-fi-"]::before { --icon-size: 1rem; position: absolute; top: 0.75rem; right: 1rem; bottom: 0.75rem; margin: auto; pointer-events: none; } .fr-input-wrap--addon, .fr-input-wrap--action { display: flex; flex-direction: row; width: 100%; } .fr-input-wrap--addon > *:first-child:not(:last-child) { border-radius: 0.25rem 0 0 0; } .fr-input-wrap--addon > *:last-child:not(:first-child) { border-radius: 0 0.25rem 0 0; } .fr-input-wrap--action .fr-btn { margin-left: 1rem; } .fr-input-wrap + .fr-hint-text { margin-top: 1rem; } .fr-input-group { position: relative; } .fr-input-group .fr-message:first-child { margin-top: 1rem; } .fr-input-group--valid::before, .fr-input-group--error::before, .fr-input-group--info::before { content: ""; display: block; pointer-events: none; position: absolute; top: 0; right: -0.75rem; bottom: 0; left: -0.75rem; background-repeat: no-repeat; background-position: 0 0; background-size: 0.125rem 100%; } textarea.fr-input { min-height: 3.75rem; } .fr-input:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey); } .fr-input:autofill, .fr-input:autofill:hover, .fr-input:autofill:focus, .fr-input:-webkit-autofill, .fr-input:-webkit-autofill:hover, .fr-input:-webkit-autofill:focus { box-shadow: inset 0 -2px 0 0 var(--border-plain-grey), inset 0 0 0 1000px var(--background-contrast-info); -webkit-text-fill-color: var(--text-label-grey); } @supports selector(::-webkit-calendar-picker-indicator) { :root[data-fr-theme=dark] .fr-input[type=date] { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-input[type=date]:disabled { color: var(--text-disabled-grey); box-shadow: inset 0 -2px 0 0 var(--border-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); background-image: var(--data-uri-svg); } :root[data-fr-theme=dark] .fr-input[type=date]:disabled { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } } .fr-input-wrap--addon > .fr-input:not(:last-child) { box-shadow: inset 0 -2px 0 0 var(--border-action-high-blue-france); } .fr-fieldset--valid .fr-input, .fr-fieldset--valid .fr-input-wrap--addon > .fr-input:not(:last-child), .fr-input-group--valid .fr-input, .fr-input-group--valid .fr-input-wrap--addon > .fr-input:not(:last-child) { box-shadow: inset 0 -2px 0 0 var(--border-plain-success); } .fr-fieldset--error .fr-input, .fr-fieldset--error .fr-input-wrap--addon > .fr-input:not(:last-child), .fr-input-group--error .fr-input, .fr-input-group--error .fr-input-wrap--addon > .fr-input:not(:last-child) { box-shadow: inset 0 -2px 0 0 var(--border-plain-error); } .fr-input-group--error::before { background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error)); } .fr-input-group--valid::before { background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success)); } .fr-input-group--info::before { background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info)); } @media (min-width: 36em) { /*! media sm */ } @media (min-width: 48em) { /*! media md */ } @media (min-width: 62em) { /*! media lg */ } @media (min-width: 78em) { /*! media xl */ }