179 lines
11 KiB
CSS
179 lines
11 KiB
CSS
|
/*!
|
||
|
|
* 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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f5f5fe' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
|
||
|
|
}
|
||
|
|
|
||
|
|
: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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000091' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
|
||
|
|
}
|
||
|
|
|
||
|
|
.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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23929292' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
|
||
|
|
}
|
||
|
|
|
||
|
|
: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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23666' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
|
||
|
|
}
|
||
|
|
|
||
|
|
.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 (min-width: 48em) {
|
||
|
|
/*! media md */
|
||
|
|
}
|
||
|
|
@media (min-width: 62em) {
|
||
|
|
/*! media lg */
|
||
|
|
}
|
||
|
|
@media (min-width: 78em) {
|
||
|
|
/*! media xl */
|
||
|
|
}
|