@codegouvfr/react-dsfr/dsfr/component/checkbox/checkbox.main.css

French State Design System React integration library

/*!
 * DSFR v1.8.5 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@charset "UTF-8";

/* ¯¯¯¯¯¯¯¯¯ *\
  CHECKBOX
\* ˍˍˍˍˍˍˍˍˍ */
.fr-checkbox-group {
  position: relative;
  /**
  * On cache l'input de type checkbox pour le styler via le label
  */

  /**
  * Modificateur pour gérer l'état erreur
  */

  /**
  * Modificateur pour gérer l'état validé
  */
}

.fr-checkbox-group input[type=checkbox] {
  position: absolute;
  margin: 0;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  /**
  * On applique les styles au pseudo élément before du label quand l'input présente
  * un état check ou active
  */

  /**
  * Mixins pour appliquer les styles correspondant au focus ainsi qu'à l'état disabled
  */
}

.fr-checkbox-group input[type=checkbox] + label {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 2rem;

  /**
  * 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;
  background-size: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.25rem;
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey);
}

.fr-checkbox-group--sm input[type=checkbox] + label::before {
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  left: -1.75rem;
}

.fr-checkbox-group--error::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.75rem;
  width: 2px;
  height: 100%;
  box-shadow: inset 2px 0 0 0 var(--border-plain-error);
}

.fr-checkbox-group--valid::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.75rem;
  width: 2px;
  height: 100%;
  box-shadow: inset 2px 0 0 0 var(--border-plain-success);
}

.fr-checkbox-group .fr-message:first-child {
  margin-top: 0.5rem;
}

/**
 * L'input de type checkbox avec son label est contenu dans un groupe
 * Ce groupe contient également les textes de validation, d'erreur et d'aide (optionnels)
 */

.fr-checkbox-group input[type=checkbox]:checked + label::before,
.fr-checkbox-group input[type=checkbox]:active:not(:disabled) + label::before {
  background-color: var(--background-active-blue-france);

  --idle: transparent;
  --hover: var(--background-active-blue-france-hover);
  --active: var(--background-active-blue-france-active);
  --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='%23fff' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
  background-image: var(--data-uri-svg);
}

:root:where([data-fr-theme="dark"]) .fr-checkbox-group input[type=checkbox]:checked + label::before,
:root:where([data-fr-theme="dark"]) .fr-checkbox-group input[type=checkbox]:active:not(:disabled) + 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='%23161616' 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 {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey);
}

.fr-checkbox-group input[type=checkbox]:disabled:checked + label::before {
  color: var(--text-disabled-grey);
  background-color: var(--background-disabled-grey);

  --idle: transparent;
  --hover: var(--background-disabled-grey-hover);
  --active: var(--background-disabled-grey-active);
  --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>");
  background-image: var(--data-uri-svg);
}

:root:where([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 {
  color: var(--text-default-error);
}

.fr-checkbox-group--valid input[type=checkbox] + label {
  color: var(--text-default-success);
}

.fr-fieldset .fr-fieldset__content .fr-checkbox-group--sm label::before {
  margin-top: 1rem;
}

@media (min-width: 36em) {
  /*! media sm */
}

@media (min-width: 48em) {
  /*! media md */
}

@media (min-width: 62em) {
  /*! media lg */
}

@media (min-width: 78em) {
  /*! media xl */
}