/*! * DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions) */ @charset "UTF-8"; /* ¯¯¯¯¯¯¯¯¯ *\ CHECKBOX \* ˍˍˍˍˍˍˍˍˍ */ .fr-checkbox-group { position: relative; } .fr-checkbox-group input[type=checkbox] { position: absolute; margin: 0; width: 1.5rem; height: 1.5rem; opacity: 0; } .fr-checkbox-group input[type=checkbox] + label { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin-left: 2rem; --data-uri-svg: none; /** * On ajoute l'icône check-line en taille sm via un pseudo element before */ } .fr-checkbox-group input[type=checkbox] + label .fr-hint-text { margin: 0; width: 100%; } .fr-checkbox-group input[type=checkbox] + label::before { content: ""; display: block; position: absolute; top: 0; left: -2rem; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border-radius: 0.25rem; background-size: 0.25rem 0.25rem, calc(100% - 0.25rem) 1px, 0.25rem 0.25rem, 1px calc(100% - 0.5rem), 0.25rem 0.25rem, calc(100% - 0.5rem) 1px, 0.25rem 0.25rem, 1px calc(100% - 0.5rem), 1rem; background-position: 0 0, 0.25rem 0, 100% 0, 0 0.25rem, 100% 100%, calc(100% - 0.25rem) 100%, 0 100%, 100% 0.25rem, center; background-repeat: no-repeat; background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), var(--data-uri-svg); } .fr-checkbox-group--sm input[type=checkbox] { top: 0.25rem; width: 1rem; height: 1rem; } .fr-checkbox-group--sm input[type=checkbox] + label { margin-left: 1.5rem; } .fr-checkbox-group--sm input[type=checkbox] + label::before { width: 1rem; height: 1rem; margin-top: 0.25rem; left: -1.5rem; } .fr-checkbox-group--error::before { content: ""; position: absolute; top: 0; left: -0.75rem; width: 2px; height: 100%; background-color: var(--border-plain-error); --idle: transparent; --hover: var(--border-plain-error-hover); --active: var(--border-plain-error-active); } .fr-checkbox-group--valid::before { content: ""; position: absolute; top: 0; left: -0.75rem; width: 2px; height: 100%; background-color: var(--border-plain-success); --idle: transparent; --hover: var(--border-plain-success-hover); --active: var(--border-plain-success-active); } .fr-checkbox-group .fr-message:first-child { margin-top: 1rem; } .fr-checkbox-group input[type=checkbox]:checked + label::before { background-color: var(--background-active-blue-france); background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), var(--data-uri-svg); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:checked + label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-checkbox-group input[type=checkbox]:disabled + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), var(--data-uri-svg); } .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before { background-color: var(--background-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-checkbox-group--error input[type=checkbox] + label, .fr-checkbox-group--error input[type=checkbox]:checked + label { color: var(--text-default-error); } .fr-checkbox-group--error input[type=checkbox] + label::before, .fr-checkbox-group--error input[type=checkbox]:checked + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg); } .fr-checkbox-group--valid input[type=checkbox] + label, .fr-checkbox-group--valid input[type=checkbox]:checked + label { color: var(--text-default-success); } .fr-checkbox-group--valid input[type=checkbox] + label::before, .fr-checkbox-group--valid input[type=checkbox]:checked + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg); } .fr-fieldset--error .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg); } .fr-fieldset--valid .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg); } .fr-fieldset .fr-fieldset__content .fr-checkbox-group--sm label::before { margin-top: 0.25rem; } .fr-fieldset .fr-fieldset__content .fr-checkbox-group input[type=checkbox] { margin-top: 0.75rem; } @media (min-width: 36em) { /*! media sm */ /*! media sm */ } @media (min-width: 48em) { /*! media md */ /*! media md */ } @media (min-width: 62em) { /*! media lg */ /*! media lg */ } @media (min-width: 78em) { /*! media xl */ /*! media xl */ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .fr-checkbox-group input[type=checkbox] { opacity: 1; margin-top: 0; } .fr-fieldset__content .fr-checkbox-group input[type=checkbox] { margin-top: 1.5rem; } .fr-fieldset__content + .fr-valid-text, .fr-fieldset__content + .fr-error-text { margin-top: 1rem; } .fr-checkbox-group--error input[type=checkbox] + label, .fr-checkbox-group--error input[type=checkbox]:checked + label { color: #ce0500; } .fr-checkbox-group--error::before { background-color: #ce0500; } .fr-checkbox-group--valid input[type=checkbox] + label, .fr-checkbox-group--valid input[type=checkbox]:checked + label { color: #18753c; } .fr-checkbox-group--valid::before { background-color: #18753c; } } @media print { .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), var(--data-uri-svg); } .fr-checkbox-group input[type=checkbox]:checked + label::before { background-color: var(--background-active-blue-france); background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), var(--data-uri-svg); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:checked + label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-checkbox-group input[type=checkbox]:disabled + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), var(--data-uri-svg); } .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before { background-color: var(--background-disabled-grey); --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } :root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before { --data-uri-svg: url("data:image/svg+xml;charset=utf-8,"); } .fr-checkbox-group--error input[type=checkbox] + label, .fr-checkbox-group--error input[type=checkbox]:checked + label { color: #ce0500; } .fr-checkbox-group--error input[type=checkbox] + label::before, .fr-checkbox-group--error input[type=checkbox]:checked + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg); } .fr-checkbox-group--error::before { background-color: #ce0500; } .fr-checkbox-group--valid input[type=checkbox] + label, .fr-checkbox-group--valid input[type=checkbox]:checked + label { color: #18753c; } .fr-checkbox-group--valid input[type=checkbox] + label::before, .fr-checkbox-group--valid input[type=checkbox]:checked + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg); } .fr-checkbox-group--valid::before { background-color: #18753c; } .fr-fieldset--error .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg); } .fr-fieldset--valid .fr-checkbox-group input[type=checkbox] + label::before { background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg); } }