@codegouvfr/react-dsfr/dsfr/component/highlight/highlight.css

French State Design System React integration library

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

/* ¯¯¯¯¯¯¯¯¯ *\
  HIGHLIGHT
\* ˍˍˍˍˍˍˍˍˍ */
.fr-highlight {
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-france);
}

.fr-highlight--green-tilleul-verveine {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-tilleul-verveine);
}

.fr-highlight--green-bourgeon {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-bourgeon);
}

.fr-highlight--green-emeraude {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-emeraude);
}

.fr-highlight--green-menthe {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-menthe);
}

.fr-highlight--green-archipel {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-archipel);
}

.fr-highlight--blue-ecume {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-ecume);
}

.fr-highlight--blue-cumulus {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-cumulus);
}

.fr-highlight--purple-glycine {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-purple-glycine);
}

.fr-highlight--pink-macaron {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-pink-macaron);
}

.fr-highlight--pink-tuile {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-pink-tuile);
}

.fr-highlight--yellow-tournesol {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-yellow-tournesol);
}

.fr-highlight--yellow-moutarde {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-yellow-moutarde);
}

.fr-highlight--orange-terre-battue {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-orange-terre-battue);
}

.fr-highlight--brown-cafe-creme {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-brown-cafe-creme);
}

.fr-highlight--brown-caramel {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-brown-caramel);
}

.fr-highlight--brown-opera {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-brown-opera);
}

.fr-highlight--beige-gris-galet {
  box-shadow: inset 0.25rem 0 0 0 var(--border-default-beige-gris-galet);
}

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

  /*! media sm */
}

@media (min-width: 48em) {
  /*! media md */
  .fr-highlight {
    padding-left: 2rem;
    margin-left: 2rem;
  }

  /*! 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-highlight {
    box-shadow: inset 0.25rem 0 0 0 #6a6af4;
  }

  .fr-highlight--green-tilleul-verveine {
    box-shadow: inset 0.25rem 0 0 0 #b7a73f;
  }

  .fr-highlight--green-bourgeon {
    box-shadow: inset 0.25rem 0 0 0 #68a532;
  }

  .fr-highlight--green-emeraude {
    box-shadow: inset 0.25rem 0 0 0 #00a95f;
  }

  .fr-highlight--green-menthe {
    box-shadow: inset 0.25rem 0 0 0 #009081;
  }

  .fr-highlight--green-archipel {
    box-shadow: inset 0.25rem 0 0 0 #009099;
  }

  .fr-highlight--blue-ecume {
    box-shadow: inset 0.25rem 0 0 0 #465f9d;
  }

  .fr-highlight--blue-cumulus {
    box-shadow: inset 0.25rem 0 0 0 #417dc4;
  }

  .fr-highlight--purple-glycine {
    box-shadow: inset 0.25rem 0 0 0 #a558a0;
  }

  .fr-highlight--pink-macaron {
    box-shadow: inset 0.25rem 0 0 0 #e18b76;
  }

  .fr-highlight--pink-tuile {
    box-shadow: inset 0.25rem 0 0 0 #ce614a;
  }

  .fr-highlight--yellow-tournesol {
    box-shadow: inset 0.25rem 0 0 0 #c8aa39;
  }

  .fr-highlight--yellow-moutarde {
    box-shadow: inset 0.25rem 0 0 0 #c3992a;
  }

  .fr-highlight--orange-terre-battue {
    box-shadow: inset 0.25rem 0 0 0 #e4794a;
  }

  .fr-highlight--brown-cafe-creme {
    box-shadow: inset 0.25rem 0 0 0 #d1b781;
  }

  .fr-highlight--brown-caramel {
    box-shadow: inset 0.25rem 0 0 0 #c08c65;
  }

  .fr-highlight--brown-opera {
    box-shadow: inset 0.25rem 0 0 0 #bd987a;
  }

  .fr-highlight--beige-gris-galet {
    box-shadow: inset 0.25rem 0 0 0 #aea397;
  }
}