@codegouvfr/react-dsfr/dsfr/component/alert/alert.legacy.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)
 */
@media (min-width: 36em) {
  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */
}
@media (min-width: 62em) {
  /*! media lg */
}
@media (min-width: 78em) {
  /*! media xl */
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
  * reset des marges dans l'alerte
  */
  .fr-alert::before,
  .fr-alert::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 1.5rem;
    height: 1.5rem;
  }

  .fr-alert__title,
  .fr-alert p {
    margin: 0 0 0.25rem;
  }

  .fr-alert--info::before {
    background-image: url("../../icons/system/fr--info-fill.svg");
  }

  .fr-alert--success::before {
    background-image: url("../../icons/system/fr--success-fill.svg");
  }

  .fr-alert--error::before {
    background-image: url("../../icons/system/fr--error-fill.svg");
  }

  .fr-alert--warning::before {
    background-image: url("../../icons/system/fr--warning-fill.svg");
  }

  .fr-alert .fr-btn--close::before,
  .fr-alert .fr-btn--close::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../../icons/system/close-line.svg");
    width: 1rem;
    height: 1rem;
  }

  /**
  * reset des marges dans l'alerte
  */
  .fr-alert .fr-link--close::before,
  .fr-alert .fr-link--close::after {
    background-color: transparent;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("../../icons/system/close-line.svg");
    width: 1rem;
    height: 1rem;
  }

  .fr-alert {
    box-shadow: inset 0 0 0 1px #3a3a3a, inset 2.5rem 0 0 0 #3a3a3a;
  }

  .fr-alert::before {
    color: #fff;
  }

  .fr-alert--info {
    box-shadow: inset 0 0 0 1px #0063cb, inset 2.5rem 0 0 0 #0063cb;
  }

  .fr-alert--error {
    box-shadow: inset 0 0 0 1px #ce0500, inset 2.5rem 0 0 0 #ce0500;
  }

  .fr-alert--success {
    box-shadow: inset 0 0 0 1px #18753c, inset 2.5rem 0 0 0 #18753c;
  }

  .fr-alert--warning {
    box-shadow: inset 0 0 0 1px #b34000, inset 2.5rem 0 0 0 #b34000;
  }
}